/* ══════════════════════════════════════════════════════════════
   PUBLIC SITE — INDUSTRIAL LUXURY
   Ported from docs/design-prototype/index.html. Self-hosted variable
   Archivo, two axes: weight and WIDTH. The width axis is what makes the
   display type feel bespoke rather than "a bold sans someone picked".

   No client name, colour or hostname is in this file. Brand values that
   differ per tenant are inlined as custom properties by the template.
   ══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var.4efe97f31699.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  font-style:normal;
}

:root{
  --ink:#070C18; --graphite:#0F1626; --slate:#182642; --raise:#243352;
  --steel:#8695B0; --steel-bright:#C4D3ED;
  --paper:#F3F7FD; --paper-2:#E2EAF6; --ink-on-paper:#0C1526; --muted-paper:#54627E;
  --molten:#E9B949; --molten-hot:#F7CF66; --molten-dim:#8A6410;
  --azure:#6FA8FF; --alert:#FF6B7A;   /* light-blue emphasis; error red (never the gold accent) */

  --display:"Archivo","Bahnschrift","Arial Narrow",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-xs:clamp(.72rem,.70rem + .10vw,.78rem);
  --t-sm:clamp(.86rem,.83rem + .16vw,.95rem);
  --t-base:clamp(1rem,.96rem + .22vw,1.12rem);
  --t-lg:clamp(1.18rem,1.05rem + .55vw,1.5rem);
  --t-xl:clamp(1.7rem,1.3rem + 1.7vw,2.7rem);
  --t-2xl:clamp(2.3rem,1.5rem + 3.2vw,4.4rem);
  --t-hero:clamp(3rem,1.3rem + 7.2vw,8.4rem);

  --edge:clamp(1.25rem,.4rem + 3.2vw,4.5rem);
  --sec:clamp(5rem,3rem + 8vw,11rem);   /* macro-whitespace. the layout breathes. */
  --gap:clamp(1rem,.6rem + 1.6vw,2rem);
  --measure:60ch;

  /* Physical easing. Nothing here is linear or ease-in-out. */
  --spring:cubic-bezier(.32,.72,0,1);
  --swift:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:var(--t-base);line-height:1.62;
  font-variation-settings:"wght" 400,"wdth" 100;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{
  font-family:var(--display);margin:0;text-transform:uppercase;
  line-height:.9;text-wrap:balance;
  font-variation-settings:"wght" 800,"wdth" 74;  /* condensed + heavy */
  letter-spacing:.004em;
}
:focus-visible{outline:2px solid var(--molten);outline-offset:4px;border-radius:2px}
::selection{background:var(--molten);color:#0C1526}

.wrap{max-width:1420px;margin-inline:auto;padding-inline:var(--edge)}
section{padding-block:var(--sec)}
section[id],main[id]{scroll-margin-top:clamp(88px,11vh,132px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Film grain. Fixed, pointer-events:none. Never on a scroller. ── */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");background-size:180px 180px;
  opacity:.30;mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Eyebrow: microscopic pill badge ── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-variation-settings:"wght" 600,"wdth" 100;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:999px;
  background:rgba(233,185,73,.10);color:var(--molten);
  box-shadow:inset 0 0 0 1px rgba(233,185,73,.28);
  margin-bottom:1.5rem;
}
.eyebrow::before{content:"";width:4px;height:4px;border-radius:999px;background:var(--molten)}
.eyebrow.dark{background:rgba(12,21,38,.06);color:#8A6410;box-shadow:inset 0 0 0 1px rgba(138,100,16,.4)}
#how :focus-visible{outline-color:#8A6410}
.lede{font-size:var(--t-lg);line-height:1.5;color:var(--steel-bright);max-width:var(--measure);font-variation-settings:"wght" 350,"wdth" 100}
.lede.dark{color:var(--muted-paper)}
.sec-head{max-width:56ch;margin-bottom:clamp(3rem,5vw,5rem)}
.sec-head h2{font-size:var(--t-2xl);margin-bottom:1.2rem}

/* ══ DOUBLE-BEZEL: outer shell + inner core. Machined hardware. ══ */
.bezel{
  padding:6px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 42%,rgba(0,0,0,.25));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px -30px rgba(0,0,0,.9);
}
.bezel>.core{
  border-radius:20px;background:var(--graphite);overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.04);
}
.bezel.light{background:linear-gradient(160deg,rgba(0,0,0,.09),rgba(0,0,0,.02) 45%,rgba(255,255,255,.7));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 26px 60px -32px rgba(12,21,38,.4)}
.bezel.light>.core{background:var(--paper-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(12,21,38,.06)}
.full{height:100%}

/* ══ Buttons: pill, nested icon, magnetic press ══ */
.btn{
  --bg:var(--molten); --fg:#0C1526;
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-variation-settings:"wght" 700,"wdth" 92;
  text-transform:uppercase;letter-spacing:.09em;font-size:.86rem;
  padding:.7rem .7rem .7rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);text-decoration:none;white-space:nowrap;
  transition:transform .5s var(--spring), background-color .4s var(--swift), box-shadow .4s var(--swift);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 30px -14px rgba(233,185,73,.9);
}
.btn:hover{background:var(--molten-hot);box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 18px 40px -16px rgba(233,185,73,1)}
.btn:active{transform:scale(.975)}
.btn .cap{
  width:34px;height:34px;flex:0 0 auto;border-radius:999px;
  background:rgba(0,0,0,.16);display:grid;place-items:center;
  transition:transform .5s var(--spring), background-color .4s var(--swift);
}
.btn:hover .cap{transform:translate(3px,-2px) scale(1.06);background:rgba(0,0,0,.24)}
.btn.ghost{--bg:transparent;--fg:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.btn.ghost:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn.ghost .cap{background:rgba(255,255,255,.09)}
.btn.dark{--bg:#0C1526;--fg:var(--molten);box-shadow:0 14px 34px -16px rgba(0,0,0,.8)}
.btn.dark:hover{background:#000}
.btn.sm{font-size:.75rem;padding:.62rem .5rem .62rem 1.15rem}
.btn.sm .cap{width:26px;height:26px}

/* ══ Header: floating glass island, detached from the top ══ */
header{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:clamp(.75rem,1.6vw,1.5rem);pointer-events:none}
.island{
  pointer-events:auto;margin-inline:auto;width:max-content;max-width:calc(100% - 2rem);
  display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem);
  padding:.5rem .5rem .5rem 1.1rem;border-radius:999px;
  background:rgba(7,12,24,.86);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06), 0 20px 50px -24px rgba(0,0,0,.95);
  transition:transform .6s var(--spring);
}
body.scrolled .island{transform:translateY(-2px) scale(.985)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
/* The mark is now real SVG in the template, not a CSS hexagon. A clip-path
   hexagon was generic - it is the same motif every third industrial logo
   uses, and it matched nothing else in the design system. */
.mark{width:28px;height:28px;flex:0 0 auto;display:block}
.mark svg{display:block}
.logo b{font-family:var(--display);font-variation-settings:"wght" 750,"wdth" 82;
  font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;line-height:1;white-space:nowrap}
/* A long trading name must not push the header off a phone screen. */
@media (max-width:620px){.logo b{white-space:normal;font-size:.8rem;line-height:1.15}}
.island nav{display:flex;gap:clamp(.8rem,1.6vw,1.6rem);align-items:center}
.island nav a{font-family:var(--display);font-variation-settings:"wght" 550,"wdth" 96;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;
  color:#D3D9E1;white-space:nowrap;transition:color .3s var(--swift)}
.island nav a:hover{color:var(--paper)}

/* ── Staff door. 99% of visitors are sellers, so this is deliberately the
   quietest thing in the header: dimmer, lighter, behind a hairline rule, and
   never competing with the quote CTA. It is still a real 44px target. ── */
.nav-quiet{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--steel)!important;font-variation-settings:"wght" 450,"wdth" 96!important;
  padding-inline-start:clamp(.8rem,1.6vw,1.6rem);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.12);
}
.nav-quiet:hover{color:var(--steel-bright)!important}
.nav-quiet svg{opacity:.75}
@media (max-width:1000px){
  .island{width:100%;max-width:calc(100% - 1.5rem);flex-wrap:wrap;justify-content:space-between;border-radius:22px}
  .island nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none;gap:1.1rem;
    padding:.65rem .2rem .25rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);margin-top:.2rem}
  .island nav::-webkit-scrollbar{display:none}
  .island nav a{padding-block:.35rem}
  .nav-quiet{margin-inline-start:auto}
}

