@font-face { font-family: Gabarito; src: url(../fonts/gabarito-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --white: #FFFFFF; --grey: #F1F2F4; --ink: #16171B; --red: #EC4433; --red-text: #C62A1F;
  --soft: #5C5E67; --soft-on-ink: #B4B6BE;
  --display: Gabarito, 'Hanken Grotesk', system-ui, sans-serif;
  --text: 'Hanken Grotesk', system-ui, sans-serif;
  /* type roles, named by job. Gabarito carries every voice above body: 800 for figures and the close, 700 for heads,
     450 for statements. Hanken Grotesk carries reading text and notes. */
  --t-poster: clamp(60px, 11vw, 168px);    /* the close, the phone number */
  --t-numeral: clamp(80px, 8.4vw, 132px);  /* the four figures, set over their card graphics */
  --t-display: clamp(30px, 6.2vw, 100px);  /* the headline, section heads */
  --t-heading: clamp(34px, 3.6vw, 54px);   /* heads inside cards and columns */
  --t-name: clamp(48px, 5.6vw, 88px);      /* Capacitación and Desarrollo as words */
  --t-lead: clamp(23px, 2.2vw, 32px);      /* statements set in Gabarito 450 */
  --t-title: clamp(22px, 2.3vw, 34px);     /* short heads of two to four words */
  --t-body: clamp(18px, 1.3vw, 20px);
  --t-note: 15px;                          /* sources, meta */
  --m: clamp(20px, 2.2vw, 32px);
  --gap: 24px;
  --card-r: clamp(14px, 1.6vw, 26px);
  /* one easing family for everything a visitor touches: a strong ease-out for anything that answers the hand,
     its in-out sibling for things that travel across the screen. Three durations, named by job. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press: 140ms;   /* the press, and every exit: release is always quick */
  --hover: 220ms;   /* hover in, colour, underline */
  --move: 300ms;    /* a thing changing place: the float stepping aside, a card lifting */
  --ring: var(--ink);
  --btn-r: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--t-body)/1.55 var(--text); overflow-x: clip; text-wrap: pretty; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; margin: 0; text-wrap: balance; }
/* a jump from the menu or the skip link lands with the section's head in view, not under the top edge */
.phase, .side, .work, .figures { scroll-margin-top: 4svh; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* the focus ring: a solid 3px band that follows the element's own corners. Ink on light grounds, white on ink, so it
   reads on the red buttons too (the old red ring vanished against them). It never animates: it answers a keyboard. */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.hc--ink, .side--ink, .pcard--ink, .viewer, .close { --ring: var(--white); }
::selection { background: var(--red); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 20; background: var(--ink); color: var(--white); padding: 14px 20px; border-radius: var(--btn-r); font-weight: 650; --ring: var(--red); }
.skip:focus { top: 12px; }
svg[aria-hidden] use { pointer-events: none; }

/* the WhatsApp button is a small red card: its glyph sits in a white index box like a card's corner, a hairline and a
   low shadow give it an edge. On hover an ink copy of the same card is wiped across it from the left (a clipped
   duplicate, so label and glyph change colour exactly at the wipe's edge instead of fading through grey). The press
   sinks it 3%. Hover only where a real pointer exists. */
.button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 24px 0 8px;
  background: var(--red); color: var(--ink); border-radius: var(--btn-r); font: 650 17px/1 var(--text); letter-spacing: -0.005em; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 1px 0 rgba(22, 23, 27, 0.14), 0 12px 24px -16px rgba(22, 23, 27, 0.7);
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--press) var(--ease-out), box-shadow var(--hover) var(--ease-out); }
.button > svg, .button__ink > svg { width: 40px; height: 40px; padding: 10px; flex: none; background: var(--white); color: var(--ink); border-radius: calc(var(--btn-r) - 3px); }
.button__ink { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: inherit; padding: inherit; border-radius: inherit;
  justify-content: inherit; background: var(--ink); color: var(--white); pointer-events: none; clip-path: inset(0 100% 0 0 round var(--btn-r));
  transition: clip-path var(--press) var(--ease-out); }
.button__ink > svg { background: var(--red); color: var(--ink); }
.close .button__ink { background: var(--white); color: var(--ink); }
.button:active { transform: scale(0.97); box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 1px 0 rgba(22, 23, 27, 0.14), 0 4px 10px -8px rgba(22, 23, 27, 0.7); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 1px 0 rgba(22, 23, 27, 0.14), 0 18px 30px -18px rgba(22, 23, 27, 0.8); }
  .button:hover .button__ink { clip-path: inset(0 0 0 0 round var(--btn-r)); transition-duration: var(--move); }
}

/* text links: the underline is drawn, not the browser's. At rest a thin rule; on hover it is wiped away to the right
   and redrawn from the left in red, so the line itself shows where the pointer went. */
