/* ==========================================================================
   NT Bay Area Construction - Version B "Bay Light"
   The shape the client liked, executed properly. Mobile-first. OKLCH only.
   ========================================================================== */

:root{
  --paper:     oklch(0.988 0.002 250);
  --paper-2:   oklch(0.958 0.004 240);
  --paper-3:   oklch(0.925 0.006 235);
  --ink:       oklch(0.245 0.021 220);
  --ink-2:     oklch(0.375 0.020 222);
  --ink-soft:  oklch(0.505 0.016 224);
  --ink-faint: oklch(0.640 0.012 226);

  --orange:    oklch(0.690 0.158 52);
  --orange-dp: oklch(0.520 0.135 47);
  --orange-wash: oklch(0.960 0.028 62);
  --forest:    oklch(0.400 0.055 168);
  --forest-wash: oklch(0.955 0.016 168);

  --line:      oklch(0.245 0.021 220 / 0.13);
  --line-2:    oklch(0.245 0.021 220 / 0.26);

  --f-display: "Crimson Pro", Georgia, "Times New Roman", serif;
  --f-ui:      "Figtree", Helvetica, Arial, sans-serif;

  --ease:  cubic-bezier(.22, 1, .36, 1);
  --shadow-sm: 0 1px 2px oklch(0.245 0.021 220 / .06), 0 2px 8px oklch(0.245 0.021 220 / .05);
  --shadow-md: 0 4px 12px oklch(0.245 0.021 220 / .07), 0 12px 34px oklch(0.245 0.021 220 / .09);
  --shadow-lg: 0 10px 24px oklch(0.245 0.021 220 / .09), 0 30px 70px oklch(0.245 0.021 220 / .12);

  --ribbon-h: 0px;
  --nav-h: 64px;
  --r: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* native smooth scroll only when Lenis is not the one doing the scrolling */
html:not(.lenis){ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html:not(.lenis){ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; background:var(--paper-3); }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--orange-wash); color:var(--ink); }
:focus-visible{ outline:2px solid var(--orange-dp); outline-offset:3px; border-radius:2px; }

.wrap{ width:min(100% - 2.5rem, 1200px); margin-inline:auto; }
.wrap-n{ width:min(100% - 2.5rem, 940px); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-999px; top:0; z-index:9999; background:var(--orange); color:#fff; padding:.75rem 1.25rem; font-weight:600; }
.skip:focus{ left:.5rem; top:.5rem; }

section{ padding-block:clamp(3rem, 2.2rem + 4vw, 6.5rem); }

/* ---------- type ---------- */
.h-xl{ font-family:var(--f-display); font-weight:600; line-height:1.02; letter-spacing:-0.018em; font-size:clamp(2.5rem, 1.5rem + 4.6vw, 4.8rem); }
.h-lg{ font-family:var(--f-display); font-weight:600; line-height:1.06; letter-spacing:-0.015em; font-size:clamp(2rem, 1.4rem + 2.8vw, 3.3rem); }
.h-md{ font-family:var(--f-display); font-weight:600; line-height:1.14; letter-spacing:-0.01em; font-size:clamp(1.4rem, 1.2rem + 1.1vw, 1.9rem); }
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--orange-dp);
}
.lede{ font-size:clamp(1.02rem, .96rem + .45vw, 1.2rem); color:var(--ink-2); line-height:1.68; }
.muted{ color:var(--ink-soft); }

.sec-head{ max-width:62ch; margin-bottom:clamp(1.8rem, 1.4rem + 1.6vw, 3rem); }
.sec-head .eyebrow{ margin-bottom:.7rem; display:block; }
.sec-head p{ margin-top:.9rem; }
.sec-head.center{ margin-inline:auto; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.35rem; border-radius:var(--r);
  font-size:.9rem; font-weight:600; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer; min-height:48px;
  transition:background .22s var(--ease), color .22s, border-color .22s, box-shadow .22s, transform .22s var(--ease);
  text-align:center;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--orange-dp); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:var(--ink-2); transform:translateY(-1px); }
