/* ==========================================================================
   Idaho Custom Cabinets — shared stylesheet
   Token-driven. Every page uses this file and nothing else.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party request) ---------- */
@font-face{
  font-family:'Jost';
  src:url('../fonts/jost-latin-var.woff2') format('woff2-variations'),
      url('../fonts/jost-latin-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-var.woff2') format('woff2-variations'),
      url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

/* ---------- Tokens ---------- */
:root{
  --ink-900:#14110D; --ink-800:#1E1A15; --ink-700:#2A241D; --ink-600:#3B332A;
  --bone-50:#FBF9F6; --bone-100:#F4F0E9; --bone-200:#E7E0D5; --bone-300:#D3C9BA;
  --brass-300:#D9B478; --brass-500:#B98A3E; --brass-700:#8A6220;
  --text:#1C1813; --text-muted:#5A5045;
  --text-inv:#F5F1EA; --text-inv-muted:#B9AE9E;

  --font-display:'Jost',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  --section:clamp(4rem,8vw,8rem);
  --container:1200px; --gutter:1.5rem;

  --radius:2px; --radius-card:4px;
  --shadow-card:0 1px 2px rgb(20 17 13/.04),0 8px 24px rgb(20 17 13/.06);
  --shadow-lift:0 2px 4px rgb(20 17 13/.06),0 16px 40px rgb(20 17 13/.10);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-micro:200ms; --dur-reveal:400ms; --dur-hero:800ms;
  --header-h:76px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;background:var(--bone-50);color:var(--text);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;margin:0;color:var(--text)}
h1{font-size:clamp(2.25rem,1.5rem + 3.2vw,4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);letter-spacing:-.01em}
h3{font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem);font-weight:500;letter-spacing:-.005em}
/* h4 had no size, so it inherited 1em at weight 600 — smaller AND heavier than the
   h3 above it, which ran the scale backwards. Sits in the eyebrow register instead. */
h4{
  font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);line-height:1.4;margin-bottom:var(--s2);
}
.section--dark h4{color:var(--text-inv-muted)}
p{margin:0 0 var(--s4);max-width:68ch}
a{color:var(--brass-700);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink-900)}
/* Links on dark surfaces. brass-700 on --ink-900 measures 3.45:1 and fails AA,
   so every dark panel needs the light brass instead. */
.quote-card a:not(.btn),
.section--dark a:not(.btn),
.cta-band a:not(.btn){color:var(--brass-300)}
.quote-card a:not(.btn):hover,
.section--dark a:not(.btn):hover,
.cta-band a:not(.btn):hover{color:#EBCB96}
ul,ol{margin:0 0 var(--s4);padding-left:1.25rem}
li{margin-bottom:var(--s2);max-width:66ch}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--bone-200);margin:var(--s7) 0}

:focus-visible{outline:2px solid var(--brass-700);outline-offset:2px;border-radius:var(--radius)}
/* The light outline belongs to genuinely dark surfaces only. Keying it to
   .site-header--dark alone kept it after the header turned near-white on scroll,
   giving a 1.44:1 focus ring — WCAG 1.4.11 wants 3:1 for non-text indicators. */
.site-header--dark.is-over-hero :focus-visible,
.hero :focus-visible,
.quote-card :focus-visible,
.section--dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.nav.is-open :focus-visible{outline-color:var(--brass-300)}

::selection{background:var(--brass-300);color:var(--ink-900)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:820px}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(3rem,5vw,4.5rem)}
/* For a thin band sitting directly above a full section: without this its own
   bottom padding stacks on the next section's top padding and leaves a gap the
   size of a small screen. The following section supplies the separation. */
.section--flush-end{padding-bottom:0}
.section--dark{background:var(--ink-900);color:var(--text-inv)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--text-inv)}
.section--dark p{color:var(--text-inv-muted)}
.section--bone{background:var(--bone-100)}

.skip-link{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--ink-900);color:var(--text-inv);
  padding:var(--s3) var(--s5);border-radius:var(--radius);
  font-family:var(--font-display);font-weight:500;text-decoration:none;
  transition:top var(--dur-micro) var(--ease);
}
.skip-link:focus{top:var(--s4);color:var(--text-inv)}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  font-family:var(--font-display);font-size:.8125rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass-700);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brass-500);flex:none}
/* On any dark surface the eyebrow MUST use brass-300 (9.64:1). brass-700 on
   ink-900 measures 3.45:1 and fails AA — see DESIGN-SYSTEM.md §2. */