.line { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat, linear-gradient(var(--line, var(--red)), var(--line, var(--red))) 0 100% / 0 2px no-repeat;
  padding-bottom: 0.12em; transition: background-size var(--hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .line:hover { background-size: 0 1px, 100% 2px; }
}


/* ---------- the first screen: the kadabra mark dealt open into its two halves ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--grey); padding-bottom: clamp(16px, 2.4svh, 28px); }
.bar { display: flex; align-items: center; gap: 32px; padding: 20px var(--m) 0; min-height: 72px; }
.bar__logo svg { width: auto; height: 34px; color: var(--ink); }
.bar__links { display: flex; gap: 28px; margin-left: auto; font-size: 16px; font-weight: 550; }
.bar__links a { position: relative; display: inline-block; padding: 10px 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* a 2px rule in the half's colour draws in from the left under the hovered item and leaves to the right */
.bar__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform var(--press) var(--ease-out); }
.bar__links li:first-child a::after { background: var(--red); }
.bar__links a:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .bar__links a:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--hover); }
}

/* the table: two equal cards, red and ink, the two cards of the mark. The h1 is one sentence laid across both
   (display: contents puts its two clauses in the cards' first row); each card's own body sits in a subgrid row
   under its clause, so both bodies start on the same line whatever the clauses' lengths. */
.table { --tg: clamp(12px, 1.4vw, 22px); flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: var(--tg);
  margin: clamp(8px, 1.6svh, 20px) var(--m) 0; }
.table__h1 { display: contents; }
.clause { position: relative; z-index: 1; grid-row: 1; display: block; padding: clamp(64px, 8.6svh, 88px) clamp(24px, 3vw, 48px) 0; pointer-events: none;
  font: 800 clamp(34px, 5.5vw, 90px)/0.96 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.clause--red { grid-column: 1; color: var(--ink); }
.clause--ink { grid-column: 2; color: var(--white); }
.hc { position: relative; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; border-radius: var(--card-r);
  box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.08), 0 1px 0 rgba(22, 23, 27, 0.12), 0 30px 60px -40px rgba(22, 23, 27, 0.55); }
.hc--red { grid-column: 1; background: var(--red); color: var(--ink); }
.hc--ink { grid-column: 2; background: var(--ink); color: var(--white); }
.hc__idx { position: absolute; left: clamp(22px, 2.6vw, 40px); top: clamp(20px, 2.8svh, 30px); width: clamp(24px, 2.2vw, 34px); color: var(--white); }
.hc__idx svg { width: 100%; height: auto; }
.hc__body { grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px, 2vw, 32px);
  padding: 24px clamp(24px, 3vw, 48px) clamp(22px, 3.2svh, 40px); }
