/* ==========================================================================
   PIKOTW — stylesheet v3
   Reference points measured, not guessed: nothing.tech (light grey ground,
   mono secondary, pill radii), mkbhd.com (single grotesque, charcoal text,
   ONE saturated accent, 64px radii), garyvaynerchuk.com (huge uppercase
   display, dark full-bleed moments).
   Applied here: light ground by default so the black-and-gold brand artwork
   becomes the loudest thing on the page; dark full-bleed at the hero and the
   close; Archivo Expanded for display, Inter for body, JetBrains Mono for data.
   ========================================================================== */

:root{
  --paper:#DFE1E3;
  --white:#E9EBED;
  --ink:#141516;
  --ink-deep:#000000;
  --dim:#6E6F70;
  --dimmer:#9A9A97;
  --rule:#C9CCCF;
  --rule-dark:#232427;

  --gold:#B8892A;
  --gold-lit:#E3BC5C;

  --c-business:#C98A16; --c-ai:#028E88; --c-web:#0FA8B4;
  --c-media:#4F63C4;    --c-travel:#C98A16; --c-music:#D42C74;
  --accent:var(--gold);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --wrap:1280px;
  --pill:999px;
  --r-lg:28px;
  --r-md:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;font-weight:400;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--white);
  padding:12px 20px;border-radius:var(--pill);font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;z-index:300}
.skip:focus{left:16px;top:16px}

/* display face: Archivo pushed wide and heavy — echoes the wide italic wordmark */
.d{font-family:var(--display);font-weight:800;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.022em;line-height:.92}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:100;background:rgba(33,35,38,.9);
  backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.09)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.mark{font-family:var(--display);font-weight:800;font-stretch:118%;font-size:23px;
  letter-spacing:-.025em;text-decoration:none;white-space:nowrap;color:var(--white);text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.55),0 4px 22px rgba(0,0,0,.4)}
.mark .a{color:var(--white)}
.mark .b{color:var(--gold-lit)}
.nav{display:flex;gap:4px;align-items:center}
.nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:rgba(233,235,237,.66);padding:9px 14px;border-radius:var(--pill);
  transition:background .25s,color .25s}
.nav a:hover{background:rgba(255,255,255,.09);color:var(--white)}
.nav a[aria-current="page"]{background:var(--gold-lit);color:#141516}
.nav-toggle{display:none;background:var(--gold-lit);color:#141516;border:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:11px 18px;border-radius:var(--pill);cursor:pointer}

/* ---------- hero: full-bleed black, artwork carries it ---------- */
.hero{background:var(--ink-deep);color:var(--white)}
.hero-frame{max-width:880px;margin:0 auto;padding:0 0 4px}
.hero-art{width:100%;height:auto}
.hero-body{background:var(--ink-deep);padding:30px 0 66px}
.hero-body .wrap{display:grid;grid-template-columns:1fr;gap:26px}
.hero-tag{display:inline-block;justify-self:start;width:auto;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-lit);background:rgba(227,188,92,.12);
  padding:8px 16px;border-radius:var(--pill);margin-bottom:30px}
.hero-body h1{font-family:var(--display);font-weight:800;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.96;font-stretch:118%;
  font-size:clamp(1.9rem,4.2vw,4.1rem);color:var(--white)}
.hero-body h1 b{font-weight:800;display:block;color:var(--gold-lit)}
.hero-body .lede{color:rgba(255,255,255,.64);font-size:1.04rem;max-width:46ch;line-height:1.66;
  justify-self:end;padding-left:26px;border-left:1px solid rgba(227,188,92,.3)}

/* ---------- interior page head ---------- */
.pagehead{padding:64px 0 52px;background:var(--white);border-bottom:1px solid var(--rule)}
.pagehead .wrap{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start}
.pagehead .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--white);background:var(--accent);
  padding:8px 16px;border-radius:var(--pill);white-space:nowrap;align-self:start;margin-top:10px}
