/* Twenty Eighty — the shared stylesheet. Tokens, type scale, header, sections, blocks, footer.
   Page-specific parts (intro, hero, the front-page sections) are namespaced by their own classes. */

:root {
  /* Ink, paper, and one red. Red marks a decision — it is never decoration. */
  --ink: #0b0b0a;
  --paper: #f1efe9;
  --red: #ff4d2e;
  --lime: #cffd5f;   /* reserved for calls to action */
  --dim: .22;

  --sans: "proxima-nova", "Proxima Nova", system-ui, sans-serif;
  --serif: "ivyora-text", "IvyOra Text", Georgia, serif;                     /* text cut: serif below 40px */
  --serif-display: "ivyora-display", "IvyOra Display", Georgia, serif;        /* display cut: large serif */
  --serif-accent: var(--serif-display);                                         /* the accent: the display face, upright as in the logo; italic only in the hero */

  /* Type scale — one role, one size. Every text on the page uses one of these. */
  --type-h1: 800 clamp(40px, 6.4vw, 118px)/.94 var(--sans);        --track-h1: -.038em;   /* section statements */
  --type-h2: 800 clamp(34px, 4.6vw, 86px)/.96 var(--sans);         --track-h2: -.034em;   /* second statements */
  --type-h3: 700 clamp(22px, 1.8vw, 30px)/1.15 var(--sans);        --track-h3: -.015em;   /* names of things */
  --type-serif-l: 300 clamp(28px, 3.9vw, 72px)/1.08 var(--serif-display); --track-serif-l: -.012em; /* second voice */
  --type-serif-m: 300 clamp(22px, 2.2vw, 38px)/1.2 var(--serif);   --track-serif-m: -.004em; /* supporting lines */
  /* Reading sizes follow long-read practice: 17px on a phone, rising to 20px on a laptop or desktop screen. */
  --type-body: 400 clamp(17px, calc(15.6px + .3vw), 20px)/1.55 var(--sans);
  --type-read: 400 clamp(17px, calc(15.6px + .3vw), 20px)/1.7 var(--sans);   /* body size, more leading: running text */
  --type-small: 400 clamp(15px, calc(14.2px + .18vw), 17px)/1.5 var(--sans);
  --type-ui: 700 16px/1 var(--sans);                               --track-ui: .02em;
  --type-label: 700 13px/1.2 var(--sans);                          --track-label: .12em;
  --type-nav: 400 15px/1 var(--sans);                              /* header, menu and footer */

  --gutter: clamp(16px, 3.4vw, 56px);
  --h-hero: clamp(44px, 7.6vw, 140px);

  --ease: cubic-bezier(.2, .7, 0, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .55s;
  --t-med: .9s;
  --t-slow: 1.25s;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0; background: var(--ink);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--red); color: var(--paper); }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────────────────────── Header (persistent) ───────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter);
  color: var(--paper); transition: color var(--t-fast) var(--ease);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; position: relative; }
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--bar, var(--ink));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.site-header[data-bar="1"]::before { opacity: .9; }
.site-header[data-on="light"] { color: var(--ink); }
.menu-open .site-header { color: var(--paper); }
.menu-open .site-header::before { opacity: 0; }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-logo { display: block; height: 38px; width: auto; aspect-ratio: 234.2 / 123.2; fill: currentColor; }
.brand-desc { font: var(--type-nav); letter-spacing: .01em; white-space: nowrap; }
.bd-w { display: inline-block; }

.nav { display: flex; align-items: center; gap: 28px; font: var(--type-nav); letter-spacing: .01em; }
.nav a { position: relative; text-decoration: none; padding: 6px 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.lang { display: flex; align-items: baseline; gap: 6px; opacity: .9; }
.lang [aria-current] { font-weight: 700; }

.menu-btn {
  display: none; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: inherit; background: none; border: 0; padding: 10px 0; cursor: pointer;
}

.js .hfade { opacity: 0; transition: opacity var(--t-med) var(--ease) .15s; }
.js.ui-show .hfade { opacity: 1; }
.js.intro-running .brand-logo { opacity: 0; }

.menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 120px var(--gutter) 48px;
  background: var(--ink); color: var(--paper);
  transform: translateY(-100%); transition: transform var(--t-med) var(--ease-io);
  visibility: hidden;
}
.menu a { font: 800 clamp(40px, 11vw, 64px)/1.02 var(--sans); letter-spacing: -.03em; text-transform: uppercase; text-decoration: none; transition: color .3s var(--ease); }
.menu a:hover { color: var(--red); }
.menu .lang { margin-top: 28px; font: var(--type-nav); }
.menu .lang a { font: inherit; letter-spacing: .01em; text-transform: none; }
.menu .lang [aria-current] { font-weight: 700; }
.menu-open .menu { transform: none; visibility: visible; }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .brand { gap: 10px; }
  .brand-logo { height: 30px; }
  .brand-desc { font-size: 12.5px; }
  .site-header { padding-top: 16px; padding-bottom: 16px; }
  :root { --h-hero: clamp(38px, 12.6vw, 64px); }
}

/* ───────────────────────── Intro: the 20/80 seal → the logo → the corner ───────────────────────── */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 40; display: block; overflow: hidden;
  background: var(--ink); color: var(--paper);
  animation: intro-failsafe 0s linear 9s forwards;
}
@keyframes intro-failsafe { to { visibility: hidden; } }

/* The 20/80 mark, large: one line splits in two and opens onto the numbers. */
.mark-big { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; }
.mark-big svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--paper); }
.mb-rule { transform-box: fill-box; transform-origin: 50% 50%; }
.mb-rule[data-r="top"] { transform: translateY(90.825px) scaleX(0); }
.mb-rule[data-r="bot"] { transform: translateY(-90.825px) scaleX(0); }
.mb-clip { position: absolute; inset: 0; clip-path: inset(50% 0 50% 0); }
.mb-digits { transform-origin: 50% 50%; }

.logo-stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-logo {
  display: block; width: min(58vw, 540px); height: auto; aspect-ratio: 234.2 / 123.2;
  overflow: visible; fill: currentColor; transform-origin: 0 0;
}
.intro .mark { opacity: 0; }
.intro .mrule { transform-box: fill-box; transform-origin: 0 50%; }
.intro .twenty path { transform: translateY(64px); }
.intro .eighty path { opacity: 0; }
/* Intro, category version: three words stand beside the mark, as tall as it. */
.hba { display: none; position: fixed; left: 0; top: 0; z-index: 2; margin: 0; font: 800 100px/1 var(--sans); letter-spacing: -.035em; color: var(--paper); pointer-events: none; white-space: nowrap; }
.intro-category .hba { display: block; }
.intro-category .intro-logo { display: none; }
.hba-w { display: block; overflow: hidden; transform-origin: 0 0; }
.hba-w > span { display: inline-block; transform: translateY(110%); }
.intro-skip {
  position: absolute; right: var(--gutter); bottom: 26px; z-index: 3;
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--paper); background: none; border: 0; padding: 8px 0; opacity: .5; cursor: pointer;
}
.intro-skip:hover { opacity: 1; }

/* ───────────────────────── 01 Hero ───────────────────────── */
.hero { position: relative; background: var(--ink); }
/* 100svh stage + 2.6 × 70svh of beats + 100svh while 02 slides over the pinned stage. */
.js .hero { height: 382vh; height: 382svh; }
.hero-stage { position: relative; }
.js .hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js .stage-inner { position: absolute; inset: 0; transform-origin: 50% 30%; }
.stage-shade { position: absolute; inset: 0; z-index: 8; background: var(--ink); opacity: 0; pointer-events: none; }

/* Fields open from the centre line, like the logo's two rules parting. */
.layer { display: none; }
.js .layer {
  display: block; position: absolute; inset: 0;
  clip-path: inset(50% 0 50% 0); transition: clip-path var(--t-slow) var(--ease-io);
}
.js .layer.on { clip-path: inset(0 0 0 0); }
/* One field: it opens red; then the film surfaces through the red, and the red drains away. */
.field { z-index: 1; isolation: isolate; background: var(--ink); }
.field video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 60% 50%; transform: scale(var(--vs, 1.1));
  /* The film is seen in black and white, so the red turns the snow into the red field and the rider cuts through it. */
  filter: grayscale(1) contrast(1.15) brightness(.95);
}
.field-veil { position: absolute; inset: 0; background: #fff; opacity: var(--veil, 1); }
.field-red { position: absolute; inset: 0; background: var(--red); mix-blend-mode: multiply; opacity: var(--red-a, 1); }
/* As the film surfaces, the red deepens towards the bottom: clear through the top, then a smooth fall to near-black at the foot. */
.field-grade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 11, 10, 0) 40%, rgba(11, 11, 10, .32) 72%, rgba(11, 11, 10, .66) 100%);
  opacity: calc(1 - var(--veil, 1));
}
.edge {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 3; height: 2px; margin-top: -1px;
  background: var(--paper); opacity: 0; pointer-events: none;
}

.beat {
  margin: 0; padding: 18vh var(--gutter) 0;
  font: 800 var(--h-hero)/.92 var(--sans);
  letter-spacing: -.028em; text-transform: uppercase; text-wrap: balance;
  color: var(--paper);
}
.js .beat {
  position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); top: 50%;
  padding: 0; transform: translateY(-50%); pointer-events: none; perspective: 1000px;
}
.beat .line { display: block; }
.beat[data-beat="1"] { --keep: var(--red); }
.beat[data-beat="2"] { color: var(--ink); --keep: var(--paper); --dim: .3; transition: color .6s var(--ease); }
.on-film .beat[data-beat="2"] { color: var(--paper); }
.beat[data-beat="3"] { --keep: var(--paper); }
@media (min-width: 900px) {
  .field video { object-position: 50% 50%; }
}

.w, .wi { display: inline-block; }
.w.serif .wi { font-family: var(--serif-accent); font-style: normal; font-weight: 300; letter-spacing: -.005em; }
/* Italic is kept for the hero only: NOT, and … AND IN LIFE. */
.beat em, .beat .w.serif .wi { font-family: var(--serif-accent); font-style: italic; font-weight: 300; }
.beat .line { transform-style: preserve-3d; }
.beat .w { will-change: transform, opacity; backface-visibility: hidden; }
.beat .wi { transition: opacity 1s var(--ease), color .8s var(--ease); }
/* The 20/80 settle: once a sentence has found its place, most words step back. */
.is-set .w:not(.keep) .wi { opacity: var(--dim); }
.is-set .w.keep .wi { color: var(--keep, inherit); }

.hero-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; color: var(--paper); transition: color .6s var(--ease); }
.hero[data-theme="light"] .hero-ui { color: var(--ink); }
.beat-index { position: absolute; left: var(--gutter); bottom: 30px; display: flex; gap: 8px; }
.beat-index span { width: 28px; height: 2px; background: currentColor; opacity: .25; transition: opacity var(--t-fast) var(--ease); }
.beat-index span.on { opacity: 1; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: opacity .5s var(--ease);
}
.scroll-cue i { display: block; width: 1.5px; height: 40px; background: currentColor; animation: cue 1.9s var(--ease-io) infinite; }
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
.scroll-cue.gone { opacity: 0; }

/* ───────────────────────── Shared section parts ───────────────────────── */
section { position: relative; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.idx { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; font: var(--type-label); letter-spacing: var(--track-label); }
.idx .rule { flex: 1; }
.rule { height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease-io); }
[data-theme="dark"] .rule { height: 1px; }   /* white on black reads heavier: half the weight on dark sections */
.in > .rule, .in .rule, .rule.in { transform: none; }