.section--dark .eyebrow,
.hero .eyebrow,
.cta-band .eyebrow{color:var(--brass-300)}
.section-head{max-width:60ch;margin-bottom:var(--s7)}
.lead{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem);line-height:1.6;color:var(--text-muted)}
.section--dark .lead{color:var(--text-inv-muted)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--brass-700); --btn-fg:#fff; --btn-bd:var(--brass-700);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:0 var(--s5);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  font-family:var(--font-display);font-size:1rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease);
}
.btn:hover{--btn-bg:#6F4E19;--btn-bd:#6F4E19;color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* Ghost border is #8F8474 (3.49:1 on --bone-50), not --bone-300 (1.56:1) —
   WCAG 1.4.11 needs 3:1 for a UI component boundary or it reads as framed text. */
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:#8F8474}
.btn--ghost:hover{--btn-bg:var(--ink-900);--btn-fg:#fff;--btn-bd:var(--ink-900)}
.btn--on-dark{--btn-bg:transparent;--btn-fg:var(--text-inv);--btn-bd:rgb(217 180 120/.58)}
.btn--on-dark:hover{--btn-bg:var(--brass-300);--btn-fg:var(--ink-900);--btn-bd:var(--brass-300)}
.btn--lg{min-height:54px;padding:0 var(--s6);font-size:1.0625rem}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:transparent;
  transition:background var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),
             backdrop-filter var(--dur-micro) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header__inner{
  display:flex;align-items:center;gap:var(--s5);
  min-height:var(--header-h);
}
/* Solid is the DEFAULT, including for the dark-hero page. The transparent
   treatment is opt-IN via .is-over-hero, which JS adds. Written this way round so
   that if site.js ever fails the header degrades to solid-and-readable rather than
   leaving light-on-light text — i.e. an invisible nav. */
/* The blur MUST live on a pseudo-element, never on .site-header itself.
   backdrop-filter makes an element a containing block for position:fixed
   descendants — and .nav (the mobile overlay) is a child of the header, so with
   the filter on the header its inset:0 resolved against a 76px bar instead of
   the viewport, clipping the whole menu. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgb(251 249 246/.88);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  transition:opacity var(--dur-micro) var(--ease);
}
.site-header.is-stuck,.site-header--solid,.site-header--dark{border-bottom-color:var(--bone-200)}
.site-header--dark.is-over-hero::before{opacity:0}
.site-header--dark.is-over-hero{border-bottom-color:transparent}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;min-width:0;margin-right:auto}
@media (max-width:520px){
  .brand__sub{display:none}            /* the letterspaced city list is what overflows 360px */
  .brand__name{font-size:1rem}
}
/* Inline SVG monogram — inherits currentColor from .brand, so no invert filter is
   needed on dark surfaces. The full raster lockup is kept for OG/social only; its
   stacked interior lettering is unreadable below about 200px. */
.brand__mark{width:40px;height:38px;flex:none;color:var(--text)}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{
  font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
  letter-spacing:.02em;color:var(--text);text-transform:uppercase;
}
.brand__sub{
  font-family:var(--font-display);font-size:.625rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);
}
.nav{display:flex;align-items:center;gap:var(--s5)}
.nav__link{
  font-family:var(--font-display);font-size:.9375rem;font-weight:500;
  color:var(--text);text-decoration:none;padding:var(--s2) 0;position:relative;
  transition:color var(--dur-micro) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass-700);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-micro) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--brass-700)}

/* Transparent-over-dark-hero variant. MUST come after the base .brand/.nav rules
   above — kept together and last so the light-on-dark treatment is unambiguous. */
.site-header--dark.is-over-hero .brand__name{color:var(--text-inv)}
.site-header--dark.is-over-hero .brand__sub{color:var(--text-inv-muted)}
.site-header--dark.is-over-hero .brand__mark{color:var(--text-inv)}
.site-header--dark.is-over-hero .nav-toggle{color:var(--text-inv)}
.site-header--dark.is-over-hero .nav__link{color:var(--text-inv)}
.site-header--dark.is-over-hero .nav__link:hover{color:var(--brass-300)}
.site-header--dark.is-over-hero .nav__link::after{background:var(--brass-300)}
.site-header--dark.is-over-hero .nav__link[aria-current="page"]{color:var(--brass-300)}

/* Persistent mobile click-to-call. The nav's phone button is INSIDE .nav, which
   is translated off-screen below 1000px — so without this the only phone link on
   a phone is buried in the hamburger. Highest-intent action, always reachable. */