/* Inner pages start below the floating header. The island gains a second
   navigation row from 1000px down, then becomes compact at 760px; long tenant
   names can wrap the phone header again below 560px. Keep the clearance in
   step with those measured heights so breadcrumbs and eyebrows stay visible. */
.public-subpage{padding-top:clamp(5.25rem,6vw,5.75rem)}
@media (max-width:1000px){.public-subpage{padding-top:9.5rem}}
@media (max-width:760px){.public-subpage{padding-top:5rem}}
@media (max-width:560px){.public-subpage{padding-top:7rem}}

/* ══ Hero ══ */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;padding-block:0;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--ink)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.hero-media__video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-media::after{content:"";position:absolute;inset:0;
  /* The 25-55% stops keep the H1 band >=3:1 when the bright hood crosses it (t~5-7s of the loop). */
  background:linear-gradient(178deg,rgba(7,12,24,.72) 0%,rgba(7,12,24,.50) 25%,rgba(7,12,24,.68) 40%,rgba(7,12,24,.86) 55%,rgba(7,12,24,.94) 78%,var(--ink) 100%)}
/* Reduced motion: drop the loop, hold the poster frame the video opens on. */
@media (prefers-reduced-motion:reduce){
  .hero-media__video{display:none}
  .hero-media{background:url("../video/twin-rivers-hero-poster.1f9a5d221981.jpg") center/cover no-repeat}
}
.hero-inner{position:relative;z-index:1;width:100%;padding-block:clamp(8rem,14vh,11rem) clamp(2.5rem,5vw,4.5rem)}
.hero h1{font-size:var(--t-hero);line-height:.84;letter-spacing:-.014em;
  font-variation-settings:"wght" 830,"wdth" 70;max-width:15ch;margin-bottom:clamp(1.4rem,2.4vw,2.2rem)}
