/* ============================================================
   Axia Origin — site design system
   Codified from "Axia Branding Guidelines" (41pp).
   Master palette: Pink #FF285A / Black #000 / White #FFF
   Secondary (data only): #00EBFF #64FF00 #00007D #FFE600
   Type: Helvetica Neue (master) + Century (serif setup lines)
   Motion: fast, choppy, hard cuts. No gradients, no soft shadows,
   no rounded corners. Asymmetric, editorial, big type.
   ============================================================ */

:root {
  --pink: #FF285A;
  --black: #000000;
  --white: #FFFFFF;
  --navy: #00007D;
  --blue: #00EBFF;
  --green: #64FF00;
  --mustard: #FFE600;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Century Schoolbook", Century, "Book Antiqua", Georgia, serif;

  --cut: 140ms steps(2, end);          /* the house transition: a jump cut */
  --snap: 180ms cubic-bezier(.9, 0, .1, 1);

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 62ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: auto; /* jump cuts, not smooth scroll */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

::selection { background: var(--pink); color: var(--white); }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

/* ---------- type ---------- */

h1, h2, h3, .display {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }

.display-xl { font-size: clamp(2.6rem, 7.2vw, 6.4rem); }
.display-l  { font-size: clamp(2.1rem, 5.2vw, 4.6rem); }
.display-m  { font-size: clamp(1.6rem, 3.4vw, 2.9rem); }
.display-s  { font-size: clamp(1.25rem, 2.2vw, 1.8rem); }

.kicker {
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-block;
  border-bottom: 2px solid currentColor;
  padding-bottom: 6px;
  margin-bottom: 28px;
}

p { max-width: var(--measure); }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; }

.txt-pink  { color: var(--pink); }
.txt-white { color: var(--white); }
.txt-black { color: var(--black); }

/* ---------- panels: full-bleed colour blocks, hard edges ---------- */

.panel { position: relative; }
.panel-black { background: var(--black); color: var(--white); }
.panel-pink  { background: var(--pink);  color: var(--black); }
.panel-white { background: var(--white); color: var(--black); }
.panel-navy  { background: var(--navy);  color: var(--white); }

.pad   { padding: clamp(64px, 11vh, 140px) var(--gutter); }
.pad-s { padding: clamp(40px, 7vh, 80px) var(--gutter); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.5vw, 40px);
  max-width: 1440px;
  margin: 0 auto;
}
.col-main   { grid-column: 1 / span 8; }
.col-offset { grid-column: 2 / span 8; }
.col-side   { grid-column: 10 / span 3; }
.col-full   { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .col-main, .col-offset, .col-side { grid-column: 1 / -1; }
}

/* ---------- skip link / focus ---------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pink); color: var(--white);
  padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}
.panel-pink :focus-visible { outline-color: var(--white); }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  border-bottom: 1px solid #222;
}

.logo {
  font-family: var(--sans); font-weight: 700;
  font-size: 1.45rem; letter-spacing: 0;
  text-decoration: none; line-height: 1;
  white-space: nowrap;
}
.logo b { font-weight: 700; }
.logo .o { color: var(--pink); }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav a {
  text-decoration: none; font-weight: 700; font-size: .98rem;
  padding: 6px 2px;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--pink);
}
.site-nav .cta {
  background: var(--pink); color: var(--white);
  font-size: 1.18rem; /* AA large-text threshold on pink */
  padding: 8px 18px;
}
.site-nav .cta:hover { background: var(--white); color: var(--black); }

.nav-toggle {
  display: none;
  background: none; border: 0; color: var(--white);
  font: 700 1rem var(--sans); cursor: pointer;
  padding: 10px 6px;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: fixed; inset: 57px 0 0 0;
    background: var(--black);
    flex-direction: column; align-items: flex-start;
    padding: 8vh var(--gutter);
    gap: 4vh;
  }
  .site-nav.open { display: flex; }
  .site-nav a { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .site-nav .cta { margin-top: 2vh; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--pink); color: var(--white);
  font: 700 1.18rem var(--sans); /* >=18.66px bold: AA large-text at 3.68:1 */
  padding: 16px 28px;
  text-decoration: none;
  border: 0; cursor: pointer;
  transition: background var(--cut), color var(--cut);
}
.btn:hover { background: var(--black); color: var(--white); }
.panel-black .btn:hover { background: var(--white); color: var(--black); }
.panel-pink .btn { background: var(--black); color: var(--white); }
.panel-pink .btn:hover { background: var(--white); color: var(--black); }

