/* ==========================================================================
   MohB.Studio Site
   Design motif: rotation. The MohB mark turns letters around; the site turns
   labels, numbers and rules onto their side. Palette is the MohB brand palette
   re-weighted — warm paper as the ground, gold demoted to accent.
   Colour + font variables are injected inline by inc/tokens.php.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --wrap:1280px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --rail:clamp(0rem,3vw,3.5rem);

  --fs-h1:clamp(2.5rem,5.5vw,5rem);
  --fs-h2:clamp(1.85rem,4.2vw,3.4rem);
  --fs-h3:clamp(1.1rem,1.5vw,1.4rem);
  --fs-lead:clamp(1.05rem,1.35vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-sm:0.875rem;
  --fs-eyebrow:0.72rem;

  --sp-sec:clamp(4.5rem,11vh,8.5rem);
  --measure:64ch;
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.42s var(--ease);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.65;
  font-weight:400;letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,picture,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--gold);color:var(--ink)}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r);
}
.sec--ink :where(a,button,input,textarea,[tabindex]):focus-visible,
.mnav :where(a,button):focus-visible,
.ftr :where(a,button):focus-visible{outline-color:var(--gold)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:.75rem 1.25rem;background:var(--ink);color:var(--paper)}
.skip:focus{left:.5rem;top:.5rem}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative}

/* --------------------------------------------------------------- type ----- */
.h2,.h3,.hero__h,.coffee__h,.quote,.step__n,.affair__title,.mate__name,.case__name{
  font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dtrack);
  line-height:var(--dleading);margin:0;text-wrap:balance;
}
.h2{font-size:var(--fs-h2);max-width:22ch}
.h2--wide{max-width:30ch}
.h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-0.015em}
.lead{font-size:var(--fs-lead);line-height:1.5}

.eyebrow{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;
  font-family:var(--font-ui);font-size:var(--fs-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.17em;color:var(--muted);
}
.eyebrow__rule{display:block;width:1.75rem;height:1px;background:currentColor;opacity:.55;flex:none}

.ic{width:1.1em;height:1.1em;flex:none}

/* ------------------------------------------------------------- buttons ---- */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.6rem;background:var(--bg);color:var(--fg);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;border-radius:var(--r);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t),box-shadow var(--t);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--warm);
  transform:translateY(101%);transition:transform var(--t);
}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgb(16 27 46 / .55);color:var(--ink)}
  .btn:hover::after{transform:translateY(0)}
}
/* Touch devices get a plain press state instead of a latched hover. */
.btn:active{transform:translateY(1px)}
.btn--sm{padding:.6rem 1.05rem;font-size:.8125rem}
.btn--lg{padding:1.1rem 1.9rem;font-size:.95rem}
.btn--ink{--bg:var(--ink);--fg:var(--paper)}
.sec--ink .btn{--bg:var(--paper);--fg:var(--ink)}
.sec--ink .btn::after{background:var(--gold)}

.lnk{
  position:relative;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--fs-sm);font-weight:600;
  padding-bottom:.15rem;background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t),gap var(--t);
}
/* Hit area grown with a pseudo-element rather than padding: padding-bottom would
   push the underline away from the text, since it is drawn at the padding edge. */
.lnk::before{content:"";position:absolute;inset:-11px -4px;}
@media (hover:hover){
  .lnk:hover{gap:.85rem;background-size:0% 1px}
  .lnk:hover .ic{transform:translateX(3px)}
}
.lnk .ic{transition:transform var(--t)}

/* -------------------------------------------------------------- header ---- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background var(--t),box-shadow var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding:.85rem var(--gutter);
  display:flex;align-items:center;gap:1.5rem;
}
/* Brand signature: mark and division, not one cramped lockup. At gap .1rem
   ".Studio" sat right against the logo's own gold B and the two fought each
   other. Now a hairline separates them and "STUDIO" is set in letterspaced
   caps — the same typographic register as the section rails and eyebrows, so
   it reads as "the Studio arm of MohB" and belongs to the rest of the page.
   Deliberately set in --font-ui, not --font-display: the signature must not
   change shape when the poster/editorial typo set is switched. */