.split .line { display: block; }
.split .w { overflow: hidden; vertical-align: top; padding: .1em .04em .14em; margin: -.1em -.04em -.14em; }
.split .w.serif { padding-right: .14em; margin-right: -.14em; }
.split .wi { transform: translateY(120%); transition: transform 1s var(--ease), opacity 1s var(--ease), color .8s var(--ease); }
.split.in .wi { transform: none; transition-delay: calc(var(--i) * 32ms); }
.split.is-set .wi { transition-delay: 0s; }
.fade { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.fade.in { opacity: 1; transform: none; }
.fade.d1 { transition-delay: .1s; } .fade.d2 { transition-delay: .2s; } .fade.d3 { transition-delay: .3s; }
html:not(.js) .fade { opacity: 1; transform: none; }
html:not(.js) .rule { transform: none; }

/* ───────────────────────── 02 What we are (paper) ───────────────────────── */
.s-what {
  z-index: 1; background: var(--paper); color: var(--ink);
  padding: clamp(120px, 18vh, 210px) var(--gutter) clamp(110px, 16vh, 200px);
}
.js .s-what { margin-top: -100vh; margin-top: -100svh; }
.lead {
  grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0;
  font: var(--type-h1); letter-spacing: var(--track-h1);
  text-wrap: balance; max-width: 13.5em;
}
/* The headline's second voice: set right under it, so the two read as one thought — what we are,
   then what it means for you. Its words come into focus one by one after the headline lands;
   then the sentence settles on what to remember. */
.lead-sub {
  grid-column: 1 / -1; margin: clamp(18px, 2.2vw, 36px) 0 0; max-width: 16.5em;
  font: var(--type-serif-l); letter-spacing: var(--track-serif-l); text-wrap: balance; --dim: .38;
}
.focus-line .line { display: block; }
.w-group { white-space: nowrap; }
.js .focus-line .wi {
  opacity: 0; filter: blur(12px); transform: translateY(.2em);
  transition: opacity .9s var(--ease), filter 1s var(--ease), transform 1.1s var(--ease);
}
.js .focus-line.in .wi { opacity: 1; filter: none; transform: none; transition-delay: calc(450ms + var(--i) * 60ms); }
.js .focus-line.is-set .wi { transition-delay: 0s; transition-duration: 1.1s; }
.js .focus-line.is-set .w:not(.keep) .wi { opacity: var(--dim); }
/* ───────────────────────── 03 What you can buy (ink) ───────────────────────── */
.s-buy { background: var(--ink); color: var(--paper); padding: clamp(110px, 16vh, 200px) var(--gutter) clamp(110px, 16vh, 200px); }
.buy-head {
  grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0;
  font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; max-width: 15em;
}
/* One statement, one line of belief, then the path: Decision, Position, Action as three equal steps.
   Each label is a bar with how long the step takes; under it, what it is, the question we ask, what you leave with. */
.s-buy .buy-head { max-width: none; }
.buy-sub { grid-column: 1 / -1; margin: clamp(18px, 2vw, 30px) 0 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
.offers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(4, auto); column-gap: clamp(20px, 2.6vw, 44px); margin-top: clamp(96px, 11vw, 170px); }
.offer-step {
  grid-row: 1; display: flex; align-items: center; justify-content: space-between; margin: 0; padding-bottom: 14px; border-bottom: 4px solid rgba(241, 239, 233, .28);
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; transition: border-color .5s var(--ease), opacity 1s var(--ease), transform 1.1s var(--ease);
}
.offer-step > span:first-child { display: flex; align-items: center; }
.offer-step .wk { opacity: .55; }
.offer-step[data-k="0"] { grid-column: 1; } .offer-step[data-k="1"] { grid-column: 2; } .offer-step[data-k="2"] { grid-column: 3; }
.offer-step i, .m-step i { display: block; flex: none; height: 16px; margin-left: .45em; font: 300 22px/16px var(--serif); font-style: normal; color: var(--red); translate: 0 -1.5px; transform-origin: 50% calc(50% + 1.5px); transition: rotate .8s var(--spring); }
.offer { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; align-content: start; --acc: var(--red); padding-top: clamp(30px, 3.2vw, 48px); }
.offer.o-decision { grid-column: 1; } .offer.o-position { grid-column: 2; } .offer.o-action { grid-column: 3; }
.offer .p-art { max-width: 340px; margin: 0 0 28px; }
.offer h3 { margin: 0; font: var(--type-h3); letter-spacing: var(--track-h3); text-wrap: balance; }
.ask { margin: 14px 0 0; }
.ask .k, .offer-facts dt { margin: 0 0 6px; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(241, 239, 233, .45); }
.ask .q { margin: 0; max-width: 30ch; font: var(--type-body); color: var(--paper); text-wrap: pretty; }
.offer-facts { display: grid; align-content: start; gap: 16px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(241, 239, 233, .14); }
.offer-facts div { display: grid; gap: 5px; }
.offer-facts dd { margin: 0; max-width: 30ch; text-wrap: pretty; font: var(--type-small); color: rgba(241, 239, 233, .8); }
.deliv { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
.deliv li { position: relative; padding-left: 20px; max-width: 30ch; text-wrap: pretty; }
.deliv li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--red); }
/* Pointing at a step marks its bar. */
.offers:has(.offer[data-k="0"]:hover) .offer-step[data-k="0"],
.offers:has(.offer[data-k="1"]:hover) .offer-step[data-k="1"],
.offers:has(.offer[data-k="2"]:hover) .offer-step[data-k="2"] { border-color: var(--red); }
.offers:has(.offer[data-k="0"]:hover) .offer-step[data-k="0"] i,
.offers:has(.offer[data-k="1"]:hover) .offer-step[data-k="1"] i { rotate: 90deg; }
@media (max-width: 760px) {
  .offers { grid-template-columns: 1fr; grid-template-rows: none; }
  .offers > * { grid-column: 1 !important; grid-row: auto !important; }
  .offer { display: block; }
  .offer-step:not(:first-child) { margin-top: 64px; }
}
/* Service diagrams — rules, a point, and one red decision. They draw in when the card arrives. */
.p-art { margin: 20px 0 6px; }
.art { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; }
.art [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-io); }
.in .art [pathLength] { stroke-dashoffset: 0; }
.art .lbl { stroke: none; fill: currentColor; font: 700 11px/1 var(--sans); letter-spacing: .14em; }
.art-decision .opts path { transition: stroke-dashoffset 1s var(--ease-io) calc(var(--n) * 55ms + .2s), opacity .8s var(--ease) 1.5s; }
.in .art-decision .opts path:not(.keep) { opacity: .18; }
.art-decision .pick { stroke: var(--acc); stroke-width: 3; transition: stroke-dashoffset .7s var(--ease-io) 1.55s, stroke .45s var(--ease); }
.art-decision .seal { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .7s var(--spring) 2.1s, fill .45s var(--ease); }
.in .art-decision .seal { scale: 1; }
.art-position .dots { stroke: none; fill: currentColor; opacity: .35; }
.art-position .cx-v { transition-delay: .25s; }
.art-position .pos { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .7s var(--spring) 1.15s, fill .45s var(--ease); }
.in .art-position .pos { scale: 1; }
.art-position .ring { stroke: var(--acc); transform-box: fill-box; transform-origin: center; opacity: 0; }
.in .art-position .ring { animation: ring 2.8s var(--ease) 1.5s infinite; }
.in .art-position .r2 { animation-delay: 2.9s; }
@keyframes ring { 0% { scale: .5; opacity: .9; } 100% { scale: 2.8; opacity: 0; } }
.art-brand .found rect { stroke: none; fill: currentColor; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--ease-io); }
.art-brand .found rect:nth-child(1) { transition-delay: .2s; }
.art-brand .found rect:nth-child(2) { transition-delay: .36s; }
.art-brand .found rect:nth-child(3) { transition-delay: .52s; }
.in .art-brand .found rect { transform: none; }
.art-brand .aa { stroke: none; fill: currentColor; font: 300 118px/1 var(--serif-accent); opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease) 1.1s, transform 1.2s var(--ease) 1.1s; }
.art-brand .aa .acc { fill: var(--acc); transition: fill .45s var(--ease); }
.in .art-brand .aa { opacity: 1; transform: none; }
/* ───────────────────────── 04 Japan (red): the paid first step, then our own guide, free ───────────────────────── */
.art-market .ground { stroke-dasharray: 2 7; opacity: .4; }
.art-market .arc { transition-duration: 1.4s; transition-delay: .35s; }
.art-market .node { stroke: none; fill: currentColor; transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .6s var(--spring) .15s; }
.art-market .node.jp { transition-delay: 1.6s; }
.in .art-market .node { scale: 1; }
.art-market .traveller { stroke: none; fill: var(--acc); opacity: 0; transition: opacity .5s var(--ease) 1.9s, fill .45s var(--ease); }
.in .art-market .traveller { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .art-market .traveller { display: none; } }

