/* Slide 01: Cover. Ink page, the team photograph printed whole to the right
   and bottom stage edges, the three line headline over ceiling only. */
.s01 .shot { display: block; max-width: none; }
.s01 .line { display: block; white-space: nowrap; }
.s01 h1 { text-wrap: nowrap; }
.s01 .mark { width: auto; }
.s01 .lede { text-wrap: wrap; }
/* The photograph fades its own top and left edges to nothing, so it grows out
   of the ink with no seam. The mask is alpha only and scales with the image,
   so no edge can show while it settles. Top held clear for 160px then full by 350px (stage
   y 290 to 480), left over 160px (stage x 480 to 640, the dark door). */
.s01 .shot {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 160px, #000 350px), linear-gradient(90deg, transparent 0, #000 160px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, transparent 160px, #000 350px), linear-gradient(90deg, transparent 0, #000 160px);
  mask-composite: intersect;
}

/* Slide 02: The team today. The photograph runs full bleed, cropped low so
   the people fill the frame and the canopy is a band, not half the picture.
   The three beats of the headline sit on the ground in front of the team,
   on a bottom scrim that starts below the front row. Each beat is a rule
   that draws, then two lines that rise out from behind their own baseline. */
.s02 .beats { width: 1920px; height: 1080px; max-width: none; pointer-events: none; }
.s02 .beat { position: absolute; top: 826px; width: 520px; display: block; }
.s02 .b1 { left: 120px; --t: 900ms; }
.s02 .b2 { left: 700px; --t: 1500ms; }
.s02 .b3 { left: 1280px; --t: 2100ms; }

.s02 .bar {
  display: block; width: 96px; height: 6px; margin-bottom: 26px;
  background: var(--peri);
  transform-origin: 0 50%;
  animation: draw-x 700ms var(--ease) var(--t) backwards;
}
/* Each line is a window one line tall; the words rise into it. */
.s02 .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.s02 .line > span {
  display: block; white-space: nowrap;
  font-size: 90px; line-height: 1.0; letter-spacing: -0.035em;
  color: var(--pearl);
  animation: s02-up 1100ms var(--ease) calc(var(--t) + 120ms) backwards;
}
.s02 .line + .line > span { animation-delay: calc(var(--t) + 240ms); }
@keyframes s02-up { from { translate: 0 112%; opacity: 0; } 60% { opacity: 1; } }

/* Slide 03: Our journey. Four photographs stand on one line, at their natural ratio.
   The line is at y 660. The first photo sits on c1 (x 120) and the last on c10
   (x 1398); the middle two float between them so the three gutters are equal. */

/* The line draws first, then each photo and its label rise as the line reaches them. */
/* The timeline line leaves the page with the last photograph: x 120 to 1920.
   The keel stays at 120 to 1800, it is page furniture and not part of the timeline. */
.s03 .line { --y: 660px; --w: 1800px; --d: 300ms; }
.s03 .shot,
.s03 .year,
.s03 .span,
.s03 .note { --d: 300ms; --step: 120ms; }

/* Photographs: bottoms on the line, height follows the natural ratio, never past 1:1.
   They climb left to right, so the row reads as growth: 186, 240, 280, 348 tall
   (tops at y 474, 420, 380, 312), each step a clear rise on the one before, so the
   row reads as one even crescendo. The second is held to 360 wide to make its step;
   it keeps its left edge at 465, under its label. The last is the largest and runs
   off the grid to the stage edge at x 1920, and the line runs off with it; its
   caption still ends by x 1800. */
.s03 .shot { position: absolute; bottom: 420px; height: auto; display: block; }
.s03 .p1 { left: 120px;  width: 280px; }
.s03 .p2 { left: 465px;  width: 360px; }
.s03 .p3 { left: 932px;  width: 402px; }
.s03 .p4 { left: 1398px; width: 522px; }

/* Years hang under the line, cap line y 690, baseline y 750. */
.s03 .year { --y: 690px; }
.s03 .span { --y: 750.5px; --lh: 1; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); white-space: nowrap; }

.s03 .k1 { --x: 120px; }
.s03 .k2 { --x: 465px; }
.s03 .k3 { --x: 932px; }
.s03 .k4 { --x: 1398px; }