.pagehead h1{font-family:var(--display);font-weight:800;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.022em;line-height:.98;
  font-size:clamp(1.7rem,3.4vw,3rem);max-width:17ch}
.pagehead .lede{grid-column:2;margin-top:24px;color:var(--dim);max-width:54ch;font-size:1.06rem}

/* ---------- buttons: pills, per the references ---------- */
.actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.actions.mid{justify-content:center}
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;padding:15px 28px;border-radius:var(--pill);
  background:var(--ink);color:var(--white);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.btn.accent{background:var(--accent);color:var(--white)}
.btn.accent:hover{background:var(--ink);color:var(--white)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn.ghost:hover{background:var(--ink);color:var(--white);box-shadow:none}
.hero .btn.ghost{color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}

/* ---------- sections ---------- */
.sec{padding:82px 0;border-bottom:1px solid var(--rule)}
.sec.alt{background:#D6D9DC}
.sec-head{margin-bottom:44px;max-width:74ch}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-lit);margin-bottom:22px;
  padding:7px 15px;border-radius:var(--pill);background:var(--ink)}
.sec-head h2{font-family:var(--display);font-weight:800;font-stretch:116%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.5rem,2.9vw,2.5rem);max-width:20ch}
.sec-head p{margin-top:22px;color:var(--dim);max-width:58ch;font-size:1.04rem}

/* ---------- pillars: soft cards, big radius, one accent each ---------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pillar{position:relative;display:block;text-decoration:none;background:var(--white);
  border-radius:var(--r-lg);padding:38px 36px 34px;overflow:hidden;
  transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s}
.pillar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pc)}
.pillar:hover{transform:translateY(-4px);box-shadow:0 18px 44px -20px rgba(20,21,22,.28)}
.pillar h3{font-family:var(--display);font-weight:800;font-stretch:112%;text-transform:uppercase;
  letter-spacing:-.016em;font-size:1.42rem;line-height:1.04;margin-bottom:13px;color:var(--ink)}
.pillar .rule{display:none}
.pillar p{font-size:.98rem;color:var(--dim);margin-bottom:22px;max-width:44ch}
.pillar ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.pillar li{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:var(--paper);padding:6px 12px;border-radius:var(--pill)}
.pillar .more{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pc)}
.p-business{--pc:var(--c-business)} .p-ai{--pc:var(--c-ai)} .p-web{--pc:var(--c-web)}
.p-media{--pc:var(--c-media)} .p-travel{--pc:var(--c-travel)} .p-music{--pc:var(--c-music)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.2fr .9fr;gap:84px;align-items:start}
.copy h2{font-family:var(--display);font-weight:800;font-stretch:112%;text-transform:uppercase;
  letter-spacing:-.018em;line-height:1.02;font-size:clamp(1.4rem,2.4vw,2.05rem);margin-bottom:24px}
.copy p{color:var(--dim)}
.copy p+p{margin-top:19px}
.copy strong{color:var(--ink);font-weight:600}
.cap{position:sticky;top:104px;background:var(--white);border-radius:var(--r-lg);padding:12px 30px 20px}
.cap-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);font-weight:600;padding:20px 0 16px;border-bottom:1px solid var(--rule)}
.cap-item{padding:17px 0;border-bottom:1px solid var(--rule)}
.cap-item:last-child{border-bottom:none}
.cap-item b{display:block;font-weight:600;font-size:.99rem;color:var(--ink);margin-bottom:4px}
.cap-item span{font-size:.9rem;color:var(--dim);line-height:1.58}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps>div{background:var(--paper);border-radius:var(--r-lg);padding:32px 28px}
.sec.alt .steps>div{background:var(--paper)}
.steps .n{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.7rem;
  line-height:1;color:var(--accent);margin-bottom:14px;letter-spacing:-.024em}
.steps h4{font-family:var(--display);font-weight:700;font-stretch:108%;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:-.01em;margin-bottom:10px}
.steps p{font-size:.92rem;color:var(--dim)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--white);border-radius:var(--r-lg);padding:34px 32px}
.sec.alt .card{background:var(--paper)}
.card .tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);background:rgba(184,137,42,.1);
  padding:6px 13px;border-radius:var(--pill);margin-bottom:18px}
.card h3{font-family:var(--display);font-weight:800;font-stretch:110%;text-transform:uppercase;
  font-size:1.12rem;letter-spacing:-.014em;line-height:1.08;margin-bottom:13px}
.card p{color:var(--dim);font-size:.95rem}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.values>div{background:var(--white);border-radius:var(--r-lg);padding:32px 30px}
.sec.alt .values>div{background:var(--paper)}
.values h3{font-family:var(--display);font-weight:800;font-stretch:110%;text-transform:uppercase;
  font-size:1.06rem;letter-spacing:-.014em;color:var(--ink);margin-bottom:12px}
.values p{font-size:.97rem;color:var(--dim)}

/* ---------- facts ---------- */
.facts{background:var(--white);border-radius:var(--r-lg);padding:10px 28px}
.sec.alt .facts{background:var(--paper)}
.facts>div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--rule);font-size:.93rem}
.facts>div:last-child{border-bottom:none}
.facts .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);padding-top:3px}
.facts .v{text-align:right;color:var(--ink);font-weight:500}