.s-japan .jp-title { grid-column: 1 / span 7; grid-row: 2; margin: clamp(40px, 6vw, 88px) 0 0; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.s-japan .jp-title .serif .wi { color: var(--paper); }
.s-japan .jp-sub { grid-column: 1 / span 7; grid-row: 3; margin: 26px 0 0; max-width: 24em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
/* DK → JP sits beside "From Denmark into Japan". */
.s-japan .jp-art { grid-column: 8 / -1; grid-row: 2 / span 2; align-self: end; --acc: var(--paper); }
.s-japan .jp-art .art { max-width: 460px; margin-left: auto; }
/* The product: one bar, then three columns — what it is and the question, what you leave with, our own guide. */
.s-japan .jp-offer { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 44px); row-gap: clamp(30px, 3.2vw, 48px); margin-top: clamp(96px, 11vw, 170px); }
.s-japan .offer-step { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin: 0; padding-bottom: 14px; border-bottom: 4px solid rgba(11, 11, 10, .3); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.s-japan .offer-step .wk { opacity: .6; }
.s-japan .jp-offer h3 { margin: 0; font: var(--type-h3); letter-spacing: var(--track-h3); }
.s-japan .ask .k, .s-japan .offer-facts dt, .s-japan .jp-guide .k { margin: 0 0 6px; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(11, 11, 10, .58); }
.s-japan .ask .q { color: var(--ink); }
.s-japan .offer-facts { margin: 0; padding: 0; border: 0; }
.s-japan .offer-facts dd { color: rgba(11, 11, 10, .88); max-width: 34ch; }
.s-japan .deliv li { max-width: 34ch; }
.s-japan .deliv li::before { background: var(--ink); }
.s-japan .jp-guide { margin: 0; }
.s-japan .jp-guide-line { margin: 0 0 14px; max-width: 30ch; font: var(--type-small); color: rgba(11, 11, 10, .88); text-wrap: pretty; }
@media (max-width: 900px) {
  .s-japan .jp-title, .s-japan .jp-sub, .s-japan .jp-art { grid-column: 1 / -1; grid-row: auto; }
  .s-japan .jp-art { margin-top: 56px; } .s-japan .jp-art .art { margin-left: 0; }
  .s-japan .jp-offer { grid-row: auto; grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .s-japan .jp-offer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The free guide, under its own bar: cover left, the line and the download right. */
.s-japan .jp-free { grid-column: 1 / -1; grid-row: 5; display: grid; grid-template-columns: subgrid; row-gap: clamp(30px, 3.2vw, 48px); margin-top: clamp(96px, 11vw, 170px); }
.s-japan .jp-free .offer-step { grid-column: 1 / -1; }
.s-japan .jp-free .guide-cover-wrap { grid-column: 1 / span 5; margin-top: 0; }
.s-japan .jp-free-copy { grid-column: 7 / -1; align-self: center; }
.s-japan .jp-free-copy h3 { margin: 0; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.s-japan .jp-free-copy h3 em { font-family: var(--serif-accent); font-style: normal; font-weight: 300; color: var(--paper); }
.s-japan .jp-free-line { margin: 22px 0 32px; max-width: 24em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
.feat-media img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.feat-media.in img { transform: none; }
@media (max-width: 900px) {
  .s-japan .jp-free { grid-row: auto; }
  .s-japan .jp-free .guide-cover-wrap, .s-japan .jp-free-copy { grid-column: 1 / -1; }
  .s-japan .jp-free .guide-cover-wrap { max-width: 440px; }
}

/* ───────────────────────── 05 When to call (paper) ───────────────────────── */
.s-when {
  background: var(--paper); color: var(--ink);
  padding: clamp(110px, 16vh, 200px) var(--gutter) clamp(120px, 18vh, 220px);
}
.when-big {
  grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0;
  font: var(--type-h1); letter-spacing: var(--track-h1);
  text-wrap: balance; --keep: var(--red); --dim: .32;
}
.when-copy { grid-column: 7 / -1; display: grid; gap: 26px; margin-top: clamp(64px, 8vw, 120px); }
.when-copy p { margin: 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }

@media (max-width: 900px) {
  .when-copy { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  :root { --type-h1: 800 clamp(38px, 11.5vw, 64px)/.96 var(--sans); }
}

[hidden] { display: none !important; }

/* ───────────────────────── Photos: one treatment — ink and red, like the film ───────────────────────── */
.duo { position: relative; isolation: isolate; overflow: hidden; margin: 0; background: #fff; }
.duo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .9s var(--ease), transform 1.4s var(--ease); }
.duo::after { content: ""; position: absolute; inset: 0; background: var(--red); mix-blend-mode: multiply; opacity: .9; transition: opacity .9s var(--ease); pointer-events: none; }
@media (hover: hover) {
  .duo:hover img { filter: none; transform: scale(1.03); }
  .duo:hover::after { opacity: 0; }
}

/* ───────────────────────── 07 Where we come from (paper) ───────────────────────── */
.s-where { background: var(--paper); color: var(--ink); padding: clamp(120px, 18vh, 210px) 0 clamp(110px, 16vh, 200px); overflow: hidden; }
.s-where .grid { padding: 0 var(--gutter); }
.where-lead { grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0; font: var(--type-h1); letter-spacing: var(--track-h1); max-width: 12em; text-wrap: balance; }
.meet { position: relative; height: clamp(460px, 56vw, 900px); margin: clamp(56px, 8vw, 130px) 0; }
.meet .duo { position: absolute; top: 50%; will-change: transform; }
.meet-a { left: 50%; z-index: 1; width: clamp(200px, 26vw, 430px); aspect-ratio: 9 / 15; translate: calc(-100% + 3vw) -56%; }
.meet-b { left: 50%; width: clamp(280px, 40vw, 660px); aspect-ratio: 3 / 2; translate: -3vw -28%; }
.where-big { grid-column: 1 / -1; margin: 0; max-width: 16em; font: var(--type-serif-l); letter-spacing: var(--track-serif-l); text-wrap: balance; }
/* The payoff: the idea both cultures reached is the name. It lands, then steps back to the twenty. */
.where-why { grid-column: 1 / -1; margin-top: clamp(100px, 13vw, 220px); }
.where-kicker { margin: 0 0 clamp(22px, 2.6vw, 40px); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.where-kicker::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 12px .3em 0; vertical-align: middle; background: var(--red); }
.where-name { margin: 0; max-width: 15.5em; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; --keep: var(--red); --dim: .3; }

/* ───────────────────────── 06 Work (ink) ───────────────────────── */
.s-work { background: var(--ink); color: var(--paper); padding: clamp(110px, 16vh, 200px) 0 clamp(110px, 15vh, 190px); overflow-x: clip; }
.s-work .grid { padding: 0 var(--gutter); }
.work-title { grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0; font: var(--type-h1); letter-spacing: var(--track-h1); }

/* Showreel — the hero of the section. It loads like the mark: one line, two bars, 20/80 between them.
   Then the bars open out into the frame and the film plays between them. Once, quickly, as the reel
   arrives. Nothing pins: the page keeps flowing. */
.reel-track { display: grid; place-items: center; margin-top: clamp(40px, 5vw, 80px); padding: clamp(60px, 8vh, 110px) var(--gutter) clamp(70px, 9vh, 120px); }
.reel-box {
  --w: min(calc(100vw - 2 * max(var(--gutter), 6vw)), calc((100svh - 230px) * 16 / 9), 1560px);
  position: relative; display: block; width: var(--w); aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0;
  background: none; color: inherit; cursor: pointer;
}
.reel-win { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.reel-win video { width: 100%; height: 100%; display: block; object-fit: cover; }
.reel-bar { position: absolute; left: 50%; width: 100%; height: 4px; background: var(--paper); transform: translateX(-50%); transform-origin: 50% 50%; }
.reel-bar[data-r="top"] { top: -16px; }
.reel-bar[data-r="bot"] { bottom: -16px; }
.js .reel-bar { top: 50%; bottom: auto; }
.reel-mark { position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; }
.reel-mark svg { display: block; width: 100%; height: 100%; fill: var(--paper); }
.reel-cap {
  position: absolute; left: 0; right: 0; top: calc(100% + 30px); display: flex; justify-content: space-between;
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(241, 239, 233, .6);
  opacity: var(--ui, 1);
}
.reel-play {
  position: absolute; left: var(--px, 50%); top: var(--py, 50%); z-index: 2; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px;
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--paper);
  opacity: var(--ui, 1); scale: calc(.7 + .3 * var(--ui, 1));
  transition: background-color .3s var(--ease);
}
.reel-play i { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.reel-box:hover .reel-play, .reel-box:focus-visible .reel-play { background: var(--red); color: var(--paper); }
.reel-dialog { width: min(92vw, 1400px); max-width: none; padding: 0; border: 0; background: #000; overflow: visible; }
.reel-dialog::backdrop { background: rgba(11, 11, 10, .94); }
.reel-dialog video { display: block; width: 100%; height: auto; }
.reel-close {
  position: absolute; right: 0; bottom: 100%; padding: 14px 0; border: 0; background: none; cursor: pointer;
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper);
}
@media (max-width: 800px) {
  .reel-play { padding: 12px 16px; }
}

/* The German Brand Award, shown only with the project that won it. */
.feat { margin-top: clamp(40px, 6vw, 100px); align-items: center; row-gap: 40px; }
.feat + .feat { margin-top: clamp(100px, 11vw, 180px); }
.feat-media { grid-column: 1 / span 7; display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.js .feat-media { clip-path: inset(50% 0 50% 0); transition: clip-path 1.3s var(--ease-io); }
.js .feat-media.in { clip-path: inset(0 0 0 0); }
.feat-media video { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.feat-media.in video { transform: none; }
.feat-media:hover video { transform: scale(1.03); }
.feat-copy { grid-column: 9 / -1; }
/* Mirrored: words left, film right. */
.feat--flip .feat-media { grid-column: 6 / -1; grid-row: 1; }
.feat--flip .feat-copy { grid-column: 1 / span 4; grid-row: 1; }
.feat-title em { display: block; font-family: var(--serif-accent); font-style: normal; font-weight: 300; font-size: 1.12em; letter-spacing: -.005em; }
.award-label { display: block; width: clamp(150px, 14vw, 220px); height: auto; margin: 0 0 clamp(36px, 3.4vw, 56px); }
.feat-title { margin: 0; font: var(--type-h3); letter-spacing: var(--track-h3); }
.feat-meta { margin: 10px 0 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(241, 239, 233, .6); }
.feat-line { margin: 26px 0 0; max-width: 20ch; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
.feat-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding-bottom: 6px;
  font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--red);
}
.feat-link::after { content: "→"; transition: translate .35s var(--ease); }
.feat-link:hover::after { translate: 4px 0; }
@media (max-width: 900px) { .feat-media, .feat-copy, .feat--flip .feat-media, .feat--flip .feat-copy { grid-column: 1 / -1; grid-row: auto; } }

/* ───────────────────────── 04 Japan guide (red) ───────────────────────── */
.s-guide { background: var(--red); color: var(--ink); padding: clamp(110px, 16vh, 200px) var(--gutter) clamp(120px, 16vh, 200px); }
.guide-copy { grid-column: 1 / 7; margin-top: clamp(40px, 6vw, 88px); }
.guide-title { margin: 0; font: var(--type-h2); letter-spacing: var(--track-h2); }
.guide-title .serif .wi { color: var(--paper); }
.guide-sub { margin: 26px 0 0; max-width: 24em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
.guide-form { display: grid; gap: 22px; max-width: 520px; margin-top: clamp(44px, 5vw, 72px); }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
/* The second way in: read about the guide first. Ink on the red, so it reads as a link, not a button. */
.guide-more { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; font: var(--type-ui); letter-spacing: var(--track-ui); color: var(--ink); text-decoration: none; border-bottom: 2px solid currentColor; }
.guide-more::after { content: "→"; transition: translate .35s var(--ease); }
.guide-more:hover::after { translate: 4px 0; }
.fld { display: grid; gap: 8px; }
.fld > span { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.fld input, .fld textarea {
  width: 100%; padding: 8px 0 10px; font: var(--type-body); color: inherit;
  background: transparent; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; outline: none; resize: vertical;
  transition: box-shadow .3s var(--ease);
}
.fld input:focus, .fld textarea:focus { box-shadow: 0 2px 0 currentColor; }
.fld textarea::placeholder { color: inherit; opacity: .35; }
.chk { display: flex; align-items: flex-start; gap: 12px; font: var(--type-small); cursor: pointer; }
.chk input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 18px 26px;
  font: var(--type-ui); letter-spacing: var(--track-ui); color: var(--paper); background: var(--ink); border: 0; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn::after { content: "→"; transition: translate .35s var(--ease); }
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:hover::after { translate: 5px 0; }
.form-err, .q-err { min-height: 1.4em; margin: 0; font: var(--type-small); font-weight: 700; }
.form-done { margin: 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
.form-note { margin: 0; max-width: 44ch; font: var(--type-small); }
/* A field only bots fill in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.guide-cover-wrap { grid-column: 8 / -1; margin-top: clamp(40px, 6vw, 88px); perspective: 1200px; }
/* The guide lies at an angle and settles towards the reader as the section scrolls in (site.js).
   It never follows the pointer; on hover it only lifts a little. It links to the guide's own page. */
.guide-cover {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); color: var(--paper); text-decoration: none;
  transform: translateY(var(--ty, 0px)) rotateY(var(--ry, -8deg)) rotateX(var(--rx, 3deg));
  box-shadow: 34px 44px 80px rgba(11, 11, 10, .28);
  transition: scale .7s var(--ease), box-shadow .7s var(--ease);
}
@media (hover: hover) {
  .guide-cover:hover { scale: 1.025; box-shadow: 40px 56px 100px rgba(11, 11, 10, .36); }
}
.guide-cover:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.guide-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.62); opacity: .85; }
.cover-type { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 9%; }
.cover-kicker { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.cover-title strong { display: block; font: 800 clamp(30px, 3.4vw, 58px)/.95 var(--sans); letter-spacing: -.03em; }
.cover-title em { display: block; margin-top: 8px; font: 300 clamp(26px, 2.8vw, 48px)/1 var(--serif-accent); }
.cover-mark { width: 34px; height: auto; fill: currentColor; }

/* ───────────────────────── 08 Close (paper) ───────────────────────── */
.s-close { background: var(--paper); color: var(--ink); padding: clamp(120px, 18vh, 210px) var(--gutter) clamp(110px, 15vh, 190px); }
.close-title { grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0; font: var(--type-h1); letter-spacing: var(--track-h1); max-width: 12em; text-wrap: balance; }
.qual { grid-column: 1 / 9; position: relative; margin-top: clamp(56px, 7vw, 110px); }
.q-progress { display: flex; gap: 8px; margin-bottom: 34px; }
.q-progress span { width: 28px; height: 2px; background: currentColor; opacity: .2; transition: opacity .4s var(--ease), background-color .4s var(--ease); }
.q-progress span.done { opacity: 1; }
.q-progress span.now { opacity: 1; background: var(--red); }
.q-step { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.q-step.is-on { display: block; animation: q-in .7s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(22px); } }
.q-step legend { padding: 0; margin-bottom: 26px; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
.q-count { display: block; margin-bottom: 14px; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; opacity: .5; }
.q-input {
  width: 100%; padding: 6px 0 12px; font: var(--type-h3); letter-spacing: var(--track-h3); color: inherit;
  background: transparent; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; outline: none;
}
.q-input::placeholder { color: inherit; opacity: .22; }
.q-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.q-opt, .q-pill { position: relative; }
.q-opt { display: flex; }
.q-opt > span { flex: 1; }
.q-opt input, .q-pill input { position: absolute; opacity: 0; pointer-events: none; }
.q-opt > span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 16px 20px;
  font: var(--type-body); font-weight: 700; line-height: 1.2; border: 2px solid currentColor; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.q-opt small { display: block; margin-top: 4px; font: var(--type-small); opacity: .7; }
.q-text { display: block; }
.q-opt > span::after { content: "×"; flex: none; font: 300 1.4em/.5 var(--serif); opacity: 0; rotate: 0deg; transition: rotate .6s var(--spring), opacity .3s var(--ease); }
.q-opt:hover > span { background: var(--ink); color: var(--paper); }
.q-opt input:checked + span { background: var(--red); border-color: var(--red); color: var(--ink); }
.q-opt input:checked + span::after { opacity: 1; rotate: 90deg; }
.q-opt input:focus-visible + span, .q-pill input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 3px; }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.q-wide { grid-column: 1 / -1; }
.q-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.q-pill span { display: block; padding: 11px 16px; font: var(--type-ui); letter-spacing: var(--track-ui); border: 2px solid currentColor; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.q-pill input:checked + span { background: var(--ink); color: var(--paper); }
.q-nav { display: flex; align-items: center; gap: 26px; margin-top: 18px; }
.q-back { padding: 10px 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: inherit; background: none; border: 0; opacity: .6; cursor: pointer; }
.q-back:hover { opacity: 1; }
.q-err { margin-top: 18px; }
.q-done { margin: 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); animation: q-in .7s var(--ease) both; }
.close-japan { grid-column: 1 / -1; margin: clamp(72px, 8vw, 120px) 0 0; font: var(--type-body); }
.close-japan a { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--red); transition: color .3s var(--ease); }
.close-japan a:hover { color: var(--red); }
.contact {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 72px); margin-top: clamp(56px, 6vw, 90px);
  font: var(--type-h3); font-style: normal; letter-spacing: var(--track-h3);
}
.contact a { text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .3s var(--ease); }
.contact a:hover { border-color: var(--red); }
.contact span { font-family: var(--serif); font-weight: 300; letter-spacing: 0; }

/* ───────────────────────── Footer ───────────────────────── */
.site-footer { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: clamp(72px, 9vw, 120px) var(--gutter) 28px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px 40px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 14px 32px; font: var(--type-nav); }
.foot-nav a { text-decoration: none; transition: color .3s var(--ease); }
.foot-nav a:hover { color: var(--red); }
.site-footer .lang { font: var(--type-nav); }
.site-footer .lang a { text-decoration: none; }
.foot-logo { display: block; width: min(100%, 118vh); height: auto; margin-top: clamp(56px, 7vw, 120px); fill: currentColor; overflow: visible; }
.foot-logo .f-twenty path { transform: translateY(64px); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 50ms + .25s); }
.foot-logo .f-eighty path { opacity: 0; transition: opacity 1s var(--ease); transition-delay: calc(var(--i) * 60ms + .8s); }
.foot-logo.in .f-twenty path { transform: none; }
.foot-logo.in .f-eighty path { opacity: 1; }
html:not(.js) .foot-logo * { transform: none !important; opacity: 1 !important; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-top: 36px; font: var(--type-nav); line-height: 1.4; opacity: .6; }
.foot-base button { padding: 0; font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }

@media (max-width: 900px) {
  .meet { height: clamp(420px, 120vw, 640px); }
  .meet-a { width: 46vw; translate: calc(-100% + 8vw) -58%; }
  .meet-b { width: 62vw; translate: -20vw -14%; }
  .guide-copy, .guide-cover-wrap, .qual { grid-column: 1 / -1; }
  .guide-cover-wrap { max-width: 440px; margin-top: 64px; }
  .q-opts, .q-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; }
}

/* ───────────────────────── Pages: the shared opening for every page below the front page ───────────────────────── */
.page-open { background: var(--ink); color: var(--paper); padding: clamp(150px, 22vh, 240px) var(--gutter) clamp(56px, 8vh, 100px); }
.page-title { grid-column: 1 / -1; margin: clamp(40px, 6vw, 88px) 0 0; font: var(--type-h1); letter-spacing: var(--track-h1); max-width: 13em; text-wrap: balance; }
.page-sub { grid-column: 1 / -1; margin: clamp(18px, 2.2vw, 36px) 0 0; max-width: 18em; font: var(--type-serif-l); letter-spacing: var(--track-serif-l); text-wrap: balance; }
.idx a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
.idx a:hover { color: var(--red); }
/* A missing fact, marked so it cannot slip through to launch. */
.ph { font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--red); }
.skip-link:focus { position: fixed; left: var(--gutter); top: 12px; z-index: 60; width: auto; height: auto; clip: auto; padding: 10px 14px; background: var(--paper); color: var(--ink); font: var(--type-ui); }

/* ───────────────────────── Work overview: one case per row, film and words taking turns ───────────────────────── */
.work-list { background: var(--ink); color: var(--paper); padding: clamp(24px, 4vh, 60px) 0 clamp(110px, 15vh, 190px); }
.work-list .grid { padding: 0 var(--gutter); }
.work-list .feat:first-child { margin-top: 0; }
.feat-soon { color: rgba(241, 239, 233, .5); }
.work-all { margin-top: clamp(80px, 9vw, 140px); }
.work-all .feat-link { grid-column: 1 / -1; justify-self: start; }

/* ───────────────────────── Case page ───────────────────────── */
.case-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 28px 0 0; padding: 0; list-style: none; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(241, 239, 233, .6); }
.case-film { grid-column: 1 / -1; position: relative; margin-top: clamp(48px, 6vw, 96px); aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.js .case-film { clip-path: inset(50% 0 50% 0); transition: clip-path 1.3s var(--ease-io); }
.js .case-film.in { clip-path: inset(0 0 0 0); }
.case-film video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.case-film.in video { transform: none; }

/* The story: a label on the left, one idea on the right, a line between chapters. */
.case-story { background: var(--paper); color: var(--ink); padding: clamp(110px, 16vh, 200px) var(--gutter) clamp(110px, 15vh, 190px); }
.chapter { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-top: 22px; border-top: 1px solid rgba(11, 11, 10, .18); }
.chapter + .chapter { margin-top: clamp(56px, 7vw, 110px); }
.chapter-label { grid-column: 1 / span 4; margin: 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.chapter-label span { margin-right: 14px; opacity: .45; }
.chapter-text { grid-column: 5 / span 7; margin: 0; max-width: 26em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); text-wrap: pretty; }
.case-stills { margin: clamp(90px, 11vw, 170px) 0; padding: 0; row-gap: clamp(12px, 1.4vw, 22px); }
.case-still { grid-column: span 6; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(11, 11, 10, .06); }
.case-still--wide { grid-column: 1 / -1; }
.case-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-pull { grid-column: 1 / -1; margin: 0; max-width: 16em; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.case-pull .serif .wi { color: var(--red); }
/* The key chapter: the one line the case is remembered by, set large in its place in the story. */
.chapter--key { padding-top: 22px; }
.chapter--key .case-pull { grid-column: 5 / -1; }
@media (max-width: 900px) { .chapter--key .case-pull { grid-column: 1 / -1; } }
.case-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px clamp(20px, 2.6vw, 44px); margin: clamp(90px, 11vw, 170px) 0 0; padding-top: 22px; border-top: 2px solid currentColor; }
.case-facts dt { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; opacity: .55; }
.case-facts dd { margin: 10px 0 0; font: var(--type-body); }
.case-award { display: block; width: 150px; height: auto; }

/* What comes next: the next film, and its name. */
.case-next { background: var(--ink); color: var(--paper); padding: clamp(110px, 16vh, 200px) var(--gutter); }
.next-link { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; margin-top: clamp(40px, 5vw, 72px); color: inherit; text-decoration: none; }
.next-media { grid-column: 1 / span 7; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.next-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-link:hover .next-media video { transform: scale(1.03); }
.next-copy { grid-column: 9 / -1; display: grid; justify-items: start; gap: 14px; }
.next-copy .feat-meta { margin: 0; }
.next-title { font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; transition: color .3s var(--ease); }
.next-link:hover .next-title { color: var(--red); }
.next-copy .feat-link { margin-top: 10px; }

@media (max-width: 900px) {
  .chapter-label { grid-column: 1 / -1; margin-bottom: 16px; }
  .chapter-text { grid-column: 1 / -1; }
  .case-still { grid-column: 1 / -1; }
  .next-media, .next-copy { grid-column: 1 / -1; }
  .next-copy { margin-top: 28px; }
}

/* ───────────────────────── Case page, v2: lead, method, and the blocks of the work ───────────────────────── */
.case-open .page-sub { margin-bottom: 0; }
.case-open .award-label { grid-column: 1 / -1; margin: 36px 0 0; }
.case-lead { grid-column: 1 / span 9; margin: 0; max-width: 30em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); text-wrap: pretty; }
/* Decision × Position × Action, as this case lived it. Each step links to the service. */
.case-method { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 44px); margin: 0; }
/* The story's rhythm: the lead, then chapters and the method with even space between them. */
.case-lead + .chapter, .case-lead + .case-method { margin-top: clamp(80px, 9vw, 140px); }
.chapter + .case-method, .case-method + .chapter { margin-top: clamp(56px, 7vw, 110px); }
.m-step { display: flex; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(11, 11, 10, .28); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: inherit; text-decoration: none; transition: border-color .4s var(--ease); }
.m-step:hover { border-color: var(--red); }
.m-step:hover i { rotate: 90deg; }
.m-line { margin: 22px 0 0; max-width: 22ch; font: var(--type-h3); letter-spacing: var(--track-h3); text-wrap: pretty; }
.chapter-label { font-weight: 700; }

/* The work: films and pictures laid out the way they were made — wide, in pairs, square. */
.case-media { --cm-bg: var(--ink); --cm-fg: var(--paper); --cm-accent: var(--red); background: var(--cm-bg); color: var(--cm-fg); padding: clamp(110px, 16vh, 200px) var(--gutter) clamp(120px, 16vh, 210px); }
.cm-head { margin-bottom: clamp(56px, 7vw, 110px); }
.cm-head .award-label { grid-column: 1 / -1; margin: 40px 0 0; }
.cm-row + .cm-row { margin-top: clamp(80px, 10vw, 160px); }
.cm-row { row-gap: clamp(12px, 1.4vw, 22px); align-items: start; }
.cm-copy { grid-column: 1 / span 5; align-self: center; }
.cm-copy--wide { grid-column: 1 / -1; align-self: auto; margin-bottom: clamp(28px, 3vw, 48px); }
.cm-copy--wide .cm-h { max-width: 16em; }
.cm-h { margin: 0; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.cm-text { margin: 22px 0 0; max-width: 28em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); color: color-mix(in srgb, var(--cm-fg) 85%, transparent); text-wrap: pretty; }
.cm-text--note { grid-column: 1 / span 7; }
.cm-caption { grid-column: 1 / span 8; margin: 14px 0 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); color: color-mix(in srgb, var(--cm-fg) 85%, transparent); }
.cm-quote { grid-column: 1 / -1; margin: 0; font: var(--type-h1); letter-spacing: var(--track-h1); }
.cm-quote .serif .wi { color: var(--cm-accent); }
.cm-translation { grid-column: 1 / -1; margin: 18px 0 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: color-mix(in srgb, var(--cm-fg) 60%, transparent); }

.mf { margin: 0; }
.mf--wide { grid-column: 1 / -1; }
.mf--half { grid-column: span 6; }
.mf--third { grid-column: span 4; }
.mf--feature { grid-column: 7 / -1; }
.cm-feature--flip .cm-copy { grid-column: 8 / -1; grid-row: 1; }
.cm-feature--flip .mf--feature { grid-column: 1 / span 6; grid-row: 1; }
.mf-frame { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; background: color-mix(in srgb, var(--cm-fg, var(--paper)) 7%, var(--cm-bg, var(--ink))); }
.js .mf-frame { clip-path: inset(50% 0 50% 0); transition: clip-path 1.2s var(--ease-io); }
.js .mf.in .mf-frame { clip-path: inset(0 0 0 0); }
.mf-frame img, .mf-frame video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.3s var(--ease); }
.mf.in .mf-frame img, .mf.in .mf-frame video { transform: none; }
.mf.d1 .mf-frame { transition-delay: .1s; } .mf.d2 .mf-frame { transition-delay: .2s; }
.mf figcaption { margin-top: 14px; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: color-mix(in srgb, var(--cm-fg, var(--paper)) 60%, transparent); }

.palette { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 1 / 1.15; padding: 18px; background: var(--sw); color: var(--sw-ink); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.swatch span + span { opacity: .7; letter-spacing: .06em; }
.swatch { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-fg, var(--paper)) 14%, transparent); }

/* The end of a case: the award, then the facts. */
.case-end { padding-top: clamp(90px, 12vh, 150px); }
.case-end .case-facts { margin-top: 0; }
.case-awards { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: clamp(24px, 3vw, 56px); align-items: center; margin-bottom: clamp(70px, 8vw, 120px); }
.case-awards .case-award { width: 100%; max-width: 220px; }
.case-awards ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
.case-facts dd a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--red); }
.next-line { max-width: 24em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); color: rgba(241, 239, 233, .8); }

