/* ==========================================================================
   All Pro Alliance, Design System
   Palette: warm concrete + oxidised steel
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (labels)
   ========================================================================== */

:root{
  /* colour */
  --bg:#FCFBF9;
  --surface:#F3F0EB;
  --ink:#121110;
  --muted:#6B6862;
  --line:rgba(18,17,16,.12);
  --line-soft:rgba(18,17,16,.07);
  --dark:#141312;
  --dark-surface:#1E1C1A;
  --dark-ink:#F2EFE9;
  --dark-muted:#8C877F;
  --accent:#C8552B;

  /* type scale */
  --fs-display:clamp(3.2rem,9vw,10rem);
  --fs-h1:clamp(2.4rem,5.5vw,5rem);
  --fs-h2:clamp(1.75rem,3.2vw,3.15rem);
  --fs-h3:clamp(1.2rem,1.8vw,1.75rem);
  --fs-lead:clamp(1.1rem,1.45vw,1.5rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-label:.6875rem;
  --fs-stat:clamp(2.8rem,7vw,6.5rem);

  /* layout */
  --gutter:clamp(16px,2.2vw,32px);
  --margin:clamp(20px,5vw,88px);
  --section:clamp(80px,12vh,180px);
  --nav-h:76px;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --d-ui:.4s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.6;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--bg);padding:12px 20px}
.skip:focus{left:12px;top:12px}

/* ---------- typography helpers ---------- */
.display{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-display);line-height:.88;letter-spacing:-.035em;font-weight:400}
.h1{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-h1);line-height:.95;letter-spacing:-.03em;font-weight:400}
.h2{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.025em;font-weight:400}
.h3{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.015em;font-weight:500}
.lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.01em;max-width:34ch}
.body{max-width:62ch;color:var(--muted)}
.label{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em;
  line-height:1;color:var(--muted);font-weight:500;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.italic-note{font-style:italic;color:var(--muted)}

/* ---------- layout ---------- */
.wrap{padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gutter)}
.section{padding-block:var(--section);position:relative}
.bleed{margin-inline:calc(var(--margin) * -1)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start;margin-bottom:clamp(40px,6vw,88px)}
.sec-head .label{grid-column:1/3}
.sec-head .sec-title{grid-column:3/10}
.sec-head .sec-aside{grid-column:10/13;color:var(--muted);font-size:var(--fs-small);align-self:end}
@media(max-width:860px){
  .sec-head{gap:16px}
  .sec-head .label,.sec-head .sec-title,.sec-head .sec-aside{grid-column:1/-1}
}

/* ---------- dark sections ---------- */
.dark{background:var(--dark);color:var(--dark-ink)}
.dark .label,.dark .body,.dark .muted{color:var(--dark-muted)}
.dark .rule,.dark .line{background:rgba(242,239,233,.14)}
.dark .btn-primary{background:var(--dark-ink);color:var(--dark)}
.dark .btn-ghost{border-color:rgba(242,239,233,.28)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:15px 26px;border-radius:100px;
  font-size:.875rem;letter-spacing:-.01em;font-weight:500;
  transition:background var(--d-ui) var(--ease),color var(--d-ui) var(--ease),border-color var(--d-ui) var(--ease),transform var(--d-ui) var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn .arw{transition:transform var(--d-ui) var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.link-u{position:relative;display:inline-block;padding-bottom:2px}
.link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- preloader ---------- */
.preload{position:fixed;inset:0;z-index:1000;background:var(--dark);color:var(--dark-ink);display:grid;place-items:center}
.preload__inner{text-align:center}
.preload__logo{font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,6vw,4rem);letter-spacing:-.04em;line-height:1}
.preload__bar{margin-top:20px;width:min(240px,50vw);height:1px;background:rgba(242,239,233,.2);overflow:hidden}
.preload__bar i{display:block;height:100%;width:0;background:var(--accent)}
.preload__num{margin-top:14px}

/* ---------- cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:900;transform:translate(-50%,-50%);mix-blend-mode:normal;
  display:none;transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease)}
.cursor span{opacity:0;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  position:absolute;inset:0;display:grid;place-items:center;transition:opacity .25s}
.cursor.is-big{width:76px;height:76px}
.cursor.is-big span{opacity:1}
@media(pointer:fine){.cursor{display:block}}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:500;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--margin);
  transition:transform .5s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-solid{background:rgba(252,251,249,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.on-dark{color:var(--dark-ink)}
.hdr.on-dark.is-solid{background:rgba(20,19,18,.72);border-bottom-color:rgba(242,239,233,.12);color:var(--dark-ink)}
.brand{display:flex;align-items:baseline;gap:.5rem;font-family:"Space Grotesk",sans-serif;font-size:1.05rem;letter-spacing:-.03em;font-weight:500}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.hdr__nav{display:flex;gap:clamp(18px,2.4vw,36px);align-items:center}
.hdr__nav a{font-size:.875rem;letter-spacing:-.01em}
.hdr__right{display:flex;align-items:center;gap:16px}
.hdr__tel{font-size:.8125rem;letter-spacing:.02em}
.burger{display:flex;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.burger.is-open i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger.is-open i:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
@media(max-width:1040px){ .hdr__nav,.hdr__tel,.hdr .btn{display:none} }

/* ---------- overlay menu ---------- */
.menu{
  position:fixed;inset:0;z-index:600;background:var(--dark);color:var(--dark-ink);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;
}
.menu.is-open{visibility:visible}
.menu__left{padding:calc(var(--nav-h) + 40px) var(--margin) 40px;display:flex;flex-direction:column;justify-content:space-between}
.menu__list li{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.menu__list a{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,5.5vw,4.5rem);line-height:1.14;letter-spacing:-.035em;transform:translateY(110%);opacity:.65;transition:opacity .4s var(--ease),padding-left .5s var(--ease)}
.menu__list a:hover{opacity:1;padding-left:18px}
.menu__list a .n{font-family:"JetBrains Mono",monospace;font-size:.6875rem;vertical-align:super;letter-spacing:.1em;margin-right:.6em;color:var(--dark-muted)}
.menu__meta{display:flex;flex-wrap:wrap;gap:32px;color:var(--dark-muted);font-size:.875rem;padding-top:32px;border-top:1px solid rgba(242,239,233,.14)}
.menu__meta a:hover{color:var(--dark-ink)}
.menu__media{position:relative;overflow:hidden;background:var(--dark-surface)}
.menu__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease),transform 1.2s var(--ease);transform:scale(1.06)}
.menu__media img.is-active{opacity:.9;transform:scale(1)}
.menu__close{position:absolute;top:0;right:var(--margin);height:var(--nav-h);display:flex;align-items:center;gap:10px;font-size:.8125rem}
@media(max-width:1040px){.menu{grid-template-columns:1fr}.menu__media{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:var(--dark-ink)}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.55) 0%,rgba(12,11,10,.15) 42%,rgba(12,11,10,.82) 100%)}
.hero__inner{width:100%;padding:0 var(--margin) clamp(36px,6vh,72px);position:relative;z-index:1}
.hero__title{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-display);line-height:.86;letter-spacing:-.04em;font-weight:400;max-width:16ch}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.26em;margin-bottom:-.26em}
.hero__title .line > span{display:block;transform:translateY(110%)}
.hero__foot{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end;margin-top:clamp(28px,5vh,56px)}
.hero__blurb{grid-column:1/6;color:rgba(242,239,233,.82);font-size:var(--fs-body);max-width:44ch}
.hero__cta{grid-column:9/13;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.hero__scroll{position:absolute;left:var(--margin);bottom:clamp(36px,6vh,72px);display:none}
.hero__top{position:absolute;top:calc(var(--nav-h) + 24px);left:var(--margin);right:var(--margin);display:flex;justify-content:space-between;color:rgba(242,239,233,.72)}
@media(max-width:860px){
  .hero__blurb{grid-column:1/-1}
  .hero__cta{grid-column:1/-1;justify-content:flex-start;margin-top:24px}
  .hero__top{display:none}
}

/* page hero (inner pages) */
.phero{padding-top:calc(var(--nav-h) + clamp(48px,10vh,120px));padding-bottom:clamp(40px,6vw,72px)}
.phero__title{grid-column:1/10}
.phero__label{grid-column:1/3;margin-bottom:24px}
.phero__blurb{grid-column:7/13;color:var(--muted);margin-top:28px}
@media(max-width:860px){.phero__title,.phero__blurb,.phero__label{grid-column:1/-1}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(28px,4vw,48px) 0;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat__n{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-stat);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.stat__n .suf{font-size:.32em;letter-spacing:-.01em;margin-left:.15em;color:var(--accent)}
.stat__k{margin-top:14px}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2n){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}}