.btn-outline{ border-color:var(--line-2); color:var(--ink); background:oklch(1 0 0 / .75); }
.btn-outline:hover{ border-color:var(--ink); background:#fff; }
.btn-onphoto{ border-color:oklch(1 0 0 / .55); color:#fff; background:oklch(1 0 0 / .08); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn-onphoto:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-lg{ padding:1rem 1.7rem; font-size:.95rem; min-height:54px; }
.btn-block{ width:100%; }

/* ---------- ribbon + header ---------- */
.ribbon{
  position:fixed; top:0; left:0; right:0; z-index:7900;
  background:var(--ink); color:oklch(0.93 0.01 235);
  font-size:.72rem; font-weight:500; text-align:center; padding:.5rem .9rem; line-height:1.4;
}
.ribbon b{ color:var(--orange); font-weight:700; }

.hdr{
  position:fixed; left:0; right:0; top:var(--ribbon-h); z-index:7600;
  background:oklch(1 0 0 / .92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .3s;
}
.hdr.stuck{ box-shadow:var(--shadow-sm); }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:var(--nav-h); }
.brand{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.bmark{
  width:38px; height:38px; flex:none; border-radius:var(--r);
  background:var(--ink); color:var(--orange);
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; font-size:1.05rem;
}
.btext{ display:flex; flex-direction:column; min-width:0; }
.bname{ font-family:var(--f-display); font-weight:600; font-size:1.06rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.blic{ overflow:hidden; text-overflow:ellipsis; }
.blic{ font-size:.62rem; color:var(--ink-soft); letter-spacing:.06em; white-space:nowrap; }
.nav{ display:none; }
.hdr-r{ display:flex; align-items:center; gap:.6rem; flex:none; }
.hdr-phone{ display:none; }
/* the sticky call bar and the drawer both carry the CTA on small screens, so
   the header button stands down rather than crushing the wordmark */
@media (max-width:1059px){ .hdr-r .btn-primary{ display:none; } }

.burger{ width:46px; height:46px; display:grid; place-items:center; background:none; border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer; }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.3s var(--ease); border-radius:2px; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:.3s var(--ease); border-radius:2px; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:7500; background:var(--paper);
  padding:calc(var(--ribbon-h) + var(--nav-h) + 1.6rem) 1.25rem 2rem;
  transform:translateY(-100%); transition:transform .45s var(--ease); overflow-y:auto;
}
body.menu-open .drawer{ transform:translateY(0); }
.drawer a.dl{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-display); font-weight:600; font-size:1.6rem;
  padding:.75rem 0; border-bottom:1px solid var(--line); min-height:52px;
}
.drawer a.dl:hover,.drawer a.dl[aria-current="page"]{ color:var(--orange-dp); }
.drawer .dfoot{ margin-top:1.6rem; display:grid; gap:.65rem; }

@media (min-width:1060px){
  :root{ --nav-h:80px; }
  .burger,.drawer{ display:none; }
  .nav{ display:flex; align-items:center; gap:1.7rem; }
  .nav a{ font-size:.92rem; font-weight:500; color:var(--ink-2); position:relative; padding:.5rem 0; transition:color .2s; }
  .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:.15rem; height:2px; background:var(--orange); border-radius:2px; transition:right .3s var(--ease); }
  .nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); }
  .nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }
  .hdr-phone{
    display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;
  }
  .hdr-phone .hp-l{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
  .hdr-phone .hp-n{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; color:var(--ink); }
  .hdr-phone:hover .hp-n{ color:var(--orange-dp); }
}

/* ---------- reveals ---------- */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
html:not(.js) .rv{ opacity:1; transform:none; }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.07s; } .rv[data-d="2"]{ transition-delay:.14s; }
.rv[data-d="3"]{ transition-delay:.21s; } .rv[data-d="4"]{ transition-delay:.28s; }
.rv[data-d="5"]{ transition-delay:.35s; }
@media (prefers-reduced-motion: reduce){ .rv{ transition:none !important; opacity:1 !important; transform:none !important; } }

/* ---------- preload ---------- */
html.preload body{ overflow:hidden; }
#loader{ position:fixed; inset:0; z-index:9500; background:var(--paper); display:grid; place-items:center; transition:opacity .5s var(--ease), visibility .5s; }
#loader .lm{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; color:var(--ink-soft); }
html:not(.preload) #loader{ opacity:0; visibility:hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding-top:calc(var(--ribbon-h) + var(--nav-h) + 3.5rem);
  padding-bottom:clamp(3rem, 2rem + 6vw, 7rem);
  isolation:isolate; overflow:hidden;
  text-align:center;
  color:#fff;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, oklch(0.245 0.021 220 / .74), oklch(0.245 0.021 220 / .56) 45%, oklch(0.245 0.021 220 / .80));
}
.hero h1{ font-family:var(--f-display); font-weight:600; line-height:1.03; letter-spacing:-0.02em; font-size:clamp(2.6rem, 1.5rem + 5.2vw, 5.2rem); text-wrap:balance; }
.hero .hsub{ margin:1.2rem auto 0; max-width:56ch; font-size:clamp(1rem, .95rem + .45vw, 1.2rem); color:oklch(0.94 0.006 235); line-height:1.65; }
.hero-actions{ display:grid; gap:.7rem; margin-top:2rem; justify-content:center; }
@media (min-width:520px){ .hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; } }