.btn-ghost {
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn-ghost:hover { background: var(--pink); color: var(--white); box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
/* hero buttons stay clickable while the row's empty space lets the
   game field keep seeing the pointer */
.hero-inner .btn-row a { pointer-events: auto; }

/* arrow link */
.more {
  font-weight: 700; text-decoration: none;
  border-bottom: 3px solid var(--pink);
  padding-bottom: 3px;
}
.more:hover { background: var(--pink); color: var(--white); border-color: var(--pink); }

/* ---------- reveals: jump-cut in ---------- */

/* hidden only when JS is confirmed running (html.js set by site.js line 1) —
   without JS everything stays visible */
html.js .reveal { visibility: hidden; }
html.js .reveal.in { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.in { animation: cutin 1ms steps(1, end) both; }
  .reveal.in.d1 { animation-delay: 80ms; visibility: hidden; animation-name: cutin-vis; }
  .reveal.in.d2 { animation-delay: 160ms; visibility: hidden; animation-name: cutin-vis; }
  .reveal.in.d3 { animation-delay: 240ms; visibility: hidden; animation-name: cutin-vis; }
}
@keyframes cutin { from { visibility: hidden; } to { visibility: visible; } }
@keyframes cutin-vis { from { visibility: hidden; } to { visibility: visible; } }

/* ---------- hero ---------- */

.hero {
  min-height: min(88vh, 900px);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  isolation: isolate;
}
.hero .texture {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
}
.hero .texture svg { width: 100%; height: 100%; }

.hero-inner { max-width: 1440px; margin: 0 auto; width: 100%; }

.punch { display: block; }

/* manifesto — three hard poster bars; the live one flips to white */
.manifesto-wrap { max-width: 1440px; margin: 0 auto; }
.manifesto { display: grid; gap: clamp(12px, 2vh, 20px); }
.mrow {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
  background: var(--black); color: var(--white);
  border: 0;
  padding: clamp(18px, 3.2vh, 32px) clamp(18px, 2.6vw, 44px);
  text-align: left;
  font: inherit; cursor: pointer;
  transition: background var(--cut), color var(--cut), transform var(--cut);
}
.mrow.on {
  background: var(--white); color: var(--black);
  transform: translateX(clamp(8px, 1.2vw, 18px));
}
.midx {
  font: 700 1.05rem var(--sans);
  border-top: 4px solid var(--pink);
  padding-top: 10px;
  min-width: 2.4em;
}
.mtxt {
  display: block;
  font-size: clamp(1.35rem, 3vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 700;
  text-wrap: balance;
}
.mtxt .serif { font-weight: 400; }
.mtxt b { opacity: .4; transition: opacity var(--cut), color var(--cut); }
.mrow.on .mtxt b { color: var(--pink); opacity: 1; }

/* ---------- pillar trio ---------- */

.trio { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }

.trio > article {
  padding: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 56px) clamp(48px, 6vw, 88px);
  display: flex; flex-direction: column; gap: 20px;
  transition: background var(--cut), color var(--cut);
}
.trio h3 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
.trio .num {
  font: 700 1rem var(--sans);
  border-bottom: 2px solid currentColor;
  align-self: flex-start; padding-bottom: 6px;
}
.trio p { font-size: 1.02rem; }
.trio .fields { font-size: .92rem; line-height: 1.7; opacity: .92; }
.trio .illo { width: clamp(96px, 9vw, 128px); }
.trio .display-s { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.trio .tags { margin: 4px 0 0; }
.trio .tags span { font-size: .78rem; padding: 5px 10px; }
.trio .trio-more { align-self: flex-start; margin-top: auto; }
.panel-pink .more { border-color: var(--black); }
.panel-pink .more:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ---------- cards (work, food security) ---------- */

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.card {
  display: block; text-decoration: none;
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid #1a1a1a;
  transition: background var(--cut), color var(--cut);
  position: relative;
}
.card h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 12px; }
.card .goto { font-weight: 700; color: var(--pink); margin-top: 22px; display: inline-block; }
.card:hover, .card:focus-visible { background: var(--pink); color: var(--white); }
.card:hover .goto, .card:focus-visible .goto { color: var(--white); }
.card:hover .serif, .card:focus-visible .serif { color: var(--white); }

/* ---------- case studies ---------- */

.case { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.5vw, 40px); max-width: 1440px; margin: 0 auto; }
.case .case-side  { grid-column: 1 / span 4; }
.case .case-body  { grid-column: 6 / span 7; }
.case.flip .case-side { grid-column: 9 / span 4; grid-row: 1; }
.case.flip .case-body { grid-column: 1 / span 7; grid-row: 1; }
@media (max-width: 900px) {
  .case .case-side, .case .case-body,
  .case.flip .case-side, .case.flip .case-body { grid-column: 1 / -1; grid-row: auto; }
}

.takeout {
  font: 700 clamp(2rem, 4.6vw, 3.8rem)/1.02 var(--sans);
  letter-spacing: -0.015em;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.tags span {
  font: 700 .82rem var(--sans);
  padding: 6px 12px;
  border: 2px solid currentColor;
}
.tags .t-hot { background: var(--pink); border-color: var(--pink); color: var(--black); }
.panel-pink .tags .t-hot { background: var(--black); border-color: var(--black); color: var(--white); }

/* ---------- venn ---------- */

.venn-wrap {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: 1440px; margin: 0 auto;
}
@media (max-width: 900px) { .venn-wrap { grid-template-columns: 1fr; } }

.venn-fig svg { width: 100%; height: auto; }

/* halftone-print treatment: regions are pink dot screens whose density
   deepens with each overlap; the selected region flips to solid white */
.venn-region {
  cursor: pointer;
  fill: url(#vd1);
  transition: fill var(--cut);
  outline-offset: -4px;
}
.venn-region.pair { fill: url(#vd2); }
.venn-region.core { fill: url(#vd3); }
.venn-region[data-on="1"] { fill: var(--white); }
.venn-outline { fill: none; stroke: var(--white); stroke-width: 2; opacity: .9; }
.venn-label {
  font: 700 24px var(--sans);
  fill: var(--white);
  fill-opacity: 1; /* do not inherit the region's fill-opacity */
  pointer-events: none;
}
.venn-region[data-on="1"] .venn-label { fill: var(--black); }

.venn-detail {
  border-left: 6px solid var(--pink);
  padding-left: clamp(20px, 2.5vw, 40px);
  min-height: 15em;
}
.venn-detail h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-bottom: 14px; }
.venn-detail .serif { display: block; font-size: 1.05rem; margin-bottom: 10px; }

.venn-keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.venn-keys button {
  font: 700 .88rem var(--sans);
  background: transparent; color: inherit;
  border: 2px solid currentColor;
  padding: 8px 14px; cursor: pointer;
  transition: background var(--cut), color var(--cut), border-color var(--cut);
}
.venn-keys button[aria-pressed="true"] {
  background: var(--pink); border-color: var(--pink); color: var(--white);
}
.venn-keys button:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---------- big statement band ---------- */

.band { text-align: left; }
.band .display-xl, .band .display-l { max-width: 18ch; }

/* ---------- quote ---------- */

blockquote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.25;
  max-width: 26ch;
}
blockquote + figcaption {
  margin-top: 18px; font: 700 1rem var(--sans);
}

/* ---------- values list ---------- */

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.values h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  border-top: 6px solid var(--pink);
  padding-top: 18px; margin-bottom: 14px;
}

/* ---------- footer ---------- */

.site-foot {
  background: var(--black); color: var(--white);
  padding: clamp(56px, 9vh, 110px) var(--gutter) 40px;
}
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1440px; margin: 0 auto;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); margin-bottom: 20px; }
.site-foot a { color: inherit; }
.site-foot .email {
  font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--pink); text-decoration: none;
  border-bottom: 3px solid var(--pink);
}
.site-foot .email:hover { background: var(--pink); color: var(--white); }
.foot-nav { display: flex; flex-direction: column; gap: 8px; }
.foot-nav a { text-decoration: none; font-weight: 700; font-size: .88rem; }
.foot-nav a:hover { color: var(--pink); }
.foot-small {
  max-width: 1440px; margin: 64px auto 0;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: .74rem; color: #999;
  border-top: 1px solid #222; padding-top: 24px;
}
.foot-small a { color: #999; }
.foot-small a:hover { color: var(--white); }
address { font-style: normal; line-height: 1.65; }
.site-foot address { font-size: .86rem; }

/* ---------- split panel (50/50 hard split) ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split > * { padding: clamp(48px, 8vh, 110px) var(--gutter); }

/* ---------- ticker strip ---------- */

.strip {
  border-top: 1px solid #222; border-bottom: 1px solid #222;
  overflow: hidden; white-space: nowrap;
  padding: 18px 0;
  font: 700 1.05rem var(--sans);
}
.strip .inner { display: inline-block; padding-left: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .strip .inner { animation: tick 28s linear infinite; animation-delay: -14s; }
}
@media (prefers-reduced-motion: reduce) {
  .strip .inner { padding-left: var(--gutter); }
}
@keyframes tick { to { transform: translateX(-100%); } }
.strip em { font-style: normal; color: var(--pink); margin: 0 .6em; }

/* ---------- misc ---------- */

.small { font-size: .9rem; }
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 28px; } .mt-3 { margin-top: 48px; }
.mb-1 { margin-bottom: 14px; } .mb-2 { margin-bottom: 28px; } .mb-3 { margin-bottom: 48px; }

/* ============================================================
   INTERACTION ENGINE LAYER (effects.js companions)
   ============================================================ */

/* ---------- cursors ----------
   Site default: a brand-pink arrow (still a normal cursor, just ours).
   Inside [data-cursor] hero zones the native cursor disappears and the
   #fx-cursor element takes over, one shape per page. */
@media (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M2 1 L2 17.5 L6.8 13.8 L9.8 20.5 L13 19 L10 12.6 L16.5 12.2 Z' fill='%23FF285A' stroke='white' stroke-width='1.6'/></svg>") 2 1, auto;
  }
  [data-cursor], [data-cursor] * { cursor: none; }
}
#fx-cursor {
  position: fixed; left: 0; top: 0;
  display: none;
  pointer-events: none;
  z-index: 999;
  will-change: transform;
}
#fx-cursor.on { display: block; }
#fx-cursor.down { opacity: .6; }
/* home: the torch dot */
#fx-cursor.c-dot {
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 1px var(--white);
}
/* services: the lens ring */
#fx-cursor.c-ring {
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 3px solid var(--pink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.7);
}
/* work: the crosshair */
#fx-cursor.c-cross { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
#fx-cursor.c-cross::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 3px; height: 100%; margin-left: -1.5px;
  background: var(--pink); box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}