.hero h1 em{font-style:normal;color:var(--azure);display:block}
.hero .lede{margin-bottom:clamp(2.2rem,3.4vw,3rem)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.cta-note{font-size:var(--t-sm);color:var(--steel);margin-left:.3rem}

/* stat rail */
.rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(3.5rem,6vw,6rem);gap:1px;background:rgba(255,255,255,.07)}
@media(min-width:860px){.rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rail>div{background:rgba(7,12,24,.55);backdrop-filter:blur(6px);padding:clamp(1.3rem,2vw,1.9rem) clamp(1.1rem,1.6vw,1.6rem)}
.rail b{display:block;font-family:var(--display);font-variation-settings:"wght" 780,"wdth" 76;
  font-size:clamp(1.7rem,1rem + 2.2vw,2.8rem);line-height:1;margin-bottom:.55rem;letter-spacing:-.01em}
.rail span{font-size:var(--t-sm);color:var(--steel);display:block;max-width:26ch;line-height:1.45}

/* ══ The ask — the first beat under the hero ══
   No panel, no texture, no colour of its own: it sits on the same ink the
   hero gradient lands on, so it reads as the hero finishing its sentence
   rather than a strip bolted underneath. One hairline closes it, the same
   rule weight .rail uses above and the footer uses below.

   Padding is deliberately off the --sec scale. --sec is the macro-whitespace
   between SECTIONS; this is a continuation of the one above it, and a full
   --sec here would open the gap that makes a CTA look bolted on.

   Type stays subordinate: --t-xl, not the --t-2xl every real section head
   uses, and the h2 inherits the global heading axis rather than the hero's.
   The button is the only molten thing in here - see ADR-013, the phone is
   deliberately .ghost so this band spends exactly one molten use. */
.ask{padding-block:clamp(2.6rem,5vw,4.2rem);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.ask-in{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:clamp(1.3rem,3vw,3rem)}
.ask-say{flex:1 1 24ch}
.ask h2{font-size:var(--t-xl);margin-bottom:.5rem}
.ask p{font-size:var(--t-base);color:var(--steel);max-width:44ch}

/* ══ Scroll reveal — transform + opacity only ══ */
.rise{opacity:0;transform:translate3d(0,44px,0);
  transition:opacity .9s var(--spring), transform .9s var(--spring)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}}
/* No JavaScript, no reveal to wait for. */
html:not(.js) .rise{opacity:1;transform:none}

/* ══ Bento: asymmetric grid ══ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.bento>*{grid-column:span 12}
@media (min-width:860px){
  .b7{grid-column:span 7}.b5{grid-column:span 5}
  .b8{grid-column:span 8}.b4{grid-column:span 4}
  .b6{grid-column:span 6}.b3{grid-column:span 3}
}
.pad{padding:clamp(1.6rem,2.6vw,2.6rem)}
.card h3{font-size:var(--t-lg);margin-bottom:.7rem;font-variation-settings:"wght" 760,"wdth" 84}
.card p{font-size:var(--t-sm);color:var(--steel)}
.card .idx{font-family:var(--display);font-variation-settings:"wght" 600,"wdth" 100;
  font-size:10px;letter-spacing:.24em;color:var(--molten);display:block;margin-bottom:1.6rem}
.tex-core{position:relative;min-height:clamp(220px,26vw,340px);display:flex;align-items:flex-end}
.tex-core>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tex-core>.on{position:relative;z-index:1;padding:clamp(1.4rem,2.4vw,2.2rem);width:100%;
  background:linear-gradient(0deg,rgba(7,12,24,.94),rgba(7,12,24,.35) 60%,transparent)}

/* ══ Video ══ */
.vwrap{position:relative;aspect-ratio:16/9;background:var(--ink)}
.vwrap video,.vwrap img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vwrap video{opacity:0;transition:opacity .7s var(--swift)}
.vwrap.playing video{opacity:1}
.vwrap.playing img.poster{opacity:0;transition:opacity .7s var(--swift)}
.vplay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(76px,9vw,108px);height:clamp(76px,9vw,108px);border-radius:999px;border:0;cursor:pointer;
  background:rgba(7,12,24,.5);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 24px 60px -20px rgba(0,0,0,.9);
  display:grid;place-items:center;color:var(--paper);
  transition:transform .6s var(--spring), background-color .4s var(--swift), opacity .4s var(--swift);
}
.vplay:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(233,185,73,.85);color:#0C1526}
.vplay:active{transform:translate(-50%,-50%) scale(.97)}
.vwrap.playing .vplay{opacity:0;pointer-events:none;visibility:hidden}
.vstop{position:absolute;right:14px;top:14px;z-index:3;display:none;align-items:center;gap:.45rem;font-family:var(--display);font-variation-settings:"wght" 620,"wdth" 96;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem .9rem;border:0;border-radius:999px;cursor:pointer;color:var(--paper);background:rgba(7,12,24,.7);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transition:background-color .3s var(--swift)}
.vstop:hover{background:rgba(7,12,24,.92)}
.vwrap.playing .vstop{display:inline-flex}
/* Without JS the play button cannot do anything, so hand the visitor the
   browser's own controls instead of a dead circle. */