/* Captions, each no wider than its photograph. The last stays at 402 so it ends
   inside the grid at x 1800, not under the part of the photo that leaves it. */
.s03 .note { --y: 790px; text-wrap: balance; }
.s03 .n1 { --w: 280px; }
.s03 .n2 { --w: 360px; }
.s03 .n3 { --w: 402px; }
.s03 .n4 { --w: 402px; }

/* Slide 04: From web to offshoring. Styles that only this slide uses.
   The one black and white photograph, printed whole (1800 by 1350 shown at
   1200 by 900) hard against the top and right stage edges. Text column
   x 120 to 640. */

/* Split page: keel and folio run under the text column only. */
.s04 { --keel-w: 520px; }

/* The photograph: natural 4:3, no crop. */
.s04 .photo { --x: 720px; --y: 0px; --w: 1200px; --h: 900px; }
/* A one pixel edge on the two sides that meet the page, left and bottom. */
.s04 .photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-left: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}

/* Headline: two lines, cap line 96, with the other split pages. */
.s04 h2 { --y: 96px; --max: 520px; }

/* The three paragraphs. */
.s04 .story { --x: 120px; --y: 256px; --w: 520px; }
/* The closing sentence: Manrope 700 in ink, inside its paragraph. */
.s04 .body b.still { font-weight: 700; }

/* Slide 05: Full circle. The deck's one fig-xl, over a three figure ledger. */

/* Standfirst cap line at 226, not the brief's 214: 226 is the placement
   SYSTEM.md gives for a standfirst under a one line d-88, and it leaves the
   hero evenly spaced between the standfirst and the opener. */
.s05 .standfirst { --y: 226px; --max: 1300px; }

/* Hero: cap line 380, baseline 625, sitting evenly between the standfirst
   and the opener. Hung 16 left so the stem of the 1 (not its side bearing)
   stands on the x 120 margin under the headline. Counts first, alone. */
.s05 .hero { --x: 104px; --y: 380px; --d: 150ms; --dur: 1200ms; }
/* Label sets flush left on c10, close beside the plus, so it reads as the
   name of the figure. Its last baseline hangs on the figure's baseline. */
.s05 .hero-lab { --x: 1398px; --w: 400px; --y: 625px; --d: 500ms; text-align: left; }

/* The opener closes the hero and starts the ledger. */
.s05 .opener { --y: 700px; --d: 600ms; }

/* Three figures on c1, c5, c9, cap line 740, labels from 866. */
.s05 .sub-fig { --y: 740px; --d: 800ms; --dur: 800ms; }
.s05 .sub-lab { --y: 866px; --w: 480px; --d: 800ms; --step: 60ms; text-wrap: balance; }
.s05 .f1 { --x: 120px;  --i: 0; }
.s05 .f2 { --x: 688px;  --i: 1; }
.s05 .f3 { --x: 1256px; --i: 2; }
.s05 .sub-fig.f2, .s05 .sub-fig.f3 { --i: 0; }
/* Figures that open with a 1 hang 5 left for the same optical reason. */
.s05 .sub-fig.f1 { --x: 115px; }
.s05 .sub-fig.f3 { --x: 1251px; }

/* Slide 06: Recent work. A poster headline on pearl beside a straight proof
   sheet: three columns of live sites, 410 by 256 (16:10, the screenshots'
   own ratio, so nothing is cropped), 24px pearl gutters (the deck gutter),
   bleeding off the top and bottom of the stage. Columns at x 642, 1076, 1510.
   Fifteen slots, eleven sites, so four repeats are forced. The rules for them:
   a repeat is only ever an edge fragment, dark or photographic, with no headline
   and no cut face; it never shares a column with its full tile and sits as far
   from it as the sheet allows.
   Column tops (inline --y) are -130, -70, -223 and the order is chosen with them:
   col 1  hitl foot 126 (dark, no headline) | otg | clinicadmin | balanga | masterton top 90 (nav and ridge, headline starts below the stage)
   col 2  a1 at 186 of 256 (only its white bar is lost) | hive | dp | ube | otg nav strip 30
   col 3  dp foot 33 | masterton | yoonet | hitl | kshe at 183 of 256 (the script headline clears the stage edge)
   The 24px gutter is what makes this possible: at 12px one column has to carry
   two fragments of about 125px, and no site has a headline free top that tall.
   Change a --y or the order and re-check every edge against these rules. */
