/* website.css — North State Coatings homepage.
   Retro Americana trade identity: warm cream page, navy shell, brick-red action,
   gold highlight. All color/type/shape values trace to Brand/brand-tokens.css.
   Accent discipline: red = action (one primary CTA per view), gold = highlight.
   Anything marked PROPOSAL is a synthesis decision, not sourced from BRAND.md. */

@import url("brand/north-state/brand-tokens.css");

:root{
  /* Derived working values. The sourced tokens live in brand-tokens.css. */
  --ink:var(--navy);                     /* body text on cream */
  --muted:#5A6478;                       /* PROPOSAL: navy-tinted secondary text */
  --muted-dark:#94A0B8;                  /* PROPOSAL: secondary text on navy */
  --line:rgba(27,42,74,.14);             /* hairline on light surfaces */
  --line-dark:rgba(243,233,214,.16);     /* hairline on navy surfaces */
  --maxw:var(--maxw-site);               /* 1100px, sourced */
  /* One shape for every piece of imagery on the site: a rounded-bevel square.
     No circles, no hard 90-degree corners. BRAND.md specs 12px for content cards;
     media sits slightly softer at 16px so photos, swatches and placeholders all
     read as the same object. Small icon chips scale this down proportionally so
     they stay square-ish instead of collapsing back into circles. */
  --radius-media:16px;
  --radius-icon-lg:14px;
  --radius-icon-sm:6px;
  --shadow-card:0 10px 30px rgba(15,29,56,.10);
  --shadow-lift:0 18px 44px rgba(15,29,56,.18);
  --shadow-deep:0 26px 60px rgba(8,16,32,.45);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--cream); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* ---- brand lockup: badge + typeset name.
   PROPOSAL. BRAND.md has no lockup spec and the badge is raster only, so it is
   not legible at nav scale on its own. The badge is used whole and unmodified;
   the name beside it is plain type, not a redraw of the badge lettering. ---- */
.nm{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase;
  letter-spacing:var(--head-tracking); line-height:var(--head-line-height); color:var(--cream); }
.nm small{ display:block; font-family:var(--font-body); font-style:normal; font-weight:600;
  letter-spacing:.26em; color:var(--gold); }
.badge-mark{ display:block; width:auto; }

/* ---- shared bits ---- */
.eyebrow{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; color:var(--gold); }
.h-sec{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:clamp(2.4rem,5vw,4rem); letter-spacing:var(--head-tracking); line-height:var(--head-line-height); color:var(--navy); }
.h-sec .gold{ color:var(--brick-red); }   /* on cream, the accent is red; gold fails contrast here */
.lead{ color:var(--muted); font-size:1.05rem; max-width:60ch; }

/* =====================================================================
   VINTAGE AMERICANA DEVICE KIT
   Per brand/north-state/North-State-Vintage-Direction.md. 1950s Americana:
   confident and spacious, not cluttered. Cream / navy / red / gold only.
   Every device below is CSS or inline SVG so it scales and recolors.
   ===================================================================== */

/* --- 1. Extruded block headlines -------------------------------------
   Solid slab, not a stack of bands. Stops step by 1px with no gaps, so the
   stack fuses into one shape; a 2px step leaves visible banding between
   layers. One color, no blur, total offset 4px.
   Bold on dark, calm on light: the full extrude runs only on the navy
   surfaces (hero, CTA band, anything given .floor). On cream the heading
   stays a clean navy with a single soft offset. */
.extrude, .hero h1, .cta-band h2, .floor .h-sec{
  --x:var(--brick-red);
  text-shadow:1px 1px 0 var(--x), 2px 2px 0 var(--x), 3px 3px 0 var(--x), 4px 4px 0 var(--x); }

/* on cream: one quiet single-tone offset, no extrude */
.h-sec{ text-shadow:2px 2px 0 rgba(27,42,74,.13); }
.h-sec .gold{ text-shadow:2px 2px 0 rgba(27,42,74,.13); }

@media(max-width:680px){
  .extrude, .hero h1, .cta-band h2, .floor .h-sec{
    text-shadow:1px 1px 0 var(--x), 2px 2px 0 var(--x), 3px 3px 0 var(--x); }
}
@media(prefers-contrast:more){
  .h-sec, .h-sec .gold, .hero h1, .cta-band h2, .floor .h-sec, .extrude{ text-shadow:none; }
}

/* --- 4. Engraved line-art icons --------------------------------------
   One weight, one grid, one style across the whole set. Stroked with
   currentColor so an icon takes the color of the block it sits in. */