@media (max-width: 900px) {
  .case-lead, .cm-copy, .cm-copy--wide, .cm-caption, .cm-text--note, .mf--feature, .mf--half,
  .cm-feature--flip .cm-copy, .cm-feature--flip .mf--feature { grid-column: 1 / -1; grid-row: auto; }
  .cm-copy { margin-bottom: 28px; }
  .mf--third { grid-column: span 6; }
  .case-method { grid-template-columns: 1fr; row-gap: 44px; }
  .case-awards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .mf--third { grid-column: 1 / -1; } }

/* ───────────────────────── Case: an award at the top, and the jury in its own words ───────────────────────── */
.award-top { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); margin: clamp(40px, 5vw, 72px) 0 0; }
.award-top .award-label { flex: none; width: clamp(130px, 11vw, 180px); margin: 0; }
.award-top p { margin: 0; max-width: 34em; font: var(--type-body); color: rgba(241, 239, 233, .85); }
.award-top .award-kicker { display: block; margin-bottom: 10px; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper); }
.award-top .award-cat { display: block; }
.award-top + .page-title { margin-top: clamp(28px, 3.4vw, 56px); }

.jury { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: clamp(36px, 4vw, 60px); margin-bottom: clamp(90px, 11vw, 170px); }
.jury-title { grid-column: 1 / -1; margin: 0; font: var(--type-h2); letter-spacing: var(--track-h2); }
.jury-by { grid-column: 1 / -1; margin: -8px 0 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; opacity: .55; }
.jury-quote { grid-column: span 6; margin: 0; padding-top: 22px; border-top: 1px solid rgba(11, 11, 10, .18); }
.jury-quote figcaption { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.jury-quote blockquote { margin: 18px 0 0; }
.jury-quote blockquote p { margin: 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); text-wrap: pretty; }
.jury-quote blockquote p::before { content: "“"; } .jury-quote blockquote p::after { content: "”"; }
@media (max-width: 900px) { .jury-quote { grid-column: 1 / -1; } .award-top { align-items: flex-start; } }