.s06 { --keel-w: 480px; --owner-r: 1320px; }   /* keel under the text column only, x 120 to 600; draft pill there too (right edge x 600), off the proof sheet */
.s06 h2 { text-wrap: nowrap; }            /* four forced lines, never rebalanced */
.s06 .col { display: grid; row-gap: 24px; }
.s06 .col img { display: block; width: 410px; height: 256px; object-fit: cover; object-position: top; }
/* Edge at ink 20%, a step up from the shared 14%. The --ink-20 token (#e5e9f2) is lighter than that
   and vanishes against pearl, so the strength comes from ink itself. */
.s06 .col img { outline-color: color-mix(in srgb, var(--ink) 20%, transparent); }

/* Slide 07: Depth of work. A wall of 48 sites as 60 tiles: five rows of six
   desktop and six mobile screens on one row height of 124, x 120 to 1800,
   y 286 to 962. Rows one and two pair each flagship site's desktop with its
   own mobile. Rows three to five are 36 further sites. */
.s07 .tile { position: absolute; height: 124px; display: block; object-fit: cover; object-position: top; --step: 110ms; --d: 250ms; }

/* Slide 07b: How we deliver. Five stops on one route, y 560, on a 340 pitch
   from x 144. Step names and one line each hang under their stop. */
.s07b .plot { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.s07b .route .leg { fill: none; stroke: var(--ink); stroke-width: 5; }
.s07b .route .stop { fill: var(--page); stroke: var(--ink); stroke-width: 5; }
.s07b .route .stop.home { fill: var(--peri); stroke: none; }

.s07b .step {
  --y: 626px; --w: 320px; --lh: 1.04;
  font-size: 52px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg);
}
.s07b .desc { --y: 700px; --w: 300px; text-wrap: balance; }


/* Slide 08: Where Ben sits. The podium photograph runs full bleed. An ink
   scrim covers the flag side and clears before Ben, who stands at the right.
   Headline across the top, standfirst in the left column, the venn between
   the copy and Ben. The core is the true overlap of all three circles, cut
   with nested clip paths. */
.s08 > h2 { --y: 96px; --max: 1300px; }
.s08 .standfirst { --y: 290px; --max: 1120px; color: var(--fg-soft); }

.s08 .plot { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.s08 .tints circle { fill: var(--peri); fill-opacity: 0.2; --step: 150ms; }
.s08 .rings circle { fill: none; stroke: var(--peri); stroke-width: 4px; --step: 150ms; }

/* The middle: all three at once. Pearl on the ink scrim. */
.s08 .core { --d: 1100ms; --dur: 500ms; }
.s08 .core circle { fill: var(--pearl); }
.s08 .core-t {
  font-size: 40px; font-weight: 800; letter-spacing: -0.03em;
  fill: var(--ink); text-anchor: middle;
}
.s08 .lab-t {
  font-size: 28px; font-weight: 700; letter-spacing: -0.01em;
  fill: var(--pearl); text-anchor: middle;
  --d: 600ms; --step: 150ms; --dur: 500ms;
}

/* Slide 10: Ben and Gav. A quiet page: what they share on the left,
   two lanes with no overlap on the right. */

/* Left margin column, c1 to c3: the three shared things as a ledger on one even
   pitch of 200. The three title cap lines sit at y 350, 550 and 750, so the first
   shares the cap line of the two names and the last caption ends at y 826. A
   hairline sits 34 above rows two and three, at y 516 and y 716; the second is
   the lanes' third role hairline carried across. */
.s10 .item { --x: 120px; --w: 402px; --h: 120px; }
.s10 .item.one { --y: 350px; }
.s10 .item.two { --y: 550px; }
.s10 .item.three { --y: 750px; }
.s10 .item .title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  --lh: 1.15;
  color: var(--fg);
}
.s10 .item .line { --x: 0px; --y: 38px; --w: 402px; text-wrap: pretty; }
/* Row one only: balanced, so it breaks after "and" and leaves no short tail.
   Row two already breaks evenly and stays on pretty. */
.s10 .item.one .line { text-wrap: balance; }
.s10 .r2 { --x: 120px; --y: 516px; --w: 402px; }
.s10 .r3 { --x: 120px; --y: 716px; --w: 402px; }