.vic{ width:30px; height:30px; display:block; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vic-sm{ width:22px; height:22px; }
.vic-lg{ width:42px; height:42px; stroke-width:1.5; }

/* --- 3. Retro seals and emblems --------------------------------------
   Supplied brand art from north-state-brand/Emblems, trimmed to its alpha
   bounding box and re-encoded as transparent webp. Each carries its own
   cream field, so it sits on cream or on navy without a plate behind it.
   Used as accents: sized small, given room, never repeated in a section. */
.emblem-art{ display:block; height:auto; }

/* hero emblem sizing lives with the hero block below */

/* guarantee seal, in the notched promise card */
.ticket .emblem-seal{ width:124px; }
@media(max-width:680px){ .ticket .emblem-seal{ width:104px; } }

/* EST stamp, in the footer brand column */
/* kept under the badge's visual weight so the primary mark still leads */
.footer .emblem-est{ width:76px; margin-top:20px; }

/* mascot: one accent only, beside the team copy */
.team-intro{ display:flex; justify-content:flex-end; margin-top:-18px; margin-bottom:6px; }
.mascot{ width:210px; height:auto; display:block; }
@media(max-width:900px){
  .team-intro{ justify-content:flex-start; margin-top:14px; }
  .mascot{ width:158px; }
}

/* --- 2. Marker highlight swash ---------------------------------------
   A solid, slightly rotated block behind ONE keyword. Used once per page.
   Cream on brick red measures 4.92:1, so it clears AA at any size. */
.swash{ position:relative; display:inline-block; padding:.02em .17em .07em; }
.swash::before{ content:""; position:absolute; inset:0; background:var(--brick-red);
  border-radius:5px; transform:rotate(-1.8deg); }
.swash > span{ position:relative; color:var(--cream); text-shadow:none; }

/* --- 5. Notched ticket-corner card ------------------------------------
   clip-path cuts the corners; the double rule is drawn by nesting
   red / cream / red / cream layers, since a clipped box drops its border. */
.ticket{ --notch:18px; margin-top:54px; background:var(--brick-red); padding:3px;
  clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,100% var(--notch),
    100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,var(--notch) 100%,
    0 calc(100% - var(--notch)),0 var(--notch)); }
.ticket-gap{ --notch:16px; background:var(--cream); padding:5px; clip-path:inherit; }
.ticket-rule{ --notch:12px; background:var(--brick-red); padding:1px; clip-path:inherit; }
.ticket-body{ --notch:11px; background:var(--white); clip-path:inherit;
  display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; padding:30px 34px; }
.ticket-copy .ey{ color:var(--brick-red); margin-bottom:11px; }
.ticket-copy h3{ font-family:var(--font-head); font-weight:900; font-style:italic;
  text-transform:uppercase; letter-spacing:var(--head-tracking); line-height:var(--head-line-height);
  font-size:clamp(1.4rem,2.6vw,1.95rem); color:var(--navy); }
.ticket-copy p{ margin-top:12px; color:var(--muted); font-size:.97rem; max-width:56ch; }
@media(max-width:680px){
  .ticket-body{ grid-template-columns:1fr; justify-items:start; gap:20px; padding:26px 24px; }
}



/* --- 8. Script accent -------------------------------------------------
   Pacifico, used the way the badge uses it: one short signature line.
   Never headlines, body, or buttons. */
.script-accent{ font-family:var(--font-script); font-size:clamp(1.25rem,2.6vw,1.7rem);
  color:var(--brick-red); line-height:1.35; margin-top:14px; }
.floor .script-accent{ color:var(--gold); }

/* --- 6 + 7. Tone-on-tone motif and sunburst rays ----------------------
   Both are background layers a shade off the surface they sit on, so they
   read as texture rather than content. Kept to two placements on the page. */
.motif{ position:relative; isolation:isolate; }
.motif::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill='none' stroke='%231B2A4A' stroke-opacity='.075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M34 20 22 40h8l-2 14 12-20h-8z'/><path d='M112 92 100 112h8l-2 14 12-20h-8z'/><rect x='92' y='24' width='22' height='9' rx='4'/><path d='M114 28h5a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-15a3 3 0 0 0-3 3v3'/><path d='M28 104h18M31 112h12'/></g></svg>"); }

