/* ══ PROTO · HELLO ═══════════════════════════════════════════
   The personal direction. Light paper, polaroids, conversational.
   Shared by the landing page and the six discipline pages.

   Typography is exactly v1: Figtree for everything, Caveat for the accents.
   ═════════════════════════════════════════════════════════ */

/* Figtree and Caveat, the faces v1 used, self-hosted and subsetted to latin
   (Google Fonts in v1; same families, no third-party request). An earlier
   edit stripped every @font-face out of this file and nothing noticed,
   because a missing face falls back to system-ui silently. */
@font-face{font-family:'Figtree';src:url('/fonts/ft-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/ft-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/ft-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/ft-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/ft-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('/fonts/cv-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('/fonts/cv-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#F7F7F7; --card:#FFFFFF;
  --ink:#111111;    /* 17.6:1 on paper */
  --ink2:#5A5A5E;   /*  6.4:1 on paper */
  --ink3:#6E6E73;   /*  4.7:1 on paper. .cap is 12px bold, which is NOT WCAG
                        'large text', so it has to clear 4.5:1 outright. */
  --line:#E4E4E2;
  --accent:#C2410C; /*  4.8:1 on paper */
  --e:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{background:var(--paper);-webkit-text-size-adjust:100%}
/* Figtree throughout, Caveat for the accents. Exactly v1. */
body{background:var(--paper);color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.6;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.w{max-width:1080px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.cap{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ac{color:var(--accent);font-weight:800}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ── polaroid ────────────────────────────────────────────────
   Border, shadow and rotation are CSS, never baked into the file:
   they have to animate, and a baked border cannot. */
.pol{background:var(--card);padding:10px 10px 12px;border-radius:3px;width:100%;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.10);transform:rotate(var(--r,0deg))}
.pol img{width:100%;height:auto;display:block;background:#ECECEA;border-radius:1px}
.pol figcaption{font-family:Caveat,cursive;font-size:18px;line-height:1.1;color:var(--ink2);padding:8px 2px 1px;text-align:center;letter-spacing:0}
.pol.nocap{padding-bottom:10px}

/* ── nav: floating pill, light. Carries the disciplines. ─── */
.nv{position:fixed;top:14px;left:0;right:0;z-index:80;display:flex;justify-content:center;
  padding-inline:12px;pointer-events:none}
.nv .pill{pointer-events:auto;display:flex;align-items:center;gap:2px;max-width:100%;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 26px rgba(0,0,0,.07)}
.nv .wm{color:var(--ink);font-size:15.5px;font-weight:700;letter-spacing:-.025em;
  margin-right:8px;white-space:nowrap}
.nv .links{display:flex;align-items:center;gap:1px;min-width:0;overflow:hidden;
  max-width:62vw;opacity:1;scrollbar-width:none;
  transition:max-width .4s var(--e),opacity .22s var(--e),margin .4s var(--e)}
.nv .links::-webkit-scrollbar{display:none}
.nv .lk{color:var(--ink2);font-size:14px;font-weight:500;padding:9px 11px;border-radius:999px;
  white-space:nowrap;transition:color .2s,background .2s}
.nv .lk:hover{color:var(--ink);background:rgba(17,17,17,.05)}
.nv .lk[aria-current]{color:var(--ink);background:rgba(17,17,17,.06)}
.nv .cta{background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border-radius:999px;white-space:nowrap;margin-left:6px;transition:opacity .2s}
.nv .cta:hover{opacity:.86}
.nv .cta i{font-style:normal;transition:transform .2s var(--e)}
.nv .cta:hover i{transform:translateX(3px)}
/* shrinks once you start reading */
.nv .pill{transition:padding .28s var(--e),background .28s,box-shadow .28s}
.nv .wm{transition:font-size .28s var(--e),margin .28s var(--e)}
.nv .lk,.nv .cta{transition:color .2s,background .2s,padding .28s var(--e),font-size .28s var(--e)}
/* Collapses on scroll to just the name and the CTA, the way context-con's
   does. max-width rather than display:none so it animates. */
.nv.on .links{max-width:0;opacity:0;margin-left:-6px}
.nv.on .pill{padding:5px 5px 5px 16px;background:rgba(255,255,255,.93);
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.08)}
.nv.on .wm{margin-right:12px}
.nv .menu{display:none;border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;
  color:var(--ink2);padding:9px 11px;border-radius:999px;cursor:pointer;min-height:44px;align-items:center;gap:5px}
.nv .menu span{font-size:15px;line-height:1;transition:transform .25s var(--e)}
.nv .menu[aria-expanded=true] span{transform:rotate(180deg)}
@media(max-width:860px){
  /* a disclosure button rather than a wrapped block of links */
  .nv .menu{display:inline-flex}
  .nv .links{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
    flex-direction:column;align-items:stretch;gap:2px;max-width:none;width:max-content;min-width:190px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border:1px solid var(--line);
    border-radius:16px;padding:7px;box-shadow:0 10px 30px rgba(0,0,0,.12);
    opacity:0;visibility:hidden;transition:opacity .2s var(--e),visibility .2s}
  .nv .pill{position:relative}
  .nv .pill.open .links{opacity:1;visibility:visible}
  .nv .lk{padding:11px 13px}
  .nv.on .menu{display:none}
}
@media(max-width:520px){ .nv .lk{font-size:14px;padding:11px 12px} .nv .menu{font-size:15px} }

/* ── intro ──────────────────────────────────────────────── */
.intro{position:fixed;inset:0;z-index:999;background:var(--paper);overflow:hidden}
/* every beat starts hidden, so the first paint is a clean empty screen
   rather than the greeting sitting there unanimated */
html.introing .beat{opacity:0}
.intro.done{display:none}
html.introing{overflow:hidden}
html.introing body{overflow:hidden}
.beat{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);
  padding:0 clamp(20px,5vw,40px);text-align:center;opacity:0;pointer-events:none;z-index:3}
.beat p{font-size:clamp(26px,4.6vw,52px);font-weight:600;line-height:1.3;letter-spacing:-.03em;max-width:19ch;margin-inline:auto}
.beat.sm p{font-size:clamp(21px,3.4vw,36px);font-weight:600;max-width:26ch}
.words{display:flex;gap:.42em;justify-content:center;flex-wrap:wrap}
.words span{display:inline-block}
.beat .ln{display:block}
.beat.big p{font-size:clamp(34px,6.4vw,76px);font-weight:700;max-width:none;line-height:1.1}
/* the name resolves from grey to ink, the way context-con's does */
.beat .wd{display:inline-block;will-change:transform,opacity}
.beat .nm{color:#B9B9BC;transition:color .55s var(--e)}
.beat .nm.lit{color:var(--ink)}
.beat em{font-style:normal;font-weight:800}
/* The stack is ONE element that transforms as a group: it starts large and
   centred, then scales down and parks low while the copy keeps changing above
   it. Animating four photographs separately cannot produce that, and the
   continuity is the whole effect. */
/* Photographs pop in ONE AT A TIME and land as a pile, then the whole group
   shrinks and parks low. Each sits centred; GSAP gives it its offset. Pinning
   them flat to inset:0 reads as a single crooked photo, which is what the
   first attempt looked like. */
/* The pile sits in its own band BELOW the copy. Both were centred, so the
   headline and the photographs stacked on top of each other. */
.stack{position:absolute;left:50%;top:50%;z-index:2;width:0;height:0;will-change:transform}
.stack .pol{position:absolute;left:0;top:0;width:var(--w,290px);opacity:0;will-change:transform;
  padding:9px 9px 11px}


/* ── page ───────────────────────────────────────────────── */
/* Visible by DEFAULT and hidden only while the intro runs. Gating it the other
   way round means a stalled transition or a thrown error leaves a permanently
   blank page, which is a bug this project has already paid for once. */
.page{opacity:1;transition:opacity .6s var(--e)}
html.introing .page{opacity:0;transition:none}
html.shown .page{opacity:1;transition:none}

.hero{padding:clamp(116px,18vh,176px) 0 clamp(36px,6vw,64px);text-align:center}
.hero h1{font-size:clamp(34px,5.6vw,68px);font-weight:800;line-height:1.06;letter-spacing:-.042em;max-width:24ch;margin-inline:auto}
.hero .sub{margin:clamp(18px,2.4vw,26px) auto 0;font-size:clamp(17px,1.95vw,22px);color:var(--ink2);max-width:56ch;line-height:1.55}
.cluster{margin:clamp(32px,5vw,58px) auto 0;width:min(100%,360px)}



.sec{padding:clamp(48px,8vw,104px) 0;border-top:1px solid var(--line)}
.sec h2{font-size:clamp(26px,4.4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.08;max-width:17ch;margin-top:16px}
.sec .lead{margin-top:16px;font-size:clamp(16.5px,1.8vw,20px);color:var(--ink2);
  max-width:50ch;line-height:1.55}


/* story */
.steps{margin-top:clamp(26px,4vw,46px)}
.step{display:grid;gap:5px;padding:clamp(18px,2.6vw,26px) 0;border-bottom:1px solid var(--line)}
@media(min-width:680px){.step{grid-template-columns:112px 1fr;gap:28px;align-items:baseline}}
.step:last-child{border-bottom:0}
.step b{font-family:Caveat,cursive;font-size:30px;font-weight:600;color:var(--accent);line-height:1}
.step h4{font-size:18px;font-weight:700;letter-spacing:-.022em}
.step p{font-size:16.5px;color:var(--ink2);line-height:1.6;max-width:52ch}

/* prose, used by the discipline pages */
.ph{padding:clamp(116px,18vh,176px) 0 clamp(20px,3vw,34px);text-align:center}
.ph h1{margin:14px auto 0;font-size:clamp(32px,5vw,62px);font-weight:800;line-height:1.06;letter-spacing:-.042em;max-width:22ch}
.ph .lead{margin:clamp(16px,2.2vw,24px) auto 0;font-size:clamp(17px,1.95vw,22px);color:var(--ink2);max-width:56ch;line-height:1.55}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,5vw,64px);padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(28px,4vw,46px);text-align:center}
.fact b{display:block;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1}
.fact span{display:block;margin-top:7px;font-size:14.5px;color:var(--ink2);max-width:22ch;margin-inline:auto;line-height:1.45}
.prose{padding:clamp(16px,3vw,36px) 0 clamp(40px,7vw,90px)}
.prose .blk{padding:clamp(26px,4vw,44px) 0;border-bottom:1px solid var(--line);max-width:760px;margin-inline:auto}
.prose .blk:last-child{border-bottom:0}
.prose h2{font-size:clamp(21px,2.8vw,32px);font-weight:800;letter-spacing:-.034em;line-height:1.14;max-width:22ch}
.prose .bd{margin-top:14px;display:grid;gap:13px;max-width:62ch}
.prose .bd p{font-size:17px;color:var(--ink2);line-height:1.66}
.figwrap{margin:clamp(28px,4vw,46px) auto 0;width:min(100%,360px)}
@media(max-width:600px){.figwrap{width:min(86%,300px)}}
.brands{margin:clamp(26px,4vw,42px) auto 0;max-width:760px;text-align:center}
.brands .list{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.brands .b{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:8px 15px;font-size:14.5px;font-weight:500;color:var(--ink2)}

/* close */
.end{padding:clamp(54px,9vw,116px) 0 clamp(44px,7vw,88px);text-align:center;
  border-top:1px solid var(--line)}
.end h2{font-size:clamp(26px,4.4vw,50px);font-weight:800;letter-spacing:-.045em;line-height:1.05;max-width:18ch;margin-inline:auto}
.end p{margin-top:18px;font-size:17px;color:var(--ink2);max-width:46ch;margin-inline:auto;line-height:1.6}
.btns{margin-top:28px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;
  transition:transform .2s var(--e),opacity .2s}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn.g{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.g:hover{background:#EFEFED;transform:none}
footer{padding:22px 0 40px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.rv{opacity:1;transform:none;transition:opacity .62s var(--e),transform .62s var(--e)}
html.js .rv:not(.in){opacity:0;transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){
  .rv,.page{transition:none!important;opacity:1!important;transform:none!important}
}

/* ── say hi: a real form, not a mailto ──────────────────── */
.bk{padding:clamp(48px,8vw,104px) 0 clamp(44px,7vw,88px);border-top:1px solid var(--line)}
.bk .box{border:1px solid var(--line);border-radius:24px;background:var(--card);
  padding:clamp(22px,4vw,52px);display:grid;gap:clamp(24px,3.4vw,48px);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 40px rgba(0,0,0,.05)}
@media(min-width:880px){.bk .box{grid-template-columns:1fr .9fr;align-items:center}}
.bk h2{font-size:clamp(25px,3.6vw,44px);font-weight:800;letter-spacing:-.042em;line-height:1.06;max-width:15ch}
.bk .say{margin-top:14px;font-size:16.5px;color:var(--ink2);max-width:40ch;line-height:1.6}
.bk form{display:grid;gap:12px}
.bk label{display:grid;gap:6px}
.bk label span{font-size:13px;font-weight:600;color:var(--ink2)}
.bk input,.bk select{min-height:52px;border:1px solid var(--line);border-radius:13px;
  background:var(--paper);color:var(--ink);padding:0 15px;font:inherit;font-size:16px;
  transition:border-color .2s}
.bk input::placeholder{color:#9A9A9F}
.bk input:focus,.bk select:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:transparent}
.bk button{min-height:52px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s var(--e),opacity .2s}
.bk button:hover{transform:translateY(-1px);opacity:.9}
.bk button:disabled{opacity:.55;transform:none;cursor:default}
.bk .fine{font-size:13px;color:var(--ink3);line-height:1.55}
.bk .msg:empty{display:none}
.bk .msg{font-size:14px;font-weight:600;color:var(--accent)}
.bk .hp{position:absolute;left:-9999px;width:1px;height:1px}

/* v1's alternating prose-and-photograph rows */
.row{display:grid;gap:clamp(22px,4vw,56px);align-items:center;
  padding:clamp(28px,4.5vw,54px) 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .row{grid-template-columns:1fr .78fr}
  .row.flip .txt{order:2}
  .row.flip .shot{order:1}
}
.row:last-child{border-bottom:0}
.row h3{font-size:clamp(20px,2.5vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.16}
.row p{margin-top:12px;font-size:17px;color:var(--ink2);line-height:1.66;max-width:44ch}
.row .shot{width:min(100%,330px);justify-self:center}
@media(max-width:600px){.row .shot{width:min(86%,300px)}}
.more{font-size:15px;font-weight:600;color:var(--accent)}
.more:hover{text-decoration:underline;text-underline-offset:.2em}

/* mobile: the page must not clip at the bottom */
@media(max-width:600px){
  .hero{padding-top:clamp(104px,16vh,150px)}
  .cluster{width:min(78%,290px)}
  .row{padding-bottom:clamp(22px,4vw,34px)}
  footer{padding-bottom:56px}
  .bk .box{padding:20px}
}

/* client logos. Definite height, never max-height: an <img> pointing at an SVG
   has no intrinsic pixel size, so max-height + width:auto resolves to 0x0 and
   the logo silently disappears. hoichoi did exactly that once already. */
.logos{margin:clamp(26px,4vw,44px) auto 0;max-width:820px;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:clamp(20px,3.4vw,44px)}
.logos img{height:26px;width:auto;max-width:150px;object-fit:contain;opacity:.62;
  filter:grayscale(1);transition:opacity .25s var(--e),filter .25s var(--e)}
.logos img.badge{height:38px}
.logos img:hover{opacity:1;filter:grayscale(0)}
/* counters and quiet motion on the discipline pages */
.fact b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.prose .blk h2{position:relative;display:inline-block}
.prose .blk h2::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e)}
.prose .blk.in h2::after{transform:scaleX(1)}

/* hero: copy left, photograph right */
@media(min-width:900px){
  .hero{text-align:left}
  .hero-g{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,70px);align-items:center}
  .hero h1,.hero .sub{margin-inline:0}
  .cluster{margin:0;width:100%}
}
/* country code + number */
.tel{display:grid;grid-template-columns:auto 1fr;gap:8px}
.tel select{min-height:52px;border:1px solid var(--line);border-radius:13px;background:var(--paper);
  color:var(--ink);padding:0 10px;font:inherit;font-size:15px;max-width:124px}
/* slot picker */
.slots .pick{font-size:14.5px;color:var(--ink2);margin-bottom:12px}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  max-height:320px;overflow-y:auto;padding-right:4px}
.slotgrid button{min-height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  color:var(--ink);font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;padding:0 8px;
  transition:border-color .18s,background .18s,transform .18s}
.slotgrid button:hover{border-color:var(--ink3);background:#FAFAF9;transform:translateY(-1px)}
.slotgrid button[aria-busy=true]{opacity:.5;cursor:default}
.slots .back{margin-top:14px;border:0;background:transparent;color:var(--ink2);font:inherit;
  font-size:14.5px;cursor:pointer;padding:10px 0;min-height:44px}
.slots .back:hover{color:var(--ink)}
.done .tick{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.done h3{margin-top:10px;font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:-.03em}
.done p{margin-top:12px;font-size:16px;color:var(--ink2);line-height:1.6;max-width:40ch}