/* The split between the two lanes. It runs from the names' cap line to the
   baseline of the last role, y 852. */
.s10 .split { --x: 1314px; --y: 350px; --h: 502px; }

/* Two lanes, 455 wide, each 30 clear of the split. */
.s10 .lane { --y: 350px; --w: 455px; --h: 530px; }
.s10 .lane.ben { --x: 830px; }
.s10 .lane.gav { --x: 1345px; }

/* Four open rows on an 82 pitch: hairlines at y 552, 634, 716 and 798. The third
   meets the left column's second hairline, and the last line of type stays above
   the y 860 floor that the one line to do band sets. */
.s10 .roles {
  --x: 0px; --y: 202px; --w: 455px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.s10 .roles li {
  box-sizing: border-box;
  height: 82px;
  border-top: 2px solid var(--hair);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  line-height: 80px;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Slide 11: About Gav. Ink page. Name, line, rule and three points in the
   left column (x 120 to 1020); Gav's photograph printed whole to the right
   and bottom stage edges, growing out of the ink on its left side. */
.s11 { --keel-w: 900px; }

/* The seam: the photograph's left edge fades into the ink over 150px. That
   strip is the post and Gav's sleeve; his face starts 180px in and is clear. */
.s11 .seam {
  position: absolute; left: 1100px; top: 0; width: 150px; height: 1080px;
  background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--ink) 0%, transparent));
  pointer-events: none;
}

/* One h2, two sizes. The h2 is a full stage frame at 0,0 so each line can
   sit on its own exact cap line. */
.s11 h2 { width: 1920px; height: 0; max-width: none; }
.s11 h2 span { display: block; white-space: nowrap; color: var(--fg); }

/* The name: 150 Manrope 800, cap line y 96, pulled left so the bowl of the
   G lands on the x 120 margin with the rule below it. */
.s11 .name {
  --x: 116px; --y: 96px; --lh: 1;
  font-size: 150px; font-weight: 800; letter-spacing: -0.05em;
}
/* The rest: 62 Manrope 500, its own line, cap line y 290. */
.s11 .rest {
  --x: 119px; --y: 290px; --lh: 1.1;
  font-size: 62px; font-weight: 500; letter-spacing: -0.025em;
}

/* Three points as one rule list, x 120, 900 wide, hairlines between. */
.s11 .trio {
  --x: 120px; --y: 432px; --w: 900px; --lh: 1.3;
  font-family: var(--display); font-size: 34px;
}
.s11 .trio li:first-child { padding-top: 0; }
.s11 .trio li:last-child { padding-bottom: 0; }

/* Gav, in his own words: set under the points, hung so the opening quote
   mark sits in the margin. */
.s11 .words {
  --x: 120px; --y: 740px; --w: 900px; --lh: 1.36;
  font-size: 33px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg); text-wrap: pretty; text-indent: -0.42em;
}

/* Slide 12: What is Outer Edge. One rule, three stops, then the client roll. */

/* Outer Edge mark, right end of the headline row */
.s12 .oe { width: 120px; height: 120px; }

/* The three stops on the rule: 18px peri dots centred on the hairline at y 350 */
.s12 .node {
  --y: 342px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--peri);
}

/* The line under each title */
.s12 .line {
  --lh: 1.4;
  font-size: 28px;
  font-weight: 400;
  color: var(--fg-soft);
  text-wrap: balance; /* no line may end on a single stranded word */
}

/* Client logos: no tiles, 9 by 2, grey so the roll reads as one texture */
.s12 .logos {
  --w: 1680px;
  --h: 110px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}
.s12 .logos.r1 { --y: 600px; }
.s12 .logos.r2 { --y: 730px; }
.s12 .logos > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
}
.s12 .logos img {
  display: block;
  max-width: 150px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
}

/* Optical weight: the two square marks grow, the two heaviest marks are capped,
   so the grey roll has no dark corner. Same cells, same files, same order. */
.s12 .logos.r1 > div:nth-child(1) img,
.s12 .logos.r1 > div:nth-child(8) img { max-height: 72px; }
.s12 .logos.r2 > div:nth-child(8) img,
.s12 .logos.r2 > div:nth-child(9) img { max-height: 46px; }