/* ---------- reveal primitives ---------- */
.rv{overflow:hidden;position:relative}
.rv > img,.rv > video{transform:scale(1.14);will-change:transform}
.fade-up{opacity:0;transform:translateY(28px)}

.ratio-45{aspect-ratio:4/5;object-fit:cover;width:100%}
.ratio-169{aspect-ratio:16/9;object-fit:cover;width:100%}
.ratio-11{aspect-ratio:1/1;object-fit:cover;width:100%}
.ratio-32{aspect-ratio:3/2;object-fit:cover;width:100%}

/* ---------- statement ---------- */
.statement{grid-column:5/13}
.statement p + p{margin-top:1.2em}
.statement-label{grid-column:1/4}
@media(max-width:860px){.statement,.statement-label{grid-column:1/-1}.statement{margin-top:20px}}

/* ---------- project cards ---------- */
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,6vw,96px) var(--gutter)}
.pcard{position:relative;display:block}
.pcard:nth-child(4n+1){grid-column:1/7}
.pcard:nth-child(4n+2){grid-column:8/13;margin-top:clamp(0px,8vw,120px)}
.pcard:nth-child(4n+3){grid-column:2/7}
.pcard:nth-child(4n+4){grid-column:7/13;margin-top:clamp(0px,6vw,80px)}
.pcard__img{overflow:hidden}
.pcard__img img{transition:transform .8s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.045)}
.pcard__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pcard__name{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.15rem,1.7vw,1.6rem);letter-spacing:-.02em;transition:color .4s}
.pcard:hover .pcard__name{color:var(--accent)}
.pcard__sub{color:var(--muted);font-size:.8125rem}
@media(max-width:860px){.pcard,.pcard:nth-child(4n+1),.pcard:nth-child(4n+2),.pcard:nth-child(4n+3),.pcard:nth-child(4n+4){grid-column:1/-1;margin-top:0}}

/* ---------- horizontal gallery ---------- */
.hsec{position:relative;overflow:hidden}
.htrack{display:flex;gap:var(--gutter);padding-inline:var(--margin);will-change:transform}
.hitem{flex:0 0 clamp(260px,30vw,440px)}
.hitem img{aspect-ratio:4/5;object-fit:cover;width:100%}
.hitem__t{margin-top:16px;padding-top:14px;border-top:1px solid rgba(242,239,233,.16);display:flex;justify-content:space-between;gap:12px}
@media(max-width:900px){
  .htrack{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;-webkit-overflow-scrolling:touch}
  .hitem{scroll-snap-align:start;flex-basis:78vw}
  .htrack::-webkit-scrollbar{height:2px}
  .htrack::-webkit-scrollbar-thumb{background:rgba(242,239,233,.3)}
}

