@font-face{font-family:'Poppins';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/mb-font-1.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/mb-font-2.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/mb-font-3.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/mb-font-4.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/mb-font-5.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/mb-font-6.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/mb-font-7.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/mb-font-8.woff2) format('woff2')}

:root{
  --ink:#231f20; --body:#55565a; --muted:#8a8b90;
  --blue:#56789b; --blue-dk:#3f5d7d; --navy:#14253b; --navy-2:#1e2b44;
  --orange:#f5853f; --orange-dk:#df6d24; --gold:#b8862b; --gold-lt:#c99a3f;
  --paper:#ffffff; --paper-2:#ffffff; --panel:#eeefec; --line:#dcdcd7; --line-2:#e7e7e2;
  --stage-1:#eceae4; --stage-2:#f7f6f3;
  --shadow:0 1px 2px rgba(35,31,32,.05), 0 18px 40px rgba(35,31,32,.09);
  --shadow-sm:0 1px 2px rgba(35,31,32,.05), 0 6px 16px rgba(35,31,32,.06);
  --maxw:480px;
  --disp:'Poppins', -apple-system, system-ui, sans-serif;
  --sans:'Barlow', -apple-system, system-ui, sans-serif;
  --cond:'Barlow Semi Condensed','Barlow', sans-serif;
  --focus:0 0 0 3px rgba(86,120,155,.4);
}
/* Auto dark-mode intentionally disabled — the tool is pinned to the white/light
   look (Connor: "all white"). The dark palette + logo swap are kept out below.
   To restore dark mode, re-enable this media block and the logo-swap rule. */
:root[data-theme="dark"]{
  --ink:#eef1f4; --body:#b3bcc6; --muted:#7e8b98;
  --blue:#8fb0cf; --blue-dk:#7196b8; --navy:#0b1420; --navy-2:#132133;
  --gold:#cba14e; --gold-lt:#d8b464;
  --paper:#0c1520; --paper-2:#111d29; --panel:#132133; --line:#243546; --line-2:#1b2938;
  --stage-1:#0e1927; --stage-2:#16242f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 44px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.4);
}
:root[data-theme="light"]{
  --ink:#231f20; --body:#55565a; --muted:#8a8b90;
  --blue:#56789b; --blue-dk:#3f5d7d; --navy:#14253b; --navy-2:#1e2b44;
  --gold:#b8862b; --gold-lt:#c99a3f;
  --paper:#f5f5f3; --paper-2:#ffffff; --panel:#eeefec; --line:#dcdcd7; --line-2:#e7e7e2;
  --stage-1:#eceae4; --stage-2:#f7f6f3;
  --shadow:0 1px 2px rgba(35,31,32,.05), 0 18px 40px rgba(35,31,32,.09);
  --shadow-sm:0 1px 2px rgba(35,31,32,.05), 0 6px 16px rgba(35,31,32,.06);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.app{ max-width:var(--maxw); margin:0 auto; min-height:100vh; background:var(--paper);
  box-shadow:0 0 0 1px var(--line-2), 0 40px 90px rgba(20,37,59,.16); display:flex; flex-direction:column; position:relative; overflow:hidden; }
@media (max-width:499px){ .app{ box-shadow:none; } }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:4px; }
img{ display:block; max-width:100%; }

/* ---------- type ---------- */
.eyebrow{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:10px; margin:0; }
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--gold); flex:none; }
.eyebrow.plain::before{ display:none; }
h1,h2,h3{ font-family:var(--disp); margin:0; color:var(--ink); letter-spacing:-.015em; text-wrap:balance; font-weight:500; }
.display{ font-size:34px; line-height:1.06; font-weight:500; }
.h-lg{ font-size:27px; line-height:1.1; }
.serifnum{ font-family:var(--disp); font-weight:300; }