.header-call{display:none}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  flex:none;                       /* must never shrink below the 44px tap target */
  width:48px;height:48px;margin-right:calc(var(--s3) * -1);
  background:none;border:0;color:var(--text);cursor:pointer;
}
.nav-toggle svg{width:26px;height:26px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

@media (max-width:1000px){
  /* z-index 100 beats the .nav overlay's 99. Without it the close (X) icon is
     painted underneath the open menu and taps land on the overlay — on touch,
     with no Escape key, that leaves no way out of the menu. */
  .nav-toggle{display:inline-flex;position:relative;z-index:100}
  .header-call{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:48px;height:48px;margin-right:var(--s2);
    background:var(--brass-700);color:#fff;border-radius:var(--radius);
    text-decoration:none;
  }
  .header-call svg{width:20px;height:20px}
  .site-header--dark.is-over-hero .header-call{background:var(--brass-300);color:var(--ink-900)}
  .nav{
    position:fixed;inset:0;z-index:99;
    flex-direction:column;align-items:stretch;justify-content:center;gap:var(--s2);
    background:var(--ink-900);padding:var(--s8) var(--gutter) var(--s6);
    transform:translateY(-100%);visibility:hidden;
    /* visibility flips only AFTER the slide-out finishes, so the links are never
       focusable while off-screen. */
    transition:transform var(--dur-reveal) var(--ease),
               visibility 0s linear var(--dur-reveal);
    overflow-y:auto;
  }
  .nav.is-open{
    transform:translateY(0);visibility:visible;
    transition:transform var(--dur-reveal) var(--ease),visibility 0s;
  }
  .nav__link{
    color:var(--text-inv);font-size:1.5rem;font-weight:500;
    padding:var(--s4) 0;border-bottom:1px solid rgb(217 180 120/.16);
  }
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{color:var(--brass-300)}
  .nav .btn{margin-top:var(--s5);--btn-bg:var(--brass-300);--btn-fg:var(--ink-900);--btn-bd:var(--brass-300)}
  body.nav-open{overflow:hidden}
}

/* ---------- Hero (dark, cinematic) ---------- */
.hero{
  position:relative;background:var(--ink-900);color:var(--text-inv);
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  overflow:hidden;isolation:isolate;
}
.hero__canvas{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  /* no will-change: the canvas is never transformed, and a WebGL canvas already
     gets its own compositor layer. Promoting it again just costs memory. */
}
/* fallback + scrim so text always meets contrast even mid-render */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(90% 70% at 72% 42%,#3B332A 0%,#221D17 45%,#14110D 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,var(--ink-900) 0%,rgb(20 17 13/.86) 34%,rgb(20 17 13/.30) 58%,rgb(20 17 13/.10) 100%);
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);align-items:center}
.hero__copy{max-width:37rem}
.hero h1{color:var(--text-inv);font-size:clamp(2.75rem,1.6rem + 5.2vw,6rem)}
.hero h1 em{font-style:normal;color:var(--brass-300);display:block}
.hero__lead{color:var(--text-inv-muted);font-size:clamp(1.125rem,1.05rem + .4vw,1.3125rem);margin-top:var(--s5);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero__actions .btn:first-child{--btn-bg:var(--brass-300);--btn-fg:var(--ink-900);--btn-bd:var(--brass-300)}
.hero__actions .btn:first-child:hover{--btn-bg:#EBCB96;--btn-bd:#EBCB96;--btn-fg:var(--ink-900)}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s7);
  padding-top:var(--s5);border-top:1px solid rgb(217 180 120/.22);
  font-family:var(--font-display);font-size:.8125rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-inv-muted);
}
.hero__trust span{display:flex;align-items:center;gap:var(--s2)}
.hero__trust span::before{content:"";width:5px;height:5px;background:var(--brass-500);flex:none}

