/* ============================================================
   LIBERTY EPOXY v2 — "Gold Standard, Poured"
   Direction: gold-standard palette + lettering × metallic-pour flow
   Tokens are law: navy/gold pulled live off libertyepoxy.com.
   WCAG 2.1 AA: contrast, focus, keyboard, reduced motion.
   ============================================================ */
/* ------------------------------------------------------------
   SELF-HOSTED BRAND FONTS (added July 29, 2026, speed job)
   The same Fraunces + Montserrat files Google serves, copied byte
   for byte from fonts.gstatic.com on 7/29 and served from our own
   origin instead. Nothing about how the type LOOKS changes.
   Why: the Google Fonts stylesheet was render blocking and cost
   750ms to deliver 1.5KB, because the browser had to open a fresh
   connection to fonts.googleapis.com and then a second one to
   fonts.gstatic.com before a single letter could paint. From our
   own origin that is zero extra connections.
   Both families are VARIABLE fonts, so every weight below points
   at the same file. Declaring 500, 600 and 700 costs no extra
   download.
   To refresh: re-pull the css2 URL with a Chrome user agent, then
   re-download the latin + latin-ext woff2 into assets/fonts/.
   ------------------------------------------------------------ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#0C1B33; --navy-2:#081326; --navy-3:#060E1D;
  --card:#12233F; --line:#22385C;
  --gold:#FFC22D; --gold-d:#B8860B; --gold-pale:#FFE9A8; --gold-deep:#8A6200;
  --blue:#2E6FD6;
  --mist:#B9C4D6; --slate:#8595AD; --ink:#15233C; --ink-soft:#5B6B85;
  --white:#fff;
  --pour:linear-gradient(115deg,var(--gold-deep),var(--gold-d) 30%,var(--gold) 52%,var(--gold-pale) 62%,var(--gold) 72%,var(--gold-d));
  --ease:cubic-bezier(.6,0,.25,1);
  --rad:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--navy);color:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%}
[id]{scroll-margin-top:5rem}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.08}
/* Fraunces draws "&" as an old-style glyph that reads like an @ — force a plain one */
.amp{font-family:'Montserrat',sans-serif;font-weight:700}
h1 em,h2 em{font-style:normal;background:linear-gradient(100deg,var(--gold-pale),var(--gold) 30%,#D99E14 50%,var(--gold-pale) 70%,var(--gold));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{from{background-position:0% 0}to{background-position:200% 0}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* ---------- Accessibility base ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#1A1200;font-weight:700;padding:.8rem 1.4rem;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Montserrat',sans-serif;font-weight:700;border:none;border-radius:10px;padding:.95rem 1.7rem;cursor:pointer;transition:transform .18s var(--ease),filter .18s var(--ease);font-size:1rem}
.btn--gold{background:linear-gradient(180deg,#FFD35C,var(--gold) 45%,#E0A81F);color:#1A1200;box-shadow:0 12px 28px rgba(255,194,45,.28);position:relative;overflow:hidden}
.btn--gold::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .5s var(--ease)}
.btn--gold:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn--gold:hover::after{left:130%}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 14px 30px rgba(8,19,38,.35)}
.btn--navy:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--gold);border:1.5px solid rgba(255,194,45,.5)}
.btn--ghost:hover{background:rgba(255,194,45,.08)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,19,38,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 0}
.brand{display:flex;align-items:center;gap:.65rem}
.brand img{height:50px;width:auto}
.brand b{font-weight:700;font-size:.95rem;letter-spacing:.04em;line-height:1.2}
.brand small{display:block;font-size:.55rem;font-weight:600;letter-spacing:.32em;color:var(--gold)}
.nav__links{display:flex;align-items:center;gap:1.15rem;font-size:.88rem;font-weight:600}
.nav__links a{color:var(--mist);transition:color .15s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--gold)}
.nav__right{display:flex;align-items:center;gap:1.1rem}
.nav__phone{font-weight:700;color:var(--gold);white-space:nowrap}
.nav__toggle{display:none;background:none;border:none;color:var(--gold);cursor:pointer;padding:.4rem}
.nav__toggle svg{width:26px;height:26px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;padding:4rem 0 8rem}
.hero--sub{min-height:56svh;padding:3.5rem 0 7.5rem}
.hero--band{min-height:26svh;padding:1.5rem 0 5.5rem}
/* Since-1964 topographic backdrop: real contour rings, gold on navy, drifts
   gently with scroll (the third Wix-era wow effect, recreated July 15 2026) */
.sec--topo{position:relative;overflow:hidden}
.sec--topo .wrap{position:relative;z-index:1}
.topo-wrap{position:absolute;inset:-14% 0;color:rgba(255,194,45,.13);pointer-events:none;z-index:0;transform:scale(1.06);will-change:transform}
.topo-wrap svg{width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.topo-wrap{transform:none}}
.guide-grid.guide-grid--pair{grid-template-columns:repeat(2,1fr)}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg picture{display:contents}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,19,38,.96) 26%,rgba(8,19,38,.48) 56%,rgba(8,19,38,.05) 84%)}
/* stronger scrim for heroes over bright photos (portfolio's pale flake ridge washed the subhead out) */
.hero--scrim .hero__bg::after{background:linear-gradient(100deg,rgba(8,19,38,.96) 30%,rgba(8,19,38,.74) 58%,rgba(8,19,38,.28) 92%)}
.hero .eyebrow,.hero h1,.hero p.lead,.hero .chips,.hero .hero__phone{text-shadow:0 2px 22px rgba(6,14,29,.6)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero--sub .wrap{grid-template-columns:1fr;max-width:min(880px,92vw)}
.eyebrow{display:inline-block;font-weight:700;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,194,45,.4);border-radius:999px;padding:.45rem 1rem;margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem)}
.hero--sub h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.hero p.lead{color:var(--mist);font-size:1.08rem;max-width:34rem;margin-top:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:rgba(18,35,63,.85);border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;font-size:.85rem;font-weight:600}
.chip .stars{color:var(--gold);letter-spacing:.08em}
.chip svg{width:15px;height:15px;color:var(--gold);flex:none}
.hero__phone{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.7rem;font-weight:700;font-size:clamp(1.15rem,2vw,1.4rem)}
.hero__phone svg{width:22px;height:22px;color:var(--gold);flex:none}
.hero__phone small{display:block;font-weight:500;font-size:.72rem;color:var(--mist)}
/* gentle entrance: hero copy rises in sequence, form card follows */
.hero .eyebrow{animation:rise .6s var(--ease) .05s both}
.hero h1{animation:rise .7s var(--ease) .15s both}
.hero p.lead{animation:rise .7s var(--ease) .28s both}
.hero .chips{animation:rise .7s var(--ease) .4s both}
.hero .hero__phone,.hero .wrap > div > p:last-child{animation:rise .7s var(--ease) .5s both}
.hero .hform{animation:rise .8s var(--ease) .35s both}

