/* ============================================================
   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;
  /* Meta text - the small uppercase labels. Arial at Charl's request; the
     token is named for the job it does, not for a typeface, since it is no
     longer monospaced. */
  --meta:Arial,Helvetica,sans-serif;

  --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(--meta);font-size:11px;font-weight:500;
  letter-spacing:.02em;color:var(--stone);
}
.on-dark .slate,.dark .slate{color:var(--stone-dk)}

/* ---------- build-ahead banner ---------- */
.buildahead{
  background:#2B2B27;color:#F0F0EA;font-family:var(--meta);font-size:11px;
  letter-spacing:.02em;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(--meta);font-size:11px;font-weight:500;letter-spacing:.02em;
  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(--meta);font-size:11px;letter-spacing:.02em;
      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(--meta);font-size:11px;letter-spacing:.02em;
      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(--meta);font-size:11px;letter-spacing:.02em;
      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(--meta);font-size:11px;letter-spacing:.02em;
           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(--meta);font-size:11px;
          letter-spacing:.02em;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(--meta);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(--meta);font-size:11px;letter-spacing:.02em;
        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(--meta);font-size:11px;letter-spacing:.02em;
    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(--meta);font-size:11px;letter-spacing:.02em;
     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(--meta);font-size:11px;letter-spacing:.02em;
         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(--meta);font-size:11px;letter-spacing:.02em;
        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(--meta);font-size:12px;font-weight:700;letter-spacing:.02em;
               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(--meta);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:.02em}
.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(--meta);font-size:11px;font-weight:700;
               letter-spacing:.02em;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(--meta);font-size:11px;font-weight:500;
                     letter-spacing:.02em;
                     padding:11px 18px;border-radius:var(--radius);
                     transition:background .2s}
.scr-links .foot-cta:hover{background:var(--green);color:#fff}

/* A short window - a phone in landscape, mostly - gets to scroll rather than
   hide content. min-height rather than height, and the flex column is kept,
   so the screen still fills a window taller than its content and the footer
   stays on the bottom edge instead of floating with dead space beneath it. */
@media (max-height:520px){
  body:has(.screen){height:auto;min-height:100dvh;overflow:auto}
  .screen{overflow:visible}
}

.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{
  /* A button, so reset the chrome the UA gives it. font-family only, never
     the font shorthand: that also resets size, weight and line-height, and
     would silently undo the type set below. */
  appearance:none;background:none;border:0;margin:0;width:100%;display:block;
  font-family:inherit;text-align:left;cursor:pointer;
  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.
   All the meta labels are Arial now, so what this still overrides from the
   .slate treatment it inherits is the case and the tracking: .14em is a caps
   convention and reads as gappy on lowercase, 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-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)}
}

/* One item per gesture. A mouse-wheel tick delivers ~100px, which is more
   than one item tall, so mandatory snap was letting it fly past the first
   snap point and land on the second. scroll-snap-stop forces the container
   to stop at every snap position, so a tick or a fling can only ever advance
   one service. */
.wh-item{scroll-snap-stop:always}

/* Has to sit after the other .wheel heights: they are all the same
   specificity, so source order decides and an earlier media query loses to a
   later plain rule. The drum's 210px floor is what tips a landscape phone
   over one screen, so it gets a lower one here. */
@media (max-height:520px){
  .wheel{height:clamp(120px,40vh,210px)}
}

/* ============================================================
   Service detail panel
   Clicking a service slides its panel in from the right while the
   card eases left. Hash-routed, so back works and a panel can be
   linked to directly.
   ============================================================ */
.wh-item:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:2px}

.stage{
  /* body:has(.screen) is the flex column; .stage is its child, so it has to
     carry the stretch or .screen collapses to content height and the footer
     floats mid-page with dead space under it. */
  position:relative;overflow:hidden;
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
}
.screen{transition:transform .5s cubic-bezier(.22,.61,.36,1),
                   opacity .35s ease}
body.detail-open .screen{transform:translateX(-7%);opacity:.28;pointer-events:none}

.panel{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;flex-direction:column;
  padding:0 max(var(--gut), env(safe-area-inset-left));
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;overscroll-behavior:contain;
}
.panel.open{transform:translateX(0)}

.panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
           padding:clamp(18px,2.6vw,30px) 0;position:sticky;top:0;
           background:var(--paper);z-index:2}
.panel-back{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;gap:9px;padding:8px 0;
  font-family:var(--meta);font-size:11px;letter-spacing:.02em;
  color:var(--stone);
}
.panel-back:hover{color:var(--black)}
.panel-back:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.panel-back svg{fill:none;stroke:currentColor;stroke-width:2}

.panel-body{
  /* Fills the panel and centres the copy in it. flex-shrink 0, so that when
     the copy is taller than the panel it grows and .panel scrolls, rather
     than being squeezed and clipped at the top. */
  flex:1 0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  width:100%;max-width:960px;margin:0 auto;
  padding:clamp(20px,4vw,56px) 0 clamp(24px,3.6vw,44px);
}
.panel-name{font-weight:900;letter-spacing:-.045em;line-height:1;color:var(--black);
            font-size:clamp(40px,8vw,104px)}
.panel-tag{margin-top:clamp(12px,1.6vw,20px);font-weight:700;color:var(--green-dk);
           font-size:clamp(18px,2.2vw,27px);letter-spacing:-.02em}
.panel-copy{margin-top:clamp(14px,1.8vw,22px);max-width:60ch;
            font-size:clamp(16px,1.7vw,19px);line-height:1.62;color:var(--ink)}

/* Sub-service drum: the home wheel's mechanics, with each sub-service on
   its own glass card. One card in focus; its neighbours sit back, smaller
   and fainter, so the drum still reads as something you can move. */
.sub-wheel{
  position:relative;width:100%;max-width:620px;margin:clamp(20px,3vw,36px) auto 0;
  height:clamp(230px,30vh,280px);overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scrollbar-width:none;outline:none;
  padding:0 18px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 28%,#000 72%,transparent 100%);
}
.sub-wheel::-webkit-scrollbar{display:none}
.sw-pad{height:calc(50% - 46px)}
.sw-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:10px 0;padding:18px 24px;text-align:center;text-decoration:none;
  scroll-snap-align:center;scroll-snap-stop:always;
  transform:scale(.88);opacity:.55;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .35s,box-shadow .35s;
}
.sw-name{font-weight:900;letter-spacing:-.035em;line-height:1.1;color:var(--black);
         font-size:clamp(22px,3vw,32px)}
.sw-item.on{transform:none;opacity:1}
.sw-item.on .sw-item.on:hover{transform:translateY(-2px)}
.sw-item:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Detail card: grows out of the drum over its service panel. */
.panel-sub{transform:scale(.9);opacity:0;
           transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease}
.panel-sub.open{transform:none;opacity:1}
/* .panel's display:flex beats the hidden attribute, and a card at scale .9
   is on screen rather than parked off it, so a closed one must never catch
   a tap. */
.panel[hidden]{display:none}
.panel-sub:not(.open){pointer-events:none}

/* Where this sits in full-service. */
.fs-meta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:clamp(18px,2.4vw,30px)}
.fs-meta a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.fs-meta a:hover{color:var(--green-dk);border-bottom-color:var(--green)}
.fs-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.fs-steps li{font-family:var(--meta);font-size:11px;letter-spacing:.02em;color:var(--stone);
             padding:6px 11px;border-radius:999px;background:var(--green-tint)}
.fs-steps li.on{background:var(--black);color:#fff}

.sub-gets{list-style:none;margin:clamp(16px,2vw,24px) 0 0;padding:0;display:flex;flex-wrap:wrap;
          justify-content:center;gap:6px 18px;font-size:15px;color:var(--ink)}
.sub-gets li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
                     background:var(--green);margin-right:8px;vertical-align:middle}
.sub-cta{margin-top:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.025em;color:var(--black);
         font-size:clamp(22px,2.8vw,32px)}
.sub-cta + .panel-cta{margin-top:16px}

.panel-cta{margin-top:clamp(26px,3.4vw,44px);display:flex;gap:12px;flex-wrap:wrap;
           align-items:center;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .screen,.panel{transition:none}
  body.detail-open .screen{transform:none}
}

/* ============================================================
   Brand cursor
   ============================================================
   The mark, not the wordmark: a custom cursor is capped at 128px and reads
   at about 32, where "bywho" set 434x120 would be a 10px-tall smear. The
   circle is the same blue logo and survives the size.

   The URL resolves against this stylesheet at /_lib/, not against the page,
   so ../assets is right from the card and from /blog alike.

   Last in the file on purpose: .wh-item and .panel-back both declare
   cursor:pointer above, and these are the same specificity, so source order
   is what lets the logo win.

   The keyword after the comma is required by the spec, and it is what shows
   if the PNG ever 404s - so links still fall back to pointer and everything
   else to auto.

   The image-set line is written out rather than pulled from a custom
   property: cursor is inherited, so a var() that resolved to something the
   browser could not parse would fail at computed-value time and inherit,
   throwing the plain-url line away with it. Written literally, an
   unsupported image-set is dropped at parse time and the line above stands. */
/* Gated on a real pointer. A phone matches neither, and without the gate it
   still downloads a cursor it can never show - measured, it did. */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("../assets/cursor-32.png") 16 16, auto}
  html{cursor:image-set(url("../assets/cursor-32.png") 1x,
                        url("../assets/cursor-64.png") 2x) 16 16, auto}

  a,button,[role="button"],.wh-item,.btn,.panel-back,.foot-cta,.cl{
    cursor:url("../assets/cursor-32.png") 16 16, pointer;
  }
  a,button,[role="button"],.wh-item,.btn,.panel-back,.foot-cta,.cl{
    cursor:image-set(url("../assets/cursor-32.png") 1x,
                     url("../assets/cursor-64.png") 2x) 16 16, pointer;
  }
}

/* ============================================================
   Cookie consent bar + cookie policy page
   ============================================================
   Reject and Accept are the same button, deliberately: consent only counts
   if saying no is as easy as saying yes. The bar sits in a corner, never
   covers the page, and does nothing until the visitor chooses. */
.cookie-bar{
  /* Raised clear of the one-screen footer, so it never covers "Get in touch". */
  position:fixed;z-index:70;right:max(16px,env(safe-area-inset-right));
  bottom:calc(108px + env(safe-area-inset-bottom));
  /* 440px fits three equal buttons with "ONLY NECESSARY" in caps; narrower, they stack. */
  width:min(440px,calc(100vw - 32px));
  background:var(--paper);color:var(--ink);
  /* Flat and black-on-white like the rest of the site: a hairline, no shadow. */
  border:1px solid var(--black);border-radius:var(--radius);
  padding:16px 16px 14px;
}
.cookie-bar[hidden]{display:none}
.cookie-text{margin:0 0 12px;font-size:14px;line-height:1.5}
.cookie-text a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.cookie-text a:hover{border-bottom-color:var(--green);color:var(--green-dk)}
/* Three equal buttons: same size, same style, so none is the "obvious" one. */
/* minmax(0,1fr), not 1fr: plain 1fr lets the longest label widen its own column,
   which made "Only necessary" the biggest button. */
.cookie-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:480px){.cookie-actions{grid-template-columns:1fr}}
/* The site button (.btn.ghost) at banner width: same face, caps, outline and hover. */
.cookie-btn{
  appearance:none;cursor:pointer;width:100%;
  font-family:var(--meta);font-size:11px;font-weight:500;letter-spacing:.02em;
  padding:12px 6px;border-radius:var(--radius);white-space:nowrap;
  background:transparent;color:var(--black);border:1px solid var(--black);
  transition:background .2s,color .2s;
}
.cookie-btn:hover{background:var(--black);color:#fff}
.cookie-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media print{.cookie-bar{display:none}}

.foot-cookies{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.foot-cookies:hover{border-bottom-color:var(--green);color:var(--green-dk)}

.policy-shell{max-width:880px;margin:0 auto;padding:0 var(--gut)}
.policy-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
            padding:clamp(18px,2.6vw,30px) 0}
.policy-top .mark img{height:clamp(28px,3.4vw,40px);width:auto}
.policy-top .slate{text-decoration:none}
.policy{padding:clamp(16px,3vw,40px) 0 clamp(40px,6vw,80px);max-width:68ch}
.policy h1{font-size:clamp(36px,6vw,64px);font-weight:900;letter-spacing:-.045em;
           line-height:1;color:var(--black)}
.policy .policy-lede{margin-top:14px;font-size:clamp(18px,2vw,22px);font-weight:700;
             letter-spacing:-.02em;color:var(--green-dk)}
.policy-choices{margin-top:12px;display:grid;grid-template-columns:max-content 1fr;gap:10px 18px}
.policy-choices dt{font-weight:800;color:var(--black)}
.policy-choices dd{margin:0;line-height:1.55;color:var(--ink)}
@media (max-width:520px){.policy-choices{grid-template-columns:1fr;gap:2px}
  .policy-choices dd{margin-bottom:10px}}
.policy .policy-date{margin-top:12px;font-family:var(--meta);font-size:11px;letter-spacing:.02em;
             color:var(--stone)}
.policy h2{margin-top:clamp(28px,4vw,44px);font-size:clamp(19px,2vw,23px);font-weight:800;
           letter-spacing:-.02em;color:var(--black)}
.policy p,.policy li{margin-top:10px;font-size:16px;line-height:1.62;color:var(--ink)}
.policy ul{padding-left:1.1em}
.policy a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.policy a:hover{border-bottom-color:var(--green);color:var(--green-dk)}
.policy-top .panel-back{text-decoration:none}
.policy code{font-family:var(--sans);font-weight:700;font-size:inherit;color:var(--black)}
.policy-choice{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
               padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius)}
.policy-choice p{margin:0}
.policy-table-wrap{margin-top:14px;overflow-x:auto}
.policy-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.policy-table th,.policy-table td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;
                                  border-bottom:1px solid var(--line);line-height:1.45}
.policy-table th{font-family:var(--meta);font-size:11px;letter-spacing:.02em;
                 color:var(--stone);font-weight:400}
.policy-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
             padding:18px 0 28px;border-top:1px solid var(--line);font-size:14px}
.policy-foot a{color:var(--ink)}

/* ============================================================
   Discovery-call form (#book panel)
   Same parts as the rest of the site: Arial caps for labels, Satoshi for
   what people type, hairline borders, 2px corners, the site's black button.
   ============================================================ */
.panel-book .panel-body{justify-content:flex-start;padding-top:clamp(8px,3vw,40px)}
.book-form{width:100%;max-width:560px;margin:clamp(22px,3vw,34px) auto 0;text-align:left;
           display:flex;flex-direction:column;gap:14px}
.book-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.book-row{grid-template-columns:1fr}}
.book-field{display:flex;flex-direction:column;gap:6px}
.book-field > span{font-family:var(--meta);font-size:11px;letter-spacing:.02em;
                   color:var(--stone)}
.book-field > span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--stone)}
.book-field input,.book-field select,.book-field textarea{
  font-family:var(--sans);font-size:16px;color:var(--black);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 12px;width:100%;transition:border-color .15s;
}
.book-field textarea{resize:vertical;min-height:84px;line-height:1.5}
.book-field input:focus,.book-field select:focus,.book-field textarea:focus{
  outline:2px solid var(--green);outline-offset:1px;border-color:var(--black)}
.book-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.book-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink)}
.book-consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--black)}
.book-consent a,.book-alt a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.book-consent a:hover,.book-alt a:hover{border-bottom-color:var(--green);color:var(--green-dk)}
.book-form .btn{align-self:flex-start;border:0;cursor:pointer;font-size:12px;padding:14px 28px}
.book-form .btn:disabled{opacity:.6;cursor:wait}
.book-status{min-height:1.4em;margin:0;font-size:14px;color:var(--stone)}
.book-status.is-bad{color:#B3261E}                      /* 5.9:1 on white */
.book-alt{margin:0;font-size:14px;color:var(--stone)}
.book-done{margin-top:clamp(22px,3vw,34px);display:flex;flex-direction:column;align-items:center;gap:6px}
.book-done[hidden]{display:none}
.book-done-h{font-size:clamp(20px,2.4vw,28px);font-weight:800;letter-spacing:-.025em;color:var(--black)}
.book-done .btn{margin-top:10px}

/* ---------- Load screen (_lib/loader.mjs) ---------- */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--paper);
        transition:opacity .5s ease,visibility .5s}