html:not(.js) .vplay,html:not(.js) .vstop{display:none}
html:not(.js) .vwrap video{opacity:1}
html:not(.js) .vwrap img.poster{display:none}

/* ══ Shot frames — art direction, not grey boxes ══ */
.shot{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,#141F38,#0C1424);
  display:grid;place-items:end start;text-align:left;padding:1.3rem 3.4rem 1.3rem 1.3rem}
.shot::before{content:"";position:absolute;inset:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);border-radius:6px}
.shot::after{content:"";position:absolute;left:14px;top:14px;width:22px;height:22px;
  border-left:2px solid var(--molten);border-top:2px solid var(--molten)}
.shot i{font-style:normal;font-family:var(--display);font-variation-settings:"wght" 620,"wdth" 92;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-bright);display:block;margin-bottom:.6rem}
.shot em{font-style:normal;font-size:var(--t-sm);color:var(--steel-bright);display:block;max-width:34ch;line-height:1.45}
.shot small{position:absolute;right:14px;bottom:14px;font-size:9.5px;letter-spacing:.16em;color:var(--steel);text-transform:uppercase}

/* ══ Steps ══ */
.steps{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:s}
.step{counter-increment:s;padding-top:2.8rem;position:relative}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--display);font-variation-settings:"wght" 700,"wdth" 100;
  font-size:.78rem;letter-spacing:.2em;color:var(--molten-dim)}
.step::after{content:"";position:absolute;top:1.5rem;left:0;right:1.5rem;height:1px;
  background:linear-gradient(90deg,var(--molten-dim),transparent)}
.step h3{font-size:var(--t-lg);margin-bottom:.6rem;color:var(--ink-on-paper)}
.step p{font-size:var(--t-sm);color:var(--muted-paper)}

/* ══ Towns ══ */
.towns{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media(min-width:1000px){.towns{grid-template-columns:repeat(3,minmax(0,1fr))}}
.town{display:flex;flex-direction:column;height:100%}
.town .hwy{font-family:var(--display);font-variation-settings:"wght" 620,"wdth" 100;
  font-size:10px;letter-spacing:.2em;color:var(--steel-bright);margin-bottom:.9rem;display:block}
.town h3{font-size:var(--t-lg);margin-bottom:.55rem}
.town p{font-size:var(--t-sm);color:var(--steel);margin-bottom:1.2rem}
.town a{margin-top:auto;font-family:var(--display);font-variation-settings:"wght" 600,"wdth" 96;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-bright);
  text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;padding-block:.75rem;
  transition:color .3s var(--swift),gap .4s var(--spring)}
.town a:hover{color:var(--molten);gap:.8rem}
.empty-note{font-size:var(--t-sm);color:var(--steel);max-width:var(--measure)}

/* ══ Form ══
   Progressive enhancement: with JavaScript off every step is on screen and
   one submit button posts the lot. `html.js` is set by boot.js before paint,
   so the wizard never flashes all four steps first. */
.fshell{display:grid;grid-template-columns:1fr min(560px,44%);gap:clamp(2.5rem,6vw,6rem);align-items:start}
@media (max-width:960px){.fshell{grid-template-columns:1fr}}
.prog{display:flex;gap:5px;margin-bottom:2.2rem}
.prog i{flex:1;height:2px;background:rgba(255,255,255,.10);border-radius:2px;
  transition:background-color .6s var(--swift)}
.prog i.on{background:var(--molten)}
html:not(.js) .prog{display:none}
#qf{min-height:430px}
.fstep{display:block;margin-bottom:2.6rem}
html.js .fstep{display:none;margin-bottom:0}
html.js .fstep.on{display:block;animation:fin .55s var(--spring)}
@keyframes fin{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.fstep h3{font-size:var(--t-lg);margin-bottom:.35rem}
.hint{font-size:var(--t-sm);color:var(--steel);margin-bottom:1.7rem}
html:not(.js) .hint .of4{display:none}
html:not(.js) [data-go]{display:none}
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--display);font-variation-settings:"wght" 600,"wdth" 100;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-bright);margin-bottom:.5rem}
.field input,.field select{width:100%;padding:.9rem 1rem;background:rgba(0,0,0,.32);color:var(--paper);
  border:0;border-radius:12px;font:inherit;font-size:var(--t-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);
  transition:box-shadow .35s var(--swift),background-color .35s var(--swift)}