/* ---------- tracks ---------- */
.tracks{background:var(--white);border-radius:var(--r-lg);padding:6px 28px}
.sec.alt .tracks{background:var(--paper)}
.track{display:grid;grid-template-columns:38px 1fr 66px;gap:18px;align-items:center;
  padding:17px 0;border-bottom:1px solid var(--rule)}
.track:last-child{border-bottom:none}
.track .n{font-family:var(--mono);font-size:10px;color:var(--dimmer)}
.track .t{font-weight:500;font-size:1.02rem}
.track .t i{font-style:normal;display:block;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-top:5px}
.track .d{font-family:var(--mono);font-size:10px;color:var(--dimmer);text-align:right}

.prose{max-width:64ch}
.prose p{color:var(--dim)}
.prose p+p{margin-top:19px}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- images ---------- */
.feature{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.feature img,.gallery img{width:100%;height:auto}
.feature figcaption,.gallery figcaption{font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);padding:14px 20px}
.gallery{display:flex;gap:18px;margin-top:52px;align-items:flex-start}
.gallery figure{min-width:0}
.gallery figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.sec.alt .feature,.sec.alt .gallery figure{background:var(--paper)}

/* ---------- contact: dark bookend ---------- */
.contact{background:var(--gold-lit);color:var(--ink);padding:96px 0;text-align:center;border:none}
.contact h2{font-family:var(--display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  letter-spacing:-.024em;line-height:.98;font-size:clamp(1.7rem,3.6vw,3.2rem);color:var(--ink)}
.contact p{margin:30px auto 0;max-width:48ch;color:rgba(20,21,22,.7)}
.mail{display:inline-block;margin-top:40px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lit);background:var(--ink);
  text-decoration:none;padding:18px 36px;border-radius:var(--pill);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.mail:hover{background:var(--ink-deep);transform:translateY(-3px)}
.socials{margin-top:46px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.socials a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:11px 21px;border-radius:var(--pill);
  background:rgba(20,21,22,.09);transition:background .25s,color .25s}
.socials a:hover{background:var(--ink);color:var(--gold-lit)}

.foot{background:var(--ink-deep);color:rgba(255,255,255,.5);padding:0 0 46px}
.foot-grid{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center;
  padding-top:34px;border-top:1px solid rgba(255,255,255,.09)}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-nav a,.foot-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none}