.loader.is-done{opacity:0;visibility:hidden}
.no-loader .loader{display:none}
.loader-mark{position:relative;width:clamp(72px,9vw,104px);aspect-ratio:1;border-radius:50%;overflow:hidden;
             background:#3D68B2;animation:ld-breathe 1.6s ease-in-out infinite}
.loader-mark img{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* Solids and gradients, cross-faded in turn over the blue base. */
.ld{position:absolute;inset:-25%;opacity:0;animation:ld-swap 6.4s linear infinite}
.ld-1{background:linear-gradient(135deg,#E8559A,#F07A1F);animation-delay:.4s}
.ld-2{background:#F07A1F;animation-delay:1.2s}
.ld-3{background:linear-gradient(135deg,#3D68B2,#7FA6E6);animation-delay:2s}
.ld-4{background:#E8559A;animation-delay:2.8s}
.ld-5{background:#4C6342;animation-delay:3.6s}
.ld-6{background:conic-gradient(from 0deg,#3D68B2,#E8559A,#F07A1F,#4C6342,#3D68B2);
      animation:ld-swap 6.4s linear 4.4s infinite,ld-spin 2.4s linear infinite}
.ld-7{background:#141414;animation-delay:5.2s}
.ld-8{background:radial-gradient(circle at 30% 25%,#F07A1F,#E8559A 45%,#3D68B2);animation-delay:6s}
@keyframes ld-swap{0%{opacity:0}4%{opacity:1}14%{opacity:1}18%{opacity:0}100%{opacity:0}}
@keyframes ld-spin{to{transform:rotate(360deg)}}
@keyframes ld-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .loader-mark,.ld{animation:none}
}

/* ============================================================
   Phones: everything reads centred. Sits last so it wins over
   the left-aligned defaults above at equal specificity.
   ============================================================ */
@media (max-width:560px){
  /* Home: the wheel and its label sit on the centre line. */
  .wheel-row{padding-left:0;align-items:center;text-align:center}
  .wheel,.wh-item{text-align:center}
  .scr-links{justify-content:center}

  /* Booking form: labels, consent and the button centred. */
  .book-form{text-align:center}
  .book-field{align-items:stretch}
  .book-field > span{text-align:center}
  .book-consent{justify-content:center;text-align:left}
  .book-form .btn{align-self:center}

  /* Cookie banner */
  .cookie-text{text-align:center}

  /* Privacy and cookie pages */
  .policy-shell,.policy{text-align:center}
  .policy{margin-left:auto;margin-right:auto}
  .policy ul{list-style:none;padding-left:0}
  .policy-choices{justify-items:center}
  .policy-choice,.policy-foot{justify-content:center}
  /* The cookie table stacks into one centred card per cookie rather than
     scrolling sideways. */
  .policy-table{min-width:0}
  .policy-table thead{display:none}
  .policy-table tr,.policy-table td{display:block;text-align:center;padding:0}
  .policy-table tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .policy-table td{border:0}
  .policy-table td + td{margin-top:4px}

  /* Blog and footer */
  .band,.prose,.post-meta,.post-row,.next,.fc{text-align:center}
  .post-row{justify-items:center}
  .post-row-m{align-items:center}
  .post-meta{justify-content:center}
  .next a{flex-direction:column;align-items:center;gap:10px}
  .fc{align-items:center}
  .foot{justify-items:center}
}

/* A heading focused by script (opening a panel) shouldn't wear a box. */
.panel-name:focus:not(:focus-visible){outline:none}

/* ============================================================
   Depth: ambient light and liquid glass
   One soft wash of brand tint across the page, large enough to slide:
   --px/--py follow the pointer (fx.mjs) and move it, so the glass always
   has something shifting behind it. Glass has no outline: depth comes
   from the frost, an inner highlight along the top edge, and a soft
   shadow, never from a drawn border.
   ============================================================ */
@property --px{syntax:'<percentage>';inherits:true;initial-value:40%}
@property --py{syntax:'<percentage>';inherits:true;initial-value:30%}
:root{
  --ambient:linear-gradient(125deg,#E6ECF7 0%,#F4F1F7 22%,#FBFBFA 42%,#FBFBFA 58%,#FAEFE8 78%,#F7EAF0 100%);
  --glass-bg:rgba(255,255,255,.55);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 .5px rgba(255,255,255,.6),
    0 12px 32px -14px rgba(30,40,70,.3);
}
body,.panel{
  background:var(--ambient);background-color:#FBFBFA;
  background-size:180% 180%;background-position:var(--px) var(--py);
}

.glass{
  position:relative;isolation:isolate;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
          backdrop-filter:blur(24px) saturate(180%);
  border:0;border-radius:24px;box-shadow:var(--glass-shadow);
}
/* The highlight that follows the pointer. */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.8),rgba(255,255,255,0) 65%);
  opacity:.4;transition:opacity .35s;
}
.glass:hover::before{opacity:1}

/* Detail card: a large pane of glass, tilting slightly towards the pointer. */
.panel-sub .panel-body{perspective:1400px}
.detail-card{
  width:100%;max-width:760px;border-radius:32px;
  padding:clamp(26px,4.5vw,56px) clamp(20px,4.5vw,60px);
  display:flex;flex-direction:column;align-items:center;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.detail-card .panel-name{font-size:clamp(34px,5.6vw,72px)}

/* Full-service steps: soft pills. */
.fs-steps li{background:rgba(255,255,255,.65);border:0;box-shadow:0 2px 8px -3px rgba(30,40,70,.18)}
.fs-steps li.on{background:var(--black);color:#fff;box-shadow:0 6px 16px -6px rgba(20,20,20,.6)}

/* Buttons: pills with weight. */
.btn,.scr-links .foot-cta{
  border:0;border-radius:999px;padding:14px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -10px rgba(20,20,20,.65);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover,.scr-links .foot-cta:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -10px rgba(20,20,20,.6)}
.btn:active,.scr-links .foot-cta:active{transform:translateY(0) scale(.98)}

/* Back: a small frosted pill. */
.panel-back{padding:8px 14px 8px 12px;border-radius:999px;border:0;
            background:rgba(255,255,255,.6);
            -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
            box-shadow:inset 0 1px 0 #fff,0 4px 14px -6px rgba(30,40,70,.3);transition:transform .2s}
.panel-back:hover{transform:translateX(-2px)}
.panel-top{background:transparent}

/* Booking form on glass; fields are soft wells, not outlined boxes. */
.book-form.glass{padding:clamp(20px,3.4vw,34px);border-radius:28px}
.book-field input,.book-field select,.book-field textarea{
  background:rgba(255,255,255,.75);border:0;border-radius:12px;
  box-shadow:inset 0 1px 3px rgba(20,20,20,.08);transition:box-shadow .2s}
.book-field input:focus,.book-field select:focus,.book-field textarea:focus{
  outline:none;box-shadow:inset 0 1px 3px rgba(20,20,20,.08),0 0 0 3px rgba(76,99,66,.35)}

/* Cookie banner on glass; its buttons are soft pills. */
.cookie-bar{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(24px) saturate(180%);
            backdrop-filter:blur(24px) saturate(180%);border:0;
            border-radius:22px;box-shadow:var(--glass-shadow)}
.cookie-btn{border:0;border-radius:999px;background:rgba(20,20,20,.06)}
.cookie-btn:hover{background:var(--black);color:#fff}

/* Hairlines out: the footer rule, the policy boxes and table rows. */
.scr-foot,.policy-foot{border-top:0}
.policy-choice{border:0;background:rgba(255,255,255,.6);border-radius:18px;
               box-shadow:var(--glass-shadow)}
.policy-table th,.policy-table td{border-bottom:0}
.policy-table tr + tr td{padding-top:14px}

/* Home: a frosted selection band behind the centred service, like a picker. */
.wheel-row{position:relative;--wh-fs:clamp(38px,8.2vw,116px)}
.wh-item{font-size:var(--wh-fs)}
/* Faded but legible: 3:1 against the page, without the old opacity. */
.wh-item{color:#868B80;opacity:1}
.wh-item.on{color:var(--black)}
.wheel{position:relative;z-index:1}
.wheel-row::before{
  content:"";position:absolute;left:clamp(-28px,-2vw,-12px);right:0;top:50%;
  height:calc(var(--wh-fs) * 1.06 + 22px);transform:translateY(-50%);
  border-radius:calc(var(--wh-fs) * .32);pointer-events:none;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:var(--glass-shadow);
}
@media (max-width:560px){
  .wheel-row{--wh-fs:clamp(38px,11.1vw,50px)}
  .wheel-row::before{left:-6px;right:-6px}
}
@media (max-height:620px) and (max-width:560px){ .wheel-row{--wh-fs:clamp(32px,9vw,40px)} }

/* Type: smaller body copy, shorter lines. */
body{font-size:16px}
.panel-copy{font-size:clamp(15px,1.25vw,17px);line-height:1.6;max-width:52ch}
.sub-gets{font-size:14px}
.sub-cta{font-size:clamp(20px,2.2vw,26px)}
.cookie-text{font-size:13.5px}
.policy p,.policy li{font-size:15px}
.book-field input,.book-field select,.book-field textarea{font-size:16px}  /* 16px stops iOS zooming in */

@media (prefers-reduced-motion:reduce){
  .detail-card{transform:none}
  .sw-item,.btn,.panel-back{transition:none}
}

/* The footer links are a <nav>, so they picked up the sticky white bar
   meant for the blog's top nav. */
.scr-links{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
/* Panel headings take focus by script so screen readers land on them;
   they are not controls, so they never need a focus ring. */
.panel-name:focus{outline:none}

/* Policy pages: readable meta text, and lines held under ~70 characters. */
.policy .policy-date,.policy-table th,.policy-top .slate,.policy-foot .slate{font-size:12.5px}
.policy p,.policy li,.policy .policy-lede{max-width:33em}   /* ch runs wide in Satoshi; 33em is ~75 characters */
.policy-shell .policy{margin-left:auto;margin-right:auto}

/* ============================================================
   Layout pass: use the whole screen
   Headings centred; every line of running text left-aligned inside a
   centred column. Spacing on an 8px rhythm; body copy at 1.55.
   ============================================================ */

/* Home: never more than three services on the drum at once. */
.wheel{height:calc(var(--wh-fs) * 1.06 * 3 + 12px)}

/* --- Service panel: heading at the top, drum filling the middle,
       booking pinned bottom-centre. --- */
.panel-svc .panel-body{
  justify-content:flex-start;align-items:stretch;max-width:960px;
  padding:clamp(4px,1.5vh,16px) 0 0;
}
.svc-head{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,16px)}
.svc-head .panel-name{text-align:center}
.svc-head .panel-copy{margin:0;width:fit-content;max-width:34em;text-align:left;line-height:1.55}
.panel-svc .sub-wheel{
  flex:1 1 auto;height:auto;min-height:220px;max-width:600px;
  margin:clamp(16px,3vh,32px) auto 0;container-type:size;
}
.panel-svc .sw-pad{height:calc(50cqh - 40px)}
.panel-svc .panel-cta{
  position:sticky;bottom:0;margin-top:auto;justify-content:center;
  padding:16px 0 calc(24px + env(safe-area-inset-bottom));
}

/* The focus indicator: a rounded blue-and-white track with a light that
   sweeps along it and never fills it, like a loading bar that never ends. */
.sw-item{gap:0}
.sw-line,.svc-pager a.on{
  background:
    linear-gradient(90deg,rgba(61,104,178,0),#3D68B2 38%,#C9D8F4 62%,rgba(255,255,255,0)) no-repeat,
    linear-gradient(90deg,rgba(61,104,178,.14),rgba(61,104,178,.22));
  background-size:55% 100%,100% 100%;
  animation:bw-sweep 1.8s cubic-bezier(.45,0,.55,1) infinite;
}
.sw-line{
  display:block;width:0;height:4px;border-radius:999px;margin-top:0;
  transition:width .4s cubic-bezier(.22,.61,.36,1),margin-top .4s;
}
.sw-item.on .sw-line{width:56px;margin-top:12px}
@keyframes bw-sweep{from{background-position:-105% 0,0 0}to{background-position:205% 0,0 0}}

/* --- Detail card: shaped by the screen, landscape on a desktop, portrait
       on a phone. Title, what it is, deliverables; booking and the
       full-service steps at the foot. --- */
.panel-sub .panel-body{max-width:1040px;justify-content:center;
                       padding:0 0 calc(16px + env(safe-area-inset-bottom))}
.detail-card{
  height:calc(100svh - 96px);min-height:440px;max-height:760px;
  padding:clamp(28px,5vh,56px) clamp(22px,5vw,64px) clamp(16px,2.4vh,24px);
  justify-content:flex-start;
}
.detail-card .panel-name{text-align:center;font-size:clamp(30px,4.8vw,60px);line-height:1.05}
.detail-text{width:100%;max-width:34em;margin-top:clamp(16px,3vh,32px);text-align:left}
.detail-text .panel-copy{margin:0;max-width:none;line-height:1.55}
.detail-k{margin:clamp(20px,3vh,32px) 0 0;font-family:var(--meta);font-size:12px;font-weight:400;
          letter-spacing:.02em;color:var(--stone);text-align:left}
.detail-text .sub-gets{display:block;margin:8px 0 0;font-size:15px;line-height:1.45}
.detail-text .sub-gets li{padding:5px 0}
.detail-card .panel-cta{margin-top:auto;padding-top:24px}

/* Full-service steps: small, quiet, and every part a link. */
.fs-meta{
  margin:16px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 8px;font-family:var(--meta);font-size:12px;color:var(--stone);
}
.fs-meta > a{color:var(--stone);text-decoration:none;border-bottom:1px solid rgba(108,114,102,.35)}
.fs-meta > a:hover{color:var(--black)}
.fs-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.fs-steps li{padding:0;background:none;box-shadow:none;border-radius:0}
.fs-steps li.on{background:none;box-shadow:none}
.fs-steps a{display:inline-block;padding:3px 9px;border-radius:999px;text-decoration:none;
            font-size:12px;color:var(--stone);background:rgba(20,20,20,.05);transition:background .2s,color .2s}
.fs-steps a:hover{background:rgba(20,20,20,.12);color:var(--black)}
.fs-steps a.on{background:var(--black);color:#fff}

/* --- Booking panel and everything else: headings centred, text left. --- */
.panel-book .panel-name{text-align:center}
.panel-book .panel-body > .panel-copy{width:fit-content;max-width:34em;text-align:left}
.book-form{text-align:left}
.book-field > span,.book-consent,.book-alt,.book-status{text-align:left}
.book-form .btn{align-self:center}
.cookie-text{text-align:left}
.policy h1,.policy h2{text-align:center}
.policy p,.policy li,.policy .policy-lede,.policy .policy-date{text-align:left}
.policy p,.policy li,.policy .policy-lede{margin-left:auto;margin-right:auto}
.prose p,.post-row-m{text-align:left}

@media (max-width:560px){
  .book-field > span,.cookie-text,.policy p,.policy li,.policy .policy-lede,.policy .policy-date{text-align:left}
  .book-consent{justify-content:flex-start}
  .policy ul{list-style:disc;padding-left:1.1em}
  /* Phones: tighter chrome, so the content gets the height. */
  .panel{padding-left:20px;padding-right:20px}
  .panel-top{padding:14px 0 10px}
  .detail-card{height:calc(100svh - 84px);min-height:0;max-height:none;border-radius:28px;
               padding:28px 22px 16px}
}
@media (prefers-reduced-motion:reduce){ .sw-line,.svc-pager a.on{animation:none;background-position:50% 0,0 0} }

/* Full-service steps: one small line, then the four steps under it. */
.fs-meta{flex-direction:column;flex-wrap:nowrap;gap:8px}
.fs-line{margin:0}
.fs-line a{color:var(--stone);text-decoration:none;border-bottom:1px solid rgba(108,114,102,.35)}
.fs-line a:hover{color:var(--black)}
/* Wide screens: a landscape card in roughly the screen's proportions. */
@media (min-width:561px){
  .detail-card{max-width:min(980px,100%);height:min(calc(100svh - 120px),640px);min-height:460px}
}
/* The drum shows the card in focus and a glimpse either side, centred in
   the space between the heading and the button. */
.panel-svc .sub-wheel{max-height:300px;margin-top:auto;margin-bottom:auto}
.panel-svc .panel-cta{margin-top:0}
@media (max-width:560px){
  .fs-steps{flex-wrap:nowrap;gap:3px}
  .fs-steps a{padding:3px 7px;font-size:11.5px;white-space:nowrap}
}
.fs-steps a{color:#575C52}   /* 5.4:1 on the pill */

/* ============================================================
   Mark, tracking, booking
   ============================================================ */
/* The black bywho mark, top right of every panel. */
.panel-mark{display:block;width:32px;height:32px;border-radius:50%;
            box-shadow:0 4px 12px -4px rgba(20,20,20,.45)}

/* More air between letters: labels open up, headings stop touching. */
.slate,.panel-back,.btn,.scr-links .foot-cta,.cookie-btn,.book-field > span,
.detail-k,.fs-meta,.fs-steps a,.policy .policy-date,.policy-table th{letter-spacing:.05em}
.panel-name,.wh-item,.sw-name,.scr-h1,.policy h1{letter-spacing:-.025em}

/* Booking: Charl and the live calendar beside the message form. */
.panel-book .panel-body{max-width:1120px;justify-content:flex-start;padding-top:clamp(4px,1.5vh,16px)}
.book-grid{width:100%;margin-top:clamp(20px,3vh,32px);display:grid;gap:16px;
           grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
.book-cal,.book-msg{padding:clamp(18px,2.4vw,28px);border-radius:28px;text-align:left}
.host{display:flex;align-items:center;gap:14px}
.host img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
          box-shadow:0 0 0 3px rgba(255,255,255,.9),0 8px 20px -8px rgba(30,40,70,.45)}
.host-name{margin:0;font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--black);line-height:1.2}
.host-role{margin:2px 0 0;font-family:var(--meta);font-size:12.5px;letter-spacing:.05em;color:var(--stone)}
.cal-frame{display:block;width:100%;height:min(680px,calc(100svh - 260px));min-height:520px;
           margin-top:18px;border:0;border-radius:18px;background:rgba(255,255,255,.7)}
.cal-out{display:inline-block;margin-top:10px;font-size:13px;color:var(--stone);text-decoration:none;
         border-bottom:1px solid rgba(108,114,102,.35)}
.cal-out:hover{color:var(--black)}
.book-msg-h{margin:0;font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.02em;text-align:left}
.book-msg > .panel-copy{margin:6px 0 0;text-align:left}
.book-msg .book-form{margin:18px 0 0;max-width:none;padding:0;background:none;box-shadow:none}
.book-msg .book-row{grid-template-columns:1fr}
.book-done{align-items:flex-start;text-align:left}
@media (max-width:860px){
  .book-grid{grid-template-columns:1fr}
  .cal-frame{height:640px;min-height:0}
}

/* ============================================================
   Sideways navigation, "You are here", card rhythm
   ============================================================ */


/* Service pager: one dot per service, the current one stretched. */
.svc-pager{display:flex;gap:6px;justify-content:center;margin-bottom:4px}
.svc-pager a{width:6px;height:6px;border-radius:999px;background:rgba(20,20,20,.18);
             transition:width .3s,background .3s}
.svc-pager a.on{width:22px}
.svc-pager a:hover{background:rgba(20,20,20,.4)}
/* A bigger target than the dot itself. */
.svc-pager a{position:relative}
.svc-pager a::after{content:"";position:absolute;inset:-10px -4px}

/* Detail card: one left edge for everything under the title. */
.detail-card{position:relative}
.detail-count{margin:0 0 6px;font-family:var(--meta);font-size:12px;letter-spacing:.05em;color:var(--stone)}
.detail-card .panel-name{margin:0}
.detail-text{max-width:30em;margin-top:clamp(18px,2.6vh,28px)}
.detail-text .panel-copy{font-size:clamp(15px,1.2vw,17px);line-height:1.55}
.detail-k{margin:clamp(22px,3vh,32px) 0 10px}
.detail-text .sub-gets{margin:0;padding:0;list-style:none}
.detail-text .sub-gets li{position:relative;padding:7px 0 7px 18px;line-height:1.4}
.detail-text .sub-gets li:first-child{padding-top:0}
.detail-text .sub-gets li::before{position:absolute;left:0;top:calc(7px + .55em);margin:0;
                                  transform:translateY(-50%)}
.detail-text .sub-gets li:first-child::before{top:.55em}
/* Long lists (Applications) as tags. */
.sub-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sub-tags li{padding:6px 12px;border-radius:999px;font-size:13.5px;line-height:1.3;color:var(--ink);
             background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 2px 8px -4px rgba(30,40,70,.25)}

/* Previous / next chevrons, on screens with a pointer. */
.sib{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
     display:grid;place-items:center;color:var(--black);background:rgba(255,255,255,.7);
     box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(30,40,70,.45);transition:transform .2s,background .2s}
.sib svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sib-prev{left:14px}.sib-next{right:14px}
.sib:hover{background:#fff}
.sib-prev:hover{transform:translate(-2px,-50%)}.sib-next:hover{transform:translate(2px,-50%)}
@media (hover:none),(max-width:560px){ .sib{display:none} }

@media (max-width:560px){
  .detail-card{padding:22px 20px 16px}
  .detail-text{max-width:none}
  .fs-track{max-width:none;margin-top:14px}
}
/* Bullets sit on the first line's centre, whatever the font size. */
.detail-text .sub-gets li{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.detail-text .sub-gets li:first-child{padding-top:0}
.detail-text .sub-gets li::before{position:static;transform:none;flex:0 0 6px;margin:calc(.7em - 3px) 0 0}
.detail-text .sub-gets li:first-child::before{margin-top:calc(.7em - 3px)}

/* ============================================================
   Smoother motion
   One easing everywhere: fast out of the gate, long soft landing.
   ============================================================ */
:root{--ease:cubic-bezier(.32,.72,0,1)}
.panel{transition:transform .6s var(--ease)}
.screen{transition:transform .6s var(--ease),opacity .4s ease}
.panel-sub{transition:transform .55s var(--ease),opacity .35s ease}

/* Sideways swaps: the panels don't move, the content does. */
.panel.swap{transition:none;transform:none;opacity:1}
.panel.swap[class*="out-"]{background:transparent;pointer-events:none;z-index:61}
.panel-svc.swap .svc-head .panel-name,.panel-svc.swap .svc-head .panel-copy,.panel-svc.swap .sub-wheel,
.panel-sub.swap .detail-card{animation-duration:.5s;animation-timing-function:var(--ease);animation-fill-mode:both}
.panel-svc.in-next .svc-head .panel-name,.panel-svc.in-next .svc-head .panel-copy,.panel-svc.in-next .sub-wheel,
.panel-sub.in-next .detail-card{animation-name:swap-in-next}
.panel-svc.in-prev .svc-head .panel-name,.panel-svc.in-prev .svc-head .panel-copy,.panel-svc.in-prev .sub-wheel,
.panel-sub.in-prev .detail-card{animation-name:swap-in-prev}
.panel-svc.out-next .svc-head .panel-name,.panel-svc.out-next .svc-head .panel-copy,.panel-svc.out-next .sub-wheel,
.panel-sub.out-next .detail-card{animation-name:swap-out-next;animation-duration:.28s;animation-timing-function:ease-in}
.panel-svc.out-prev .svc-head .panel-name,.panel-svc.out-prev .svc-head .panel-copy,.panel-svc.out-prev .sub-wheel,
.panel-sub.out-prev .detail-card{animation-name:swap-out-prev;animation-duration:.28s;animation-timing-function:ease-in}
/* The outgoing panel's chrome is identical to the incoming one's, so it
   simply sits on top until it goes; only its content fades. */
.panel.swap[class*="out-"] .panel-top,.panel.swap[class*="out-"] .panel-cta,
.panel.swap[class*="out-"] .svc-pager,.panel.swap[class*="out-"] .fs-track{visibility:hidden}
.panel-svc.in-next .sub-wheel,.panel-svc.in-prev .sub-wheel{animation-delay:.05s}
@keyframes swap-in-next{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes swap-in-prev{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes swap-out-next{to{opacity:0;transform:translateX(-44px)}}
@keyframes swap-out-prev{to{opacity:0;transform:translateX(44px)}}

/* ============================================================
   "You are here": a segmented toggle under the card. A sliding
   thumb marks the current stage; nothing else is lit.
   ============================================================ */
.panel-sub .panel-body{gap:0}
.fs-track{width:100%;max-width:440px;margin:14px auto 0}
.fs-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 6px 8px;
         font-family:var(--meta);font-size:12px;letter-spacing:.05em}
.fs-here{color:var(--black)}
.fs-all{color:var(--stone);text-decoration:none;border-bottom:1px solid rgba(108,114,102,.35)}
.fs-all:hover{color:var(--black)}
.fs-seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:4px;border-radius:999px;
        background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
        box-shadow:inset 0 1px 2px rgba(20,20,20,.08),0 8px 24px -14px rgba(30,40,70,.35)}
.fs-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 4);border-radius:999px;
          transform:translateX(calc(var(--i) * 100%));background:var(--black);
          box-shadow:0 6px 14px -6px rgba(20,20,20,.6);transition:transform .5s var(--ease)}
.fs-seg a{position:relative;z-index:1;display:block;text-align:center;padding:10px 4px;border-radius:999px;
          font-family:var(--meta);font-size:12.5px;letter-spacing:.03em;color:#575C52;text-decoration:none;
          transition:color .3s}
.fs-seg a:hover{color:var(--black)}
.fs-seg a.on{color:#fff;font-weight:700}

/* The card makes room for the toggle beneath it. */
.detail-card{height:min(calc(100svh - 200px),600px);min-height:400px}
@media (max-width:560px){
  .detail-card{height:calc(100svh - 170px);min-height:0}
  .fs-track{margin-top:10px;max-width:none}
  .fs-seg a{font-size:12px;padding:9px 2px}
}
@media (prefers-reduced-motion:reduce){
  .panel.swap *{animation:none!important}
  .fs-thumb{transition:none}
}
/* Sequential, not overlapping: out in .2s, in from .16s. */
.panel-svc.out-next .svc-head .panel-name,.panel-svc.out-next .svc-head .panel-copy,.panel-svc.out-next .sub-wheel,
.panel-sub.out-next .detail-card,
.panel-svc.out-prev .svc-head .panel-name,.panel-svc.out-prev .svc-head .panel-copy,.panel-svc.out-prev .sub-wheel,
.panel-sub.out-prev .detail-card{animation-duration:.2s}
.panel-svc.in-next .svc-head .panel-name,.panel-svc.in-next .svc-head .panel-copy,
.panel-sub.in-next .detail-card,
.panel-svc.in-prev .svc-head .panel-name,.panel-svc.in-prev .svc-head .panel-copy,
.panel-sub.in-prev .detail-card{animation-delay:.16s}
.panel-svc.in-next .sub-wheel,.panel-svc.in-prev .sub-wheel{animation-delay:.22s}
.fs-all{color:#575C52}   /* holds 4.5:1 over the tinted background */

/* Detail card, centred: the text block sits in the middle of the card,
   deliverables as centred tags, with more air around them. */
.detail-count{margin-top:auto}
.detail-text{max-width:30em;text-align:center;margin-top:clamp(20px,3vh,32px)}
.detail-text .panel-copy{text-align:center;margin:0 auto}
.detail-k{text-align:center;margin:clamp(32px,5vh,48px) 0 clamp(14px,2vh,20px)}
.sub-tags{justify-content:center;gap:8px}
.detail-card .panel-cta{margin-top:auto;padding-top:clamp(28px,4vh,40px)}

/* Deliverables as centred line items, one per line. Long lists
   (Brand Applications) split into two columns so the card holds them. */
.sub-lines{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.4;color:var(--ink)}
.sub-lines li{padding:5px 0}
.sub-lines.is-long{columns:2;column-gap:24px;font-size:14px}
.sub-lines.is-long li{break-inside:avoid;padding:4px 0}

/* A soft rule between line items. Long lists run down two columns
   (grid, so each column's first item can skip its rule). */
.sub-lines{display:grid;grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;
           column-gap:28px;width:fit-content;min-width:min(260px,100%);margin:0 auto}
.sub-lines.is-long{columns:auto;grid-template-columns:1fr 1fr}
.sub-lines li{padding:9px 4px;border-top:1px solid rgba(20,20,20,.09)}
.sub-lines li:first-child{border-top:0}
.sub-lines.is-long li{padding:7px 4px}
.sub-lines li.col-top{border-top:0}

/* Service drum: a touch more room between the cards. */
.sw-item{margin:14px 0}
.panel-svc .sw-pad{height:calc(50cqh - 44px)}

/* ============================================================
   Book a discovery call: one card, two steps
   ============================================================ */
/* The title holds one line at every width. */
.panel-book .panel-name{white-space:nowrap;font-size:clamp(26px,7.4vw,88px)}
.book-card{width:100%;max-width:600px;margin:clamp(18px,3vh,32px) auto 0;
           padding:clamp(20px,3vw,32px);border-radius:28px;text-align:left}
.book-lead{margin:18px 0 0;font-size:clamp(15px,1.25vw,17px);line-height:1.55;color:var(--ink)}
.book-card .book-form{margin:0;max-width:none;padding:0;background:none;box-shadow:none;gap:14px}
.book-card .book-row{grid-template-columns:1fr 1fr}
.book-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
.book-mail{appearance:none;background:none;border:0;cursor:pointer;padding:6px;
           font:inherit;font-size:14px;color:var(--stone)}
.book-mail span{color:var(--black);border-bottom:1px solid rgba(20,20,20,.3);padding-bottom:1px}
.book-mail:hover span{border-bottom-color:var(--green);color:var(--green-dk)}
.book-mail:disabled{opacity:.6;cursor:wait}
.book-step{margin-top:18px}
.book-step[hidden]{display:none}
.book-step .book-done-h{text-align:left}
.book-card .cal-frame{height:min(680px,calc(100svh - 240px));min-height:520px;margin-top:14px}
@media (max-width:560px){
  .book-card .book-row{grid-template-columns:1fr}
  .book-card .cal-frame{height:640px;min-height:0}
}
.book-form[hidden]{display:none}   /* .book-form's display:flex beats [hidden] */

/* Visible to search engines and screen readers, not on screen. */
.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}
/* The wheel items are links now (crawlable service pages). */
a.wh-item{text-decoration:none}
/* The wheel is a <nav> for the same reason; keep the blog nav bar off it. */
nav.wheel{position:relative;top:auto;z-index:1;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}


/* ============================================================
   FAQ: an accordion of glass cards
   ============================================================ */
.faq-page{max-width:760px;margin:0 auto;padding:0 var(--gut);min-height:100svh;display:flex;flex-direction:column}
.faq-top{position:static;padding:clamp(14px,2.4vw,26px) 0}
.faq{flex:1 0 auto;padding-bottom:clamp(32px,6vh,64px)}
.faq h1{text-align:center;font-size:clamp(36px,6vw,72px);line-height:1.02;margin-top:clamp(8px,3vh,32px)}
.faq-lede{width:fit-content;margin:12px auto 0;font-size:clamp(15px,1.3vw,17px);color:var(--stone)}
.faq-list{display:flex;flex-direction:column;gap:10px;margin-top:clamp(24px,4vh,40px)}
.faq-item{border-radius:20px;overflow:hidden}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
                  padding:18px 20px 18px 22px;cursor:pointer;border-radius:20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.faq-item summary h2{margin:0;text-align:left;font-size:clamp(16px,1.5vw,18px);font-weight:700;
                     line-height:1.35;letter-spacing:-.01em;color:var(--black)}
/* Plus that turns into a cross. */
.faq-icon{position:relative;flex:0 0 28px;height:28px;border-radius:50%;background:rgba(20,20,20,.06);
          transition:transform .35s var(--ease),background .25s}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.75px;
          border-radius:2px;background:var(--black);transform:translate(-50%,-50%)}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-icon{transform:rotate(45deg);background:var(--black)}
.faq-item[open] .faq-icon::before,.faq-item[open] .faq-icon::after{background:#fff}
.faq-item summary:hover .faq-icon{background:rgba(20,20,20,.12)}
.faq-item[open] summary:hover .faq-icon{background:var(--black)}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0;max-width:36em;font-size:15px;line-height:1.6;color:var(--ink);text-align:left}
/* Smooth open where the browser can animate to auto height. */
@supports (interpolate-size:allow-keywords){
  .faq-page{interpolate-size:allow-keywords}
  .faq-item::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
  .faq-item[open]::details-content{height:auto}
}
.faq-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(32px,5vh,48px)}
.faq-cta p{margin:0;color:var(--stone);font-size:15px}
.faq-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:18px 0 28px;font-size:14px}
.faq-foot a{color:var(--ink)}
@media (max-width:560px){
  .faq-page{padding:0 20px}
  .faq-item summary{padding:16px 16px 16px 18px}
  .faq-a{padding:0 18px 18px}
  .faq-foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .faq-icon,.faq-item::details-content{transition:none} }
.faq-top .panel-back{text-decoration:none}
footer.faq-foot{border-top:0}

/* ============================================================
   About
   ============================================================ */
.about{flex:1 0 auto;padding-bottom:clamp(32px,6vh,64px)}
.about h1{text-align:center;font-size:clamp(36px,6vw,72px);line-height:1.02;margin-top:clamp(8px,3vh,32px)}
.about h2{text-align:center;font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;margin:0}
.about section{margin-top:clamp(28px,5vh,48px)}
.about-p,.about section > p{max-width:36em;margin:12px auto 0;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:var(--ink);text-align:left}
.about-why{padding:clamp(22px,3vw,36px);border-radius:28px}
.about-why p{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--black)}
.people{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.person{display:flex;align-items:center;gap:16px;padding:18px;border-radius:22px}
.person img,.person-mono{width:72px;height:72px;border-radius:50%;flex:0 0 72px;object-fit:cover;display:block;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 8px 20px -8px rgba(30,40,70,.45)}
.person-mono{display:grid;place-items:center;font-weight:900;font-size:28px;color:#fff;
  background:linear-gradient(135deg,#3D68B2,#E8559A 60%,#F07A1F)}
.person h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;text-align:left}
.person-role{margin:2px 0 0;font-family:var(--meta);font-size:12.5px;letter-spacing:.05em;color:var(--stone)}
.person-focus{margin:6px 0 0;font-size:14.5px;color:var(--ink)}
.about-svcs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.about-svcs a{padding:8px 14px;border-radius:999px;text-decoration:none;font-size:14px;color:var(--black);
  background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 4px 12px -6px rgba(30,40,70,.35);transition:transform .2s}
.about-svcs a:hover{transform:translateY(-1px)}
.about-partner{padding:clamp(22px,3vw,36px);border-radius:28px;text-align:center}
.about-partner .detail-k{margin:0 0 6px;text-align:center}
.about-partner .partner-name{font-size:clamp(26px,3.4vw,40px);font-weight:900;letter-spacing:-.03em}
.about-partner p{text-align:center;margin-left:auto;margin-right:auto}
.partner-link{display:inline-block;margin-top:14px;font-size:14px;color:var(--black);text-decoration:none;
  border-bottom:1px solid rgba(20,20,20,.3);padding-bottom:1px}
.partner-link:hover{color:var(--green-dk);border-bottom-color:var(--green)}
@media (max-width:560px){ .people{grid-template-columns:1fr} }
nav.about-svcs{position:static;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:auto}

/* About, take two: purpose first */
.about-film{margin-top:clamp(24px,4vh,40px);padding:8px;border-radius:28px}
.about-film video{display:block;width:100%;border-radius:22px;background:#000;aspect-ratio:16/9}
.about-ghw{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ghw{padding:clamp(18px,2.4vw,26px);border-radius:24px;text-align:center}
.ghw .detail-k{margin:0 0 8px;text-align:center}
.ghw h2{font-size:clamp(17px,1.6vw,20px);line-height:1.3;font-weight:800;letter-spacing:-.015em}
.values{margin:16px auto 0;min-width:min(420px,100%)}
.values li{display:flex;flex-direction:column;gap:2px;padding:12px 4px}
.values strong{font-weight:800;color:var(--black);font-size:15.5px}
.values span{font-size:14.5px;color:var(--ink)}
.partner-logo{display:inline-block;margin:6px 0 2px;transition:opacity .2s}
.partner-logo img{display:block;width:clamp(180px,24vw,240px);height:auto}
.partner-logo:hover{opacity:.75}
.about-partner p:not(.detail-k){margin-top:10px}
@media (max-width:700px){ .about-ghw{grid-template-columns:1fr} }
.sub-lines.values{display:block;width:auto;max-width:30em;text-align:center}
.values li{align-items:center}

/* About film: the Why over the footage */
.about-film{position:relative;margin:clamp(24px,4vh,40px) 0 0;border-radius:28px;overflow:hidden;
  background:#000;aspect-ratio:16/9;box-shadow:0 24px 60px -24px rgba(20,20,40,.55)}
.about-film video{display:block;width:100%;height:100%;object-fit:cover}
/* A soft dark wash so the words hold over the brightest streaks. */
.about-film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(0,0,0,.55),rgba(0,0,0,.15) 70%,transparent)}
.film-why{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.4vw,16px);padding:0 clamp(18px,6vw,80px);text-align:center;color:#fff}
.film-k{font-family:var(--meta);font-size:clamp(12px,1.1vw,14px);letter-spacing:.05em;color:rgba(255,255,255,.8);
  opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease)}
.film-line{font-weight:900;letter-spacing:-.03em;line-height:1.05;font-size:clamp(26px,5.2vw,64px);text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.55)}
.fw{display:inline-block;opacity:0;transform:translateY(14px);filter:blur(6px);
  transition:opacity .5s,transform .6s var(--ease),filter .5s}
.film-k.on,.fw.on,.about-film.is-static .film-k,.about-film.is-static .fw{opacity:1;transform:none;filter:none}
.about-ghw:has(.ghw:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){ .about-film{border-radius:22px;aspect-ratio:4/5} }
.film-k{font-size:clamp(13px,1.3vw,16px);color:rgba(255,255,255,.9)}

/* Film captions: Why centred and bold; How bottom-left in regular weight. */
.about-film + .about-film{margin-top:12px}
.film-bl .film-why{align-items:flex-start;justify-content:flex-end;text-align:left;
  padding:clamp(18px,4vw,48px)}
.film-bl .film-line{font-weight:400;letter-spacing:-.02em;font-size:clamp(22px,3.6vw,46px);max-width:16em}
.film-bl::after{background:linear-gradient(20deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 45%,transparent 70%)}

/* ============================================================
   About story: How, What and the bywho way over one film.
   Swipe (or arrow) through; captions bottom-left, regular weight.
   ============================================================ */
.about-story{position:relative;margin-top:12px;border-radius:28px;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(135deg,#F2A541,#E8702A);box-shadow:0 24px 60px -24px rgba(120,60,10,.5)}
.about-story video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-story::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(15deg,rgba(40,16,0,.62),rgba(40,16,0,.25) 45%,transparent 72%)}
.story-track{position:absolute;inset:0;z-index:2;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.story-track::-webkit-scrollbar{display:none}
.story-track:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.8);border-radius:28px}
.story-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-start;color:#fff;
  padding:clamp(20px,4vw,48px) clamp(20px,4vw,48px) clamp(64px,8vw,92px)}
.story-k{margin:0;font-family:var(--meta);font-size:clamp(12px,1.1vw,14px);letter-spacing:.05em;color:rgba(255,255,255,.9)}
.about .story-line{margin:8px 0 0;text-align:left;font-weight:400;font-size:clamp(22px,3.4vw,44px);
  line-height:1.15;letter-spacing:-.02em;max-width:17em;color:#fff;text-shadow:0 2px 22px rgba(40,16,0,.45)}
.story-line b{font-weight:600}
.story-k,.story-line{opacity:0;transform:translateY(12px);transition:opacity .6s ease .1s,transform .7s var(--ease) .1s}
.story-slide.is-on .story-k,.story-slide.is-on .story-line{opacity:1;transform:none}
.story-ui{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,48px) clamp(16px,2.4vw,26px);pointer-events:none}
.story-dots{display:flex;gap:6px}
.story-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.45);transition:width .35s var(--ease),background .3s}
.story-dots i.on{width:22px;background:#fff}
.story-nav{display:flex;align-items:center;gap:8px;pointer-events:auto}
.story-count{font-family:var(--meta);font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.9);margin-right:4px}
.story-btn{appearance:none;border:0;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:background .2s}
.story-btn:hover{background:rgba(255,255,255,.32)}
.story-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){
  .about-story{aspect-ratio:4/5;border-radius:22px}
  .story-btn{display:none}
}
@media (prefers-reduced-motion:reduce){ .story-k,.story-line{transition:none} }
/* Slides are always visible; the arriving one just plays an entrance. */
.story-k,.story-line{opacity:1;transform:none;transition:none}
.story-slide.is-on .story-k,.story-slide.is-on .story-line{animation:story-in .7s var(--ease) both}
.story-slide.is-on .story-line{animation-delay:.08s}
@keyframes story-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* A firmer wash: the paint starts pale, so white text needs real shade. */
.about-story{background:linear-gradient(135deg,#9A4416,#C2561F)}
.about-story::after{background:
  linear-gradient(0deg,rgba(28,10,0,.6),rgba(28,10,0,0) 40%),
  linear-gradient(15deg,rgba(28,10,0,.78),rgba(28,10,0,.45) 50%,rgba(28,10,0,.12) 85%)}
.story-count,.story-k{text-shadow:0 1px 10px rgba(28,10,0,.6)}
@media (prefers-reduced-motion:reduce){ .story-slide.is-on .story-k,.story-slide.is-on .story-line{animation:none} }

/* Footer credit: Groundwork, the development partner. */
.foot-partner{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--stone);
  font-family:var(--meta);font-size:12px;letter-spacing:.05em;border:0}
.foot-partner img{display:block;width:64px;height:auto;opacity:.85;transition:opacity .2s}
.foot-partner:hover img{opacity:1}
.foot-partner:hover span{color:var(--black)}
@media (max-width:560px){
  .scr-foot .foot-partner,.faq-foot .foot-partner,.policy-foot .foot-partner{order:3;width:100%;justify-content:center}
}

/* ============================================================
   About, take three: a hero that plays, a dark footer you search
   ============================================================ */
.ab-hero{min-height:calc(100svh - 90px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(24px,6vh,64px) 0;position:relative}
.about .ab-scramble{margin:0;font-size:clamp(44px,9vw,128px);line-height:1;letter-spacing:-.035em;cursor:default;
  white-space:nowrap}
.ab-ch{display:inline-block;text-align:center}
.ab-ch.spin{color:var(--stone)}
@media (max-width:560px){ .about .ab-scramble{white-space:normal;font-size:clamp(40px,13vw,64px)} }

.ab-words{position:relative;height:clamp(64px,9vw,96px);width:100%;margin-top:clamp(18px,3vh,32px)}
.ab-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);opacity:0;white-space:nowrap;
  font-weight:900;letter-spacing:-.03em;font-size:clamp(26px,4vw,48px);color:var(--black);
  transition:opacity .35s ease,transform .45s var(--ease)}
.ab-word.on{opacity:1;transform:translate(-50%,-50%)}
.ab-mtn{display:block;width:clamp(150px,18vw,220px);height:auto;overflow:visible}
.ab-mtn path{fill:none;stroke:var(--black);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ab-mtn .c{stroke:#3D68B2;stroke-width:2.5}
.ab-mtn .m{stroke-dasharray:420;stroke-dashoffset:420}
.ab-mtn .c{stroke-dasharray:80;stroke-dashoffset:80}
.is-mtn.on .m{animation:draw 1.4s var(--ease) forwards}
.is-mtn.on .c{animation:draw .8s ease .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ab-cue{position:absolute;bottom:clamp(8px,3vh,28px);left:50%;width:22px;height:34px;margin-left:-11px;border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(20,20,20,.25)}
.ab-cue::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;
  background:var(--black);animation:cue 1.8s var(--ease) 1.5s 3 both}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.about .about-what{margin-top:clamp(36px,6vh,64px);margin-bottom:clamp(40px,8vh,80px)}

/* Black footer: the text is dark until the light finds it. */
.ab-foot{background:#0B0B0C;color:#fff;position:relative;overflow:hidden;border:0;padding:0;
  --fx:50%;--fy:35%}
.ab-foot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--fx) var(--fy),rgba(61,104,178,.22),rgba(232,85,154,.1) 45%,transparent 70%)}
.ab-foot-in{position:relative;max-width:820px;margin:0 auto;padding:clamp(64px,12vh,120px) var(--gut) clamp(28px,5vh,44px);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.ab-lit{--lx:50%;--ly:50%;position:relative;display:grid}
.ab-lit > *{grid-area:1/1;color:#7F7F86}   /* 4.9:1 on the footer: readable unlit */
/* The lit copy: solid white, shown only inside a soft circle at the light. */
.ab-lit > .ab-glow{color:#fff;pointer-events:none;
  -webkit-mask-image:radial-gradient(220px circle at var(--lx) var(--ly),#000 35%,transparent 100%);
          mask-image:radial-gradient(220px circle at var(--lx) var(--ly),#000 35%,transparent 100%)}
.ab-q{margin:0;font-size:clamp(56px,11vw,140px);font-weight:900;letter-spacing:-.04em;line-height:1}
.ab-name{margin:clamp(20px,3vh,32px) 0 0;max-width:30em;font-size:clamp(18px,2vw,24px);line-height:1.5;text-align:center}
.ab-foot.is-still .ab-lit > *{color:#fff}
.ab-foot.is-still .ab-glow{display:none}
.ab-cta{margin-top:clamp(32px,5vh,48px);background:#fff;color:var(--black)}
.ab-cta:hover{background:#E9ECEF;color:var(--black)}
.ab-partner{margin-top:clamp(48px,8vh,80px);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--meta);font-size:12px;letter-spacing:.05em;color:#B9BDB4}
.ab-partner img{display:block;width:120px;height:auto;filter:invert(1);opacity:.9;transition:opacity .2s}
.ab-partner a:hover img{opacity:1}
.ab-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:clamp(36px,6vh,56px);
  position:static;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px}
.ab-links a{color:#C9CCC4;text-decoration:none}
.ab-links a:hover{color:#fff}

.ab-wd{display:inline-block;white-space:nowrap}

/* Header link to About, and the copyright line. */
.top-about{text-decoration:none;border-bottom:1px solid rgba(108,114,102,.35);padding-bottom:1px;transition:color .2s,border-color .2s}
.top-about:hover{color:var(--black);border-bottom-color:var(--green)}
.scr-foot .foot-copy{font-size:11.5px}
.ab-copy{margin:18px 0 0;font-family:var(--meta);font-size:12px;letter-spacing:.05em;color:#9A9DA3}

/* About on wide screens: room for the films and one row of buttons. */
.faq-page.about-page{max-width:1160px}
.about-page .about-film,.about-page .about-story{margin-top:clamp(20px,4vh,40px)}
.about-page .about-film + .about-story{margin-top:clamp(24px,5vh,56px)}
@media (min-width:900px){
  .arcade{flex-wrap:nowrap}
}
.ab-lit > *{color:#8E8E95}   /* stays readable where the coloured glow passes behind it */


/* ============================================================
   About: arcade buttons in real 3D
   The page is the panel the buttons are mounted in. The housing ring is
   barely proud of it; the cap is a short solid that rises ~10px. The
   .arcade perspective origin is the viewer's eye (set by script), so the
   depth is what you would see from where you are looking.
   ============================================================ */
.ab-arcade{min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(120px,22vh,240px) 0}
.arcade{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(36px,4.4vw,64px) clamp(24px,4.6vw,68px);
  perspective:1000px;perspective-origin:50% 50%;
  position:static;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (min-width:900px){ .arcade{flex-wrap:nowrap} }
.arc{--s:clamp(92px,9.4vw,132px);--lift:7px;
  --lt:color-mix(in srgb,var(--c) 80%,#fff);--dk:color-mix(in srgb,var(--c) 62%,#000);--dk2:color-mix(in srgb,var(--c) 46%,#000);
  display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,24px);
  text-decoration:none;color:var(--black);-webkit-tap-highlight-color:transparent;width:calc(var(--s) + 36px);
  transform-style:preserve-3d}
.arc-btn{position:relative;display:block;width:var(--s);height:var(--s);transform-style:preserve-3d}
.arc-btn > span{position:absolute;display:block;border-radius:50%}
/* Shadow on the panel, from a light up and to the left; it shortens as
   the cap goes down. */
.arc-shadow{inset:6%;transform:translate(calc(var(--lift) * .5),calc(var(--lift) * .8));
  background:rgba(20,14,10,.38);filter:blur(calc(4px + var(--lift) * .4));transition:transform .14s var(--ease),filter .14s}
/* Housing ring: three thin layers, 0-2px proud of the panel. */
.arc-ring{inset:0;background:var(--dk)}
.arc-ring.r0{transform:translateZ(0)}
.arc-ring.r1{transform:translateZ(1px)}
.arc-ring.r2{transform:translateZ(2px);
  background:radial-gradient(circle at 34% 26%,var(--lt),var(--c) 55%,color-mix(in srgb,var(--c) 88%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
/* The well the cap sits in. */
.arc-well{inset:10%;transform:translateZ(2.2px);background:var(--dk2);box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}
/* Cap: seven discs from the well floor to --lift; the top one carries the face. */
.arc-cap{inset:12%;background:var(--dk);
  transform:translateZ(calc(2.5px + var(--lift) * var(--i) / 6));transition:transform .14s var(--ease)}
.arc-cap:not(.top){background:linear-gradient(90deg,var(--dk2),var(--dk) 40%,var(--dk) 60%,var(--dk2))}
.arc-cap.top{background:linear-gradient(160deg,var(--lt),var(--c) 48%,color-mix(in srgb,var(--c) 90%,#000));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.12)}
.arc:hover{--lift:4px}
.arc:active{--lift:1px}
/* The press: the cap snaps to the floor, springs back up past rest,
   and settles. */
@property --lift{syntax:'<length>';inherits:true;initial-value:7px}
.arc.pressed{animation:arc-press .46s linear forwards}
.arc.pressed .arc-cap,.arc.pressed .arc-shadow{transition:none}
@keyframes arc-press{
  18%{--lift:0px} 30%{--lift:0px}
  55%{--lift:9px} 75%{--lift:5px} 90%{--lift:7.5px}}
.arc.pressed .arc-btn{animation:arc-squash .46s var(--ease)}
@keyframes arc-squash{18%{transform:scale(.93)}30%{transform:scale(.94)}55%{transform:scale(1.04)}75%{transform:scale(.99)}100%{transform:none}}
.arc.pressed .arc-cap.top{animation:arc-dim .46s var(--ease)}
@keyframes arc-dim{18%,30%{filter:brightness(.82)}55%{filter:brightness(1.08)}100%{filter:none}}
.arc.pressed .arc-label{animation:arc-nod .46s var(--ease)}
@keyframes arc-nod{25%{transform:translateY(2px)}60%{transform:translateY(-2px)}100%{transform:none}}
.arc:focus-visible{outline:none}
.arc:focus-visible .arc-ring.r2{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--green)}
.arc-label{font-weight:800;font-size:clamp(14px,1.2vw,16px);letter-spacing:-.01em;text-align:center;line-height:1.25}
@media (max-width:560px){
  .arcade{gap:44px 14px;perspective:800px}
  .arc{--s:84px;--lift:6px;width:100px}
  .arc:hover{--lift:6px}
}
@media (prefers-reduced-motion:reduce){ .arc-cap,.arc-shadow{transition:none} .arc.pressed,.arc.pressed .arc-btn,.arc.pressed .arc-cap.top,.arc.pressed .arc-label{animation:none} }

/* Home footer: details left, the call centred, copyright right. On phones
   it stacks, centred: the call, then Cape Town and the links, then the
   email, then copyright. */
.scr-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.scr-foot .foot-info{justify-self:start}
.scr-foot .scr-links{justify-self:center}
.scr-foot .foot-copy{justify-self:end}
.panel-mark-link{display:block;border-radius:50%;text-decoration:none}
@media (max-width:760px){
  .scr-foot{display:flex;flex-direction:column;gap:26px;text-align:center}
  .scr-foot .scr-links{order:-1}
  .scr-foot>.slate{display:block;line-height:1.7}
  .scr-foot .foot-info{white-space:nowrap;font-size:11px;letter-spacing:.02em}
  .scr-foot .foot-copy{margin-top:-14px}
}

/* The name in the footer line, in the wordmark's blue. */
.foot-brand{color:#3D68B2;font-weight:700}

/* Contact: three glass rows, the call first. */
.ct-list{display:grid;gap:14px;margin-top:clamp(28px,5vh,48px)}
.ct-item{display:grid;gap:4px;padding:20px 22px;border-radius:20px;text-decoration:none;color:var(--black);
  transition:transform .25s var(--ease),box-shadow .25s}
a.ct-item:hover{transform:translateY(-2px)}
.ct-k{font-family:var(--meta);font-size:12px;letter-spacing:.05em;color:var(--stone)}
.ct-v{font-weight:700;font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;overflow-wrap:anywhere}
.ct-note{font-size:14px;color:var(--stone)}
.ct-call .ct-v{color:#3D68B2}

/* Full-Service: the four stages as a card between the heading and the
   button, so the button sits bottom-centre like every other service. The
   card is sized to its words, with the room left around it. */
.panel-svc .fs-plan{width:fit-content;max-width:min(460px,100%);margin:auto;padding:4px 24px;border-radius:22px}
.fs-plan-list{list-style:none;margin:0;padding:0}
.fs-plan-list li + li{border-top:1px solid rgba(20,20,20,.08)}
.fs-plan-list a{display:flex;align-items:baseline;gap:14px;padding:clamp(9px,1.4vh,12px) 2px;text-decoration:none;color:var(--black);
  transition:transform .25s var(--ease)}
.fs-plan-list a:hover{transform:translateX(3px)}
.fs-plan-list a:hover .fs-name{color:#3D68B2}
.fs-n{font-family:var(--meta);font-size:11px;letter-spacing:.05em;color:var(--stone);flex:0 0 auto}
.fs-t{display:grid;gap:1px;flex:1 1 auto;justify-items:start;text-align:left}
.fs-name{font-weight:700;font-size:16px;letter-spacing:-.01em;transition:color .2s}
.fs-what{font-size:13.5px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.fs-promise{margin:2px 0 0;padding-top:10px;border-top:1px solid rgba(20,20,20,.08);
  text-align:center;font-family:var(--meta);font-size:11.5px;letter-spacing:.05em;color:var(--stone)}
.panel-svc.swap .fs-plan{animation-duration:.5s;animation-timing-function:var(--ease);animation-fill-mode:both;animation-delay:.05s}
.panel-svc.in-next .fs-plan{animation-name:swap-in-next}
.panel-svc.in-prev .fs-plan{animation-name:swap-in-prev}
.panel-svc.out-next .fs-plan{animation-name:swap-out-next;animation-duration:.28s;animation-timing-function:ease-in;animation-delay:0s}
.panel-svc.out-prev .fs-plan{animation-name:swap-out-prev;animation-duration:.28s;animation-timing-function:ease-in;animation-delay:0s}
@media (max-width:560px){
  .panel-svc .fs-plan{margin:auto;padding:2px 20px;border-radius:20px}
  .fs-plan-list a{gap:12px}
}

/* ============================================================
   Analog: a button with weight, a drum with detents, a swipe
   ============================================================ */
/* The dark buttons: a moulded key. Light from above, a darker lip
   underneath, and it travels down onto that lip when pressed. */
.btn,.scr-links .foot-cta{
  background:linear-gradient(180deg,#3A3A3C 0%,#1E1E20 48%,#111112 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 3px rgba(0,0,0,.45),
    0 3px 0 #050505,
    0 4px 3px rgba(0,0,0,.25),
    0 14px 26px -10px rgba(20,20,20,.55);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .2s;
}
.btn:hover,.scr-links .foot-cta:hover{
  background:linear-gradient(180deg,#5F7A53 0%,#4C6342 50%,#3C5034 100%);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 3px rgba(0,0,0,.35),
    0 3px 0 #2A3824,
    0 5px 4px rgba(0,0,0,.22),
    0 18px 30px -10px rgba(40,60,30,.5);
}
.btn:active,.scr-links .foot-cta:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 2px 4px rgba(0,0,0,.5),
    0 1px 0 #050505,
    0 2px 2px rgba(0,0,0,.25);
}
/* The white key on the About footer keeps its colour, gains the same body. */
.ab-cta{background:linear-gradient(180deg,#FFFFFF 0%,#F1F1EF 55%,#E2E2DF 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.12),0 3px 0 #9A9AA0,0 14px 26px -10px rgba(0,0,0,.6)}
.ab-cta:hover{background:linear-gradient(180deg,#FFFFFF 0%,#E9ECEF 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.1),0 3px 0 #9A9AA0,0 18px 30px -10px rgba(0,0,0,.6)}
.ab-cta:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.18),0 1px 0 #9A9AA0}

/* The service drum on each service page: more air between cards. */
.sw-item{margin:22px 0}
.panel-svc .sw-pad{height:calc(50cqh - 52px)}
.panel-svc .sub-wheel{max-height:340px}

/* The drum's items roll on a cylinder (set by script), so let the
   transform move freely and keep text crisp. */
.wh-item{will-change:transform;backface-visibility:hidden}

/* A dial scale down the right of the home drum: fine ticks with a
   longer one every fifth, turning as the drum turns. */
.wh-dial{position:absolute;right:clamp(10px,2vw,28px);top:50%;width:14px;
  height:min(100%,calc(var(--wh-fs) * 4.4));transform:translateY(-50%);pointer-events:none;z-index:2;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2240%22%3E%3Cg%20fill%3D%22%23141414%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%221%22%20opacity%3D%22.38%22/%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%227%22%20height%3D%221%22%20opacity%3D%22.22%22/%3E%3Crect%20x%3D%227%22%20y%3D%2216%22%20width%3D%227%22%20height%3D%221%22%20opacity%3D%22.22%22/%3E%3Crect%20x%3D%227%22%20y%3D%2224%22%20width%3D%227%22%20height%3D%221%22%20opacity%3D%22.22%22/%3E%3Crect%20x%3D%227%22%20y%3D%2232%22%20width%3D%227%22%20height%3D%221%22%20opacity%3D%22.22%22/%3E%3C/g%3E%3C/svg%3E") right 0 top var(--sy,0px)/14px 40px repeat-y;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.wh-dial::after{content:"";position:absolute;right:-2px;top:50%;width:20px;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,#3D68B2,#C9D8F4)}

/* Swipe to the Creative Studio: a tab on the right edge on touch screens. */
.studio-tab{display:none}
@media (hover:none) and (pointer:coarse){
  .studio-tab{--pull:0;display:flex;align-items:center;position:fixed;z-index:30;right:0;top:70%;
    transform:translate(calc(100% - 16px - var(--pull) * 120px),-50%);
    padding:12px 14px 12px 12px;border-radius:14px 0 0 14px;text-decoration:none;color:var(--black);
    background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:inset 1px 1px 0 #fff,-6px 6px 18px -8px rgba(30,40,70,.35);
    font-family:var(--meta);font-size:12px;letter-spacing:.02em;white-space:nowrap;
    transition:transform .3s var(--ease)}
  .studio-tab::before{content:"";flex:0 0 auto;width:3px;height:22px;margin-right:12px;border-radius:2px;
    background:linear-gradient(180deg,#3D68B2,#C9D8F4)}
  .studio-tab.is-go{transform:translate(calc(-50vw + 50%),-50%)}
  body.detail-open .studio-tab{display:none}
  .screen.dragging{transition:none}
  .screen{transition:transform .35s var(--ease),opacity .26s}
  .screen.to-studio{transform:translateX(-30%) !important;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .studio-tab,.screen{transition:none}
}
@media (max-width:560px){
  .wh-dial{display:none}
}

/* ============================================================
   Credits (review mock): the stamp, the desk, one credit
   ============================================================ */
.credits-page{max-width:1160px;margin:0 auto;padding:0 var(--gut);min-height:100svh;display:flex;flex-direction:column}
.credit-one{max-width:820px}
.review-note{align-self:center;margin:4px 0 0;padding:6px 12px;border-radius:999px;font-family:var(--meta);font-size:12.5px;
  letter-spacing:.04em;color:#1F3F78;background:rgba(61,104,178,.1)}
.credits,.cr-main{flex:1 0 auto}

/* "Made by who": a rubber stamp in brand-blue ink, set down at an angle
   the way "Made in China" is stamped on a carton. Double ruled, slightly
   uneven at the edges (an SVG ink filter), and it lands with a thud. */
.cr-hero{display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:calc(100svh - 150px);justify-content:center;padding:clamp(40px,8vh,96px) 0 clamp(48px,9vh,110px)}
.ink-defs{position:absolute;width:0;height:0;overflow:hidden}
.cr-stamp{margin:0;display:inline-flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4vw,16px);
  padding:clamp(18px,2.6vw,30px) clamp(22px,3.6vw,46px) clamp(14px,2vw,22px);
  color:#2F5AA6;border:clamp(3px,.42vw,5px) solid currentColor;border-radius:clamp(12px,1.6vw,20px);
  box-shadow:inset 0 0 0 clamp(4px,.6vw,7px) var(--paper),inset 0 0 0 clamp(5px,.75vw,9px) currentColor;
  transform:rotate(-4deg);filter:url(#ink);opacity:.94;
  animation:stamp-down .7s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes stamp-down{
  0%{transform:rotate(-4deg) scale(1.5);opacity:0}
  55%{transform:rotate(-4deg) scale(.96);opacity:.94}
  75%{transform:rotate(-4deg) scale(1.015)}
  100%{transform:rotate(-4deg) scale(1);opacity:.94}}
.cr-stamp-main{font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:.92;white-space:nowrap;
  font-size:clamp(30px,5.4vw,76px)}
.cr-stamp-sub{display:flex;gap:clamp(10px,2vw,22px);align-items:center;width:100%;justify-content:center;
  padding-top:clamp(8px,1.2vw,12px);border-top:2px solid currentColor;
  font-family:var(--meta);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(11px,1.15vw,14px)}
.cr-stamp-sub span + span::before{content:"·";margin-right:clamp(10px,2vw,22px)}
.cr-lede{margin:clamp(36px,6vh,56px) 0 0;max-width:32em;font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--ink);text-align:left}
.cr-count{margin:14px 0 0;font-family:var(--meta);font-size:12.5px;letter-spacing:.05em;color:var(--stone)}
@media (prefers-reduced-motion:reduce){ .cr-stamp{animation:none} }
@media (max-width:560px){
  .cr-hero{min-height:calc(100svh - 170px)}
  .cr-stamp{transform:rotate(-3deg)}
}

/* The desk: objects set down, a few degrees off true. Picking one up
   straightens it and lifts it towards you. */
.desk{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
  padding:clamp(8px,2vh,24px) 0 clamp(56px,10vh,110px)}
.desk-obj{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--black);
  transform:rotate(var(--tilt));transition:transform .35s var(--ease)}
.desk-obj:hover,.desk-obj:focus-visible{transform:rotate(0) translateY(-6px) scale(1.02)}
.desk-obj:focus-visible{outline:none}
.desk-obj:focus-visible .obj-body{box-shadow:0 0 0 3px var(--paper),0 0 0 5px #3D68B2}
.obj-body{position:relative;display:block;aspect-ratio:4/3;border-radius:6px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 10px 22px -10px rgba(30,40,70,.35),0 2px 4px rgba(0,0,0,.06);
  transition:box-shadow .35s var(--ease)}
.desk-obj:hover .obj-body{box-shadow:0 1px 1px rgba(0,0,0,.06),0 26px 40px -16px rgba(30,40,70,.45),0 4px 8px rgba(0,0,0,.06)}
/* folder: card stock with a tab */
.obj-folder .obj-body{background:linear-gradient(180deg,#F2EDE2,#E7E0D0);border-radius:4px 10px 10px 10px;margin-top:12px}
.obj-tab{position:absolute;left:0;top:-12px;width:42%;height:14px;border-radius:8px 8px 0 0;background:#F2EDE2}
.obj-folder .obj-body::after{content:"";position:absolute;left:14%;right:14%;top:38%;height:1px;background:rgba(20,20,20,.12);
  box-shadow:0 14px 0 rgba(20,20,20,.08),0 28px 0 rgba(20,20,20,.08)}
/* film: a dark frame with a play mark */
.obj-film .obj-body{background:linear-gradient(160deg,#2A2B2E,#141416);border-radius:8px}
.obj-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.obj-play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent #fff}
/* print: a white-bordered photograph */
.obj-print .obj-body{background:#fff;padding:9px 9px 30px;border-radius:3px;aspect-ratio:4/3.4}
.obj-photo{display:block;width:100%;height:100%;border-radius:1px;background:linear-gradient(160deg,#C9D3E4,#9AA6BC)}
.obj-card{display:grid;gap:3px;text-align:left}
.obj-kind{font-family:var(--meta);font-size:12px;letter-spacing:.04em;color:var(--stone)}
.obj-brand{font-weight:800;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.01em}
.obj-meta{font-size:14px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .desk-obj,.obj-body{transition:none} }

/* One credit: a plain case study. Title and summary, a row of facts,
   the work, then labelled sections on a two-column grid. */
.cs{padding-bottom:clamp(40px,8vh,80px)}
.cs-head{padding:clamp(40px,8vh,88px) 0 clamp(28px,5vh,44px)}
.cs-label{margin:0 0 12px;font-family:var(--meta);font-size:12.5px;letter-spacing:.05em;color:var(--stone)}
.cs-head h1{margin:0;font-weight:900;letter-spacing:-.045em;line-height:1;font-size:clamp(44px,8vw,96px);text-align:left}
.cs-summary{margin:18px 0 0;max-width:34em;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--black)}
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;margin:clamp(28px,5vh,44px) 0 0;
  padding-top:18px;border-top:1px solid rgba(20,20,20,.1)}
.cs-facts dt{font-family:var(--meta);font-size:12px;letter-spacing:.05em;color:var(--stone);margin-bottom:4px}
.cs-facts dd{margin:0;font-size:15px;font-weight:600;line-height:1.4}
.cs-media{margin:0 0 clamp(36px,7vh,64px);aspect-ratio:16/9;border-radius:6px;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(160deg,#DCE3EF,#B9C4D8)}
.cs-media-film{background:linear-gradient(160deg,#2A2B2E,#141416)}
.cs-media-folder{background:linear-gradient(180deg,#F2EDE2,#E2DAC8)}
.cs-media figcaption{padding:6px 12px;border-radius:999px;font-family:var(--meta);font-size:12px;letter-spacing:.04em;
  color:var(--black);background:rgba(255,255,255,.85)}
.cs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:12px 40px;
  padding:clamp(22px,4vh,32px) 0;border-top:1px solid rgba(20,20,20,.1)}
.cs-row h2{margin:0;font-size:15px;font-weight:700;letter-spacing:0;text-align:left;color:var(--black)}
.cs-text p,.cs-text-one{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--ink)}
.cs-text p:last-child,.cs-text-one{margin-bottom:0}
.cs-made{list-style:none;margin:0;padding:0}
.cs-made li{display:grid;gap:2px;padding:0 0 14px}
.cs-made li + li{padding-top:14px;border-top:1px solid rgba(20,20,20,.07)}
.cs-n{font-weight:700;font-size:16px}
.cs-d{font-size:15px;line-height:1.6;color:var(--ink)}
.cs-credit h2{font-weight:900;letter-spacing:-.02em}
.cs-review{margin-top:clamp(28px,5vh,44px);padding:clamp(18px,3vw,26px);border-radius:14px;background:rgba(61,104,178,.06)}
.cs-review h2{margin:0 0 8px;font-size:16px;font-weight:700;text-align:left}
.cs-review p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink)}
@media (max-width:700px){
  .cs-facts{grid-template-columns:1fr 1fr}
  .cs-row{grid-template-columns:1fr;gap:8px}
}
/* A gap only Charl or the client can fill. */
.tbc{display:inline;padding:1px 6px;border-radius:6px;background:#E3EBF8;color:#1F3F78;font-size:.92em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.tbc span{font-family:var(--meta);font-size:11.5px;letter-spacing:.04em;font-weight:700;margin-right:4px}
@media (max-width:560px){
  .credits-page{padding:0 20px}
  .desk{grid-template-columns:1fr 1fr;gap:28px 16px}
  .obj-brand{font-size:17px}
  .obj-meta{font-size:13px}
}

/* The "you are here" pill can be dragged to another service. */
.fs-seg{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.fs-seg a{-webkit-user-drag:none}
.fs-thumb{cursor:grab}
.fs-seg.dragging{cursor:grabbing}
.fs-seg.dragging .fs-thumb{transition:none;box-shadow:0 10px 22px -8px rgba(20,20,20,.65);cursor:grabbing}
.fs-seg.dragging a{transition:color .15s}

/* ============================================================
   Credits: pinstripe paper, and a filing cabinet on phones
   ============================================================ */
/* Five thin blue pinstripes, ruled top to bottom behind the page. */
.credits-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  --pin:rgba(61,104,178,.16);
  background:
    linear-gradient(90deg,transparent calc(16.667% - .5px),var(--pin) calc(16.667% - .5px) calc(16.667% + .5px),transparent calc(16.667% + .5px)),
    linear-gradient(90deg,transparent calc(33.333% - .5px),var(--pin) calc(33.333% - .5px) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
    linear-gradient(90deg,transparent calc(50% - .5px),var(--pin) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(66.667% - .5px),var(--pin) calc(66.667% - .5px) calc(66.667% + .5px),transparent calc(66.667% + .5px)),
    linear-gradient(90deg,transparent calc(83.333% - .5px),var(--pin) calc(83.333% - .5px) calc(83.333% + .5px),transparent calc(83.333% + .5px))}

.obj-ftab{display:none}

/* Phones: the desk becomes a drawer. One file per row; each one stops a
   little below the last as you scroll, so the tabs of everything you have
   passed stay visible, the way files sit in a cabinet. Tabs are staggered
   left, centre, right, like real hanging files. */
@media (max-width:560px){
  .desk{display:block;padding:8px 0 38vh}
  .desk-obj{position:sticky;top:calc(70px + var(--n) * 7px);display:block;height:min(62svh,440px);
    margin:0 0 30px;padding:18px 20px 20px;transform:none;border-radius:4px 14px 14px 14px;
    box-shadow:0 -1px 0 rgba(255,255,255,.7) inset,0 -8px 18px -12px rgba(30,40,70,.35),0 12px 28px -18px rgba(30,40,70,.4)}
  .desk-obj:hover,.desk-obj:focus-visible{transform:none}
  .obj-folder.desk-obj{background:linear-gradient(180deg,#F3EEE3,#E6DFCF)}
  .obj-print.desk-obj{background:linear-gradient(180deg,#FFFFFF,#F3F3F1)}
  .obj-film.desk-obj{background:linear-gradient(180deg,#2C2D30,#161618);color:#fff}
  /* the tab */
  .obj-ftab{display:block;position:absolute;top:-24px;height:26px;padding:6px 14px 0;max-width:46%;
    left:calc(var(--tabx, 0) * 1%);border-radius:10px 10px 0 0;background:inherit;
    font-family:var(--meta);font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--black);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desk-obj:nth-child(3n+1) .obj-ftab{--tabx:0}
  .desk-obj:nth-child(3n+2) .obj-ftab{--tabx:28}
  .desk-obj:nth-child(3n) .obj-ftab{--tabx:54}
  .obj-folder .obj-ftab{background:#F3EEE3}
  .obj-print .obj-ftab{background:#FFFFFF}
  .obj-film .obj-ftab{background:#2C2D30;color:#fff}
  .desk-obj{margin-top:24px;transition:filter .3s}
  .desk-obj.is-behind{filter:brightness(.96)}
  .desk-obj.is-behind .obj-ftab{opacity:0}
  .obj-ftab{transition:opacity .2s}
  /* what is in the file, title first */
  .desk-obj .obj-card{position:relative;z-index:1}
  .obj-film .obj-kind,.obj-film .obj-meta{color:#C9CBD0}
  .desk-obj .obj-brand{font-size:24px}
  .desk-obj .obj-body{position:absolute;left:20px;right:20px;bottom:20px;top:132px;aspect-ratio:auto;margin:0;
    box-shadow:none;border-radius:6px}
  .obj-folder .obj-body{background:rgba(20,20,20,.04);border-radius:6px}
  .obj-folder .obj-tab{display:none}
  .obj-film .obj-body{background:rgba(255,255,255,.06)}
  .obj-print .obj-body{padding:8px 8px 26px;background:#fff;box-shadow:0 6px 16px -10px rgba(30,40,70,.45)}
}
/* Small labels on folder card and pinstripe read a shade darker. */
.credits-page .obj-kind,.credits-page .cs-label,.credits-page .cs-facts dt,.credits-page .cr-count{color:#585D53}
@media (max-width:560px){ .credits-page .obj-film .obj-kind{color:#C9CBD0} }

/* ============================================================
   Credits, sleek pass: same ideas, crisper finish. Straight grid,
   cool whites instead of manila, rounder corners, softer depth, and a
   clean-cut stamp instead of rough ink.
   ============================================================ */
/* Stamp: precise lines, no ink texture. */
.cr-stamp{filter:none;opacity:1;color:#2F5AA6;transform:rotate(-3deg);
  border-width:clamp(2px,.28vw,3px);
  box-shadow:inset 0 0 0 clamp(4px,.55vw,6px) transparent,inset 0 0 0 clamp(5px,.65vw,7.5px) currentColor}
@keyframes stamp-down{
  0%{transform:rotate(-3deg) scale(1.4);opacity:0}
  55%{transform:rotate(-3deg) scale(.97);opacity:1}
  75%{transform:rotate(-3deg) scale(1.01)}
  100%{transform:rotate(-3deg) scale(1);opacity:1}}
.cr-stamp-sub{border-top-width:1.5px}

/* Desk: a straight grid of objects that lift when you point at them. */
.desk{gap:clamp(40px,5vw,64px) clamp(24px,3vw,40px)}
.desk-obj{transform:none;gap:16px}
.desk-obj:hover,.desk-obj:focus-visible{transform:translateY(-6px)}
.obj-body{border-radius:14px;
  box-shadow:0 1px 2px rgba(20,30,50,.06),0 18px 40px -24px rgba(20,30,50,.38)}
.desk-obj:hover .obj-body{box-shadow:0 1px 2px rgba(20,30,50,.05),0 30px 56px -26px rgba(20,30,50,.45)}
.obj-folder .obj-body{background:linear-gradient(180deg,#FFFFFF,#EEF1F6);border-radius:6px 14px 14px 14px}
.obj-tab{background:#FFFFFF;height:12px;top:-11px;width:38%;border-radius:8px 8px 0 0;box-shadow:0 -1px 2px rgba(20,30,50,.04)}
.obj-folder .obj-body::after{background:rgba(47,90,166,.16);box-shadow:0 14px 0 rgba(47,90,166,.1),0 28px 0 rgba(47,90,166,.1)}
.obj-film .obj-body{background:linear-gradient(160deg,#23252A,#0D0E10)}
.obj-play{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -8px rgba(0,0,0,.6)}
.obj-print .obj-body{background:#fff;padding:10px;border-radius:10px;aspect-ratio:4/3}
.obj-photo{border-radius:6px;background:linear-gradient(160deg,#DCE4F2,#AEBCD6)}
.obj-brand{font-size:clamp(19px,1.7vw,22px);letter-spacing:-.02em}
.credits-page .obj-kind{letter-spacing:.04em}

/* Case study frame matches. */
.cs-media{border-radius:16px}
.cs-media-folder{background:linear-gradient(180deg,#FFFFFF,#EEF1F6);box-shadow:0 1px 2px rgba(20,30,50,.06),0 18px 40px -24px rgba(20,30,50,.3)}
.cs-media-print{background:linear-gradient(160deg,#DCE4F2,#AEBCD6)}
.cs-media-film{background:linear-gradient(160deg,#23252A,#0D0E10)}

/* Phones: the drawer in the same cool whites. */
@media (max-width:560px){
  .desk-obj{border-radius:6px 16px 16px 16px;
    box-shadow:0 -1px 0 rgba(255,255,255,.8) inset,0 -10px 22px -16px rgba(20,30,50,.3),0 14px 30px -20px rgba(20,30,50,.4)}
  .obj-folder.desk-obj{background:linear-gradient(180deg,#FFFFFF,#EEF1F6)}
  .obj-folder .obj-ftab,.obj-print .obj-ftab{background:#FFFFFF}
  .obj-print.desk-obj{background:linear-gradient(180deg,#FFFFFF,#F4F6FA)}
  .obj-film.desk-obj{background:linear-gradient(180deg,#23252A,#111214)}
  .obj-film .obj-ftab{background:#23252A}
  .obj-ftab{border-radius:10px 10px 0 0;font-weight:700}
  .desk-obj .obj-body{border-radius:10px}
  .obj-folder .obj-body{background:rgba(47,90,166,.05)}
  .desk-obj.is-behind{filter:brightness(.97)}
}
@media (min-width:561px){ .obj-body{margin-top:12px} }

/* ============================================================
   Credits hero: full-bleed film with the copy over it. No frame.
   The section is taller than the screen; its stage sticks while
   --p (0 to 1, set on scroll) scales the film down and fades it out,
   uncovering the pinstriped page and the work beneath.
   ============================================================ */
.cr-index{position:relative}
.cr-index > .faq-top{position:absolute;top:0;left:var(--gut);right:var(--gut);z-index:4}
.cr-hero{position:relative;display:block;height:175svh;min-height:0;padding:0;
  margin:0 calc(50% - 50vw);width:100vw;text-align:center}
.cr-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.cr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1 - var(--p, 0) * .24));transform-origin:50% 45%;
  opacity:calc(1 - var(--p, 0) * 1.15);will-change:transform,opacity}
.cr-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 var(--gut);
  transform:translateY(calc(var(--p, 0) * -70px));opacity:calc(1 - var(--p, 0) * 1.7)}
.cr-index .cr-stamp{color:#141414}
.cr-index .cr-lede{margin:clamp(28px,5vh,44px) 0 0;max-width:34em;width:fit-content;text-align:left;
  font-size:clamp(16px,1.45vw,19px);line-height:1.55;font-weight:500;color:#141414}
.cr-note{position:absolute;top:clamp(76px,10vh,96px);left:50%;transform:translateX(-50%);z-index:2;margin:0;
  white-space:nowrap;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cr-cue{position:absolute;bottom:clamp(20px,4vh,36px);left:50%;transform:translateX(-50%);z-index:1;
  font-family:var(--meta);font-size:12.5px;letter-spacing:.04em;color:#141414;opacity:calc(1 - var(--p, 0) * 4)}
.cr-cue::after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:#141414;
  animation:cr-cue 1.8s ease-in-out infinite}
@keyframes cr-cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.cr-index .desk{position:relative;z-index:1;margin-top:-30svh}
@media (max-width:560px){
  .cr-hero{height:165svh}
  .cr-note{white-space:normal;width:max-content;max-width:86vw;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cr-hero{height:100svh}
  .cr-index .desk{margin-top:0}
  .cr-cue::after{animation:none}
}
/* Tighter hand-off: the work rises as the film leaves. */
.cr-hero{height:150svh}
.cr-video{opacity:calc(1 - var(--p, 0) * 1.35)}
.cr-index .desk{margin-top:-42svh}
.cr-note{opacity:calc(1 - var(--p, 0) * 3)}
@media (max-width:560px){ .cr-hero{height:145svh} .cr-index .desk{margin-top:-38svh} }
@media (prefers-reduced-motion:reduce){ .cr-hero{height:100svh} .cr-index .desk{margin-top:0} }

/* ============================================================
   Credits hero v3: wordmark and "Credits" across the top, the film
   shrinks to nothing on scroll, and one large intro line holds at the
   bottom left of the screen until the film is gone, then rides up into
   the page above the work.
   ============================================================ */
.cr-top{position:absolute;top:0;left:var(--gut);right:var(--gut);z-index:5;display:flex;align-items:center;
  justify-content:space-between;padding:clamp(16px,2.4vw,28px) 0}
.cr-mark{display:block;line-height:0}
.cr-mark img{height:clamp(26px,2.6vw,34px);width:auto}
.cr-page{font-weight:700;font-size:clamp(15px,1.25vw,17px);letter-spacing:-.01em;color:#141414}
.cr-hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:230svh;padding-bottom:clamp(40px,8vh,96px)}
.cr-stage{flex:none;display:block}
.cr-video{transform:scale(calc(1 - var(--p, 0)));transform-origin:50% 50%;opacity:1}
.cr-note{top:clamp(80px,11vh,104px);opacity:calc(1 - var(--p, 0) * 3)}
.cr-intro{position:sticky;bottom:clamp(28px,7vh,72px);z-index:3;margin:auto 0 0;align-self:flex-start;
  padding:0 0 0 max(var(--gut), calc((100vw - 1160px) / 2 + var(--gut)));
  max-width:calc(14em + max(var(--gut), calc((100vw - 1160px) / 2 + var(--gut))));
  text-align:left;font-weight:800;font-size:clamp(34px,5vw,74px);line-height:1.02;letter-spacing:-.035em;color:#141414}
.cr-index .desk{margin-top:0}
@media (max-width:560px){
  .cr-hero{height:220svh}
  .cr-intro{font-size:clamp(32px,9.4vw,42px);padding-right:20px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .cr-hero{height:auto}
  .cr-stage{position:relative}
  .cr-intro{position:relative;bottom:auto;margin-top:clamp(28px,5vh,48px)}
}

/* ============================================================
   Credits hero v4: two lines, told in order.
   1. "Selected work from bywho." sits large at the bottom left over the
      film. As the film shrinks to nothing it lifts and fades.
   2. The second line then builds word by word, with room around it,
      as the heading of the work.
   ============================================================ */
.cr-hero{display:block;height:200svh;padding:0}
.cr-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.cr-video{transform:scale(clamp(0, calc(1 - var(--p, 0) * 1.25), 1))}
.cr-note{opacity:calc(1 - var(--p, 0) * 4)}
.cr-one{position:absolute;z-index:3;margin:0;
  left:max(var(--gut), calc((100vw - 1160px) / 2 + var(--gut)));right:var(--gut);bottom:clamp(32px,8vh,88px);
  font-weight:800;font-size:clamp(46px,7.4vw,124px);line-height:.96;letter-spacing:-.045em;color:#141414;
  text-align:left;max-width:9.5em;
  transform:translateY(calc(var(--p, 0) * -9vh));
  opacity:clamp(0, calc((.92 - var(--p, 0)) / .32), 1)}
.cr-lead{position:relative;z-index:1;padding:clamp(72px,16vh,180px) 0 clamp(64px,12vh,140px)}
.cr-two{margin:0;max-width:17em;text-align:left;font-weight:800;font-size:clamp(34px,4.8vw,78px);
  line-height:1.04;letter-spacing:-.035em;color:#141414}
.cr-two .soft{color:#6B7078}
.cr-two .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.cr-two .w > span{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--k) * 70ms)}
.cr-lead.in .w > span{transform:none;opacity:1}
.cr-index .desk{margin-top:0}
@media (max-width:560px){
  .cr-hero{height:190svh}
  .cr-one{font-size:clamp(44px,13vw,60px);max-width:none}
  .cr-two{font-size:clamp(30px,8.6vw,40px)}
  .cr-lead{padding:clamp(56px,12vh,110px) 0 clamp(48px,9vh,90px)}
}
@media (prefers-reduced-motion:reduce){
  .cr-hero{height:100svh}
  .cr-stage{position:relative}
  .cr-one{transform:none;opacity:1}
  .cr-two .w > span{transform:none;opacity:1;transition:none}
}
/* Overlap the hand-off: line two rises while line one lifts away. */
.cr-lead{margin-top:-52svh}
.cr-one{opacity:clamp(0, calc((.8 - var(--p, 0)) / .3), 1)}
@media (max-width:560px){ .cr-lead{margin-top:-48svh} }
@media (prefers-reduced-motion:reduce){ .cr-lead{margin-top:0} }
/* v5 spacing and a softer hand-off */
.cr-one{bottom:clamp(110px,24vh,260px);
  transform:translateY(calc(var(--p, 0) * -14vh));
  opacity:clamp(0, calc((.88 - var(--p, 0)) / .48), 1)}
.cr-lead{margin-top:-30svh;padding:clamp(96px,20vh,220px) 0 clamp(120px,22vh,260px)}
.cr-two .w > span{transform:translateY(110%);
  transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--k) * 55ms)}
@media (max-width:560px){
  .cr-one{bottom:clamp(96px,20vh,180px)}
  .cr-lead{margin-top:-28svh;padding:clamp(80px,16vh,150px) 0 clamp(96px,16vh,160px)}
}
@media (prefers-reduced-motion:reduce){ .cr-one{transform:none;opacity:1} .cr-lead{margin-top:0} }
.cr-video{transform-origin:50% 14%}
.cr-lead{margin-top:-44svh}
@media (max-width:560px){ .cr-lead{margin-top:-46svh} }
@media (prefers-reduced-motion:reduce){ .cr-lead{margin-top:0} }
.cr-video{transform-origin:50% 0}

/* ============================================================
   Credits: covers and service-coloured tags
   ============================================================ */
/* Every file carries a tab in its service colour. */
.obj-tab{display:none}
.obj-svc{position:absolute;z-index:2;left:0;top:-13px;height:24px;padding:5px 12px 0;border-radius:9px 9px 0 0;
  background:var(--svc);color:var(--svc-ink);font-family:var(--meta);font-size:11.5px;font-weight:700;letter-spacing:.03em;
  white-space:nowrap;box-shadow:0 -1px 2px rgba(20,30,50,.06)}
.obj-body{position:relative;border-top-left-radius:4px}
/* The cover fills the file; the file's own colour shows if it is missing. */
.has-cover .obj-body,.has-cover.obj-film .obj-body{background:var(--cover) center/cover no-repeat,linear-gradient(180deg,#EEF1F6,#DCE3EE)}
.has-cover.obj-film .obj-body{background:var(--cover) center/cover no-repeat,linear-gradient(160deg,#23252A,#0D0E10)}
.has-cover.obj-print .obj-body{background:#fff}
.has-cover.obj-print .obj-photo{background:var(--cover) center/cover no-repeat,linear-gradient(160deg,#DCE4F2,#AEBCD6)}
.obj-folder .obj-body::after{display:none}
.obj-sum{font-size:14.5px;line-height:1.45;color:var(--ink);max-width:34ch}
.obj-meta{font-size:13px;color:#585D53}
.cs-media{background-image:var(--cover),linear-gradient(160deg,#DCE4F2,#AEBCD6);background-size:cover;background-position:center}
.cs-media-film{background-image:var(--cover),linear-gradient(160deg,#23252A,#0D0E10)}
.cs-media-folder{background-image:var(--cover),linear-gradient(180deg,#FFFFFF,#EEF1F6)}
@media (max-width:560px){
  /* In the drawer the tab carries the name, in the service colour. */
  .desk-obj .obj-ftab,.obj-film .obj-ftab,.obj-folder .obj-ftab,.obj-print .obj-ftab{background:var(--svc);color:var(--svc-ink)}
  .obj-svc{display:none}
  .desk-obj .obj-body{top:168px}
  .desk-obj .obj-sum{font-size:14px}
  .obj-film .obj-sum,.obj-film .obj-meta{color:#C9CBD0}
}
.obj-svc,.obj-ftab{padding-right:18px}
.obj-svc,.desk-obj .obj-ftab{box-shadow:inset -9px 0 0 var(--svc-also, var(--svc))}
/* Desk files: quieter summary and meta, a thinner border round the cover. */
.obj-sum{font-size:13px;line-height:1.45}
.obj-meta{font-size:12px}
.obj-print .obj-body{padding:5px}
.obj-print .obj-photo{border-radius:6px}
@media (max-width:560px){
  .desk-obj .obj-sum{font-size:13px}
  .obj-print .obj-body{padding:5px}
  /* the cover fills whatever the text leaves, close to the file's edges */
  .desk-obj{display:flex;flex-direction:column;gap:14px}
  .desk-obj .obj-body{position:relative;inset:auto;order:1;flex:1;min-height:0;margin:0 -10px -10px}
}
/* File hierarchy: the cover, its context as a one-line caption beneath it,
   then the name (with the sector beside it) and the summary. On mobile the
   name and summary lead and the cover and caption follow. */
.obj-meta{display:block;margin-top:-8px;font-size:12px;letter-spacing:.01em;color:#585D53;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obj-card{gap:6px}
.obj-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.obj-head .obj-brand{min-width:0}
.obj-head .obj-kind{flex:none;white-space:nowrap}
@media (max-width:560px){
  .desk-obj .obj-card{order:0}
  /* text, cover and caption share one left edge, with a slimmer file border */
  .desk-obj{padding:16px 14px 12px}
  .desk-obj .obj-body{order:1;margin:0}
  .desk-obj .obj-meta{order:2;margin:-6px 0 0;line-height:1.4}
}
/* The summary fills the file's full width, so it squares up with the name
   row above and the cover below instead of stopping short. */
.obj-sum{display:block;max-width:none;width:100%;text-wrap:pretty}

/* ============================================================
   Credits: the file. Two tabs (brand, then the service in its
   colour) sit on a card whose front is the cover and whose back
   is the project's context. Clicking turns it over.
   ============================================================ */
.cf{position:relative;display:flex;flex-direction:column;min-width:0;--cf-r:14px}
.cf-tabs{position:relative;z-index:1;display:flex;align-items:flex-end;gap:3px;height:26px;margin-bottom:-1px;min-width:0}
.cf-tab{margin:0;height:26px;padding:6px 12px 0;border-radius:9px 9px 0 0;font-family:var(--meta);font-size:12px;
  font-weight:700;line-height:1.2;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-brand{flex:0 1 auto;min-width:0;background:#fff;color:var(--black);box-shadow:0 -1px 2px rgba(20,30,50,.06)}
.cf-svc{flex:0 0 auto;padding-right:18px;background:var(--svc);color:var(--svc-ink);
  box-shadow:inset -9px 0 0 var(--svc-also, var(--svc))}
.cf-card{position:relative;aspect-ratio:4/3;perspective:1600px;border-radius:4px var(--cf-r) var(--cf-r) var(--cf-r);
  transition:transform .35s var(--ease)}
.cf-face{position:absolute;inset:0;margin:0;border:0;border-radius:inherit;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;
  box-shadow:0 1px 2px rgba(20,30,50,.06),0 18px 40px -24px rgba(20,30,50,.38);
  transition:transform .75s cubic-bezier(.2,.75,.2,1),box-shadow .35s var(--ease)}
.cf-front{display:block;width:100%;padding:0;cursor:pointer;
  background:var(--cover, none) center/cover no-repeat,linear-gradient(180deg,#FFFFFF,#E6EBF3)}
.cf-film .cf-front{background:var(--cover, none) center/cover no-repeat,linear-gradient(160deg,#23252A,#0D0E10)}
.cf-back{transform:rotateY(180deg);display:flex;flex-direction:column;gap:8px;padding:16px 18px 14px;
  background:linear-gradient(180deg,#FFFFFF,#F4F6FA);color:var(--black);text-align:left;overflow:hidden;cursor:pointer}
.cf.is-flipped .cf-front{transform:rotateY(-180deg)}
.cf.is-flipped .cf-back{transform:rotateY(0)}
@media (hover:hover){
  .cf:hover .cf-card{transform:translateY(-4px)}
  .cf:hover .cf-face{box-shadow:0 1px 2px rgba(20,30,50,.05),0 30px 56px -26px rgba(20,30,50,.45)}
}
.cf-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -8px rgba(0,0,0,.6)}
.cf-play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent #fff}
.cf-sum{margin:0;font-size:14px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.cf-meta{margin:0;font-size:12px;line-height:1.4;color:#585D53}
@media (prefers-reduced-motion:reduce){
  .cf-face{transition:opacity .2s linear;transform:none!important}
  .cf-back{opacity:0}
  .cf.is-flipped .cf-back{opacity:1}
  .cf.is-flipped .cf-front{opacity:0}
}
/* Phones: the drawer. Files stack as you scroll; the one in front shows
   its tabs. The file is taller so the cover and the context both have room. */
@media (max-width:560px){
  .cf{position:sticky;top:calc(72px + var(--n) * 7px);margin:0 0 30px}
  .cf-card{aspect-ratio:auto;height:min(58svh,420px)}
  .cf-tabs{transition:opacity .2s}
  .cf.is-behind .cf-tabs{opacity:0}
  .cf.is-behind .cf-card{filter:brightness(.97)}
  .cf-back{padding:20px 20px 16px;gap:10px}
  .cf-sum{font-size:15px}
}
/* What was made, as small labels on the back of the file. */
.cf-made{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0;padding:0;list-style:none}
.cf-made li{padding:3px 9px;border-radius:999px;background:rgba(20,30,50,.06);font-size:12px;line-height:1.35;color:var(--black)}
/* Room for the deliverables: a squarer file with a floor on its height,
   and a tighter back. */
@media (min-width:561px){
  .cf-card{aspect-ratio:1/1;min-height:324px}
  .cf-back{padding:15px 16px 13px;gap:7px}
  .cf-sum{font-size:13.5px}
}

/* The file is one button: the click turns it. Its focus ring sits on
   the card. */
.cf-card{cursor:pointer}
.cf-hit{position:absolute;inset:0;z-index:3;width:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer}
.cf-hit:focus-visible{outline:2px solid #3D68B2;outline-offset:3px}
.cf-front{cursor:auto}
/* The caption under the cover: the project's context on one line. */
.cf-meta{margin:10px 0 0;font-size:12px;line-height:1.4;letter-spacing:.01em;color:#585D53;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The back of the document: centred on the page, the client's mark at
   the head, the brief, then the deliverables as a call sheet. */
.cf-back{display:grid;place-items:center;padding:18px;text-align:center;cursor:auto}
.cf-doc{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:34ch}
.cf-logo{display:grid;place-items:center;height:30px;margin-bottom:2px}
.cf-logo img{display:block;max-height:30px;max-width:130px;width:auto;height:auto;object-fit:contain}
.cf-logo-text{display:none;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1;color:var(--black)}
.cf-logo.is-missing img{display:none}
.cf-logo.is-missing .cf-logo-text{display:block}
.cf-sector{font-family:var(--meta);font-size:12px;letter-spacing:.02em;color:#585D53}
.cf-sum{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink);text-wrap:balance}
.cf-sheet{display:grid;justify-items:center;gap:6px;width:100%;margin-top:4px;padding-top:9px;border-top:1px solid rgba(20,30,50,.12)}
.cf-sheet-h{font-family:var(--meta);font-size:12px;letter-spacing:0;color:#585D53}
.cf-made{display:grid;gap:4px;margin:0;padding:0;list-style:none;text-align:left}
.cf-made li{display:flex;align-items:center;gap:8px;padding:0;border-radius:0;background:none;font-size:13px;line-height:1.35;color:var(--black)}
.cf-made li::before{content:"";flex:none;width:12px;height:12px;border-radius:3px;
  background:var(--svc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
@media (min-width:561px){ .cf-back{padding:16px} }
@media (max-width:560px){
  .cf{margin-bottom:22px}
  .cf-back{padding:22px}
  .cf-doc{gap:10px}
  .cf-sum{font-size:15px}
  .cf-made li{font-size:14px}
}
.cf-turnmark{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 12px -6px rgba(20,30,50,.5);transition:transform .35s var(--ease)}
.cf-turnmark svg{fill:none;stroke:#141414;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cf-card:hover .cf-turnmark{transform:rotate(-30deg)}
@media (max-width:560px){
  .cf-meta{transition:opacity .2s}
  .cf.is-behind .cf-meta{opacity:0}
}
/* Logos with a wordmark under the symbol need the height to read. */
.cf-logo{height:44px}
.cf-logo img{max-height:44px;max-width:150px}
.cf-logo img[src$="wordmark.png"]{max-height:30px}
/* The back, laid out like the reverse of a document: industry in the
   top-right corner, the campaign and brief, the deliverables, and the
   client's logo at the foot with room around it. The file is portrait
   on wider screens so the page has space to breathe. */
@media (min-width:561px){ .cf-card{aspect-ratio:4/5;min-height:0} }
.cf-back{display:flex;flex-direction:column;align-items:center;padding:14px 18px 0;text-align:center}
.cf-back .cf-sector{align-self:flex-end;font-family:var(--meta);font-size:12px;letter-spacing:.02em;text-transform:none;color:#585D53}
.cf-doc{flex:1;justify-content:center;gap:8px;padding:6px 0}
.cf-title{margin:0;font-weight:800;font-size:18px;line-height:1.2;letter-spacing:-.015em;color:var(--black)}
.cf-sheet{border-top:0;padding-top:4px;margin-top:6px;gap:5px}
.cf-sheet-h{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--black)}
.cf-back .cf-logo{flex:none;display:grid;place-items:center;width:100%;height:auto;margin:0;padding:22px 0 26px;
  border-top:1px solid rgba(20,30,50,.08)}
.cf-back .cf-logo img{max-height:40px;max-width:140px}
.cf-back .cf-logo img[src$="wordmark.png"]{max-height:26px}
@media (max-width:560px){
  .cf-back{padding:16px 22px 0}
  .cf-title{font-size:21px}
  .cf-back .cf-logo{padding:26px 0 30px}
}
@media (min-width:561px){ .cf-card{min-height:360px} }
@media (max-width:560px){ .cf-card{height:min(60svh,440px);min-height:384px} }

/* The whole file turns, tabs and all. Each side carries its own tabs;
   on the back they sit top-right, as a folder's would when turned over. */
.cf-turn{position:relative;perspective:1800px;transition:transform .35s var(--ease)}
.cf-side{-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.cf-side-b{position:absolute;inset:0;transform:rotateY(180deg)}
.cf.is-flipped .cf-side-a{transform:rotateY(-180deg)}
.cf.is-flipped .cf-side-b{transform:rotateY(0)}
.cf .cf-turn .cf-face{transform:none;-webkit-backface-visibility:visible;backface-visibility:visible;opacity:1}
.cf .cf-card{transform:none}
@media (hover:hover){ .cf:hover .cf-turn{transform:translateY(-4px)} }
.cf-side-b .cf-tabs{justify-content:flex-end}
.cf-side-b .cf-svc{padding:6px 12px 0 18px;box-shadow:inset 9px 0 0 var(--svc-also, var(--svc))}
.cf-side-b .cf-card{border-radius:var(--cf-r) 4px var(--cf-r) var(--cf-r)}
.cf-hit{z-index:5}
.cf-turnmark{display:none}
/* Films fill the front of their file. */
.cf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;background:transparent}
@media (prefers-reduced-motion:reduce){
  .cf-side{transition:opacity .2s linear;transform:none!important}
  .cf-side-b{opacity:0}
  .cf.is-flipped .cf-side-b{opacity:1}
  .cf.is-flipped .cf-side-a{opacity:0}
}
/* Video layers ignore backface-visibility, so each side also hides at the
   halfway point of the turn, when it is edge-on. */
.cf-side{transition:transform .8s cubic-bezier(.2,.75,.2,1),visibility 0s linear .3s}
.cf-side-b{visibility:hidden}
.cf.is-flipped .cf-side-a{visibility:hidden}
.cf.is-flipped .cf-side-b{visibility:visible}

/* ============================================================
   Credits: the closing call to action. The same film-away as the
   hero (a tall section, a sticky stage, --p shrinking the film to
   nothing from the top) with "Discovery calls are free." at the
   bottom left; the plain white enquiry sheet rises as it goes.
   ============================================================ */
.cr-cta{position:relative;display:block;height:200svh;margin:clamp(40px,8vh,96px) calc(50% - 50vw) 0;width:100vw}
.cr-cta .cr-one{max-width:8.5em}
.cr-enquire{position:relative;z-index:1;margin:-44svh calc(50% - 50vw) 0;width:100vw;background:#fff;
  padding:clamp(88px,16vh,180px) var(--gut) clamp(96px,16vh,180px);
  box-shadow:0 -1px 0 rgba(20,30,50,.06)}
.cr-sheet{max-width:620px;margin:0 auto}
.cr-enquire-h{margin:0;text-align:center;font-weight:800;font-size:clamp(30px,4.2vw,54px);line-height:1.04;
  letter-spacing:-.035em;color:#141414;outline:none}
.cr-enquire-sub{margin:16px auto 0;max-width:32em;text-align:center;font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:#585D53;text-wrap:balance}
.cr-form{display:grid;gap:22px;margin-top:clamp(36px,6vh,56px);text-align:left}
.cr-form[hidden]{display:none}
.cr-svcs{margin:0;padding:0;border:0;min-width:0}
.cr-svcs legend,.cr-field > span{padding:0;margin:0 0 10px;font-size:14px;font-weight:600;color:#141414}
.cr-field > span{margin:0}
.cr-field > span em{font-style:normal;font-weight:400;color:#585D53}
.cr-chips{display:flex;flex-wrap:wrap;gap:8px}
.cr-chip{position:relative;display:inline-flex}
.cr-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cr-chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(20,20,20,.16);background:#fff;font-size:15px;font-weight:600;color:#141414;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.cr-chip span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--svc, #C9CBD0)}
.cr-chip:hover span{border-color:rgba(20,20,20,.4)}
.cr-chip input:checked + span{background:var(--svc, #141414);border-color:var(--svc, #141414);color:var(--svc-ink, #fff)}
.cr-chip input:checked + span::before{background:currentColor}
.cr-chip input:focus-visible + span{box-shadow:0 0 0 3px #fff,0 0 0 5px #3D68B2}
.cr-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cr-field{display:grid;gap:8px}
.cr-field input,.cr-field textarea{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid rgba(20,20,20,.16);
  border-radius:12px;background:#fff;font:inherit;font-size:16px;line-height:1.4;color:#141414;transition:border-color .2s,box-shadow .2s}
.cr-field textarea{resize:vertical;min-height:96px}
.cr-field input:hover,.cr-field textarea:hover{border-color:rgba(20,20,20,.3)}
.cr-field input:focus,.cr-field textarea:focus{outline:none;border-color:#3D68B2;box-shadow:0 0 0 3px rgba(61,104,178,.16)}
.cr-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:#3A3D42}
.cr-consent input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:#141414}
.cr-consent a{color:#141414;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(20,20,20,.3)}
.cr-status{min-height:1.4em;margin:-6px 0 0;font-size:14px;color:#585D53}
.cr-status.is-bad{color:#B3261E}
.cr-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.cr-send{min-height:54px;padding:0 32px;border:0;border-radius:999px;background:#141414;color:#fff;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 12px 24px -14px rgba(20,20,20,.6);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.cr-send:hover{background:#2A2B2E;transform:translateY(-1px)}
.cr-send:active{transform:translateY(0) scale(.98)}
.cr-send:disabled,.cr-mail:disabled{opacity:.6;cursor:wait}
.cr-mail{min-height:44px;padding:0 8px;border:0;background:none;font:inherit;font-size:14px;color:#585D53;cursor:pointer}
.cr-mail span{color:#141414;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(20,20,20,.3)}
.cr-send:focus-visible,.cr-mail:focus-visible,.cr-consent input:focus-visible{outline:2px solid #3D68B2;outline-offset:3px}
.cr-step{margin-top:clamp(36px,6vh,56px);display:grid;justify-items:center;gap:14px}
.cr-step[hidden]{display:none}
.cr-step-h{margin:0;font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;color:#141414;outline:none}
.cr-cal{width:100%;height:min(720px,80svh);border:1px solid rgba(20,20,20,.1);border-radius:16px;background:#fff}
.cr-cal-out{font-size:14px;color:#585D53}
@media (max-width:560px){
  .cr-cta{height:190svh}
  .cr-enquire{margin-top:-46svh}
  .cr-row{grid-template-columns:1fr}
  .cr-chip span{font-size:14px;padding:0 15px}
  .cr-send{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cr-cta{height:100svh}
  .cr-enquire{margin-top:0}
  .cr-chip span,.cr-send,.cr-field input,.cr-field textarea{transition:none}
}
/* The sheet rises over the last of the film, like a form sliding open,
   so there is no empty stretch between the two. */
.cr-enquire{margin-top:-72svh;border-radius:28px 28px 0 0;
  box-shadow:0 -1px 0 rgba(20,30,50,.05),0 -24px 60px -32px rgba(20,30,50,.35)}
@media (max-width:560px){ .cr-enquire{margin-top:-70svh;border-radius:22px 22px 0 0} }
@media (prefers-reduced-motion:reduce){ .cr-enquire{margin-top:0} }
.cr-step{scroll-margin-top:clamp(24px,6vh,64px)}
/* Case-study body copy wraps without leaving a word alone on its last line. */
.cs-text p,.cs-d{text-wrap:pretty}

/* Credits: a project's own media. On the file, the cover turns through
   its slides with a soft fade and a row of dots; in the case study they
   sit side by side, and on phones become a strip you swipe. */
.cf-slides{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.cf-slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.cf-slide.is-on{opacity:1}
.cf-dots{position:absolute;z-index:6;left:12px;bottom:12px;display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;
  background:rgba(20,20,20,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;transition:opacity .3s}
.cf-dots i{display:block;width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .4s var(--ease),background .4s}
.cf-dots i.is-on{width:18px;background:#fff}
.cf.is-flipped .cf-dots,.cf.is-behind .cf-dots{opacity:0}
@media (prefers-reduced-motion:reduce){ .cf-slide,.cf-dots i{transition:none} }

.cs-gallery{position:relative;left:50%;transform:translateX(-50%);width:min(1160px, calc(100vw - 2 * var(--gut)));
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 clamp(36px,7vh,64px)}
.cs-tile{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:16px;background:linear-gradient(160deg,#EEF1F6,#DCE3EE);
  box-shadow:0 1px 2px rgba(20,30,50,.06),0 18px 40px -24px rgba(20,30,50,.35)}
.cs-tile-media{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .cs-gallery{display:flex;gap:12px;width:100vw;padding:0 var(--gut) 4px;box-sizing:border-box;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-gallery::-webkit-scrollbar{display:none}
  .cs-tile{flex:0 0 78%;scroll-snap-align:center}
}
.cs-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cs-logos figure{margin:0;aspect-ratio:4/3;display:grid;place-items:center;padding:16%;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(20,30,50,.08)}
.cs-logos img{display:block;max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:560px){ .cs-logos{gap:8px} .cs-logos figure{padding:14%} }
.cs-logos figure{position:relative;display:block;padding:0}
.cs-logos img{position:absolute;inset:0;margin:auto;width:66%;height:58%;max-width:none;max-height:none;object-fit:contain}

/* Case study: a plain Draft banner across the top, and the Links and
   Credits rows. */
.cs-draft{margin:0 calc(50% - 50vw) 0;width:100vw;padding:9px var(--gut);box-sizing:border-box;text-align:center;
  background:#141414;color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em}
.credit-one > .cs-draft{position:relative;margin:0 0 8px}
.cs-links{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.cs-links li{display:grid;grid-template-columns:7.5em 1fr;gap:12px;align-items:baseline;font-size:16px}
.cs-links .cs-n{font-size:14px;font-weight:600;color:#585D53}
.cs-links a,.cs-credits a{color:var(--black);text-decoration:underline;text-decoration-color:rgba(20,20,20,.3);text-underline-offset:3px}
.cs-links a:hover,.cs-credits a:hover{text-decoration-color:currentColor}
.cs-credits{margin:0;display:grid;gap:14px}
.cs-credits div{display:grid;gap:2px}
.cs-credits dt{font-size:14px;font-weight:600;color:#585D53}
.cs-credits dd{margin:0;font-size:16px;line-height:1.5;color:var(--black)}
.credit-one > .cs-draft{position:relative;left:50%;width:100vw;margin:0 0 4px;transform:translateX(-50%)}
html:has(.credit-one){overflow-x:clip}
.cookie-text{text-wrap:pretty}

/* ============================================================
   Credits: carousel navigation, the closing logo slide with its
   way into the case study, and the case study tuned for phones.
   ============================================================ */
.cf-nav{position:absolute;z-index:7;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;transition:opacity .3s,visibility .3s}
.cf-nav > *{pointer-events:auto}
.cf-nav .cf-dots{position:static;display:flex;align-items:center;gap:0;padding:0 4px;border-radius:999px;
  background:rgba(20,20,20,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cf-dot{display:grid;place-items:center;width:18px;height:26px;padding:0;border:0;background:none;cursor:pointer;transition:width .4s var(--ease)}
.cf-dot::before{content:"";display:block;width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .4s var(--ease),background .4s}
.cf-dot.is-on{width:28px}
.cf-dot.is-on::before{width:18px;background:#fff}
.cf-arrows{display:flex;gap:6px}
.cf-arrow{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#141414;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 16px -8px rgba(20,30,50,.55);transition:transform .2s var(--ease),opacity .25s}
.cf-arrow svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cf-arrow:hover{transform:scale(1.06)}
.cf-arrow:active{transform:scale(.96)}
@media (hover:hover){
  .cf-arrows{opacity:0}
  .cf:hover .cf-arrows,.cf-arrows:focus-within{opacity:1}
}
.cf.is-flipped .cf-nav,.cf.is-behind .cf-nav{opacity:0;visibility:hidden}
.cf-end{display:grid;place-items:center}
.cf-end img{width:46%;height:auto}

/* Case study: the gallery pager (phones only) */
.cs-pager{display:none}
@media (max-width:760px){
  .cs-pager{display:flex;align-items:center;justify-content:space-between;margin:-18px 0 clamp(36px,6vh,52px)}
  .cs-pager-dots{display:flex;gap:6px;align-items:center}
  .cs-pager-dots i{display:block;width:6px;height:6px;border-radius:999px;background:rgba(20,20,20,.22);transition:width .35s var(--ease),background .35s}
  .cs-pager-dots i.is-on{width:18px;background:#141414}
  .cs-pager-arrows{display:flex;gap:8px}
  .cs-pager .cf-arrow{width:40px;height:40px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,30,50,.12)}
}

/* Case study on phones: more air around each section, larger section
   titles, and full-width link cards */
@media (max-width:560px){
  .cs-head h1{font-size:clamp(44px,13vw,56px)}
  .cs-row{gap:12px;padding-top:28px;padding-bottom:28px}
  .cs-row h2{font-size:18px;letter-spacing:-.01em}
  .cs-text p{font-size:16px;line-height:1.65}
  .cs-credits{gap:18px}
}
@media (max-width:760px){
  .cs-gallery{margin-bottom:14px}
  .cs-pager{margin-top:0}
}

/* The back of the file faces up on top of the click layer, so its link
   works; the rest of the back still turns it over. */
.cf.is-flipped .cf-side-b{z-index:6}
.cf-side-b{cursor:pointer}
.cf-case{align-self:center;display:inline-flex;align-items:center;gap:5px;margin-top:2px;padding:6px 2px;font-size:13px;font-weight:600;
  color:var(--black);text-decoration:underline;text-decoration-color:rgba(20,20,20,.3);text-underline-offset:3px}
.cf-case:hover{text-decoration-color:currentColor}
.cf-case:focus-visible{outline:2px solid #3D68B2;outline-offset:2px;border-radius:4px}
/* Phones: the carousel moves on by itself; no controls on the card. */
@media (max-width:560px){ .cf-nav{display:none} }
.cf-dot:focus-visible,.cf-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #3D68B2}
@media (prefers-reduced-motion:reduce){ .cf-dot,.cf-dot::before,.cf-arrow{transition:none} }
/* Room for the case-study link on the back */
.cf-back .cf-logo{padding:14px 0 16px}
.cf-doc{gap:6px}
@media (min-width:561px){ .cf-card{min-height:380px} }
@media (max-width:560px){ .cf-back .cf-logo{padding:16px 0 18px} .cf-card{min-height:412px} }

/* Case study: platform links as plain rows, a small icon beside each label */
.cs-links .cs-n{display:inline-flex;align-items:center;gap:8px}
.cs-ico{display:inline-grid;place-items:center;color:#585D53}
.cs-ico svg{width:15px;height:15px}
/* Founders: small round portraits with name and role beside them */
.cs-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:8px}
.cs-credits a.cs-person{display:flex;align-items:center;gap:12px;color:var(--black);text-decoration:none}
.cs-person img{flex:none;display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(20,30,50,.08),0 6px 14px -8px rgba(20,30,50,.45)}
.cs-pt{display:grid;gap:1px;min-width:0}
.cs-pn{font-size:16px;font-weight:700;text-decoration:underline;text-decoration-color:rgba(20,20,20,.25);text-underline-offset:3px}
.cs-person:hover .cs-pn{text-decoration-color:currentColor}
.cs-pr{font-size:13px;line-height:1.35;color:#585D53}
@media (max-width:560px){ .cs-people{grid-template-columns:1fr;gap:14px} }
.cf-hit{touch-action:pan-y}
/* An extra tag on a file (a second discipline) reads as a lighter tab of
   the same service colour. */
.cf-tab.cf-extra{background:#fff;color:#141414;box-shadow:inset 0 3px 0 var(--svc),0 -1px 2px rgba(20,30,50,.06)}
.cf-side-b .cf-tab.cf-extra{padding:6px 12px 0;box-shadow:inset 0 3px 0 var(--svc),0 -1px 2px rgba(20,30,50,.06)}
@media (max-width:560px){ .cf-tab{padding-left:10px;padding-right:10px} .cf-svc{padding-right:14px} }
.cf-tabs:has(.cf-extra){gap:2px}
.cf-tabs:has(.cf-extra) .cf-tab{padding-left:8px;padding-right:8px;letter-spacing:.01em}
.cf-tabs:has(.cf-extra) .cf-svc:not(.cf-extra){padding-right:12px}
.cf-tabs:has(.cf-extra) .cf-brand{flex:none}
/* Files never narrower than 300px, so three tabs always fit */
@media (min-width:561px){ .desk{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} }
/* A credited person without a link: same layout, no link underline */
.cs-credits span.cs-person{display:flex;align-items:center;gap:12px;color:var(--black)}
span.cs-person .cs-pn{text-decoration:none}
/* Home header: Credits beside Creative Studio */
.top-links{display:flex;align-items:center;gap:clamp(16px,2.6vw,32px)}
/* Approval pages (/review/<client>-<key>/): one client's files and the ask */
.rv-intro{max-width:560px;margin:0 auto;padding:clamp(120px,18vh,180px) 0 clamp(40px,6vh,64px)}
.rv-logo{display:block;margin:0 auto 24px;height:44px;width:auto}
.rv-intro .logo-link{display:block;width:fit-content;margin:0 auto 24px}
.rv-intro .logo-link .rv-logo{margin:0}
.rv-h{margin:0;text-align:center;font-weight:800;font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.03em;color:#141414;text-wrap:balance}
/* A short row of files, centred; a file left on its own is centred too */
@media (min-width:561px){
  .cr-review .desk{display:flex;flex-wrap:wrap;justify-content:center}
  .cr-review .desk > .cf{flex:0 1 310px;min-width:280px}
}
.rv-foot{justify-content:center;padding-top:clamp(40px,8vh,96px)}
/* Phones: two or three files need far less run-out than the full desk */
@media (max-width:560px){ .cr-review .desk{padding-bottom:4vh} }
/* About: a letter from the Creative Lead, set as a sheet of paper */
.ab-letter{padding:clamp(72px,12vh,140px) 0 clamp(24px,4vh,48px)}
.ab-sheet{max-width:640px;margin:0 auto;padding:clamp(36px,6vw,72px) clamp(24px,6vw,72px);background:#fff;border-radius:22px;
  box-shadow:0 1px 2px rgba(20,30,50,.05),0 32px 64px -36px rgba(20,30,50,.38)}
.ab-letter-k{margin:0;text-align:center;font-size:13px;letter-spacing:.02em;color:#585D53}
.ab-letter-h{margin:12px 0 0;text-align:center;font-weight:800;font-size:clamp(26px,3.2vw,40px);line-height:1.08;letter-spacing:-.025em;color:#141414;text-wrap:balance}
.ab-letter-body{margin-top:clamp(24px,4vh,36px)}
.ab-letter-body p{margin:0 0 1em;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--ink);text-wrap:pretty}
.ab-sign{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,3vh,32px);padding-top:22px;border-top:1px solid var(--line)}
.ab-sign img{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(20,30,50,.08),0 6px 14px -8px rgba(20,30,50,.45)}
.ab-sign-t{display:grid;gap:2px}
.ab-sign-n{font-weight:700;font-size:16px;color:#141414}
.ab-sign-r{font-size:14px;color:#585D53}
/* Back Office (a private page at a coded address): the packaged service,
   with a sample Groundwork workspace as the hero */
.faq-page.bo-page{max-width:1080px;overflow-x:clip}
.bo-page ::selection{background:#3D68B2;color:#fff}
.bo{flex:1 0 auto}
/* Titles hold to one line; a small script shrinks any that still would not fit */
.bo-line{white-space:nowrap}
.bo-hero{max-width:880px;margin:0 auto;padding:clamp(28px,7vh,80px) 0 clamp(30px,5vh,52px)}
.bo-h1{margin:0;text-align:center;font-weight:800;font-size:clamp(24px,calc((100vw - 2 * var(--gut) - 8px) / 11.3),76px);line-height:1;letter-spacing:-.035em;color:#141414}
.bo-lede{max-width:580px;margin:22px auto 0;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--ink);text-wrap:pretty}
.bo-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px;margin-top:28px}
.bo-more,.bo-gw-links a,.bo-replay{font-size:15px;font-weight:600;color:#141414;text-decoration:underline;text-decoration-color:rgba(20,20,20,.3);text-underline-offset:3px}
.bo-more:hover,.bo-gw-links a:hover,.bo-replay:hover{text-decoration-color:currentColor}
.bo a:focus-visible,.bo button:focus-visible,.bo summary:focus-visible{outline:2px solid #3D68B2;outline-offset:3px;border-radius:6px}
.bo-replay{appearance:none;border:0;background:none;padding:0;margin-left:4px;font-family:inherit;font-size:13px;cursor:pointer}
.bo-note{width:fit-content;max-width:560px;margin:16px auto 0;font-size:13px;line-height:1.5;color:#585D53}

/* The hero: loose ends lie over an empty workspace, then each is filed
   into its tab (script) and the workspace fills in. The default state is
   the finished workspace, so nothing hides if the script never runs. */
.bo-stage{position:relative;max-width:920px;margin:0 auto}
.bo-loose{display:none;position:absolute;inset:-26px -40px;z-index:3;pointer-events:none}
.bo-stage.is-loose .bo-loose{display:block}
.bo-frag{position:absolute;left:var(--x);top:var(--y);display:grid;gap:3px;width:196px;padding:11px 14px 12px;border-radius:14px;background:#fff;
  font-size:14px;font-weight:600;line-height:1.3;color:#222;
  box-shadow:0 1px 2px rgba(20,30,50,.08),0 16px 30px -16px rgba(20,30,50,.45)}
.bo-frag small{font-size:11.5px;font-weight:500;color:#666}
.bo-frag.is-in{visibility:hidden}
.bo-stage.is-loose #gw-p-portfolio > *{opacity:0}
.bo-stage.is-filled #gw-p-portfolio .gw-hero,
.bo-stage.is-filled #gw-p-portfolio .gw-row{animation:bo-rise .6s cubic-bezier(.16,1,.3,1) both}
.bo-stage.is-filled #gw-p-portfolio .gw-row{animation-delay:calc(160ms + var(--i) * 90ms)}
@keyframes bo-rise{from{opacity:0;transform:translateY(10px)}}
/* Each tab counts what was filed into it until it is opened */
.gw-badge{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#222;color:#fff;
  font-size:11.5px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.gw-tab[data-n] .gw-badge{display:inline-block}
.gw-tab[aria-selected="true"] .gw-badge{background:#fff;color:#0066D6}
.gw-tab.is-hit .gw-badge{animation:gw-pop .32s cubic-bezier(.16,1,.3,1)}
@keyframes gw-pop{from{transform:scale(.55)}}
@media (max-width:680px){
  .bo-loose{inset:-14px -6px}
  .bo-frag{left:var(--mx,var(--x));top:var(--my,var(--y));width:150px;padding:9px 11px 10px;font-size:12.5px}
  .gw-tab{position:relative}
  .gw-badge{position:absolute;top:-5px;right:-1px;min-width:18px;height:18px;padding:0 5px;font-size:10.5px;line-height:18px;
    box-shadow:0 0 0 2px #fff}
  .bo-frag small{font-size:11px}
  .bo-frag.is-wide{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bo-stage.is-filled #gw-p-portfolio .gw-hero,.bo-stage.is-filled #gw-p-portfolio .gw-row,.gw-tab.is-hit .gw-badge{animation:none}
}

/* The workspace, in Groundwork's shape language: mint canvas, white cards,
   pills, no shadows inside, one dark hero panel, Action Blue for what is
   selected or needs you. */
.gw{max-width:920px;margin:0 auto;padding:10px;border-radius:30px;background:#F3F9F1;color:#222;
  box-shadow:0 1px 2px rgba(20,30,50,.05),0 32px 64px -36px rgba(20,30,50,.38)}
.gw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 12px}
.gw-ws{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700}
.gw-ws-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#222;color:#fff;font-size:12px}
.gw-sample{padding:5px 11px;border-radius:999px;background:#fff;font-size:12px;font-weight:500;color:#5E5E5E}
.gw-in{display:grid;grid-template-columns:176px minmax(0,1fr);gap:10px;align-items:start}
.gw-tabs{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:20px;background:#fff}
.gw-tab{appearance:none;border:0;border-radius:999px;background:transparent;padding:10px 14px;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:600 14px/1.2 var(--sans);color:#222;transition:background .24s cubic-bezier(.22,1,.36,1),color .24s cubic-bezier(.22,1,.36,1)}
.gw-tab:hover{background:#F5F5F5}
.gw-tab[aria-selected="true"]{background:#0066D6;color:#fff}
.gw-tab:focus-visible,.gw-panel:focus-visible{outline:2px solid #0066D6;outline-offset:2px}
.gw-panel{display:flex;flex-direction:column;gap:10px;min-height:356px;border-radius:20px}
.gw-panel[hidden]{display:none}
.gw-panel:not([hidden]){animation:gw-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes gw-in{from{opacity:0;transform:translateY(6px)}}
.gw-hero{padding:22px 24px;border-radius:24px;background:#222;color:#fff}
.gw-hero-k,.gw-hero-d{margin:0;font-size:13px;color:#D0D0D0}
.gw-hero-v{margin:6px 0 8px;font-size:clamp(34px,4.4vw,46px);font-weight:700;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.gw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:20px;background:#fff}
.gw-title{margin:0;font-size:16px;font-weight:600}
.gw-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gw-stat{display:grid;gap:4px;padding:14px 16px;border-radius:20px;background:#fff}
.gw-stat span{font-size:12px;line-height:1.3;color:#666}
.gw-stat b{font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gw-rows{list-style:none;margin:0;padding:4px 10px;border-radius:20px;background:#fff}
.gw-row{display:flex;align-items:center;gap:12px;padding:10px 4px}
.gw-row + .gw-row{border-top:1px solid #F0F0F0}
.gw-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F5F5F5;font-size:12px;font-weight:700}
.gw-rt{flex:1;min-width:0;display:grid;gap:2px}
.gw-rt b{font-size:14.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-rt span{font-size:12.5px;line-height:1.35;color:#666;font-variant-numeric:tabular-nums}
.gw-pill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#F5F5F5;
  font-size:12px;font-weight:600;line-height:1.2;color:#3A3A3A;white-space:nowrap}
.gw-ok{background:#E6F4EA;color:#1E5631}
.gw-sched{background:#E8F0FB;color:#1D4E89}
.gw-wait{background:#FDF1E1;color:#8A4B08}
.gw-needs{background:#0066D6;color:#fff}
.gw-phase{background:color-mix(in srgb,var(--ph) 14%,#fff);color:#222}
.gw-phase::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ph)}
@media (max-width:680px){
  .gw{padding:8px;border-radius:24px}
  .gw-in{grid-template-columns:minmax(0,1fr)}
  .gw-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:5px}
  .gw-tab{justify-content:center;gap:5px;padding:9px 4px;font-size:13.5px}
  .gw-panel{min-height:0}
  .gw-hero{padding:18px 20px}
  .gw-stat{padding:12px}
  .gw-rows{padding:2px 8px}
  .gw-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px 12px}
  .gw-row .gw-av{grid-row:span 2;align-self:start}
  .gw-row .gw-pill{justify-self:start}
}
@media (prefers-reduced-motion:reduce){ .gw-panel:not([hidden]){animation:none} .gw-tab{transition:none} }

/* Sections: what's included and the Groundwork detail fold away; how it
   works is a three-step line */
.bo-sec{padding-top:clamp(64px,11vh,120px)}
.bo-h2{margin:0;text-align:center;font-weight:800;font-size:clamp(26px,6.2vw,46px);line-height:1.05;letter-spacing:-.025em;color:#141414}
.bo-folds{max-width:760px;margin:clamp(24px,4vh,40px) auto 0;border-top:1px solid var(--line)}
.bo-fold{border-bottom:1px solid var(--line)}
.bo-fold summary{list-style:none;display:flex;align-items:center;gap:14px;padding:20px 4px;cursor:pointer}
.bo-fold summary::-webkit-details-marker{display:none}
.bo-fold summary h3{flex:1;min-width:0;margin:0;text-align:left;font-size:clamp(17px,1.6vw,20px);font-weight:700;line-height:1.3;letter-spacing:-.01em;
  color:#141414;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-dot{flex:none;width:10px;height:10px;border-radius:50%}
.bo-plus{position:relative;flex:0 0 28px;height:28px;border-radius:50%;background:rgba(20,20,20,.06);transition:transform .35s var(--ease),background .25s}
.bo-plus::before,.bo-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.75px;border-radius:2px;background:#141414;transform:translate(-50%,-50%)}
.bo-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.bo-fold summary:hover .bo-plus{background:rgba(20,20,20,.12)}
.bo-fold[open] .bo-plus{transform:rotate(45deg);background:#141414}
.bo-fold[open] .bo-plus::before,.bo-fold[open] .bo-plus::after{background:#fff}
.bo-fold-a{padding:0 46px 24px 28px}
.bo-fold-a p{max-width:62ch;margin:0;font-size:16px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.bo-fold-a .bo-in{margin-top:8px;font-size:13px;color:#585D53}
.bo-see{margin-top:16px;appearance:none;border:0;border-radius:999px;padding:9px 16px;background:#E9F3E6;color:#141414;
  font:600 14px/1.2 var(--sans);cursor:pointer;transition:background .2s}
.bo-see:hover{background:#DCEBD7}
@supports (interpolate-size:allow-keywords){
  .bo-page{interpolate-size:allow-keywords}
  .bo-fold::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
  .bo-fold[open]::details-content{height:auto}
}
.bo-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:880px;margin:clamp(40px,6vh,60px) auto 0;padding:0}
.bo-step{position:relative;padding-top:30px;border-top:1px solid #D6D6CF}
.bo-n{position:absolute;top:-16px;left:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#141414;color:#fff;font-size:14px;font-weight:700}
.bo-step h3{margin:0;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#141414}
.bo-step p{max-width:34ch;margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.bo-gw-card{display:flex;flex-direction:column;align-items:center;max-width:880px;margin:0 auto;padding:clamp(32px,5vw,64px) clamp(20px,5vw,64px);
  border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(20,30,50,.05),0 32px 64px -36px rgba(20,30,50,.38)}
.bo-gw-mark{margin-bottom:18px}
.bo-gw-mark img{display:block;width:140px;height:auto}
.bo-gw-lede{max-width:560px;margin:16px 0 0;font-size:16px;line-height:1.65;color:var(--ink);text-wrap:pretty}
.bo-gw .bo-folds{width:100%;max-width:640px}
.bo-gw .bo-fold-a{padding-left:4px}
.bo-envs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.bo-envs li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#F5F5F5;font-size:13.5px;font-weight:500;color:#222}
.bo-envs i{flex:none;width:8px;height:8px;border-radius:50%}
.bo-phases{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:18px 0 0;padding:0}
.bo-phases li{padding-top:10px;border-top:6px solid var(--ph);font-size:12.5px;font-weight:600;text-align:center;color:#222}
.bo-gw-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:30px}
.bo-end{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:clamp(64px,11vh,120px)}
.bo-end-p{max-width:460px;margin:0;font-size:15px;line-height:1.55;color:#585D53;text-wrap:pretty}
@media (max-width:680px){
  .bo-steps{grid-template-columns:minmax(0,1fr);gap:40px}
  .bo-fold summary{padding:18px 2px}
  .bo-fold-a{padding:0 2px 22px 26px}
  .bo-phases{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .bo-gw-links{flex-direction:column;align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .bo-plus,.bo-fold::details-content{transition:none} }
/* A collaboration signs off with both logos: the brand's, a hairline, then
   the agency's */
.cf-back .cf-logo-pair{display:flex;align-items:center;justify-content:center;gap:16px}
.cf-logo-pair i{flex:none;width:1px;height:30px;background:rgba(20,20,20,.18)}
.cf-back .cf-logo-pair img{max-width:150px;max-height:38px}
.cf-back .cf-logo-pair img[src$="cttc.png"]{max-width:170px}
/* Logos that link to the company's website: a quiet lift on hover */
.logo-link{display:inline-block;border-radius:6px;transition:opacity .2s,transform .2s var(--ease)}
.logo-link img{display:block}
.logo-link:hover{opacity:.8;transform:translateY(-1px)}
.logo-link:focus-visible{outline:2px solid #3D68B2;outline-offset:4px}
@media (prefers-reduced-motion:reduce){ .logo-link{transition:opacity .2s} .logo-link:hover{transform:none} }