.hc__text { max-width: 30ch; }
.hc__text p { margin-top: 10px; font-size: 17px; line-height: 1.45; }
.hc--ink .hc__text p { color: var(--soft-on-ink); }
/* the name of the half is the way into it: a line in Gabarito with an arrow that steps forward on hover */
.hc__name { display: inline-flex; align-items: center; gap: 12px; font: 700 var(--t-title)/1 var(--display); letter-spacing: -0.03em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hc__name svg { width: 30px; height: 14px; flex: none; transition: transform var(--press) var(--ease-out); }
.hc__name:active svg { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) { .hc__name:hover svg { transform: translateX(6px); transition-duration: var(--hover); } }

/* the two live diagrams: what each half makes, drawn small on a white sheet. They play once after the deal and
   again when the pointer comes onto the card; at rest they show the finished state. */
.demo { flex: none; width: clamp(150px, 20vw, 290px); height: auto; overflow: visible; }
.demo__sheet { fill: var(--white); }
.demo__title { font: 700 19px var(--display); letter-spacing: -0.02em; fill: var(--ink); }
.demo__rules { color: var(--red); }
.demo__rules line { stroke: #DADCE1; stroke-width: 1.5; }
.demo__rules path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.demo__parts rect { fill: #DADCE1; transform-box: fill-box; transform-origin: 50% 100%; }
.demo__parts .demo__ink { fill: var(--ink); }
.demo__parts .demo__tile { fill: var(--grey); stroke: #DADCE1; stroke-width: 1.5; }
.demo__parts .demo__red { fill: var(--red); }

.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: clamp(14px, 2.4svh, 28px) var(--m) 0; }
.hero__thesis { max-width: 34ch; font: 450 clamp(20px, 1.75vw, 27px)/1.2 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.hero__go { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.hero__free { font-size: var(--t-note); color: var(--soft); }

/* ---------- the deck: one held WebGL stage behind four phases, each phase its own stretch of scroll ---------- */
.deck { position: relative; background: var(--grey); }
.deck__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.deck__stage canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; }
.deck.is-live canvas { opacity: 1; }
.deck__flow { position: relative; z-index: 1; margin-top: -100svh; }
/* the phase heights are the scroll each animation gets: the cut and the deal have about twice what they had */
.phase { position: relative; padding: 0 var(--m); }
.phase--ocean { height: 170svh; padding-top: 80svh; }
.phase--risk { height: 180svh; padding-top: 45svh; }
.phase--cut { height: 240svh; padding-top: 35svh; }
.phase--suits { height: 250svh; padding-top: 35svh; }
/* the copy holds still while its animation plays */
.caption__card { position: sticky; top: 22svh; width: min(40vw, 600px); background: var(--white); border-radius: var(--card-r); padding: clamp(32px, 3.4vw, 56px); }
.caption__card h2 { font-size: var(--t-heading); line-height: 1.02; margin-bottom: 0.5em; }
.caption__card p { max-width: 38ch; }
.caption__card p + p { margin-top: 0.8em; }
.caption__answer { font-weight: 650; padding-top: 0.8em; border-top: 1px solid rgba(22, 23, 27, 0.16); }
.caption__half { padding-top: 14px; border-top: 1px solid rgba(22, 23, 27, 0.16); }
.caption__half strong { display: flex; align-items: center; margin-bottom: 4px; font: 700 var(--t-title)/1 var(--display); letter-spacing: -0.03em; }
.caption__half:first-of-type strong { color: var(--red-text); }
.glyph { display: inline-block; width: 22px; height: 22px; vertical-align: -0.2em; color: var(--red); margin-right: 3px; }
.glyph--ink { color: var(--ink); }

/* ---------- the spread: the two halves side by side, each with three outputs as cards ---------- */
.split { padding: clamp(96px, 10vw, 160px) var(--m) 0; }
.split__head { font-size: var(--t-display); margin-bottom: clamp(28px, 3.4vw, 52px); }
.split__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.side { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px); border-radius: var(--card-r); background: var(--grey); }
.side--ink { background: var(--ink); color: var(--white); }
.side__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.side__name { display: block; font: 800 var(--t-name)/0.86 var(--display); letter-spacing: -0.04em; }
.side--red .side__name { color: var(--red-text); }
.side__sub { display: block; margin-top: 0.3em; font: 450 var(--t-lead)/1.1 var(--display); letter-spacing: -0.02em; }
.side__suits { display: flex; gap: 6px; color: var(--red); }
.side--ink .side__suits { color: var(--white); }
.side__suits svg { width: clamp(26px, 2.4vw, 36px); height: auto; }
.side__lead { margin-top: 22px; max-width: 44ch; }
.side--ink .side__lead { color: var(--soft-on-ink); }
.outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(24px, 2.6vw, 36px); }
.out { position: relative; aspect-ratio: 5 / 6.4; display: flex; align-items: flex-end; padding: clamp(12px, 1.2vw, 18px); border-radius: 12px; background: var(--white); color: var(--ink);
  transform: rotate(var(--tilt, 0deg)); box-shadow: 0 0 0 1px rgba(22, 23, 27, 0.06), 0 1px 0 rgba(22, 23, 27, 0.08), 0 16px 26px -20px rgba(22, 23, 27, 0.55);
  font: 650 clamp(16px, 1.3vw, 20px)/1.12 var(--display); letter-spacing: -0.015em; }
/* each output card carries its suit large in the middle, like a pip */
.out::before { content: ''; position: absolute; left: 50%; top: 40%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath fill="%2316171B" d="M50 87 C50 87 14 61.5 14 38.5 C14 25 24 16.5 34 16.5 C42 16.5 47.2 21.2 50 27 C52.8 21.2 58 16.5 66 16.5 C76 16.5 86 25 86 38.5 C86 61.5 50 87 50 87 Z"/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath fill="%2316171B" d="M50 87 C50 87 14 61.5 14 38.5 C14 25 24 16.5 34 16.5 C42 16.5 47.2 21.2 50 27 C52.8 21.2 58 16.5 66 16.5 C76 16.5 86 25 86 38.5 C86 61.5 50 87 50 87 Z"/%3E%3C/svg%3E") center / contain no-repeat; }
.side--ink .out::before { background: var(--ink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath fill="%2316171B" d="M50 9 C50 9 30 33 19 46 C9 57.5 12.5 72.5 25 73.5 C34 74.2 41.5 69 44.5 62.5 C43.5 74 39 83 30.5 89 L69.5 89 C61 83 56.5 74 55.5 62.5 C58.5 69 66 74.2 75 73.5 C87.5 72.5 91 57.5 81 46 C70 33 50 9 50 9 Z"/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath fill="%2316171B" d="M50 9 C50 9 30 33 19 46 C9 57.5 12.5 72.5 25 73.5 C34 74.2 41.5 69 44.5 62.5 C43.5 74 39 83 30.5 89 L69.5 89 C61 83 56.5 74 55.5 62.5 C58.5 69 66 74.2 75 73.5 C87.5 72.5 91 57.5 81 46 C70 33 50 9 50 9 Z"/%3E%3C/svg%3E"); }
.out__idx { position: absolute; left: clamp(12px, 1.2vw, 18px); top: clamp(12px, 1.2vw, 18px); width: clamp(18px, 1.6vw, 24px); height: auto; color: var(--red); }
.side--ink .out__idx { color: var(--ink); }
.side__more { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding-top: clamp(24px, 2.6vw, 36px); font: 600 clamp(19px, 1.5vw, 22px)/1.2 var(--display); letter-spacing: -0.01em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.side__more span { padding-bottom: 0.14em; }
.side__more svg { width: 30px; height: 14px; flex: none; color: var(--red); transition: transform var(--press) var(--ease-out); }
.side__more:active svg { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) { .side__more:hover svg { transform: translateX(6px); transition-duration: var(--hover); } }

/* what both halves share, as a track: at each step a red card, an ink card and the team's white card together */
.together { margin-top: var(--gap); padding: clamp(28px, 3.4vw, 52px); border-radius: var(--card-r); border: 1px solid rgba(22, 23, 27, 0.14);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(28px, 3vw, 44px); }
.together__head { grid-column: 1 / 5; font-size: var(--t-heading); line-height: 1.02; }
.track { grid-column: 5 / 13; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 0; list-style: none; }
.track::before { content: ''; position: absolute; left: 30px; right: 16%; top: 30px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); opacity: 0.35; }
.track__step { position: relative; display: flex; flex-direction: column; gap: 14px; }
.track__label { font: 650 clamp(17px, 1.3vw, 20px)/1.15 var(--display); letter-spacing: -0.015em; max-width: 14ch; }
.pair { display: flex; height: 62px; padding-left: 10px; }
.pc { display: block; width: 40px; height: 56px; margin-left: -10px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(22, 23, 27, 0.1), 0 10px 16px -12px rgba(22, 23, 27, 0.6); }
.pc--red { background: var(--red); transform: rotate(-8deg); }
.pc--ink { background: var(--ink); transform: translateY(-3px); }
.pc--team { background: var(--white); transform: rotate(8deg); }
.together__ways { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.way { padding-top: 18px; border-top: 1px solid rgba(22, 23, 27, 0.16); }
.way h4 { font-size: var(--t-title); line-height: 1; margin-bottom: 12px; }
.way p { max-width: 46ch; color: var(--soft); }

/* ---------- figures: the four numbers, each drawn in cards of the same size ---------- */
.figures { padding: clamp(96px, 10vw, 160px) var(--m) 0; }
.figures__head { font-size: var(--t-display); max-width: 22ch; margin-bottom: clamp(32px, 4vw, 56px); }
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 32px); }
.fig { margin: 0; padding-top: 16px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; }
.fig__n { position: relative; padding-top: 30px; display: flex; align-items: flex-start; font: 800 var(--t-numeral)/0.82 var(--display); letter-spacing: -0.045em; font-variant-numeric: lining-nums tabular-nums; margin-left: -0.04em; }
.fig__n--red { color: var(--red-text); }
.fig__pc { font-size: 0.4em; line-height: 1; margin: 0.06em 0 0 0.06em; letter-spacing: 0; }
.fig__pre { position: absolute; left: 0.06em; top: 0; font: 450 22px/1 var(--display); letter-spacing: -0.02em; }
.fig__cards { display: block; width: 100%; height: 440px; margin: clamp(18px, 2vw, 26px) 0; }
.fig__says { font: 450 clamp(19px, 1.45vw, 22px)/1.2 var(--display); letter-spacing: -0.02em; }
.fig__src { margin-top: 12px; font-size: var(--t-note); line-height: 1.45; color: var(--soft); }
.figs__key { margin-top: clamp(24px, 2.4vw, 36px); max-width: 76ch; font-size: var(--t-note); color: var(--soft); }

/* ---------- the workshop: the ace of hearts on a full-width table of cards, at three distances. No frame crops it:
   the whole scene zooms, the far cards less and the near cards more, and the ace stays on top ---------- */
.workshop { position: relative; margin-top: clamp(120px, 12vw, 180px); background: var(--grey); height: 300svh; }
.workshop__stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.workshop__title { display: contents; }
.workshop__top, .workshop__bottom { display: block; font-family: var(--display); font-size: var(--t-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1; text-align: center; position: relative; z-index: 2; }
.workshop__top { order: 1; margin-bottom: 0.18em; }
.workshop__hold { order: 2; }
/* the bottom line clears the ace by the same gap as the top line, so it never sits on the ace's corner index */
.workshop__bottom { order: 3; margin-top: 0.18em; }
.workshop__frame { position: relative; z-index: 1; margin: 0; width: min(24vw, 48svh * 0.8); aspect-ratio: 4 / 5; transform-origin: 50% 50%; overflow: hidden; border-radius: var(--card-r); background: var(--white);
  box-shadow: 0 1px 0 rgba(22, 23, 27, 0.1), 0 40px 60px -40px rgba(22, 23, 27, 0.5); }
.zoom { position: absolute; inset: 0; transform-origin: 0 0; }
/* the ace of the workshop, drawn in container units so it stays sharp at every distance */
.rulecard { position: absolute; inset: 0; container-type: inline-size; background: var(--white); }
.rulecard__idx { position: absolute; left: 6cqw; top: 5cqw; display: flex; flex-direction: column; align-items: center; gap: 1cqw; color: var(--red-text); font: 800 9cqw/0.9 var(--display); }
.rulecard__idx svg { width: 6.4cqw; height: auto; color: var(--red); }
.rulecard__idx--br { left: auto; top: auto; right: 6cqw; bottom: 5cqw; transform: rotate(180deg); }
.rulecard__pip { position: absolute; left: 50%; top: 13%; width: 26cqw; height: auto; transform: translateX(-50%); color: var(--red); }
.rulecard__title { position: absolute; left: 22%; right: 22%; top: 40%; text-align: center; text-wrap: balance; font: 800 8.4cqw/0.98 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.rulecard__lines { position: absolute; left: 15%; right: 15%; top: 58%; bottom: 15%; display: flex; flex-direction: column; justify-content: space-between; }
.rulecard__lines i { display: block; height: 0.4cqw; min-height: 1px; background: #CDD0D6; }
.workshop__note { position: absolute; z-index: 2; top: 50%; width: 28ch; transform: translateY(-50%); }
/* clear of the ace at its closest distance (1.6 times its width) */
.workshop__note--left { right: calc(50% + min(19.2vw, 30.8svh) + 32px); text-align: right; }
.workshop__note--right { left: calc(50% + min(19.2vw, 30.8svh) + 32px); }
.ws-table { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ws-layer { position: absolute; inset: 0; }
.ws-card { position: absolute; width: 7vw; height: auto; aspect-ratio: 5 / 7; border-radius: 0.6vw; transform: rotate(var(--r));
  box-shadow: 0 1px 0 rgba(22, 23, 27, 0.08), 0 18px 30px -18px rgba(22, 23, 27, 0.45); }
.ws-layer:nth-child(1) .ws-card { width: 5.4vw; border-radius: 0.45vw; }
.ws-layer:nth-child(3) .ws-card { width: 9vw; border-radius: 0.75vw; }

/* ---------- projects: four cards on the table, each opens full screen ---------- */
.work { padding: clamp(120px, 12vw, 180px) var(--m) 0; }
.work__intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 20px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.work__head { grid-column: 1 / 8; font-size: var(--t-display); }
.work__note { grid-column: 8 / 13; font: 450 var(--t-lead)/1.2 var(--display); letter-spacing: -0.02em; }
.work__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.pcard { --c: var(--ink); --fg: var(--white); position: relative; width: 100%; aspect-ratio: 5 / 7; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: clamp(18px, 1.8vw, 28px); border: 0; border-radius: var(--card-r); background: var(--c); color: var(--fg); font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.08), 0 1px 0 rgba(22, 23, 27, 0.12), 0 24px 40px -30px rgba(22, 23, 27, 0.7); -webkit-tap-highlight-color: transparent;
  transition: transform var(--hover) var(--ease-out), box-shadow var(--hover) var(--ease-out); }
.pcard--red { --c: var(--red); --fg: var(--ink); }
.pcard__idx { position: absolute; left: clamp(18px, 1.8vw, 28px); top: clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 var(--t-title)/1 var(--display); }
.pcard__idx svg { width: 0.8em; height: auto; }
.pcard__pip { position: absolute; left: 50%; top: 40%; width: 34%; height: auto; transform: translate(-50%, -50%); color: var(--white); transition: transform var(--move) var(--ease-out); }
.pcard__name { font: 700 var(--t-heading)/1 var(--display); letter-spacing: -0.035em; }
.pcard__sub { margin-top: 6px; font-size: 16px; opacity: 0.78; }
.pcard__open { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: 650 16px/1 var(--text); }
.pcard__open svg { width: 26px; height: 12px; transition: transform var(--press) var(--ease-out); }
.pcard:active { transform: scale(0.98); transition-duration: var(--press); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { transform: translateY(-6px) rotate(-0.8deg); box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.08), 0 2px 0 rgba(22, 23, 27, 0.1), 0 36px 50px -30px rgba(22, 23, 27, 0.75); }
  .pcard:hover .pcard__pip { transform: translate(-50%, -50%) scale(1.08) rotate(-6deg); }
  .pcard:hover .pcard__open svg { transform: translateX(5px); }
}

/* the viewer: a native modal dialog. Its card is clipped to the clicked card's box and grows to the whole screen */
.viewer { --c: var(--ink); --fg: var(--white); position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.viewer[data-tone="red"] { --c: var(--red); --fg: var(--ink); }
.viewer::backdrop { background: rgba(22, 23, 27, 0.18); }
.viewer__card { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--c); color: var(--fg); }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--m); }
.viewer__title { font: 700 var(--t-title)/1 var(--display); letter-spacing: -0.03em; }
.viewer__close { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--btn-r); background: var(--fg); color: var(--c);
  font: 650 16px/1 var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--press) var(--ease-out); }
.viewer__close svg { width: 18px; height: 18px; }
.viewer__close:active { transform: scale(0.96); }
.viewer__frame { flex: 1; width: auto; margin: 0 var(--m) var(--m); border: 0; border-radius: calc(var(--card-r) - 6px); background: var(--white); }
html.is-viewing { overflow: hidden; }
/* the same action follows the reader once the header has gone, in the corner where WhatsApp buttons live */
.float { position: fixed; z-index: 10; right: var(--m); bottom: var(--m);
  box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.1), 0 2px 0 rgba(22, 23, 27, 0.1), 0 22px 40px -20px rgba(22, 23, 27, 0.75);
  opacity: 0; visibility: hidden; transform: translateX(calc(100% + var(--m) + 24px)) rotate(6deg);
  transition: transform var(--press) var(--ease-out), opacity var(--press) var(--ease-out), visibility 0s var(--press), box-shadow var(--hover) var(--ease-out); }
/* it steps aside for real: whenever copy passes under its corner it slides out past the right edge with a small tilt,
   like a card pushed off the table, and slides back once the corner is clear. Out is quick, back in a touch slower.
   Transitions, not keyframes, so a reversal mid-way retargets from wherever the card is. */
.float.is-on { opacity: 1; visibility: visible; transform: none; transition-duration: var(--move), var(--move), 0s, var(--hover); transition-delay: 0s; }
.float.is-on:active { transform: scale(0.97); transition-duration: var(--press); }
/* ---------- about: the mark as a drop cap ---------- */
.about { padding: clamp(140px, 14vw, 200px) var(--m) clamp(120px, 12vw, 180px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.about__facts { grid-column: 1 / 3; font-size: var(--t-note); line-height: 1.5; padding-top: 0.4em; }
.about__facts li + li { margin-top: 6px; }
.about__text { grid-column: 3 / 12; font: 450 var(--t-lead)/1.2 var(--display); letter-spacing: -0.02em; }
.about__mark { float: left; width: 3.6em; height: 3.6em; margin: 0.12em 0.5em 0 0; background: var(--grey); display: grid; place-items: center; }
.about__mark svg { width: 56%; height: auto; }
.about__lead strong { font-weight: 700; }
.about__second { margin-top: 1.2em; color: var(--soft); }
/* ---------- close: the question in one piece, right above the answer ---------- */
.close { margin-top: 0; min-height: 100svh; background: var(--ink); color: var(--white); display: grid; grid-template-rows: 1fr auto auto auto 1fr; justify-items: center; text-align: center; padding: 32px var(--m) 24px; }
.close__q { grid-row: 2; margin: 0 0 48px; font-family: var(--display); font-size: var(--t-poster); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; }
.close__top, .close__bottom { display: inline-block; }
.close__choice { grid-row: 3; display: flex; align-items: center; }
/* the last action on the page is the biggest card of the three */
.close__choice .button { min-height: 76px; padding: 0 32px 0 12px; gap: 18px; font-size: 21px; --btn-r: 10px; }
.close__choice .button > svg, .close__choice .button__ink > svg { width: 52px; height: 52px; padding: 13px; }
.close__after { grid-row: 4; color: var(--soft-on-ink); margin-top: 20px; max-width: 44ch; }

/* ---------- footer: the number is the headline ---------- */
.foot { background: var(--red); color: var(--ink); min-height: 72svh; padding: 40px var(--m) 28px; display: flex; flex-direction: column; }
.foot__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); font-size: var(--t-note); align-items: start; }
.foot__logo svg { width: auto; height: 28px; }
.foot__logo { grid-column: 1 / 3; }
.foot__top p:nth-of-type(1) { grid-column: 3 / 6; }
.foot__top p:nth-of-type(2) { grid-column: 6 / 9; }
.foot { --line: var(--white); }
.foot__up { grid-column: 11 / 13; justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.foot__up svg { width: 22px; height: 10px; transform: rotate(-90deg); transition: transform var(--press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__up:hover svg { transform: rotate(-90deg) translateX(4px); transition-duration: var(--hover); } }
/* the number is the footer's one big target: hover turns it white and a heavy rule draws under it; press sinks it */
.foot__number { position: relative; align-self: flex-start; margin-top: auto; font: 800 var(--t-poster)/0.95 var(--display); letter-spacing: -0.04em; text-decoration: none; white-space: nowrap;
  transform-origin: 0 100%; -webkit-tap-highlight-color: transparent; transition: color var(--hover) var(--ease-out), transform var(--press) var(--ease-out); }
.foot__number::after { content: ''; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.04em; height: 0.06em; background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--press) var(--ease-out); }
.foot__number:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .foot__number:hover { color: var(--white); }
  .foot__number:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--move); }
}
.foot__meta { margin-top: 32px; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--gap); font-size: var(--t-note); }
.foot__meta p:nth-child(2) { text-align: center; }
.foot__meta p:nth-child(3) { text-align: right; }