.brand{display:flex;align-items:center;gap:.85rem;margin-right:auto}
.brand__mark{width:auto;height:26px;transition:transform .7s var(--ease)}
@media (hover:hover){.brand:hover .brand__mark{transform:rotate(360deg)}}
.brand__rule{
  width:1px;height:19px;background:var(--line);display:block;flex:none;
  transition:background var(--t);
}
.brand__word{
  font-family:var(--font-ui);font-size:.68rem;font-weight:700;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;transition:color var(--t);
}
/* The pair is one link, so hovering anywhere lifts the whole signature. */
@media (hover:hover){
  .brand:hover .brand__word{color:var(--ink)}
  .brand:hover .brand__rule{background:var(--gold)}
}

/* Phones: mark, language switch and burger share a narrow bar. Verified down
   to 320px — the caps set is compact enough that the word never has to hide. */
@media (max-width:600px){
  .brand{gap:.7rem}
  .brand__word{font-size:.62rem;letter-spacing:.17em}
}
@media (max-width:360px){
  .brand{gap:.55rem}
  .brand__word{font-size:.58rem;letter-spacing:.14em}
}

.nav{display:flex;gap:1.5rem}
.nav__l{
  font-size:.8125rem;font-weight:500;color:var(--muted);
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:.2rem;transition:background-size var(--t),color var(--t);
}
@media (hover:hover){.nav__l:hover{color:var(--ink);background-size:100% 1px}}

.hdr__right{display:flex;align-items:center;gap:1rem}
/* Padded to a 44px-tall hit area — it was 20px, and the language switch is one of
   only two controls in the header on a phone. */
.lang{display:flex;align-items:center;gap:.25rem;min-height:44px;padding-inline:.35rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.lang .is-on{color:var(--ink)}
.lang__sep{opacity:.4}

/* 44×44 minimum: this is the only navigation on a phone, and 36px missed it. */
.burger{display:none;width:44px;height:44px;margin-right:-10px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform var(--t),opacity var(--t),background var(--t)}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* With the overlay open the header sits on top of a dark field, so it has to
   invert — otherwise a pale band with a navy logo floats above a navy menu. */
.nav-open .hdr{background:transparent!important;backdrop-filter:none;border-bottom-color:transparent}
.nav-open .brand__mark{filter:brightness(0) invert(1)}
.nav-open .brand__word{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.nav-open .brand__rule{background:color-mix(in srgb,var(--paper) 34%,transparent)}
.nav-open .lang{color:color-mix(in srgb,var(--paper) 60%,transparent)}
.nav-open .lang .is-on{color:var(--paper)}
.nav-open .burger span{background:var(--paper)}

.mnav{position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--paper);display:grid;place-items:center;overflow-y:auto}
.mnav[hidden]{display:none}
.mnav__in{display:grid;gap:.35rem;text-align:center;padding:5rem var(--gutter) var(--gutter)}
/* Padding rather than gap, so each row is a comfortable tap target. */
.mnav__l{padding-block:.55rem}
.mnav__l{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(1.8rem,7vw,2.6rem);letter-spacing:-0.03em}
.mnav__l--cta{color:var(--gold);margin-top:.5rem}
.mnav__lang{margin-top:1.25rem;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.65}

@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .hdr__right .btn{display:none}
}

/* Sticky CTA — phones only.
   The header button is hidden below 1080px, so on a phone the only routes to the
   contact section were the burger menu or scrolling the full 13,000px page. This
   bar fades in once the hero is out of view, so it never competes with the first
   impression. */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.cta-bar.is-in{transform:translateY(0)}
.cta-bar .btn{width:100%;justify-content:center}
@media (max-width:1080px){ .cta-bar{display:block} }
.nav-open .cta-bar{transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){.cta-bar{transition:none}}

/* ------------------------------------------------------------ sections ---- */
.sec{position:relative;padding-block:var(--sp-sec)}
.sec--tint{background:var(--paper2)}
.sec--ink{background:var(--ink);color:color-mix(in srgb,var(--paper) 88%,transparent)}
.sec--ink .eyebrow{color:color-mix(in srgb,var(--paper) 60%,transparent)}
.sec--ink .h2,.sec--ink .h3{color:var(--paper)}
.sec--gold{background:var(--gold);color:var(--ink)}
.sec--gold .eyebrow{color:color-mix(in srgb,var(--ink) 62%,transparent)}

/* rotated rail label down the left edge — echoes the vertical chapter
   labels in the MohB brand book */