.field input:hover,.field select:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.field input:focus,.field select:focus{outline:none;background:rgba(0,0,0,.5);
  box-shadow:inset 0 0 0 1px var(--molten),0 0 0 4px rgba(233,185,73,.14)}
.opt{color:var(--steel);font-variation-settings:"wght" 400,"wdth" 100;letter-spacing:0;text-transform:none;font-size:10px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}

/* Errors. Never colour alone — an icon and a sentence go with it. */
.field.bad input,.field.bad select{box-shadow:inset 0 0 0 1px var(--alert)}
.err{display:flex;gap:.45rem;align-items:flex-start;margin-top:.5rem;
  font-size:var(--t-xs);color:var(--alert);line-height:1.45}
.err::before{content:"!";flex:0 0 auto;width:15px;height:15px;border-radius:999px;
  background:var(--alert);color:#0C1526;font-size:10px;font-weight:700;
  display:grid;place-items:center;margin-top:2px}
.errsum{margin-bottom:1.6rem;padding:1rem 1.1rem;border-radius:12px;
  background:rgba(255,107,122,.12);box-shadow:inset 0 0 0 1px rgba(255,107,122,.5);
  font-size:var(--t-sm);color:var(--paper)}
.errsum ul{margin:.55rem 0 0;padding-left:1.1rem;color:var(--steel-bright);font-size:var(--t-xs)}

/* Chips are real checkboxes, so they submit and tab without JavaScript. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.chips>div{display:contents}
.chips label{
  font-family:var(--display);font-variation-settings:"wght" 600,"wdth" 96;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.85rem 1rem;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--steel-bright);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);
  display:inline-flex;align-items:center;margin:0;
  transition:transform .45s var(--spring),background-color .3s var(--swift),color .3s var(--swift),box-shadow .3s var(--swift)}
.chips label:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.chips label:active{transform:scale(.96)}
.chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chips label:has(input:checked){background:var(--molten);color:#0C1526;
  box-shadow:inset 0 0 0 1px var(--molten),0 8px 20px -10px rgba(233,185,73,.9)}
.chips label:has(input:focus-visible){outline:2px solid var(--molten);outline-offset:3px}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-xs);color:var(--steel);
  margin:1.3rem 0 1.6rem;line-height:1.55;text-transform:none;letter-spacing:0;
  font-family:var(--body);font-variation-settings:"wght" 400,"wdth" 100}
.consent input{margin-top:.15rem;accent-color:var(--molten);width:17px;height:17px;flex:0 0 auto}
.fnav{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.note{margin-top:1.7rem;padding-top:1.3rem;font-size:var(--t-xs);color:var(--steel);
  display:flex;gap:.65rem;line-height:1.55;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.note svg{flex:0 0 auto;margin-top:3px}
/* The honeypot. Off-screen rather than display:none so a bot that checks
   computed style still fills it in. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sent h3{color:var(--molten);margin-bottom:.75rem}
.sent p{font-size:var(--t-sm);color:var(--steel-bright)}

/* ══ FAQ ══ */
.faq{max-width:80ch}
@media(min-width:900px){#faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:start}#faq .sec-head{position:sticky;top:7rem;margin-bottom:0}}
.faq details{padding:1.5rem 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.faq summary{font-family:var(--display);font-variation-settings:"wght" 700,"wdth" 84;
  text-transform:uppercase;font-size:var(--t-lg);cursor:pointer;list-style:none;
  display:flex;gap:1rem;align-items:baseline;transition:color .3s var(--swift)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);
  transform:rotate(45deg) translateY(-3px);transition:transform .5s var(--spring),border-color .3s var(--swift)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px);border-color:var(--molten)}
.faq details p{margin-top:1rem;color:var(--steel);max-width:var(--measure);font-size:var(--t-sm)}

/* ══ Band ══ */
.band{position:relative;overflow:hidden;padding-block:clamp(4rem,7vw,7rem)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,12,24,.92),rgba(7,12,24,.55))}
.band .wrap{position:relative;z-index:1}
.band h2{font-size:var(--t-2xl);max-width:17ch;margin-bottom:1.1rem}
.band p{max-width:50ch;margin-bottom:2.2rem;font-size:var(--t-lg);color:var(--steel-bright)}