/* ---------- entrances ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rise.is-in { opacity: 1; transform: none; }
  /* the closing question opens like a masked line instead of fading, so it is never a dark empty field */
  .js .close .rise { opacity: 1; }
  .js .close__q.rise { clip-path: inset(0 0 100% 0); transform: translateY(0.3em); transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .close__q.rise.is-in { clip-path: inset(0 0 -0.2em 0); transform: none; }
  .js .shutter { clip-path: inset(0 0 100% 0 round var(--card-r)); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter .rulecard { transform: scale(1.12); transition: transform 1500ms var(--ease-out); }
  .js .shutter.is-in { clip-path: inset(0 round var(--card-r)); }
  .js .shutter.is-in .rulecard { transform: none; }
  /* the table is dealt once, as the ace opens: each card lands from a little above, turned a little further */
  .js .ws-card { opacity: 0; transform: translateY(-36px) rotate(calc(var(--r) * 1.6)) scale(0.96); transition: opacity 500ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--n) * 45ms); }
  .js .ws-table.is-in .ws-card { opacity: 1; transform: rotate(var(--r)); }
  .js .workshop__note { opacity: 0; transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
  .js .workshop__note--left { transform: translate(-16px, -50%); }
  .js .workshop__note--right { transform: translate(16px, -50%); }
  .js .workshop[data-step="2"] .workshop__note--left, .js .workshop[data-step="3"] .workshop__note--left,
  .js .workshop[data-step="3"] .workshop__note--right { opacity: 1; transform: translate(0, -50%); }

  /* the deal on arrival: the two cards start stacked small in the middle like the mark (red behind and turned,
     ink in front), then slide apart into the two halves. Their words arrive once the cards have landed. */
  @media (min-width: 761px) {
    .js .hc--red { animation: deal-red 1000ms var(--ease-out) 120ms backwards; }
    .js .hc--ink { animation: deal-ink 1000ms var(--ease-out) 120ms backwards; }
  }
  .js .clause, .js .hc__body, .js .hc__idx { animation: arrive 520ms var(--ease-out) backwards; animation-delay: 760ms; }
  .js .clause--ink, .js .hc--ink .hc__body { animation-delay: 840ms; }
  /* the diagrams draw themselves: the team's rules line by line, the tool piece by piece */
  .js .hc.is-play .demo__rules path { animation: write 620ms var(--ease-in-out) backwards; animation-delay: calc(var(--d0, 1250ms) + var(--n) * 420ms); }
  .js .hc.is-play .demo__parts rect { animation: part 420ms var(--ease-out) backwards; animation-delay: calc(var(--d0, 1250ms) + var(--n) * 120ms); }
}
@keyframes deal-red { from { transform: translateX(calc(50% + var(--tg) / 2 - 4%)) translateY(-2%) rotate(-10deg) scale(0.4); } }
@keyframes deal-ink { from { transform: translateX(calc(-50% - var(--tg) / 2 + 4%)) translateY(1%) rotate(3deg) scale(0.4); } }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } }
@keyframes write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes part { from { opacity: 0; transform: translateY(8px) scale(0.92); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .workshop { height: auto; }
  .workshop__stage { position: relative; height: auto; min-height: 100svh; padding: 120px 0; }
  /* reduced motion keeps the colour changes and drops the travel: the ink card fades over the button instead of
     wiping across, the float fades in place, and nothing lifts */
  .button__ink { clip-path: none; opacity: 0; }
  .button:hover .button__ink { clip-path: none; opacity: 1; }
  .button__ink, .float, .line, .foot__number { transition-duration: var(--hover) !important; }
  .float, .float.is-on { transform: none; }
  .pcard:hover, .pcard:active, .button:active, .float.is-on:active { transform: rotate(0deg); }
}

/* ---------- tablet: the diagrams sit above the words, the figures go two by two ---------- */
@media (max-width: 1100px) {
  .hc__body { flex-direction: column-reverse; align-items: flex-start; }
  .demo { width: 150px; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__go { align-items: flex-start; text-align: left; }
  .figs { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .together__head, .track { grid-column: 1 / 13; }
  .work__grid { grid-template-columns: 1fr 1fr; }
  .work__head, .work__note { grid-column: 1 / 13; }
  .workshop { height: auto; padding: 96px 0; }
  .workshop__stage { position: relative; height: auto; padding: 0 var(--m); }
  .workshop__frame { width: min(56vw, 440px); }
  /* narrow screens hold still: the table is a band as wide as the screen behind the ace */
  .workshop__hold { position: relative; }
  .ws-table { inset: -6% auto -6% 50%; width: 100vw; margin-left: -50vw; }
  .ws-card { width: 20vw; border-radius: 1.6vw; }
  .ws-layer:nth-child(1) .ws-card { width: 15vw; border-radius: 1.2vw; }
  .ws-layer:nth-child(3) .ws-card { width: 24vw; border-radius: 2vw; }
  .workshop__note { order: 4; position: static; width: auto; max-width: 52ch; transform: none !important; opacity: 1 !important; text-align: left !important; margin-top: 24px; }
  .workshop__note--left { margin-top: 40px; }
  .workshop__bottom { opacity: 1 !important; transform: none !important; }
  .about__facts { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 32px; padding: 0; }
  .about__facts li + li { margin-top: 0; }
  .about__text { grid-column: 1 / 13; }
}

/* ---------- phone: its own composition. The first screen is four blocks: the two halves carrying the headline,
   the thesis and the action. The diagrams stay on larger screens. ---------- */
@media (max-width: 760px) {
  :root { --t-poster: 11vw; --t-numeral: 26vw; --t-display: 10vw; --t-heading: 30px; --t-name: 10.4vw; --t-lead: 21px; --t-title: 22px; --t-body: 17px; --t-note: 14px; --gap: 12px; }
  .bar { padding-top: 14px; gap: 12px; min-height: 0; }
  .bar__links, .wide { display: none; }
  .bar__logo svg { height: 26px; }
  .bar__action { margin-left: auto; min-height: 44px; padding: 0 14px 0 6px; gap: 10px; font-size: var(--t-note); }
  .bar__action > svg, .bar__action .button__ink > svg { width: 32px; height: 32px; padding: 7px; }
  .table { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; row-gap: 0; margin-top: 12px; }
  .clause { padding: 42px 20px 0; font-size: clamp(26px, 7.9vw, 34px); }
  .clause--ink { grid-column: 1; grid-row: 3; }
  .hc { grid-column: 1; }
  .hc--red { grid-row: 1 / 3; margin-bottom: 10px; }
  .hc--ink { grid-row: 3 / 5; }
  .hc__idx { left: 20px; top: 16px; width: 20px; }
  .hc__body { padding: 10px 20px 18px; }
  .hc__text p { margin-top: 6px; font-size: 15px; line-height: 1.38; }
  .hc__name { font-size: 20px; }
  .demo { display: none; }
  .hero__foot { margin-top: 14px; gap: 12px; }
  .hero__thesis { font-size: 18px; }
  .hero__go { width: 100%; align-items: stretch; text-align: center; }
  .hero__action { justify-content: center; }
  .hero__free { font-size: 13px; }
  /* on a phone the float is a full-width bar, so it steps aside downward, off the bottom edge */
  .float { left: var(--m); right: var(--m); bottom: 14px; justify-content: center; transform: translateY(calc(100% + 24px)); }
  .phase--ocean { padding-top: 70svh; }
  .caption__card { width: 100%; top: 44svh; padding: 24px; }
  .caption__card h2 { font-size: 26px; }
  .caption__card p { font-size: 16px; }
  .split__pair { grid-template-columns: minmax(0, 1fr); }
  .outs { gap: 8px; }
  .out { font-size: 15px; padding: 10px; aspect-ratio: 5 / 6.6; }
  .out__idx { width: 16px; left: 10px; top: 10px; }
  .together { display: block; padding: 24px; }
  .together__head { margin-bottom: 24px; }
  .track { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .track::before { left: 34px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 8px, transparent 8px 14px); }
  .track__step { flex-direction: row; align-items: center; }
  .track__label { max-width: none; }
  .together__ways { display: block; }
  .way + .way { margin-top: 28px; }
  .figs { grid-template-columns: 1fr; row-gap: 56px; }
  .figures__head { margin-bottom: 36px; }
  .work__grid { gap: 10px; }
  .pcard { padding: 14px; }
  .pcard__idx { left: 14px; top: 12px; font-size: 18px; }
  .pcard__name { font-size: 22px; }
  .pcard__sub, .pcard__open { font-size: 13px; }
  .pcard__open { margin-top: 10px; }
  .viewer__bar { padding: 12px 14px; }
  .viewer__title { font-size: 18px; }
  .viewer__frame { margin: 0 10px 10px; }
  .workshop__top, .workshop__bottom { font-size: var(--t-display); }
  .workshop__frame { width: 72vw; }
  .about { display: flex; flex-direction: column-reverse; }
  .about__text { line-height: 1.3; }
  .about__mark { width: 4.6em; height: 4.6em; }
  .about__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-note); margin-top: 32px; }
  .about__facts li + li { margin-top: 0; }
  .close__choice { width: 100%; }
  .close__choice .button { width: 100%; justify-content: center; }
  .foot__top { display: block; }
  .foot__top > * + * { margin-top: 10px; display: block; }
  .foot__number { font-size: var(--t-poster); }
  .foot__meta { display: block; }
  .foot__meta p { text-align: left !important; margin-top: 6px; }
}