/* rays behind the price card, one shade lighter than the section ground */
.price-wrap{ position:relative; isolation:isolate; }
.price-wrap::before{ content:""; position:absolute; z-index:-1; pointer-events:none;
  width:640px; height:640px; left:-90px; top:50%; transform:translateY(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(27,42,74,.055) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 38%, transparent 78%);
  mask-image:radial-gradient(closest-side, #000 38%, transparent 78%); }
@media(max-width:980px){ .price-wrap::before{ width:440px; height:440px; left:-70px; } }


/* buttons: sourced spec is brick-red bg, cream text, Inter 16 semibold, radius 8, 44px */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:.01em;
  height:var(--input-height); padding:0 24px; border-radius:var(--radius-button);
  border:1px solid transparent; cursor:pointer; transition:transform .15s, background .15s, color .15s, border-color .15s; }
.btn-red{ background:var(--brick-red); color:var(--cream); }
.btn-red:hover{ transform:translateY(-2px); background:#9E3028; }
.btn-ghost{ background:transparent; color:var(--navy); border-color:rgba(27,42,74,.32); }
.btn-ghost:hover{ border-color:var(--navy); background:rgba(27,42,74,.06); }
.btn-dark{ background:var(--navy); color:var(--cream); }
.btn-dark:hover{ transform:translateY(-2px); background:var(--deep-navy); }
/* ghost sitting on a navy surface (hero, CTA band, quote page, thank-you) */
.floor .btn-ghost{ color:var(--cream); border-color:rgba(243,233,214,.34); }
.floor .btn-ghost:hover{ border-color:var(--cream); background:rgba(243,233,214,.08); }

/* flake floor texture, rebuilt on deep navy with cream/gold flake */
.floor{ position:relative; background-color:var(--deep-navy); background-image:
    radial-gradient(circle, rgba(224,165,38,.42) 0.9px, transparent 1.4px),
    radial-gradient(circle, rgba(243,233,214,.40) 0.9px, transparent 1.4px),
    radial-gradient(circle, rgba(148,160,184,.34) 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(180,56,46,.30) 0.7px, transparent 1.2px);
  background-size:15px 15px, 23px 23px, 31px 31px, 19px 19px;
  background-position:0 0, 8px 12px, 17px 5px, 3px 9px; color:var(--cream); }
.floor-gloss::before{ content:""; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,255,255,.09) 0%, transparent 26%, transparent 70%, rgba(255,255,255,.04) 100%); pointer-events:none; }
.floor-vignette::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% -10%, rgba(27,42,74,.42), rgba(15,29,56,.90) 78%); pointer-events:none; }
.floor > *{ position:relative; z-index:1; }
.floor .h-sec, .floor .nm{ color:var(--cream); }
.floor .lead{ color:var(--muted-dark); }

/* image placeholder */
.ph{ position:relative; overflow:hidden; border-radius:var(--radius-media); background-image:repeating-linear-gradient(135deg,#E7DAC2 0 12px,#DFD0B4 12px 24px); border:1px solid var(--line); display:flex; align-items:flex-end; }
.ph .tagm{ font-family:var(--font-body); font-size:.66rem; color:var(--muted); background:rgba(243,233,214,.8); padding:5px 9px; border-radius:5px; margin:12px; }

/* reveal — content is VISIBLE by default; .anim plays a one-shot fade-up when
   the observer fires. If JS/IO never runs, content simply shows. */
.reveal.anim{ animation:riseIn .75s cubic-bezier(.2,.7,.2,1) both; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .reveal.anim{ animation:none; } }

/* ---- NAV ---- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .3s, border-color .3s, padding .3s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(15,29,56,.94); backdrop-filter:blur(12px); border-bottom-color:var(--line-dark); }
/* Bar sizing is driven by the badge, not by padding: min-height is set to the
   badge height plus its breathing room so the mark can never be clipped.
   gap:20px and the nowrap/min-width rules below keep the phone number and the
   CTA on one line at the tightest desktop widths. */
.nav .bar{ max-width:var(--maxw); margin:0 auto; padding:10px 32px; min-height:78px; display:flex; align-items:center; gap:20px; transition:padding .3s, min-height .3s; }
.nav.scrolled .bar{ padding:8px 32px; min-height:64px; }
.nav .brand{ display:flex; align-items:center; flex-shrink:0; }
/* Badge alone at nav scale. No wordmark: the badge carries the name itself. */
.nav .brand .badge-mark{ height:58px; transition:height .3s; }
.nav.scrolled .brand .badge-mark{ height:46px; }
.nav .links{ display:flex; align-items:center; gap:24px; margin-left:auto; min-width:0; }
.nav .phone, .nav .btn.navcta{ white-space:nowrap; flex-shrink:0; }
.nav .links a{ font-family:var(--font-body); font-weight:600; font-size:.84rem; color:var(--cream); opacity:.86; transition:opacity .15s,color .15s; white-space:nowrap; }
.nav .links a:hover{ opacity:1; color:var(--gold); }
.nav .phone{ font-family:var(--font-body); font-weight:700; font-size:.9rem; color:var(--gold); }
.nav .navcta{ height:38px; padding:0 18px; font-size:.88rem; }
.nav .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto; }
.nav .burger span{ width:24px; height:2px; background:var(--cream); transition:.25s; }
.nav.open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2){ opacity:0; }
.nav.open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{ position:fixed; inset:0 0 0 auto; width:min(82vw,360px); background:var(--navy); z-index:55; transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.7,.2,1); padding:96px 30px 30px; display:flex; flex-direction:column; gap:6px; border-left:1px solid var(--line-dark); }
.mobile-menu.open{ transform:none; }
.mobile-menu a{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:var(--head-tracking); font-size:1.3rem; color:var(--cream); padding:13px 0; border-bottom:1px solid var(--line-dark); }
.mobile-menu a:hover{ color:var(--gold); }
.mobile-menu .phone{ color:var(--gold); font-family:var(--font-body); font-weight:700; font-style:normal; text-transform:none; letter-spacing:0; font-size:1.05rem; }
.mobile-menu .mcta{ margin-top:20px; }
.scrim{ position:fixed; inset:0; background:rgba(8,16,32,.62); z-index:54; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.open{ opacity:1; pointer-events:auto; }

/* ---- HERO (full-bleed) ----
   The floor photo is the hero background. It stays an <img> inside
   .hero-media so it keeps fetchpriority and remains the LCP element; a CSS
   background-image would not be preloaded the same way.
   Stacking is explicit: media 0, scrim 1, content 2. The .floor flake-dot
   pattern still paints underneath as the fallback ground while the photo
   decodes, and shows through nothing once it lands. */
.hero{ position:relative; isolation:isolate; min-height:92vh; display:flex;
  flex-direction:column; justify-content:center; padding:150px 0 74px; }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; display:block; }