#fx-cursor.c-cross::after {
  content: ""; position: absolute; top: 50%; left: 0;
  height: 3px; width: 100%; margin-top: -1.5px;
  background: var(--pink); box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}
/* story: the node */
#fx-cursor.c-net {
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 3px var(--pink);
}
/* food security: the plate */
#fx-cursor.c-plate {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 3px solid var(--pink);
  background: var(--white);
  box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 7px var(--pink);
}
@media (pointer: coarse) { #fx-cursor { display: none !important; } }

/* tickers: solid, legible — no faint outline text */
.strip .outline { color: inherit; -webkit-text-stroke: 0; }

/* ---------- page wipe ---------- */
#fx-wipe {
  position: fixed; inset: 0; z-index: 998;
  background: var(--pink);
  transform: translateY(0);
  transition: transform 240ms steps(4, end);
  pointer-events: none;
}
html.wipe-done #fx-wipe { transform: translateY(-101%); }

/* ---------- light-field hero ---------- */
.texture canvas { position: absolute; inset: 0; }

/* ---------- overlap section (home): text + halftone venn ---------- */
.overlap-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: 1440px; margin: 0 auto;
}
@media (max-width: 900px) { .overlap-grid { grid-template-columns: 1fr; } }
.overlap-fig { display: block; }
.overlap-fig svg { width: min(100%, 560px); height: auto; margin: 0 auto; }
.overlap-fig .venn-label { fill: var(--white); }
.overlap-fig:hover .ol-core { fill: var(--pink); }
.ol-core { fill: var(--white); transition: fill var(--cut); }

