/* ============================================================
   Bywho — site stylesheet
   Palette and type per ByWho_ Brand Guideline.pdf and CLAUDE.md.

   Fixes carried over from the detector run on the original pages:
   - Never black on green. #141414 on #4C6342 is 2.8:1. White on green
     is 6.6:1, so every green surface takes white text.
   - Functional text floor is 11px, not 10px.
   - Leading floor is 1.3 on running text.
   - The .trust-track marquee CSS is gone; the Trusted band is a static
     row, so nothing loops forever in the corner of the eye.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --ink:#323232;
  --black:#141414;
  --green:#4C6342;
  --green-dk:#3C5034;
  --green-tint:#EFF2ED;
  --stone:#6C7266;              /* 4.96:1 on paper */
  --stone-dk:#9FA69A;           /* 6.1:1 on black */
  --line:#E4E4DE;
  --line-dk:#2E2E2A;

  --sans:"Satoshi","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --gut:clamp(20px,5vw,72px);
  --max:1320px;
  --radius:2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.slate{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
}
.on-dark .slate,.dark .slate{color:var(--stone-dk)}

/* ---------- build-ahead banner ---------- */
.buildahead{
  background:#2B2B27;color:#F0F0EA;font-family:var(--mono);font-size:11px;
  letter-spacing:.07em;padding:10px var(--gut);text-align:center;line-height:1.6;
}
.buildahead b{color:#E7C77B}
.buildahead a{color:#fff}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mark img{height:24px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center;font-size:15px}
.nav-links a{text-decoration:none;color:var(--ink);padding:2px 0;
             border-bottom:1px solid transparent}
.nav-links a:hover{border-bottom-color:var(--green);color:var(--green-dk)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--black);color:var(--black)}
@media (max-width:900px){ .nav-links{display:none} }

.btn{
  display:inline-block;background:var(--black);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:12px 20px;border-radius:var(--radius);
  transition:background .2s;
}
.btn:hover{background:var(--green)}      /* white on green = 6.6:1 */
.btn.ghost{background:transparent;color:var(--black);border:1px solid var(--black)}
.btn.ghost:hover{background:var(--black);color:#fff}

/* ---------- type ---------- */
h1,h2,h3{text-wrap:balance;letter-spacing:-.035em;line-height:1.06;color:var(--black)}
h1{font-weight:900;font-size:clamp(40px,8vw,96px)}
h2{font-weight:900;font-size:clamp(28px,4.4vw,54px)}
h3{font-weight:700;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.02em;line-height:1.25}
.lead{font-weight:900;letter-spacing:-.035em;line-height:1.08;
      font-size:clamp(30px,5.2vw,62px);max-width:17ch;color:var(--black)}
em{font-style:normal;color:var(--green)}
.dark em,.hero em{color:var(--green-tint)}
p{line-height:1.6}
.sub{color:var(--ink);max-width:56ch;font-size:clamp(17px,1.7vw,21px);margin-top:18px}

/* ---------- bands ---------- */
.band{padding:clamp(56px,9vw,120px) 0;border-top:1px solid var(--line)}
.band.tint{background:var(--green-tint);border-top-color:transparent}
.band.dark{background:var(--black);color:#E6E6DE;border-top-color:transparent}
.band.dark h1,.band.dark h2,.band.dark h3,.band.dark .lead{color:#fff}
.band.dark p{color:#D6D6CE}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;
          gap:16px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,44px)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
     gap:clamp(26px,5vw,72px);align-items:start;margin-top:34px}
.two p+p{margin-top:16px}
@media (max-width:820px){ .two{grid-template-columns:1fr} }

/* ---------- credit roll ---------- */
.roll{border-top:1px solid var(--black)}
.credit{
  border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr);
  gap:clamp(16px,4vw,56px);padding:clamp(22px,3vw,34px) 0;
  text-decoration:none;transition:background .3s;
}
/* The row indents as it inverts. Translating the children keeps that off the
   layout path — animating padding reflows every row in the roll each frame. */
.credit>*{transition:transform .3s}
.credit:hover>*,.credit:focus-visible>*{transform:translateX(16px)}
.credit:hover,.credit:focus-visible{background:var(--black);color:#fff}
.credit-brand{font-weight:900;font-size:clamp(24px,4vw,44px);letter-spacing:-.04em;
              line-height:1.05;color:var(--black)}
.credit:hover .credit-brand,.credit:focus-visible .credit-brand{color:#fff}
.credit-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
              gap:14px 24px;align-content:start;padding-top:6px}
.cl-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--stone);display:block;margin-bottom:5px}
.cl-v{font-size:15px;font-weight:500;color:var(--ink);line-height:1.35}
.credit:hover .cl-k,.credit:focus-visible .cl-k{color:#9BB08F}
.credit:hover .cl-v,.credit:focus-visible .cl-v{color:#fff}

/* ---------- trusted band (static, never a marquee) ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
       padding:22px 0}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.trust-item{font-weight:700;font-size:15px;letter-spacing:-.01em;color:#4B4B47}

/* ---------- work index ---------- */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
           gap:clamp(14px,2vw,22px)}
.card{display:block;text-decoration:none;border:1px solid var(--line);
      border-radius:var(--radius);overflow:hidden;background:var(--paper);
      transition:border-color .25s}
.card:hover,.card:focus-visible{border-color:var(--black)}
.card-media{aspect-ratio:16/10;background:var(--green-tint);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.03)}
.card-media.empty{display:grid;place-items:center}
.card-body{padding:18px 20px 22px}
.card-b{font-weight:800;font-size:23px;letter-spacing:-.03em;color:var(--black)}
.card-m{margin-top:7px;color:var(--stone);font-size:14px}

/* ---------- project page ---------- */
.hero{background:var(--black);color:#fff;padding:clamp(40px,7vw,88px) 0 0}
.hero h1{color:#fff;line-height:.95;font-size:clamp(52px,11vw,140px)}
.hero-sub{margin-top:20px;max-width:46ch;color:#D6D6CE;font-size:clamp(17px,1.7vw,20px)}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--stone-dk);text-decoration:none;display:inline-block;
      margin-bottom:clamp(28px,5vw,54px)}
.back:hover{color:#fff}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
       gap:22px 30px;border-top:1px solid var(--line-dk);
       margin-top:clamp(36px,6vw,72px);padding:26px 0 clamp(34px,5vw,54px)}
.bs-k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
      color:var(--stone-dk);display:block;margin-bottom:7px}
.bs-v{font-size:15px;font-weight:500;color:#fff;line-height:1.35}
.bs-v.muted{color:var(--stone-dk);font-style:italic}

.film{position:relative;background:#0B0B0B;aspect-ratio:16/9;display:flex;
      align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius)}
.film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.fp{position:relative;display:flex;flex-direction:column;align-items:center;
    gap:14px;text-align:center;padding:20px}
.fp-ring{width:66px;height:66px;border:1px solid rgba(255,255,255,.5);border-radius:50%;
         display:grid;place-items:center;transition:.25s}
.film:hover .fp-ring{background:var(--green);border-color:var(--green)}
.fp-ring svg{fill:#fff;margin-left:3px}
.film-note{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
           text-transform:uppercase;color:#C9C9C1}

.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:14px;margin-top:16px}
.frame{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--green-tint)}
.frame img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .5s ease}
.frame:hover img{transform:scale(1.03)}
/* The number carries its own scrim rather than relying on the photo behind it.
   A text-shadow disappears against a bright frame, and against no frame at all
   if the image 404s. */
.frame-no{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:11px;
          letter-spacing:.1em;color:#fff;background:rgba(12,14,10,.72);
          padding:3px 7px;border-radius:var(--radius);backdrop-filter:blur(2px)}
.frame.wide{grid-column:span 2}
@media (max-width:700px){ .frame.wide{grid-column:span 1} }

.del{border-top:1px solid var(--line)}
.del-row{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
         gap:clamp(14px,4vw,54px);padding:24px 0;border-bottom:1px solid var(--line)}
.del-n{font-weight:700;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.02em;color:var(--black)}
.del-d{color:var(--ink);font-size:16px}
@media (max-width:700px){ .del-row{grid-template-columns:1fr;gap:6px} }

.next{border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) 0}
.next a{text-decoration:none;display:flex;align-items:baseline;
        justify-content:space-between;gap:20px;flex-wrap:wrap}