/* ---------- top bar / store nav ---------- */
.top{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:8px; height:60px;
  padding:0 14px calc(0px + env(safe-area-inset-top,0)); background:#fff; border-bottom:1px solid transparent; }
.backbtn{ display:none; align-items:center; gap:6px; border:none; background:none; color:var(--ink); font-family:var(--cond);
  font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:8px 4px; }
.backbtn.show{ display:inline-flex; }
.backbtn svg{ width:15px; height:15px; }

.topleft{ display:flex; align-items:center; gap:4px; }
.explore{ display:none; align-items:center; border:none; background:none; color:var(--ink); font-family:var(--sans);
  font-weight:600; font-size:14.5px; letter-spacing:.01em; padding:8px 8px; cursor:pointer; }
.explore:hover{ color:var(--blue-dk); }
.topicons{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.ico, .navtoggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:none;
  background:none; color:var(--ink); border-radius:6px; }
.ico svg{ width:21px; height:21px; } .navtoggle svg{ width:23px; height:23px; }
.ico:hover, .navtoggle:hover{ background:var(--panel); }

/* mobile: nav collapses into a dropdown panel */
.mainnav{ display:none; }
.mainnav.open{ display:flex; flex-direction:column; position:absolute; top:60px; left:0; right:0; background:#fff;
  border-top:1px solid var(--line-2); box-shadow:var(--shadow-sm); padding:6px 0 10px; max-height:calc(100vh - 60px); overflow-y:auto; }
.navlink{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 22px; color:var(--ink); text-decoration:none;
  font-family:var(--disp); font-weight:500; font-size:16px; letter-spacing:-.01em; border-bottom:1px solid var(--line-2); cursor:pointer; }
.navlink:last-child{ border-bottom:none; }
.navlink:hover{ background:var(--panel); }
.navlink .caret{ width:15px; height:15px; color:var(--muted); flex:none; }

@media (min-width:900px){
  .explore{ display:inline-flex; }
  .topicons{ gap:4px; }
  /* menu opens as a compact dropdown anchored under the menu button (same list as mobile) */
  .mainnav.open{ top:66px; left:40px; right:auto; width:340px; border:1px solid var(--line-2);
    border-top:none; border-radius:0 0 10px 10px; max-height:calc(100vh - 66px); }
}

/* ---------- screens ---------- */
.screen{ display:none; flex:1; flex-direction:column; }
.screen.active{ display:flex; animation:fade .4s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .screen.active{ animation:none; } }
.scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* ---------- landing hero ---------- */
.hero{ position:relative; min-height:78vh; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center;
  padding:56px 26px 40px; color:#fff; overflow:hidden; isolation:isolate; }
/* MOBILE: the sticky banner + hero fill the screen exactly, so nothing of the CTA row shows
   until you scroll. 60px = .top's height; it is sticky, so it still occupies flow space.
   (Desktop does the opposite — see the min-width:900px block, where the hero stops short so
   both CTA buttons sit just above the fold.) On iOS/Android `100vh` is the LARGE viewport
   height, so with the address bar showing the hero simply runs a little past the fold —
   which is the intent here anyway. */
#s-landing .hero{ min-height:calc(100vh - 60px); }
.hero-slides{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:#0b1420; }
.hslide{ position:absolute; inset:0; background-size:cover; background-position:center 42%;
  opacity:0; transform:scale(1); will-change:opacity,transform;
  transition:opacity 2.4s ease, transform 0s linear 2.4s; }
.hslide.on{ opacity:1; transform:scale(1.14); z-index:1;
  transition:opacity 2.4s ease, transform 15s ease-out; }
@media (prefers-reduced-motion:reduce){
  .hslide{ transition:opacity .3s ease; } .hslide.on{ transform:none; transition:opacity .3s ease; }
}
.hero .scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,20,32,.6) 0%, rgba(11,20,32,.34) 26%, rgba(11,20,32,0) 60%, rgba(11,20,32,.26) 100%); }
.hero .eyebrow{ color:#e8c98a; }
.hero .eyebrow::before{ background:#e8c98a; }
.hero h1{ color:#fff; font-size:23px; line-height:1.36; font-weight:400; margin:0; letter-spacing:-.005em; max-width:26ch; text-wrap:balance; }
.hero p{ color:#dbe4ec; font-size:16px; max-width:30ch; margin:16px 0 0; font-weight:400; }
.hero .scrolltip{ margin-top:26px; font-family:var(--cond); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:#c7d2dc;
  display:flex; align-items:center; gap:9px; }
.hero .scrolltip .ln{ width:34px; height:1px; background:rgba(255,255,255,.45); }

/* ---------- editorial intro ---------- */
.intro{ padding:40px 26px 8px; }
.intro .rule-l{ border-left:2px solid var(--gold); padding-left:20px; }
.intro h2{ font-size:24px; line-height:1.22; font-weight:500; color:var(--ink); margin:14px 0 0; }
.intro h2 em{ font-style:normal; color:var(--blue); }

/* ---------- entry paths ---------- */
.paths{ padding:26px 20px 8px; display:flex; flex-direction:column; gap:16px; }
.path{ position:relative; isolation:isolate; display:block; width:100%; text-align:left; border:none; padding:0; border-radius:6px; overflow:hidden;
  box-shadow:var(--shadow); color:#fff; min-height:190px; }
.path .bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition:transform .5s ease; }
.path:hover .bg{ transform:scale(1.04); }
.path .scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(160deg, rgba(20,37,59,.2), rgba(20,37,59,.82)); }
.path .inner{ position:relative; padding:22px 22px 20px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; min-height:190px; }
.path .num{ position:absolute; top:18px; right:22px; font-family:var(--disp); font-weight:300; font-size:15px; color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums; letter-spacing:.1em; }
.path .eyebrow{ color:#e8c98a; } .path .eyebrow::before{ background:#e8c98a; }
.path h3{ color:#fff; font-size:22px; font-weight:500; margin:9px 0 0; }
.path p{ color:#d7e0e8; font-size:13.5px; margin:6px 0 0; max-width:32ch; }
.path .go{ margin-top:14px; font-family:var(--cond); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; display:inline-flex; align-items:center; gap:8px; }
.path .go svg{ width:16px; height:16px; }

.disc{ margin:26px 26px 34px; font-family:var(--sans); font-size:12px; color:var(--muted); line-height:1.6;
  border-top:1px solid var(--line); padding-top:16px; }

/* ---------- collections / models ---------- */
.pad-head{ padding:34px 26px 6px; }
.pad-head .display{ margin-top:14px; }
.pad-head p{ color:var(--body); font-size:15px; margin:12px 0 0; max-width:34ch; }
.list{ padding:22px 20px 24px; display:flex; flex-direction:column; gap:2px; }
.litem{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none; border:none;
  border-top:1px solid var(--line); padding:20px 4px; color:var(--ink); transition:.15s; }
.litem:last-child{ border-bottom:1px solid var(--line); }
.litem .idx{ font-family:var(--disp); font-weight:300; font-size:15px; color:var(--blue); width:26px; flex:none; font-variant-numeric:tabular-nums; }
.litem .lt{ flex:1; }
.litem .lt b{ display:block; font-family:var(--disp); font-weight:500; font-size:18px; letter-spacing:-.01em; }
.litem .lt span{ display:block; font-size:13px; color:var(--body); margin-top:3px; }
.litem .tag{ font-family:var(--cond); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.litem .tag.avail{ color:var(--gold); }
.litem .tag.soon{ color:var(--muted); }
.litem.soon{ opacity:.6; }
.litem .arw{ color:var(--muted); }
.litem:not(.soon):hover{ padding-left:10px; }
.litem:not(.soon):hover .arw{ color:var(--orange); }

/* ---------- front-page CTA buttons ----------
   The showcase carousel that used to live under these buttons was REMOVED 2026-08-08.
   Its full code is parked in docs/parked-showcase-carousel.md — restore from there. */
.frontcta{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; padding:40px 24px 26px; }
.fcta-item{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.fblurb{ margin:0; max-width:250px; font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--body); text-align:center; }
.fdivide{ width:250px; height:1px; background:#000; }
/* Front-page CTAs reuse the shared Harbor outline button (.hbtn); this only recentres it.
   Double-class (.hbtn.hbtn--hero) so it outranks the later .hbtn align-self:flex-start rule. */
.hbtn.hbtn--hero{ align-self:center; margin-top:0; white-space:nowrap; }

/* ---------- home-page collections expander ----------
   "View Collection" opens the series grid inline (between the CTA row and the showcase
   carousel) instead of navigating to s-collections.
   Height animates in PIXELS, set by JS — WebKit will not transition to `auto`, and this
   is the same class of Safari-only failure that bit the brochure print work.
   The reveal copies apple.com/macbook-neo's index section, measured off the live page:
   each element fades up from -4px over .32s ease, siblings 20ms apart after a .3s lead. */
.fexpand{ overflow:hidden; max-height:0;
  scroll-margin-top:12px; /* breathing room when this scrolls itself into view */
  transition:max-height .62s cubic-bezier(.28,.11,.32,1); }
@keyframes link-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@keyframes link-out{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-4px); } }
/* Scoped to .fexpand so the SAME markup stays inert on the standalone collections screen. */
.fexpand .stagger{ opacity:0; }
.fexpand.revealing .stagger{ animation:link-in .32s ease forwards;
  animation-delay:calc(.3s + var(--i,0) * .02s); }

/* Closing is the reveal played backwards, mirrored about the same 1s timeline:
   opening  → height runs 0–620ms, items run 300ms–1000ms (element 0 first).
   closing  → items run 0–700ms (element LAST first), height runs 380ms–1000ms.
   So the height only starts collapsing once the items have lifted away, exactly as the
   items only start arriving once the height is most of the way open. --n = item count,
   set by JS, so the mirror still holds if the number of series ever changes. */
.fexpand.closing{ transition-delay:calc((var(--n,20) - 1) * .02s); }
/* `both` (not `forwards`) so the visible from-state is held during the delay — otherwise
   every element would blink out at once and only then fade in its turn. */
.fexpand.closing .stagger{ animation:link-out .32s ease both;
  animation-delay:calc((var(--n,20) - 1 - var(--i,0)) * .02s); }

/* Open state reuses the button's own hover fill rather than inventing a second look. */
.hbtn[aria-expanded="true"]{ background-position:0% 100%; background-size:100% 100%; color:#fff; }
@media (prefers-reduced-motion:reduce){
  .fexpand, .fexpand.closing{ transition:none; transition-delay:0s; }
  .fexpand .stagger, .fexpand.revealing .stagger, .fexpand.closing .stagger{ opacity:1; animation:none; }
}

@media (min-width:900px){
  .frontcta{ flex-direction:row; align-items:flex-start; gap:40px; padding:54px 24px 36px; }
  .fdivide{ width:1px; height:auto; align-self:stretch; flex:0 0 1px; }
}

/* ---------- collections carousel ---------- */
.carousel{ padding:6px 0 30px; }
.carousel-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 20px 6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.ccard{ position:relative; flex:0 0 76%; aspect-ratio:3/4; border:none; padding:0; border-radius:12px; overflow:hidden;
  scroll-snap-align:start; box-shadow:var(--shadow); color:#fff; cursor:pointer; isolation:isolate; }
.ccard-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition:transform .6s ease; }
.ccard:hover .ccard-bg{ transform:scale(1.05); }
.ccard-scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,20,32,.04) 34%, rgba(11,20,32,.72) 100%); }
.ccard-cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px; text-align:left; }
.ccard-name{ display:block; font-family:var(--disp); font-weight:500; font-size:27px; letter-spacing:-.01em; }
.ccard-sub{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-family:var(--cond); font-weight:600;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#e8c98a; }
.ccard-sub svg{ width:15px; height:15px; }
.ccard.soon .ccard-sub{ color:#cfd6de; }
.ccard.soon{ cursor:default; }
.ccard-soon{ position:absolute; top:16px; left:16px; z-index:1; font-family:var(--cond); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy); background:rgba(255,255,255,.92); padding:5px 11px; border-radius:99px; }
.carousel-nav{ display:flex; gap:10px; padding:14px 20px 0; }
.carr{ width:46px; height:46px; border-radius:50%; border:none; background:none; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.carr:hover{ background:#ececec; }
.carr svg{ width:25px; height:25px; stroke-width:1.9; }
@media (min-width:900px){
  #s-collections .carousel-track{ padding:12px 44px 8px; gap:22px; }
  #s-collections .ccard{ flex:0 0 336px; aspect-ratio:3/4.15; }
  #s-collections .ccard-name{ font-size:29px; }
  #s-collections .carousel-nav{ padding:20px 44px 0; }
}

/* ---------- collections: hero header + alternating series grid ---------- */
/* Same Ken Burns slideshow as the front page, with white header copy on top. */
/* Mirror the landing hero (.hero): same height, top-aligned copy, same h1 font/size/colour. */
.coll-hero{ position:relative; isolation:isolate; overflow:hidden; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center;
  min-height:78vh; padding:56px 26px 40px; }
.coll-hero .scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,20,32,.6) 0%, rgba(11,20,32,.34) 26%, rgba(11,20,32,.2) 60%, rgba(11,20,32,.5) 100%); }
.coll-hero h1{ color:#fff; font-size:23px; line-height:1.36; font-weight:400; margin:0;
  letter-spacing:-.005em; max-width:26ch; text-wrap:balance; }
/* Hide the vertical scrollbar here so right-side images bleed flush to the edge (the
   scrollbar's gutter otherwise leaves a gap on the right rows only — asymmetric). */
#s-collections .scroll{ scrollbar-width:none; }
#s-collections .scroll::-webkit-scrollbar{ display:none; }

/* Grid has NO side padding so images can bleed to the page edge; text cells pad themselves. */
.series-grid{ padding:14px 0 40px; display:flex; flex-direction:column; gap:40px; }
.srow{ display:flex; flex-direction:column; }
.scell.stext{ display:flex; flex-direction:column; align-items:flex-start; padding:0 20px; }
/* Series name = the row TITLE: black, no dash, divider underneath, sized like the old headline. */
.scell.stext .eyebrow{ display:block; width:100%; color:var(--ink); font-size:23px; letter-spacing:.06em;
  line-height:1.12; padding-bottom:12px; margin-bottom:14px; border-bottom:1.5px solid var(--ink); }
.scell.stext .eyebrow::before{ display:none; }
/* Marketing headline drops to a mid-size subhead (between body and the title). */
.shead{ font-size:19px; line-height:1.22; margin-top:0; }
.sbody{ color:var(--body); font-size:15px; line-height:1.6; margin:12px 0 0; }
/* Harbor-Saunas-style outline button: square, thin dark border, uppercase, light weight,
   fills dark with a bottom-up wipe on hover. COMING SOON = the subdued (non-active) variant. */
.hbtn{ align-self:flex-start; margin-top:22px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:400; font-size:15px; letter-spacing:-.02em; text-transform:uppercase;
  /* Explicit line-height so the <span> COMING SOON variant matches the <button> height —
     a span inherits the page line-height, a button defaults to `normal` (5px shorter). */
  line-height:1.2;
  color:#393939; border:1px solid #393939; border-radius:0; cursor:pointer; padding:12px 28px;
  background-color:#fff;
  background-image:linear-gradient(#393939,#393939); background-repeat:no-repeat;
  background-position:0% 0%; /* rest anchored at TOP → hover-in grows the fill DOWNWARD */
  background-size:100% 0%;
  transition:background-size .45s cubic-bezier(.785,.135,.15,.86), background-position .45s step-end,
    color .45s cubic-bezier(.785,.135,.15,.86); }
/* hover anchored at BOTTOM (snapped via step-end) → hover-out empties the fill DOWNWARD, not back up */
.hbtn:hover{ background-position:0% 100%; background-size:100% 100%; color:#fff; }
.hbtn--subdued{ color:rgba(57,57,57,.6); border-color:rgba(57,57,57,.45); cursor:default; background-image:none; }
.hbtn--subdued:hover{ background-size:100% 0%; color:rgba(57,57,57,.6); }
/* Mobile: photo sits ABOVE its text block (2026-08-08, Connor), inset 20px each side to
   the same measure as the text so its left edge lines up with the series name — the inset
   is what gives the 12px corner white to round into (edge-to-edge it would cut notches out
   of the page corners). `order:-1` does the reordering; the desktop media query resets it
   to 0 so non-flipped rows stay text-left / photo-right. */
.scell.simg{ order:-1; width:auto; aspect-ratio:4/3; margin:0 20px 18px; border-radius:12px;
  position:relative; overflow:hidden; }
/* House hover zoom: scale 1.04 over .6s. (Originally shared with the front-page showcase
   carousel's .scard-bg, removed 2026-08-08 — this is now the reference copy.) */
.simg-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease; }
.scell.simg:hover .simg-bg{ transform:scale(1.04); }

@media (min-width:900px){
  .coll-hero{ min-height:60vh; padding:72px 64px 56px; } /* mirror #s-landing .hero on desktop */
  .coll-hero h1{ font-size:34px; line-height:1.3; max-width:32ch; }
  /* One 30px measure everywhere: hero-to-first-row, row-to-row, AND the channel between
     the text and the photo — so the gutter reads the same width all the way down. The
     photo edge stays locked to the page centre on every row, so that centre line is dead
     straight and the text sits 30px off it whichever side the photo is on. */
  .series-grid{ padding:30px 0 60px; gap:30px; }
  .srow{ flex-direction:row; align-items:stretch; min-height:460px; } /* taller photos */
  /* Strict two-column grid: every cell — text or photo — sits in one of two boxes,
     64px off the outer page edge and 30px off the centre line. So a photo lines up
     exactly with the divider of the row above/below it, which shares its side of the
     page (Custom photo ↔ Classic divider, Core photo ↔ AWP divider, and so on).
     Note: this ends the earlier full-bleed treatment — photos no longer run off
     the page edge. */
  /* Default row: text on the left, photo in the right column. */
  .scell.stext{ flex:0 0 50%; justify-content:center; padding:20px 30px 20px 64px; }
  /* 12px corner — the house card radius (was shared with the removed showcase cards).
     `order:0` undoes the mobile photo-above-text reorder; .srow.flip below overrides it. */
  .scell.simg{ order:0; flex:1 1 auto; align-self:stretch; width:auto; aspect-ratio:auto;
    margin:0 64px 0 30px; border-radius:12px; }
  /* Flipped row: photo in the left column, text on the right. */
  .srow.flip .scell.stext{ order:2; padding:20px 64px 20px 30px; }
  .srow.flip .scell.simg{ order:1; margin:0 30px 0 64px; }
  .scell.stext .eyebrow{ font-size:28px; }
  .shead{ font-size:21px; }
}

/* ---------- series listing (the collection page) ----------
   Modelled on harborsaunas.com/collections/all: full-bleed photo hero with the
   collection name, a centred intro paragraph fenced by hairline rules, then a
   3-across card grid (photo, name, one-line summary, outline button). Harbor's
   cards are portrait; ours are square because the backyard gallery shots are
   square masters, and cropping them to portrait cuts the spa out of frame. */
.sr-hero{ position:relative; isolation:isolate; min-height:42vh; display:flex;
  flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:26px 20px 22px; overflow:hidden; }
.sr-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; }
.sr-scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,20,32,.42) 0%, rgba(11,20,32,.18) 45%, rgba(11,20,32,.55) 100%); }
.sr-hero h1{ color:#fff; font-family:var(--disp); font-weight:300; font-size:34px; line-height:1.1;
  letter-spacing:-.01em; margin:0; }