/* stroke-based illustrations flip with their card */
.card:hover .illo .swap-stroke { stroke: var(--white); }
.card:hover .illo .swap-pink { fill: var(--white); }

/* ---------- the quiet games: score chip, fed plates ---------- */
.fx-score {
  position: absolute; top: 24px; right: var(--gutter); z-index: 5;
  display: none;
  font: 700 1rem var(--sans);
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  padding: 8px 13px;
  border: 2px solid currentColor;
  pointer-events: none;
}
.fx-score.on { display: block; }
.fx-score.flash { animation: scoreflash 700ms steps(2, end); }
@keyframes scoreflash {
  0% { background: var(--pink); border-color: var(--pink); color: var(--white); }
  100% { background: transparent; }
}
.fx-score.tick { animation: scoretick 240ms steps(2, end); }
@keyframes scoretick {
  0% { background: var(--pink); border-color: var(--pink); color: var(--white); }
  100% { background: transparent; }
}

/* milestone jolt: the whole hero takes the hit, in hard cuts */
.hero.fx-quake { animation: fxquake 460ms steps(1, end); }
@keyframes fxquake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-9px, 5px); }
  40% { transform: translate(8px, -6px); }
  60% { transform: translate(-6px, -4px); }
  80% { transform: translate(5px, 3px); }
  100% { transform: translate(0, 0); }
}
.pw.fed .rim { fill: var(--pink); stroke: var(--pink); }
.pw.fed .well { fill: var(--white); stroke: var(--white); }

