/* ==========================================================================
   DARNA v2 — dark, bold, interaction-led redesign (prototype)
   Benchmark: lamalama.com. Palette: near-black + cream, DARNA brass accent.
   No build step. Loaded by every public page with a manual ?v=N.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:          #1A1816;   /* warm near-black (DARNA charcoal family) */
  --bg-2:        #211E1B;
  --bg-3:        #2A2622;
  --ink:         #0F0E0D;   /* deepest black: pills, chips, loader cells */
  --cream:       #F7F1E7;
  --cream-2:     #EDE4D5;
  --brass:       #C4A15C;
  --brass-soft:  #D8BC85;
  --brass-deep:  #A9813F;
  --text:        var(--cream);
  --text-dim:    rgba(247,241,231,.62);
  --text-faint:  rgba(247,241,231,.38);
  --line:        rgba(247,241,231,.16);
  --line-strong: rgba(247,241,231,.55);
  --glass:       rgba(15,14,13,.78);

  --f-sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'Sometype Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* fluid type (min @375 → max @1440) */
  --t-mono:  0.6875rem;                                   /* 11px labels */
  --t-body:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --t-lead:  clamp(1.2rem, 1rem + .9vw, 1.75rem);
  --t-big:   clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);     /* indented statements */
  --t-h2:    clamp(2.6rem, 1.6rem + 5vw, 6rem);
  --t-h1:    clamp(2.6rem, 1.4rem + 5.2vw, 5.75rem);
  --t-mega:  clamp(3.2rem, 1rem + 10vw, 11rem);

  --margin:  clamp(1rem, .5rem + 2.2vw, 2.5rem);          /* page side margin */
  --gutter:  clamp(.625rem, .4rem + 1vw, 1.5rem);
  --sec:     clamp(4.5rem, 2.5rem + 6vw, 9rem);            /* section spacing */
  --radius:  4px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.76,0,.24,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }
body{
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, canvas, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
::selection{ background: var(--brass); color: var(--ink); }
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus{ outline: none; } /* programmatic focus targets (step legends, headings) */
.sr-only{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip{
  position: fixed; left: var(--margin); top: -100px; z-index: 200;
  background: var(--cream); color: var(--ink); padding: .75rem 1rem;
  font: 500 var(--t-mono)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
}
.skip:focus{ top: 1rem; }

/* ---------- Type primitives ---------- */
.mono{
  font-family: var(--f-mono); font-size: var(--t-mono); line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 400;
}
.label::before{ content: '[\00a0'; }
.label::after{ content: '\00a0]'; }
.display{
  font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; line-height: .86;
  font-size: var(--t-h1);
}
.h2{ font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; line-height: .88; font-size: var(--t-h2); }
.mega{ font-weight: 800; text-transform: uppercase; letter-spacing: -.045em; line-height: .84; font-size: var(--t-mega); }
.lead{ font-size: var(--t-lead); line-height: 1.22; letter-spacing: -.01em; font-weight: 400; }
.statement{ font-size: var(--t-big); line-height: 1.08; letter-spacing: -.025em; font-weight: 500; }
.statement--indent{ text-indent: clamp(3rem, 8vw, 7.25rem); }
.dim{ color: var(--text-dim); }
.brass{ color: var(--brass); }

/* ---------- Layout ---------- */
.wrap{ padding-inline: var(--margin); }
.grid{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.rule{ border: 0; border-top: 1px solid var(--line); margin: 0; }
.section{ padding-block: var(--sec); position: relative; }
main{ display: block; }

/* ---------- Buttons & chips ---------- */
.btn{
  display: inline-flex; align-items: center; gap: .75rem; min-height: 3.125rem;
  padding: 0 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: 400 var(--t-mono)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::before{ /* fill wipe on hover */
  content: ''; position: absolute; inset: 0; background: var(--cream); z-index: -1;
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out);
}
.btn:hover{ color: var(--ink); border-color: var(--cream); }
.btn:hover::before{ transform: scaleY(1); }
.btn .arr{ width: 11px; height: 11px; transition: transform .45s var(--ease-out); }
.btn:hover .arr{ transform: translate(2px,-2px); }
.btn--solid{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--solid::before{ background: var(--brass); }
.btn--solid:hover{ border-color: var(--brass); }
.btn--brass{ background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn--brass::before{ background: var(--cream); }

.chip{
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem;
  background: var(--ink); color: var(--cream); border-radius: 2px;
  font: 400 .625rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.chips{ display: flex; flex-wrap: wrap; gap: 2px; }
.plus{ font: 400 var(--t-mono)/1 var(--f-mono); white-space: nowrap; }
.plus::before{ content: '(\00a0'; } .plus::after{ content: '\00a0)'; }

/* phone chip with portrait (Lama "call" chip) */
.call-chip{
  display: inline-flex; align-items: center; gap: 1.5rem; padding: .5rem 2rem .5rem .6rem;
  background: var(--ink); border-radius: var(--radius); font: 400 var(--t-mono)/1 var(--f-mono); letter-spacing: .04em;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.call-chip img{ width: auto; height: 28px; transition: filter .3s var(--ease-out); }
.call-chip:hover{ background: var(--brass); color: var(--ink); }
/* brass mark would vanish into the brass hover fill, so it goes black with the text */
.call-chip:hover img{ filter: brightness(0); }
/* desktop tel: click copies the number (core.js initTelLinks) and confirms here */
a[href^="tel:"][data-copied]{ position: relative; }
a[href^="tel:"][data-copied]::after{
  content: attr(data-copied); position: absolute; left: 0; bottom: calc(100% + .5rem); z-index: 5; white-space: nowrap;
  padding: .5rem .75rem; border-radius: var(--radius); background: var(--cream); color: var(--ink);
  font: 400 var(--t-mono)/1 var(--f-mono); letter-spacing: .04em; pointer-events: none;
  animation: copied-in .3s var(--ease-out);
}
@keyframes copied-in{ from{ opacity: 0; transform: translateY(4px); } }

/* ---------- Loader / page-transition pixel grid ---------- */
.loader{
  position: fixed; inset: 0; z-index: 150; pointer-events: none; display: none;
}
/* solid from the very first paint, while core.js still waits behind the CDN scripts;
   runLoader clears the background once the canvas has drawn its own cover (the gate cuts holes in the canvas).
   The failsafe never traps content if JS dies (must outlast the JS cap in runLoader + its reveal —
   runLoader's own hard cap is 9s, plus the gate animation on top, so this needs real headroom) */
.js .loader{ display: block; background: #000; animation: loader-failsafe 0s linear 16s forwards; }
.js.js-via .loader{ background: #1A1816; } /* matches the page-transition grid the last page left on screen */
.js-via .loader__meta{ display: none; } /* page-to-page: no counter (runLoader hides it too, but only once core.js runs) */
@keyframes loader-failsafe{ to{ visibility: hidden; } }
.loader canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__meta{
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: center;
  color: var(--cream); text-align: center;
}
.loader__count{ font: 500 .8125rem/1 var(--f-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.loader.is-done{ visibility: hidden; }

/* ---------- Nav pill ---------- */
.nav{
  position: fixed; top: 1rem; left: 50%; z-index: 90; width: min(438px, calc(100% - 2 * var(--margin)));
  transform: translateX(-50%);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: var(--radius); overflow: hidden;
}
.nav__bar{ display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; height: 50px; }
.nav__logo{ display: grid; place-items: center; height: 100%; position: relative; }
.pixmark{ width: 28px; height: 28px; transition: opacity .3s var(--ease-out); }
.pixmark rect{ fill: var(--cream); transform-box: fill-box; transform-origin: center; transition: transform .38s var(--ease-out), opacity .3s; }
.pixmark rect.off{ transform: scale(0); opacity: 0; }
/* real brand mark, swapped in over the pixmark while the "arch" (home) state is active */
.nav__logo-brand{
  position: absolute; inset: 0; margin: auto; height: 30px; width: auto; object-fit: contain;
  opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none;
}
.nav__logo.is-brand .pixmark{ opacity: 0; }
.nav__logo.is-brand .nav__logo-brand{ opacity: 1; }
/* hold the pixmark's fade-in until its rects have mostly finished morphing off the "arch" shape, so leaving the hero doesn't flash the crude bitmap copy of the logo we just showed */
.nav__logo:not(.is-brand) .pixmark{ transition-delay: .15s; }
.nav__tag{ text-align: center; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.nav__toggle{ display: grid; place-items: center; height: 100%; }
.burger{ width: 18px; height: 12px; position: relative; }
.burger i{ position: absolute; left: 0; right: 0; height: 2px; background: var(--cream); transition: transform .4s var(--ease-out), opacity .2s; }
.burger i:nth-child(1){ top: 0; } .burger i:nth-child(2){ top: 5px; } .burger i:nth-child(3){ top: 10px; }
.nav.is-open .burger i:nth-child(1){ transform: translateY(5px); }
.nav.is-open .burger i:nth-child(3){ transform: translateY(-5px); }
.nav.is-open .burger i:nth-child(2){ opacity: 0; }

.nav__panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-io); }
.nav.is-open .nav__panel{ grid-template-rows: 1fr; }
.nav__inner{ overflow: hidden; }
.nav.is-open .nav__inner{ max-height: calc(100svh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
.nav__panel[hidden]{ display: grid; } /* hidden attr only toggles a11y via inert; keep grid animatable */
.nav__links{ border-top: 1px solid var(--line); }
.nav__links a{
  display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 2rem;
  border-bottom: 1px solid var(--line); font-size: 1rem; letter-spacing: -.01em;
  transition: background .25s, padding .35s var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ background: rgba(247,241,231,.06); padding-left: 2.35rem; }
.nav__links a[aria-current="page"] .mono{ color: var(--brass); }
.nav__cta{ display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .8rem; }
.nav__cta .btn{ justify-content: center; }
.nav__cta .btn:first-child{ grid-column: 1 / -1; }
.scrim{
  position: fixed; inset: 0; z-index: 80; background: rgba(15,14,13,.35);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility 0s .5s;
}
.scrim.is-on{ opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out); }

/* ---------- Corner card stack (desktop) ---------- */
.stack{
  position: fixed; top: 1rem; right: 1rem; z-index: 85; width: 160px;
  display: flex; flex-direction: column; gap: 4px;
}
.card{
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: var(--radius); overflow: hidden;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.card[data-hidden="true"]{ display: none; }
.card{ animation: card-in .7s var(--ease-out); }
@keyframes card-in{ from{ opacity: 0; transform: translateX(40%); } }
.card--contact{
  display: flex; align-items: center; gap: .9rem; height: 50px; padding: 0 .75rem;
  background: rgba(247,241,231,.72); color: var(--ink);
}
.card--contact:hover{ background: var(--brass); }
.card--contact:focus-visible{ background: var(--brass); }
.card--contact:focus-visible{ outline: 2px solid var(--ink); outline-offset: -4px; } /* inside the brass fill: visible on dark sections too */

/* before→after wipe tile (core.js drives .is-sweep / .is-after / .is-reset) */
.ba{ position: relative; flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: 2px; }
.card--contact .ba{ aspect-ratio: auto; border-radius: 2px; cursor: inherit; touch-action: auto; } /* beats the before/after slider's .ba rule further down */
.ba::after{ content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15,14,13,.14); pointer-events: none; }
.ba img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__b{ filter: grayscale(1) contrast(.95) brightness(1.02); }
.ba__a{ clip-path: inset(0 100% 0 0); }
.ba__line{
  position: absolute; top: 0; left: -1px; z-index: 1; width: 2px; height: 100%;
  background: var(--brass); box-shadow: 0 0 0 .5px rgba(15,14,13,.3); opacity: 0;
}
.ba.is-sweep .ba__a, .ba.is-after .ba__a, .ba.is-reset .ba__a{ clip-path: inset(0); }
.ba.is-sweep .ba__a{ transition: clip-path 1.1s var(--ease-io); }
.ba.is-sweep .ba__line, .ba.is-after .ba__line{ transform: translateX(32px); }
.ba.is-sweep .ba__line{ opacity: 1; transition: transform 1.1s var(--ease-io), opacity .15s; }
.ba.is-after .ba__line{ transition: opacity .25s; }
.ba.is-reset .ba__a{ opacity: 0; transition: opacity .45s var(--ease-out); }
.card--contact:hover .ba__a, .card--contact:focus-visible .ba__a{ clip-path: inset(0); opacity: 1; transition: clip-path .45s var(--ease-out), opacity .25s var(--ease-out); }
.card--contact:hover .ba__line, .card--contact:focus-visible .ba__line{ transform: translateX(32px); opacity: 0; transition: transform .45s var(--ease-out); animation: ba-line .45s var(--ease-out); }
.card--contact:hover .ba.is-done .ba__line, .card--contact:focus-visible .ba.is-done .ba__line{ animation: none; } /* already on 'after': no line */
@keyframes ba-line{ 0%, 65%{ opacity: 1; } 100%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .ba .ba__a{ clip-path: inset(0 0 0 50%); opacity: 1; }
  .ba .ba__line{ transform: translateX(16px); opacity: 1; }
  .card--contact:hover .ba__a, .card--contact:focus-visible .ba__a{ clip-path: inset(0); transition: none; }
  .card--contact:hover .ba__line, .card--contact:focus-visible .ba__line{ opacity: 0; transition: none; animation: none; }
}
.card__head{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 0 .75rem; text-align: left; }
.card__body{ display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease-io); }
.card.is-collapsed .card__body{ grid-template-rows: 0fr; }
.card__body > div{ overflow: hidden; }
.card__media{ margin: 0 .75rem .75rem; aspect-ratio: 136/200; position: relative; overflow: hidden; border-radius: 2px; background: var(--bg-3); }
.card__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .01s; }
.card__media img.is-on{ opacity: 1; }
.minideck{ position: relative; margin: .25rem .75rem .9rem; aspect-ratio: 136/88; display: block; width: calc(100% - 1.5rem); }
.minideck span{
  position: absolute; inset: 0; border-radius: 2px; background: var(--cream); overflow: hidden;
  transition: transform .5s var(--ease-out);
}
.minideck span:nth-child(1){ transform: translate(6px,-6px); opacity: .45; }
.minideck span:nth-child(2){ transform: translate(3px,-3px); opacity: .7; }
.minideck span:nth-child(3) img{ width: 55%; height: 100%; object-fit: cover; margin-left: auto; }
.minideck span:nth-child(3) b{ position: absolute; left: 6px; top: 6px; color: var(--ink); font: 800 .5rem/.95 var(--f-sans); text-transform: uppercase; width: 40%; }
.minideck:hover span:nth-child(1){ transform: translate(10px,-10px); }
.minideck:hover span:nth-child(2){ transform: translate(5px,-5px); }

/* ---------- Cursor follower ---------- */
.cursor{
  position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
  display: flex; align-items: center; gap: 1.25rem; height: 50px; padding: 0 1rem;
  background: rgba(247,241,231,.72); color: var(--ink); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translate3d(-100px,-100px,0) scale(.6);
  transition: opacity .25s var(--ease-out);
  will-change: transform;
}
.cursor.is-on{ opacity: 1; }

/* ---------- Hero ---------- */
.hero{ position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero__video{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; background: var(--bg); }
.hero__video::-webkit-media-controls-start-playback-button{ display: none !important; -webkit-appearance: none; } /* iOS Low Power Mode: no play glyph over the poster */
canvas[data-dither]{ opacity: 0; transition: opacity .6s; }
canvas[data-dither].is-ready{ opacity: 1; }
canvas.wwd__canvas.is-ready{ opacity: .9; }
.hero::after{ /* legibility gradient */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,24,22,.35) 0%, rgba(26,24,22,.05) 30%, rgba(26,24,22,.5) 46%, rgba(26,24,22,.66) 60%, rgba(26,24,22,.9) 100%);
}
.hero__title .label{ text-shadow: 0 0 1rem rgba(15,14,13,.7); } /* small type over bright film frames */
.hero__content{ padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.hero__title{ grid-column: 1 / span 8; }
.hero__title .label{ display: block; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero__lede{ grid-column: 9 / -1; align-self: end; font-size: var(--t-lead); line-height: 1.2; letter-spacing: -.01em; }
.strip{
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter);
  align-items: center; border-top: 1px solid var(--line-strong); padding-block: 1.4rem;
}
.strip > *{ white-space: nowrap; }
.strip__a{ grid-column: 1 / span 2; } .strip__b{ grid-column: 3 / span 2; }
.strip__clock{ grid-column: 5 / span 2; font-variant-numeric: tabular-nums; }
.strip__film{ grid-column: 7; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; text-transform: inherit; letter-spacing: inherit; }
.strip__film[hidden]{ display: none; } /* shown by core.js once it can control the film */
.strip__film:hover{ color: var(--brass); }
.strip__clock i{ display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); margin: 0 .5rem 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity: 0; } }
.strip__social{ grid-column: 8 / -1; display: flex; justify-content: flex-end; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.strip__social a{ display: inline-flex; gap: .35rem; min-height: 44px; align-items: center; }
.strip__social a::after{ content: '+'; transition: transform .35s var(--ease-out); }
.strip__social a:hover::after{ transform: rotate(90deg); }
.strip__social a:hover{ color: var(--brass); }
/* phones: the hero strip is just a centred film toggle, so the headline sits low and the film stays visible */
@media (max-width: 767px){
  .hero__content{ padding-bottom: .5rem; }
  .hero .strip{ border-top: 0; padding-block: .75rem 0; }
  .hero .strip__a, .hero .strip__b, .hero .strip__clock, .hero .strip__social{ display: none; }
  .hero .strip__film{ grid-column: 1 / -1; justify-self: center; }
}

/* page heros for inner pages */
.phero{ min-height: 64svh; padding-top: 9rem; display: flex; flex-direction: column; justify-content: flex-end; }
.phero__row{ align-items: end; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.phero h1{ grid-column: 1 / span 9; }
.phero .phero__side{ grid-column: 10 / -1; }

/* ---------- Split-text reveal primitives ---------- */
.w{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi{ display: inline-block; will-change: transform; }
[data-words] .wd{ opacity: .18; transition: opacity .2s linear; }
.no-js [data-reveal]{ opacity: 1 !important; transform: none !important; }

/* ---------- Spaces (pinned stepper) ---------- */
.spaces__intro{ padding-top: var(--sec); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.spaces__intro .h2{ grid-column: 1 / span 8; }
.spaces__intro .lead{ grid-column: 1 / span 6; margin-top: 2rem; }
.spaces__intro .label{ grid-column: 1 / -1; margin-bottom: 2rem; }
.spaces__intro .spaces__deckbtn{ grid-column: 9 / -1; justify-self: end; align-self: end; }
.how__head{ margin-bottom: clamp(2.5rem, 5vw, 4rem); row-gap: 1.5rem; }
.how__head .label{ grid-column: 1 / -1; }
.how__head .h2{ grid-column: 1 / span 9; }

/* ---------- Deck (full-screen spaces pitch deck) ---------- */
.deck{
  position: fixed; inset: 0; z-index: 110; display: none;
  background: rgba(15,14,13,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.deck.is-open{ display: block; }
.deck__frame{ position: absolute; inset: 1rem; display: flex; gap: 1rem; }
.deck__thumbs{
  width: 168px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  margin-left: -184px; transition: margin .6s var(--ease-io); scrollbar-width: none;
}
.deck.thumbs-open .deck__thumbs{ margin-left: 0; }
.deck__thumbs button{
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 1.2rem;
  height: 50px; padding: 0 .75rem; background: var(--glass); border-radius: var(--radius); text-align: left;
  transition: background .3s, color .3s; flex-shrink: 0;
}
.deck__thumbs img{ width: 28px; height: 28px; object-fit: cover; border-radius: 2px; }
.deck__thumbs button:hover{ background: var(--bg-3); }
.deck__thumbs button[aria-current="true"]{ background: var(--cream); color: var(--ink); }
.deck__viewport{ position: relative; flex: 1; overflow: hidden; border-radius: var(--radius); }
.deck__track{ position: absolute; inset: 0; will-change: transform; }
.deck__ctrl{ position: absolute; z-index: 5; top: 1rem; display: flex; gap: .5rem; }
.deck__ctrl--l{ left: 1rem; } .deck__ctrl--r{ right: 1rem; }
.icon-btn{
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line); color: var(--cream); transition: background .3s, color .3s;
}
.icon-btn:hover{ background: var(--cream); color: var(--ink); }
.icon-btn svg{ width: 16px; height: 16px; }
.deck__foot{ position: absolute; z-index: 5; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.deck__foot .mono{ padding: 0 .9rem; height: 48px; display: grid; place-items: center; background: var(--glass); border-radius: var(--radius); min-width: 6.5rem; }

.slide{
  position: absolute; left: 0; right: 0; height: 100%;
  background: var(--bg); color: var(--cream); overflow: hidden; border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter);
  padding: clamp(5rem, 8vh, 6.5rem) clamp(1.5rem, 5vw, 5.5rem) clamp(5.5rem, 9vh, 6.5rem);
}
.slide{ grid-template-rows: minmax(0, 1fr); }
@media (min-width: 901px){ /* desktop: columns scroll inside the fixed slide; phones scroll the whole slide */
  .slide__left, .slide--menu .slide__txt{ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .slide__left::-webkit-scrollbar, .slide--menu .slide__txt::-webkit-scrollbar{ display: none; }
}
.slide--cta{ grid-template-rows: auto auto; }
.slide--light{ background: var(--cream); color: var(--ink); }
.slide--light .dim{ color: rgba(15,14,13,.62); }
.slide--light .chip{ background: var(--ink); }
.slide__bg{ position: absolute; inset: 0; z-index: 0; }
.slide__bg img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.slide--cta .slide__bg::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, transparent 70%); } /* keeps cream text AA over bright renders */
.slide > *:not(.slide__bg){ position: relative; z-index: 1; }
.slide__h{ font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: .86; font-size: min(clamp(2.4rem, 1rem + 5vw, 5.5rem), 10vh); }
.slide--intro .slide__h{ grid-column: 1 / span 9; align-self: start; }
.slide--intro .slide__txt{ grid-column: 7 / -1; align-self: end; }
.slide--intro .slide__txt .label{ display: block; margin-bottom: 2rem; }
.slide--space .slide__left{ grid-column: 1 / span 6; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 0; }
.slide--space .slide__img{ grid-column: 7 / -1; position: relative; overflow: hidden; border-radius: 2px; min-height: 0; }
.slide--space .slide__img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 55%); }
.slide--space.is-flip .slide__left{ grid-column: 7 / -1; grid-row: 1; }
.slide--space.is-flip .slide__img{ grid-column: 1 / span 6; grid-row: 1; }
.slide__num{ font: 800 clamp(4rem, 2rem + 8vw, 9rem)/.8 var(--f-sans); letter-spacing: -.05em; color: var(--brass); }
.slide__incl{ display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1.5rem; margin-top: 1rem; }
.slide__incl li{ padding: .45rem 0; border-bottom: 1px solid currentColor; border-color: rgba(128,120,110,.28); font-size: .95rem; }
.slide--cta{ align-content: center; }
.slide--cta .slide__h{ grid-column: 1 / -1; font-size: clamp(3rem, 1rem + 8vw, 9rem); }
.slide--cta .slide__txt{ grid-column: 1 / span 6; margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.slide--cta .slide__btns{ display: flex; flex-wrap: wrap; gap: .5rem; }
.slide--light .btn{ border-color: rgba(15,14,13,.5); }
.slide--light .btn::before{ background: var(--ink); }
.slide--light .btn:hover{ color: var(--cream); border-color: var(--ink); }


/* ---------- What we do (halftone section) ---------- */
.wwd{ position: relative; overflow: hidden; isolation: isolate; }
.wwd__canvas{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.wwd__head{ padding-top: var(--sec); }
.wwd::after{ /* scrim over the halftone, under the text: heavy top for the headline + pills, heaviest at the foot for the lists */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,14,13,.55) 0%, rgba(15,14,13,.22) 28%, rgba(15,14,13,.3) 52%, rgba(15,14,13,.78) 100%);
}
.wwd__links{ display: flex; flex-wrap: wrap; gap: .5rem; margin: clamp(3rem, 8vw, 8rem) 0 2rem; }
.wwd__links .btn{ /* solid ink pills: they sit over a moving photo, so no transparency */
  min-height: 2.75rem; padding: 0 1rem; gap: .6rem; background: var(--ink); border-color: rgba(247,241,231,.28); color: var(--cream);
  font: 500 .75rem/1 var(--f-mono); letter-spacing: .06em;
}
.wwd__links .btn:hover{ color: var(--ink); border-color: var(--cream); }
.wwd__links .btn:active{ transform: translateY(1px); }
.wwd .lead{ max-width: 48rem; font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; color: var(--cream); text-wrap: pretty; }
.wwd__foot, .wwd .lead{ text-shadow: 0 1px 14px rgba(15,14,13,.65); }
.wwd__foot{ margin-top: clamp(3rem, 5vw, 4.5rem); padding-block: 3rem var(--sec); border-top: 1px solid var(--line); row-gap: 3rem; }
.wwd__tldr{ grid-column: 1 / span 5; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; align-self: start; }
.wwd__tldr p{ font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); font-weight: 500; letter-spacing: -.01em; }
.wwd__col{ grid-column: span 2; }
.wwd__col--first{ grid-column: 7 / span 2; }
.wwd__col .label{ display: block; margin-bottom: 1.25rem; font-size: .8125rem; font-weight: 500; color: var(--cream); }
.wwd__col li{ font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.2; letter-spacing: -.01em; }
.wwd__col li + li{ margin-top: .3rem; }

/* ---------- Marquee ---------- */
.marquee{ overflow: hidden; padding-block: clamp(3rem, 6vw, 6rem); border-block: 1px solid var(--line); }
.marquee__track{ display: flex; width: max-content; will-change: transform; }
.marquee__item{ display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-right: clamp(1.5rem, 3vw, 3rem); font-size: clamp(2.5rem, 1.2rem + 5vw, 6.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; white-space: nowrap; }
.marquee__item svg{ width: .45em; height: .45em; color: var(--brass); flex-shrink: 0; }
.marquee__item:nth-child(even){ -webkit-text-stroke: 1px var(--cream); color: transparent; }

/* ---------- Voices ---------- */
.voices__head{ margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: end; }
.voices__head .h2{ grid-column: 1 / span 8; }
.voices__head .voices__nav{ grid-column: 9 / -1; justify-self: end; display: flex; gap: .5rem; }
.voices__track{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gutter); }
.voice{ border-top: 1px solid var(--line-strong); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 2rem; justify-content: space-between; }
.voice blockquote{ margin: 0; font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem); line-height: 1.3; letter-spacing: -.01em; }
.voice blockquote::before{ content: '“'; display: block; font: 800 3.5rem/.6 var(--f-sans); color: var(--brass); margin-bottom: 1rem; }
.voice figcaption{ display: flex; justify-content: space-between; gap: 1rem; }
.voices__head .label{ grid-column: 1 / -1; margin-bottom: 1.5rem; }
/* phones only (shown by pages.js initVoices): segment buttons + "1 / 3" counter under the swipeable track */
.voices__pager{ display: none; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.voices__dots{ display: flex; margin-left: -10px; }
.voices__dots button{ width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.voices__dots button::before{ content: ''; width: 24px; height: 2px; background: var(--line-strong); transition: background .25s var(--ease-out); }
.voices__dots button[aria-current="true"]::before{ background: var(--brass); }
.voices__count{ color: var(--text-dim); font-size: var(--t-mono); font-variant-numeric: tabular-nums; white-space: pre; }
.voices__hint{ display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; }
.voices__hint svg{ width: 12px; height: 12px; color: var(--brass); animation: reno-cue-nudge 1.1s ease-in-out infinite alternate; }
.voices__pager.is-swiped .voices__hint{ display: none; }
@media (prefers-reduced-motion: reduce){ .voices__hint svg{ animation: none; } }

/* ---------- Culture collage ---------- */
.culture__grid{ row-gap: var(--gutter); }
.culture__a{ grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 3/4; }
.culture__b{ grid-column: 3 / span 2; grid-row: 1; aspect-ratio: 3/4; margin-top: 30%; }
.culture__big{ grid-column: 7 / -1; grid-row: 1 / span 3; aspect-ratio: 4/5; }
.culture__txt{ grid-column: 1 / span 5; grid-row: 3; align-self: end; display: flex; flex-direction: column; gap: 2.5rem; align-items: flex-start; }
.culture__label{ grid-column: 1 / span 5; grid-row: 2; align-self: start; padding-top: 1rem; }
.pic{ overflow: hidden; border-radius: 2px; position: relative; background: var(--bg-3); }
.pic img{ width: 100%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: 0; will-change: transform; }

/* ---------- CTA / footer ---------- */
.cta{ padding-top: var(--sec); }
.cta__grid{ row-gap: 3rem; padding-bottom: var(--sec); }
.cta__grid .mega{ grid-column: 1 / span 8; }
.cta__call{ grid-column: 1 / span 4; }
.cta__side{ grid-column: 7 / span 5; display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.cta__side .btns{ display: flex; flex-wrap: wrap; gap: .5rem; }
.foot{ padding-bottom: 1rem; }
@media (max-width: 1100px){ body:has(.boardfab[data-hidden="false"]) footer{ padding-bottom: calc(50px + 2rem + env(safe-area-inset-bottom)); } }

/* ---------- Filter pills (Design Menu tabs) ---------- */
.filter{
  display: inline-flex; align-items: center; gap: .6rem; height: 2.5rem; padding: 0 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: 400 var(--t-mono)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
  transition: background .3s, color .3s, border-color .3s;
}
.filter sup{ font-size: .55rem; color: var(--text-faint); transition: color .3s; }
.filter:hover{ border-color: var(--line-strong); }
.filter[aria-pressed="true"]{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
.filter[aria-pressed="true"] sup{ color: var(--ink); }

.lightbox{ border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--cream); }
.lightbox::backdrop{ background: rgba(15,14,13,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lightbox__frame{ position: absolute; inset: 1rem; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gutter); background: var(--bg); border-radius: var(--radius); padding: 5rem clamp(1.25rem,4vw,4rem) 2rem; overflow: auto; }
.lightbox__img{ grid-column: 1 / span 8; border-radius: 2px; overflow: hidden; min-height: 50vh; }
.lightbox__img img{ width: 100%; height: 100%; object-fit: cover; }
.lightbox__info{ grid-column: 9 / -1; display: flex; flex-direction: column; gap: 1.5rem; }
.lightbox__info h2{ font-size: clamp(2rem, 1rem + 3vw, 3.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; }

/* before / after */
.ba{ position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); --pos: 50%; touch-action: pan-y; cursor: ew-resize; user-select: none; }
.ba img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle{ position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--cream); transform: translateX(-1px); }
.ba__handle::after{ content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--ink); font: 500 1rem/1 var(--f-mono); letter-spacing: .1em; }
.ba .mono{ position: absolute; top: 1rem; padding: .45rem .6rem; background: var(--glass); border-radius: 2px; }
.ba .ba__lb{ left: 1rem; } .ba .ba__la{ right: 1rem; }
.ba-tabs{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

/* ---------- About page ---------- */
.stats{ border-top: 1px solid var(--line); }
.stat{ grid-column: span 4; padding: 2rem 0; display: flex; flex-direction: column; gap: 1rem; }
.stat b{ font: 800 clamp(3.5rem, 2rem + 6vw, 8rem)/.85 var(--f-sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.values{ counter-reset: v; }
.value{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); padding-block: 1.75rem; border-top: 1px solid var(--line); align-items: baseline; position: relative; }
.value:last-child{ border-bottom: 1px solid var(--line); }
.value .mono{ grid-column: 1 / span 1; color: var(--brass); }
.value h3{ grid-column: 2 / span 6; font-size: clamp(2rem, 1rem + 4vw, 4.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: .9; transition: transform .6s var(--ease-out), color .4s; }
.value p{ grid-column: 9 / -1; color: var(--text-dim); }
.value:hover h3{ transform: translateX(1rem); color: var(--brass-soft); }
.hscroll{ position: relative; }
/* default = natively scrollable row (reduced motion, no GSAP, phones); pages.js adds .is-pinned for the scrubbed version */
.hscroll__track{ display: flex; gap: var(--gutter); padding-inline: var(--margin); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding-bottom: 1rem; }
.hscroll.is-pinned{ overflow: hidden; }
.hscroll.is-pinned .hscroll__track{ width: max-content; overflow: visible; will-change: transform; }
.stagecard{ scroll-snap-align: start; width: clamp(17rem, 30vw, 26rem); flex-shrink: 0; border-top: 1px solid var(--line-strong); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; min-height: 22rem; }
.stagecard b{ font: 800 clamp(3rem, 2rem + 3vw, 5rem)/.85 var(--f-sans); letter-spacing: -.05em; color: var(--brass); }
.stagecard h3{ font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.stagecard p{ color: var(--text-dim); }
.materials{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gutter); }
.mat{ grid-column: span 4; display: flex; flex-direction: column; gap: .9rem; }
.mat .pic{ aspect-ratio: 1; }
.mat .pic img{ height: 100%; top: 0; transition: transform 1s var(--ease-out); }
.mat:hover .pic img{ transform: scale(1.06); }
.mat h3{ font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }
.mat p{ color: var(--text-dim); font-size: .95rem; }
.team{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gutter); }
.member{ grid-column: span 4; display: flex; flex-direction: column; gap: 1rem; }
.member .pic{ aspect-ratio: 4/5; display: grid; place-items: center; }
.member .pic span{ font: 800 5rem/1 var(--f-sans); color: var(--bg); -webkit-text-stroke: 1px var(--line-strong); }
.member h3{ font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }

/* ---------- Contact page ---------- */
.brief{ align-items: start; row-gap: 4rem; }
.brief__form{ grid-column: 1 / span 7; }
.brief__aside{ grid-column: 9 / -1; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 6rem; }
.progress{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.progress__bar{ height: 2px; background: var(--line); margin-bottom: 3rem; position: relative; }
.progress__bar i{ position: absolute; inset: 0; background: var(--brass); transform-origin: left; transition: transform .6s var(--ease-io); }
.step{ border: 0; margin: 0; padding: 0; min-width: 0; }
.step[hidden]{ display: none; }
.step legend{ padding: 0; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: .9; margin-bottom: 2.5rem; }
.step h3{ margin: 2.5rem 0 1rem; }
.opts{ display: flex; flex-wrap: wrap; gap: .5rem; }
.opt{ position: relative; }
.opt input{ position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.opt span{
  display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.25rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 1.05rem; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.opt span::before{ content: ''; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; transition: background .3s; }
.opt input[type="checkbox"] + span::before{ border-radius: 1px; }
.opt span:hover{ border-color: var(--cream); }
.opt input:checked + span{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
.opt input:checked + span::before{ background: var(--brass); border-color: var(--brass); }
.opt input:focus-visible + span{ outline: 2px solid var(--brass); outline-offset: 3px; }
.fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gutter); }
.fields .full{ grid-column: 1 / -1; }
.field{ display: flex; flex-direction: column; gap: .6rem; }
.field input, .field textarea{
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  color: var(--cream); font: 400 1.25rem/1.3 var(--f-sans); padding: .5rem 0 .75rem; letter-spacing: -.01em;
  transition: border-color .3s;
}
.field textarea{ resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--brass); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color: #E07A5F; }
.err{ color: #E9967A; min-height: 1.2em; margin-top: 1rem; }
.step__nav{ display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; }
.step__nav [hidden]{ display: none; } /* prev on step 1, next on the last step, send until the last step */
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done{ padding: 3rem 0; }
.done[hidden]{ display: none; }
.done .h2{ margin-bottom: 2rem; }
.ci{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 4rem; padding: 1rem 1.25rem; background: var(--bg-2); border-radius: var(--radius); transition: background .3s, color .3s; }
a.ci:hover{ background: var(--cream); color: var(--ink); }
.ci strong{ overflow-wrap: anywhere; display: block; font-weight: 500; font-size: 1.05rem; margin-top: .35rem; letter-spacing: -.01em; }

/* ---------- Contact aside: "we come to you" visit card (replaces the old map) ---------- */
.visit{
  display: flex; flex-direction: column; gap: 1.1rem; flex: 1; min-height: 14rem;
  padding: 1.5rem 1.25rem; background: var(--cream); color: var(--ink); border-radius: var(--radius);
  transition: background .3s var(--ease-out);
}
.visit:hover, .visit:focus-visible{ background: var(--brass); }
.visit__title{ font: 800 clamp(2rem, 1.4rem + 1.6vw, 3rem)/.92 var(--f-sans); text-transform: uppercase; letter-spacing: -.04em; }
.visit__to{ display: flex; align-items: center; gap: .6rem; font: 500 1.35rem/1.1 var(--f-sans); letter-spacing: -.01em; }
.visit__to [data-visit-place]{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* long typed areas ellipsize instead of clipping */
.visit__to .arr{ width: 14px; height: 14px; flex-shrink: 0; color: var(--brass-deep); transition: color .3s; }
.visit:hover .visit__to .arr, .visit:focus-visible .visit__to .arr{ color: var(--ink); } /* brass-deep vanishes on the brass hover */
.visit__copy{ font-size: 1rem; line-height: 1.45; color: rgba(15,14,13,.72); text-wrap: pretty; }
.visit__cta{ display: inline-flex; align-items: center; gap: .6rem; margin-top: auto; font: 500 var(--t-mono)/1 var(--f-mono); letter-spacing: .02em; }
.visit__cta .arr{ width: 11px; height: 11px; }

/* ==========================================================================
   Before / After — "rebuilt row by row": the after photo is cut into
   horizontal strips that wipe in bottom row first, alternating left/right,
   as the frame scrolls through view. See pages.js initRetile().
   ========================================================================== */
.bap{ padding-block: clamp(3rem, 5vw, 5rem); border-top: 1px solid var(--line); }
.bap__grid{ align-items: start; gap: clamp(1.5rem, 3vw, 2.5rem) 0; }
.bap__frame{
  grid-column: 1 / span 7; position: relative; aspect-ratio: 16/10; overflow: hidden;
  border-radius: var(--radius); background: var(--bg-3);
}
.bap__before, .bap__after-fallback{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bap__after-fallback{ display: none; }
.bap__rows{ position: absolute; inset: 0; }
.bap__row{ position: absolute; left: 0; width: 100%; background-repeat: no-repeat; }
.bap__peek{
  position: absolute; inset-inline-start: 1rem; bottom: 1rem; z-index: 2;
  background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.bap__peek[hidden]{ display: none; }
.bap__toggle{ position: absolute; inset-inline-start: 1rem; top: 1rem; z-index: 2; display: flex; gap: 2px; background: var(--glass); border-radius: var(--radius); padding: 3px; }
.bap__toggle button{ min-height: 44px; padding: 0 1rem; font: 500 var(--t-mono)/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; border-radius: 2px; color: var(--text-dim); }
.bap__toggle button[aria-pressed="true"]{ background: var(--cream); color: var(--ink); }
.bap__toggle[hidden]{ display: none; }
.bap__nojs-cap{ display: none; }
.no-js .bap__rows, .no-js .bap__toggle, .no-js .bap__peek{ display: none; }
.no-js .bap__frame{ height: auto; aspect-ratio: auto; display: grid; gap: 4px; }
.no-js .bap__before, .no-js .bap__after-fallback{ position: static; display: block; aspect-ratio: 16/10; }
.no-js .bap__nojs-cap{ display: block; padding: .5rem 0 0; }

.bap__ledger{ grid-column: 9 / -1; }
.bap__name{ font: 800 clamp(2rem, 1.4rem + 2.2vw, 3.25rem)/.92 var(--f-sans); text-transform: uppercase; letter-spacing: -.04em; margin-bottom: 1.25rem; }
.bap__facts{ display: grid; gap: .5rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.bap__facts div{ display: flex; justify-content: space-between; gap: 1rem; }
.bap__facts dt{ color: var(--text-dim); }
.bap__facts dd{ margin: 0; text-align: right; }
.bap__changes{ display: grid; gap: .85rem; }
.bap__changes li{ padding-top: .85rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.45; }
.bap__changes li:first-child{ border-top: 0; padding-top: 0; } /* the facts' bottom rule already separates them */
@media (max-width: 1100px){
  .visit{ grid-column: 1 / -1; min-height: 0; } /* the aside turns into a 2-col grid here; don't leave an empty cell beside the card */
}
@media (max-width: 900px){
  .bap__frame{ grid-column: 1 / -1; }
  .bap__ledger{ grid-column: 1 / -1; margin-top: 1.5rem; max-width: 36rem; }
}
@media (max-width: 620px){
  /* a compact centred pill, so it doesn't cover the bottom fifth of the photo */
  .bap__peek{ inset-inline-start: 50%; bottom: .5rem; transform: translateX(-50%); justify-content: center; min-height: 44px; padding-inline: 1.25rem; white-space: nowrap; }
  .bap__toggle{ inset-inline-start: .5rem; top: .5rem; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  .stack{ display: none; }
  .hero__title{ grid-column: 1 / -1; }
  .hero__lede{ grid-column: 1 / span 9; margin-top: 2rem; }
  .strip__social{ gap: 1.5rem; }
  .wwd__tldr{ grid-column: 1 / -1; }
  .wwd__col, .wwd__col--first{ grid-column: span 4; }
  .brief__form{ grid-column: 1 / span 12; }
  .brief__aside{ grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .spaces__intro .h2{ grid-column: 1 / -1; }
  .spaces__intro .lead{ grid-column: 1 / -1; }
  .spaces__intro .spaces__deckbtn{ grid-column: 1 / -1; justify-self: start; margin-top: 2rem; }
  .strip{ row-gap: .9rem; }
  .strip__a{ grid-column: 1 / span 6; } .strip__b{ grid-column: 7 / -1; justify-self: end; }
  .strip__clock{ grid-column: 1 / span 3; } .strip__film{ grid-column: 4 / span 3; } .strip__social{ grid-column: 7 / -1; }
  .voices__track{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); gap: var(--gutter); margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); scrollbar-width: none; }
  .voices__track::-webkit-scrollbar{ display: none; }
  .voice{ flex: 0 0 min(82%, 21rem); scroll-snap-align: start; scroll-snap-stop: always; }
  .voices__pager:not([hidden]){ display: flex; }
  .voices__head .h2{ grid-column: 1 / -1; } .voices__head .voices__nav{ display: none; }
  .culture__a{ grid-column: 1 / span 6; } .culture__b{ grid-column: 7 / span 6; margin-top: 20%; }
  .culture__big{ grid-column: 1 / -1; grid-row: auto; }
  .culture__a, .culture__b, .culture__txt, .culture__label{ grid-row: auto; }
  .culture__txt, .culture__label{ grid-column: 1 / -1; }
  .cta__grid .mega, .cta__call, .cta__side{ grid-column: 1 / -1; }
  .phero h1, .phero .phero__side{ grid-column: 1 / -1; }
  .phero .phero__side{ margin-top: 2rem; }
  .lightbox__img, .lightbox__info{ grid-column: 1 / -1; }
  .lightbox__img{ min-height: 40vh; }
  .lightbox__info > div:last-child{ position: sticky; bottom: -2rem; padding-block: .75rem 2rem; background: var(--bg); } /* arrows stay reachable while the text scrolls */
  .stat{ grid-column: 1 / -1; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
  .value h3{ grid-column: 2 / -1; } .value p{ grid-column: 2 / -1; margin-top: 1rem; }
  .mat{ grid-column: span 4; }
  .member{ grid-column: span 6; }
  .slide{ padding: 5rem 1.25rem 5.5rem; grid-template-rows: auto 1fr; row-gap: 1.5rem; overflow-y: auto; }
  .slide--intro .slide__h, .slide--intro .slide__txt, .slide--cta .slide__txt{ grid-column: 1 / -1; }
  .slide--space .slide__left, .slide--space.is-flip .slide__left{ grid-column: 1 / -1; grid-row: 2; }
  .slide--space{ grid-template-rows: max-content auto; } /* image row sized by its 4:3 box, text below it */
  .slide--space .slide__img, .slide--space.is-flip .slide__img{ grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4/3; }
  .slide__incl{ grid-template-columns: 1fr; }
  .deck__frame{ inset: .5rem; }
  .deck__thumbs{ position: absolute; left: 0; right: 0; bottom: 4.25rem; z-index: 6; width: auto; flex-direction: row; overflow-x: auto; margin: 0; padding: .5rem; transform: translateY(20px); opacity: 0; visibility: hidden; transition: opacity .35s, transform .45s var(--ease-out), visibility 0s .45s; }
  .deck.thumbs-open .deck__thumbs{ transform: none; opacity: 1; visibility: visible; transition: opacity .35s, transform .45s var(--ease-out); }
  .deck__thumbs button{ width: auto; grid-template-columns: 28px auto; gap: .75rem; }
  .slide--space .slide__left{ min-height: auto; } /* let the column size its row so the slide's bottom padding clears the controls */
}
@media (max-width: 620px){
  .hero__lede{ grid-column: 1 / -1; }
  .strip__clock{ display: none; }
  .strip__film{ grid-column: 1 / -1; }
  .strip__social{ grid-column: 1 / -1; justify-content: space-between; }
  .wwd__col, .wwd__col--first{ grid-column: 1 / -1; }
  .wwd__foot{ row-gap: 2.25rem; }
  .wwd__links{ display: grid; grid-template-columns: 1fr 1fr; margin: 2.5rem 0 2rem; }
  .wwd__links .btn{ justify-content: space-between; padding-inline: .85rem; letter-spacing: .03em; } /* "Kitchens & baths" stays on one line */
  .brief__aside{ grid-template-columns: 1fr; }
  .fields{ grid-template-columns: 1fr; }
  .member{ grid-column: 1 / -1; }
  .materials{ row-gap: 2rem; column-gap: .75rem; } /* 2 across, 3 rows: swatches, not a full screen each */
  .mat{ grid-column: span 6; gap: .5rem; }
  .mat h3{ font-size: 1rem; line-height: 1.1; letter-spacing: -.01em; margin-top: .25rem; }
  .mat p{ font-size: .875rem; line-height: 1.35; }
  .cta__side .btns .btn{ flex: 1 1 100%; justify-content: space-between; }
  .step__nav .btn{ flex: 1; justify-content: center; }
  .nav__cta{ grid-template-columns: 1fr; }
  .value h3{ font-size: clamp(1.6rem, .9rem + 4.5vw, 2.4rem); }
}
@media (max-width: 420px){
  .strip__social .dim{ display: none; }
  .strip__a, .strip__b{ grid-column: 1 / -1; justify-self: start; }
}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .strip__clock i{ animation: none; }
}

/* ==========================================================================
   Design Menu — components (menu.js)
   ========================================================================== */
.tag-sample{
  position: absolute; right: .6rem; bottom: .6rem; z-index: 3; padding: .3rem .45rem;
  background: rgba(15,14,13,.7); color: var(--cream); border-radius: 2px; font-size: .5625rem; pointer-events: none;
}
.tag-sample::before{ content: '[\00a0'; } .tag-sample::after{ content: '\00a0]'; }


/* how it works */
.how{ counter-reset: how; }
.how__row{ row-gap: 2rem; }
.how__step{ grid-column: span 3; border-top: 1px solid var(--line-strong); padding-top: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.how__step b{ font: 800 clamp(2.5rem, 1.5rem + 3vw, 4.5rem)/.85 var(--f-sans); letter-spacing: -.05em; color: var(--brass); }
.how__step h3{ font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.how__step p{ color: var(--text-dim); font-size: .98rem; }
.how__step h3, .how__step p{ transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
/* scroll-lit steps (core.js [data-steps]): a brass line fills across the steps; each lights up as it's reached */
.how__row[data-steps] .how__step{ position: relative; }
.how__row[data-steps] .how__step::before{
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass);
  transform-origin: left; transform: scaleX(var(--fill, 1));
}
.how__row[data-steps] .how__step b{ -webkit-text-stroke: 1px var(--brass); transition: color .5s; }
.how__row.steps-ready .how__step:not(.is-lit) b{ color: transparent; }
.how__row.steps-ready .how__step:not(.is-lit) h3, .how__row.steps-ready .how__step:not(.is-lit) p{ opacity: .35; }
.how__row.steps-ready .how__step:not(.is-lit) h3{ transform: translateY(.35rem); }
.how__row[data-steps] .how__step:hover h3{ color: var(--brass-soft); }

/* stacked style rows (homepage, menu.js renderRows) — Spaces + Elements */
.srow{ --rail-h: clamp(17rem, 11rem + 24vh, 32rem); border-top: 1px solid var(--line); }
.srows .srow:last-child{ border-bottom: 1px solid var(--line); }
.srow__h{ font: inherit; }
.srow__toggle{
  width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: start;
  padding-block: 1.5rem; text-align: left; position: relative; overflow: hidden; transition: background .4s var(--ease-out);
}
.srow__toggle:hover{ background: rgba(247,241,231,.03); }
.srow__name{ grid-column: 1 / span 3; display: flex; align-items: baseline; gap: .9rem; font-size: clamp(1.1rem, .9rem + .5vw, 1.25rem); letter-spacing: -.01em; }
.srow__meta{ grid-column: 4 / span 3; }
.srow__plus{ grid-column: 7 / span 1; transition: color .3s; }
.srow__toggle:hover .srow__plus, .srow.is-open .srow__plus{ color: var(--brass); }
/* collapsed: a drifting strip of every style */
.srow__thumbs{ grid-column: 8 / -1; height: 120px; overflow: hidden; transition: height .7s var(--ease-io), opacity .35s; }
.srow.is-open .srow__thumbs{ height: 0; opacity: 0; }
.srow__drift{ display: flex; gap: .5rem; height: 120px; will-change: transform; }
.srow__thumb{ height: 100%; aspect-ratio: var(--ar); flex-shrink: 0; border-radius: 2px; overflow: hidden; background: var(--bg-3); }
.srow__thumb img, .srow__thumb video{ width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 55%); filter: saturate(.85); transition: filter .6s; }
.srow__toggle:hover .srow__thumb img{ filter: saturate(1.05); }
.r-tall{ --ar: 4/5; --w: .8; } .r-wide{ --ar: 4/3; --w: 1.333; } .r-mid{ --ar: 1/1; --w: 1; }
/* open: intro + a rail of big cards bleeding off the right edge */
.srow__panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-io); }
.srow.is-open .srow__panel{ grid-template-rows: 1fr; }
.srow__inner{ min-height: 0; overflow: hidden; margin-right: calc(-1 * var(--margin)); }
.srow__top{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 1.25rem; align-items: start; margin-right: var(--margin); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.srow__deck{ grid-column: 1 / span 3; grid-row: 1; justify-self: start; }
.srow__intro{ grid-column: 8 / -1; grid-row: 1; font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem); line-height: 1.35; letter-spacing: -.01em; }
.srow__ai{ grid-column: 8 / -1; grid-row: 2; margin-top: -.5rem; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); } /* disclosure: small, but AA */
.srow__rail{
  display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-right: var(--margin); scrollbar-width: none; cursor: grab; position: relative;
}
.srow__rail::-webkit-scrollbar{ display: none; }
.srow__rail.is-dragging{ scroll-snap-type: none; cursor: grabbing; user-select: none; }
.srow__card{
  flex: 0 0 auto; width: calc(var(--rail-h) * var(--w)); scroll-snap-align: start; display: flex; flex-direction: column; gap: 1rem;
  opacity: 0; transform: translateX(3rem); transition: opacity .6s, transform 1s var(--ease-out);
}
.srow.is-open .srow__card{ opacity: 1; transform: none; transition-delay: calc(.2s + var(--i, 0) * 70ms); }
.srow__media{ display: block; width: 100%; height: var(--rail-h); position: relative; overflow: hidden; border-radius: 2px; background: var(--bg-3); }
.srow__media img, .srow__media video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 55%); transition: transform 1s var(--ease-out); -webkit-user-drag: none; }
.srow__media:hover img, .srow__media:focus-visible img{ transform: scale(1.04); }
.srow__rail.is-dragging .srow__media img{ transform: none; }
.srow__cap{ display: flex; flex-direction: column; gap: .7rem; padding-right: .5rem; }
@media (pointer: fine){ .srow__rail{ user-select: none; } }
.srow__capname{ display: flex; align-items: baseline; gap: .75rem; }
.srow__capname :is(h4, h5){ font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.srow__cap p{ font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srow__ctrl{ display: flex; align-items: center; gap: 1.25rem; margin-right: var(--margin); padding-block: 1.5rem 2rem; }
.srow__arrows{ display: flex; gap: .5rem; }
.srow__arrow{ width: 44px; height: 44px; background: transparent; border-color: var(--line-strong); }
.srow__arrow:disabled{ opacity: .3; cursor: default; background: transparent; color: var(--cream); }
.elements .srows{ margin-top: .5rem; }
@media (max-width: 900px){
  .srow{ --rail-h: clamp(15rem, 10rem + 22vh, 24rem); }
  .srow__toggle{ row-gap: 1rem; }
  .srow__name{ grid-column: 1 / span 10; }
  .srow__plus{ grid-column: 11 / -1; grid-row: 1; justify-self: end; }
  .srow__meta{ grid-column: 1 / -1; grid-row: 2; }
  .srow__thumbs{ grid-column: 1 / -1; height: 96px; }
  .srow__drift{ height: 96px; }
  .srow.is-open .srow__toggle{ row-gap: .5rem; }
  .srow__deck, .srow__intro{ grid-column: 1 / -1; }
  .srow__intro{ grid-row: 1; } .srow__deck{ grid-row: auto; } /* auto-placed: row 3 under the AI note, row 2 without one */
  .srow__ai{ grid-column: 1 / -1; grid-row: 2; margin-top: -.75rem; }
}
@media (max-width: 620px){
  .srow__card{ width: 78vw; }
  .srow__media{ height: auto; aspect-ratio: 4/5; }
}

/* elements (homepage) */
.elements{ padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--sec); }
.elements__head{ align-items: end; margin-bottom: 2.5rem; row-gap: 1.5rem; }
.elements__head .h2{ grid-column: 1 / span 7; }
.elements__head p{ grid-column: 8 / span 3; color: var(--text-dim); }
.elements__head .btn{ grid-column: 11 / -1; justify-self: end; }

/* pick (add to board) */
.pick{
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0 .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); align-self: flex-start;
  font: 400 var(--t-mono)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
  transition: background .3s, color .3s, border-color .3s;
}
.pick__ico{ width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-size: .7rem; line-height: 1; }
.pick:hover{ border-color: var(--cream); }
.pick[aria-pressed="true"]{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
.pick--lg{ min-height: 3.25rem; padding: 0 1.1rem; }
.slide--light .pick{ border-color: rgba(15,14,13,.45); }
.slide--light .pick:hover{ border-color: var(--ink); }
.slide--light .pick[aria-pressed="true"]{ border-color: var(--brass); }

/* deck: intro list + extras */
.slide--menu{ align-content: space-between; }
.slide--menu .slide__top{ grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 1.5rem; }
.slide--menu .slide__txt{ grid-column: 7 / -1; align-self: end; display: flex; flex-direction: column; gap: 1.25rem; }
.slide__styles{ border-top: 1px solid rgba(15,14,13,.2); }
.slide__mosaic{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; margin-top: auto; max-width: 30rem; }
.slide__mosaic button{ aspect-ratio: 1; overflow: hidden; border-radius: 2px; position: relative; }
.slide__mosaic img, .slide__mosaic video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 55%); transition: transform .8s var(--ease-out); }
.slide__mosaic button:hover img{ transform: scale(1.08); }
.slide--menu .slide__top{ min-height: 0; }
.slide--menu .slide__txt{ max-height: 100%; }
.slide__styles button{ display: grid; grid-template-columns: 2.25rem 1fr; width: 100%; text-align: left; padding: .6rem 0; border-bottom: 1px solid rgba(15,14,13,.2); font-size: 1.05rem; transition: padding .35s var(--ease-out), color .3s; }
.slide__styles button:hover{ padding-left: .5rem; color: var(--brass-deep); }
.slide__body{ display: flex; flex-direction: column; gap: 1.25rem; }
.slide__img .tag-sample{ right: .75rem; bottom: .75rem; }
.slide__img .tag-ai{ background: rgba(15,14,13,.72); color: rgba(247,241,231,.85); font-size: .6875rem; } /* AA over the brightest renders */
.slide__img{ background: var(--bg-3); } .slide__img img:not([src]){ visibility: hidden; } /* deferred, not loaded yet: no broken-image icon */
.slide video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck__board{ min-height: 48px; background: var(--glass); border-color: var(--line); }
.drawer__vid{ display: block; width: 28px; height: 28px; background: var(--bg-3); border-radius: 2px; }

/* board drawer */
.drawer{
  position: fixed; top: 1rem; right: 1rem; bottom: 1rem; z-index: 130; width: min(440px, calc(100% - 2rem));
  display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  transform: translateX(calc(100% + 2rem)); transition: transform .6s var(--ease-io); visibility: hidden;
}
.drawer.is-open{ transform: none; visibility: visible; }
.drawer-scrim{ position: fixed; inset: 0; z-index: 125; background: rgba(15,14,13,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.drawer-open .drawer-scrim{ opacity: 1; visibility: visible; transition: opacity .45s; }
.drawer__head{ display: flex; justify-content: space-between; align-items: center; padding: 1rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.drawer__title{ font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; }
.drawer__list{ flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; overscroll-behavior: contain; }
.drawer__group{ display: flex; flex-direction: column; gap: 4px; }
.drawer__item{ display: grid; grid-template-columns: 52px 1fr auto; gap: 1rem; align-items: center; padding: .5rem; background: var(--bg-3); border-radius: var(--radius); }
.drawer__item img, .drawer__item .drawer__vid{ width: 52px; height: 52px; object-fit: cover; border-radius: 2px; }
.drawer__item strong{ display: block; font-weight: 500; margin-top: .2rem; }
.drawer__rm{ padding: .5rem; color: var(--text-dim); }
.drawer__rm:hover{ color: var(--cream); text-decoration: underline; }
.drawer__empty{ display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.drawer__foot{ padding: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; font-size: .95rem; }
.drawer__btns{ display: flex; gap: .5rem; }
.drawer__btns .btn:first-child{ flex: 1; justify-content: space-between; }

/* board: corner card + floating button on small screens */
.card--board{ display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 .75rem; width: 100%; text-align: left; background: var(--brass); color: var(--ink); }
.boardfab{
  position: fixed; right: 1rem; bottom: 1rem; z-index: 95; display: none; align-items: center; gap: .75rem;
  height: 50px; padding: 0 1rem; border-radius: var(--radius); background: var(--brass); color: var(--ink);
  font: 400 var(--t-mono)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
  transition: opacity .4s, transform .5s var(--ease-out);
}
.boardfab[data-hidden="true"]{ opacity: 0; transform: translateY(150%); pointer-events: none; }

/* toast */
.toast{
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 140; transform: translate(-50%, 180%);
  padding: .9rem 1.1rem; background: var(--cream); color: var(--ink); border-radius: var(--radius);
  transition: transform .55s var(--ease-out); max-width: calc(100% - 2rem); text-align: center;
}
.toast.is-on{ transform: translate(-50%, 0); }

/* full menu page */
.mtabs{
  position: sticky; top: 4.6rem; z-index: 70; margin: 0 var(--margin) 2rem; display: flex; gap: .5rem; align-items: center;
  padding: .4rem; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: var(--radius);
}
.mtabs__filters{ display: flex; gap: 4px; flex-shrink: 0; }
@media (min-width: 1101px){ .mtabs{ margin-right: calc(160px + 1rem + 1rem); } }
.mtabs .filter{ height: 2.25rem; border-color: transparent; }
.mtabs__jump{ display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-left: 1px solid var(--line); padding-left: .5rem; }
.mtabs__jump::-webkit-scrollbar{ display: none; }
/* 17 categories overflow on phones: fade the right edge until the bar is scrolled to its end (menu.js sets .is-end) */
.mtabs__jump:not(.is-end){ -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.mtabs__link{ flex-shrink: 0; height: 2.25rem; display: inline-flex; align-items: center; padding: 0 .8rem; border-radius: 2px; font-size: .9rem; color: var(--text-dim); transition: background .3s, color .3s; }
.mtabs__link:hover{ color: var(--cream); }
.mtabs__link.is-on{ background: var(--bg-3); color: var(--cream); }
.mtabs__link[hidden]{ display: none; }
.mgroup{ padding-top: var(--sec); padding-bottom: 1rem; display: flex; flex-direction: column; gap: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.mcat{ display: contents; } /* bars + shelves become siblings, so a stuck bar outlives its own section */
.mcat[hidden]{ display: none; }
/* category bar: sticky, piling up under the tabs 7px apart (JS sets --pile-top and --k) */
.mbar{
  position: sticky; top: calc(var(--pile-top, 8rem) + var(--k, 0) * var(--step, 7px)); z-index: 20;
  display: grid; grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto; align-items: center; gap: 1.25rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: .9rem var(--margin); min-height: 4.25rem;
  background: var(--bg); border-top: 1px solid var(--line-strong);
  transition: top .45s var(--ease-out), background .3s, border-color .3s;
}
.mbar.is-stuck{ cursor: pointer; }
/* fanned pile: every stuck bar drops to its own row so its name can be read and picked */
.pile-open .mbar.is-stuck{ z-index: 25; } /* fanned bars rise above the next bar still scrolling in */
.pile-open .mbar.is-stuck{ top: calc(var(--pile-top, 8rem) + var(--k, 0) * var(--fan, 3.1rem)); } /* menu.js shrinks --fan so the fan fits the screen */
.pile-open .mbar.is-stuck:hover{ background: var(--bg-2); }
/* fanned bars read as a list: one-line name pinned to the top edge, the rest hidden. Same total
   height (padding moves, nothing is removed), so the page below never shifts. */
.pile-open .mbar.is-stuck{ align-items: start; padding-top: .55rem; padding-bottom: 1.25rem; }
.pile-open .mbar.is-stuck > :not(.mbar__n):not(.mbar__name){ visibility: hidden; }
.pile-open .mbar.is-stuck .mbar__name{ font-size: clamp(1.1rem, .9rem + .6vw, 1.45rem); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pile-open .mbar.is-stuck .mbar__n{ padding-top: .2rem; }
/* short screens: tighter still */
.fan-tight.pile-open .mbar.is-stuck{ padding-top: .2rem; padding-bottom: 1.2rem; }
.fan-tight.pile-open .mbar.is-stuck .mbar__name{ font-size: .95rem; line-height: 1.2; }
.fan-tight.pile-open .mbar.is-stuck .mbar__n{ padding-top: 0; }
.pile-open .mbar.is-stuck:hover .mbar__name{ color: var(--brass-soft); }
.mbar__name{ font-size: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.mbar__intro{ font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mbar__count{ font-size: var(--t-mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.mbar__deck{ white-space: nowrap; height: auto; padding: .6rem 0; border: 0; background: none; color: var(--text-dim); transition: color .3s; }
.mbar__deck:hover, .mbar__deck:focus-visible{ color: var(--brass-soft); background: none; }
.mbar__deck::before{ display: none; } /* no cream fill wipe: it's a text link here */
/* the bottom bar of the pile carries a solid cap over the strip between the tabs and the pile, so
   nothing peeks through (the bars above it fill the rest). Stops 1px short so its brass edge shows. */
.mbar.is-base::before{
  content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--pile-top, 8rem) - 1px); height: var(--pile-top, 8rem);
  background: var(--bg); pointer-events: none; z-index: -1;
}
.mbar.is-stuck{ border-top-color: rgba(196,161,92,.55); }
.mgroup + .mbar{ margin-top: 1.5rem; }
/* the shelf: one horizontal rail per category (cards from the homepage rows) */
.mshelf{ --rail-h: clamp(15rem, 9rem + 20vh, 26rem); padding-top: 1.5rem; }
.mshelf__in{ margin-left: var(--margin); will-change: transform, opacity; }
.mshelf .srow__card{ opacity: 1; transform: none; }
.mshelf .tag-sample{ display: none; }
.mbar__sample{ grid-column: 2 / -1; margin-top: -.6rem; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); } /* disclosure: small, but AA */
@media (max-width: 620px){ .mbar__sample{ grid-column: 1 / -1; margin-top: -.3rem; } }
.mshelf .srow__rail{ padding-right: var(--margin); }
@media (max-width: 1100px){
  .mbar{ grid-template-columns: 2.25rem minmax(0, 1fr) auto auto; }
  .mbar__intro{ display: none; }
}
@media (max-width: 620px){
  .mbar{ grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .75rem; padding: .7rem var(--margin); min-height: 3.5rem; }
  .mbar__count{ display: none; }
  .mbar__decklabel{ display: none; }
  .mbar__deck{ padding-inline: .9rem; }
  .mbar{ --step: 4px; }
  .mshelf{ --rail-h: auto; }
  /* .pile-open's padding-top/bottom (.55rem + 1.25rem = 1.8rem) was tuned to match the desktop
     bar's own 1.8rem (.9rem top and bottom); at this width the base bar padding above is only
     1.4rem total, so fanning made every bar 6-7px taller than its own collapsed height. Since
     .mcat is display:contents, that per-bar growth cascades across all the piled siblings sharing
     root, and was enough to push categories further down the DOM out of their pile-engagement
     window the moment the fan opened (menu.html bug report). Match the total here too.
  */
  .pile-open .mbar.is-stuck{ padding-top: .45rem; padding-bottom: .95rem; }
}

/* contact: board summary */
.boardbox{ padding: 1.25rem; background: var(--bg-2); border-radius: var(--radius); margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.boardbox__head{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.boardlist{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.boardlist li{ padding: .6rem .75rem; background: var(--bg-3); border-radius: 2px; }
.boardlist strong{ display: block; font-weight: 500; margin-top: .2rem; }
.opts--cats .opt span{ min-height: 2.75rem; font-size: .95rem; }
.opts-group{ margin-bottom: 1.75rem; }
.opts-group > .mono{ display: block; margin-bottom: .9rem; }

/* contact: "Your space" photo slots (pages.js initSpacePhotos) */
.shots__intro{ max-width: 52ch; margin: -1.25rem 0 2rem; }
.shots{ display: flex; flex-direction: column; gap: 4px; }
.shots__private{ margin-top: 1rem; }
.shot{
  display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "text add" "tiles tiles";
  column-gap: 1.25rem; padding: 1rem 1.25rem; background: var(--bg-2); border-radius: var(--radius);
}
.shot__text{ grid-area: text; min-width: 0; }
.shot__name{ display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
.shot.has-photo .shot__name::before{ content: ''; width: 8px; height: 8px; border-radius: 1px; background: var(--brass); flex: none; }
.shot__hint{ margin-top: .2rem; }
.shot__status{ margin-top: .45rem; font-size: 1rem; }
html:not(.js) .step[data-step="photos"]{ display: none; } /* needs JS to upload */
.shot__status:empty{ display: none; }
.shot__status.is-err{ color: #E9967A; }
.shot__add{ grid-area: add; align-self: start; cursor: pointer; }
.shot__add input{ position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.shot__add:focus-within{ outline: 2px solid var(--brass); outline-offset: 3px; }
.shot__add[hidden]{ display: none; }
.shot__tiles{ grid-area: tiles; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.shot__tiles:empty{ display: none; }
.shot__tile{
  position: relative; width: 7.5rem; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--bg-3);
  animation: shot-in .45s var(--ease-out) both; transition: opacity .2s var(--ease-out);
}
.shot__tile img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s var(--ease-out); }
.shot__tile.is-uploading img, .shot__tile.is-failed img{ opacity: .45; }
.shot__tile.is-leaving{ opacity: 0; }
@keyframes shot-in{ from{ clip-path: inset(100% 0 0 0); } to{ clip-path: inset(0); } }
.shot__bar{ position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.shot__bar i{ position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.shot__tile:not(.is-uploading) .shot__bar{ display: none; }
.shot__tile .tag-sample{ left: .4rem; right: auto; bottom: .4rem; }
.shot__tile:not(.is-done) .tag-sample{ display: none; }
.shot__x{ position: absolute; top: 0; right: 0; z-index: 4; width: 44px; height: 44px; color: var(--cream); }
.shot__x::before{ content: ''; position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: var(--glass); }
.shot__x svg{ position: absolute; top: 15px; right: 15px; width: 10px; height: 10px; }
.shot__x:focus-visible{ outline: 2px solid var(--brass); outline-offset: -4px; }
.shot__noprev{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.shot__retry{
  position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center;
  background: rgba(15,14,13,.6); color: var(--cream); font: 400 var(--t-mono)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
}
.shot__tile.is-failed .shot__retry{ display: flex; align-items: flex-end; padding-bottom: .6rem; } /* label clear of the remove corner on small tiles */
.shot__retry:focus-visible{ outline: 2px solid var(--brass); outline-offset: -2px; }
@media (max-width: 620px){
  .shot{ grid-template-columns: minmax(0,1fr); grid-template-areas: "text" "tiles" "add"; }
  .shot__add{ margin-top: 1rem; justify-content: space-between; }
  .shot__tiles{ display: grid; grid-template-columns: repeat(3, 1fr); }
  .shot__tile{ width: auto; }
}
@media (max-width: 359px){ .shot__tiles{ grid-template-columns: repeat(2, 1fr); } } /* keeps the tile centre clear of the 44px remove corner */
@media (prefers-reduced-motion: reduce){ .shot__tile{ animation: none; } }

@media (max-width: 1100px){
  .boardfab{ display: inline-flex; }
  .elements__head .h2{ grid-column: 1 / -1; } .elements__head p{ grid-column: 1 / span 8; } .elements__head .btn{ grid-column: 9 / -1; }
  .how__step{ grid-column: span 6; }
}
@media (max-width: 900px){
  .slide--menu .slide__top, .slide--menu .slide__txt{ grid-column: 1 / -1; }
  .slide--menu .slide__mosaic{ max-width: none; } /* tablets: fill the width above the full-width list */
  /* max-content, not auto: the intro is taller than a phone, and auto rows then shrink to
     their min-height: 0 and the list draws over the heading + mosaic */
  .slide--menu{ grid-template-rows: max-content max-content; align-content: start; }
  .slide--menu .slide__txt{ max-height: none; }
  .deck__board{ display: none; }
  .mtabs{ top: 4.4rem; flex-direction: column; align-items: stretch; margin-inline: .5rem; }
  .mtabs__jump{ border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: .4rem; }
}
@media (max-width: 620px){
  .elements__head p, .elements__head .btn{ grid-column: 1 / -1; justify-self: start; }
  .how__step{ grid-column: 1 / -1; }
  .boardlist{ grid-template-columns: 1fr; }
  .drawer{ top: auto; left: .5rem; right: .5rem; bottom: .5rem; width: auto; max-height: 85svh; transform: translateY(calc(100% + 2rem)); }
}

/* ---------- inner-page bits ---------- */
.map{ display: block; border-radius: var(--radius); }
.map img{ filter: grayscale(.4) brightness(.85); transition: filter .4s; }
.map:hover img{ filter: none; }
.stats{ margin-top: var(--sec); }
.hscroll{ padding-bottom: var(--sec); }
.hscroll .how__head{ margin-bottom: 3rem; }
@media (max-width: 900px){
  .stagecard{ width: 80vw; min-height: 0; }
  .phero{ min-height: 60svh; padding-top: 8rem; }
  [style*="grid-column:1 / span 6"], [style*="grid-column:8 / span 5"]{ grid-column: 1 / -1 !important; }
}

/* short laptop screens: drop the decorative intro mosaic (declared last so it beats the base rule) */
@media (min-width: 901px) and (max-height: 700px){ .slide--menu .slide__mosaic{ display: none; } }

/* ==========================================================================
   About page — interactive layer (pages.js)
   ========================================================================== */
/* Door hero: the photo sits in an arched doorway that opens to full screen as you scroll (pinned) */
.ahero{ position: relative; height: 100svh; min-height: 34rem; overflow: hidden; isolation: isolate; }
.ahero__door{
  position: absolute; inset: 0; z-index: -1; background: var(--bg-3);
  /* no-JS / reduced-motion resting shape; pages.js replaces it with the measured slot */
  clip-path: inset(9rem var(--margin) 3rem 58% round 18vw 18vw 0 0);
}
.ahero__door::after{ content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(15,14,13,.55); opacity: var(--shade, 0); }
.ahero__media{ position: absolute; inset: 0; transform-origin: 0 0; } /* pages.js scales it into the closed arch on phones */
.ahero__canvas, .ahero__fallback{ position: absolute; inset: 0; width: 100%; height: 100%; }
.ahero__fallback{ background-size: cover; background-position: center; filter: brightness(.62) saturate(.9); }
.ahero__inner{ position: relative; height: 100%; padding-top: clamp(7rem, 6rem + 3vw, 9rem); padding-bottom: clamp(2rem, 4vw, 3rem); grid-template-rows: 1fr auto; pointer-events: none; }
.ahero__copy{ grid-column: 1 / span 6; grid-row: 1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.25rem, 2.5vw, 2rem); }
.ahero__copy .lead{ max-width: 34rem; color: var(--text-dim); }
.ahero__slot{ grid-column: 8 / -1; grid-row: 1 / span 2; }
.ahero__cue{ grid-column: 1 / span 6; grid-row: 2; padding-top: 2rem; font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.ahero__inside{
  position: absolute; inset: 0 var(--margin); margin-block: auto; height: fit-content; /* centred without transforms: GSAP animates yPercent freely */
  text-align: center; font-size: clamp(2rem, 1rem + 4vw, 5.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1;
  opacity: 0; visibility: hidden; pointer-events: none; text-wrap: balance;
}
@media (max-width: 900px){
  .ahero{ height: auto; min-height: 100svh; } /* grows with its text on small phones instead of clipping it */
  .ahero__inner{ height: auto; min-height: inherit; grid-template-rows: minmax(12rem, 1fr) auto auto; padding-top: 6.5rem; }
  .ahero__slot{ grid-column: 1 / -1; grid-row: 1; margin-bottom: 1.5rem; }
  .ahero__copy{ grid-column: 1 / -1; grid-row: 2; }
  .ahero__cue{ grid-column: 1 / -1; grid-row: 3; padding-top: 1.25rem; }
  .ahero__door{ clip-path: inset(6.5rem var(--margin) 55% var(--margin) round 45vw 45vw 0 0); }
  .ahero__slot{ justify-self: center; aspect-ratio: 4 / 5; max-width: 100%; }
  .ahero__cue{ color: var(--text-dim); }
  .ahero__door::after{ background: rgba(15,14,13,.65); } /* the photo's lit arch lands right behind the centred line */
  .ahero__inside{ font-size: clamp(2rem, 1.2rem + 3.6vw, 2.5rem); line-height: 1.02; max-width: 12ch; margin-inline: auto; text-shadow: 0 2px 24px rgba(15,14,13,.5); }
  .ahero__inside br{ display: none; }
}
/* phones tall enough to pin: arch + copy in exactly one screen, the arch taking whatever height is left
   (the 900px / 500px breakpoints mirror initDoor's gsap.matchMedia in pages.js; change them together) */
@media (max-width: 900px) and (min-height: 500px){
  .ahero{ height: 100svh; min-height: 0; }
  .ahero__inner{ height: 100%; grid-template-rows: minmax(0, 1fr) auto auto; row-gap: 1.25rem; padding-top: 5.25rem; padding-bottom: 1rem; }
  .ahero__slot{ height: 100%; min-height: 0; margin: 0; }
  .ahero__copy{ gap: .75rem; }
  .ahero__copy .display{ font-size: clamp(2.4rem, 1.4rem + 5.2vw, 3rem); }
  .ahero__copy .lead{ font-size: 1rem; line-height: 1.4; }
  .ahero__cue{ padding-top: 0; }
  body:has(.boardfab[data-hidden="false"]) .ahero__copy{ padding-bottom: 2.5rem; } /* lead clears the My board button; the arch row gives up the space */
}
@media (min-width: 621px) and (max-width: 900px) and (min-height: 500px){
  .ahero__copy .display{ font-size: clamp(3rem, 1rem + 6vw, 4.5rem); } /* tablets: the arch is big, the headline keeps up */
}
/* short pinned phones (iPhone SE class): tighten the copy so the cue still fits on screen */
@media (max-width: 900px) and (min-height: 500px) and (max-height: 620px){
  .ahero__inner{ padding-top: 4.75rem; row-gap: .9rem; padding-bottom: .75rem; }
  .ahero__copy{ gap: .5rem; }
  .ahero__copy .display{ font-size: clamp(2rem, 1.2rem + 4.4vw, 2.6rem); }
  .ahero__copy .lead{ font-size: .9375rem; line-height: 1.35; }
}
/* landscape / very short phones: no pin, a small arch above the copy */
@media (max-width: 900px) and (max-height: 499px){
  .ahero__slot{ height: 11rem; }
  .ahero__cue{ display: none; } /* nothing opens here */
}

/* Photos never blow up past their real resolution (the source files are ~1120px wide) */
.culture__big{ width: 100%; max-width: 42rem; justify-self: end; }
@media (max-width: 900px){ .culture__big{ justify-self: center; } }
.culture__big--arch{ border-radius: 0; }
@media (min-width: 1600px){ .mat{ grid-column: span 2; } } /* six across on big monitors: 800px swatches stay sharp */

/* Scroll-lit lists: a brass line fills each item's top edge in turn and the item brightens */
.stats[data-steps] .stat, .values[data-steps] .value{ position: relative; }
.stats[data-steps] .stat::before, .values[data-steps] .value::before{
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass);
  transform-origin: left; transform: scaleX(var(--fill, 1));
}
.stats[data-steps] .stat > *, .values[data-steps] .value > *{ transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .4s; }
.stats.steps-ready .stat:not(.is-lit) > *, .values.steps-ready .value:not(.is-lit) > *{ opacity: .28; }
.values.steps-ready .value:not(.is-lit) h3{ transform: translateX(-.6rem); }
.stat b{ transition: color .4s; }
.stat:hover b, .stat.is-counting b{ color: var(--brass-soft); }
/* values: a soft fill sweeps across the row under the cursor, the line brightens */
.value{ isolation: isolate; }
.value::after{
  content: ''; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--bg-2);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out);
}
.value:hover::after{ transform: none; }
.value:hover p{ color: var(--cream); }
.value p{ transition: color .4s, opacity .6s var(--ease-out); }

/* Process: progress rule under the heading while the track is pinned */
.hscroll__bar{ display: none; }
.hscroll.is-pinned .hscroll__bar{ display: block; margin-bottom: 2.5rem; }
.hscroll__bar::before{ content: ''; display: block; height: 1px; background: var(--line); }
.hscroll__bar i{ display: block; height: 2px; margin-top: -1.5px; background: var(--brass); transform-origin: left; transform: scaleX(0); }

/* Material swatches tilt toward the cursor with a soft sheen */
.pic[data-tilt]{ transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--ease-out); }
.pic[data-tilt]::after{
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(247,241,231,.22), transparent 55%);
}
.pic[data-tilt].is-tilting{ transition-duration: .15s; }
.pic[data-tilt].is-tilting::after{ opacity: 1; }

/* ==========================================================================
   Contact — "renovate this page" hero (pages.js initReno)
   --pos is how far the renovation line has swept (0% = all "before")
   ========================================================================== */
.reno{ position: relative; }
.reno__stage{ --pos: 0%; position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.reno__after{ min-height: 100svh; padding-top: 9rem; display: flex; flex-direction: column; justify-content: flex-end; }
.reno__after .phero__row{ padding-bottom: clamp(5rem, 8vw, 7rem); }
.reno__head{ grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 1.5rem; }
.reno__head .label{ color: var(--brass); }
.reno__after .phero__side{ grid-column: 9 / -1; display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; }
.reno__after .phero__side .lead{ color: var(--text-dim); }

/* the renovated room behind the wipe: a brass floor plan that draws itself. --p (0..1, written by
   initReno next to --pos) scrubs it: walls draw first, then dimensions, then the YOUR SPACE label
   fades in over the last stretch. Defaults to 1 so no-JS / reduced motion show it fully drawn.
   In flow, not a full-bleed layer behind the text: it sits in its own box directly above the
   heading (.reno__after is already a flex column ending in the heading + lead), so it never needs
   a fade mask and never sits under the floating nav pill / board cards. */
.reno__stage{ --p: 1; }
.reno__bg{ position: relative; flex: 1 1 0; min-height: 0; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; pointer-events: none; }
.reno__plan{ position: absolute; inset: 0; width: 100%; height: 100%; }
.reno__plan-wall{ stroke: rgba(196,161,92,.30); stroke-width: 1.1; }
.reno__plan-door{ stroke: rgba(196,161,92,.20); stroke-width: .8; }
.reno__plan-dim{ stroke: var(--text-faint); stroke-width: .8; }
.reno__plan-wall, .reno__plan-door, .reno__plan-dim{ stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
/* no vector-effect: non-scaling-stroke — it makes Chrome apply the pathLength=1 dash in screen
   pixels rather than user units, so at desktop's >1x CTM the dash falls short and the plan never
   finishes drawing. Stroke widths above are viewBox units instead, scaling normally with the SVG. */
.reno__plan-label, .reno__plan-dimtext, .reno__plan-yourspace{ text-anchor: middle; }
.reno__plan-label{ font: 500 11px/1 var(--f-mono); letter-spacing: .08em; fill: var(--text-faint); opacity: var(--p); }
.reno__plan-dimtext{ font: 400 10px/1 var(--f-mono); letter-spacing: .06em; fill: var(--text-faint); opacity: var(--p); }
.reno__plan-room{ fill: var(--brass); opacity: calc(.06 * var(--p)); }
.reno__plan-yourspace{
  font: 700 15px/1 var(--f-mono); letter-spacing: .1em; fill: var(--brass);
  opacity: calc(max(0, var(--p) - .85) / .15); /* fades in only over the last 15% of the draw */
}
.reno:not(.is-done) .reno__plan-wall, .reno:not(.is-done) .reno__plan-door, .reno:not(.is-done) .reno__plan-dim{ will-change: stroke-dashoffset; }
@media (prefers-reduced-motion: reduce){
  .reno__plan-wall, .reno__plan-door, .reno__plan-dim{ stroke-dashoffset: 0; }
  .reno__plan-label, .reno__plan-dimtext{ opacity: 1; }
  .reno__plan-room{ opacity: .06; } /* not 1: the room is a faint tint, not a solid fill, even fully "drawn" */
  .reno__plan-yourspace{ opacity: 1; }
}

/* the 2004 page (colours are deliberately off-palette: that's the joke) */
.reno__before{
  position: absolute; inset: 0; z-index: 2; clip-path: inset(0 0 0 var(--pos)); pointer-events: none; user-select: none;
  background: #FFFFCC repeating-linear-gradient(45deg, transparent 0 22px, rgba(0,0,128,.04) 22px 24px);
  color: #000; font: 16px/1.35 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', cursive;
  padding: clamp(5.5rem, 4rem + 4vw, 7rem) clamp(1rem, 4vw, 4rem) 2rem;
}
.y2k{ max-width: 62rem; margin: 0 auto; min-height: min(60vh, 38rem); display: flex; flex-direction: column; border: 3px ridge #808080; background: #FFFFEE; box-shadow: 6px 6px 0 #000080; }
.y2k__marquee{ overflow: hidden; white-space: nowrap; background: #000080; color: #FFFF00; font: bold 15px/2 'Times New Roman', Times, serif; }
.y2k__marquee span{ display: inline-block; padding-left: 100%; animation: y2k-marquee 18s linear infinite; }
@keyframes y2k-marquee{ to{ transform: translateX(-100%); } }
.y2k__body{ display: grid; grid-template-columns: 11rem 1fr; flex: 1; }
.y2k__nav{ display: flex; flex-direction: column; gap: .35rem; padding: 1rem; background: #008080; color: #fff; border-right: 3px ridge #808080; font-family: 'Times New Roman', Times, serif; position: relative; }
.y2k__nav b{ font-size: 18px; letter-spacing: .1em; margin-bottom: .3rem; }
.y2k__nav a{ color: #FFFF66; text-decoration: underline; }
.y2k__nav a.v{ color: #FF99FF; }
.y2k__new{ position: absolute; right: -.9rem; top: 2.4rem; transform: rotate(18deg); background: #FF0000; color: #FFFF00; font: bold 12px/1 Arial, sans-serif; padding: .3rem .4rem; animation: y2k-blink 1s steps(1) infinite; }
@keyframes y2k-blink{ 50%{ opacity: 0; } }
.y2k__main{ padding: 1.2rem 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.y2k__title{
  font: bold clamp(2.2rem, 1.2rem + 3vw, 3.6rem)/1 Impact, 'Arial Black', sans-serif; font-style: italic; letter-spacing: .02em;
  background: linear-gradient(90deg, #FF0000, #FF9900, #FFFF00, #33CC33, #3399FF, #9933FF); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 #000080); transform: skewX(-8deg) rotate(-2deg); transform-origin: left;
}
.y2k__cons span{
  display: inline-block; padding: .35rem .8rem; font: bold 14px/1 Arial, sans-serif; letter-spacing: .12em; color: #000; background: #FFCC00;
  border: 7px solid transparent; border-image: repeating-linear-gradient(-45deg, #FFCC00 0 8px, #000 8px 16px) 7;
}
.y2k__form{ display: grid; gap: .5rem; max-width: 26rem; padding: .8rem; border: 2px inset #C0C0C0; background: #F0F0F0; font-family: Arial, sans-serif; font-size: 14px; }
.y2k__form label{ display: grid; grid-template-columns: 5rem 1fr; align-items: start; gap: .5rem; }
.y2k__in{ display: block; height: 1.4rem; background: #fff; border: 2px inset #C0C0C0; }
.y2k__in--tall{ height: 3.6rem; }
.y2k__btns{ display: flex; gap: .4rem; padding-left: 5.5rem; }
.y2k__btn{ padding: .2rem .8rem; background: #C0C0C0; border: 2px outset #fff; font-size: 13px; }
.y2k__small{ font: 11px/1.4 'Times New Roman', Times, serif; color: #000080; }
.y2k__count{ display: inline-block; padding: 0 .25rem; background: #000; color: #33FF33; font: bold 12px/1.4 'Courier New', monospace; letter-spacing: .15em; }

/* the instruction: sits right under the fake window (in normal flow, not pinned to
   a screen corner), swept away with the joke as the renovation line passes — see
   the "renovate" cue brief. Same pill shape and shadow as .reno__handle: it's the
   same control, just explained. */
.reno__cue{
  display: flex; align-items: center; gap: .65rem; width: fit-content; margin: 1.5rem auto 0;
  height: 2.75rem; padding: 0 1.1rem 0 .95rem; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--cream); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font: 400 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.reno__cue:hover{ background: var(--brass); color: var(--ink); }
.reno__cue:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; }
.reno__cue svg{ width: 12px; height: 12px; color: var(--brass); flex-shrink: 0; animation: reno-cue-bob 1.1s ease-in-out infinite alternate; }
.reno__cue:hover svg{ color: var(--ink); }
@keyframes reno-cue-bob{ to{ transform: translateY(3px); } }
@keyframes reno-cue-nudge{ to{ transform: translateX(4px); } }
/* desktop scrolls it (down arrow); phones swipe it sideways (right arrow) */
.reno__cue-short, .reno__cue-right{ display: none; }

/* the renovation line, its dust, the handle and the progress meter */
.reno__line{ position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: var(--brass); pointer-events: none; box-shadow: 0 0 0 1px rgba(15,14,13,.3); }
.reno__dust{
  position: absolute; top: 0; bottom: 0; left: 1px; width: clamp(3rem, 6vw, 6rem); pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(247,241,231,.35) 0 1.5px, transparent 2px) 0 0 / 14px 17px,
    radial-gradient(circle at 60% 70%, rgba(196,161,92,.4) 0 1px, transparent 1.5px) 0 0 / 11px 13px,
    linear-gradient(90deg, rgba(247,241,231,.18), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent);
  animation: reno-dust 1.6s linear infinite;
}
@keyframes reno-dust{ to{ background-position: 0 -34px, 0 26px, 0 0; } }
.reno.is-done .reno__line, .reno.is-done .reno__dust{ opacity: 0; transition: opacity .6s; }
.reno__handle{
  position: absolute; z-index: 4; top: 50%; left: clamp(4.5rem, var(--pos), calc(100% - 4.5rem)); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .6rem; height: 2.75rem; padding: 0 1rem; border-radius: 999px;
  background: var(--brass); color: var(--ink); cursor: grab; touch-action: none; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: background .3s, left .5s var(--ease-out), top .5s var(--ease-out);
}
.reno__handle:active{ cursor: grabbing; }
.reno__handle svg{ width: 16px; height: 16px; }
.reno__handle .mono{ font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.reno__handle:hover{ background: var(--brass-soft); }
.reno:not(.is-done) .reno__handle{ transition: background .3s; } /* follow the line exactly while it moves */
.reno.is-done .reno__handle{ top: auto; bottom: 1.5rem; left: auto; right: var(--margin); transform: none; }
.reno__meter{
  position: absolute; z-index: 4; left: var(--margin); bottom: 1.5rem; display: flex; align-items: center; gap: 1rem;
  padding: .55rem .8rem; background: var(--glass); color: var(--cream); border-radius: var(--radius); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out);
}
.reno.is-started .reno__meter{ opacity: 1; }
/* it's aria-hidden narration, never interactive — never let it catch a tap over the real CTA below it */
.reno.is-done .reno__meter{ opacity: 0; transition: opacity .6s var(--ease-out) 1.4s; }
.reno__meter b{ color: var(--brass); font-weight: 400; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px){
  .reno__after .reno__head, .reno__after .phero__side{ grid-column: 1 / -1; }
  .reno__after .phero__side{ margin-top: 1.5rem; }
  /* phones: a fixed-height crop instead of a flexed box (the available space above the heading
     varies too much to size type against), cropped to KITCHEN + YOUR SPACE — the focal room needs
     to read on a small screen. The plan's own width is fixed at its natural (uncropped) size for
     that height, wider than .reno__bg itself, so the right-anchored overflow:hidden clips the
     left rooms off instead of shrinking everything down to illegible type. */
  .reno__bg{ flex: 0 0 auto; height: 16rem; }
  /* right: pulls the crop past the plan's own empty right margin (viewBox 860-900) so KITCHEN's
     label and its dimension text aren't sliced off at the crop edge; -38 not -40 so the right
     wall's stroke isn't half-clipped */
  .reno__plan{ inset: 0 0 0 auto; left: auto; width: calc(16rem * 900 / 340); right: calc(-38 * 16rem / 340); max-width: none; } /* the global "svg{max-width:100%}" reset would otherwise clamp this back down */
  .reno__plan-label{ font-size: 18px; }
  .reno__plan-dimtext{ font-size: 15px; }
  .reno__plan-yourspace{ font-size: 22px; }
  .reno__plan-wall{ stroke-width: 1.6; }
  .reno__plan-door{ stroke-width: 1.3; }
  .reno__plan-dim{ stroke-width: 1.1; }
  .y2k{ min-height: min(52vh, 32rem); }
  .y2k__body{ grid-template-columns: 1fr; }
  .y2k__nav{ flex-direction: row; flex-wrap: wrap; gap: .3rem .8rem; border-right: 0; border-bottom: 3px ridge #808080; }
  .y2k__nav b{ width: 100%; margin: 0; }
  .y2k__new{ right: .6rem; top: .6rem; }
  .reno__cue-long, .reno__cue-down{ display: none; }
  .reno__cue-short{ display: inline; }
  .reno__cue-right{ display: block; animation-name: reno-cue-nudge; }
  /* phones: a sideways swipe drives the line, vertical scrolling stays native.
     The old page owns the whole first screen: window + cue centred, nothing of the brief peeking in */
  .reno__stage{ touch-action: pan-y pinch-zoom; min-height: 100svh; }
  .reno__after{ min-height: 100svh; }
  /* auto margins, not justify-content: center, so a window taller than the stage (landscape) clips at the bottom, never under the nav */
  .reno__before{ display: flex; flex-direction: column; padding-bottom: 1.25rem; }
  .y2k, .reno__cue{ flex-shrink: 0; } .y2k{ width: 100%; margin-top: auto; } .reno__cue{ margin-bottom: auto; }
  .reno.is-done .reno__handle{ display: none; }
  .brief .progress{ padding-top: 1rem; } /* give the step header air off the section edge */
}
/* smallest phones: shrink the plan crop further so YOUR SPACE still fits without going illegible */
@media (max-width: 374px){
  .reno__bg{ height: 13rem; }
  .reno__plan{ width: calc(13rem * 900 / 340); right: calc(-38 * 13rem / 340); }
  /* the smaller box drops the scale further (~.61px/unit vs .75px/unit at 900px);
     re-bump so walls/doors don't fade back toward hairline */
  .reno__plan-wall{ stroke-width: 2; }
  .reno__plan-door{ stroke-width: 1.6; }
  .reno__plan-dim{ stroke-width: 1.35; }
}
/* keep the step name ("The property") clear of the floating board button */
@media (max-width: 1100px){ body:has(.boardfab[data-hidden="false"]) .brief .progress{ padding-right: calc(132px + 1rem); } }
@media (max-width: 620px){
  .reno__before{ font-size: 14px; padding-inline: .6rem; }
  .y2k{ min-height: 0; }
  /* compact enough that the window and the cue under it fit one phone screen */
  .y2k__main{ padding: .8rem .9rem; gap: .55rem; }
  .y2k__nav{ padding: .7rem 1rem; gap: .15rem .8rem; }
  .y2k__form{ gap: .4rem; padding: .6rem; }
  .y2k__form label{ grid-template-columns: 4rem 1fr; }
  .y2k__in--tall{ height: 2.6rem; }
  .y2k__btns{ padding-left: 4.5rem; }
  .reno__cue{ margin-top: 1.25rem; }
  .reno__meter{ left: .5rem; right: .5rem; justify-content: space-between; }
  .reno.is-done .reno__handle{ bottom: 4.5rem; }
}
/* short phones (SE-size): drop the smallest jokes so the window + cue still fit one screen */
@media (max-width: 900px) and (max-height: 640px){
  .y2k__small{ display: none; }
  .reno:not(.is-done) .reno__handle{ top: auto; bottom: 5.5rem; transform: translateX(-50%); } /* off the "Contact Us!!!" logo, just above the cue */
}
@media (max-width: 900px) and (max-height: 580px){
  .y2k__main > p:not([class]){ display: none; }
  .y2k__in--tall{ height: 1.6rem; }
  .reno__before{ padding-bottom: .5rem; } .reno__cue{ margin-top: .75rem; }
}
@media (prefers-reduced-motion: reduce){ .y2k__marquee span, .y2k__new, .reno__dust, .reno__cue svg{ animation: none; } }
/* without JS nothing can renovate it: show the real page straight away */
@media (max-width: 1100px){
  body:has(.boardfab[data-hidden="false"]) .reno__meter{ bottom: 4.75rem; }
  body:has(.boardfab[data-hidden="false"]) .reno.is-done .reno__handle{ bottom: 4.75rem; }
}
@media (max-width: 620px){ body:has(.boardfab[data-hidden="false"]) .reno.is-done .reno__handle{ bottom: 8rem; } }
html:not(.js) .reno__before, html:not(.js) .reno__line, html:not(.js) .reno__handle, html:not(.js) .reno__meter{ display: none; }
/* the joke layer swallows clicks while it's up, so nothing invisible underneath gets hit */
.reno:not(.is-done) .reno__before{ pointer-events: auto; }

/* touch screens: controls reach a 44px tap target */
@media (pointer: coarse){
  .mtabs .filter, .mtabs__link{ height: 2.75rem; }
  .foot a, footer a{ display: inline-block; padding-block: .6rem; }
}

/* door hero without the pin (phones, reduced motion): the inside line joins the copy as a plain lead */
.ahero__inside.is-static{
  position: static; opacity: 1; visibility: visible; pointer-events: auto; text-align: left; margin: .5rem 0 0; max-width: none;
  font-size: var(--t-lead); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--cream); text-shadow: none;
}

/* ==========================================================================
   Before/after page — live hero + CTA backdrops (dither.js pairs / halftone)
   ========================================================================== */
/* Design Menu: a row of pixelated material samples hangs from the top into the space above
   the headline. Nothing sits behind text, so no scrim — the canvas height stops short of it */
.phero.phero--strips{ position: relative; isolation: isolate; min-height: 82svh; }
.phero__strips{ position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: -1; pointer-events: none; }
@media (max-width: 900px){ .phero.phero--strips{ min-height: 72svh; } }
.phero--live{ position: relative; isolation: isolate; overflow: hidden; min-height: 86svh; }
.phero__backdrop{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.phero__canvas, .phero__fallback{ position: absolute; inset: 0; width: 100%; height: 100%; }
.phero__fallback{ background: url('../assets/before-after/hero/kitchen2-after.webp') center / cover; filter: brightness(.45); }
.phero__backdrop::after{ /* legibility scrim: text sits bottom, nav top */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,24,22,.88) 0%, rgba(26,24,22,.6) 45%, rgba(26,24,22,.35) 75%, rgba(26,24,22,.55) 100%);
}
.phero__state{ margin-top: 1.5rem; font-size: .875rem; color: var(--text-dim); }
.phero__state span{ color: var(--brass-soft); }

.cta__stage{ position: relative; isolation: isolate; }
.cta__backdrop{
  position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--sec)); bottom: 0; left: calc(-1 * var(--margin)); right: calc(-1 * var(--margin));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 60%, transparent 100%);
}
.cta__canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
canvas.cta__canvas.is-ready{ opacity: .5; }
.cta__backdrop::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26,24,22,.75) 0%, rgba(26,24,22,.35) 60%, rgba(26,24,22,.55) 100%);
}

@media (max-width: 768px){
  .phero__backdrop::after{ background: linear-gradient(to top, rgba(26,24,22,.92) 0%, rgba(26,24,22,.72) 45%, rgba(26,24,22,.35) 75%, rgba(26,24,22,.55) 100%); }
  .cta__backdrop::after{ background: linear-gradient(to bottom, rgba(26,24,22,.7), rgba(26,24,22,.5)); }
}
@media (max-width: 430px){
  .phero--live{ min-height: 78svh; }
}