/* Scrim. Two layers: a horizontal wash that keeps the text column dark, and a
   vertical wash for the nav overlap and the lower edge. Values were set by
   sampling the rendered background under the headline and sub. */
.hero-media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,29,56,.88) 0%, rgba(15,29,56,.42) 28%, rgba(15,29,56,.32) 66%, rgba(15,29,56,.70) 100%),
    linear-gradient(90deg, rgba(15,29,56,.95) 0%, rgba(15,29,56,.92) 44%, rgba(15,29,56,.60) 70%, rgba(15,29,56,.20) 88%, rgba(15,29,56,.08) 100%); }
.hero .wrap{ position:relative; z-index:2; }
.hero-inner{ max-width:730px; }

.hero .ey{ margin-bottom:18px; }
.hero h1{ font-family:var(--font-display); font-size:clamp(3rem,6.4vw,5.4rem); line-height:.92; letter-spacing:.005em; color:var(--cream); text-transform:uppercase; }
.hero h1 .gold{ color:var(--gold); }
/* lifted off --muted-dark: that tone was tuned for a flat navy panel and is
   too weak over a photograph, even a scrimmed one */
.hero .sub{ font-family:var(--font-body); font-size:1.16rem; color:#E2E8F2; margin-top:22px; max-width:52ch; }
.hero .sub b{ color:var(--cream); font-weight:600; }
.hero .actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero .trust-row{ display:flex; align-items:center; gap:30px; margin-top:44px; flex-wrap:wrap; }
.hero .trust{ display:flex; gap:32px; flex-wrap:wrap; }
.hero .trust .t .n{ font-family:var(--font-display); font-size:2.1rem; color:var(--cream); line-height:1; }
.hero .trust .t .n .gold{ color:var(--gold); }
.hero .trust .t .l{ font-size:.76rem; color:#C2CADA; text-transform:uppercase; letter-spacing:.1em; margin-top:5px; font-weight:600; }
.hero .emblem-price{ width:104px; flex:0 0 auto; margin-left:auto; }

@media(max-width:980px){
  .hero{ min-height:88vh; padding:132px 0 64px; }
  .hero-media img{ object-position:50% 38%; }
  .hero-media::after{ background:
    linear-gradient(180deg, rgba(15,29,56,.88) 0%, rgba(15,29,56,.46) 30%, rgba(15,29,56,.40) 60%, rgba(15,29,56,.80) 100%),
    linear-gradient(90deg, rgba(15,29,56,.92) 0%, rgba(15,29,56,.78) 55%, rgba(15,29,56,.58) 100%); }
}
@media(max-width:680px){
  .hero .trust-row{ gap:22px; }
  .hero .emblem-price{ width:96px; margin-left:0; }
}

/* ---- SECTION SCAFFOLD ---- */
.section{ padding:88px 0; border-top:1px solid var(--line); position:relative; }
.sec-head{ max-width:var(--maxw); margin:0 auto 44px; padding:0 32px; }
.sec-head .ey{ margin-bottom:13px; color:var(--brick-red); }
.sec-head p{ margin-top:16px; }
.floor .sec-head .ey{ color:var(--gold); }

/* process */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; list-style:none; }
.step{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--pad-card); transition:transform .2s, border-color .2s, opacity .35s, box-shadow .35s; }
.step:hover{ transform:translateY(-4px); border-color:rgba(180,56,46,.4); box-shadow:var(--shadow-card); }
.step .n{ font-family:var(--font-display); font-size:1.4rem; color:var(--brick-red); }
/* Engraved icon sits above the gold rule. The rule keeps the width animation
   the pinned/active step used to run on .ic itself. */