.rail{
  position:absolute;left:2rem;top:var(--sp-sec);
  display:none;flex-direction:column;align-items:center;gap:.85rem;
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;opacity:.42;
}
.rail__num{font-variant-numeric:tabular-nums}
.rail__line{width:1px;height:2.75rem;background:currentColor}
.rail__label{writing-mode:vertical-rl;text-orientation:mixed}
/* Only once there is genuinely room outside the container, otherwise the label
   crowds the text it is meant to annotate. */
@media (min-width:1640px){.rail{display:flex}}

/* ---------------------------------------------------------------- hero ---- */
.hero{position:relative;min-height:min(90svh,50rem);display:flex;align-items:flex-end;padding-top:5rem;overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:var(--gutter);padding-bottom:0;width:100%}
/* Copy centres in the column; the figure stays welded to the bottom edge. */
.hero__copy{align-self:center;padding-block:clamp(1.5rem,5vh,3rem);max-width:41rem}

.hero__h{font-size:var(--fs-h1);margin:0 0 1.5rem}
.hero__h1,.hero__h2{display:block}
/* The gold marker paints per line box (box-decoration-break) so it never
   detaches from the text when the headline wraps. */
.hero__h2 em{
  font-style:normal;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:0% .26em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:mark .85s var(--ease) .5s forwards;
}
@keyframes mark{to{background-size:100% .26em}}

.hero__sub{font-size:var(--fs-lead);color:var(--muted);max-width:38ch;margin-bottom:2rem}
.hero__cta{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}

.hero__ground{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__disc{
  position:absolute;right:-3vw;bottom:0;width:min(42vw,36rem);aspect-ratio:1;
  border-radius:50%;background:var(--gold);opacity:.92;
}
/* Cut deliberately: an outline watermark here sat behind the primary button and
   cost more in legibility than it added in depth. The disc and the cutout carry
   the composition on their own. */
.hero__word{display:none}

/* The cutout is welded to the section edge, so the dark band below reads as the
   floor he is standing on. The source asset is already cropped mid-torso — a
   downward shadow would expose that as a mistake, so the shadow stays tight. */
.hero__figure{position:relative;justify-self:end;align-self:end;width:min(100%,30rem);margin-bottom:-2px;display:flex}
.hero__figure picture{display:block;width:100%}
.hero__figure img{width:100%;display:block;filter:drop-shadow(0 6px 34px rgb(16 27 46 / .14))}
.hero__tag{
  position:absolute;left:-1.5rem;bottom:4.5rem;
  padding:.42rem .8rem;background:var(--ink);color:var(--paper);
  font-size:.7rem;font-weight:600;letter-spacing:.04em;border-radius:var(--r);
  transform:rotate(-2.5deg);white-space:nowrap;
}

.cue{position:absolute;left:var(--gutter);bottom:1.5rem;display:flex;align-items:center;gap:.7rem;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cue__line{display:block;width:3.5rem;height:1px;background:currentColor;transform-origin:left;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.4);opacity:.4}50%{transform:scaleX(1);opacity:1}}

@media (max-width:900px){
  .hero{min-height:auto;padding-top:5.5rem}
  .hero__in{grid-template-columns:1fr}
  .hero__copy{max-width:none;padding-bottom:2rem}
  .hero__figure{width:min(74%,20rem);justify-self:center}
  .hero__disc{width:min(78vw,24rem);right:-12vw}
  .hero__word{font-size:32vw;opacity:.4}
  .hero__tag{left:auto;right:-.5rem;bottom:5rem}
  .cue{display:none}
}

/* ------------------------------------------------------------- reality ---- */
.reality .h2{max-width:26ch;margin-bottom:2.75rem}
.jobwall{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:3.25rem;max-width:58rem}
.job{
  padding:.45rem .85rem;border:1px solid var(--line-on);border-radius:100px;
  font-size:.8125rem;color:color-mix(in srgb,var(--paper) 62%,transparent);
  transition:border-color var(--t),color var(--t),transform var(--t);
}
@media (hover:hover){.job:hover{transform:translateY(-2px)}}
.job--hot{border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold)}
.job--last{border-style:dashed;border-color:var(--warm);color:var(--warm);font-weight:600}

/* Three options, not two plus an orphaned punchline. A and B stay flat and grey;
   C is a filled gold block so the eye lands on the answer without reading first,
   and it names us explicitly — the previous "There is a third one." left both the
   framing and the identity to be inferred. */