.foot-nav a:hover{color:var(--gold-lit)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .split{grid-template-columns:1fr;gap:44px}
  .cap{position:static}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cards,.values{grid-template-columns:1fr}
  .hero-body .wrap{grid-template-columns:1fr;gap:30px;align-items:start}
  .pillars{grid-template-columns:1fr}
}
@media(max-width:900px){
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:rgba(33,35,38,.97);
    border-bottom:1px solid var(--rule);flex-direction:column;gap:2px;padding:14px 24px 20px}
  .nav.open{display:flex}
  .nav a{padding:14px 16px;font-size:11.5px;width:100%}
  .nav-toggle{display:block}
  .gallery{flex-direction:column}
  .gallery figure{flex:0 0 auto !important;width:100%}
  .pagehead .wrap{grid-template-columns:1fr;gap:18px}
  .pagehead .lede{grid-column:1}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .sec{padding:70px 0}
  .contact{padding:86px 0}
  .pagehead{padding:56px 0 46px}
  .hero-body{padding:10px 0 60px}
  .hero-body .lede{justify-self:start;padding-left:18px}
  .steps{grid-template-columns:1fr}
  .pillar{padding:30px 26px}
  .pillar h3{font-size:1.6rem}
  .cap,.facts,.tracks{padding-left:22px;padding-right:22px}
  .track{grid-template-columns:28px 1fr 56px;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ---------- proof band ----------
   Structural cue taken from influencermarketing.ai: a paid landing page states
   its numbers early and repeatedly. Style cues from that page were not taken —
   Poppins + purple gradients is the generic SaaS look, which is the direction
   this site was explicitly moved away from. */
.proof{background:var(--ink-deep);color:var(--white);padding:54px 0}
.proof .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.proof .n{font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:clamp(2rem,3.2vw,2.9rem);line-height:.95;letter-spacing:-.028em;
  color:var(--gold-lit);margin-bottom:14px}
.proof .l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.6}
@media(max-width:900px){.proof .grid{grid-template-columns:repeat(2,1fr);gap:34px 22px}}
@media(max-width:520px){.proof .grid{grid-template-columns:1fr;gap:28px}}

/* four-up card row (UGC criteria on the media page) */
.cards:has(> .card:nth-child(4)){grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.cards:has(> .card:nth-child(4)){grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards:has(> .card:nth-child(4)){grid-template-columns:1fr}}

/* ---------- route globe ----------
   Hand-projected 3D on a 2D canvas. No WebGL, no Three.js: the whole thing is
   ~6KB of logic, which matters on a site that sells Core Web Vitals. */
.globe-sec{background:var(--ink-deep);color:var(--white);padding:82px 0;border:none}
.globe-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.globe-copy .eyebrow{color:var(--gold-lit);background:rgba(227,188,92,.12)}
.globe-copy h2{font-family:var(--display);font-weight:800;font-stretch:116%;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.5rem,2.8vw,2.4rem);color:var(--white);margin-bottom:20px}
.globe-copy p{color:rgba(255,255,255,.62);max-width:46ch}
.globe-copy p+p{margin-top:16px}
.globe-wrap{position:relative;aspect-ratio:1;max-width:420px;margin-left:auto;width:100%}
.globe-wrap canvas{width:100%;height:100%;display:block}
.globe-key{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.globe-key span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.07);padding:6px 13px;border-radius:var(--pill)}
.pillar{transform-style:preserve-3d;will-change:transform}
@media(max-width:1080px){
  .globe-grid{grid-template-columns:1fr;gap:44px}
  .globe-wrap{margin:0 auto;max-width:420px}
}
@media(max-width:640px){.globe-sec{padding:66px 0}.globe-wrap{max-width:320px}}

/* baked 3D renders — turntable frames, no WebGL at runtime */
.scene-render{width:100%;height:auto;border-radius:var(--r-md);display:block}

/* ---------- lazy 3D model host ----------
   The poster shows immediately; the viewer runtime and the .glb are only
   fetched once the section scrolls into view. Nothing 3D is on the critical path. */
.mv{position:relative;width:100%;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden}
/* model-viewer sits in normal flow so its internal canvas can measure a real
   container. Absolutely positioning it gave the shadow-DOM canvas a 0x0 layout
   size — content in the buffer, nothing on screen. The poster overlays instead. */
.mv-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .7s ease;
  touch-action:pan-y;cursor:grab}