/* ---------- services accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,4vw,56px);align-items:center;
  padding:clamp(22px,3vw,38px) 0;text-align:left}
.acc__n{font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.12em;color:var(--muted)}
.acc__t{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.3rem,2.6vw,2.4rem);letter-spacing:-.025em;line-height:1.1;transition:color .4s,transform .5s var(--ease)}
.acc__item:hover .acc__t{color:var(--accent);transform:translateX(8px)}
.acc__ic{width:26px;height:26px;position:relative;flex:none}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:currentColor;transition:transform .45s var(--ease)}
.acc__ic::before{left:0;top:50%;width:100%;height:1px;transform:translateY(-50%)}
.acc__ic::after{top:0;left:50%;height:100%;width:1px;transform:translateX(-50%)}
.acc__item.is-open .acc__ic::after{transform:translateX(-50%) rotate(90deg)}
.acc__panel{overflow:hidden;height:0}
.acc__inner{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-bottom:clamp(28px,4vw,52px)}
.acc__body{grid-column:4/9;color:var(--muted)}
.acc__list{grid-column:9/13;display:flex;flex-direction:column;gap:8px}
.acc__list li{font-size:.875rem;padding-left:16px;position:relative}
.acc__list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--accent)}
@media(max-width:860px){.acc__body,.acc__list{grid-column:1/-1}.acc__list{margin-top:20px}}

/* ---------- process sticky stack ---------- */
.pstack{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.pstack__rail{grid-column:1/4;position:sticky;top:calc(var(--nav-h) + 40px);height:max-content;align-self:start}
.pstack__rail li{padding:10px 0;color:var(--dark-muted);font-size:.875rem;display:flex;gap:14px;transition:color .4s}
.pstack__rail li.is-active{color:var(--dark-ink)}
.pstack__rail li.is-active .bar{width:36px;background:var(--accent)}
.pstack__rail .bar{width:14px;height:1px;background:currentColor;align-self:center;transition:width .5s var(--ease),background .4s}
.pstack__steps{grid-column:5/13;display:flex;flex-direction:column;gap:clamp(40px,7vw,110px)}
.step{display:grid;gap:24px}
.step__top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid rgba(242,239,233,.18);padding-top:20px}
.step__n{font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.14em;color:var(--accent)}
.step__dur{font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.1em;color:var(--dark-muted)}
.step img{aspect-ratio:16/9;object-fit:cover;width:100%}
@media(max-width:900px){.pstack__rail{display:none}.pstack__steps{grid-column:1/-1}}

/* ---------- before / after ---------- */
.ba{position:relative;overflow:hidden;--pos:50%;touch-action:pan-y;user-select:none;cursor:ew-resize}
.ba img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__before img{height:100%}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--bg);transform:translateX(-50%);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--bg);color:var(--ink);
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.08em}
.ba__tag{position:absolute;bottom:16px;padding:7px 12px;border-radius:100px;background:rgba(18,17,16,.7);color:#fff;
  font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px)}
.ba__tag--b{left:16px}
.ba__tag--a{right:16px}
.ba input[type=range]{position:absolute;inset:auto 0 0 0;width:100%;opacity:0;height:44px;margin:0;cursor:ew-resize}
.ba input[type=range]:focus-visible{opacity:1}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,4vw,56px) var(--gutter)}
.quote{grid-column:span 4;display:flex;flex-direction:column;gap:22px;border-top:1px solid var(--line);padding-top:24px}
.quote blockquote{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.34;letter-spacing:-.015em}
.quote figcaption{margin-top:auto;color:var(--muted);font-size:.8125rem}
.quote figcaption strong{color:var(--ink);font-weight:500;display:block}
@media(max-width:900px){.quote{grid-column:1/-1}}

/* ---------- marquee ---------- */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:26px;display:flex}
/* gap lives on the items, never on the track: a track-level gap sits between the
   two halves only, so translateX(-50%) lands half a gap short and the loop visibly
   jumps once per cycle. With the spacing inside each half, -50% is exact. */
.mq__track{display:flex;gap:0;flex:none;will-change:transform;
  animation:mq var(--mq-dur,38s) linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__half{display:flex;flex:none;gap:0}
.mq span{white-space:nowrap;font-family:"JetBrains Mono",monospace;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:56px;padding-right:56px}
.mq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,3vw,40px) var(--gutter)}
.tmember{grid-column:span 3}
.tmember img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1);transition:filter .6s var(--ease),transform .8s var(--ease)}
.tmember:hover img{filter:grayscale(0)}
.tmember__n{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:900px){.tmember{grid-column:span 6}}

/* ---------- areas ---------- */
.areas{columns:4;column-gap:var(--gutter)}
.areas li{padding:9px 0;border-bottom:1px solid var(--line-soft);break-inside:avoid;font-size:.9375rem}
@media(max-width:900px){.areas{columns:2}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:24px;align-items:center;
  font-family:"Space Grotesk",sans-serif;font-size:clamp(1.02rem,1.4vw,1.3rem);letter-spacing:-.015em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"+";font-family:"JetBrains Mono",monospace;font-size:1.1rem;transition:transform .4s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:26px;max-width:70ch;color:var(--muted)}

/* ---------- CTA + form ---------- */
.cta__title{grid-column:1/9}
.cta__side{grid-column:10/13;display:flex;flex-direction:column;gap:22px}
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);margin-top:clamp(40px,5vw,64px)}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-muted)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(242,239,233,.24);
  padding:12px 0;color:var(--dark-ink);font:inherit;font-size:1rem;border-radius:0;transition:border-color .4s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field select option{background:var(--dark);color:var(--dark-ink)}
.field textarea{resize:vertical;min-height:96px}
.hp{position:absolute;left:-9999px}
.form__foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px}
.form__note{color:var(--dark-muted);font-size:.8125rem;max-width:44ch}
.form__msg{grid-column:1/-1;font-size:.9375rem;color:var(--accent)}
@media(max-width:760px){.form{grid-template-columns:1fr}.cta__title,.cta__side{grid-column:1/-1}}