.hero-trust{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:.75rem;
  margin-top:2.5rem;
}
.ht{
  background:oklch(1 0 0 / .12); border:1px solid oklch(1 0 0 / .22); border-radius:var(--r);
  padding:.85rem .7rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ht b{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.5rem; line-height:1; }
.ht span{ display:block; margin-top:.3rem; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:oklch(0.90 0.008 235); font-weight:600; }
@media (min-width:760px){ .hero-trust{ grid-template-columns:repeat(4,1fr); max-width:56rem; margin-inline:auto; } }

/* ---------- floating quote card ---------- */
.qcard-wrap{ position:relative; z-index:3; margin-top:clamp(-2.5rem, -1rem - 3vw, -1rem); }
.qcard{
  background:#fff; border-radius:8px; box-shadow:var(--shadow-lg);
  padding:clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  border:1px solid var(--line);
}
.qcard .qc-head{ display:grid; gap:.5rem; margin-bottom:1.3rem; }
.qcard .qc-head p{ color:var(--ink-soft); font-size:.95rem; }
@media (min-width:900px){
  .qcard{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:2.6rem; align-items:start; }
  .qcard .qc-head{ margin-bottom:0; }
}
.qc-points{ display:grid; gap:.7rem; margin-top:1.2rem; }
.qc-points li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink-2); }
.qc-points svg{ width:18px; height:18px; flex:none; color:var(--forest); margin-top:.15rem; }