/* ───────────────────────── Case header, compact: who, the awards, one line, the film ───────────────────────── */
.case-open { padding-top: clamp(120px, 17vh, 176px); }
.case-title { grid-column: 1 / span 8; grid-row: 2; align-self: end; margin: clamp(28px, 3.2vw, 52px) 0 0; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.case-sub { grid-column: 1 / span 8; margin: 18px 0 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); color: rgba(241, 239, 233, .85); }
.case-open .case-film { margin-top: clamp(36px, 4.4vw, 72px); }
/* One label per win. Two labels side by side say "won twice" before a word is read. */
.award-pair { display: flex; gap: clamp(22px, 2.2vw, 34px); }
.award-pair img { display: block; width: clamp(96px, 8vw, 132px); height: auto; }
.case-badges { grid-column: 9 / -1; grid-row: 2; align-self: end; justify-self: end; }
.feat-award.award-pair { margin: 0 0 clamp(32px, 3vw, 48px); }
.case-lead + .case-facts { margin-top: clamp(48px, 5vw, 80px); }
.case-facts + .chapter { margin-top: clamp(80px, 9vw, 140px); }
.jury-quote figcaption span::after { content: " · "; }
.case-end { padding-top: clamp(100px, 13vh, 170px); }
.case-end .jury { margin-bottom: 0; }
@media (max-width: 900px) {
  .case-title, .case-sub { grid-column: 1 / -1; }
  .case-badges { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 24px; }
  .award-pair img { width: 88px; }
}

/* ───────────────────────── Case media in the client's colours, and handwriting written over a film ───────────────────────── */
.case-media--themed .idx { color: var(--cm-accent); }
.case-media--themed .cm-h { color: var(--cm-fg); }
/* The line writes itself: each handwritten line is uncovered left to right, one after the other. */
.hw-text { position: absolute; inset: 0; pointer-events: none; }
.hw-line { position: absolute; inset: 0; background: center / 100% 100% no-repeat; clip-path: inset(var(--t) 100% var(--b) 0); }
.js .hw-line { transition: clip-path .9s cubic-bezier(.45, .05, .55, .95); transition-delay: calc(1.1s + var(--n) * .42s); }
.mf.in .hw-line, html:not(.js) .hw-line { clip-path: inset(var(--t) 0 var(--b) 0); }
@media (prefers-reduced-motion: reduce) { .hw-line { clip-path: inset(var(--t) 0 var(--b) 0); } }
/* A piece that stands on its own, centred, with its translation under it. */
.mf--solo { grid-column: 4 / span 6; }
.mf .mf-translation { max-width: 30em; margin-top: 18px; font: var(--type-serif-m); letter-spacing: var(--track-serif-m, -.004em); text-transform: none; color: color-mix(in srgb, var(--cm-fg, var(--paper)) 72%, transparent); }
@media (max-width: 900px) { .mf--solo { grid-column: 1 / -1; } }
.chapter--key .chapter-text + .case-pull { margin-top: clamp(28px, 3vw, 48px); }

/* ───────── Case results: measured by third parties. One row per measure, in the chapter grid:
   label and source · the number · a small chart that makes the comparison. Red is this campaign; grey is the benchmark. */
.case-results { padding-bottom: 0; }
.case-results + .case-end { padding-top: clamp(110px, 14vh, 180px); }
.res-title { grid-column: 1 / span 8; margin: clamp(40px, 4.6vw, 72px) 0 0; font: var(--type-h2); letter-spacing: var(--track-h2); }
.res-sub { grid-column: 1 / span 7; margin: clamp(18px, 2vw, 30px) 0 0; max-width: 26em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); text-wrap: pretty; }
.res-list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: clamp(64px, 8vw, 128px); }
.res-row { --p: 1; --pb: 1; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; padding: 22px 0 clamp(52px, 6vw, 96px); border-top: 1px solid rgba(11, 11, 10, .18); }
.res-label { grid-column: 1 / span 4; }
.res-label h3 { margin: 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.res-label p { margin: 10px 0 0; font: var(--type-small); color: rgba(11, 11, 10, .62); }
.res-label strong { font-weight: 700; color: var(--ink); }
.res-value { grid-column: 5 / span 3; margin: -.08em 0 0; display: flex; flex-direction: column; }
.res-num { font: var(--type-h2); letter-spacing: var(--track-h2); white-space: nowrap; }
.res-unit { margin-top: 12px; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(11, 11, 10, .62); }
.res-body { grid-column: 8 / -1; padding-top: 10px; }
.res-text { margin: 22px 0 0; max-width: 30em; font: var(--type-body); text-wrap: pretty; }

/* The marks: thin, rounded at the data end, anchored at zero. */
.rc-track { position: relative; display: block; height: 10px; }
.rc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * var(--p) * 100%); border-radius: 0 4px 4px 0; background: var(--red); }

/* Against a threshold: the bar passes the line. */
.rc--threshold { position: relative; padding-top: 30px; }
.rc--threshold .rc-track { background: color-mix(in srgb, var(--red) 16%, var(--paper)); border-radius: 0 4px 4px 0; }
.rc-mark { position: absolute; top: 0; right: calc((1 - var(--m)) * 100%); height: calc(100% + 8px); padding-right: 10px; font: var(--type-small); white-space: nowrap; color: rgba(11, 11, 10, .62); border-right: 1px solid var(--ink); }

/* Against a benchmark: grey first, then the campaign. */
.rc--compare { display: grid; gap: 16px; }
.rc-name { display: block; margin-bottom: 8px; font: var(--type-small); color: rgba(11, 11, 10, .62); }
.rc-name b { margin-left: 6px; font-weight: 700; color: var(--ink); }
.rc-bar:not(.is-key) .rc-fill { width: calc(var(--v) * var(--pb) * 100%); background: #9c9a94; }

/* One in five. */
.rc--units { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rc-unit { position: relative; display: block; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--red) 16%, var(--paper)); overflow: hidden; }
.rc-unit.is-key::after { content: ""; position: absolute; inset: 0; background: var(--red); }
.js .res-row--units:not(.is-on) .rc-unit { opacity: 0; transform: scaleX(.4); }
.js .res-row--units:not(.is-on) .rc-unit.is-key::after { transform: scaleX(0); }
.js .rc-unit { transform-origin: 0 50%; transition: opacity .35s var(--ease), transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i) * 70ms); }
.js .rc-unit.is-key::after { transform-origin: 0 50%; transition: transform .6s cubic-bezier(.22, 1, .36, 1) .5s; }