/* ══ Footer ══ */
footer{padding-block:clamp(4rem,6vw,6rem) 2rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fg{display:grid;gap:var(--gap);grid-template-columns:1.7fr repeat(3,minmax(140px,1fr));margin-bottom:3.5rem}
@media(max-width:760px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.fg{grid-template-columns:1fr}}
.fg .fh{font-size:10px;letter-spacing:.2em;color:var(--steel);margin-bottom:1.2rem;
  font-variation-settings:"wght" 600,"wdth" 100}
.fg ul{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.fg a{font-size:var(--t-sm);color:var(--steel-bright);text-decoration:none;display:inline-block;padding-block:.45rem;transition:color .3s var(--swift)}
.fg a:hover{color:var(--molten)}
/* Social profiles, in the brand column under the contact block. 40px targets
   so a thumb can hit one on a phone. Everything is scoped to `.fg` on purpose:
   `.fg ul` above sets display:grid/margin:0 and `.fg a` sets its own padding,
   and a bare `.social` loses to both -- which stacked the icons in a column. */
.fg .social{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:1.6rem 0 0}
.fg .social__link{display:grid;place-items:center;width:40px;height:40px;padding:0;
  border-radius:999px;color:var(--steel-bright);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:color .3s var(--swift),background .3s var(--swift),box-shadow .3s var(--swift)}
.fg .social__link:hover{color:var(--molten);background:rgba(233,185,73,.12);
  box-shadow:inset 0 0 0 1px rgba(233,185,73,.45)}
.social__link svg{display:block}
.fbot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-top:1.8rem;font-size:var(--t-xs);color:var(--steel);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.skip{position:absolute;left:-9999px;z-index:100;background:var(--molten);color:#000;padding:.8rem 1.3rem;border-radius:999px}
.skip:focus{left:1rem;top:1rem}

/* ══ VERIFY MODE ══
   Every mark on the page is generated from the tenant's own rows: a field
   that is blank on the client record is unverified by definition. */
.tbd{position:relative}
body.verify .tbd{background:rgba(233,185,73,.18);box-shadow:0 0 0 1px var(--molten);border-radius:3px;cursor:help}
body.verify .shot{box-shadow:inset 0 0 0 2px var(--molten)}
body.verify .tbd::after{
  content:attr(data-need);position:absolute;left:0;bottom:calc(100% + 8px);
  background:var(--molten);color:#0C1526;font-family:var(--body);
  font-variation-settings:"wght" 600,"wdth" 100;font-size:11px;letter-spacing:0;
  text-transform:none;line-height:1.35;padding:6px 9px;border-radius:6px;
  white-space:normal;max-width:min(250px,78vw);z-index:80;pointer-events:none;opacity:0;
  transition:opacity .3s var(--swift);box-shadow:0 10px 30px -10px rgba(0,0,0,.9)}
body.verify .tbd:hover::after,body.verify .tbd:focus-visible::after{opacity:1}
body.verify .tbd{outline:none}
.vbar{position:fixed;right:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);z-index:75;
  display:flex;align-items:center;gap:.9rem;padding:.75rem .75rem .75rem 1.2rem;border-radius:999px;
  background:rgba(15,22,38,.86);backdrop-filter:blur(20px);max-width:min(93vw,430px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.07),0 24px 60px -20px rgba(0,0,0,.95)}
.vbar strong{display:block;font-size:12.5px;color:var(--paper);font-variation-settings:"wght" 600,"wdth" 100}
.vbar p{font-size:11px;color:var(--steel);line-height:1.4}
.vbar em{font-style:normal;color:var(--molten);font-variation-settings:"wght" 700,"wdth" 100}
html:not(.js) .vbar{display:none}
@media (max-width:540px){.vbar{left:clamp(.8rem,2vw,1.6rem);flex-direction:column;align-items:flex-start}}

/* ══ Header quote/login CTA group ══ */
.island-cta{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;margin-left:.4rem}
.island-cta .btn.sm{white-space:nowrap}

/* ══ Hero headline: three stacked lines; the answer ("We come get it!") is the
   azure highlight, the two questions sit above it. Location tag moved to sit
   UNDER the headline rather than above it. ══ */
.hero-h1 .hero-ask{display:block}
.hero-h1 em{margin-top:.06em}
.hero-loc{margin-top:1.4rem;margin-bottom:0}
.hero .hero-loc + .lede{margin-top:1.5rem}

/* ══ Mobile-first island: logo + the two CTAs share the top row, the section
   links wrap to their own scrollable row beneath (rule above sets nav order:3
   width:100%). Keep the CTAs from crowding a long trading name on a phone. ══ */
@media (max-width:1000px){
  .island-cta{margin-left:auto}
}
@media (max-width:560px){
  .island{row-gap:.5rem}
  .island-cta{order:2}
  .island-cta .btn.sm{font-size:.72rem;padding:.58rem .5rem .58rem 1rem}
  .island-cta .btn.sm .cap{width:22px;height:22px}
  .logo b{font-size:.78rem}
}

/* ══ Mobile-first fix: the floating island must stay compact and never overlap
   the hero. On a phone we lead with the quote CTA and drop the section nav
   (those links live in the footer and the sections are a scroll away). ══ */
@media (max-width:760px){
  .island nav{display:none}
  .hero-inner{padding-block:clamp(9.5rem,22vh,12rem) clamp(2.5rem,5vw,4.5rem)}
}
@media (max-width:560px){
  .island{flex-wrap:wrap;justify-content:space-between;row-gap:.35rem}
  .island .logo{flex:1 1 auto;min-width:0}
  .island-cta{margin-left:auto;gap:.4rem}
  .island-cta .btn.sm{font-size:.72rem;padding:.55rem .45rem .55rem .9rem}
  .logo b{font-size:.72rem;white-space:normal;line-height:1.12}
}

/* ══ Location cluster: hub + per-town pages ══ */
.crumbs{padding-block:clamp(1.4rem,3vw,2.4rem) 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;
  font-size:var(--t-xs);letter-spacing:.04em;color:var(--steel)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"›";color:var(--raise)}
.crumbs a{color:var(--steel-bright);text-decoration:none}
.crumbs a:hover{color:var(--molten)}
.crumbs [aria-current="page"]{color:var(--paper)}
.loc-hero{padding-block:clamp(2rem,4vw,4rem) 0}
.loc-hero h1{font-size:var(--t-2xl);max-width:20ch;margin:.9rem 0 1.6rem}
.loc-hero .lede{margin-bottom:1rem}
.loc-hero .cta-row{margin-top:1.6rem}
.loc-body{padding-block:clamp(2.5rem,5vw,4.5rem)}
.loc-cols{max-width:78ch;display:flex;flex-direction:column;gap:clamp(1.8rem,3vw,2.8rem)}
.loc-block h2{font-size:var(--t-xl);margin-bottom:.8rem;line-height:1.15}
.loc-block p{color:var(--steel-bright);max-width:var(--measure)}
.loc-block+.loc-block{padding-top:clamp(1.8rem,3vw,2.8rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.loc-nearby .loc-links{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.6rem;
  font-family:var(--display);font-variation-settings:"wght" 600,"wdth" 96;
  letter-spacing:.02em}
.loc-links a{color:var(--molten);text-decoration:none}
.loc-links a:hover{text-decoration:underline}
.loc-index{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.loc-index li{font-size:var(--t-base);color:var(--steel)}
.loc-index a{color:var(--paper);text-decoration:none;font-family:var(--display);
  font-variation-settings:"wght" 560,"wdth" 98;border-bottom:1px solid var(--raise);
  transition:color .3s var(--swift),border-color .3s var(--swift)}
.loc-index a:hover{color:var(--molten);border-color:var(--molten)}
.loc-trust{margin-top:clamp(2rem,4vw,4rem)}
.towns-more{margin-top:clamp(1.6rem,3vw,2.4rem)}
.towns-more a{font-family:var(--display);font-variation-settings:"wght" 600,"wdth" 96;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-bright);
  text-decoration:none}
.towns-more a:hover{color:var(--molten)}

/* ---- Blog ------------------------------------------------------------
   Reuses the location surfaces (.loc-hero/.loc-body/.wrap). These add the
   post index cards, the pager, and the article body typography. */
.blog-index{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap)}
.blog-card{border:1px solid var(--raise);border-radius:16px;background:var(--graphite);transition:border-color .2s var(--swift),transform .2s var(--swift)}
.blog-card:hover{border-color:var(--azure);transform:translateY(-2px)}
.blog-card a{display:block;padding:1.25rem 1.4rem;color:inherit;text-decoration:none}
.blog-card h2{margin:0 0 .35rem;font-size:var(--t-lg);color:var(--paper)}
.blog-card p{margin:0 0 .5rem;color:var(--steel-bright);max-width:var(--measure)}
.blog-card__date{color:var(--steel);font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em}
.blog-pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:var(--gap);color:var(--steel)}
.blog-pager a{color:var(--azure);text-decoration:none}
.blog-post .wrap{max-width:76ch}
.blog-post h1{margin:.4rem 0 0}
.blog-post__date{color:var(--steel);text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-sm);margin:.3rem 0 1.2rem}
.blog-post__hero{width:100%;height:auto;border-radius:16px;margin:0 0 1.6rem;border:1px solid var(--raise)}
.blog-body{color:var(--paper);max-width:var(--measure)}
.blog-body h2{font-size:var(--t-lg);margin:1.8rem 0 .5rem;color:var(--paper)}
.blog-body h3{font-size:var(--t-base);margin:1.4rem 0 .4rem;color:var(--steel-bright)}
.blog-body p{margin:0 0 1rem;line-height:1.7}
.blog-body ul,.blog-body ol{margin:0 0 1rem 1.2rem;line-height:1.7}
.blog-body li{margin:.25rem 0}
.blog-body a{color:var(--azure)}
.blog-body strong{color:var(--paper)}
.blog-post .cta-row{margin-top:2rem}

/* Hero-grid: a filled photo slot. Covers the slot and drops the dashed-frame
   placeholder decorations (.shot::before/::after) that only make sense when the
   slot is empty. Real yard photos live in img/cards/. */
.shot--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shot--photo::before,.shot--photo::after{display:none}

/* ---- Reviews ---------------------------------------------------------
   A public proof surface, not a carousel. Published experiences read like
   signed notes; the submission form stays visually distinct and honest about
   moderation. */
.review-page{background:var(--paper);color:var(--ink-on-paper)}
.review-hero{padding:clamp(10rem,14vw,13rem) 0 clamp(4rem,8vw,7rem);background:
  radial-gradient(circle at 82% 22%,rgba(233,185,73,.11),transparent 30%),var(--ink);color:var(--paper)}
.review-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.36fr);gap:var(--gap);align-items:end}
.review-hero .eyebrow,.review-hero .lede{grid-column:1}
.review-hero h1{grid-column:1;margin:0;font-size:var(--t-2xl);max-width:15ch;line-height:.98}
.review-hero h1 em{color:var(--molten);font-style:normal}
.review-hero .lede{margin:1.4rem 0 0}
.review-summary{grid-column:2;grid-row:1/5;align-self:center;border-left:1px solid var(--raise);padding:1rem 0 1rem clamp(1.5rem,3vw,3rem);display:grid;gap:.25rem}
.review-summary strong{font-family:var(--display);font-size:clamp(3.2rem,6vw,5.5rem);line-height:.9;color:var(--paper);font-variation-settings:"wght" 760,"wdth" 78}
.review-summary span{color:var(--molten);letter-spacing:.12em;font-size:1.1rem}
.review-summary small{color:var(--steel-bright);font-size:var(--t-sm)}
.review-content{padding-block:clamp(4rem,7vw,8rem);background:var(--paper)}
.review-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.review-list-head{margin-bottom:2rem}
.review-list-head h2{margin:.3rem 0 0;color:var(--ink-on-paper)}
.review-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.review-card{position:relative;padding:clamp(1.25rem,2.4vw,2rem);border:1px solid #C7D2E3;border-radius:18px;background:#fff;box-shadow:0 18px 45px -42px rgba(12,21,38,.75)}
.review-card::before{content:"“";position:absolute;right:1rem;top:-.2rem;color:rgba(12,21,38,.08);font-family:Georgia,serif;font-size:6rem;line-height:1;pointer-events:none}
.review-stars{color:var(--molten-dim);letter-spacing:.1em;font-size:1rem}
.review-card blockquote{margin:.8rem 0 1rem;max-width:58ch;color:var(--ink-on-paper);font-size:var(--t-lg);line-height:1.5;white-space:pre-line}
.review-card p{display:flex;gap:.75rem;align-items:baseline;margin:0;color:var(--muted-paper);font-size:var(--t-sm)}
.review-card p strong{color:var(--ink-on-paper)}
.review-empty{border:1px dashed #AEBBD0;border-radius:18px;padding:clamp(1.4rem,3vw,2.4rem);background:#fff}
.review-empty h3{color:var(--ink-on-paper);margin:0 0 .5rem}
.review-empty p{margin:0;color:var(--muted-paper)}
.review-form-shell{position:sticky;top:7rem;padding:clamp(1.4rem,3vw,2.5rem);border-radius:22px;background:var(--graphite);color:var(--paper);box-shadow:0 30px 70px -45px rgba(7,12,24,.9)}
.review-form-shell h2{margin:.2rem 0 .55rem;color:var(--paper);font-size:var(--t-xl)}
.review-form-shell>p{margin:0 0 1.5rem;color:var(--steel-bright);font-size:var(--t-sm)}
.review-form{display:grid;gap:1rem}
.review-field{display:grid;gap:.42rem}
.review-field label{font-family:var(--display);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-bright);font-variation-settings:"wght" 650,"wdth" 94}
.review-field__input{width:100%;min-height:48px;padding:.8rem .9rem;border:1px solid #52617C;border-radius:11px;background:#0A1120;color:var(--paper);font:inherit}
textarea.review-field__input{min-height:9rem;resize:vertical;line-height:1.5}
.review-field__input:focus{outline:2px solid var(--molten);outline-offset:2px;border-color:transparent}
.review-field__input::placeholder{color:#8795AE}
.review-consent{display:grid;grid-template-columns:26px 1fr;gap:.7rem;align-items:start;padding:.85rem;border:1px solid #40506C;border-radius:12px;background:#0A1120}
.review-consent input{width:24px;height:24px;margin:0;accent-color:var(--molten)}
.review-consent label{color:var(--steel-bright);font-size:var(--t-sm);line-height:1.45}
.review-field__error,.review-errors{margin:0;color:#FF9AA5;font-size:var(--t-sm)}
.review-field--bad .review-field__input,.review-field--bad.review-consent{border-color:var(--alert)}
.review-success{display:grid;gap:.2rem;margin:0 0 1.2rem;padding:1rem;border:1px solid rgba(111,168,255,.55);border-radius:12px;background:rgba(111,168,255,.09)}
.review-success span{color:var(--steel-bright);font-size:var(--t-sm)}
.review-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

@media (max-width:840px){
  .review-hero__inner,.review-layout{grid-template-columns:1fr}
  .review-summary{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid var(--raise);padding:1.5rem 0 0;margin-top:1rem}
  .review-form-shell{position:static}
}
@media (max-width:520px){
  .review-hero{padding-top:8.5rem}
  .review-card p{align-items:flex-start;flex-direction:column;gap:.15rem}
}