/* Series tagline under the hero title. Only renders when the series has one. */
.sr-tag{ color:rgba(255,255,255,.92); font-family:var(--disp); font-weight:300; font-size:17px;
  line-height:1.3; letter-spacing:.005em; margin:10px 0 0; }
.sr-tag:empty{ display:none; }
/* Card grid — one column on a phone. */
.mgrid{ padding:22px 20px 48px; display:grid; grid-template-columns:1fr; gap:44px; }
.mcard{ display:flex; flex-direction:column; align-items:flex-start; }
.mcard-img{ width:100%; aspect-ratio:1; position:relative; overflow:hidden; border-radius:12px; }
/* Same hover zoom as the showcase carousel and the series grid. */
.mcard-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .6s ease; }
.mcard:hover .mcard-bg{ transform:scale(1.04); }
/* Models with a working builder show the builder's own render stage instead of a
   backyard photo — same tub image, same INTERIOR/EXTERIOR toggle, same caption, so
   the card previews what you get on the next page. Each card keeps its own view. */
.mcard-stage{ width:100%; border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
  background:radial-gradient(120% 80% at 50% 34%, var(--stage-2), var(--stage-1) 88%); }
.mst-img{ aspect-ratio:1; display:grid; place-items:center; padding:16px; }
.mst-img img{ width:88%; filter:drop-shadow(0 18px 20px rgba(20,37,59,.24)); transition:opacity .3s; }
.mcard-stage .stage-view{ padding:0 18px 12px; }
.mcard-stage .stage-cap{ padding:0 18px 16px; }
/* 3D CARD FLIP — the whole panel rotates on its vertical axis to show the cabinet on
   the back face. Triggered by hover on desktop and by tap on touch (.flipped —
   :hover is unreliable on touch and can stick after a tap).
   The panel styling moves onto the two FACES, so the container itself is just the
   perspective box; overflow must stay visible or the rotation gets clipped. */