/* ---------- footer ---------- */
.ftr{background:var(--dark);color:var(--dark-ink);padding-top:clamp(60px,8vw,110px);padding-bottom:36px}
.ftr__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px var(--gutter)}
.ftr__brand{grid-column:1/5}
.ftr__col{grid-column:span 2}
.ftr__col h4{margin-bottom:18px}
.ftr__col li{padding:6px 0}
.ftr__col a{color:var(--dark-muted);font-size:.9375rem;transition:color .3s}
.ftr__col a:hover{color:var(--dark-ink)}
.ftr__bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(48px,7vw,90px);padding-top:24px;border-top:1px solid rgba(242,239,233,.14);color:var(--dark-muted);font-size:.75rem}
.ftr__big{display:block;width:100%;margin-top:clamp(40px,6vw,80px);user-select:none}
.ftr__big svg{display:block;width:100%;height:auto;overflow:visible}
.ftr__big text{font-family:"Space Grotesk",sans-serif;font-weight:400;letter-spacing:-.04em;fill:rgba(242,239,233,.09)}
@media(max-width:900px){.ftr__brand{grid-column:1/-1}.ftr__col{grid-column:span 6}}

/* ---------- project detail ---------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.spec div{background:var(--bg);padding:20px}
.spec dt{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:10px 0 0;font-family:"JetBrains Mono",monospace;font-size:.875rem;letter-spacing:-.01em}
@media(max-width:860px){.spec{grid-template-columns:repeat(2,1fr)}}

.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.gal figure{margin:0}
.gal figcaption{margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.06em;color:var(--muted)}
.g-full{grid-column:1/-1}
.g-l{grid-column:1/8}
.g-r{grid-column:8/13;align-self:end}
.g-c{grid-column:3/11}
@media(max-width:860px){.g-l,.g-r,.g-c{grid-column:1/-1}}

.nextp{position:relative;display:block;overflow:hidden;color:var(--dark-ink)}
.nextp img{width:100%;aspect-ratio:21/9;object-fit:cover;transition:transform 1s var(--ease);filter:brightness(.55)}
.nextp:hover img{transform:scale(1.05)}
.nextp__c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;gap:12px;align-content:center}

/* ---------- misc ---------- */
.two-col{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:center}
.two-col__media{grid-column:1/7}
.two-col__body{grid-column:8/13}
.two-col.rev .two-col__media{grid-column:7/13;order:2}
.two-col.rev .two-col__body{grid-column:1/6;order:1}
@media(max-width:860px){.two-col__media,.two-col__body,.two-col.rev .two-col__media,.two-col.rev .two-col__body{grid-column:1/-1;order:initial}}

.timeline{border-top:1px solid var(--line)}
.timeline__row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);transition:background .4s}
.timeline__row:hover{background:var(--surface)}
.timeline__y{grid-column:1/3}
.timeline__t{grid-column:3/7}
.timeline__d{grid-column:7/12;color:var(--muted)}
@media(max-width:860px){.timeline__y,.timeline__t,.timeline__d{grid-column:1/-1}.timeline__d{margin-top:8px}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mq__track{animation:none}
  .hero__title .line > span{transform:none!important}
  .fade-up{opacity:1;transform:none}
  .rv{clip-path:none!important}
  .rv > img{transform:none!important}
  .cursor{display:none!important}
}

/* hero buttons sit on photography, invert the primary */
.hero .btn-primary{background:var(--dark-ink);color:var(--dark)}
.hero .btn-primary:hover{background:var(--accent);color:#fff}
.hero .btn-ghost{border-color:rgba(242,239,233,.34);color:var(--dark-ink)}
.hero .btn-ghost:hover{background:var(--dark-ink);color:var(--dark);border-color:var(--dark-ink)}
.hero__blurb{text-shadow:0 1px 24px rgba(0,0,0,.35)}

/* ================= logo ================= */
.brand{position:relative;display:block;line-height:0}
.brand img{height:36px;width:auto;display:block;transition:filter .35s var(--ease)}
.hdr.on-dark .brand img{filter:invert(1)}
.preload__logo{width:min(300px,52vw);height:auto;object-fit:contain}
.menu__logo{height:30px;width:auto;align-self:flex-start;flex:none;margin-bottom:auto;object-fit:contain}
.ftr__logo{height:38px;width:auto;align-self:flex-start;object-fit:contain}

/* ================= accordion media ================= */
.acc__inner{align-items:start}
.acc__media{grid-column:1/4;margin:0}
.acc__inner .acc__body{grid-column:4/9}
.acc__inner .acc__list{grid-column:9/13}
@media(max-width:860px){
  .acc__media{grid-column:1/-1;margin-bottom:20px}
  .acc__inner .acc__body,.acc__inner .acc__list{grid-column:1/-1}
}

/* ================= testimonial thumbs ================= */
.quote__img{margin-bottom:4px}
.quote__img img{aspect-ratio:3/2;object-fit:cover;width:100%}

/* ================= full-bleed band ================= */
.band{position:relative;overflow:hidden;color:var(--dark-ink)}
.band img{filter:brightness(.5)}
.band__c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center}
.band__c .label{color:rgba(242,239,233,.75)}

/* ================= CTA background ================= */
.cta{position:relative;overflow:hidden}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.14;filter:grayscale(1)}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,18,.65),rgba(20,19,18,.95))}
.cta > .wrap,.cta > .form,.cta .wrap{position:relative;z-index:1}

/* tuning */
.cta__bg img{opacity:.10}
.hero__blurb{color:rgba(242,239,233,.94)}

/* ================= header legibility ================= */
/* Transparent header over photography needs a guaranteed scrim, otherwise
   light nav text collapses against bright sky / pale cladding. */
.hdr::before{
  content:"";position:absolute;inset:0;bottom:auto;height:calc(var(--nav-h) * 2.1);
  background:linear-gradient(180deg,rgba(12,11,10,.62) 0%,rgba(12,11,10,.34) 46%,rgba(12,11,10,0) 100%);
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:-1;
}
.hdr.on-dark:not(.is-solid)::before{opacity:1}