/* Slide 12b: Where Outer Edge fits. Two routes to recruitment drawn as one
   diagram at 1:1 stage px. The short route runs straight across the top.
   The long route passes through Outer Edge: a system map, then one process
   drawn lane by lane, both in the line language of our real documents. */
.s12b .plot { position: absolute; inset: 0; width: 1920px; height: 1080px; }

/* The two starting points, column 1. */
.s12b .way {
  --x: 120px; --w: 470px; --lh: 1.22;
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance;
}
/* Where both routes end. */
.s12b .end {
  --x: 1590px; --y: 264px; --w: 230px; --lh: 1.12;
  font-size: 40px; font-weight: 800; letter-spacing: -0.025em; color: var(--fg);
}

/* Routes. */
.s12b .route { fill: none; stroke: var(--ink); stroke-width: 4px; }

/* The Outer Edge frame and its tag, as our process maps label a group. */
.s12b .frame { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 16 9; }
.s12b .tagbig { fill: var(--ink); }
.s12b .tag-t { font-size: 27px; font-weight: 700; fill: var(--pearl); letter-spacing: -0.01em; }

/* Drawing parts. */
.s12b .b { fill: var(--paper); stroke: var(--ink); stroke-width: 2px; }
.s12b .p { fill: var(--peri-30); stroke: var(--peri); stroke-width: 2px; }
.s12b .c { fill: none; stroke: var(--ink-70); stroke-width: 2px; }
.s12b .c.dash { stroke-dasharray: 6 5; }
.s12b .grp { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 9 6; }
.s12b .tag { fill: var(--ink); }
.s12b .lane { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 2px; }
.s12b .zone { fill: color-mix(in srgb, var(--peri) 14%, transparent); stroke: none; }
.s12b .lane-t { font-size: 26px; font-weight: 500; fill: var(--mist); }

.s12b .cap { text-wrap: balance; }

/* Slide 13: The senior leaders. Photo printed whole, x 0 to 840. Text
   column x 936 to 1800. A ledger: the 6px ink opener at y 482 is its head,
   then three tenure rows on a 120 pitch, y 510 to 870. Each row is a hanging
   figure, its label on the same baseline, and a track whose peri fill is
   the years over fifteen: 864, 576, 461. */

.s13 { --keel-x: 936px; --keel-w: 864px; }

/* A row: the box the figure, label and track are measured from. */
.s13 .tenure { --x: 936px; --w: 864px; --h: 120px; }
.s13 .t1 { --y: 546px; --n: 0; --fw: 864px; --run: 700ms; }
.s13 .t2 { --y: 666px; --n: 1; --fw: 576px; --run: 467ms; }
.s13 .t3 { --y: 786px; --n: 2; --fw: 461px; --run: 373ms; }

/* Figure: cap line 12 under the row top, so its baseline lands on 72. */
.s13 .tenure .fig { --x: 0px; --y: 20px; }

/* Label: same baseline as the figure, from stage x 950. */
.s13 .tenure .cap { --x: 134px; --y: 80px; white-space: nowrap; --d: 400ms; --i: var(--n); }

/* Track: the 2px hairline at full width, with the 8px fill centred on it. */
.s13 .track {
  position: absolute; left: 0; top: 108px;
  width: 864px; height: 2px;
  background: var(--hair);
}
.s13 .fill {
  position: absolute; left: 0; top: -3px;
  width: var(--fw); height: 8px;
  background: var(--peri);
  transform-origin: 0 50%;
}

/* One shared speed: every fill covers 984 in 700ms, so each runs for its
   own share of that and fifteen visibly takes longest. Rows start 80 apart.
   The figure counts for exactly as long as its bar draws. */
.s13 .fill,
.s13 .tenure .fig { --d: 500ms; --i: var(--n); --dur: var(--run); }

/* Standfirst breaks at the comma, not one word short of the measure. */
.s13 .standfirst { --w: 800px; text-wrap: balance; }

/* Slide 14: People numbers. Styles that only this slide uses.
   A quiet page. One hero figure hangs left, a ledger of five rows sits right.
   Every row is the same 110 tall whether it holds a ? or a real number, so a
   filled figure drops into the same place: replace the ?, take "gap" off. */