.mcard-stage--flip{ perspective:1300px; background:none; border-radius:0; overflow:visible; display:block; }
.mst-flip{ position:relative; width:100%; aspect-ratio:1;
  transform-style:preserve-3d; transition:transform .7s cubic-bezier(.4,0,.2,1); }
.mst-face{ position:absolute; inset:0; display:grid; place-items:center; padding:16px;
  border-radius:12px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:radial-gradient(120% 80% at 50% 34%, var(--stage-2), var(--stage-1) 88%); }
.mst-back{ transform:rotateY(180deg); }
.mst-face img{ width:88%; filter:drop-shadow(0 18px 20px rgba(20,37,59,.24)); }
.mcard-stage--flip.flipped .mst-flip{ transform:rotateY(180deg); }
@media (hover:hover){
  .mcard-stage--flip:hover .mst-flip{ transform:rotateY(180deg); }
}
@media (prefers-reduced-motion:reduce){
  .mst-flip{ transition:none; }
}
/* Stand-in for the models with no backyard photo yet (Whistler, Nova, all 8 pools). */
.mcard-ph{ position:absolute; inset:0; display:grid; place-items:center; background:#eceef1;
  color:var(--body); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:0 18px; }
.mcard-name{ font-family:var(--disp); font-weight:400; font-size:29px; line-height:1.1;
  letter-spacing:-.01em; margin:20px 0 0; }