.fork__lead{
  font-size:var(--fs-lead);color:var(--paper);max-width:58ch;margin-bottom:1.75rem;
  text-wrap:balance;
}
.fork{
  display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:0;
  border-top:1px solid var(--line-on);margin-bottom:0;align-items:stretch;
}
.fork__c{padding:1.75rem 1.75rem 1.9rem 0;display:flex;gap:1.1rem;align-items:flex-start}
.fork__c+.fork__c{border-left:1px solid var(--line-on);padding-left:1.75rem}
.fork__n{
  font-family:var(--font-display);font-weight:var(--dw);font-size:1.35rem;
  color:var(--warm);line-height:1.1;flex:none;
}
.fork__t{
  font-family:var(--font-display);font-weight:var(--dw);font-size:1.15rem;
  letter-spacing:-0.02em;line-height:1.15;margin:0 0 .5rem;color:var(--paper);
}
.fork__c p{color:color-mix(in srgb,var(--paper) 70%,transparent);max-width:34ch;font-size:.95rem}

/* Option C — the answer */
.fork__c--us{
  background:var(--gold);color:var(--ink);
  border-left-color:var(--gold);margin-top:-1px;
  padding:1.75rem;
}
.fork__c--us .fork__n{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.fork__t--us{color:var(--ink)}
.fork__c--us p{color:color-mix(in srgb,var(--ink) 82%,transparent);max-width:38ch}
.fork__cta{margin-top:1rem;color:var(--ink)}

@media (max-width:880px){
  .fork{grid-template-columns:1fr}
  .fork__c{padding-right:0}
  .fork__c+.fork__c{border-left:0;border-top:1px solid var(--line-on);padding-left:0}
  /* Full-bleed to the gutter edges so the answer still reads as a block, not a
     stray coloured paragraph in the flow.
     Doubled class: `.fork__c+.fork__c{padding-left:0}` above is a two-class
     selector and would otherwise win, leaving the C flush against the edge. */
  .fork__c.fork__c--us{
    border-top:0;padding:1.6rem var(--gutter);
    margin-inline:calc(var(--gutter) * -1);margin-top:1.5rem;
  }
}

/* ------------------------------------------------------------ why/grid ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter) clamp(2rem,6vw,5rem);align-items:start}
.grid2__r{max-width:var(--measure)}
.grid2__r p{color:var(--muted)}
.grid2__r .lead{color:var(--ink)}
.quote{
  font-size:clamp(1.35rem,2.4vw,1.9rem);color:var(--ink);
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);
}
.quote::before{content:"";display:block;width:2.5rem;height:.3rem;background:var(--gold);margin-bottom:1.1rem}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}

/* ---------------------------------------------------------- principles ---- */
.how .h2{margin-bottom:3rem}
.prin{border-top:1px solid var(--line)}
.prin__i{display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem;padding:2rem 0;border-bottom:1px solid var(--line)}
/* Kept horizontal: rotated digits looked like a glyph error at this size and the
   heading already carries the meaning. The rotation motif lives in the section
   rails and the case artwork, where it costs nothing to read. */
.prin__n{
  font-family:var(--font-display);font-weight:var(--dw);font-size:1.05rem;
  letter-spacing:.04em;color:var(--warm-ink);font-variant-numeric:tabular-nums;
  line-height:1.35;
}
.prin__b{max-width:var(--measure)}
.prin__b p{margin-top:.6rem;color:var(--muted)}
@media (max-width:700px){
  .prin__i{grid-template-columns:1fr;gap:.4rem}
  .prin__n{font-size:.9rem}
}

/* ------------------------------------------------------------ services ---- */
.svc .h2{margin-bottom:3rem}
.svc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1px}
.card{background:var(--paper);padding:clamp(1.5rem,2.5vw,2.25rem);position:relative;transition:background var(--t)}
@media (hover:hover){.card:hover{background:color-mix(in srgb,var(--gold) 12%,var(--paper))}}
.card__n{
  display:block;font-family:var(--font-display);font-weight:var(--dw);
  font-size:.95rem;letter-spacing:.08em;color:var(--warm-ink);margin-bottom:1.75rem;
}
.card__k{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:.6rem 0 1rem}
.card p:last-child{color:var(--muted);font-size:.96rem}
@media (max-width:900px){.svc__grid{grid-template-columns:1fr}}