/* Left: the hero, x 120 to 960. */
.s14 .hero { --x: 120px; --y: 0px; --w: 840px; }
/* The 8 carries about 12px of side bearing at this size: pull it back so the
   ink of the figure, not its box, hangs from the margin. */
.s14 .hero .fig { --x: -12px; --y: 250px; }
.s14 .hero-label {
  --x: 0px; --y: 470px; --max: 800px;
  font-size: 32px; font-weight: 500; --lh: 1.3;
  color: var(--fg-soft);
}
.s14 .hero .source { --x: 0px; --y: 560px; --max: 800px; }
/* The sector figure stays quiet: it is a comparison, not a second hero. */
.s14 .hero .source b { font-weight: 700; color: var(--fg-quiet); }

/* Right: the ledger, x 1040 to 1800, opener at y 230, five rows of 110. */
.s14 .tally { --x: 1040px; --y: 230px; --w: 760px; --cols: 1fr 270px; }
.s14 .tally .row {
  height: 110px; padding: 0;
  align-items: center;
}
.s14 .tally .row .cap { --lh: 1.3; line-height: var(--lh); text-wrap: balance; }
.s14 .tally .row .fig { text-align: right; }
/* "under" before a figure and "years" after it: quiet, in running text. */
.s14 .tally .fig .u {
  font: 500 26px/1 var(--body); letter-spacing: 0; color: var(--fg-quiet);
  margin-right: 12px;
}
.s14 .tally .fig .u.after { margin: 0 0 0 12px; }

/* Slide 15: Staff benefits. Styles that only this slide uses. */

/* Split page: keel and folio run under the text column only. */
.s15 { --keel-w: 984px; }

/* Five rows in y 370 to 706, clear of the peri rule at 740. */
.s15 .benefits { --y: 370px; --w: 984px; --row-pad: 12px; }
.s15 .benefits li:first-child { padding-top: 0; }

/* Slide 18: Where the work sits. A route line with three stops, no boxes.
   The line runs through the upper field at y 420, closing under the headline. Every stop sits on a
   grid column (c1, c5, c10) with its disc flush to the column edge, and every
   name and description reads left aligned from that same edge. The dotted run
   from Dunedin to the Philippines is the longer leg, so it carries the distance. */

/* The route: Christchurch to Dunedin solid ink, Dunedin to the Philippines dotted peri. */
.s18 .route .leg { fill: none; stroke: var(--ink); stroke-width: 5; }
.s18 .route .leg.far { stroke: var(--peri); }
.s18 .route .stop { fill: none; stroke: var(--ink); stroke-width: 5; }
.s18 .route .stop.home { fill: var(--peri); stroke: none; }

/* Place names under each stop. */
.s18 .place {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.03em;
  --lh: 1.04;
  color: var(--fg);
}

/* Descriptions: the first word carries who, the rest is quiet. */
.s18 .desc {
  font-size: 30px;
  font-weight: 400;
  --lh: 1.45;
  color: var(--fg-soft);
  text-wrap: balance;
}
.s18 .desc b {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Slide 16: Culture: the gap. A true scale plot: two row lines, each a
   0 to 100 scale from x 640 to x 1800 (11.6px a point). Everything in a row
   is placed from its row line, so y 0 is the line itself. */

.s16 .row { width: 1920px; height: 0; }

/* Dimension name: baseline on the row line, so its cap line sits 40 above. */
.s16 .dim {
  font-size: 56px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--fg); white-space: nowrap;
  --lh: 1.1;
}

/* The scale's own ticks: one every ten points, the ends and the middle taller.
   They hang below the line and start 2px under the 12px gap bar, so no tick
   ever crosses the bar. */
.s16 .ticks { position: absolute; left: 640px; top: 0; width: 1160px; height: 0; }
.s16 .ticks i {
  position: absolute; top: 8px; width: 2px; height: 10px; margin-left: -1px;
  background: var(--hair);
}
.s16 .ticks i:nth-child(1)  { left: 1px; }
.s16 .ticks i:nth-child(2)  { left: 116px; }
.s16 .ticks i:nth-child(3)  { left: 232px; }
.s16 .ticks i:nth-child(4)  { left: 348px; }
.s16 .ticks i:nth-child(5)  { left: 464px; }
.s16 .ticks i:nth-child(6)  { left: 580px; }
.s16 .ticks i:nth-child(7)  { left: 696px; }
.s16 .ticks i:nth-child(8)  { left: 812px; }
.s16 .ticks i:nth-child(9)  { left: 928px; }
.s16 .ticks i:nth-child(10) { left: 1044px; }
.s16 .ticks i:nth-child(11) { left: 1159px; }
.s16 .ticks i:nth-child(1),
.s16 .ticks i:nth-child(6),
.s16 .ticks i:nth-child(11) { height: 16px; }