.mcard-body{ color:var(--body); font-size:15px; line-height:1.55; margin:9px 0 18px; }
/* The website copy runs anywhere from one line to nine, so let the paragraph take
   what it needs and push the button to the card's bottom — that keeps the buttons
   on one line across each row instead of stepping up and down with the text. */
.mcard .hbtn{ margin-top:auto; }

@media (min-width:900px){
  .sr-hero{ min-height:56vh; padding:64px; }
  .sr-hero h1{ font-size:52px; }
  .sr-tag{ font-size:23px; margin-top:14px; }
  /* 3 across, with Harbor's 64px row / 60px column gaps. */
  .mgrid{ padding:26px 64px 84px; grid-template-columns:repeat(3,1fr); gap:64px 60px; }
  .mcard-name{ font-size:36px; }
  .mcard-body{ font-size:16px; }
}

/* ---------- quiz ---------- */
.q-top{ padding:26px 26px 0; }
.q-prog{ display:flex; align-items:center; gap:14px; }
.q-prog .track{ flex:1; height:2px; background:var(--line); position:relative; }
.q-prog .track i{ position:absolute; left:0; top:0; height:100%; background:var(--gold); transition:width .4s cubic-bezier(.4,0,.2,1); }
.q-prog .sn{ font-family:var(--disp); font-weight:300; font-size:13px; color:var(--body); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.q-h{ font-family:var(--disp); font-weight:500; font-size:25px; line-height:1.12; letter-spacing:-.02em; margin:26px 26px 6px; text-wrap:balance; }
.q-sub{ color:var(--body); font-size:14px; margin:0 26px 22px; }
.q-opts{ padding:0 20px 24px; display:flex; flex-direction:column; }
.q-opt{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none; border:none;
  border-top:1px solid var(--line); padding:17px 6px; color:var(--ink); transition:.14s; }
.q-opt:last-child{ border-bottom:1px solid var(--line); }
.q-opt .ot{ flex:1; }
.q-opt .ot b{ display:block; font-family:var(--disp); font-weight:500; font-size:16.5px; letter-spacing:-.01em; }
.q-opt .ot span{ display:block; font-size:12.5px; color:var(--body); margin-top:2px; }
.q-opt .mk{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); flex:none; position:relative; transition:.15s; }
.q-opt.sel .mk{ border-color:var(--orange); }
.q-opt.sel .mk::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--orange); }
.q-opt.sel .ot b{ color:var(--blue-dk); }
.q-opt:hover{ padding-left:12px; }