/* the retainer — visually the heaviest block, because it is the business model */
.affair{
  background:var(--ink);color:color-mix(in srgb,var(--paper) 86%,transparent);
  padding:clamp(1.75rem,3.5vw,3rem);position:relative;overflow:hidden;
  border:1px solid var(--ink);
}
.affair::before{
  content:"";position:absolute;right:-6rem;top:-6rem;width:22rem;aspect-ratio:1;
  border-radius:50%;border:1px solid var(--line-on);pointer-events:none;
}
.affair__head{display:flex;gap:1.5rem;align-items:baseline;margin-bottom:1.75rem;position:relative}
.affair__n{font-family:var(--font-display);font-weight:var(--dw);font-size:.95rem;letter-spacing:.08em;color:var(--gold)}
.affair__title{font-size:clamp(1.8rem,3.6vw,2.9rem);color:var(--gold)}
.affair__kick{margin:.4rem 0 0;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:color-mix(in srgb,var(--paper) 55%,transparent)}
.affair__body{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;position:relative}
.affair__text{max-width:58ch}
.affair__lead{font-size:var(--fs-lead);color:var(--paper)}
.affair__items{display:flex;flex-wrap:wrap;gap:.4rem;align-content:start}
.affair__items li{padding:.35rem .7rem;border:1px solid var(--line-on);border-radius:100px;font-size:.78rem;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.affair__close{
  grid-column:1/-1;margin-top:.5rem;padding-top:1.5rem;border-top:1px solid var(--line-on);
  font-size:var(--fs-lead);color:var(--paper);max-width:60ch;
}
@media (max-width:900px){.affair__body{grid-template-columns:1fr}}

/* ------------------------------------------------------------- process ---- */
.proc .h2{margin-bottom:0}
/* A wrapping grid, not a horizontal scroller. As a scroller the ∞ step — the
   one the business actually runs on — sat off-screen, and scroll-snap fought the
   leading padding. Everything is visible here at every width. */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:3rem 0 2.5rem;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  border-top:1px solid var(--line-on);
}
.step{padding:1.6rem 1.5rem 1.9rem 0;position:relative}
.step::after{content:"";position:absolute;left:0;top:0;bottom:1.25rem;width:1px;background:var(--line-on)}
.step:not(:nth-child(4n+1)){padding-left:1.5rem}
.step:nth-child(4n+1)::after{display:none}
.step:nth-child(n+5){border-top:1px solid var(--line-on);margin-top:-1px;padding-top:1.6rem}
.step__n{
  display:block;font-size:clamp(2.5rem,4.5vw,3.6rem);line-height:1;margin-bottom:1rem;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--paper) 40%,transparent);
  font-variant-numeric:tabular-nums;
}
.step--gold .step__n{-webkit-text-stroke:1px var(--gold);color:transparent}
.step--gold .step__t{color:var(--gold)}
.step__t{font-family:var(--font-display);font-weight:var(--dw);font-size:1.25rem;letter-spacing:-0.02em;margin:0 0 .55rem;color:var(--paper)}
.step__b{font-size:.94rem;color:color-mix(in srgb,var(--paper) 66%,transparent);max-width:30ch}
.proc__note{font-size:.9rem;color:color-mix(in srgb,var(--paper) 58%,transparent);max-width:52ch;padding-top:1.5rem;border-top:1px solid var(--line-on)}

@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:not(:nth-child(4n+1)){padding-left:0}
  .step:nth-child(4n+1)::after{display:block}
  .step:nth-child(odd)::after{display:none}
  .step:not(:nth-child(even)){padding-right:1.5rem}
  .step:nth-child(even){padding-left:1.5rem}
  .step:nth-child(n+3){border-top:1px solid var(--line-on);margin-top:-1px;padding-top:1.6rem}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .step,.step:not(:nth-child(even)),.step:nth-child(even){padding-inline:0}
  .step::after{display:none}
  .step:nth-child(n+2){border-top:1px solid var(--line-on)}
}