/* The gap, drawn: a 12px bar from one dot's centre to the other's. */
.s16 .gap {
  position: absolute; top: -6px; height: 12px;
  background: var(--peri-30);
}

/* A mark is a zero width post standing on its score's x. The score, the dot
   and the country all centre on it. */
/* A mark is opaque from the start (--from-o: 1): all four stand on 0 at x 640
   and travel out to their scores, so each pair reads as one zero splitting. */
.s16 .mark { position: absolute; top: 0; width: 0; height: 0; --dur: 900ms; --from-o: 1; }
.s16 .mark .pt {
  position: absolute; left: -23px; top: -23px; width: 46px; height: 46px;
  border: 5px solid var(--page); border-radius: 50%;   /* r 18, with a ring of page so the dot sits clear of the bar */
}
.s16 .mark.nz .pt { background: var(--ink); }
.s16 .mark.ph .pt { background: var(--peri); }

/* Score: 96 Manrope 800, baseline 36 above the top of the dot. The tight
   tracking trims the box on the right, so the centring takes half of it back. */
.s16 .score {
  --x: 0px; --y: -54px; --lh: 1;
  font-size: 96px; font-weight: 800; letter-spacing: -0.05em;
  color: var(--fg); white-space: nowrap;
  transform: translateX(calc(-50% - 0.025em));
}
/* While it counts, deck.js holds the number in a box set hard right. These
   numbers are centred on a dot, so the box centres too: both zeros of a pair
   then stand exactly on the 0 point, one over the other. */