.mv-canvas:active{cursor:grabbing}
.mv.ready .mv-canvas{opacity:1}
.mv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;z-index:2;transition:opacity .6s ease}
.mv.ready .mv-poster{opacity:0;pointer-events:none}
.mv-hint{display:block;margin-top:14px;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);opacity:0;transition:opacity .5s ease;pointer-events:none}
.mv.ready + .mv-hint{opacity:1}
.mv.failed + .mv-hint{display:none}

/* if the 3D viewer cannot run, the poster stays and the hint goes */
.mv.failed .mv-poster{opacity:1}
.mv.failed .mv-hint{display:none}

/* ==========================================================================
   COLOUR FIELDS
   Reference: flipsidegroup.com runs full-bleed saturated blocks — black, pink,
   navy — with large type, and no 3D or video at all. The confidence comes from
   committing to colour. The six pillar colours were only being used as hairlines;
   here each discipline owns its page header outright.
   ========================================================================== */
.pagehead{background:var(--field,var(--white));color:var(--on-field,var(--ink));
  padding:96px 0 84px;border-bottom:none;position:relative;overflow:hidden}
.pagehead:before{display:none}
.pagehead .wrap{position:relative;z-index:2}
.pagehead .num{background:var(--on-field,var(--ink));color:var(--field,var(--white));
  font-weight:500}
.pagehead h1{color:var(--on-field,var(--ink));text-shadow:var(--ph-shadow,none);
  font-size:clamp(2rem,5.4vw,4.6rem);line-height:.94;letter-spacing:-.03em;max-width:14ch}
.pagehead .lede{color:var(--on-field,var(--ink));text-shadow:var(--ph-shadow,none);opacity:.9;max-width:50ch;font-size:1.1rem}
/* an oversized ghosted numeral bleeding off the right edge, like the references */
.pagehead:after{content:'';position:absolute;right:-6%;top:-30%;width:52%;height:190%;
  border-radius:50%;background:var(--on-field,var(--ink));opacity:.055;pointer-events:none}