/* nav links: heavier weight + real hover state */
.hdr__nav a{
  font-weight:500;opacity:.82;
  transition:opacity .3s var(--ease),color .3s var(--ease);
}
.hdr__nav a:hover{opacity:1;color:var(--accent)}
.hdr.on-dark .hdr__nav a,.hdr.on-dark .hdr__tel{text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hdr__tel{opacity:.86}
.hdr__tel:hover{opacity:1}

/* solid state: full-strength ink, no scrim needed */
.hdr.is-solid .hdr__nav a{opacity:.9}
.hdr.is-solid .hdr__nav a:hover{opacity:1}

/* burger needs the same treatment */
.hdr.on-dark:not(.is-solid) .burger i{box-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ================= before / after grid ================= */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px) var(--gutter)}
.ba-grid--one{grid-template-columns:1fr;max-width:none}
.ba-item{margin:0}
.ba-item__cap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:.875rem;color:var(--muted)}
.ba__mock{font-family:"JetBrains Mono",monospace;font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);border:1px solid currentColor;
  padding:4px 7px;border-radius:100px;white-space:nowrap;flex:none}
.ba-grid--one .ba-item__cap{font-size:1rem}
.ba-note{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.ba-note .label{grid-column:1/3}
.ba-note p:last-child{grid-column:3/9;color:var(--muted);font-size:.875rem}
@media(max-width:900px){
  .ba-grid{grid-template-columns:1fr}
  .ba-note .label,.ba-note p:last-child{grid-column:1/-1}
}
/* smaller sliders need a smaller knob */
/* compact knob inside a multi-up grid, height and type only, never a fixed
   width, or the DRAG label has nothing to expand into */
.ba-grid:not(.ba-grid--one) .ba__knob{height:42px;font-size:.55rem;padding:0 14px;gap:8px}
.ba-grid:not(.ba-grid--one) .ba.is-used .ba__knob{width:44px;height:44px;padding:0}
.ba-grid:not(.ba-grid--one) .ba__tag{font-size:.5rem;padding:5px 9px;bottom:12px}

/* keyboard focus belongs on the slider frame, not the native range track */
.ba input[type=range]:focus-visible{opacity:0}
.ba:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.ba-grid--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.ba-grid--two{grid-template-columns:1fr}}

/* ==========================================================================
   BRAND MOTION: "setting out"
   The logo carries ruler ticks. The whole motion system borrows that one idea:
   a measured rule that fills. Preloader draws it; the page scroll continues it.
   ========================================================================== */

/* ---------- preloader ---------- */
.preload{position:fixed;inset:0;z-index:1000;background:var(--dark);color:var(--dark-ink);
  display:grid;place-items:center;overflow:hidden}
.preload__inner{width:min(520px,72vw);display:flex;flex-direction:column;gap:22px}

.preload__mark{overflow:hidden;line-height:0;display:flex;justify-content:center}
.preload__logo{width:100%;max-width:340px;height:auto;object-fit:contain;margin-inline:auto;
  clip-path:inset(0 100% 0 0)}

.preload__rule{position:relative;height:26px;width:100%}
.preload__ticks{position:absolute;inset:auto 0 0 0;height:14px;
  background-image:repeating-linear-gradient(90deg,
    rgba(242,239,233,.30) 0 1px, transparent 1px 100%);
  background-size:calc(100% / 40) 100%;
  -webkit-mask-image:linear-gradient(90deg,#000 0 100%);mask-image:linear-gradient(90deg,#000 0 100%)}
/* every fifth tick is taller, a real rule, not a hatch */
.preload__rule::before{content:"";position:absolute;inset:auto 0 0 0;height:22px;
  background-image:repeating-linear-gradient(90deg,
    rgba(242,239,233,.42) 0 1px, transparent 1px 100%);
  background-size:calc(100% / 8) 100%}
.preload__fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
  box-shadow:0 0 14px rgba(200,85,43,.55)}

.preload__meta{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-muted)}
.preload__word{opacity:0}
.preload__num{font-variant-numeric:tabular-nums;color:var(--dark-ink)}

/* exit: a panel wipes up, the site is already composited underneath */
.preload{clip-path:inset(0 0 0% 0)}

/* ---------- scroll rule: the preloader's measure, continued down the page ---------- */
.scrollrule{position:fixed;top:0;left:0;right:0;height:2px;z-index:501;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease)}
.scrollrule.is-on{opacity:1}
.scrollrule i{display:block;height:100%;width:0;background:var(--accent);
  transform-origin:left;will-change:width}

/* ---------- section labels get a measured tick ---------- */
.label--tick{display:inline-flex;align-items:center;gap:.85em}
.label--tick::before{content:"";width:0;height:1px;background:var(--accent);flex:none;
  transition:width .9s var(--ease)}
.label--tick.is-in::before{width:28px}

@media (prefers-reduced-motion:reduce){
  .preload__logo{clip-path:none!important}
  .scrollrule{display:none}
  .label--tick::before{width:28px}
}

/* ==========================================================================
   RESPONSIVE HARDENING
   ========================================================================== */

/* --- tap targets: 44px minimum on touch, per WCAG 2.5.8 --- */
.ftr__col li{padding:0}
.ftr__col a{display:inline-flex;align-items:center;min-height:44px;padding-block:4px}
.ftr__bot span,.ftr__bot a{line-height:1.7}
.menu__meta a,.menu__meta span{display:inline-flex;align-items:center;min-height:44px}
.areas li{padding:0}
.areas li,.areas span{display:flex;align-items:center;min-height:44px}
.hdr__nav a{display:inline-flex;align-items:center;min-height:44px}
.hdr__tel{display:inline-flex;align-items:center;min-height:44px}
.faq summary{min-height:56px}
.acc__btn{min-height:56px}

/* the before/after range is an invisible full-width control, it still has to be
   grabbable, so give it real dimensions rather than relying on the UA default */