/* ---------- form ---------- */
.form{ display:grid; gap:.85rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:.78rem; font-weight:600; color:var(--ink-2); }
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; padding:.8rem .9rem;
  border:1.5px solid var(--line-2); border-radius:var(--r);
  background:#fff; color:var(--ink); min-height:48px; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--orange); outline:none; box-shadow:0 0 0 3px var(--orange-wash);
}
.form-row{ display:grid; gap:.85rem; }
@media (min-width:520px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:.78rem; color:var(--ink-faint); }
.form-ok{ display:none; border:1.5px solid var(--forest); background:var(--forest-wash); border-radius:var(--r); padding:1rem; font-size:.92rem; }
.form-ok.show{ display:block; }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.tbar{ background:var(--ink); color:oklch(0.92 0.008 235); }
.tbar .wrap{ display:grid; gap:1.5rem; padding-block:clamp(2rem,1.6rem + 1.6vw,3rem); }
.tbar-items{ display:grid; gap:1.5rem; }
.tbi{ display:flex; gap:.9rem; align-items:flex-start; }
.tbi svg{ width:26px; height:26px; flex:none; color:var(--orange); }
.tbi h4{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; color:#fff; }
.tbi p{ font-size:.88rem; color:oklch(0.78 0.012 232); margin-top:.15rem; }
@media (min-width:760px){ .tbar-items{ grid-template-columns:repeat(3,1fr); gap:2.2rem; } }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.cards{ display:grid; gap:1.4rem; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--line-2); }
.card-img{ aspect-ratio:3/2; overflow:hidden; background:var(--paper-3); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card-img img{ transform:scale(1.05); }
.card-body{ padding:1.3rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card h3{ font-family:var(--f-display); font-weight:600; font-size:1.5rem; line-height:1.15; }
.card p{ color:var(--ink-soft); font-size:.93rem; }
.card .clink{
  margin-top:auto; padding-top:.5rem; display:inline-flex; align-items:center; gap:.4rem;
  color:var(--orange-dp); font-weight:600; font-size:.9rem;
}
.card .clink svg{ width:15px; height:15px; flex:none; transition:transform .3s var(--ease); }
.card:hover .clink svg{ transform:translateX(4px); }

/* ==========================================================================
   SPLIT / ABOUT
   ========================================================================== */
.split{ display:grid; gap:2rem; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:3.5rem; } .split.flip .split-media{ order:2; } }
.split-media{ position:relative; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-badge{
  position:absolute; left:1rem; bottom:1rem;
  background:#fff; border-radius:var(--r); padding:.7rem .95rem; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:.6rem;
}
.split-badge b{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; line-height:1; color:var(--ink); }
.split-badge span{ font-size:.7rem; line-height:1.25; color:var(--ink-soft); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.split-body > * + *{ margin-top:1rem; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.steps{ display:grid; gap:1.2rem; counter-reset:s; }
@media (min-width:680px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.4rem 1.25rem;
  position:relative; box-shadow:var(--shadow-sm);
}
.step .sn{
  width:38px; height:38px; border-radius:50%; background:var(--orange-wash); color:var(--orange-dp);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.1rem;
  margin-bottom:.85rem;
}
.step h3{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; margin-bottom:.4rem; }
.step p{ font-size:.9rem; color:var(--ink-soft); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rev-head{ display:grid; gap:1.2rem; align-items:end; margin-bottom:2rem; }
@media (min-width:860px){ .rev-head{ grid-template-columns:1fr auto; } }
.scores{ display:flex; flex-wrap:wrap; gap:.6rem; }
.score{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:.6rem .9rem; display:flex; align-items:baseline; gap:.45rem; box-shadow:var(--shadow-sm); }
.score b{ font-family:var(--f-display); font-weight:700; font-size:1.35rem; line-height:1; color:var(--ink); }
.score span{ font-size:.76rem; color:var(--ink-soft); }
.rev-rail{
  display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; cursor:grab; -webkit-overflow-scrolling:touch;
}
.rev-rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.rev-rail::-webkit-scrollbar{ height:5px; }
.rev-rail::-webkit-scrollbar-track{ background:var(--paper-3); border-radius:3px; }
.rev-rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.rcard{
  flex:0 0 min(86vw, 25rem); scroll-snap-align:start;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:1.5rem 1.35rem; display:flex; flex-direction:column; gap:.9rem;
  box-shadow:var(--shadow-sm);
}
.rstars{ color:var(--orange); letter-spacing:.14em; font-size:.95rem; }
.rcard blockquote{ margin:0; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.rcard blockquote::before{ content:"\201C"; } .rcard blockquote::after{ content:"\201D"; }
.rwho{ margin-top:auto; padding-top:.7rem; border-top:1px solid var(--line); }
.rwho .rn{ font-weight:700; font-size:.93rem; }
.rwho .rs{ font-size:.78rem; color:var(--ink-faint); }
.rev-ctl{ display:flex; align-items:center; gap:.6rem; margin-top:.4rem; }
.rev-ctl button{ width:46px; height:46px; flex:none; border:1.5px solid var(--line-2); background:#fff; border-radius:var(--r); cursor:pointer; display:grid; place-items:center; transition:border-color .2s,color .2s; }
.rev-ctl button:hover{ border-color:var(--orange); color:var(--orange-dp); }
.rev-ctl button svg{ width:17px; height:17px; }
.rev-ctl .hint{ font-size:.8rem; color:var(--ink-faint); }
.rev-note{ margin-top:1.5rem; font-size:.8rem; color:var(--ink-faint); max-width:80ch; line-height:1.6; }

/* ==========================================================================
   AREAS
   ========================================================================== */
.areas{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:600px){ .areas{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .areas{ grid-template-columns:repeat(5,1fr); } }
.area{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:.85rem .9rem; font-weight:600; font-size:.92rem; text-align:center;
  transition:border-color .2s, color .2s, box-shadow .2s;
}
.area:hover{ border-color:var(--orange); color:var(--orange-dp); box-shadow:var(--shadow-sm); }

/* ==========================================================================
   GALLERY SLOT
   ========================================================================== */
.gslot{
  border:2px dashed var(--line-2); border-radius:8px;
  padding:clamp(1.4rem, 1.1rem + 2vw, 2.6rem);
  display:grid; gap:.9rem; background:oklch(1 0 0 / .6);
}
.gslot h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.3rem,1.1rem + 1.1vw,1.85rem); }
.gslot p{ color:var(--ink-soft); max-width:64ch; font-size:.94rem; }
.gslot-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:.3rem; }
.gslot-thumbs i{ aspect-ratio:1; border-radius:3px; background:var(--paper-3); display:block; }
@media (min-width:680px){ .gslot-thumbs{ grid-template-columns:repeat(8,1fr); } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:.7rem; box-shadow:var(--shadow-sm); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 3rem 1.1rem 1.2rem; position:relative;
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.08rem,1rem + .5vw,1.3rem); line-height:1.3;
  min-height:52px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--orange-dp); }
.faq summary::after{
  content:""; position:absolute; right:1.2rem; top:50%; width:13px; height:13px; transform:translateY(-50%);
  background:linear-gradient(var(--orange-dp),var(--orange-dp)) center/13px 2px no-repeat,
             linear-gradient(var(--orange-dp),var(--orange-dp)) center/2px 13px no-repeat;
  transition:transform .28s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); }
.faq .fa{ padding:0 1.2rem 1.2rem; color:var(--ink-soft); max-width:76ch; }

/* ==========================================================================
   BANDS
   ========================================================================== */
.band-soft{ background:var(--paper-2); }
.band-wash{ background:var(--orange-wash); }
.band-dark{ background:var(--ink); color:oklch(0.93 0.008 235); }
.band-dark .h-lg,.band-dark .h-xl{ color:#fff; }
.band-dark .lede,.band-dark p{ color:oklch(0.80 0.012 232); }
.band-dark .eyebrow{ color:var(--orange); }

.cta-final{ text-align:center; }
.cta-final .btnrow{ display:grid; gap:.7rem; margin-top:1.8rem; justify-content:center; }
@media (min-width:520px){ .cta-final .btnrow{ display:flex; flex-wrap:wrap; justify-content:center; } }

/* ==========================================================================
   PAGE HERO (interior)
   ========================================================================== */
.phero{
  position:relative; isolation:isolate; overflow:hidden; color:#fff; text-align:center;
  padding-top:calc(var(--ribbon-h) + var(--nav-h) + 3rem);
  padding-bottom:clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.phero-bg{ position:absolute; inset:0; z-index:-2; }
.phero-bg img{ width:100%; height:100%; object-fit:cover; }
.phero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, oklch(0.245 0.021 220 / .70), oklch(0.245 0.021 220 / .82)); }
.phero h1{ font-family:var(--f-display); font-weight:600; line-height:1.05; letter-spacing:-0.02em; font-size:clamp(2.3rem, 1.5rem + 3.6vw, 4rem); }
.phero .crumb{ font-size:.82rem; color:oklch(0.86 0.01 235); margin-bottom:.9rem; }
.phero .crumb a:hover{ color:#fff; text-decoration:underline; }
.phero p.lede{ color:oklch(0.93 0.008 235); margin:1.1rem auto 0; max-width:56ch; }

/* ---------- checklist ---------- */
.checks{ display:grid; gap:1rem; }
@media (min-width:640px){ .checks{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .checks{ grid-template-columns:repeat(3,1fr); } }
.check{ display:flex; gap:.75rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.15rem; box-shadow:var(--shadow-sm); }
.check svg{ width:20px; height:20px; flex:none; color:var(--forest); margin-top:.2rem; }
.check h4{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; margin-bottom:.2rem; }
.check p{ font-size:.88rem; color:var(--ink-soft); }

/* ---------- photo strip ---------- */
.strip{ display:grid; gap:.6rem; }
@media (min-width:560px){ .strip{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .strip{ grid-template-columns:repeat(4,1fr); } }
.strip figure{ margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:6px; background:var(--paper-3); }
.strip img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.strip figure:hover img{ transform:scale(1.05); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{ background:var(--ink); color:oklch(0.80 0.012 232); padding-block:3rem 6.5rem; }
@media (min-width:900px){ .ftr{ padding-bottom:3rem; } }
.ftr-grid{ display:grid; gap:2rem; }
@media (min-width:760px){ .ftr-grid{ grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; } }
.ftr h4{ color:#fff; font-family:var(--f-display); font-weight:600; font-size:1.1rem; margin-bottom:.9rem; }
.ftr-links{ display:grid; gap:.5rem; }
.ftr-links a{ font-size:.92rem; padding-block:.25rem; display:inline-block; min-height:26px; }
.ftr-links a:hover{ color:var(--orange); }
.ftr-bot{ margin-top:2.5rem; padding-top:1.3rem; border-top:1px solid oklch(1 0 0 / .12); display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; justify-content:space-between; font-size:.82rem; color:oklch(0.66 0.012 232); }
.ftr .lic{ color:var(--orange); font-weight:700; }

.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:7400;
  display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line);
  background:oklch(1 0 0 / .96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.callbar a{ min-height:54px; display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.9rem; font-weight:600; }
.callbar a svg{ width:17px; height:17px; flex:none; }
.callbar a + a{ background:var(--orange); color:#fff; }
@media (min-width:900px){ .callbar{ display:none; } }

/* ==========================================================================
   Lenis guard styles.
   Lenis drives scrolling by calling window.scrollTo() on every frame. If the
   document also has scroll-behavior:smooth, the browser animates each of those
   calls, the two fight, and the page stops responding to the wheel for a second
   at a time before lurching. These rules ship with lenis.css upstream; loading
   only the JS, as we did, leaves the guard out and the page feels broken.
   ========================================================================== */
html.lenis,
html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-smooth iframe{ pointer-events:none; }