.step .ic{ margin:12px 0 16px; color:var(--navy); }
.step .ic::after{ content:""; display:block; height:3px; width:34px; background:var(--gold); margin-top:11px; transition:width .35s; }
.step h3{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:var(--head-tracking); font-size:1.2rem; color:var(--navy); }
.step p{ font-size:.9rem; color:var(--muted); margin-top:8px; }

/* process build-up: static fallback by default (no JS / reduced motion) */
.process-stage{ position:relative; border:1px solid var(--line); border-radius:var(--radius-media); overflow:hidden; background:var(--white); margin-bottom:30px; }
.process-stage img, .process-stage video{ display:block; width:100%; height:100%; object-fit:contain; background:var(--white); }
.process-video{ display:none; }            /* no JS: never show a non-scrubbing video */
.process-stage figcaption{ position:absolute; left:0; right:0; bottom:0; padding:15px 18px; font-family:var(--font-body); font-weight:600; font-size:.84rem; color:var(--cream); background:linear-gradient(transparent, rgba(15,29,56,.92)); }

/* enhanced: JS present and motion allowed -> pin + scrub */
html.js .process-scroll{ height:300vh; position:relative; }
html.js .process-pin{ position:sticky; top:0; min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:42px; align-items:center; }
html.js .process-stage{ margin:0; aspect-ratio:1/1; max-height:82vh; width:100%; }
html.js .process-video{ display:block; }
html.js .process-fallback{ display:none; }
html.js .process-pin .steps{ display:flex; flex-direction:column; gap:14px; }
html.js .process-pin .step{ opacity:.45; }
html.js .process-pin .step.lit{ opacity:1; }
html.js .process-pin .step.active{ opacity:1; border-color:rgba(180,56,46,.55); transform:translateX(5px); box-shadow:var(--shadow-lift); }
html.js .process-pin .step.active .ic::after{ width:52px; }
html.js .process-pin .step.active .ic{ color:var(--brick-red); }

@media(max-width:880px){
  html.js .process-pin{ grid-template-columns:1fr; gap:22px; align-content:center; }
  html.js .process-stage{ max-height:56vh; }
  html.js .process-pin .steps{ flex-direction:row; flex-wrap:wrap; }
  html.js .process-pin .step{ flex:1 1 44%; padding:16px; }
}
@media(prefers-reduced-motion:reduce){
  html.js .process-scroll{ height:auto; }
  html.js .process-pin{ position:static; min-height:0; display:block; }
  html.js .process-video{ display:none; }
  html.js .process-fallback{ display:block; }
  html.js .process-stage{ aspect-ratio:auto; max-height:none; margin-bottom:30px; }
  html.js .process-pin .steps{ display:grid; grid-template-columns:repeat(4,1fr); }
  html.js .process-pin .step{ opacity:1; }
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  html.js .process-pin .steps{ grid-template-columns:1fr 1fr; }
}

/* pricing */
.price-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:center; }
.price-card{ background:var(--navy); border:1px solid var(--navy); border-radius:var(--radius-card); padding:40px 34px; text-align:center; box-shadow:var(--shadow-lift); }
.price-card .big{ font-family:var(--font-display); font-size:5.6rem; line-height:.84; color:var(--cream); }
.price-card .big .u{ font-size:1.5rem; color:var(--gold); letter-spacing:.02em; }
.price-card .per{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--muted-dark); margin-top:10px; }
.price-card .tag2{ margin-top:18px; font-family:var(--font-body); font-weight:600; color:var(--gold); font-size:.95rem; }
.incl{ list-style:none; }
.incl li{ display:flex; align-items:flex-start; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.98rem; color:var(--muted); }
.incl li .ck{ flex:0 0 auto; width:21px; height:21px; border-radius:var(--radius-icon-sm); background:rgba(180,56,46,.12); color:var(--brick-red); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; margin-top:2px; }
.incl li b{ color:var(--navy); font-weight:600; }

/* what we coat */
.coat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.coat{ border-radius:var(--radius-media); overflow:hidden; position:relative; aspect-ratio:3/4; border:1px solid var(--line); transition:border-color .3s, transform .3s, box-shadow .3s; }
.coat .ph{ position:absolute; inset:0; }
.coat .cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 20px 20px; background:linear-gradient(transparent, rgba(15,29,56,.55) 38%, rgba(15,29,56,.94)); }
.coat .cap h3{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:var(--head-tracking); font-size:1.25rem; line-height:1; color:var(--cream); }
.coat .cap span{ display:block; margin-top:7px; font-size:.8rem; line-height:1.45; color:var(--muted-dark); }
.coat:hover{ border-color:rgba(180,56,46,.45); box-shadow:var(--shadow-lift); }
.coat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.coat:hover img{ transform:scale(1.05); }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery .g{ position:relative; overflow:hidden; border-radius:var(--radius-media); aspect-ratio:4/3; border:1px solid var(--line); }
.gallery .g img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery .g:hover img{ transform:scale(1.06); }