.ba input[type=range]{
  -webkit-appearance:none;appearance:none;
  height:48px;background:transparent;
}
.ba input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:48px}
.ba input[type=range]::-moz-range-thumb{width:48px;height:48px;border:0;background:transparent}

/* --- very small screens: the display face has to fit a 280px measure --- */
@media(max-width:400px){
  :root{--fs-display:clamp(2.5rem,11.5vw,4rem);--margin:18px}
  .band__c .display{font-size:clamp(1.9rem,9.5vw,3rem);word-break:break-word}
  .hero__title{font-size:clamp(2.5rem,11.5vw,4rem)}
  .ftr__bot{font-size:.6875rem}
  .spec{grid-template-columns:1fr}
  .stat__n{font-size:clamp(2.2rem,12vw,3rem)}
}
/* long single-word headings must never push the layout wider than the screen */
.display,.h1,.h2,.hero__title,.band__c .display{overflow-wrap:break-word}

/* ==========================================================================
   OVERLAY MENU: compact layout for phone and tablet
   The desktop composition relies on a tall column and a facing image. Below
   1040px that image is gone, so space-between stranded the list in the middle
   of a large void. Here the panel is a three-row grid instead: mark, list,
   footer, each with a real, measured gap.
   ========================================================================== */
.menu__foot{display:flex;flex-direction:column;gap:22px}
.menu__cta{align-self:flex-start}

@media(min-width:1041px){
  .menu__cta{display:none}          /* desktop keeps the header CTA visible */
}

@media(max-width:1040px){
  .menu__left{
    padding:calc(var(--nav-h) + 4px) var(--margin) max(26px, env(safe-area-inset-bottom, 0px));
    display:grid;
    grid-template-rows:auto 1fr auto;
    gap:clamp(20px,3.4vh,40px);
    align-content:stretch;
  }
  .menu__logo{margin-bottom:0}

  .menu__list{
    align-self:center;
    width:100%;
    border-top:1px solid rgba(242,239,233,.13);
  }
  .menu__list li{border-bottom:1px solid rgba(242,239,233,.13);padding:0;margin:0}
  .menu__list a{
    display:flex;align-items:baseline;gap:.75em;
    font-size:clamp(1.75rem,6.6vw,2.6rem);
    line-height:1;
    padding:clamp(13px,1.9vh,20px) 0;
    opacity:.92;
  }
  .menu__list a:hover,.menu__list a:focus-visible{padding-left:10px;opacity:1}
  .menu__list a .n{font-size:.5625rem;vertical-align:baseline;margin-right:0;opacity:.6}

  .menu__foot{gap:18px}
  .menu__cta{padding:14px 24px}
  .menu__meta{
    display:grid;grid-template-columns:1fr;gap:2px;
    padding-top:18px;font-size:.8125rem;line-height:1.5;
    border-top:1px solid rgba(242,239,233,.13);
  }
  .menu__meta a,.menu__meta span{min-height:38px;display:flex;align-items:center}
}

/* tablet has the width for a two-up footer, which shortens the panel */
@media(min-width:600px) and (max-width:1040px){
  .menu__meta{grid-template-columns:1fr 1fr;gap:4px 32px}
  .menu__meta span{grid-column:1/-1}
  .menu__foot{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px}
  .menu__foot .menu__meta{flex:1;border-top:0;padding-top:0}
  .menu__cta{order:2;flex:none}
}

/* short landscape: keep the list from crowding the footer */
@media(max-height:600px) and (max-width:1040px){
  .menu__list a{font-size:clamp(1.3rem,4.4vh,1.9rem);padding:clamp(8px,1.4vh,13px) 0}
  .menu__left{gap:14px}
}

/* ==========================================================================
   PAGE TRANSITION: "hoarding"
   The intro is a slow vertical measure. Navigation is its opposite: a fast
   horizontal panel with a leading accent edge, like a hoarding sliding across
   a shopfront. ~0.4s out, ~0.5s in, roughly a quarter of the intro.
   ========================================================================== */
.pagewipe{
  position:fixed;inset:0;z-index:950;pointer-events:none;
  background:var(--dark);
  transform:scaleX(0);transform-origin:right center;
  will-change:transform;
}
.pagewipe i{
  position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--accent);
  box-shadow:0 0 26px rgba(200,85,43,.75);opacity:0;
}
.pagewipe.is-covering{transform:scaleX(1);transform-origin:right center}
.pagewipe.is-covering i{opacity:1}
/* arriving: the panel is already covering and retreats to the left */
.pagewipe.is-clearing{transform-origin:left center}
.pagewipe.is-clearing i{left:auto;right:0}

body.is-leaving{cursor:progress}

@media (prefers-reduced-motion:reduce){
  .pagewipe{display:none}
}

/* ==========================================================================
   DESKTOP-ONLY SECTIONS, BROUGHT TO SMALL SCREENS
   Two things existed only above 900/1040px. Neither is unhidden as-is, a
   vertical sidebar and a half-screen image panel do not work on a phone, so
   each is re-formed for the smaller frame.
   ========================================================================== */