/* the ascended header — each page has its own finale ground */
.hero.ascended .fx-score {
  background: var(--pink); border-color: var(--white); color: var(--white);
}
/* services finale (eclipse) plays on black: flip the pink hero's text */
.hero.asc-magnify { color: var(--white); }
.hero.asc-magnify .fx-score { background: var(--black); border-color: var(--pink); color: var(--white); }
/* work finale (calm sea) plays on pink: the pink punch goes white */
.hero.asc-sonar .txt-pink { color: var(--white); }
.hero.asc-sonar .fx-score { background: var(--black); border-color: var(--white); color: var(--white); }

/* ---------- section watermarks: huge outline icons bleeding off-edge ---------- */
.si-clip { overflow: hidden; isolation: isolate; }
.section-icon {
  position: absolute; z-index: -1;
  pointer-events: none;
}
.section-icon svg { width: 100%; height: auto; display: block; }
.si-right {
  right: max(-90px, -6vw);
  top: clamp(20px, 6vh, 70px);
  width: clamp(280px, 27vw, 480px);
}
.si-mid { top: 50%; transform: translateY(-50%); }
/* inset: fully visible, deliberately placed inside the section */
.si-inset {
  right: var(--gutter);
  top: 50%; transform: translateY(-50%);
  width: clamp(250px, 23vw, 380px);
}
@media (max-width: 900px) { .section-icon { display: none; } }

/* small value icons */
.vicon { display: block; width: 52px; margin-bottom: 16px; }
.vicon svg { width: 100%; height: auto; }

.si-mote {
  position: absolute; z-index: 2;
  right: calc(var(--gutter) + clamp(125px, 11.5vw, 190px) - 7px);
  top: calc(50% - clamp(125px, 11.5vw, 190px) - 34px);
  width: 14px; height: 14px;
}
.si-mote::after {
  content: ""; position: absolute; left: 4.5px; top: 4.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pink); opacity: .07;
}
@media (max-width: 900px) { .si-mote { display: none; } }

#fx-veil {
  position: fixed; inset: 0; z-index: 996;
  background: var(--pink);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--gutter);
}
#fx-veil.on { display: flex; animation: cutin 1ms steps(1, end); }
#fx-veil p {
  background: var(--black); color: var(--white);
  font: 700 clamp(1.1rem, 2.4vw, 2rem)/1.35 var(--sans);
  padding: clamp(20px, 3vw, 44px) clamp(24px, 4vw, 60px);
  max-width: 62ch; text-align: center;
  letter-spacing: .01em;
}

/* ---------- outlined display type ---------- */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
  paint-order: stroke;
}
.outline-pink { -webkit-text-stroke-color: var(--pink); }
.outline-black { -webkit-text-stroke-color: var(--black); }

/* ---------- giant marquee ---------- */
.strip-giant {
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 12px 0 16px;
}
.strip-giant .inner { animation-duration: 36s; animation-delay: -18s; }
.strip-giant .outline { -webkit-text-stroke-width: 1.4px; }

/* ---------- stat band ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  max-width: 1440px; margin: 0 auto;
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat b {
  display: block;
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--pink);
  border-top: 6px solid var(--pink);
  padding-top: 16px;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 10px; font-weight: 700; }
.stat .serif { font-weight: 400; }

/* ---------- illustrations ---------- */
.illo { display: block; }
.illo svg { width: 100%; height: auto; }
.card .illo { width: clamp(110px, 14vw, 170px); margin-bottom: 22px; }
.card:hover .illo .swap-bg { fill: var(--white); }
.card:hover .illo .swap-fg { fill: var(--black); }

/* corner notch that follows the pointer quadrant */
.card { overflow: hidden; }
.card::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  background: var(--white); opacity: 0;
  transition: opacity var(--cut);
}
.card[data-q="nw"]::after { top: 0; left: 0; }
.card[data-q="ne"]::after { top: 0; right: 0; }
.card[data-q="sw"]::after { bottom: 0; left: 0; }
.card[data-q="se"]::after { bottom: 0; right: 0; }
.card:hover::after { opacity: 1; }