@media (min-width:960px){
  .hero{min-height:min(88svh,860px);display:flex;align-items:center}
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

/* Phones: the stacked hero ran past 1500px, so the first screen ended mid-paragraph
   with no CTA in view. Tighten every band so the buttons and trust row make the fold. */
@media (max-width:640px){
  .hero{padding-top:calc(var(--header-h) + 2rem);padding-bottom:2.5rem}
  .hero h1{font-size:clamp(2.375rem,1.4rem + 4.4vw,3rem)}
  .hero__lead{margin-top:var(--s4);font-size:1.0625rem}
  .hero__grid{gap:var(--s5)}
  .hero__actions{margin-top:var(--s5)}
  .hero__actions .btn{width:100%}
  .hero__trust{
    margin-top:var(--s5);padding-top:var(--s4);
    gap:var(--s1) var(--s4);font-size:.6875rem;letter-spacing:.1em;
  }
  .quote-card{padding:var(--s5);max-width:none}
}

/* ---------- Quick quote card (above the fold) ---------- */
.quote-card{
  background:rgb(43 36 29/.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgb(217 180 120/.28);border-radius:var(--radius-card);
  padding:var(--s6);max-width:26rem;width:100%;justify-self:end;
}
.quote-card h2{font-size:1.375rem;color:var(--text-inv);margin-bottom:var(--s2)}
.quote-card p{color:var(--text-inv-muted);font-size:.9375rem;margin-bottom:var(--s5)}
.quote-card .field{margin-bottom:var(--s4)}
.quote-card label{color:var(--text-inv)}
.quote-card input,.quote-card select,.quote-card textarea{
  background:rgb(20 17 13/.55);border-color:rgb(217 180 120/.30);color:var(--text-inv);
}
.quote-card input::placeholder,.quote-card textarea::placeholder{color:#8C8172}
.quote-card input:focus,.quote-card select:focus,.quote-card textarea:focus{
  border-color:var(--brass-300);box-shadow:0 0 0 3px rgb(217 180 120/.18)
}
.quote-card .btn{--btn-bg:var(--brass-300);--btn-fg:var(--ink-900);--btn-bd:var(--brass-300)}
.quote-card .btn:hover{--btn-bg:#EBCB96;--btn-bd:#EBCB96}
.quote-card__alt{
  margin:var(--s4) 0 0;text-align:center;font-size:.9375rem;color:var(--text-inv-muted)
}
.quote-card__alt a{color:var(--brass-300);font-weight:500}
.quote-card__alt a:hover{color:#EBCB96}

/* ---------- Forms ---------- */
.field{margin-bottom:var(--s5)}
.field label{
  display:block;margin-bottom:var(--s2);
  font-family:var(--font-display);font-size:.875rem;font-weight:500;letter-spacing:.04em;
}
.field .req{color:var(--brass-700)}
.section--dark .field .req,.quote-card .req{color:var(--brass-300)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;min-height:48px;padding:var(--s3) var(--s4);
  background:#fff;color:var(--text);
  border:1px solid var(--bone-300);border-radius:var(--radius);
  font-family:var(--font-body);font-size:1rem;line-height:1.5;
  transition:border-color var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease);
}
textarea{min-height:130px;padding-top:var(--s3);resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5045' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.5rem}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brass-700);box-shadow:0 0 0 3px rgb(138 98 32/.14)
}
.field-error{
  display:block;margin-top:var(--s2);color:#A32F1E;font-size:.875rem;font-weight:500
}
.section--dark .field-error,.quote-card .field-error{color:#F0A08F}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#A32F1E}
.form-note{font-size:.8125rem;color:var(--text-muted);margin-top:var(--s4)}
.section--dark .form-note{color:var(--text-inv-muted)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Must never be display:none — a hidden element is absent from the accessibility
   tree, so the role="status" region is not registered and screen readers commonly
   miss the FIRST message. Style the box only once it has content. */
.form-status{margin-top:var(--s4);font-size:.9375rem}
.form-status:not(:empty){
  padding:var(--s4);border-radius:var(--radius);
  border:1px solid var(--bone-300);background:var(--bone-100)
}
.form-status--ok{border-color:#2F6B45;background:#EAF3ED;color:#1D4A2E}
.form-status--err{border-color:#A32F1E;background:#FBEDEA;color:#7A2314}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

.card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--bone-200);border-radius:var(--radius-card);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--dur-reveal) var(--ease),box-shadow var(--dur-reveal) var(--ease),
             border-color var(--dur-reveal) var(--ease);
}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--bone-300);color:inherit}
.card__media{position:relative;aspect-ratio:4/3;background:var(--bone-200);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
a.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:var(--s2)}
.card__body p{font-size:.9375rem;color:var(--text-muted);margin-bottom:var(--s4)}
.card__more{
  margin-top:auto;font-family:var(--font-display);font-weight:500;font-size:.9375rem;
  color:var(--brass-700);display:inline-flex;align-items:center;gap:var(--s2);
}
a.card:hover .card__more{color:var(--ink-900)}
.card__more svg{width:16px;height:16px;transition:transform var(--dur-micro) var(--ease)}
a.card:hover .card__more svg{transform:translateX(3px)}

/* numbered process steps */
.step{border-top:1px solid var(--bone-200);padding-top:var(--s5)}
.section--dark .step{border-top-color:rgb(217 180 120/.22)}
.step__n{
  font-family:var(--font-display);font-size:.8125rem;font-weight:500;letter-spacing:.18em;
  color:var(--brass-700);display:block;margin-bottom:var(--s3)
}
.section--dark .step__n{color:var(--brass-300)}
.step h3{margin-bottom:var(--s2)}
.step p{font-size:.9375rem;color:var(--text-muted);margin:0}
.section--dark .step p{color:var(--text-inv-muted)}

/* ---------- Gallery ---------- */
.gallery{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.gallery figure{margin:0}
.gallery__item{
  position:relative;display:block;border-radius:var(--radius-card);overflow:hidden;
  background:var(--bone-200);border:1px solid var(--bone-200);
}
.gallery__item img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.gallery figcaption{
  font-size:.875rem;color:var(--text-muted);padding-top:var(--s3);line-height:1.5
}
/* For grids holding the lowest-resolution originals (400x300 and 422x422). Caps each
   tile near ~215 CSS px so those files still render at ~2x DPR instead of upscaling.
   Smaller and sharp beats larger and soft. */
.gallery--sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));max-width:44rem}
.gallery--sm .gallery__item img{aspect-ratio:4/3}

/* Portfolio layout: keeps each photo's own proportions instead of square-cropping,
   which matters when a wide kitchen shot would otherwise lose both ends. */
.gallery--natural{display:block;columns:3;column-gap:var(--s5)}
.gallery--natural figure{break-inside:avoid;margin:0 0 var(--s5);display:inline-block;width:100%}
.gallery--natural .gallery__item img{aspect-ratio:auto;height:auto;object-fit:fill}
@media (max-width:900px){.gallery--natural{columns:2}}
@media (max-width:560px){.gallery--natural{columns:1}}

/* ---------- Proof / trust strip ---------- */
.proof{
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  border-block:1px solid var(--bone-200);padding-block:var(--s6)
}
.proof__item{text-align:left}
.proof__k{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--text);
  display:block;line-height:1.2;margin-bottom:var(--s1)
}
.proof__v{font-size:.875rem;color:var(--text-muted);margin:0;line-height:1.5}
/* Dark-surface variant. Without this the proof band on a .section--dark page
   rendered near-black on near-black (1.07:1). .section--dark p does not rescue it
   because .proof__v is sometimes a <span>. */