/* --- 1. process stage rail: vertical sidebar -> sticky horizontal measure --- */
@media(max-width:900px){
  .pstack__rail{
    display:block;
    position:sticky;top:var(--nav-h);z-index:6;
    margin-inline:calc(var(--margin) * -1);
    margin-bottom:clamp(24px,4vh,40px);
    padding:11px var(--margin);
    background:rgba(20,19,18,.92);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(242,239,233,.12);
    border-bottom:1px solid rgba(242,239,233,.12);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pstack__rail::-webkit-scrollbar{display:none}
  .pstack__rail ul{display:flex;gap:22px;align-items:center}
  .pstack__rail li{
    padding:6px 0;white-space:nowrap;font-size:.8125rem;
    display:flex;align-items:center;gap:9px;flex:none;
  }
  .pstack__rail .bar{width:12px}
  .pstack__rail li.is-active .bar{width:24px}
  .pstack{display:block}
  .pstack__steps{display:flex}
}

/* --- 2. overlay menu featured image: facing panel -> band beneath the list --- */
@media(max-width:1040px){
  .menu{grid-template-rows:1fr auto;grid-template-columns:1fr}
  .menu__media{
    display:block;position:relative;
    height:clamp(120px,22vh,220px);
    margin:0;
    border-top:1px solid rgba(242,239,233,.13);
  }
  .menu__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .menu__left{padding-bottom:clamp(18px,2.6vh,28px)}
}
@media(max-width:1040px) and (max-height:620px){
  .menu__media{display:none}      /* short landscape has no room to spare */
}

/* ==========================================================================
   BEFORE/AFTER: make the control obvious
   A bare ↔ disc reads as decoration. The handle now says what to do, nudges
   itself once when it first comes into view, and collapses to the plain disc
   the moment it has been used.
   ========================================================================== */
.ba__knob{
  width:auto;height:44px;padding:0 16px;border-radius:100px;
  display:flex;align-items:center;gap:9px;
  background:var(--bg);color:var(--ink);
  box-shadow:0 2px 18px rgba(18,17,16,.28);
  transition:padding .45s var(--ease),gap .45s var(--ease);
  white-space:nowrap;
}
.ba__knob-i{font-family:"JetBrains Mono",monospace;font-size:.95rem;line-height:1}
.ba__knob-t{
  font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;
  max-width:5em;overflow:hidden;
  transition:max-width .45s var(--ease),opacity .3s var(--ease),margin .45s var(--ease);
}
/* once used, the label retires and the disc returns */
.ba.is-used .ba__knob{padding:0;gap:0;width:52px;justify-content:center}
.ba.is-used .ba__knob-t{max-width:0;opacity:0}

/* a single, quiet attention nudge the first time it enters view */
@keyframes ba-nudge{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.06)}
}
.ba.is-hinting .ba__knob{animation:ba-nudge 1.1s var(--ease) 2}

.ba{cursor:ew-resize}
.ba__handle{width:2px;background:var(--bg);box-shadow:0 0 12px rgba(18,17,16,.35)}

@media (prefers-reduced-motion:reduce){
  .ba.is-hinting .ba__knob{animation:none}
}

/* ==========================================================================
   OVERLAY MENU: true full screen on mobile browsers
   inset:0 on a fixed element resolves against the LAYOUT viewport, which on
   mobile is taller than what you can actually see while the URL bar is shown.
   The panel was full height and the bottom of it sat behind the browser chrome.
   dvh tracks the visible viewport, so the panel ends where the screen ends.
   ========================================================================== */
.menu{
  height:100vh;          /* fallback for engines without dvh */
  height:100dvh;
  max-height:100dvh;
  overflow:hidden;
}
@supports (height:100dvh){
  .menu{inset:0 0 auto 0}
}

@media(max-width:1040px){
  /* the nav column takes the space that is left and scrolls if a short screen
     cannot hold it; the image band keeps a fixed share at the bottom */
  .menu{grid-template-rows:minmax(0,1fr) auto}
  .menu__left{
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:clamp(16px,2.4vh,24px);
  }
  .menu__media{
    height:clamp(104px,18dvh,190px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--dark-surface);
  }
}

/* `overflow:hidden` on a flex item resolves its automatic minimum size to 0,
   so the label was free to shrink away entirely. Pin it with flex:none and
   swap it out on use rather than animating its max-width. */