.s16 .score > span { justify-content: center !important; }
.s16 .mark .cap {
  --x: 0px; --y: 32px;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* The country names would sit on top of each other at 0, so they fade in once
   the dots have parted and are at rest with everything else by 1.1s. */
.s16 .mark .cap { --d: 600ms; --dur: 500ms; }

/* The source sets in two even lines and ends on the floor. */
.s16 .source { text-wrap: balance; }

/* Slide 17: Culture: the bridge.
   Photo printed hard against the left, top and bottom edges (x 0 to 960).
   Text column x 1056 to 1800. The keel runs the text column only. */
.s17 { --keel-x: 1056px; --keel-w: 744px; }

/* 2000 by 1333 photo at height 1080 is 1620 wide. 83% shows image x 34% to 93%:
   both faces whole, the blurred colleague behind left out of frame. */
.s17 .shot { --x: 0px; --y: 0px; --w: 960px; --h: 1080px; --pos: 83% 50%; }

.s17 h2 { --x: 1056px; --max: 744px; }

.s17 .opener { --x: 1056px; --y: 420px; --w: 744px; --d: 300ms; }
.s17 .bridge { --x: 1056px; --y: 426px; --w: 744px; --d: 380ms; }
.s17 .bridge li { text-wrap: balance; }

/* Slide 19: Incorporation. A register page: three entries on one ledger.
   Opener at y 350, three rows of 160, ledger ends y 830. Each row is its own
   grid: the company starts at x 688 in every row and takes its own width, the
   reference takes what is left and sits right aligned to x 1800. */
.s19 .register { --y: 350px; --w: 1680px; --cols: 544px max-content 1fr; }

/* Rows of 160. The first row shares its 160 with the 6px opener. The top
   padding sets one baseline per row, 105 below the top of the rule above it
   (y 455, 615, 775), so the 64 country name sits optically centred between
   its rules. Every cell is one line. */
.s19 .register .row { min-height: 160px; padding: 46px 0 0; align-content: start; align-items: last baseline; }
.s19 .register .row:first-child { min-height: 154px; padding-top: 42px; }

/* Country is d-64, not the 80 in the brief, on purpose: at 80 it would sit at
   91% of the 88 headline and the page would lose its one hero. The steps are
   88, 64, 36, 28. Reviewed and kept. */

/* The register closes on a hairline at y 830. */
.s19 .register .row:last-child { min-height: 160px; border-bottom: 2px solid var(--hair); }

.s19 .country { white-space: nowrap; }
.s19 .company {
  font-size: 36px; font-weight: 400; --lh: 1.2; line-height: var(--lh);
  letter-spacing: -0.005em;
  color: var(--fg); max-width: 660px;
}
.s19 .ref {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Slide 20: Compliance and security. Styles that only this slide uses. */

/* Split page: the keel and the to do band stay inside the text column. */
.s20 { --keel-w: 904px; --todo-r: 1024px; }

/* The office floor, full height, hard against the top, right and bottom edges.
   At 1080 high the photo is 1447 wide; 56% shows image x 25% to 80%. */
.s20 .floor { --x: 1120px; --y: 0px; --w: 800px; --h: 1080px; --pos: 56% 50%; }

.s20 h2 { --max: 904px; }

/* Five controls, one to a line, hung from a 6px opener.
   Rows of 96 carry the list from y 306 to about 792, down to the 800 content floor. */
.s20 .opener { --y: 300px; --w: 904px; }
.s20 .controls { --y: 306px; --w: 904px; --row-pad: 27px; }

/* Draft pill sits on the text column (right edge x 1024, y 40 to 86), off the
   photograph altogether and clear of the headline (first line ends near x 730). */
.s20 { --owner-r: 896px; }

/* Slide 21: Can it scale. Every dot is one person.
   Two separate fields: 115 outlined (Mint's model), 100 solid (Yoonet today). */
.s21 .model { color: var(--mist); }

/* Outlined dots: r 13 plus a 2px stroke centred on the edge gives the r 14 footprint. */
.s21 .field-a circle { fill: none; stroke: var(--mist); stroke-width: 2; }
.s21 .field-b circle { fill: var(--peri); }

/* The plus after the last column: 32 square, in the weight of the figure's plus. */
.s21 .more { fill: none; stroke: var(--peri); stroke-width: 7; }

/* Slide 24: Close. The bookend. The cover put its words in the ceiling, the
   close puts them on the ground: the whole team printed full bleed with no
   crop, one line on the road beneath their feet, the mark up in the canopy.

   Faces. The standing rows run y 336 to 730. The lowest chins are the far
   left crouching man and the man with glasses near x 1000, at about y 755.

   Bottom scrim. Clear until y 790 (35px under the lowest chin), then a steep
   ramp that is at full ink by y 940, so the front row soles (they end
   between y 935 and 945) sink into ink rather than rest on the letters. The
   line sits at baseline 1020, cap line 957, which leaves clear ink between
   the last sole and the tops of the L, t and h. The g hangs to about 1042,
   38px inside the stage edge.

   Top scrim. The mark is lavender and the canopy behind it is bright mid
   green, so it read muddy with no scrim. The scrim is 0.6 ink, held flat to
   y 100 so the whole mark (y 64 to 152) sits in it, then eased to nothing at
   y 300, which is 36px above the first head at y 336. No face is touched.

   DEVIATION FROM THE BRIEF, for Ben. The brief puts the mark at x 120. It is
   at the right instead (x 1750, right edge on the grid at 1800). The reason
   is the lamp post: it runs down x 105 to 118 and would crowd the mark at
   x 120. The photo there (x 120 to 210, y 64 to 152) is mostly dark trunk
   with one hole of sky, so brightness is not the reason, the post is. On
   the right the mark also mirrors the cover, whose mark is bottom left,
   across the diagonal. */
.s24 .bleed { display: block; max-width: none; }
.s24 h1 { white-space: nowrap; text-wrap: nowrap; }
.s24 .mark { width: auto; }
.s24 .scrim-bottom {
  background: linear-gradient(180deg,
    var(--ink-0) 790px,
    var(--ink-c) 840px,
    var(--ink-b) 890px,
    var(--ink-a) 940px,
    var(--ink-a) 1080px);
}
.s24 .scrim-top {
  background: linear-gradient(180deg,
    var(--ink-a) 0,
    var(--ink-a) 100px,
    var(--ink-b) 180px,
    var(--ink-c) 250px,
    var(--ink-0) 300px);
}