/* ---------- Lead form card (the proven converter — white, gold bar) ---------- */
.hform{background:#fff;color:var(--ink);border-radius:18px;padding:1.7rem 1.6rem 1.4rem;box-shadow:0 40px 90px rgba(0,0,0,.5);border-top:5px solid var(--gold);scroll-margin-top:96px}
.hform__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.hform h2,.hform .hform__title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.35rem;color:var(--ink)}
.hform__badge{background:#FFF3D1;color:#7A5600;font-size:.68rem;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:.35rem .7rem;white-space:nowrap}
.hform__sub{color:var(--ink-soft);font-size:.9rem;margin:.35rem 0 1.1rem}
.hrow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.hrow--one{grid-template-columns:1fr}
.hfield label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3rem}
.hfield input,.hfield select,.hfield textarea{width:100%;border:1.5px solid #D8DFEA;border-radius:9px;padding:.7rem .8rem;font-family:'Montserrat',sans-serif;font-size:16px;background:#fff;color:var(--ink);min-height:44px}
.hfield textarea{resize:vertical;min-height:84px}
.hfield input[type="file"]{padding:.55rem .6rem;cursor:pointer}
.hform__photonote{font-size:.78rem;font-weight:600;color:var(--ink-soft);margin-top:.35rem;min-height:1em}
.hfield input:focus,.hfield select:focus,.hfield textarea:focus{outline:2px solid var(--gold-d);outline-offset:1px;border-color:var(--gold-d)}
.hfield input[aria-invalid="true"],.hfield select[aria-invalid="true"]{border-color:#C0392B}
.hform__err{color:#A82315;font-size:.8rem;font-weight:600;margin-top:.5rem;min-height:1.1em}
.hform .btn{width:100%;margin-top:.4rem;text-transform:uppercase;letter-spacing:.05em;font-size:1rem;padding:1rem;min-height:48px}
.hform__note{display:flex;align-items:center;gap:.4rem;justify-content:center;color:var(--ink-soft);font-size:.76rem;margin-top:.7rem}
.hform__note svg{width:14px;height:14px;color:#157A42;flex:none}

/* ---------- Form feedback: field errors, sending state, step 2 ---------- */
.ferr{color:#A82315;font-size:.74rem;font-weight:600;margin-top:.35rem}
.btn.is-sending{opacity:.8;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  @keyframes sendpulse{0%,100%{opacity:.8}50%{opacity:.55}}
  .btn.is-sending{animation:sendpulse 1.1s ease-in-out infinite}
}
.hstep2__ok{display:flex;align-items:center;gap:.5rem;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink);scroll-margin-top:110px}
.hstep2__ok:focus{outline:none}
.hstep2__ok svg{width:22px;height:22px;color:#157A42;flex:none}
.qgroup{margin-top:.9rem}
.qgroup>span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.qchips{display:flex;flex-wrap:wrap;gap:.45rem}
.qchip{border:1.5px solid #D8DFEA;background:#fff;color:var(--ink);border-radius:999px;padding:.45rem .8rem;font-family:'Montserrat',sans-serif;font-weight:600;font-size:.8rem;min-height:38px;cursor:pointer}
.qchip:focus-visible{outline:2px solid var(--gold-d);outline-offset:1px}
.qchip[aria-pressed="true"]{border-color:var(--gold-d);background:#FFF3D1;color:#7A5600}
.qchip[aria-pressed="true"]::before{content:"\2713\00a0";font-weight:700}
.hstep2__skip{display:block;width:100%;margin-top:.6rem;background:none;border:none;color:var(--ink-soft);font-family:'Montserrat',sans-serif;font-weight:600;font-size:.82rem;text-decoration:underline;cursor:pointer;padding:.5rem;min-height:44px}
.hstep2__skip:hover,.hstep2__skip:focus-visible{color:var(--ink);outline-offset:2px}

/* semantic success (thank-you page): green means "it worked" */
.eyebrow--ok{color:#4FCE8D;border-color:rgba(79,206,141,.45);display:inline-flex;align-items:center;gap:.45rem}
.eyebrow--ok svg{width:14px;height:14px;flex:none}

/* ---------- Section transitions: the signature ---------- */
/* 1) Torn flake-chip edge (from gold-standard) */
.tear{position:absolute;left:0;right:0;bottom:-2px;height:74px;pointer-events:none}
.tear svg{width:100%;height:100%;display:block}
/* 2) Molten gold pour (metallic-pour flow, recolored) */
.pourband{position:absolute;left:0;right:0;bottom:-2px;height:110px;pointer-events:none}
.pourband svg{width:100%;height:100%;display:block}

/* ---------- Generic section ---------- */
.sec{position:relative;padding:clamp(3.6rem,7.5vw,6rem) 0}
/* One continuous navy pour — no background jumps between sections */
.sec--deep,.sec--deeper{background:transparent}
.sec-eyebrow{font-weight:700;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.sec h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-top:.5rem}
.sec .lead{color:var(--mist);margin-top:.6rem;max-width:42rem}

/* ---------- Trust trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.trio__item{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.5rem 1.4rem;display:flex;gap:1rem;align-items:flex-start}
.trio__item svg{width:26px;height:26px;color:var(--gold);flex:none;margin-top:.15rem}
.trio__item b{display:block;font-size:1.02rem;margin-bottom:.25rem}
.trio__item p{color:var(--mist);font-size:.9rem}

/* ---------- Client logos — full-color badges, one clean tile each ---------- */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.4rem}
.logos__label{grid-column:1/-1;text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);margin-bottom:.2rem}
.logos__tile{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:1.1rem 1.3rem;min-height:96px;box-shadow:0 14px 34px rgba(0,0,0,.35);border-top:3px solid var(--gold);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.logos__tile:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.45)}
.logos__tile img{max-height:56px;max-width:100%;width:auto;object-fit:contain}

/* ---------- Service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.6rem}
.svc{position:relative;display:block;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);background:var(--card);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.svc:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(0,0,0,.45)}
.svc{overflow:hidden}
.svc img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .45s var(--ease)}
.svc:hover img{transform:scale(1.05)}
.svc__body{padding:1.1rem 1.15rem 1.25rem}
.svc__body h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.02rem}
.svc__body p{color:var(--mist);font-size:.86rem;margin-top:.35rem}
.svc__go{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold);font-weight:700;font-size:.85rem;margin-top:.7rem}
.svc__go svg{width:15px;height:15px;transition:transform .18s var(--ease)}
.svc:hover .svc__go svg{transform:translateX(4px)}

/* ---------- Before/After slider ---------- */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem}
.ba{position:relative;border-radius:var(--rad);overflow:hidden;aspect-ratio:4/3;user-select:none;touch-action:none;border:1px solid rgba(255,255,255,.1);cursor:ew-resize;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__before{z-index:2;clip-path:inset(0 50% 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;z-index:3;width:2px;transform:translateX(-50%);background:var(--gold);pointer-events:none}
.ba__ic{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:42px;height:42px;border-radius:50%;background:var(--gold);color:#1A1200;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.ba__ic svg{width:20px;height:20px}
.ba:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.ba__tag{position:absolute;bottom:.7rem;z-index:4;font-weight:700;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:.3rem .6rem;border-radius:7px;pointer-events:none}
.ba__tag.l{left:.7rem;background:rgba(8,19,38,.8)}
.ba__tag.r{right:.7rem;background:var(--gold-d)}
.ba__title{text-align:center;font-weight:600;font-size:.9rem;color:var(--mist);margin-top:.85rem}
/* pair/solo slider grids: capped width, always centered in the wrap */
.ba-grid--pair{grid-template-columns:repeat(2,1fr);max-width:56rem;margin-inline:auto}
.ba-grid--solo{grid-template-columns:1fr;max-width:36rem;margin-inline:auto}

/* ---------- Story + stats ---------- */
/* named areas so mobile can reorder: photo first, numbers, then the story */
.story{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"txt img" "stats img";gap:1rem 3rem;align-items:center;margin-top:2.4rem}
.story__txt{grid-area:txt}
.story .stats{grid-area:stats}
.story__img{grid-area:img}
.story__img{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.story__img img{width:100%;height:auto}
.story p{color:var(--mist);margin-top:1rem}
.story p b{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.2rem;text-align:center}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem .8rem}
.stat b{display:block;font-family:'Fraunces',serif;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--gold)}
.stat span{font-size:.8rem;font-weight:600;color:var(--mist);letter-spacing:.04em}

/* ---------- Portfolio ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.pf{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line)}
.pf img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .35s var(--ease)}
.pf:hover img{transform:scale(1.045)}
.pf figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem .9rem .7rem;background:linear-gradient(transparent,rgba(6,14,29,.9));font-size:.8rem;font-weight:600}

/* ---------- FAQ accordion ---------- */
.faq-list{margin-top:2.2rem;display:grid;gap:.9rem;max-width:56rem}
.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;padding:1.1rem 1.25rem;font-weight:700;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;color:var(--gold);flex:none;transition:transform .2s var(--ease)}
.faq[open] summary svg{transform:rotate(45deg)}
.faq div{padding:0 1.25rem 1.15rem;color:var(--mist);font-size:.95rem}

/* ---------- Service page content blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start;margin-top:2.4rem}
.split__img{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);box-shadow:0 26px 55px rgba(0,0,0,.45)}
.split__img img{width:100%;height:auto}
/* the foreman cutout standing free on the page (no card, no backdrop — took over the old warehouse-portrait slot) */
.split__img--stage{background:none;border:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;justify-content:center;align-items:flex-end;aspect-ratio:1200/891}
.split__img--stage img{width:auto;height:100%;max-width:88%;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.checklist{margin-top:1.2rem;display:grid;gap:.7rem;list-style:none}
.checklist li{display:flex;gap:.6rem;align-items:flex-start;color:var(--mist);font-size:.97rem}
.checklist svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:.2rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.3rem 1.2rem}
.step b{display:block;font-size:1rem;margin-bottom:.3rem}
.step p{color:var(--mist);font-size:.86rem}
.step p a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.step p a:hover{color:var(--gold-l,#FFE9A8)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-family:'Fraunces',serif;font-size:1.5rem;color:var(--gold);margin-bottom:.4rem}

/* ---------- CTA band ---------- */
.cta{position:relative;background:linear-gradient(120deg,#D9A410,var(--gold) 55%,#E8B92E);color:#1A1200;padding:0 0 clamp(3.4rem,7vw,5rem);text-align:center;overflow:hidden}
.cta .wrap{position:relative;z-index:2}
.cta .wrap{padding-top:clamp(2.2rem,4.5vw,3.2rem)}
/* the navy melts into the gold — the page's closing pour */
.pourinto{height:120px;pointer-events:none}
.pourinto svg{width:100%;height:100%;display:block}
.cta h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.cta p{font-weight:600;margin:.6rem 0 1.6rem}
.cta .btn + .btn{margin-left:.8rem}

/* ---------- Footer ---------- */
.foot{background:var(--navy-3);border-top:1px solid var(--line);padding:2.6rem 0 1.6rem;color:var(--mist);font-size:.9rem}
.foot__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.foot h3{font-family:'Montserrat',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.foot ul{list-style:none;display:grid;gap:.45rem}
.foot a:hover{color:var(--gold)}
.foot__legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--slate)}

/* ---------- Scroll reveal (only hides content when JS is confirmed running) ---------- */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr}
  .hero{padding-top:2.5rem}
  .ba-grid,.trio,.pf-grid{grid-template-columns:1fr}
  .hrow{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  /* Anthony's mobile order: photo, then the numbers, then the story */
  .story{grid-template-columns:1fr;grid-template-areas:"img" "stats" "txt";gap:1.6rem}
  .stats{grid-template-columns:repeat(2,1fr);margin-top:0}
  .foot__grid{grid-template-columns:1fr}
}
/* nav collapses earlier than the rest of the tablet layout: nine items plus
   the phone and the gold button crowd anything under ~1060px */
@media (max-width:1060px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy-2);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:1rem 4vw;gap:1rem}
  .nav__links.open{display:flex}
  .nav__toggle{display:block}
  .nav__phone{display:none}
}
/* ---------- Mobile layer — most traffic is phones; design for thumbs ---------- */
.mactions{display:none}
@media (max-width:640px){
  body{padding-bottom:4.6rem}
  /* one quote button is enough: the thumb bar owns it; nav keeps logo + menu */
  .nav .btn--gold{display:none}
  /* first paint must show everything from the logo down to the form's
     "Get My Free Quote · 60 seconds" row above the thumb bar (Anthony's
     framing screenshot, July 7) — every rem trimmed here buys that fit */
  .hero{min-height:auto;padding:1.3rem 0 6.5rem}
  .hero .wrap{gap:1.5rem}
  .hero__phone{margin-top:1rem}
  .hero--sub{padding:2rem 0 6rem}
  /* eyebrow: drop the pill box, keep quiet gold small caps */
  .eyebrow{border:none;padding:0;font-size:.66rem;letter-spacing:.2em;margin-bottom:.7rem}
  /* phones read centered: hero block + section headers align to the middle
     (body prose, cards, and checklists stay left for readability) */
  .hero .wrap > div:first-child{text-align:center}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero .chips{justify-content:center}
  .sec > .wrap > .sec-eyebrow{display:block;text-align:center}
  .sec > .wrap > h2,.sec > .wrap > h1{text-align:center}
  .sec > .wrap > .lead{text-align:center;margin-left:auto;margin-right:auto}
  .comm__niches{justify-content:center}
  /* hero + gold-band buttons: stack clean and centered, no crooked wrap */
  .hero .btn{display:flex;width:min(340px,100%);margin:.55rem auto 0!important}
  .cta .btn{display:flex;width:min(340px,100%);margin:.55rem auto 0}
  .cta .btn + .btn{margin:.55rem auto 0}
  /* phones: vertical scrim — readable text up top, floor glows below.
     Lighter than desktop: the mobile hero IS the floor detail shot. */
  .hero__bg::after{background:linear-gradient(180deg,rgba(8,19,38,.88) 0%,rgba(8,19,38,.5) 42%,rgba(8,19,38,.08) 100%)}
  .hero--scrim .hero__bg::after{background:linear-gradient(180deg,rgba(8,19,38,.92) 0%,rgba(8,19,38,.7) 55%,rgba(8,19,38,.22) 100%)}
  .hero h1{font-size:clamp(2.1rem,9vw,2.7rem)}
  .hero p.lead{font-size:1rem}
  .chip{font-size:.78rem;padding:.42rem .8rem}
  .pourband{height:90px!important}
  .pourinto{height:70px}
  .sec{padding:3.2rem 0 3.4rem}
  /* before/after: grabber drops to the bottom of the line, tags move up top —
     nothing covers the middle of the photo on a phone */
  .ba__ic{top:auto;bottom:.85rem;transform:translate(-50%,0);width:34px;height:34px}
  .ba__ic svg{width:16px;height:16px}
  .ba__tag{bottom:auto;top:.7rem;font-size:.6rem}
  .logos{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .logos__tile{min-height:76px;padding:.9rem 1rem}
  .logos__tile img{max-height:42px}
  .stats{gap:.8rem}
  .foot{padding-bottom:2.2rem}
  /* sticky call bar — the two actions that make money, always under the thumb */
  .mactions{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:.6rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(8,19,38,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mactions a{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;font-weight:700;font-size:.95rem;border-radius:10px;padding:.85rem .5rem;min-height:48px}
  .mactions a svg{width:18px;height:18px;flex:none}
  .mactions__call{background:transparent;color:var(--gold);border:1.5px solid rgba(255,194,45,.55)}
  .mactions__quote{background:linear-gradient(180deg,#FFD35C,var(--gold) 45%,#E0A81F);color:#1A1200}
}
@media (max-width:520px){
  .svc-grid,.steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- Pick Your Floor: the sample board ---------- */
.picker{margin-top:2.2rem;display:grid;grid-template-columns:250px 1fr;gap:1.6rem;align-items:start}
.picker__tabs{display:flex;flex-direction:column;gap:.5rem}
.picker__tab{font-family:'Montserrat',sans-serif;text-align:left;background:var(--card);border:1px solid var(--line);border-left:3px solid transparent;border-radius:10px;color:var(--mist);font-weight:700;font-size:1rem;padding:.85rem 1rem;cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.picker__tab small{display:block;font-weight:500;font-size:.72rem;color:var(--slate);letter-spacing:.02em;margin-top:.15rem}
.picker__tab:hover{color:var(--white);border-color:var(--gold-d)}
.picker__tab[aria-selected="true"]{color:var(--white);background:linear-gradient(180deg,rgba(255,194,45,.08),rgba(18,35,63,.9));border-left-color:var(--gold);border-color:var(--gold-d)}
.picker__tab[aria-selected="true"] small{color:var(--gold)}
.picker__panel{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.picker__panel[hidden]{display:none}
.picker__panel--text{grid-template-columns:1fr}
.picker__photo{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line)}
.picker__photo img{width:100%;height:100%;max-height:430px;object-fit:cover}
.picker__photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:.55rem .9rem;font-size:.78rem;font-weight:600;color:var(--gold-pale);background:linear-gradient(transparent,rgba(6,14,29,.88) 40%)}
.picker__info > p:first-child{color:var(--mist);max-width:36rem}
.picker__note{color:var(--slate);font-size:.88rem;margin-top:.7rem;max-width:36rem}
.picker__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1.1rem;max-height:340px;overflow-y:auto;padding:.2rem .5rem .2rem .2rem;scrollbar-width:thin;scrollbar-color:rgba(255,194,45,.4) rgba(255,255,255,.06)}
.picker__chips::-webkit-scrollbar{width:7px}
.picker__chips::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:99px}
.picker__chips::-webkit-scrollbar-thumb{background:rgba(255,194,45,.4);border-radius:99px}
.picker__chips::-webkit-scrollbar-thumb:hover{background:rgba(255,194,45,.6)}
.pkchip{background:var(--card);border:1.5px solid var(--line);border-radius:9px;padding:.35rem .35rem .3rem;cursor:pointer;text-align:center;transition:transform .15s var(--ease),border-color .15s var(--ease)}
.pkchip img{width:76px;height:57px;object-fit:cover;border-radius:6px}
.pkchip span{display:block;font-family:'Montserrat',sans-serif;font-size:.62rem;font-weight:600;color:var(--mist);margin-top:.3rem;letter-spacing:.02em}
.pkchip:hover{transform:translateY(-2px);border-color:var(--gold-d)}
.pkchip[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 18px rgba(255,194,45,.15)}
.pkchip[aria-pressed="true"] span{color:var(--gold)}
.pkchip[hidden]{display:none!important}
@keyframes pkfade{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.pkchip--extra{animation:pkfade .35s var(--ease) both}
.picker__pick{margin-top:1.1rem;font-size:.9rem;color:var(--slate);text-align:center}
.picker__pick b{color:var(--gold);font-weight:700}
.picker__panel .btn{margin-top:.9rem;display:flex;width:max-content;margin-left:auto;margin-right:auto}
.picker__soon{margin-top:1.6rem;font-size:.85rem;color:var(--slate);border-top:1px dashed var(--line);padding-top:1rem}
html:not(.js) .picker__panel[hidden]{display:grid}
@media(max-width:900px){
  .picker{grid-template-columns:1fr}
  .picker__tabs{position:static;flex-direction:row;gap:.6rem;margin:0 calc(50% - 50vw);padding:.25rem 4vw .5rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:4vw;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5vw,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 2.5vw,#000 calc(100% - 3.5rem),transparent)}
  .picker__tabs::-webkit-scrollbar{display:none}
  .picker__tab{flex:0 0 auto;scroll-snap-align:start;border-left:none;border-bottom:3px solid transparent;border-radius:12px;padding:.75rem 1.05rem .7rem;min-width:9.5rem}
  .picker__tab[aria-selected="true"]{border-left-color:transparent;border-bottom-color:var(--gold)}
  .picker__panel{grid-template-columns:1fr}
  .picker__photo img{max-height:300px}
  .picker__chips{max-height:430px}
}

/* ---------- Reviews: proof from Google ---------- */
.rev-grid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:1.2rem;margin-top:2rem}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}
.rev__stars{color:var(--gold);letter-spacing:.12em;font-size:.95rem}
.rev p{color:var(--mist);font-size:.95rem}
.rev footer{color:var(--slate);font-size:.8rem;font-weight:600;margin-top:auto}
.rev--badge{align-items:center;text-align:center;justify-content:center;background:linear-gradient(180deg,rgba(255,194,45,.09),var(--card))}
.rev__big{font-family:'Fraunces',serif;font-weight:700;font-size:3rem;color:var(--gold);line-height:1}
.rev--badge p{font-size:.85rem;color:var(--slate)}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr}}

/* ---------- Linked hero chip + finish note + bottom form ---------- */
a.chip--link:hover{border-color:var(--gold);color:var(--gold)}
.hform__finish{display:flex;align-items:center;gap:.5rem;background:#FFF7E0;border:1px solid #EAD289;border-radius:8px;color:#6B4E00;font-size:.82rem;font-weight:600;padding:.45rem .7rem;margin-bottom:.6rem}
.hform__finish[hidden]{display:none}
.hform__finish b{font-weight:700}
.hform__finish button{margin-left:auto;background:none;border:none;color:#6B4E00;font-size:1rem;cursor:pointer;line-height:1;padding:.1rem .3rem}
.wrap--narrow{width:min(720px,92vw);margin:0 auto}
.hform--bottom{margin-top:1.8rem}

/* Ghost buttons: readable on busy hero photos */
.btn--ghost{background:rgba(8,19,38,.72);color:#FFD35C;border:1.5px solid rgba(255,194,45,.75)}
.btn--ghost:hover{background:rgba(8,19,38,.9);border-color:var(--gold)}

/* ---------- Commercial band: the second landing zone (hybrid mandate) ---------- */
.comm{position:relative;background:var(--navy-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.comm__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:2.8rem;align-items:center;margin-top:2.2rem}
.comm__pics{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.comm__pics figure{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);box-shadow:0 22px 48px rgba(0,0,0,.4)}
.comm__pics figure:first-child{grid-column:1/-1}
.comm__pics img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.comm__pics figure:not(:first-child) img{aspect-ratio:4/3}
.comm__pics figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem .55rem;background:linear-gradient(transparent,rgba(6,14,29,.9));font-size:.74rem;font-weight:600;color:var(--gold-pale)}
.comm__niches{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.comm .checklist{margin-top:1.4rem}
.comm__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
@media(max-width:920px){.comm__grid{grid-template-columns:1fr}}
@media(max-width:640px){
  .comm__ctas{flex-direction:column;align-items:center}
  .comm .btn{display:flex;width:min(340px,100%);margin:0}
}

/* ---------- Process: how we do it right (5 steps + real jobsite photos) ---------- */
.proc-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.4rem}
.proc-photos figure{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line)}
.proc-photos img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.proc-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.1rem .85rem .65rem;background:linear-gradient(transparent,rgba(6,14,29,.62) 30%,rgba(6,14,29,.95));text-shadow:0 1px 8px rgba(6,14,29,.9);font-size:.78rem;font-weight:600}
.proc-photos--two{grid-template-columns:repeat(2,1fr)}
.proc-photos--two img{aspect-ratio:4/3}
.steps--proc{grid-template-columns:repeat(5,1fr);margin-top:1.4rem}
.proc-note{margin-top:1.6rem;color:var(--slate);font-size:.88rem;max-width:52rem;border-left:3px solid var(--gold-d);padding-left:.9rem}
@media(max-width:1020px){.steps--proc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.proc-photos{grid-template-columns:repeat(3,1fr);gap:.7rem}.proc-photos--two{grid-template-columns:repeat(2,1fr)}.proc-photos figcaption{font-size:.66rem;padding:.5rem .55rem .45rem}}
/* phones: one photo per row, wide crop, readable caption */
@media(max-width:640px){
  .proc-photos,.proc-photos--two{grid-template-columns:1fr;gap:1rem}
  .proc-photos img,.proc-photos--two img{aspect-ratio:16/10}
  .proc-photos figcaption{font-size:.8rem;padding:.7rem .75rem .6rem}
}
@media(max-width:520px){.steps--proc{grid-template-columns:1fr}}

/* ---------- Portfolio page: uniform 4:3 grid, centered crops ---------- */
/* height:auto beats the img height attribute so aspect-ratio can actually crop */
.pf-grid .pf img{height:auto}
.pf-grid--page{grid-template-columns:repeat(4,1fr);margin-top:2.4rem}
.pf-grid--page .pf img{aspect-ratio:4/3}
.pf__more{margin-top:2rem;text-align:center}
@media(max-width:1020px){.pf-grid--page{grid-template-columns:repeat(3,1fr)}}
@media(max-width:920px){.pf-grid--page{grid-template-columns:repeat(2,1fr);gap:.8rem}.pf-grid--page .pf figcaption{font-size:.68rem;padding:.6rem .6rem .5rem}}
/* Phone: the tile labels come OUT of the photo (Anthony, July 27: "on mobile the image
   labels get in the way of the photos"). Two tiles across on a 390px screen is a ~180px
   tile, so an overlaid caption that wrapped to two lines ate a third of the picture.
   Shrinking it to one line worked but truncated half the labels to "Aircraft hangar
   full reco...", which trades one problem for another. So on phones the caption sits
   BELOW the image instead: the floor is never covered, and the full label still reads.
   Desktop keeps the overlay, where a wide tile has room for it. */
@media(max-width:640px){
  .pf{overflow:visible;border:0}
  .pf img{border-radius:var(--rad);border:1px solid var(--line)}
  .pf figcaption{
    position:static;
    background:none;
    padding:.4rem .1rem 0;
    font-size:.66rem;
    font-weight:600;
    line-height:1.3;
    color:var(--mist)}
}

/* ---------- Guide hub + articles (the knowledge hub) ---------- */
.guide-shelf{margin-top:2.6rem}
.guide-shelf+.guide-shelf{margin-top:3.4rem}
.guide-shelf>h2{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.guide-shelf>p{color:var(--slate);font-size:.95rem;margin-top:.4rem;max-width:44rem}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1.6rem}
.gcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.5rem 1.4rem 1.35rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.gcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.4);border-color:var(--gold-d)}
.gcard__tag{font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.gcard h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem;line-height:1.2;margin-top:.55rem}
.gcard p{color:var(--mist);font-size:.9rem;margin-top:.6rem}
.gcard__go{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold);font-weight:700;font-size:.85rem;margin-top:auto;padding-top:1rem}
.gcard__go svg{width:15px;height:15px;transition:transform .18s var(--ease)}
.gcard:hover .gcard__go svg{transform:translateX(4px)}
/* article body */
.prose{width:min(720px,92vw);margin:0 auto}
.prose>p{color:var(--mist);font-size:1.02rem;line-height:1.75;margin-top:1.15rem}
.prose>p b,.prose li b{color:#fff}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.85rem);margin-top:2.6rem}
.prose ul,.prose ol{margin:1.1rem 0 0 1.2rem;color:var(--mist);font-size:1.02rem;line-height:1.75;display:grid;gap:.55rem}
.prose .checklist,.prose .flags{margin-left:0}
.tldr{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--rad);padding:1.35rem 1.4rem 1.3rem;margin-top:2.2rem}
.tldr>span{display:block;font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.55rem}
.tldr p{color:var(--mist);font-size:.98rem;line-height:1.7}
.std{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.05em;color:var(--slate);border:1px solid var(--line);border-radius:6px;padding:.12rem .5rem;white-space:nowrap;vertical-align:.08em}
.prose blockquote{border-left:3px solid var(--gold-d);padding:.2rem 0 .2rem 1rem;margin-top:1.4rem;color:var(--gold-pale);font-size:1.02rem;line-height:1.7}
.flags{margin-top:1.2rem;display:grid;gap:.9rem;list-style:none}
.flags li{display:flex;gap:.7rem;align-items:flex-start;color:var(--mist);font-size:1rem;line-height:1.65}
.flags svg{width:19px;height:19px;color:var(--gold);flex:none;margin-top:.25rem}
/* the printable contractor checklist (D1's signature) */
.qcheck{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1.5rem 1.5rem 1.4rem;margin-top:2.4rem}
.qcheck h2{margin-top:0;font-size:1.35rem}
.qcheck>p{color:var(--slate);font-size:.88rem;margin-top:.4rem}
.qcheck ol{list-style:none;margin:1.2rem 0 0;display:grid;gap:.85rem}
.qcheck label{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;color:var(--mist);font-size:.98rem;line-height:1.6}
.qcheck input{width:19px;height:19px;margin-top:.25rem;accent-color:var(--gold);flex:none}
.qcheck__print{margin-top:1.3rem}
.related{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.6rem}
.related>span{font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.related ul{list-style:none;margin-top:.9rem;display:grid;gap:.55rem}
.related a{display:inline-flex;align-items:center;gap:.45rem;color:var(--mist);font-weight:600;font-size:.95rem}
.related a:hover{color:var(--gold)}
.related svg{width:15px;height:15px;color:var(--gold);flex:none}
@media(max-width:920px){.guide-grid{grid-template-columns:1fr}}
@media print{
  .nav,.mactions,.cta,.foot,.related,.skip,.sec--form{display:none!important}
  body{background:#fff;color:#000}
  .qcheck{border:1.5px solid #000;background:#fff}
  .qcheck label{color:#000}
}

/* ---------- Thank-you: action buttons + the details popup ---------- */
.ty-actions{margin-top:1.8rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){
  .ty-actions{flex-direction:column;align-items:center}
  .ty-actions .btn{display:flex;width:min(340px,100%)}
}
.dmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(6,14,29,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dmodal[hidden]{display:none}
.dmodal__card{position:relative;width:min(560px,100%);max-height:92svh;overflow-y:auto;background:var(--navy-2);border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.5rem 1.5rem;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.dmodal__card h2{font-size:clamp(1.4rem,4vw,1.7rem)}
.dmodal__sub{color:var(--mist);font-size:.95rem;margin:.55rem 0 1.2rem}
.dmodal__x{position:absolute;top:.7rem;right:.7rem;width:42px;height:42px;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--mist);font-size:1.35rem;line-height:1;cursor:pointer}
.dmodal__x:hover,.dmodal__x:focus-visible{color:#fff;border-color:var(--gold-d)}
@media(prefers-reduced-motion:no-preference){.dmodal__card{animation:rise .35s var(--ease) both}}

/* ---------- Brand motion (Higgsfield loops; respectful of reduced motion) ---------- */
.ty-bell{width:132px;height:132px;border-radius:50%;display:block;margin:0 auto 1.4rem;object-fit:cover;box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.cta--live .cta__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta--live::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,214,92,.42),rgba(255,194,45,.34) 55%,rgba(184,134,11,.30));z-index:1;pointer-events:none}
.cta--live .wrap,.cta--live .pourinto{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){.cta--live .cta__vid,.ty-bell{display:none}}
html:not(.js) .cta--live .cta__vid{display:none}

/* ---------- Sample board: color-chart groups, in-stock stars, custom chips, visualizer CTA ---------- */
.pkgroup{flex-basis:100%;text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);padding-top:.5rem}
.pkgroup:first-child{padding-top:0}
.pkstar{color:var(--gold);font-style:normal}
.pkchip__custom{display:block;width:76px;height:57px;margin:0 auto;border-radius:6px;background:conic-gradient(from .3turn,#B96A4B,#C9A44C,#7FA05C,#5C89A8,#8A6AA0,#B96A4B)}
.pkchip img{margin:0 auto}
.pkchip--less{flex-basis:100%;position:sticky;bottom:0;z-index:1;background:var(--navy);border-style:dashed;color:var(--slate);font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:.55rem}
.pkchip--less:hover{transform:none;color:var(--gold)}
.picker__viz{margin-top:2rem;border-top:1px dashed var(--line);padding-top:1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.picker__viz p{color:var(--mist);font-size:.95rem;max-width:40rem}
@media(max-width:640px){.picker__viz{flex-direction:column;align-items:stretch;text-align:center}.picker__viz .btn{display:flex;width:min(340px,100%);margin:0 auto}}

/* ---------- Punch list 7/6 evening: findable visualizer + crew on phones ---------- */
.nav__links .nav__viz{color:var(--gold)}
.nav__links .nav__viz:hover{color:var(--gold-pale)}
.picker__viz{grid-column:1/-1;flex-direction:column;align-items:center;text-align:center;justify-content:center;border-top:1px solid var(--line);padding-top:2rem}
.picker__viz p{max-width:44rem;font-size:1.02rem;margin:0 auto}
.picker__viz .btn{font-size:1.05rem;padding:1.05rem 2.4rem;align-self:center;width:auto}

/* ---------- Slim visualizer band (service pages) ---------- */
.vizband-sec{padding:clamp(1.4rem,4vw,2.4rem) 0}
.vizband{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--card),var(--navy-2));
  border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.9rem;position:relative;overflow:hidden}
.vizband::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pour)}
.vizband__txt{max-width:46rem;padding-left:.5rem}
.vizband .sec-eyebrow{margin-bottom:.3rem}
.vizband__line{color:var(--mist);font-size:1.02rem;margin:0}
.vizband__line b{color:var(--white)}
.vizband .btn{white-space:nowrap;flex-shrink:0}
@media(max-width:640px){
  .vizband{flex-direction:column;align-items:stretch;text-align:center;padding:1.6rem 1.3rem}
  .vizband__txt{padding-left:0}
  .vizband .btn{display:flex;width:min(340px,100%);margin:.4rem auto 0}
}

/* eye icon on visualizer links/buttons: "see it" affordance */
.viz-eye{vertical-align:-3px;margin-right:.35em}
.nav__viz .viz-eye{width:15px;height:15px;vertical-align:-2px}
.nav__viz{display:inline-flex;align-items:center;gap:.35em;white-space:nowrap}
.nav__viz .viz-eye{margin-right:0}

/* proof line under the gold band CTAs: ruled, not pilled (Design Bible, July 16).
   display:block + fit-content keeps it on its own centered line below the buttons at every width
   (inline-block let it share the buttons' row on desktop). */
.cta .cta__proof, .cta__proof{display:block;width:fit-content;margin:1.5rem auto 0;padding-top:1rem;border-top:1px solid rgba(12,27,51,.28);font-size:.85rem;font-weight:600;letter-spacing:.02em;color:#1A1200}

/* ---------- Commercial build (July 2026): systems grid 3-up + the two-lane chooser ---------- */
/* six system cards read as two clean rows of three (four-up leaves a ragged row) */
.svc-grid--tri{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.svc-grid--tri{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-grid--tri{grid-template-columns:1fr}}
/* the residential/commercial fork under the homepage hero: two doors, one glance.
   Ruled left edge, no pills, no rounding beyond the house radius (Design Bible bans). */
.lanes-sec{padding:1.9rem 0 .3rem}
/* split photos on the commercial pages: crop tall portraits to a balanced 4:3
   so the photo never towers over the checklist beside it */
.split__img--crop{aspect-ratio:4/3}
.split__img--crop img,.split__img--crop picture{height:100%}
.split__img--crop img{width:100%;object-fit:cover}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:0}
.lane{display:flex;align-items:center;gap:1.1rem;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold-d);border-radius:var(--rad);padding:1.35rem 1.4rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.lane:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.4);border-left-color:var(--gold)}
.lane svg{width:30px;height:30px;color:var(--gold);flex:none}
.lane b{display:block;font-size:1.05rem}
.lane p{color:var(--mist);font-size:.86rem;margin-top:.15rem}
.lane .lane__go{margin-left:auto;flex:none;color:var(--gold)}
.lane .lane__go svg{width:20px;height:20px;transition:transform .18s var(--ease)}
.lane:hover .lane__go svg{transform:translateX(4px)}
@media(max-width:920px){.lanes{grid-template-columns:1fr}}

/* ===== v11: the client rail - full-bleed white band, straight edges, gold pinstripe.
   Replaces v9 (July 28, 2026). Three things changed and each fixes a measured defect:
   1. FULL BLEED with a hard edge, so the band never fades. v9 masked a white band
      against navy, which produced a grey smear at both ends that read as a glitch.
      Only the LOGOS fade now; the band runs edge to edge (house pattern, see .picker__tabs).
   2. MARKS MATCHED BY OPTICAL INK AREA, baked into the art by tools/normalize_logos.py.
      v9 matched on height alone, so wide wordmarks rendered 3.3x heavier than the
      badges. Sizes come from the HTML width/height attrs; do NOT re-cap them here.
   3. 42s lap (30s on phones), down from 90s. At 90s a phone visitor saw ~1.5 marks
      and never reached the Navy or Jaguar Land Rover. Now ~3.5 marks, whole lap in 30s.
   Blank tiles are fixed in the MARKUP, not here: the rail imgs must never carry
   loading="lazy" - off-screen marquee tiles used to glide in empty. ===== */
.logos--rail{display:block}
.logos--rail .logos__label{display:block;text-align:center;margin-bottom:1.35rem}
.logos__viewport{position:relative;margin:0 calc(50% - 50vw);overflow:hidden;
  height:132px;display:flex;align-items:center;padding:0;
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F8FC 40%,#E9F0F8 74%,#DCE6F2 100%);
  border-top:3px solid var(--gold);box-shadow:0 18px 38px rgba(0,0,0,.30)}
.logos__viewport:focus-visible{outline:2px solid var(--gold);outline-offset:-5px}
.logos__track{display:flex;width:max-content;background:none;border:0;box-shadow:none;
  /* 42s -> 75s on Anthony's call, July 29 2026: "the trust bar moving that quickly
     the auto scrolling badges reads untrust to me, make it a classy slower feel."
     TIMING STAYS LINEAR ON PURPOSE. An eased marquee visibly stutters at the loop
     seam, so the classy feel comes from the slower speed, never from an ease curve.
     Hover/press still multiplies by 1.75x (site.js), which now lands near the old
     default instead of a blur. */
  animation:logosGlide 75s linear infinite;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.logos__set{display:flex}
.logos--rail .logos__tile{flex:0 0 auto;width:206px;min-height:100px;padding:0;gap:1.15rem;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0;box-shadow:none;transition:none}
.logos--rail .logos__tile:hover{transform:none;box-shadow:none}
/* size comes from each img's width/height ATTRIBUTES (set by normalize_logos.py).
   Do not add width:auto here - it makes the browser use the 2x intrinsic size and
   the marks collide into each other. */
.logos--rail .logos__tile img{max-height:none;max-width:none;object-fit:contain}
/* the combined military cell: DoD seal + America's Navy as one lockup, marks untouched */
.logos__tile--mil{width:272px}
@keyframes logosGlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logos__viewport:focus-visible .logos__track{animation-play-state:paused}
@media (max-width:640px){
  .logos__viewport{height:104px}
  .logos--rail .logos__tile{width:152px;min-height:80px;gap:.7rem}
  .logos__tile--mil{width:200px}
  .logos--rail .logos__tile img{transform:scale(.76)}
  .logos__track{animation-duration:55s}   /* was 30s, same July 29 call */
}
/* reduced motion: no marquee - the band holds one static centred grid */
@media (prefers-reduced-motion:reduce){
  .logos__viewport{height:auto;padding:1.5rem 4vw}
  .logos__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;
    will-change:auto;-webkit-mask-image:none;mask-image:none}
  .logos__set{flex-wrap:wrap;justify-content:center}
  .logos__set--dup{display:none}
  .logos--rail .logos__tile{min-height:84px}
  .logos--rail .logos__tile img{transform:none}
}
/* ===== end v11 client rail ===== */

/* ===== v11 spacing pass (July 28, 2026) - three measured fixes, append-only.
   Audited the real render at 390 and 1440: the section rhythm is already clean
   (every .sec is 96px top and bottom on desktop, ~51 on phone, off one clamp).
   These are the only three places it broke. ===== */

/* 1. THE LANE FORK was the one orphan on the homepage: 30px above, 5px below,
      matching nothing else on the page, so it sat crammed under the hero and
      jammed against the next section. Now on the same scale as .sec, at half step. */
.lanes-sec{padding:clamp(1.8rem,3.75vw,3rem) 0}

/* 2. TYPE SCALE: eight h2 definitions had drifted into near-duplicate pairs
      (2.8 vs 2.9rem, 1.85 vs 1.9, 1.35 vs 1.4). Individually invisible, together
      it is what makes a page feel subtly off. Collapsed onto the real scale.
      Sub-2px moves - nothing reflows. */
.cta h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.qcheck h2{font-size:1.4rem}

/* 3. PHONE GUTTER was 15.5px each side (92vw). 18px reads less cramped without
      costing a meaningful line length. Phones only - desktop still caps at 1180. */
@media (max-width:640px){
  .wrap{width:calc(100% - 36px)}
}
/* ===== end v11 spacing pass ===== */

/* the picker's secondary link out to a full system page (urethane cement panel) */
.picker__more{display:inline-block;margin-left:1rem;color:var(--gold);font-weight:700;
  font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
.picker__more:hover{color:#fff}
@media(max-width:520px){.picker__more{display:block;margin:.9rem 0 0}}