/* Delivery, for scale. */
.res-row--scale { padding-bottom: 0; }
.res-scale { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(20px, 2.6vw, 44px); margin: 0; }
.res-scale div { display: flex; flex-direction: column-reverse; }
.res-scale dd { margin: 0; font: var(--type-h3); letter-spacing: var(--track-h3); }
.res-scale dt { margin-top: 8px; font: var(--type-small); color: rgba(11, 11, 10, .62); }
.res-note { grid-column: 5 / -1; margin: clamp(26px, 2.6vw, 40px) 0 0; font: var(--type-small); color: rgba(11, 11, 10, .62); }

@media (max-width: 900px) {
  .res-title, .res-sub, .res-label, .res-value, .res-body, .res-scale, .res-note { grid-column: 1 / -1; }
  .res-value { margin: 26px 0 0; }
  .res-body { padding-top: 24px; }
  .res-scale { margin-top: 26px; }
}
@media (max-width: 520px) { .res-scale { grid-template-columns: 1fr; } }



/* ═════════ Reframing Japan — the guide, its chapters and interviews ═════════
   The live guide's content and structure, built from this site's parts: the section line, statements,
   case-page openings and chapter rows, the red sign-up section, sharp photographs, counting numbers.
   Every text uses a role from the type scale above; the guide adds no sizes of its own. */
a.btn { text-decoration: none; }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--red); color: var(--ink); }

/* Running text: one column, body size, more leading. */
.gd-read { grid-column: 5 / span 7; max-width: 38em; }
.gd-read > p, .gd-list { margin: 0 0 1.25em; font: var(--type-read); text-wrap: pretty; }
.gd-read > p:last-child { margin-bottom: 0; }
.gd-read strong { font-weight: 700; }

/* Opening of the guide: the film, the name, one line, who made it. */
.gd-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--ink); color: var(--paper); padding: clamp(130px, 18vh, 200px) var(--gutter); }
.gd-hero-film { position: absolute; inset: 0; overflow: hidden; }
.gd-hero-film video { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; filter: brightness(.5); }
.gd-hero > .grid { position: relative; width: 100%; align-items: end; }
.gd-hero-main { grid-column: 1 / span 7; }
.gd-title { margin: 0; font: var(--type-h2); letter-spacing: var(--track-h2); }
.gd-title .line { display: block; }
.gd-sub { grid-column: 1 / span 8; margin: clamp(18px, 2vw, 30px) 0 0; max-width: 22em; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); text-wrap: pretty; }
.gd-credits { grid-column: 9 / -1; font: var(--type-small); }
.gd-credits p { margin: 0 0 10px; color: var(--red); }
.gd-credits ul { margin: 0; padding: 0; list-style: none; }
.gd-credits li { opacity: .8; }
.gd-credits b { font-weight: 700; opacity: 1; }

/* Statement sections: the section line, one statement, then the text in one column. */
.gd-statement { background: var(--paper); color: var(--ink); padding: clamp(110px, 16vh, 200px) var(--gutter); }
.gd-statement--dark { background: var(--ink); color: var(--paper); }
.gd-h2 { grid-column: 1 / span 10; margin: clamp(40px, 5vw, 80px) 0 0; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.gd-statement .gd-read { margin-top: clamp(40px, 4.4vw, 72px); }
.gd-statement--dark .gd-read > p { color: rgba(241, 239, 233, .82); }

/* The chapter cards: a photograph each, the name below it. */
.gd-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(64px, 7vw, 110px); }
.gd-cards--more { margin-top: clamp(40px, 5vw, 72px); }
.gd-card { display: grid; align-content: start; gap: 10px; color: inherit; text-decoration: none; }
.gd-card-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 12px; background: #1b1b1a; }
.gd-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.gd-card.in .gd-card-img img, html:not(.js) .gd-card-img img { transform: none; }
a.gd-card:hover .gd-card-img img { transform: scale(1.03); }
.gd-card--next .gd-card-img img { filter: grayscale(1) brightness(.75); }
.gd-card-meta { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; opacity: .6; }
.gd-card-title { font: var(--type-h3); letter-spacing: var(--track-h3); transition: color .3s var(--ease); }
a.gd-card:hover .gd-card-title { color: var(--red); }
.gd-card--next .gd-card-title { opacity: .55; }
.gd-card-line { max-width: 26em; font: var(--type-small); opacity: .75; }

/* Get the guide: the front page's red section, the printed guide beside the form. */
.gd-printed { grid-column: 8 / -1; align-self: center; margin: clamp(40px, 6vw, 88px) 0 0; overflow: hidden; }
.gd-printed img { display: block; width: 100%; height: auto; scale: 1.05; }

/* The founder's view, over the city in motion. */
.gd-quote { position: relative; min-height: 80svh; display: flex; align-items: center; overflow: hidden; background: var(--ink); color: var(--paper); padding: clamp(110px, 16vh, 200px) var(--gutter); }
.gd-quote-img { position: absolute; inset: 0; overflow: hidden; }
.gd-quote-img img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; filter: brightness(.45); }
.gd-quote > .grid { position: relative; width: 100%; }
.gd-quote-fig { grid-column: 5 / span 7; margin: 0; }
.gd-quote-fig blockquote { margin: 0; }
.gd-quote-fig p { margin: 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); text-wrap: pretty; }
.gd-quote-fig figcaption { margin-top: 24px; font: var(--type-small); opacity: .8; }

/* The people: portraits in black and white, warming on hover. */
.gd-people { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(64px, 7vw, 110px); }
.gd-people--more { margin-top: clamp(40px, 5vw, 72px); }
.gd-person { display: grid; align-content: start; gap: 8px; color: inherit; text-decoration: none; }
.gd-person-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 12px; background: #1b1b1a; }
.gd-person-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.06); transition: transform 1.4s var(--ease), filter .6s var(--ease); }
.gd-person.in .gd-person-img img, html:not(.js) .gd-person-img img { transform: none; }
.gd-person:hover .gd-person-img img { transform: scale(1.03); filter: grayscale(0); }
.gd-person-name { font: var(--type-h3); letter-spacing: var(--track-h3); transition: color .3s var(--ease); }
.gd-person:hover .gd-person-name { color: var(--red); }
.gd-person-role { font: var(--type-small); opacity: .75; }