/* --------------------------------------------------------------- cases ---- */
.cases .h2{margin-bottom:3rem}
.cases__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem)}
.case{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;overflow:hidden}
.case__art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper2)}
.case__shape{position:absolute;border-radius:50%;transition:transform .8s var(--ease)}
.case__shape{width:62%;aspect-ratio:1;left:12%;top:18%}
.case__shape--2{width:34%;left:52%;top:46%;border-radius:0}
.case--warm .case__shape{background:var(--warm);opacity:.85}
.case--warm .case__shape--2{background:var(--ink);opacity:.9}
.case--navy .case__shape{background:var(--navy)}
.case--navy .case__shape--2{background:var(--gold)}
.case--gold .case__shape{background:var(--gold)}
.case--gold .case__shape--2{background:var(--ink);border-radius:50%}
@media (hover:hover){
  .case:hover .case__shape{transform:rotate(180deg) translateX(6%)}
  .case:hover .case__shape--2{transform:rotate(-180deg)}
}
.case__meta{padding:1.35rem 1.5rem 1.6rem}
.case__status{display:inline-block;margin-bottom:.85rem;padding:.25rem .6rem;border:1px solid var(--line);border-radius:100px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.case--gold .case__status{border-color:var(--ink);color:var(--ink)}
.case__name{font-size:1.5rem;margin-bottom:.3rem}
.case__kind{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--warm-ink);margin-bottom:.8rem}
.case__line{font-size:.92rem;color:var(--muted);margin:0}
@media (max-width:900px){
  .cases__grid{grid-template-columns:1fr}
  .case__art{aspect-ratio:16/9}
}

.admin-note{
  margin-top:2rem;padding:1rem 1.25rem;border-left:3px solid var(--warm);
  background:color-mix(in srgb,var(--warm) 10%,var(--paper));
  font-size:.85rem;color:var(--muted);
}

/* ---------------------------------------------------------------- team ---- */
.team .h2{margin-bottom:3.25rem}
.team__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
/* Both cutouts stand on a warm panel rather than straight on the ink. Stefan's
   navy shirt disappeared against the dark band, and a half-height gradient read
   as a stray grey box. A fixed figure height also puts the two of them on one
   shared baseline at a matching scale. */
.mate__fig{
  position:relative;margin-bottom:1.5rem;overflow:hidden;
  height:clamp(15rem,25vw,21rem);
  display:flex;align-items:flex-end;justify-content:center;
  background:var(--paper);
  border-bottom:2px solid var(--gold);
}
/* <picture> is the flex item, not the <img>. Without sizing it, height:100% on
   the image resolves against an auto-height parent, falls back to auto, and the
   portrait overflows upward into the headline. */
.mate__fig picture{display:block;height:100%;max-width:100%}
.mate__fig img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom center}
.mate__name{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--paper);margin-bottom:.4rem}
.mate__role{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);margin-bottom:1rem}
.mate__body{font-size:.96rem;color:color-mix(in srgb,var(--paper) 68%,transparent);max-width:44ch}
.team__punch{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.75rem;border-top:1px solid var(--line-on);
  font-size:var(--fs-lead);color:var(--paper);max-width:62ch;
}
@media (max-width:820px){.team__grid{grid-template-columns:1fr;gap:3rem}.mate__fig{height:clamp(14rem,52vw,18rem)}}