/* ---------- the work tour: full-screen cinematic chapters ---------- */
#fx-tour {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--black); color: var(--white);
  display: none;
}
#fx-tour.on { display: block; animation: cutin 1ms steps(1, end); }
#fx-tour canvas { position: absolute; inset: 0; }
.t-top { position: absolute; top: 0; left: 0; right: 0; padding: 20px var(--gutter) 0; z-index: 2; pointer-events: none; }
.t-segs { display: flex; gap: 8px; }
.t-segs i { height: 3px; flex: 1; background: #262626; position: relative; overflow: hidden; }
.t-segs i.done { background: var(--white); }
.t-segs i.live { background: #3a3a3a; }
.t-segs i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--pink); }
.t-close {
  position: absolute; top: 16px; right: var(--gutter); z-index: 3;
  background: none; border: 0; color: var(--white);
  font: 400 2rem/1 var(--sans); cursor: pointer; padding: 6px 10px;
}
.t-close:hover { color: var(--pink); }
.t-mute, .t-pause {
  position: absolute; bottom: 26px; z-index: 3;
  background: transparent; color: #8a8a8a;
  border: 2px solid #333;
  font: 700 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; cursor: pointer;
}
.t-pause { left: var(--gutter); min-width: 84px; }
.t-mute { left: calc(var(--gutter) + 96px); }
.t-mute:hover, .t-pause:hover { color: var(--white); border-color: var(--white); }
.t-mute.off { text-decoration: line-through; }
.t-cut {
  position: absolute; inset: 0; z-index: 4;
  background: var(--black); opacity: 0; pointer-events: none;
}
.t-cut.go { animation: tcut 240ms steps(2, end); }
@keyframes tcut { 0% { opacity: 1; } 100% { opacity: 0; } }
.t-copy {
  position: absolute; left: var(--gutter); bottom: 13vh; z-index: 1;
  max-width: min(46rem, 62vw);
  pointer-events: none;
}
.t-kicker {
  display: inline-block;
  font: 700 .92rem var(--sans); letter-spacing: .04em;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 6px; margin-bottom: 22px;
}
.t-title { font-size: clamp(2.1rem, 5vw, 4.4rem); line-height: 1.03; letter-spacing: -0.015em; }
.t-title .serif { font-weight: 400; }
.t-title b { color: var(--pink); }
.t-title.in { animation: cutin 1ms steps(1, end); }
.t-copy.lines-on .t-title { font-size: clamp(1.15rem, 1.8vw, 1.6rem); opacity: .55; }
.t-lines .t-line {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.7vw, 2.3rem);
  line-height: 1.35;
  margin-top: 18px;
  max-width: 40rem;
  min-height: 3.2em; /* one statement at a time; hold the ground steady */
}
.t-stamp {
  position: absolute; right: var(--gutter); bottom: 13vh; z-index: 1;
  text-align: right; display: none; pointer-events: none;
}
.t-stamp.on { display: block; animation: cutin 1ms steps(1, end); }
.t-stamp span {
  display: block; font-weight: 700;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  line-height: 1.04; letter-spacing: -0.02em;
}
.t-stamp .pink { color: var(--pink); }
.t-cta { position: absolute; right: var(--gutter); bottom: 13vh; z-index: 3; display: none; }
.t-cta.on { display: block; animation: cutin 1ms steps(1, end); }
.t-hint {
  position: absolute; right: var(--gutter); bottom: 30px; z-index: 1;
  color: var(--pink); font-size: 1.3rem; opacity: 0; pointer-events: none;
}
.t-hint.on { opacity: .8; animation: hintblink 1s steps(2, end) infinite; }
@keyframes hintblink { 50% { opacity: .15; } }
@media (max-width: 900px) {
  .t-copy { max-width: 86vw; bottom: 16vh; }
  .t-stamp { bottom: 4vh; }
  .t-stamp span { font-size: clamp(1.5rem, 6vw, 2.2rem); }
}
.hero-inner .btn-row button { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  #fx-cursor, #fx-wipe { display: none; }
  html.has-fx-cursor, html.has-fx-cursor a, html.has-fx-cursor button { cursor: auto; }
  .hero.fx-quake { animation: none; }
}

@media print {
  .site-head, .site-foot, .rotator-controls { display: none; }
}