/* Chapter and interview openings: as a case page opens. */
.gd-page-title { grid-column: 1 / span 10; margin: clamp(40px, 6vw, 88px) 0 0; font: var(--type-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.gd-open .gd-facts { margin-top: clamp(56px, 7vw, 110px); }

/* A chapter's facts: photographs and number cards. */
.gd-bento-wrap { padding-bottom: 0; }
.gd-bento { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(250px, 24vw, 400px); gap: clamp(8px, 1vw, 14px); margin-top: clamp(40px, 5vw, 72px); }
.gd-bento--1 .b-a { grid-column: 1 / span 3; } .gd-bento--1 .b-b { grid-column: 4 / span 3; } .gd-bento--1 .b-c { grid-column: 7 / span 6; }
.gd-bento--1 .b-d { grid-column: 1 / span 6; } .gd-bento--1 .b-e { grid-column: 7 / span 3; } .gd-bento--1 .b-f { grid-column: 10 / span 3; }
.gd-bento--2 .b-tall { grid-column: 1 / span 3; grid-row: 1 / span 2; } .gd-bento--2 .b-wide { grid-column: 4 / span 6; } .gd-bento--2 .b-s1 { grid-column: 10 / span 3; }
.gd-bento--2 .b-s2 { grid-column: 4 / span 3; } .gd-bento--2 .b-s3 { grid-column: 7 / span 3; } .gd-bento--2 .b-s4 { grid-column: 10 / span 3; }
.gd-b { position: relative; margin: 0; overflow: hidden; }
.js .gd-b { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js .gd-b.in { opacity: 1; transform: none; }
.gd-b--photo { background: #1b1b1a; }
.gd-b--photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.8s var(--ease); transition-delay: var(--d, 0ms); }
.gd-b--photo.in img, html:not(.js) .gd-b--photo img { transform: none; }
.gd-b--stat { display: flex; flex-direction: column; padding: clamp(22px, 2.2vw, 36px); background: var(--red); color: var(--ink); }
.gd-b-title { margin: 0; max-width: 16em; font: var(--type-h3); letter-spacing: var(--track-h3); }
.gd-b-num { display: flex; flex-direction: column; margin: auto 0 0; font: var(--type-h2); letter-spacing: var(--track-h2); }
.gd-b-unit { margin-top: 10px; font: var(--type-body); letter-spacing: 0; }
.gd-b-note { margin: 14px 0 0; max-width: 24em; font: var(--type-small); }
.b-tall .gd-b-num { margin-top: 18px; }
.gd-b-phone { display: block; width: 74%; max-width: 300px; margin: auto auto calc(-1 * clamp(22px, 2.2vw, 36px)); transform: translateY(18%); transition: transform 1.4s var(--ease) .3s; }
.gd-b.in .gd-b-phone, html:not(.js) .gd-b-phone { transform: none; }
.gd-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: auto; max-width: 280px; }
.gd-dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(11, 11, 10, .26); }
.gd-dots i.is-dk { background: var(--paper); }
.js .gd-dots i { transform: scale(0); transition: transform .5s var(--spring); transition-delay: calc(300ms + var(--i) * 32ms); }
.js .gd-b.in .gd-dots i { transform: scale(1); }
.gd-b-key { display: flex; align-items: center; gap: 8px; }
.gd-b-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); }
.gd-b--donut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 18px; }
.gd-b--donut .gd-b-title { grid-column: 1 / -1; }
.gd-donut { align-self: end; width: 100%; max-width: 170px; transform: rotate(-90deg); }
.gd-arc { fill: none; stroke-width: 18; stroke-dasharray: var(--len) 100; stroke-dashoffset: var(--off); }
.js .gd-arc { stroke-dasharray: 0 100; transition: stroke-dasharray 1s var(--ease); transition-delay: calc(400ms + var(--i) * 260ms); }
.js .gd-b.in .gd-arc { stroke-dasharray: var(--len) 100; }
.gd-arc--0 { stroke: var(--ink); } .gd-arc--1 { stroke: var(--paper); } .gd-arc--2 { stroke: #aa3621; }
.gd-keys { align-self: end; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font: var(--type-small); }
.gd-keys li { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: baseline; }
.gd-keys i { width: 10px; height: 10px; }
.gd-keys b { grid-column: 2; font-weight: 700; }
.gd-key--0 i { background: var(--ink); } .gd-key--1 i { background: var(--paper); } .gd-key--2 i { background: #aa3621; }
.gd-sources { grid-column: 1 / -1; margin: 18px 0 0; font: var(--type-small); opacity: .6; }

/* Reading sections: the case pages' chapter row — the label to the left, the text in one column. */
.gd-bento-wrap + .gd-reading, .gd-reading + .gd-reading { padding-top: clamp(90px, 12vh, 150px); }
.gd-moves { margin: 1.6em 0; padding: 0; list-style: none; border-top: 1px solid rgba(11, 11, 10, .18); }
.gd-moves li { display: grid; grid-template-columns: 3em 9em minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(11, 11, 10, .18); font: var(--type-read); }
.gd-move-n { font: var(--type-label); letter-spacing: var(--track-label); opacity: .5; }
.gd-moves b { font-weight: 700; }

/* An interview: the portrait stays beside the text while it is read. */
.gd-side { grid-column: 1 / span 3; }
.gd-portrait { position: sticky; top: 110px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #1b1b1a; }
.gd-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-bio { margin: 0 0 clamp(40px, 4vw, 64px); padding: 22px 0 26px; border-top: 1px solid rgba(11, 11, 10, .18); border-bottom: 1px solid rgba(11, 11, 10, .18); }
.gd-bio h2, .gd-refs h2 { margin: 0 0 12px; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.gd-bio p { margin: 0 0 .8em; font: var(--type-small); }
.gd-bio p:last-child { margin-bottom: 0; }
.gd-q { margin: 2em 0 .8em; font: var(--type-h3); letter-spacing: var(--track-h3); text-wrap: balance; }
.gd-bio + .gd-q, .gd-article > .gd-q:first-child { margin-top: 0; }
.gd-pull { margin: 2em 0; padding-top: 22px; border-top: 2px solid var(--red); }
.gd-pull blockquote { margin: 0; }
.gd-pull p { margin: 0; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); text-wrap: pretty; }
.gd-pull p::before { content: "“"; } .gd-pull p::after { content: "”"; }
.gd-pull figcaption { margin-top: 14px; font: var(--type-small); opacity: .7; }
.gd-points { margin: 1.4em 0; padding: 0; list-style: none; }
.gd-points li { padding: 18px 0; border-top: 1px solid rgba(11, 11, 10, .18); font: var(--type-read); }
.gd-points b { display: block; margin-bottom: 6px; font: var(--type-h3); letter-spacing: var(--track-h3); }
.gd-list { padding-left: 1.2em; }
.gd-refs { margin-top: 2.6em; padding-top: 22px; border-top: 1px solid rgba(11, 11, 10, .18); }
.gd-refs ol { margin: 0; padding-left: 1.3em; font: var(--type-small); opacity: .7; overflow-wrap: anywhere; }
.gd-refs li + li { margin-top: 8px; }

@media (max-width: 900px) {
  .gd-read, .gd-h2, .gd-sub, .gd-page-title, .gd-quote-fig, .gd-printed, .gd-side, .gd-hero-main, .gd-credits { grid-column: 1 / -1; }
  .gd-credits { margin-top: 44px; }
  .gd-chapter .gd-read { grid-column: 1 / -1; }
  .gd-cards { grid-template-columns: 1fr 1fr; }
  .gd-people { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .gd-person { scroll-snap-align: start; }
  .gd-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .gd-bento .gd-b { grid-column: auto; grid-row: auto; min-height: 250px; }
  .gd-bento .gd-b--photo { grid-column: 1 / -1; aspect-ratio: 16 / 10; min-height: 0; }
  .gd-bento .b-tall { grid-column: 1 / -1; min-height: 480px; }
  .gd-b-phone { width: 52%; max-width: 220px; }
  .gd-portrait { position: static; max-width: 300px; margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .gd-cards { grid-template-columns: 1fr; }
  .gd-bento { grid-template-columns: 1fr; }
  .gd-bento .gd-b { grid-column: 1 / -1; }
  .gd-people { grid-auto-columns: 78%; }
  .gd-moves li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .gd-moves li > span:last-child { grid-column: 2; }
}

/* The services graphics (phone, and the review page). Paper lines on ink, one red; each plays once it's half on screen. */
.sv-art { --acc: var(--red); }
.sv-art .art { stroke-width: 2; }
@keyframes burst { 0% { scale: .6; opacity: .9; } 100% { scale: 3.4; opacity: 0; } }
.sv-art .burst { fill: none; stroke: var(--acc); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* Decision — approved: many lines fall into one; the rest fade; a red line drops to the dot. */
.sv-art .art-decision .opts path { transition: stroke-dashoffset 1.2s var(--ease-io) calc(var(--n) * 60ms + .15s), opacity .9s var(--ease) 1.95s; }
.sv-art.in .art-decision .opts path:not(.keep) { opacity: .16; }
.sv-art .art-decision .keep { stroke-width: 3; }
.sv-art .art-decision .pick { stroke-width: 7; transition: stroke-dashoffset .6s var(--ease-io) 2.05s; }
.sv-art .art-decision .seal { transition: scale .8s var(--spring) 2.5s; }
.sv-art.in .art-decision .burst { animation: burst 1.5s var(--ease) 2.7s forwards; }
/* Position — the dots arrive one by one; the crosshair searches, slows, and locks right of centre and low; the red dot lands there. */
.sv-art .art-position .dots { opacity: 1; }
.sv-art .art-position .dots circle { opacity: 0; scale: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s var(--ease) calc(var(--o) * 9ms), scale .55s var(--spring) calc(var(--o) * 9ms); }
.sv-art.in .art-position .dots circle { opacity: .5; scale: 1; }
.sv-art.in .art-position .dots circle:not(.ax) { animation: pos-dim .9s var(--ease) 3.5s forwards; }
.sv-art.in .art-position .dots circle.ax { animation: pos-ax .6s var(--ease) 3.45s forwards; }
@keyframes pos-dim { to { opacity: .2; } }
@keyframes pos-ax { to { opacity: 1; } }
.sv-art .art-position .cx-h, .sv-art .art-position .cx-v { transition: stroke-dashoffset .9s var(--ease-io) .5s; }
.sv-art.in .art-position .cx-v { animation: scan-x 2.8s var(--ease-io) .6s both; }
.sv-art.in .art-position .cx-h { animation: scan-y 2.8s var(--ease-io) .6s both; }
@keyframes scan-x { 0% { transform: translateX(-175px); } 28% { transform: translateX(62px); } 52% { transform: translateX(-118px); } 76% { transform: translateX(26px); } 100% { transform: none; } }
@keyframes scan-y { 0% { transform: translateY(-235px); } 28% { transform: translateY(120px); } 52% { transform: translateY(-150px); } 76% { transform: translateY(45px); } 100% { transform: none; } }
.sv-art .art-position .pos { transition: scale .8s var(--spring) 3.4s; }
.sv-art.in .art-position .r1 { animation: burst 1.6s var(--ease) 3.5s forwards; }
/* Position — orbits: the orbits draw in, the dots appear on them, the red dot lands; then (script) the dots circle slowly,
   now and then one gives a short glow of light, and the red dot pulses as if it received it. The orbit lines never move. */
.sv-art .art-orbits .orb { fill: none; stroke-width: 1.2; opacity: .36; transition: stroke-dashoffset 1.6s var(--ease-io) calc(.1s + var(--i) * 110ms); }
.sv-art .art-orbits .odot { stroke: none; fill: var(--paper); opacity: 0; transition: opacity .8s var(--ease) calc(1.3s + var(--n) * 70ms); }
.sv-art.in .art-orbits .odot { opacity: 1; }
.sv-art .art-orbits .ohalo { stroke: none; fill: var(--paper); opacity: 0; }
.sv-art .pulses circle { fill: #fff; stroke: none; }
.sv-art .art-orbits .pos { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .8s var(--spring) 1.9s; }
.sv-art.in .art-orbits .pos { scale: 1; }
.sv-art.live .art-orbits .pos { transition: none; }
/* Position — a living organism: the layers grow out from the core and keep flowing (script); the core appears as they do. */
.sv-art .art-organism .layers path { fill: none; stroke-width: 1.4; opacity: 0; transition: opacity 1.2s var(--ease); }
.sv-art.in .art-organism .layers path { opacity: var(--b); }
.sv-art.live .art-organism .layers path { transition: none; }
.sv-art .art-organism .pos { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .7s var(--spring) 1.1s; }
.sv-art.in .art-organism .pos { scale: 1; }
/* Position — aiming: the cross draws in from the edges, the rings draw out from the centre,
   and the red dot spirals in from outside to rest in the middle. The innermost ring brightens round it. */
.sv-art .art-orbit .cross path { stroke-width: 1.4; opacity: .42; transition: stroke-dashoffset 1.2s var(--ease-io) calc(.15s + var(--i) * 90ms); }
.sv-art .art-orbit .rings circle { fill: none; stroke-width: 1.6; opacity: .5; transition: stroke-dashoffset 1.3s var(--ease-io) calc(.1s + var(--i) * 110ms), opacity 1s var(--ease) 3s, stroke-width 1s var(--ease) 3s; }
.sv-art.in .art-orbit .rings circle { opacity: .18; }
.sv-art.in .art-orbit .rings .inner { opacity: 1; stroke-width: 2.4; }
.sv-art .art-orbit .orbit { transform-origin: 160px 160px; }
.sv-art.in .art-orbit .orbit { animation: orbit-turn 2.4s cubic-bezier(.3, 0, .15, 1) .8s both; }
.sv-art.in .art-orbit .reach { animation: orbit-in 2.4s cubic-bezier(.45, 0, .2, 1) .8s both; }
@keyframes orbit-turn { from { rotate: -420deg; } to { rotate: 0deg; } }
@keyframes orbit-in { from { translate: 150px 0; } to { translate: 0 0; } }
.sv-art .art-orbit .pos { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .6s var(--spring) .8s; }
.sv-art.in .art-orbit .pos { scale: 1; }
.sv-art.in .art-orbit .burst { animation: burst 1.5s var(--ease) 3.2s forwards; }
/* Action today — "Aa" over three bars. */
.sv-art .art-brand .aa { font-size: 212px; transform: translateY(46px); transition: opacity 1.1s var(--ease) 1s, transform 1.5s var(--ease) 1s; }
.sv-art.in .art-brand .aa { transform: none; }
/* Action A — one into many. */
.sv-art .art-many .seal { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .8s var(--spring) .15s; }
.sv-art.in .art-many .seal { scale: 1; }
.sv-art.in .art-many .burst { animation: burst 1.4s var(--ease) .4s forwards; }
.sv-art .art-many .trunk { stroke: var(--acc); stroke-width: 7; transition: stroke-dashoffset .7s var(--ease-io) .55s; }
.sv-art .art-many .branches path { transition: stroke-dashoffset 1s var(--ease-io) calc(1.15s + var(--n) * 90ms); }
.sv-art .art-many .made g { stroke: none; fill: currentColor; transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .7s var(--spring) calc(2s + var(--n) * 110ms); }
.sv-art.in .art-many .made g { scale: 1; }
.sv-art .art-many .flow circle { stroke: none; fill: var(--acc); opacity: 0; }   /* each one shows when its run begins (script) */
/* Action B — build. */
.sv-art .art-build .b { stroke: none; fill: currentColor; opacity: 0; transform: translateY(-520px); transition: transform .75s cubic-bezier(.3, 1.3, .5, 1) calc(.2s + var(--n) * 75ms), opacity .2s linear calc(.2s + var(--n) * 75ms); }
.sv-art.in .art-build .b { opacity: 1; transform: none; }
.sv-art .art-build .top { fill: var(--acc); }
.sv-art.in .art-build .burst { animation: burst 1.4s var(--ease) 2.8s forwards; }
/* Action C — align. */
.sv-art .art-align .marks line { stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; rotate: var(--a); opacity: .85; transition: rotate 1.1s var(--spring) calc(.3s + var(--r) * 90ms + var(--j) * 1ms), stroke .5s var(--ease) calc(2.6s + var(--r) * 60ms), stroke-width .5s var(--ease) calc(2.6s + var(--r) * 60ms); }
.sv-art.in .art-align .marks line { rotate: 0deg; }
.sv-art.in .art-align .marks .spine { stroke: var(--acc); stroke-width: 4.5; }
.sv-art .art-align .seal { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .8s var(--spring) 3.5s; }
.sv-art.in .art-align .seal { scale: 1; }
.sv-art.in .art-align .burst { animation: burst 1.4s var(--ease) 3.7s forwards; }
/* Action — one into many: the red dot drops one line, which opens into a fan across the frame. */
.sv-art .art-flow .seal { stroke: none; fill: var(--acc); transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .8s var(--spring) .15s; }
.sv-art.in .art-flow .seal { scale: 1; }
.sv-art.in .art-flow .burst { animation: burst 1.4s var(--ease) .4s forwards; }
.sv-art .art-flow .trunk { stroke: var(--acc); stroke-width: 7; transition: stroke-dashoffset .7s var(--ease-io) .5s; }
.sv-art .art-flow .fan path { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, 0, 1) calc(1.05s + var(--n) * 75ms), opacity 1.2s var(--ease) 2.7s; }
.sv-art.in .art-flow .fan path { opacity: .3; }
/* The pulse (script): once a graphic has drawn itself, its red dot beats and signals run along its lines. */
.sv-art .pulses { mix-blend-mode: screen; }
.sv-art .pulses path { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.sv-art .pulses path.core { stroke: #fff; }
.sv-art.live .art-decision .opts path, .sv-art.live .art-flow .fan path, .sv-art.live .art-position .dots circle, .sv-art.live .art-orbit .rings circle, .sv-art.live .art-orbit .cross path,
.sv-art.live .seal, .sv-art.live .pos, .sv-art.live .burst, .sv-art.live .ring { transition: none; animation: none; }
/* Replaying: jump back to the start without playing anything backwards. */
.sv-art.reset, .sv-art.reset * { transition: none !important; animation: none !important; }

/* Section 03 on desktop: the same three graphics as on phones, in their columns (they draw in, then pulse — pulse.js).
   One box height for all three, centred; each graphic sized to its visual weight (the fan is dense, the orbits are round). */
.offer .p-art.sv-art { max-width: none; height: clamp(300px, 28vw, 420px); margin: 0 0 30px; display: flex; align-items: center; justify-content: center; }
.offer .sv-art .art { flex: none; width: auto; max-width: 100%; height: 100%; }
.o-action .sv-art .art { height: 86%; }
.o-position .sv-art .art { height: 90%; }

/* ───────────────────────── Front page on phones (≤699px). Desktop is unchanged; m-only / d-only switch the two versions. ───────────────────────── */
.feat-deck { display: contents; }
@media (min-width: 700px) { .m-only { display: none !important; } }
@media (max-width: 699px) { .d-only { display: none !important; } }

@media (max-width: 699px) {
  /* One tighter rhythm between sections. */
  .s-what { padding-top: 112px; padding-bottom: 96px; }
  .s-buy, .s-japan, .s-close { padding-top: 88px; padding-bottom: 96px; }
  .s-work, .s-where { padding-top: 88px; padding-bottom: 96px; }
  .s-when { display: none; }

  /* Decks: swipe sideways, one card at a time; the next one peeks in. */
  [data-deck] {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  [data-deck]::-webkit-scrollbar { display: none; }
  [data-deck] > * { flex: 0 0 calc(100vw - 2 * var(--gutter) - 40px); scroll-snap-align: start; scroll-snap-stop: always; }
  .deck-dots { display: flex; gap: 8px; }
  .deck-dots span { width: 28px; height: 2px; background: currentColor; opacity: .25; transition: opacity .4s var(--ease), background-color .4s var(--ease); }
  .deck-dots span.on { opacity: 1; background: var(--red); }

  /* Cards in a deck sit back a little until they're in front (set from the swipe in the script). */
  [data-deck] > * { transform: scale(calc(1 - var(--d, 0) * .06)); opacity: calc(1 - var(--d, 0) * .5); }

  /* 03 Services on phones: one step at a time, downwards, on the ink. Each graphic first fills the screen;
     scrolling on, it moves up and makes room for the step, its name and the question.
     What you leave with is one tap further down. */
  .sv-steps { grid-column: 1 / -1; margin-top: 8px; }
  .sv-step { --acc: var(--red); }
  .sv-step + .sv-step { margin-top: 24px; }
  .sv-pin { position: relative; }
  .sv-art { position: sticky; top: 0; height: 100svh; margin: 0 calc(-1 * var(--gutter)); display: grid; place-items: center; overflow: hidden; pointer-events: none; }
  .sv-art .art { width: 100vw; max-width: none; transform: translateY(var(--ty, 0px)) scale(var(--s, 1.1)); transform-origin: 50% 50%; }
  .sv-copy { position: relative; margin-top: 30svh; padding-bottom: 6px; }
  .sv-copy .offer-step { margin: 0; }
  .sv-step.is-on .offer-step { border-color: var(--red); }
  .sv-step.is-on .offer-step i { rotate: 90deg; }
  .sv-copy h3 { margin: 24px 0 0; font: var(--type-h2); letter-spacing: var(--track-h2); }
  .sv-copy .ask { margin-top: 18px; }
  .sv-copy .ask .q { max-width: none; font: var(--type-serif-m); letter-spacing: var(--track-serif-m); }
  .sv-step > .m-toggle { justify-content: space-between; width: 100%; margin-top: 30px; padding: 18px 0; border-top: 1px solid rgba(241, 239, 233, .2); }
  .sv-step > .m-toggle i { color: var(--red); }
  .sv-facts { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
  .sv-facts > div { min-height: 0; overflow: hidden; }
  .sv-step.is-open .sv-facts { grid-template-rows: 1fr; }
  .sv-facts .deliv { gap: 12px; margin: 0; padding: 8px 0 18px; }
  .sv-facts .deliv li { max-width: none; padding-left: 30px; font: var(--type-h3); letter-spacing: var(--track-h3); color: var(--paper); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
  .sv-facts .deliv li::before { top: .55em; width: 16px; height: 3px; }
  .sv-step.is-open .deliv li { opacity: 1; transform: none; }
  .sv-step.is-open .deliv li:nth-child(1) { transition-delay: .15s; }
  .sv-step.is-open .deliv li:nth-child(2) { transition-delay: .21s; }
  .sv-step.is-open .deliv li:nth-child(3) { transition-delay: .27s; }
  .sv-step.is-open .deliv li:nth-child(4) { transition-delay: .33s; }
  .sv-step.is-open .deliv li:nth-child(5) { transition-delay: .39s; }

  /* 04 Japan: the product, with what you leave with one tap away; the guide's cover carries its own title. */
  .s-japan .jp-art { display: none; }
  .s-japan .jp-offer, .s-japan .jp-free { margin-top: 56px; row-gap: 22px; }
  .s-japan .jp-free { margin-top: 40px; }
  .s-japan .jp-offer .offer-facts { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  .s-japan .jp-offer .offer-facts > div { min-height: 0; overflow: hidden; }
  .s-japan .jp-offer .offer-facts dt { display: none; }
  .s-japan .jp-offer.is-open .offer-facts { grid-template-rows: 1fr; }
  .m-toggle {
    display: flex; align-items: center; gap: .45em; padding: 10px 0; border: 0; background: none; color: inherit; cursor: pointer;
    font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; text-align: left;
  }
  .m-toggle i { display: block; height: 16px; font: 300 26px/16px var(--serif); font-style: normal; rotate: 45deg; transition: rotate .8s var(--spring); }
  .m-toggle[aria-expanded="true"] i { rotate: 0deg; }
  .s-japan .m-toggle { margin: -6px 0 0; }
  .s-japan .m-toggle i { color: var(--paper); }
  .s-japan .jp-free .guide-cover-wrap { width: 72%; }
  .s-japan .jp-free-copy h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .s-japan .jp-free-line { margin-top: 8px; }

  /* 06 Work: the vertical reel, full width, like a story. Tap for sound; the bottom bar shows how far it has played. */
  .reel-track { margin-top: 36px; padding: 36px 0 76px; }
  .reel-box { width: min(100vw, calc((100svh - 96px) * 9 / 16)); aspect-ratio: 9 / 16; }
  .reel-cap { padding: 0 var(--gutter); top: calc(100% + 28px); }
  .reel-prog { position: absolute; left: 0; top: calc(100% + 9px); width: 100%; height: 3px; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: var(--ui, 1); pointer-events: none; }
  .reel-play { transition: opacity .45s var(--ease), scale .45s var(--ease), background-color .3s var(--ease); }
  .reel-box.is-loud .reel-play { opacity: 0; scale: .9; }
  .feat-deck { margin-top: 24px; padding: 0 var(--gutter); }
  .feat-deck > .feat { display: block; margin: 0 !important; padding: 0 !important; }
  .feat-deck .feat-copy { margin-top: 26px; }
  .feat-deck .feat-line { max-width: none; }
  .s-work .deck-dots { margin: 34px var(--gutter) 0; }
  .s-work .work-all { margin-top: 0; }
  .s-work .work-all .feat-link { margin-top: 44px; }

  /* 07 About: the name gets the whole screen. It lands, steps back, and leaves the twenty. */
  .s-where .meet { height: 400px; margin: 44px 0 52px; }
  .where-why { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; margin-top: 24px; }
  .where-name { font: var(--type-h1); letter-spacing: var(--track-h1); }
  .where-name.is-set .w:not(.keep) .wi { transition-delay: calc(var(--i) * 55ms); }
  .where-name.is-final .w.keep:not(.last) .wi { opacity: var(--dim); color: inherit; transition-delay: calc((var(--i) - 14) * 110ms); }

  /* 08 Contact: the moment to call, then the question. */
  .s-close .when-big { margin-top: 40px; }
  .s-close .close-title { margin-top: 56px; font: var(--type-h2); letter-spacing: var(--track-h2); }
  .s-close .qual { margin-top: 40px; }
  .s-close .close-japan { margin-top: 64px; }
}

/* ───────── Cookies: the consent banner and the footer's “Cookie settings” ───────── */
.consent {
  position: fixed; z-index: 95; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 32px)); padding: 22px 22px 20px; background: var(--ink); color: var(--paper);
  box-shadow: 0 0 0 1px rgba(241, 239, 233, .14), 0 24px 60px rgba(0, 0, 0, .35);
  opacity: 0; translate: 0 12px; transition: opacity .4s var(--ease), translate .4s var(--ease);
}
.consent.is-on { opacity: 1; translate: 0 0; }
.consent-t { margin: 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.consent-p { margin: 10px 0 0; font: var(--type-small); color: rgba(241, 239, 233, .82); text-wrap: pretty; }
.consent-p a { color: inherit; text-decoration-color: var(--red); text-underline-offset: .18em; }
.consent-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.consent-b button {   /* Accept and Decline weigh the same */
  padding: 13px 10px; border: 1px solid rgba(241, 239, 233, .55); background: none; color: inherit; cursor: pointer;
  font: var(--type-ui); letter-spacing: var(--track-ui); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.consent-b button:hover, .consent-b button:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); outline: none; }
.foot-nav .foot-consent { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: color .3s var(--ease); }
.foot-nav .foot-consent:hover { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; translate: none; } }