/* flake colors */
.flake-banner{ position:relative; border-radius:var(--radius-media); overflow:hidden; border:1px solid var(--line); margin-bottom:30px; aspect-ratio:24/7; box-shadow:var(--shadow-card); }
.flake-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.flake-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,29,56,.14), transparent 40%, rgba(15,29,56,.24)); pointer-events:none; }
.flakes{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.flake{ text-align:center; cursor:pointer; }
.flake .sw{ aspect-ratio:1; border-radius:var(--radius-media); border:2px solid var(--line); transition:transform .2s, border-color .2s; overflow:hidden; }
.flake:hover .sw{ transform:scale(1.06); border-color:var(--gold); }
.flake .sw img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); }
.flake .nm2{ font-family:var(--font-body); font-weight:600; font-size:.78rem; margin-top:11px; color:var(--muted); }
/* group headings for standard vs premium blends */
.flake-group{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase;
  letter-spacing:var(--head-tracking); line-height:var(--head-line-height); font-size:1.5rem; color:var(--navy);
  margin:34px 0 20px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.flake-group:first-of-type{ margin-top:6px; }
.flake-group span{ font-family:var(--font-body); font-weight:600; font-style:normal; text-transform:uppercase;
  letter-spacing:.12em; font-size:.68rem; color:var(--brick-red); }
/* ---- Stylized swatch tiles ----
   Domino, Coyote, Pumice and Basalt use real Torginol swatch photography. The
   remaining blends have no photography yet, so they render as generated speckle
   tiles keyed to the blend name. These are representative, not photographs of the
   product, which the section states in plain text. Replace each with real swatch
   photography as it arrives: drop the file in images/web/flakes/ and swap the
   <div class="sw sw-tile sw-NAME"> for the same <img> pattern the other four use. */

/* reviews */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-card); padding:26px; box-shadow:var(--shadow-card); }
.review .stars{ color:var(--gold); letter-spacing:.18em; font-size:.9rem; }
.review p{ margin:14px 0 18px; color:var(--ink); font-size:1rem; }
.review .who{ font-family:var(--font-body); font-weight:700; font-size:.88rem; color:var(--navy); }
.review .who span{ display:block; color:var(--muted); font-weight:400; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

/* meet the team */
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.member{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--pad-card); transition:border-color .3s, transform .3s, box-shadow .3s; }
.member:hover{ border-color:rgba(180,56,46,.35); transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.team-photo{ position:relative; width:128px; aspect-ratio:4/5; border-radius:var(--radius-media); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(160deg,#E7DAC2,#D9C9AC);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.team-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* #4C5568 clears AA against both tones of the cream placeholder gradient (5.42 / 4.60) */
.team-photo .tp-soon{ font-family:var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:#4C5568; text-align:center; padding:0 8px; }
.member .m-body h3{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:var(--head-tracking); font-size:1.45rem; color:var(--navy); }
.member .role{ font-family:var(--font-body); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--brick-red); margin:5px 0 12px; }
.member .m-body p{ font-size:.92rem; color:var(--muted); line-height:1.6; }

/* service area */
.area{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.area .towns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.area .town{ font-family:var(--font-body); font-weight:600; font-size:.84rem; color:var(--navy); padding:8px 15px; border:1px solid var(--line); border-radius:30px; background:var(--white); transition:color .2s, border-color .2s; }
.area .towns .town:hover{ color:var(--brick-red); border-color:rgba(180,56,46,.45); }
.area-map{ aspect-ratio:4/3; border-radius:var(--radius-media); overflow:hidden; border:1px solid var(--line); background:var(--deep-navy); box-shadow:var(--shadow-lift); }
.area-map svg{ width:100%; height:100%; display:block; }

/* CTA band */
.cta-band{ text-align:center; padding:96px 0; position:relative; }
.cta-band h2{ font-family:var(--font-display); font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:.94; color:var(--cream); text-transform:uppercase; }
.cta-band h2 .gold{ color:var(--gold); }
.cta-band p{ color:var(--muted-dark); margin:18px auto 30px; font-size:1.08rem; max-width:46ch; }

/* ---- QUOTE MODAL ---- */
.quote-overlay{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(15,29,56,.74); backdrop-filter:blur(6px); }
.quote-overlay.open{ display:flex; }
.quote{ width:min(560px,100%); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; box-shadow:0 40px 80px rgba(8,16,32,.4); }
.quote .qhead{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); background:var(--navy); }
.quote .qhead .nm{ font-size:1.2rem; }
.quote .qhead .badge-mark{ height:34px; }
.quote .qhead .x{ background:none; border:none; color:var(--muted-dark); font-size:1.5rem; cursor:pointer; line-height:1; }
.quote .qhead .x:hover{ color:var(--cream); }
.qprog{ height:3px; background:rgba(27,42,74,.12); }
.qprog .fill{ height:100%; background:var(--brick-red); width:25%; transition:width .3s; }
.qbody{ padding:32px 30px 30px; }
.qstep{ display:none; } .qstep.active{ display:block; animation:qin .35s ease; }
@keyframes qin{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.qstep .qey{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; color:var(--brick-red); }
.qstep h3{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:var(--head-tracking); font-size:2rem; color:var(--navy); margin:6px 0 22px; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:16px; cursor:pointer; transition:border-color .15s, background .15s; font-family:var(--font-body); font-weight:600; color:var(--navy); }
.opt:hover{ border-color:rgba(180,56,46,.5); }
.opt.sel{ border-color:var(--brick-red); background:rgba(180,56,46,.08); }
.opt .os{ display:block; font-weight:400; font-size:.78rem; color:var(--muted); margin-top:4px; }
.field{ margin-bottom:16px; }
.field label{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:var(--muted); display:block; margin-bottom:7px; }
.field input, .field select{ width:100%; height:var(--input-height); background:var(--white); border:1px solid rgba(27,42,74,.24); border-radius:9px; padding:0 15px; color:var(--ink); font-family:var(--font-body); font-size:1rem; }
.field select{ -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B4382E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; }
.field select option{ background:var(--white); color:var(--ink); }
.field input:focus, .field select:focus{ outline:2px solid rgba(180,56,46,.35); outline-offset:1px; border-color:var(--brick-red); }
.sizerow{ display:flex; align-items:center; gap:16px; }
.sizerow input[type=range]{ flex:1; accent-color:var(--brick-red); }
.estimate{ text-align:center; padding:8px 0 4px; }
.estimate .lab{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--muted); }
.estimate .val{ font-family:var(--font-display); font-size:clamp(2.2rem,9vw,3.4rem); color:var(--navy); line-height:1; margin:8px 0; white-space:nowrap; }
.estimate .val .hi{ color:var(--brick-red); font-size:.72em; } /* base $8 figure stays the heavier number */
.estimate .note{ font-size:.82rem; color:var(--muted); }
.qnav{ display:flex; justify-content:space-between; gap:12px; margin-top:26px; }
.qnav .btn{ flex:1; }
.qdone{ text-align:center; }
.qdone .big{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:var(--head-tracking); font-size:2.2rem; color:var(--navy); }
.qdone .chk{ width:64px; height:64px; border-radius:var(--radius-icon-lg); background:rgba(180,56,46,.12); color:var(--brick-red); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 18px; }

/* ---- QUOTE PAGE (/quote) ---- */
.quote-page{ min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:150px 0 90px; }
.qpgrid{ display:grid; grid-template-columns:1fr minmax(0,560px); gap:54px; align-items:center; }
.qpgrid .quote{ width:100%; }
.qpintro .ey{ margin-bottom:18px; }
.qpintro h1{ font-family:var(--font-display); font-size:clamp(2.8rem,5.6vw,4.6rem); line-height:.94; color:var(--cream); text-transform:uppercase; }
.qpintro h1 .gold{ color:var(--gold); }
.qpintro .lead{ margin-top:20px; color:var(--muted-dark); }
.qpintro .trust{ display:flex; gap:30px; margin-top:36px; flex-wrap:wrap; }
.qpintro .trust .n{ font-family:var(--font-display); font-size:2.1rem; color:var(--cream); line-height:1; }
.qpintro .trust .n .gold{ color:var(--gold); }
.qpintro .trust .l{ font-size:.76rem; color:var(--muted-dark); text-transform:uppercase; letter-spacing:.1em; margin-top:5px; font-weight:600; }
@media(max-width:980px){ .qpgrid{ grid-template-columns:1fr; gap:38px; } }

/* ---- THANK YOU PAGE (/thank-you) ---- */
.thanks{ min-height:88vh; display:flex; align-items:center; text-align:center; padding:150px 0 90px; }
.thanks .card{ max-width:660px; margin:0 auto; }
.thanks .chk{ width:64px; height:64px; border-radius:var(--radius-icon-lg); background:rgba(224,165,38,.18); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 24px; }
.thanks h1{ font-family:var(--font-display); font-size:clamp(2.6rem,5.6vw,4.2rem); line-height:.96; color:var(--cream); text-transform:uppercase; }
.thanks h1 .gold{ color:var(--gold); }
.thanks p{ color:var(--muted-dark); margin:18px auto 30px; max-width:52ch; font-size:1.05rem; }
.thanks p b{ color:var(--cream); }
.thanks .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- FOOTER ---- */
.footer{ border-top:1px solid var(--line-dark); padding:66px 0 28px; background:var(--deep-navy); color:var(--cream); }
.footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
.footer .brand{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.footer .brand .badge-mark{ height:58px; }
.footer .brand .nm{ font-size:1.55rem; }
.footer .brand .nm small{ font-size:.36rem; margin-top:.4em; }
.footer .col h4{ font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold); margin-bottom:15px; }
.footer .col a, .footer .col p{ display:block; color:var(--muted-dark); font-size:.9rem; padding:5px 0; }
.footer .col a:hover{ color:var(--cream); }
.footer .desc{ color:var(--muted-dark); font-size:.9rem; max-width:34ch; }
.phone-soon{ color:var(--muted-dark); font-style:italic; }
.nav .phone.phone-soon{ font-style:normal; opacity:.7; cursor:default; }
.social{ display:flex; gap:12px; margin-top:18px; }
.social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-icon-lg); border:1px solid var(--line-dark); color:var(--muted-dark); transition:color .2s, border-color .2s, transform .2s; }
.social a:hover{ color:var(--gold); border-color:rgba(224,165,38,.5); transform:translateY(-2px); }
/* #7A87A0 is the dimmest footer-legal tone that still clears WCAG AA (4.63:1) on deep navy */
.footer .bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:22px; border-top:1px solid var(--line-dark); color:#7A87A0; font-size:.8rem; flex-wrap:wrap; gap:12px; }
.footer .bottom a:hover{ color:var(--cream); }

/* ---- RESPONSIVE ---- */
@media(max-width:980px){
  .price-wrap,.area{ grid-template-columns:1fr; gap:30px; }
  .steps,.coat-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .reviews{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .flakes{ grid-template-columns:repeat(3,1fr); }
  .footer .top{ grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .member{ grid-template-columns:1fr; justify-items:start; }
}
@media(max-width:680px){
  .nav .links, .nav .phone, .nav .navcta{ display:none; }
  .nav .burger{ display:flex; }
  .wrap,.nav .bar,.sec-head{ padding-left:22px; padding-right:22px; }
  .gallery{ grid-template-columns:1fr; }
  .coat-grid{ grid-template-columns:1fr 1fr; }
  .flakes{ grid-template-columns:repeat(2,1fr); }
  .footer .top{ grid-template-columns:1fr; }
  .opts{ grid-template-columns:1fr; }
  .section{ padding:74px 0; }
  .nav .bar{ min-height:68px; }
  .nav .brand .badge-mark{ height:48px; }
  .nav.scrolled .brand .badge-mark{ height:44px; }
}

/* ---- Logo intro overlay ---- */
.intro{ position:fixed; inset:0; z-index:80; background:var(--deep-navy); display:flex; align-items:center; justify-content:center; will-change:opacity; cursor:pointer; }
html:not(.js) .intro{ display:none; }
.intro.done{ display:none; }
.intro-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; will-change:transform; padding:0 24px; }
.intro-inner .badge-mark{ width:min(340px,62vw); height:auto; }
.intro-tag{ margin-top:26px; color:var(--gold); font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:.03em; }
.intro-cue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; }
.intro-cue span{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.28em; text-indent:.28em; font-size:.66rem; color:var(--muted-dark); }
.intro-cue i{ width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (prefers-reduced-motion: reduce){ .intro{ display:none; } }

/* ---- Referral program ---- */
.refgrid{ display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:start; }
.refsteps{ display:flex; flex-direction:column; gap:18px; }
.refsteps .step h3{ font-size:1.05rem; margin-bottom:8px; }
.refsteps .step p{ color:var(--muted); font-size:.95rem; }
.refform{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-card); padding:28px 26px; box-shadow:var(--shadow-card); }
.refcols{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.refcol-label{ font-family:var(--font-head); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:var(--head-tracking); font-size:1.25rem; color:var(--brick-red); margin-bottom:14px; }
.refconfirm{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--muted); line-height:1.5; margin:6px 0 20px; cursor:pointer; }
.refconfirm input{ margin-top:3px; accent-color:var(--brick-red); flex:0 0 auto; }
.refform .btn{ width:100%; }
.refdone{ margin-top:18px; background:rgba(224,165,38,.14); border:1px solid rgba(224,165,38,.45); border-radius:10px; padding:15px 17px; color:var(--navy); font-size:.95rem; }
@media (max-width: 900px){ .refgrid{ grid-template-columns:1fr; } .refcols{ grid-template-columns:1fr; } }

@media (min-width: 981px){ .flakes{ grid-template-columns:repeat(5,1fr); } }