.ba .ba__knob{
  width:auto;min-width:0;height:46px;padding:0 17px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.ba .ba__knob-t{
  flex:none;overflow:visible;max-width:none;
  transition:opacity .3s var(--ease);
}
.ba.is-used .ba__knob{width:52px;height:52px;padding:0;gap:0}
.ba.is-used .ba__knob-t{display:none}

/* --- logo sizing: mobile header and intro mark reduced 25% --- */
@media(max-width:1040px){
  .brand img{height:27px}          /* was 36px */
}
.preload__logo{max-width:255px}    /* was 340px */
@media(max-width:600px){
  .preload__logo{width:75%}        /* 281px -> ~211px on a 390 screen */
}

/* --- phone: the whole panel must fit without scrolling --- */
@media(max-width:600px){
  .menu__media{height:clamp(78px,12dvh,120px)}
  .menu__left{
    padding-top:calc(var(--nav-h) - 12px);
    gap:clamp(12px,2vh,22px);
  }
  .menu__logo{height:24px}
  .menu__list a{
    font-size:clamp(1.5rem,5.8vw,2.1rem);
    padding:clamp(10px,1.5vh,15px) 0;
  }
  .menu__foot{gap:12px}
  .menu__cta{padding:12px 20px;font-size:.8125rem}
  .menu__meta{padding-top:12px;gap:0;font-size:.75rem}
  .menu__meta a,.menu__meta span{min-height:32px}
}
@media(max-width:600px) and (max-height:600px){
  .menu__media{display:none}
  .menu__list a{font-size:clamp(1.25rem,4.6vw,1.6rem)}
}

/* --- phone intro: the rule and the meta row measure the logo, not the screen ---
   The mark was reduced to 75% while the rule below it still spanned the full
   block, so the two no longer agreed. Narrow the block itself instead, and let
   the logo fill it, then the rule, the fill and the SETTING OUT / counter row
   are all exactly the logo's width. */
@media(max-width:600px){
  .preload__inner{width:min(54vw, 255px)}
  .preload__logo{width:100%;max-width:none}
}

/* the same agreement at every width: the rule measures the mark */
.preload__inner{width:min(72vw, 255px)}
.preload__logo{width:100%;max-width:none}

/* ...but the phone keeps the reduced mark: this must come after the rule above,
   which is unconditional and would otherwise win on source order */
@media(max-width:600px){
  .preload__inner{width:min(54vw, 211px)}
}

/* --- letter mark on the transition panel ---
   It cannot live inside .pagewipe: that element is animated with scaleX, and a
   child would be squashed with it. Separate fixed layer, opacity only. */
.pagemark{
  position:fixed;inset:0;z-index:951;pointer-events:none;
  display:grid;place-items:center;opacity:0;
}
.pagemark img{
  width:clamp(76px,10.5vw,140px);height:auto;display:block;
  filter:drop-shadow(0 2px 20px rgba(0,0,0,.45));
}
@media (prefers-reduced-motion:reduce){ .pagemark{display:none} }

/* ==========================================================================
   MENU CLOSE: must sit outside the scrolling column
   It is positioned against .menu (top:0), but it used to live inside
   .menu__left. Once that column became a scroll container it clipped its own
   descendants, and the control vanished, present in the DOM, invisible to
   anyone actually using the menu.
   ========================================================================== */
.menu__close{
  position:absolute;top:0;right:var(--margin);z-index:3;
  height:var(--nav-h);min-width:56px;
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  color:var(--dark-ink);
  transition:opacity .3s var(--ease);
}
.menu__close .label{color:rgba(242,239,233,.72);transition:color .3s var(--ease)}
.menu__x{font-size:1.45rem;line-height:1;display:block;transition:transform .45s var(--ease)}
.menu__close:hover .label{color:var(--dark-ink)}
.menu__close:hover .menu__x{transform:rotate(90deg);color:var(--accent)}
.menu__close:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* --- desktop intro block, 25% larger --- */
@media(min-width:601px){
  .preload__inner{width:min(72vw, 319px)}
}

/* --- v32 mobile polish: narrow-viewport containment -------------------- */
.menu__meta a,.menu__meta span{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:360px){
  .menu__meta{font-size:.8125rem}
  .menu__meta a,.menu__meta span{max-width:100%}
}
.ftr a[href^="mailto:"],.ftr a[href^="tel:"]{overflow-wrap:anywhere}

/* =====================================================================
   v37 — mobile horizontal sections
   Long stacked lists become swipeable rails below 900px. The rail is the
   same ruler motif used across the site: ticks, an accent fill that tracks
   scroll position, and a tabular counter. Desktop layout is untouched.
   ===================================================================== */
@media (max-width:900px){
  .work,.quotes,.pstack__steps,.gal{
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;
    gap:14px;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--margin);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--margin) * -1);
    padding:0 var(--margin) 2px;
  }
  .work::-webkit-scrollbar,.quotes::-webkit-scrollbar,
  .pstack__steps::-webkit-scrollbar,.gal::-webkit-scrollbar{display:none}

  .work > *,.quotes > *,.pstack__steps > *,.gal > *{
    flex:0 0 min(79vw,360px);
    scroll-snap-align:start;
    margin-top:0 !important;
    grid-column:auto !important;
  }
  /* the rail needs breathing room past the last card, matching the left margin */
  .work::after,.quotes::after,.pstack__steps::after,.gal::after{
    content:"";flex:0 0 calc(var(--margin) - 14px);
  }

  /* cards inside a rail get a consistent image ratio so the row reads evenly */
  .work .pcard__img img{aspect-ratio:4/5;object-fit:cover;width:100%}
  .gal figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
  .gal figure > .rv{width:100%}
  .quote{border-top:1px solid var(--line);padding-top:20px}
  .pstack__steps .step img{aspect-ratio:4/5}

  /* the craft strip already scrolled — bring it into the same language */
  .htrack{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .htrack::-webkit-scrollbar{display:none}
  .hitem{flex-basis:min(79vw,360px)}
}

/* ---------- shared scroll indicator ---------- */
.hsui{display:none}
@media (max-width:900px){
  .hsui{display:flex;align-items:center;gap:14px;margin-top:20px}
  .hsui__rail{position:relative;flex:1 1 auto;height:11px;min-width:0}
  .hsui__ticks{position:absolute;inset:auto 0 0 0;height:5px;
    background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 100%);
    background-size:calc(100% / 20) 100%}
  .hsui__base{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
  .hsui__fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
    transition:width .12s linear}
  .hsui__n,.hsui__hint{font-family:"JetBrains Mono",monospace;font-size:.6875rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none;
    font-variant-numeric:tabular-nums}
  .hsui__hint{opacity:.9;transition:opacity .4s}
  .hsui.is-moved .hsui__hint{opacity:0}
  .section.dark .hsui__ticks{background-image:repeating-linear-gradient(90deg,rgba(242,239,233,.22) 0 1px,transparent 1px 100%)}
  .section.dark .hsui__base{background:rgba(242,239,233,.18)}
  .section.dark .hsui__n,.section.dark .hsui__hint{color:var(--dark-muted)}
}
@media (prefers-reduced-motion:reduce){.hsui__fill{transition:none}}

/* ---------------------------------------------------------------------
   v37 — before/after on mobile
   Below 900px the two-up and three-up grids collapse to a single column,
   so each slider is as large as the featured one on desktop. The compact
   knob and tag sizing exists only for the multi-column case: undo it here
   so the mobile control matches the desktop treatment exactly.
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .ba-grid,.ba-grid--two{grid-template-columns:1fr;gap:clamp(28px,7vw,44px)}

  .ba-grid:not(.ba-grid--one) .ba__knob{
    width:auto;height:56px;font-size:.625rem;padding:0 20px;gap:11px;
  }
  .ba-grid:not(.ba-grid--one) .ba.is-used .ba__knob{
    width:52px;height:56px;padding:0;gap:0;justify-content:center;
  }
  .ba-grid:not(.ba-grid--one) .ba__tag{
    font-size:.5625rem;padding:7px 12px;bottom:16px;
  }
  .ba-grid:not(.ba-grid--one) .ba__tag--b{left:16px}
  .ba-grid:not(.ba-grid--one) .ba__tag--a{right:16px}
  .ba-grid:not(.ba-grid--one) .ba-item__cap{font-size:1rem}
  .ba__handle{box-shadow:0 0 16px rgba(18,17,16,.45)}
}