/* ---------- match ---------- */
.match-hero{ position:relative; isolation:isolate; min-height:56vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; color:#fff; overflow:hidden; }
.match-hero .bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.match-hero .scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,20,32,.28), rgba(11,20,32,.5) 55%, rgba(11,20,32,.85)); }
.match-hero .badge{ align-self:flex-start; font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy); background:var(--gold-lt); padding:6px 12px; margin-bottom:auto; }
.match-hero .eyebrow{ color:#e8c98a; } .match-hero .eyebrow::before{ background:#e8c98a; }
.match-hero h1{ color:#fff; font-size:42px; font-weight:500; margin:12px 0 0; letter-spacing:-.02em; }
.match-hero .why{ font-size:14.5px; color:#e4ebf1; margin:10px 0 0; display:flex; align-items:center; gap:9px; }
.match-hero .why svg{ width:17px; height:17px; color:var(--gold-lt); flex:none; }
.statstrip{ display:flex; background:var(--paper); }
.statstrip div{ flex:1; padding:20px 8px; text-align:center; border-right:1px solid var(--line); }
.statstrip div:last-child{ border-right:none; }
.statstrip b{ display:block; font-family:var(--disp); font-weight:500; font-size:21px; color:var(--ink); }
.statstrip span{ display:block; font-family:var(--cond); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.match-note{ padding:22px 26px; color:var(--body); font-size:13.5px; }

/* ---------- builder ---------- */
.bld-left{ display:contents; }
.bld-head{ padding:24px 26px 4px; }
.bld-head h2{ font-size:30px; font-weight:500; margin-top:10px; letter-spacing:-.02em; }
.bld-head p{ color:var(--body); font-size:14px; margin:6px 0 0; }
.stage{ margin:8px 0 0; padding:8px 0 0; position:relative;
  background:radial-gradient(120% 80% at 50% 34%, var(--stage-2), var(--stage-1) 88%); }
.stage-inner{ position:relative; padding:14px 26px 8px; min-height:240px; display:grid; place-items:center; }
.stage img{ width:86%; max-width:340px; filter:drop-shadow(0 24px 26px rgba(20,37,59,.28)); transition:opacity .3s; }
.stage-view{ display:flex; justify-content:center; gap:0; padding:6px 26px 20px; }
.stage-seg{ font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; padding:8px 16px; border-bottom:1.5px solid transparent; transition:.15s; }
.stage-seg.on{ color:var(--ink); border-color:var(--gold); }
.stage-cap{ text-align:center; font-size:12px; color:var(--body); padding:0 26px 4px; }
.stage-cap b{ color:var(--ink); font-weight:600; }

.sec{ padding:24px 26px 6px; border-top:1px solid var(--line); }
.sec:first-of-type{ border-top:none; }
.sec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.sec-h .st{ display:flex; align-items:baseline; gap:12px; }
.sec-h .sn{ font-family:var(--disp); font-weight:300; font-size:13px; color:var(--blue); font-variant-numeric:tabular-nums; }
.sec-h b{ font-family:var(--disp); font-weight:500; font-size:18px; letter-spacing:-.01em; }
.sec-h .hint{ font-family:var(--cond); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.rows{ display:flex; flex-direction:column; }
.opt-r{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:none; border:none;
  border-top:1px solid var(--line-2); padding:15px 4px; color:var(--ink); transition:.14s; }
.opt-r:first-child{ border-top:none; }
.opt-r .rt{ flex:1; }
.opt-r .rt b{ display:block; font-family:var(--disp); font-weight:500; font-size:15.5px; letter-spacing:-.01em; }
.opt-r .rt span{ display:block; font-size:12.5px; color:var(--body); margin-top:1px; }
.opt-r .rt .std{ font-family:var(--cond); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.opt-r .mk{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex:none; position:relative; transition:.15s; }
.opt-r.sel .mk{ border-color:var(--orange); }
.opt-r.sel .mk::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--orange); }
.opt-r.sel .rt b{ color:var(--blue-dk); }
.opt-r .swm{ width:26px; height:26px; border-radius:4px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }

/* swatch grid */
.swgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sw{ background:none; border:none; padding:0; color:var(--ink); text-align:center; }
.sw .chip{ display:block; width:100%; aspect-ratio:1; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.13); position:relative; transition:.15s; }
.sw .chip::after{ content:""; position:absolute; inset:-5px; border-radius:9px; border:1.5px solid transparent; transition:.15s; }
.sw.sel .chip::after{ border-color:var(--orange); }
.sw:hover .chip{ transform:translateY(-2px); }
.sw small{ display:block; font-family:var(--cond); font-size:11.5px; font-weight:600; letter-spacing:.02em; margin-top:8px; color:var(--body); }
.sw.sel small{ color:var(--ink); }

/* toggle */
.tgl{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:none; border:none;
  border-top:1px solid var(--line-2); padding:15px 4px; color:var(--ink); }
.tgl:first-child{ border-top:none; }
.tgl .tt{ flex:1; }
.tgl .tt b{ display:block; font-family:var(--disp); font-weight:500; font-size:15.5px; }
.tgl .tt span{ display:block; font-size:12.5px; color:var(--body); margin-top:1px; }
.sw-toggle{ width:46px; height:27px; border-radius:99px; background:var(--line); flex:none; position:relative; transition:.18s; }
.tgl.on .sw-toggle{ background:var(--orange); }
.sw-toggle::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.18s; }
.tgl.on .sw-toggle::after{ transform:translateX(19px); }

.footpad{ height:8px; }

/* ---------- action bar ---------- */
.actionbar{ position:sticky; bottom:0; z-index:40; display:flex; align-items:center; gap:14px;
  padding:14px 22px calc(14px + env(safe-area-inset-bottom,0));
  background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:saturate(140%) blur(16px);
  border-top:1px solid var(--line); }
.actionbar .meta{ flex:1; min-width:0; }
.actionbar .meta b{ display:block; font-family:var(--disp); font-weight:500; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.actionbar .meta span{ display:block; font-family:var(--cond); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.btn{ appearance:none; border:none; font-family:var(--cond); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  padding:15px 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:.15s; border-radius:2px; }
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-dk); }
.btn-block{ width:100%; }
.btn-ghost{ background:none; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-line{ background:none; color:#fff; border:1.5px solid rgba(255,255,255,.6); }
.btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ---------- summary ---------- */
.sum-hero{ position:relative; isolation:isolate; min-height:34vh; display:flex; flex-direction:column; justify-content:flex-end; padding:24px 26px; color:#fff; overflow:hidden; }
.sum-hero .bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.sum-hero .scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,20,32,.3), rgba(11,20,32,.8)); }
.sum-hero .eyebrow{ color:#e8c98a; } .sum-hero .eyebrow::before{ background:#e8c98a; }
.sum-hero h1{ color:#fff; font-size:32px; font-weight:500; margin:12px 0 0; }
.sum-hero .mini{ display:flex; gap:22px; margin-top:14px; }
.sum-hero .mini b{ display:block; font-family:var(--disp); font-weight:500; font-size:17px; }
.sum-hero .mini span{ display:block; font-family:var(--cond); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#a9bccc; margin-top:2px; }

.block{ padding:26px 26px 6px; }
.block-h{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.block-h .eyebrow{ margin:0; }
.block-h .cnt{ margin-left:auto; font-family:var(--cond); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.selrow{ display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line-2); }
.selrow:first-child{ border-top:none; }
.selrow .swm{ width:30px; height:30px; border-radius:4px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); background-size:cover; }
.selrow .swm.dot{ background:var(--panel); display:grid; place-items:center; box-shadow:none; }
.selrow .swm.dot::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.selrow .slt{ flex:1; }
.selrow .slt b{ display:block; font-family:var(--cond); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.selrow .slt span{ display:block; font-family:var(--disp); font-weight:500; font-size:15px; color:var(--ink); margin-top:2px; }

.stdgrp{ padding:2px 0 0; }
.stdgrp .gt{ font-family:var(--cond); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:16px 0 8px; }
.feat{ display:flex; gap:11px; align-items:flex-start; padding:5px 0; font-size:14px; color:var(--body); }
.feat svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--gold); }

/* form */
.form{ padding:8px 26px 6px; }
.field{ margin-top:16px; }
.field label{ display:block; font-family:var(--cond); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--body); margin:0 0 7px; }
.field label .req{ color:var(--orange-dk); }
.field input, .field textarea{ width:100%; font-family:var(--sans); font-size:15.5px; color:var(--ink); background:var(--paper-2);
  border:none; border-bottom:1.5px solid var(--line); padding:11px 2px; transition:.14s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--orange); }
.field textarea{ resize:vertical; min-height:64px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* honeypot (quote-request-public): off-screen, never shown to a person */
.hp{ position:absolute; left:-9999px; top:-9999px; height:1px; width:1px; overflow:hidden; }
.consent{ display:flex; gap:11px; align-items:flex-start; margin-top:20px; font-size:13px; color:var(--body); }
.consent input{ width:19px; height:19px; margin-top:2px; accent-color:var(--orange); flex:none; }
.err{ color:var(--orange-dk); font-family:var(--cond); font-weight:600; font-size:12.5px; letter-spacing:.04em; margin-top:12px; display:none; }
.err.show{ display:block; }

/* confirmation */
.confirm{ padding:0; }
.confirm-hero{ position:relative; isolation:isolate; min-height:44vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:40px 30px; color:#fff; overflow:hidden; }
.confirm-hero .bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.confirm-hero .scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,20,32,.5), rgba(11,20,32,.82)); }
.confirm-hero .ring{ width:66px; height:66px; border-radius:50%; border:1.5px solid var(--gold-lt); display:grid; place-items:center; margin-bottom:22px; }
.confirm-hero .ring svg{ width:30px; height:30px; color:var(--gold-lt); }
.confirm-hero h1{ color:#fff; font-size:30px; font-weight:500; }
.confirm-hero p{ color:#dbe4ec; font-size:15px; margin:14px 0 0; max-width:32ch; }
.refbox{ margin:26px auto 0; display:inline-flex; flex-direction:column; align-items:center; padding:14px 26px; border:1px solid rgba(255,255,255,.28); }
.refbox small{ font-family:var(--cond); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#c7d2dc; }
.refbox b{ font-family:var(--disp); font-weight:500; font-size:22px; letter-spacing:.06em; margin-top:4px; font-variant-numeric:tabular-nums; }
.next{ padding:32px 26px 20px; }
.next .ni{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); }
.next .ni:first-child{ border-top:none; }
.next .ni .num{ font-family:var(--disp); font-weight:300; font-size:16px; color:var(--blue); flex:none; width:24px; font-variant-numeric:tabular-nums; }
.next .ni b{ font-family:var(--disp); font-weight:500; font-size:15.5px; }
.next .ni p{ margin:3px 0 0; font-size:13.5px; color:var(--body); }

/* ======================================================================
   DESKTOP LAYOUT  (min-width:900px)
   Mobile-first everywhere above; this widens the app into a real
   web layout — full-bleed heroes, two-up entry paths, and a
   sticky render rail beside the builder options.
   ====================================================================== */
@media (min-width:900px){
  .app{ max-width:none; height:100vh; box-shadow:none; }   /* full-bleed: hero + banner span screen to screen */
  .screen{ min-height:0; }            /* let screens shrink so .scroll can scroll internally */
  .scroll{ min-height:0; }
  .top{ height:66px; padding:0 44px; }
  /* keep text content readable on ultra-wide screens; heroes stay full-bleed */
  #s-landing .intro, #s-landing .paths{ max-width:1200px; margin-left:auto; margin-right:auto; }
  #s-landing .disc{ margin-left:auto; margin-right:auto; }
  #s-builder .scroll{ max-width:1560px; margin-left:auto; margin-right:auto; }

  /* ---- landing ---- */
  /* Hero fills the screen right down to the CTA row, so "View Collection" / "Take the Quiz"
     sit just above the fold and nothing below the CTA band shows on first load.
     270px = the 66px sticky banner + the 204px CTA block (buttons + blurbs + padding);
     .top is sticky, so it still takes part in the flow and counts here. */
  #s-landing .hero{ min-height:calc(100vh - 270px); padding:72px 64px 56px; }
  #s-landing .hero h1{ font-size:34px; line-height:1.3; max-width:32ch; }
  #s-landing .intro{ padding:60px 64px 8px; }
  #s-landing .intro h2{ font-size:32px; max-width:26ch; }
  #s-landing .paths{ flex-direction:row; align-items:stretch; padding:34px 64px 8px; gap:26px; }
  #s-landing .path{ flex:1; min-height:340px; }
  #s-landing .path .inner{ min-height:340px; padding:30px 30px 28px; }
  #s-landing .path h3{ font-size:26px; }
  #s-landing .path p{ font-size:15px; }
  #s-landing .disc{ margin:34px 64px 52px; max-width:76ch; }

  /* ---- section heads / lists (collections + models) ---- */
  .pad-head{ max-width:820px; margin:0 auto; padding:60px 40px 6px; }
  .pad-head .display{ font-size:46px; }
  .pad-head p{ font-size:17px; }
  .list{ max-width:820px; margin:0 auto; width:100%; padding:26px 40px 40px; }
  .litem .lt b{ font-size:20px; }

  /* ---- quiz ---- */
  #s-quiz .q-top{ max-width:720px; margin:0 auto; padding:44px 40px 0; }
  #s-quiz .q-h{ max-width:720px; margin:34px auto 6px; padding:0 40px; font-size:34px; }
  #s-quiz .q-sub{ max-width:720px; margin:0 auto 26px; padding:0 40px; font-size:15px; }
  #s-quiz .q-opts{ max-width:720px; margin:0 auto; padding:0 34px 30px; }
  #s-quiz .actionbar{ padding:16px 40px; }
  #s-quiz .actionbar .btn-block{ width:auto; min-width:230px; margin-left:auto; flex:none; }

  /* ---- match ---- */
  #s-match .match-hero{ min-height:52vh; padding:46px 64px; }
  #s-match .match-hero h1{ font-size:60px; }
  #s-match .match-hero .why{ font-size:16px; }
  #s-match .statstrip{ max-width:820px; margin:0 auto; width:100%; }
  #s-match .match-note{ max-width:660px; margin:0 auto; text-align:center; }
  #s-match .actionbar{ padding:16px 40px; }

  /* ---- BUILDER: sticky render rail + scrolling options ---- */
  #s-builder .scroll{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
    column-gap:52px; align-items:start; padding:0 56px 44px; }
  #s-builder .bld-left{ display:block; grid-column:1; position:sticky; top:24px; align-self:start; padding-top:38px; }
  #s-builder .bld-head{ padding:0 0 6px; }
  #s-builder .bld-head h2{ font-size:42px; }
  #s-builder .stage{ margin:14px 0 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  #s-builder .stage-inner{ min-height:300px; }
  #s-builder .stage img{ max-width:400px; }
  #s-builder #secHost{ grid-column:2; padding-top:38px; }
  #s-builder .sec:first-of-type{ padding-top:0; }
  #s-builder .footpad{ display:none; }
  #s-builder .actionbar{ padding:16px 56px; }
  #s-builder .actionbar .btn{ flex:none; }

  /* ---- summary: full-bleed hero, centered content column ---- */
  #s-summary .sum-hero{ min-height:40vh; padding:48px 64px; }
  #s-summary .sum-hero h1{ font-size:48px; }
  #s-summary .block{ max-width:680px; margin:0 auto; width:100%; }
  #s-summary .form{ max-width:680px; margin:0 auto; width:100%; }
  #s-summary .actionbar{ padding:16px 40px; }
  #s-summary .actionbar .btn-block{ width:auto; min-width:260px; margin:0 auto; }

  /* ---- confirmation ---- */
  #s-done .confirm-hero{ min-height:48vh; }
  #s-done .confirm-hero h1{ font-size:40px; }
  #s-done .next{ max-width:660px; margin:0 auto; width:100%; padding:40px 40px 28px; }
}