/* homepage pillar cards become colour blocks */
.pillar{background:var(--pc);color:#111;border-radius:var(--r-lg);padding:34px 32px 30px}
.pillar::before{display:none}
.pillar h3{color:inherit;font-size:1.62rem}
.pillar p{color:rgba(17,17,17,.72)}
.pillar li{color:rgba(17,17,17,.8);background:rgba(255,255,255,.34)}
.pillar .more{color:rgba(17,17,17,.85)}
.pillar:hover{transform:translateY(-6px);box-shadow:0 22px 50px -22px rgba(20,21,22,.42)}
.p-media,.p-music{color:#fff}
.p-media h3,.p-music h3{color:#fff}
.p-media p,.p-music p{color:rgba(255,255,255,.78)}
.p-media li,.p-music li{color:rgba(255,255,255,.9);background:rgba(255,255,255,.16)}
.p-media .more,.p-music .more{color:rgba(255,255,255,.9)}
/* fields need the saturated variants, not the light-ground accent versions */
.p-business{--pc:#E0A81E} .p-ai{--pc:#06A9A2} .p-web{--pc:#12B9C6}
.p-media{--pc:#4F63C4}   .p-travel{--pc:#E3BC5C} .p-music{--pc:#D42C74}

/* ==========================================================================
   LIVING HERO
   Ported from the Claude Design export (PIKOTW Hero.dc.html) into plain
   HTML/CSS — the design runtime (x-dc / sc-for / support.js) is not shipped.
   The twinkle and window-light fields are generated at build time in
   generate.py rather than templated in the browser.
   ========================================================================== */
@keyframes kb        { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes sheen     { 0% { transform: translateX(-140%) skewX(-18deg); }
                       42%,100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes tw        { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes breathe   { 0%,100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes rise      { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes drawReveal{ from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
                       to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; } }
@keyframes windowLight { 0%,100% { opacity: 0; } 38%,62% { opacity: 1; } }
@keyframes glowPulse { 0%,100% { opacity: .15; } 50% { opacity: .55; } }
@keyframes waterShimmer { 0%,100% { opacity: .25; transform: translateX(-1.5%); }
                          50% { opacity: .6; transform: translateX(1.5%); } }
@keyframes comet {
  0%{left:28.52%;top:52.52%;opacity:0} 6%{left:31.47%;top:48.60%;opacity:1}
  12%{left:34.42%;top:45.10%} 24%{left:40.31%;top:39.36%} 36%{left:46.21%;top:34.59%}
  48%{left:52.11%;top:30.53%} 60%{left:58.01%;top:26.75%} 72%{left:63.92%;top:23.11%}
  84%{left:69.81%;top:18.91%} 92%{left:73.75%;top:15.97%;opacity:1}
  100%{left:77.68%;top:11.90%;opacity:0}
}

.stage{position:relative;width:min(100%,86vh);margin:0 auto;aspect-ratio:1017/714;
  overflow:hidden;background:#000;
  border-radius:0;animation:rise 1.6s cubic-bezier(.22,.8,.3,1) both}
.stage-img{position:absolute;inset:0;animation:kb 26s ease-in-out infinite alternate;
  transform-origin:50% 100%;will-change:transform}
.stage-img img{width:100%;height:100%;object-fit:cover;display:block}
.stage-fx{position:absolute;inset:0;pointer-events:none}
.stage-dots span{position:absolute;border-radius:50%;background:#ffd98a;
  box-shadow:0 0 7px 2px rgba(255,200,90,.75);mix-blend-mode:screen;opacity:0}
.stage-win span{position:absolute;border-radius:1px;mix-blend-mode:screen;opacity:0}
.stage-win span.off{mix-blend-mode:normal;background:rgba(4,4,6,.9)}
.stage-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.stage-sheen i{position:absolute;top:-20%;bottom:-20%;left:0;width:32%;
  background:linear-gradient(90deg,rgba(255,205,110,0) 0%,rgba(255,215,130,.14) 45%,
    rgba(255,240,200,.22) 50%,rgba(255,215,130,.14) 55%,rgba(255,205,110,0) 100%);
  animation:sheen 8s cubic-bezier(.4,.1,.3,1) 1.8s infinite;will-change:transform}
.stage-glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.stage-glow i{position:absolute;transform:translate(-50%,-50%)}
.stage-comet{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#fff2cc;box-shadow:0 0 12px 4px rgba(255,210,110,.9),0 0 32px 12px rgba(255,190,80,.35);
  animation:comet 10s linear 3.2s infinite}
.stage-water{position:absolute;left:0;right:0;top:47%;height:11%;
  background:repeating-linear-gradient(90deg,rgba(255,200,100,0) 0px,rgba(255,205,110,.09) 26px,rgba(255,200,100,0) 52px);
  animation:waterShimmer 6.5s ease-in-out infinite}
.stage-breathe{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 42% at 50% 40%,rgba(255,185,80,.10),rgba(255,185,80,0) 70%);
  animation:breathe 9s ease-in-out infinite}
.stage-reveal{position:absolute;left:0;right:0;top:54%;bottom:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,3,3,0),#030303 7%);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 52%,#000 72%,#000 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 52%,#000 72%,#000 100%);
  -webkit-mask-size:400% 100%;mask-size:400% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:drawReveal 2.8s cubic-bezier(.5,.05,.45,.95) .9s both}
.stage-vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 30px rgba(0,0,0,.5)}
/* comet lockstep: artwork-anchored overlay containers zoom with the skyline */
.stage-fx,.stage-glow{animation:kb 26s ease-in-out infinite alternate;transform-origin:50% 100%;will-change:transform}
@media(prefers-reduced-motion:reduce){ .stage,.stage *{animation:none!important} }

/* ---------- faq ---------- */
.faq{display:grid;gap:12px;max-width:880px}
.faq details{background:var(--white);border-radius:var(--r-lg);padding:0 30px}
.sec.alt .faq details{background:var(--paper)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:24px;align-items:center;padding:23px 0;font-family:var(--display);font-weight:700;
  font-stretch:108%;text-transform:uppercase;font-size:1rem;letter-spacing:-.01em;line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-size:19px;color:var(--accent);
  flex:none;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>p{color:var(--dim);font-size:.97rem;line-height:1.62;padding:0 0 26px;max-width:66ch}

/* ---------- footer craft credit ---------- */
.foot-credit{margin-top:16px;text-align:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dimmer)}

/* ================================================================
   DESIGN LAYER 2 — motion, micro-interaction, chips, bases.
   Additive and namespaced; delete this block to revert entirely.
   ================================================================ */
:root{
  --d2-gold:#E3BC5C;
  --d2-ink:#000;
  --d2-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --d2-disp:"Archivo",Inter,system-ui,sans-serif;
  --d2-ease:cubic-bezier(.16,1,.3,1);
}
::selection{background:var(--d2-gold);color:var(--d2-ink)}

/* eyebrow: gold dash (Kyndryl-style single-accent conviction) */
.eyebrow::before{content:"";display:inline-block;width:18px;height:2px;
  background:var(--d2-gold);margin-right:9px;vertical-align:middle;
  transform:translateY(-1px)}

/* tags -> mono pill chips (thinking.fish tag language) */
.card .tag{display:inline-block;font-family:var(--d2-mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;
  border:1px solid rgba(0,0,0,.22);border-radius:999px;background:transparent}
.sec.alt .card .tag,.proof .card .tag{border-color:rgba(255,255,255,.3)}

/* cards: lift + shadow + gold edge */
.card{transition:transform .38s var(--d2-ease),box-shadow .38s var(--d2-ease),
  border-color .38s var(--d2-ease)}
.card:hover{transform:translateY(-6px);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.22),0 0 0 1px var(--d2-gold);
  border-color:var(--d2-gold)}

/* images: clipped, rounded, slow cinematic zoom */
.gallery figure,figure.feature{overflow:hidden;border-radius:16px}
.gallery figure img,figure.feature img{display:block;
  transition:transform 1.1s var(--d2-ease)}
.gallery figure:hover img{transform:scale(1.045)}
figure.feature:hover img{transform:scale(1.025)}

/* buttons: gentle lift */
.btn{transition:transform .3s var(--d2-ease),box-shadow .3s var(--d2-ease),
  opacity .3s var(--d2-ease)}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.35)}

/* stat numbers: stable digits for the count-up */
.proof .n{font-variant-numeric:tabular-nums}

/* scroll-reveal (classes are added by JS; no JS = fully visible) */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--d2-ease),transform .7s var(--d2-ease);
    transition-delay:calc(var(--stg,0)*80ms)}
  .rv.in{opacity:1;transform:none}
}

/* LON <-> HKG bases (thinking.fish airport-code cards, travel edition) */
.bases{display:flex;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.bases .base{min-width:150px}
.bases .code{font-family:var(--d2-disp);font-weight:800;font-size:40px;
  line-height:1;letter-spacing:.01em;text-transform:uppercase}
.bases .code::after{content:"";display:block;width:26px;height:3px;
  background:var(--d2-gold);margin-top:8px}
.bases .city{margin-top:8px;font-weight:600;font-size:14px}
.bases .bsub{margin-top:3px;font-family:var(--d2-mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.bases .base-link{font-size:26px;opacity:.35;flex:0 0 auto}
@media (max-width:560px){.bases{gap:16px}.bases .code{font-size:32px}}

/* footer credit, re-declared on namespaced vars */
.foot-credit{margin-top:16px;text-align:center;font-family:var(--d2-mono);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}

/* ────────── DESIGN LAYER 3 — cursor · serif accents · tilt (delete block to revert) ────────── */
:root{ --d3-out: cubic-bezier(0.16,1,0.3,1); }

/* custom cursor — fine pointers only; touch and reduced-motion keep the native cursor */
@media (hover:hover) and (pointer:fine){
  html.d3cur, html.d3cur a, html.d3cur button, html.d3cur summary,
  html.d3cur .pillar, html.d3cur .card, html.d3cur .btn { cursor: none; }
  #d3dot{
    position:fixed; top:0; left:0; z-index:99999;
    width:8px; height:8px; border-radius:50%;
    background:#fff; mix-blend-mode:difference;
    pointer-events:none; transform:translate(-50%,-50%);
    transition:width .25s var(--d3-out), height .25s var(--d3-out), opacity .25s;
  }
  #d3ring{
    position:fixed; top:0; left:0; z-index:99998;
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,.9); mix-blend-mode:difference;
    pointer-events:none; transform:translate(-50%,-50%);
    transition:width .4s var(--d3-out), height .4s var(--d3-out),
               border-color .3s, opacity .3s;
  }
  body.d3-hover #d3dot{ width:12px; height:12px; }
  body.d3-hover #d3ring{ width:54px; height:54px; border-color:#fff; }
  body.d3-click #d3dot{ width:4px; height:4px; opacity:.6; }
}
#d3dot,#d3ring{ display:none; }
html.d3cur #d3dot, html.d3cur #d3ring{ display:block; }

/* serif italic display accents — last word of major headings */
.d3em{
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style:italic; font-weight:500;
  color:var(--gold-l, var(--gold, #d9b96a));
  letter-spacing:.01em;
}
h1 .d3em{ font-size:1.04em; }

/* tilt — cards follow the pointer like the pillars already do */
@media (hover:hover) and (pointer:fine){
  .card, .gallery figure{ transform-style:preserve-3d; will-change:transform; }
}
/* ────────── END DESIGN LAYER 3 ────────── */

/* ---------- DESIGN LAYER 3b: light text on dark grounds only ---------- */
.hero-body h1,.proof .n,.globe-sec h2,.hero-body .lede{
  text-shadow:0 2px 4px rgba(0,0,0,.55),0 4px 22px rgba(0,0,0,.4);
}
.pillar h3{ text-shadow:none }
/* ---------- END LAYER 3b ---------- */

/* ---------- LAYER 3c: dark masthead companions ---------- */
.pagehead .num{background:var(--ink);color:var(--gold-lit)}
/* ---------- END LAYER 3c ---------- */

/* ---------- DESIGN LAYER 4: scroll rhythm — alternating section greys ---------- */
/* consecutive grey sections alternate mid -> light -> mid; dark bands punctuate */
.sec,.sec.alt{background:#D8DBDE}
.sec:nth-of-type(even),.sec.alt:nth-of-type(even){background:#EDEFF1}
/* panels ride above both tones (incl. legacy .sec.alt descendant overrides) */
.card,.cap,.values>div,.facts,.tracks,.faq details,.steps>div,
.sec.alt .card,.sec.alt .values>div,.sec.alt .facts,.sec.alt .tracks,
.sec.alt .faq details,.sec.alt .steps>div{background:#F5F6F8}
/* ---------- END LAYER 4 ---------- */

/* social buttons: brand icons */
.socials a{display:inline-flex;align-items:center;gap:8px}
.socials a svg{width:13px;height:13px;fill:currentColor;flex:none}

/* evidence grid: 5+ cards balance as 3 columns on desktop */
@media(min-width:1081px){.cards:has(> .card:nth-child(5)){grid-template-columns:repeat(3,1fr)}}

/* gallery: 4 tiles pair up below desktop, run 4-wide above */
.gallery:has(> figure:nth-child(4)){grid-template-columns:repeat(2,1fr)}
@media(min-width:1081px){.gallery:has(> figure:nth-child(4)){grid-template-columns:repeat(4,1fr)}}

/* values: 4 tiles balance as 2x2 */
.values:has(> div:nth-child(4)):not(:has(> div:nth-child(5))){grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.values:has(> div:nth-child(4)):not(:has(> div:nth-child(5))){grid-template-columns:1fr}}