.section--dark .proof{border-block-color:rgb(217 180 120/.22)}
.section--dark .proof__k{color:var(--text-inv)}
.section--dark .proof__v{color:var(--text-inv-muted)}

/* ---------- Testimonial ---------- */
.quote{
  border-left:2px solid var(--brass-500);padding-left:var(--s6);margin:0;max-width:60ch
}
.quote blockquote{margin:0;font-size:clamp(1.125rem,1.05rem + .5vw,1.4375rem);line-height:1.55;font-family:var(--font-display);font-weight:400}
.quote figcaption{margin-top:var(--s4);font-size:.875rem;color:var(--text-muted);letter-spacing:.04em}
.section--dark .quote figcaption{color:var(--text-inv-muted)}
/* NOTE: there is deliberately no star-rating component. Google publicly shows 4.2,
   so any rating badge is contradicted one click later. Do not add one. */

/* ---------- Testimonials ----------
   No stars, no average, no count: Google publicly shows 4.2 and a badge
   claiming better would be contradicted in one click. Names + platform only. */
.tgrid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.tcard{
  display:flex;flex-direction:column;margin:0;
  background:#fff;border:1px solid var(--bone-200);border-radius:var(--radius-card);
  padding:var(--s6);border-top:2px solid var(--brass-500);
}
.section--dark .tcard{background:var(--ink-800);border-color:var(--ink-600);border-top-color:var(--brass-500)}
.tcard blockquote{
  margin:0 0 var(--s5);font-size:1.0625rem;line-height:1.62;color:var(--text);
}
.section--dark .tcard blockquote{color:var(--text-inv)}
.tcard blockquote p{margin:0 0 var(--s3);max-width:none}
.tcard blockquote p:last-child{margin-bottom:0}
.tcard figcaption{
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--bone-200);
  font-family:var(--font-display);font-size:.875rem;font-weight:500;letter-spacing:.02em;
}
.section--dark .tcard figcaption{border-top-color:var(--ink-600);color:var(--text-inv)}
.tcard figcaption span{
  display:block;font-family:var(--font-body);font-weight:400;font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:var(--s1)
}
.section--dark .tcard figcaption span{color:var(--text-inv-muted)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--bone-200);max-width:820px}
.faq details{border-bottom:1px solid var(--bone-200)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:1.125rem;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2px solid var(--brass-700);border-bottom:2px solid var(--brass-700);
  transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-micro) var(--ease)
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details > div{padding-bottom:var(--s5)}
.faq p{margin-bottom:var(--s3)}
.faq p:last-child{margin-bottom:0}