.n-b{font-weight:900;letter-spacing:-.04em;font-size:clamp(30px,5.5vw,64px);color:var(--black)}
.next a:hover .n-b{color:var(--green-dk)}

/* ---------- services ---------- */
.svc{border-top:1px solid var(--black)}
.svc-row{display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.6fr) auto;
         gap:clamp(14px,3vw,40px);align-items:baseline;padding:clamp(22px,3vw,32px) 0;
         border-bottom:1px solid var(--line);text-decoration:none;
         transition:background .28s,color .28s}
/* Same indent, same reason. The arrow stays anchored right rather than
   sliding past the gutter. */
.svc-row>*:not(.svc-go){transition:transform .28s}
.svc-row:hover>*:not(.svc-go){transform:translateX(16px)}
.svc-row:hover{background:var(--black);color:#fff}
.svc-i{font-family:var(--mono);font-size:11px;color:var(--stone)}
.svc-row:hover .svc-i{color:#9BB08F}
.svc-n{font-weight:800;font-size:clamp(22px,3.2vw,34px);letter-spacing:-.03em;color:var(--black)}
.svc-row:hover .svc-n{color:#fff}
.svc-d{color:var(--ink);font-size:16px;line-height:1.55}
.svc-row:hover .svc-d{color:#D6D6CE}
.svc-go{color:var(--stone);font-size:20px}
.svc-row:hover .svc-go{color:#fff}
@media (max-width:860px){
  .svc-row{grid-template-columns:auto 1fr;gap:6px 14px}
  .svc-d{grid-column:1/-1}
  .svc-go{display:none}
}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
       gap:14px;margin-top:20px}
.tier{border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.tier-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--stone);display:block;margin-bottom:8px}
.tier-v{font-weight:600;font-size:16px;color:var(--black);line-height:1.4}

/* ---------- gaps (facts only Charl can supply) ---------- */
.gap{background:#FFF3D4;color:#6B5312;border-bottom:1px dashed #C9A227;
     padding:1px 5px;border-radius:var(--radius);font-style:italic}
.dark .gap,.band.dark .gap,.hero .gap{background:#4A4126;color:#F5E4B8;
                                       border-bottom-color:#8A7433}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(34px,5vw,56px) 0 44px}
.foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      gap:26px 30px}
.fc{display:flex;flex-direction:column;gap:9px;font-size:15px}
.fc a{text-decoration:none;color:var(--ink);width:fit-content;
      border-bottom:1px solid transparent}
.fc a:hover{border-bottom-color:var(--green);color:var(--green-dk)}
.fh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--stone);margin-bottom:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   The Question Engine
   The studio is named after a question, so the home page asks them.
   Answers accumulate into a brief the visitor can send — the central
   interaction is also the enquiry.

   Rules this has to keep:
   - The work is never behind the questions. Skip is always present.
   - Every option is a real <button>, so keyboard and screen readers
     get the same thing a mouse does.
   - With no JS every question and every answer is still readable;
     only the accumulation stops working.
   ============================================================ */
.q-open{padding:clamp(52px,10vw,132px) 0 clamp(34px,5vw,60px)}
.q-open h1{font-size:clamp(64px,16vw,210px);line-height:.82;letter-spacing:-.055em}
.q-open .sub{margin-top:26px}
.q-skip{margin-top:30px;display:flex;gap:14px 22px;flex-wrap:wrap;align-items:center}

.q-stage{border-top:1px solid var(--line);padding:clamp(44px,7vw,92px) 0}
.q-stage[data-locked="true"]{opacity:.42}
.q-stage[data-locked="true"] .q-opt{pointer-events:none}
.q-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
     text-transform:uppercase;color:var(--stone)}
.q-ask{font-weight:900;letter-spacing:-.04em;line-height:1.02;color:var(--black);
       font-size:clamp(34px,6.6vw,82px);margin-top:12px;max-width:15ch;text-wrap:balance}
.q-ask em{font-style:normal;color:var(--green)}

.q-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
        gap:12px;margin-top:clamp(28px,4vw,44px)}