/* -------------------------------------------------------------- coffee ---- */
.coffee__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.coffee__h{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:1.25rem}
.coffee__sub{max-width:46ch;color:color-mix(in srgb,var(--ink) 78%,transparent);margin-bottom:2rem}
.cal{margin-bottom:1.75rem}
.cal__note{margin:.75rem 0 0;font-size:.78rem;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.cal__frame{margin-top:1.25rem;border:1px solid var(--ink);background:var(--paper);height:min(70vh,42rem)}
.cal__frame iframe{width:100%;height:100%;border:0;display:block}
.coffee__egg{
  font-family:var(--font-display);font-weight:var(--dw);font-size:1.15rem;
  letter-spacing:-0.02em;opacity:.75;
}
@media (max-width:900px){.coffee__in{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- form ---- */
.form{background:var(--paper);border:1px solid var(--ink);padding:clamp(1.35rem,2.5vw,2rem)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:block;margin-bottom:1rem}
.field__l{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:.4rem}
.field__i{
  width:100%;padding:.8rem .9rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);
  font:inherit;color:var(--ink);transition:border-color var(--t);
  /* Exactly 16px, not less: iOS Safari zooms the whole page in when a focused
     input is under 16px, and the visitor then has to pinch back out. */
  font-size:1rem;
}
.field__i:focus{border-color:var(--ink);outline:none}
.field__i--area{resize:vertical;min-height:6.5rem}
.form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__trap input{font-size:1rem}
.form__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.form__note{font-size:.75rem;color:var(--muted)}
.form__msg{margin:1rem 0 0;font-size:.875rem;display:none}
.form__msg.is-ok,.form__msg.is-err{display:block}
.form__msg.is-ok{color:#2C6E3F}
.form__msg.is-err{color:#96331C}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}

/* -------------------------------------------------------------- footer ---- */
.ftr{background:var(--ink);color:color-mix(in srgb,var(--paper) 70%,transparent);padding-top:clamp(2.5rem,5vw,3.5rem)}
.ftr__in{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:2rem;padding-bottom:2.5rem}
/* Block, not flex-wrap: with a max-width the tagline still fitted beside the
   wordmark and never wrapped to its own line. */
/* Same mark-and-division signature as the header — a footer still running the
   old tight lockup would contradict the masthead on every page. Hairline is
   --line-on here because the footer sits on the ink band.
   The signature gets its own flex row (.ftr__sig) rather than making
   .ftr__brand a flex container: the tagline below carries its own max-width
   rule further down this file, which clamped it back onto the signature line. */
.ftr__brand{display:block}
.ftr__sig{display:flex;align-items:center;gap:.85rem}
.ftr__mark{height:24px;width:auto;filter:brightness(0) invert(1);opacity:.92;display:block;flex:none}
.ftr__rule{width:1px;height:18px;background:var(--line-on);display:block;flex:none}
.ftr__word{
  font-family:var(--font-ui);font-size:.68rem;font-weight:700;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 72%,transparent);
}
.ftr__tag{display:block;margin:.9rem 0 0;font-size:.88rem;max-width:32ch}
.ftr__col{display:flex;flex-direction:column;gap:.1rem;font-size:.875rem}
/* Vertical padding instead of a gap: the rows stay visually the same distance
   apart, but each link becomes a 40px+ tap target instead of a 23px one. */
.ftr__l{display:inline-flex;align-items:center;gap:.5rem;padding-block:.55rem;transition:color var(--t)}
@media (hover:hover){.ftr__l:hover{color:var(--gold)}}
.ftr__l--plain{opacity:.6}
.ftr__base{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:1.25rem;border-top:1px solid var(--line-on);font-size:.78rem;opacity:.72;
}
.ftr__top{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 0}
.ftr__top .ic{transform:rotate(180deg)}
@media (max-width:820px){.ftr__in{grid-template-columns:1fr;gap:1.75rem}}

/* --------------------------------------------------------- basic pages ---- */
/* padding-block, not the padding shorthand: the shorthand zeroed the
   padding-inline that .wrap supplies, so the heading escaped the gutter while
   the body stayed inside it. And the measure goes on the children — setting
   max-width on .wrap itself re-centred the column away from the heading. */
.page-hd{padding-block:calc(6rem + var(--sp-sec) / 2) 2rem}
.page-hd .h2{max-width:30ch}
.page-body{padding-bottom:var(--sp-sec)}
.page-body > *{max-width:70ch}
.page-body h2,.page-body h3{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--dtrack);margin:2rem 0 .75rem}
.page-body h2{font-size:1.6rem}
.page-body h3{font-size:1.2rem}
.page-body p,.page-body li{color:var(--muted)}
.page-body ul{list-style:disc;padding-left:1.25rem;margin:0 0 1.1em}
.page-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.page-body table{width:100%;border-collapse:collapse;margin:0 0 1.5rem}
.page-body th,.page-body td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--line);font-size:.92rem}

.nf{min-height:70svh;display:grid;place-items:center;text-align:center;padding:8rem var(--gutter) var(--sp-sec)}
.nf__n{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(5rem,18vw,12rem);line-height:.85;color:transparent;-webkit-text-stroke:1px var(--line)}

/* ------------------------------------------------------------- reveals ---- */
/* Scoped to .js: without JavaScript nothing is hidden, so a failed script can
   never leave the page blank. The class is set by an inline snippet in <head>. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero__h2 em{animation:none;background-size:100% .26em}
  .cue__line{animation:none}
  .btn:hover,.case:hover .case__shape,.case:hover .case__shape--2,.brand:hover .brand__mark{transform:none}
}

/* ------------------------------------------------------------ printing ---- */
@media print{
  .hdr,.mnav,.cue,.rail,.ftr__top,.form{display:none}
  body{background:#fff;color:#000}
  .sec--ink,.sec--gold{background:#fff;color:#000}
}