/* ---------- Split feature ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:860px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--reverse .split__media{order:2}
}
/* isolate: the ::after brass rule sits at z-index:-1. Without its own stacking
   context it paints behind the nearest ancestor background, so it vanished on
   .section--bone and appeared only on plain sections — same component, two looks. */
.split__media{position:relative;isolation:isolate}
.split__media img{
  width:100%;border-radius:var(--radius-card);border:1px solid var(--bone-200);
}
.split__media::after{
  content:"";position:absolute;inset:auto -14px -14px auto;width:58%;height:58%;
  border-right:1px solid var(--brass-500);border-bottom:1px solid var(--brass-500);
  border-radius:0 0 var(--radius-card) 0;z-index:-1;pointer-events:none
}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink-900);color:var(--text-inv);position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 85% 50%,rgb(185 138 62/.20) 0%,transparent 62%);
  pointer-events:none
}
.cta-band .container{position:relative}
.cta-band h2{color:var(--text-inv)}
.cta-band p{color:var(--text-inv-muted)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.cta-band__actions .btn:first-child{--btn-bg:var(--brass-300);--btn-fg:var(--ink-900);--btn-bd:var(--brass-300)}
.cta-band__actions .btn:first-child:hover{--btn-bg:#EBCB96;--btn-bd:#EBCB96}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-800);color:var(--text-inv-muted);padding-block:var(--s8) var(--s6);font-size:.9375rem}
.site-footer a{color:var(--text-inv-muted);text-decoration:none}
.site-footer a:hover{color:var(--brass-300);text-decoration:underline}
.footer__grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.footer__h{
  font-family:var(--font-display);font-size:.8125rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-inv);margin:0 0 var(--s4)
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:var(--s3);max-width:none}
.site-footer .brand__name{color:var(--text-inv)}
.site-footer .brand__sub{color:var(--text-inv-muted)}
.site-footer .brand__mark{color:var(--text-inv)}
.footer__tagline{margin:var(--s4) 0 0;font-size:.9375rem;max-width:34ch;color:var(--text-inv-muted)}
.footer__bottom{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgb(217 180 120/.16);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between;
  font-size:.8125rem
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0;list-style:none;padding:0}
.footer__legal li{margin:0}
.footer__rce{
  font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;
  color:var(--text-inv-muted)
}

/* ---------- Page header (inner pages, light) ---------- */
.page-head{
  background:var(--bone-100);border-bottom:1px solid var(--bone-200);
  padding-block:clamp(2.5rem,5vw,4.5rem)
}
.page-head h1{margin-bottom:var(--s4)}
.page-head .lead{max-width:56ch;margin:0}
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;
  margin:0 0 var(--s5);font-size:.8125rem;color:var(--text-muted)
}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:var(--s2)}
.breadcrumb li + li::before{content:"/";color:var(--bone-300)}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brass-700);text-decoration:underline}

/* ---------- Prose (legal pages) ---------- */
.prose{max-width:72ch}
.prose h2{margin:var(--s8) 0 var(--s4)}
.prose h3{margin:var(--s6) 0 var(--s3)}
.prose h2:first-child{margin-top:0}
.prose ul{margin-bottom:var(--s5)}
.prose__meta{color:var(--text-muted);font-size:.9375rem;margin-bottom:var(--s7)}

/* ---------- Scroll reveal (IntersectionObserver-driven, no scroll listener) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-hero) var(--ease),transform var(--dur-hero) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:80ms}
.reveal[data-delay="2"]{transition-delay:160ms}
.reveal[data-delay="3"]{transition-delay:240ms}
.no-js .reveal{opacity:1;transform:none}

/* ---------- Utilities ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack > * + *{margin-top:var(--s4)}

/* ---------- Reduced motion: kill everything ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  .reveal{opacity:1!important;transform:none!important}
  .hero__canvas{will-change:auto}
  a.card:hover{transform:none}
  a.card:hover .card__media img{transform:none}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.nav,.hero__canvas,.cta-band,.quote-card{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}