.q-opt{
  appearance:none;text-align:left;cursor:pointer;font:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px 22px;color:var(--ink);
  transition:border-color .2s,background .2s;
}
.q-opt:hover{border-color:var(--black)}
.q-opt .o-n{display:block;font-weight:700;font-size:19px;letter-spacing:-.015em;
            color:var(--black);line-height:1.25}
.q-opt .o-d{display:block;margin-top:7px;font-size:15px;color:var(--stone);line-height:1.45}
.q-opt[aria-pressed="true"]{background:var(--black);border-color:var(--black)}
.q-opt[aria-pressed="true"] .o-n{color:#fff}
.q-opt[aria-pressed="true"] .o-d{color:#B9C0B2}

/* the brief, assembling as they go */
.brief{position:sticky;bottom:0;z-index:40;background:var(--black);color:#fff;
       border-top:1px solid #2E2E2A;transform:translateY(100%);
       transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.brief.up{transform:translateY(0)}
.brief-in{max-width:var(--max);margin:0 auto;padding:16px var(--gut);
          display:flex;gap:12px 26px;align-items:center;justify-content:space-between;
          flex-wrap:wrap}
.brief-txt{font-size:16px;line-height:1.45;max-width:62ch}
.brief-txt b{font-weight:700;color:#fff}
.brief-txt .slot{color:#9FA69A}
.brief-txt .slot.set{color:var(--green-tint);font-weight:600}
.brief-go{display:flex;gap:10px;flex-wrap:wrap}

.q-out{background:var(--black);color:#fff;padding:clamp(52px,9vw,120px) 0}
.q-out h2{color:#fff;font-size:clamp(30px,5.4vw,66px);line-height:1.04;max-width:20ch}
.q-out .lede{margin-top:22px;max-width:56ch;color:#D6D6CE;font-size:clamp(17px,1.8vw,21px)}
.q-out .route{margin-top:clamp(30px,4vw,46px);display:grid;
              grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.route-card{border:1px solid #2E2E2A;border-radius:var(--radius);padding:20px 22px;
            text-decoration:none;transition:border-color .2s,background .2s}
.route-card:hover{border-color:var(--green);background:#191C15}
.route-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
         text-transform:uppercase;color:#9FA69A;display:block}
.route-v{display:block;margin-top:8px;font-weight:700;font-size:19px;color:#fff}

@media (prefers-reduced-motion:reduce){
  .brief{transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   Business card layout
   ============================================================ */
.card-hero{padding:clamp(52px,10vw,128px) 0 clamp(40px,6vw,72px)}
.card-hero h1{font-size:clamp(60px,15vw,190px);line-height:.84;letter-spacing:-.055em}
/* h1 runs at .84 line-height, so its descenders sit below the line box —
   this keeps the 'y' of "by" off the sentence beneath it. */
.card-line{margin-top:clamp(22px,3vw,40px);font-weight:700;color:var(--black);
           font-size:clamp(19px,2.3vw,26px);letter-spacing:-.02em;max-width:24ch}
.card-sub{margin-top:16px;max-width:56ch;font-size:clamp(17px,1.7vw,20px);color:var(--ink)}
.card-cta{margin-top:clamp(28px,4vw,42px);display:flex;gap:12px;flex-wrap:wrap}

.svc-list{list-style:none;border-top:1px solid var(--line)}
.svc-list li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
             gap:8px 32px;padding:18px 0;border-bottom:1px solid var(--line);
             align-items:baseline}
.svc-list .svc-n{font-weight:800;font-size:clamp(19px,2.4vw,27px);
                 letter-spacing:-.025em;color:var(--black)}
.svc-list .svc-d{color:var(--stone);font-size:16px}
@media (max-width:640px){ .svc-list li{grid-template-columns:1fr;gap:3px} }

/* Trusted by. Logos when we have them, type when we do not — both are a
   finished state, so the band never looks like it is waiting. */
.clients{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,52px)}
.cl{display:flex;align-items:center;min-height:40px}
.cl-logo{max-height:34px;width:auto;opacity:.78;transition:opacity .2s}
.cl:hover .cl-logo{opacity:1}
.cl-type{font-weight:700;font-size:clamp(17px,2vw,22px);letter-spacing:-.02em;
         color:#4B4B47}

/* posts */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.post-card{display:flex;flex-direction:column;gap:9px;text-decoration:none;
           border:1px solid var(--line);border-radius:var(--radius);
           padding:20px 22px 24px;background:var(--paper);transition:border-color .2s}
.post-card:hover{border-color:var(--black)}
.post-t{font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--black);
        line-height:1.28}
.post-m{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
        text-transform:uppercase;color:var(--stone)}

.post-list{border-top:1px solid var(--black)}
.post-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
          gap:10px 34px;align-items:baseline;padding:clamp(20px,2.8vw,30px) 0;
          border-bottom:1px solid var(--line);text-decoration:none;
          transition:background .25s}
.post-row>*{transition:transform .25s}
.post-row:hover>*,.post-row:focus-visible>*{transform:translateX(14px)}
.post-row:hover,.post-row:focus-visible{background:var(--green-tint)}
.post-row-t{font-weight:800;font-size:clamp(21px,3.2vw,36px);letter-spacing:-.03em;
            line-height:1.15;color:var(--black)}
.post-row-m{display:flex;flex-direction:column;gap:5px}
@media (max-width:720px){ .post-row{grid-template-columns:1fr;gap:8px} }

.back-link{display:inline-block;text-decoration:none;margin-bottom:22px}
.back-link:hover{color:var(--green-dk)}
.post-h1{font-size:clamp(32px,5.6vw,68px);line-height:1.02;max-width:20ch}
.post-meta{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:20px}

.prose{max-width:66ch}
.prose p{font-size:clamp(17px,1.7vw,19px);line-height:1.68;color:var(--ink)}
.prose p+p{margin-top:18px}
.prose h2{font-size:clamp(22px,3vw,32px);margin:clamp(32px,4vw,48px) 0 0}
.prose h2+p{margin-top:14px}
.prose em{color:var(--green-dk);font-style:italic}

/* ============================================================
   The city hero
   Canvas is the enhancement; the same content sits in HTML below.
   ============================================================ */
.hero-city{padding:0 0 clamp(40px,6vw,72px)}
.city-wrap{position:relative;background:#EFF2ED;overflow:hidden;
           border-bottom:1px solid var(--line)}
.city-wrap canvas{display:block;width:100%;height:auto;touch-action:manipulation}

.city-hud{position:absolute;left:0;right:0;top:0;padding:clamp(16px,2.4vw,26px) var(--gut);
          display:flex;gap:6px 20px;align-items:baseline;flex-wrap:wrap;pointer-events:none}
.city-district{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.15em;
               text-transform:uppercase;color:var(--green)}
.city-how{font-size:15px;color:#3B4235;font-weight:500}

.city-start{position:absolute;inset:0;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:12px;text-align:center;
            padding:20px;background:rgba(239,242,237,.82);backdrop-filter:blur(2px);
            transition:opacity .4s}
.city-start.gone{opacity:0;pointer-events:none}
.city-start-t{font-weight:900;letter-spacing:-.05em;color:var(--black);
              font-size:clamp(38px,7vw,86px);line-height:1}
.city-start-t em{font-style:normal;color:var(--green)}
.city-start-d{font-size:15px;color:var(--ink);max-width:34ch}

.city-lede{padding-top:clamp(30px,4vw,52px)}

@media (max-width:700px){
  .city-hud{padding-top:12px}
  .city-how{font-size:13px}
}
@media (prefers-reduced-motion:reduce){ .city-start{transition:none} }

/* Key cap. A phone has no space bar, so the cap swaps and only one shows. */
.key{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
     border:1px solid var(--black);border-bottom-width:3px;border-radius:4px;
     padding:5px 14px;color:var(--black);background:#fff;letter-spacing:.1em}
.key-touch{display:none}
@media (pointer:coarse){
  .key-space{display:none}
  .key-touch{display:inline-block}
}

/* ============================================================
   One fixed screen. No page scroll.
   Rows: header / content / footer. The city takes whatever the
   headline and footer leave, and the canvas measures that box.
   ============================================================ */
/* body is the full screen and .screen takes what is left, so anything above
   it — the build-ahead banner, and nothing in production — is accounted for
   rather than pushing the page past one viewport. */
body:has(.screen){height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.screen{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:0 var(--gut);overflow:hidden;
}

.scr-top{display:flex;align-items:center;justify-content:space-between;
         gap:16px;padding:clamp(18px,2.6vw,30px) 0}
.scr-top .mark img{height:clamp(28px,3.4vw,40px);width:auto}

.scr-mid{display:flex;flex-direction:column;min-height:0;
         padding-bottom:clamp(10px,1.6vw,20px)}
.scr-h1{font-weight:900;letter-spacing:-.042em;line-height:1.02;color:var(--black);
        font-size:clamp(30px,5.2vw,66px);text-wrap:balance}
.scr-h1 em{font-style:normal;color:var(--green)}
.scr-sub{margin-top:clamp(10px,1.4vw,18px);color:var(--ink);max-width:56ch;
         font-size:clamp(15px,1.5vw,18px)}

.city-wrap{position:relative;flex:1 1 auto;min-height:0;
           margin-top:clamp(14px,2vw,26px);
           border:1px solid var(--line);border-radius:var(--radius);
           background:#F4F6F1;overflow:hidden}
.city-wrap canvas{display:block;width:100%;height:100%;touch-action:manipulation}

.city-hud{position:absolute;left:0;right:0;top:0;
          padding:clamp(10px,1.5vw,18px) clamp(12px,1.8vw,22px);
          display:flex;gap:4px 16px;align-items:baseline;flex-wrap:wrap;
          pointer-events:none}
.city-district{font-family:var(--mono);font-size:11px;font-weight:700;
               letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
.city-how{font-size:14px;color:#3B4235;font-weight:500}

.city-start{position:absolute;inset:0;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:12px;text-align:center;
            padding:20px;background:rgba(244,246,241,.80);backdrop-filter:blur(2px);
            transition:opacity .4s}
.city-start.gone{opacity:0;pointer-events:none}
.city-start-d{font-size:15px;color:var(--ink);font-weight:500}

.scr-foot{display:flex;align-items:center;justify-content:space-between;
          gap:12px 26px;flex-wrap:wrap;
          padding:clamp(14px,2vw,22px) 0 clamp(18px,2.4vw,28px);
          border-top:1px solid var(--line)}
.scr-links{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;font-size:15px}
.scr-links a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.scr-links a:hover{border-bottom-color:var(--green);color:var(--green-dk)}
.scr-links .foot-cta{border:0;background:var(--black);color:#fff;
                     font-family:var(--mono);font-size:11px;font-weight:500;
                     letter-spacing:.12em;text-transform:uppercase;
                     padding:11px 18px;border-radius:var(--radius);
                     transition:background .2s}
.scr-links .foot-cta:hover{background:var(--green);color:#fff}

/* A short window would clip the city rather than shrink it, so below this
   height the screen is allowed to scroll instead of hiding content. */
@media (max-height:520px){
  body:has(.screen){height:auto;overflow:auto;display:block}
  .screen{overflow:visible}
  .city-wrap{height:280px;flex:0 0 auto}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
         overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Services wheel — an iPhone-style picker drum.
   Native scroll-snap does the momentum, so touch flick, trackpad,
   keyboard and screen readers all behave as the platform expects.
   ============================================================ */
/* With the illustration gone the wheel is the focal element, so it centres
   in the space that opened up rather than sitting beside a label. */
/* Left aligned, and the only thing on the card, so it takes the full space
   the headline and the client band left behind. */
.wheel-row{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
           align-items:flex-start;justify-content:center;gap:0;
           text-align:left}
.wheel-label{flex:0 0 auto}

.wheel{
  position:relative;flex:0 0 auto;width:100%;
  height:clamp(210px,46vh,440px);text-align:left;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scrollbar-width:none;outline:none;
  /* fades top and bottom, so the drum reads as a wheel rather than a list */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
}
.wheel::-webkit-scrollbar{display:none}
.wheel:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--radius)}

.wh-pad{height:calc(50% - 0.5em)}
.wh-item{
  scroll-snap-align:center;
  font-weight:900;letter-spacing:-.045em;line-height:1.06;
  font-size:clamp(38px,8.2vw,116px);
  color:var(--stone);opacity:.38;
  transition:color .28s,opacity .28s,transform .28s;
  padding:2px 0;
}
.wh-item.on{color:var(--black);opacity:1}

/* the horizon strip */
/* client row */
.client-row{display:flex;align-items:center;justify-content:center;
            gap:clamp(12px,2.4vw,30px);flex-wrap:wrap;
            padding:clamp(14px,2vw,22px) 0 0;text-align:center}
.clients{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px)}
.cl{display:flex;align-items:center;text-decoration:none;min-height:30px}
.cl-logo{max-height:clamp(20px,2.6vh,30px);width:auto;opacity:.72;
         transition:opacity .2s}
.cl:hover .cl-logo{opacity:1}
.cl-type{font-weight:700;font-size:clamp(14px,1.6vw,17px);letter-spacing:-.015em;
         color:#4B4B47;border-bottom:1px solid transparent;transition:.2s}
.cl:hover .cl-type{color:var(--green-dk);border-bottom-color:var(--green)}


@media (prefers-reduced-motion:reduce){
  .wheel{scroll-behavior:auto}
  .wh-item{transition:none}
}

/* WhatsApp mark on the contact button. Drawn SVG rather than an emoji or a
   unicode glyph, and it inherits the button's colour so it flips with the
   hover state. Hidden from screen readers — the label already says what the
   button does. */
.scr-links .foot-cta{display:inline-flex;align-items:center;gap:9px}
.foot-cta .wa{fill:currentColor;flex:0 0 auto;position:relative;top:-.5px}

/* The "what we do" label sits in Arial, lowercase, at Charl's request.
   The .slate treatment it inherits is mono + uppercase + .14em tracking —
   that tracking is a caps convention and reads as gappy on lowercase Arial,
   so it comes back to near-normal here. */
.wheel-label{
  font-family:Arial,Helvetica,sans-serif;
  text-transform:lowercase;
  letter-spacing:.01em;
  font-size:clamp(13px,1.35vw,16px);
  font-weight:400;
  color:var(--stone);
}

/* ============================================================
   Mobile
   Three problems the measurements showed at 375x812:
   - the drum was 374px tall, so all six services were visible at
     once and it read as a list rather than a picker;
   - the label sat 38px while "Media Production" could take 43px
     before wrapping, so the type was under-sized for no reason;
   - the footer took 137px stacking into three rows.
   ============================================================ */
@media (max-width:560px){
  /* a tighter gutter buys width, which buys type size */
  .screen{
    padding-left:max(15px, env(safe-area-inset-left));
    padding-right:max(15px, env(safe-area-inset-right));
  }
  .scr-top{padding:18px 0 6px}

  .wheel-row{gap:0}
  .wheel-label{font-size:15px}

  /* ~3 items in view, so the fade above and below actually reads */
  .wheel{height:clamp(190px,30vh,250px)}
  .wh-item{font-size:clamp(40px,11.6vw,50px);letter-spacing:-.052em;line-height:1.02}

  /* one row where it fits, and clear of the home indicator */
  .scr-foot{
    padding:14px 0 calc(16px + env(safe-area-inset-bottom));
    gap:10px 16px;
  }
  .scr-foot>.slate{display:none}          /* the wordmark already says this */
  .scr-links{width:100%;justify-content:space-between;gap:10px 14px;font-size:14px}
  .scr-links .foot-cta{padding:12px 16px}
}

/* Very short windows: keep the drum usable rather than letting it collapse. */
@media (max-height:620px) and (max-width:560px){
  .wheel{height:clamp(150px,26vh,190px)}
  .wh-item{font-size:clamp(32px,9vw,40px)}
}

/* Indent the wheel from the left edge, so it sits in from the wordmark
   rather than sharing its margin. The label moves with it — they read as
   one block. */
.wheel-row{padding-left:clamp(0px,7vw,132px)}

/* On a phone the indent has to be modest: the type is already at the width
   where "Media Production" would wrap, so every pixel taken off the left
   comes straight off the font size. 14px in, and the scale drops a hair to
   keep the longest label on one line. */
@media (max-width:560px){
  .wheel-row{padding-left:14px}
  .wh-item{font-size:clamp(38px,11.1vw,50px)}
}