/* Oceaan Studio business plan page.
   Palette: hot pink, ocean teal, deep sea ink, first-light gold, sea-foam white.
   Type: Unbounded (display), Instrument Sans (text), DM Mono (plate captions, figures). */

:root {
  --pink: #ff2e93;
  --pink-deep: #c2006a;
  --pink-under: #9c0054;
  --wine: #3a0420;
  --ocean: #19c6c1;
  --deep: #062c38;
  --deep-2: #0b4350;
  --foam: #f0fbf9;
  --blush: #ffe5f0;
  --light: #ffc94d;
  --light-soft: #fff1c7;
  --ink: #072a35;
  --ink-soft: #3d5a62;
  --focus: #062c38;
  --accent: var(--pink-deep);

  --gutter: clamp(24px, 5vw, 64px);
  --pad: clamp(24px, 2.6vw, 34px);
  --r: 28px;
  --gap: clamp(16px, 2vw, 28px);
  --nav-h: 64px;

  --f-display: "Unbounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --clay-card: inset 0 2px 0 #fff, inset 0 -8px 12px rgba(6, 44, 56, .05), 0 6px 0 rgba(6, 44, 56, .12), 0 20px 36px rgba(6, 44, 56, .12);
  --clay-card-pink: inset 0 2px 0 #fff, inset 0 -8px 12px rgba(194, 0, 106, .07), 0 7px 0 rgba(120, 0, 62, .38), 0 22px 40px rgba(90, 0, 45, .30);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 20px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--foam);
  color: var(--ink);
  font: 400 18px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--pink-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 14px; background: #fff; color: var(--wine); font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- clay buttons and chips ---------- */
.clay {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 16px/1 var(--f-display); letter-spacing: .01em; color: #fff; text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 48%),
    linear-gradient(rgba(184, 0, 98, .72), rgba(184, 0, 98, .72)),
    #ff2e93 url(img/texture-pink-clay.jpg) center / 300px auto;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .7), inset 0 -8px 10px rgba(120, 0, 62, .5), 0 7px 0 var(--pink-under), 0 18px 26px rgba(70, 0, 36, .42);
  text-shadow: 0 1px 0 rgba(110, 0, 56, .8), 0 2px 8px rgba(110, 0, 56, .55);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.clay:hover { transform: translateY(-2px); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .7), inset 0 -8px 10px rgba(120, 0, 62, .5), 0 9px 0 var(--pink-under), 0 24px 30px rgba(70, 0, 36, .42); }
.clay:active { transform: translateY(6px); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .5), inset 0 -3px 6px rgba(120, 0, 62, .5), 0 1px 0 var(--pink-under), 0 5px 10px rgba(70, 0, 36, .4); }
.clay--white {
  color: var(--pink-deep); text-shadow: none;
  background: linear-gradient(180deg, #fff, #ffe3ef);
  box-shadow: inset 0 2px 0 #fff, inset 0 -8px 10px rgba(194, 0, 106, .16), 0 7px 0 #8e0a50, 0 18px 26px rgba(70, 0, 36, .4);
}
.clay--white:hover { box-shadow: inset 0 2px 0 #fff, inset 0 -8px 10px rgba(194, 0, 106, .16), 0 9px 0 #8e0a50, 0 24px 30px rgba(70, 0, 36, .4); }
.clay--white:active { box-shadow: inset 0 2px 0 #fff, inset 0 -3px 6px rgba(194, 0, 106, .16), 0 1px 0 #8e0a50, 0 5px 10px rgba(70, 0, 36, .4); }
.clay--big { min-height: 64px; padding: 0 30px 0 24px; font-size: clamp(16px, 1.5vw, 19px); }
.clay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 9px var(--deep), 0 7px 0 var(--pink-under); border-radius: 999px; }

.chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; white-space: nowrap;
  font: 600 14px/1 var(--f-body); color: var(--wine); text-decoration: none;
  background: linear-gradient(180deg, #fff, #ffe8f2);
  box-shadow: inset 0 1px 0 #fff, inset 0 -4px 5px rgba(194, 0, 106, .14), 0 3px 0 #eea3c7, 0 7px 10px rgba(150, 0, 80, .16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(194, 0, 106, .14), 0 0 0 #eea3c7, 0 2px 4px rgba(150, 0, 80, .16); }
.chip[aria-current="true"] {
  color: #fff; text-shadow: 0 1px 0 rgba(110, 0, 56, .8);
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 50%), linear-gradient(rgba(184, 0, 98, .72), rgba(184, 0, 98, .72)), #ff2e93 url(img/texture-pink-clay.jpg) center / 220px auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 5px rgba(120, 0, 62, .45), 0 3px 0 var(--pink-under), 0 7px 10px rgba(150, 0, 80, .3);
}

/* ---------- sticky section navigation ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding-left: var(--gutter);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(194, 0, 106, .16), 0 8px 24px rgba(90, 0, 45, .10);
}
@supports (backdrop-filter: blur(8px)) { .topnav { background: rgba(255, 255, 255, .84); backdrop-filter: blur(12px) saturate(1.3); } }
.topnav-mark { flex: none; font: 800 17px/1 var(--f-display); letter-spacing: -.02em; color: var(--pink); text-decoration: none; padding: 8px 0; }
.topnav-scroll {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 36px), transparent 100%);
}
.topnav-scroll::-webkit-scrollbar { display: none; }
.topnav-list { display: flex; gap: 10px; list-style: none; width: max-content; padding: 10px var(--gutter) 16px 20px; }

/* ---------- bands ---------- */
.band { position: relative; padding-block: clamp(64px, 9vw, 128px); }
.band--foam { background: var(--foam); }
.band--white { background: #fff; }
.band--blush { background: var(--blush); }
.band--pink {
  --focus: #fff; --accent: #fff;
  color: var(--wine);
  background:
    linear-gradient(180deg, rgba(255, 46, 147, 0) 0, rgba(255, 46, 147, 0) 420px, #ff2e93 860px),
    url(img/texture-pink-clay.jpg) top center / max(100%, 1536px) auto no-repeat,
    #ff2e93;
}
.band--deep {
  --focus: var(--light); --accent: var(--light);
  color: #e9fffb;
  background:
    linear-gradient(180deg, rgba(6, 44, 56, .80) 0, rgba(6, 44, 56, .93) 420px, #062c38 860px),
    url(img/texture-ocean.jpg) top center / max(100%, 1536px) auto no-repeat,
    #062c38;
}
.band--deep a { color: #ffd0e6; }
.band--deep .card a, .band--deep .tablecard a { color: var(--pink-deep); }

/* ---------- section heads ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: start; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head--stack { grid-template-columns: minmax(0, 1fr); }
h2 { font: 800 clamp(28px, 3.7vw, 48px)/1.04 var(--f-display); letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word; }
.band--pink h2 { color: #fff; text-shadow: 0 3px 0 var(--pink-under), 0 10px 22px rgba(90, 0, 45, .35); }
.band--deep h2 { color: #fff; }
.lead { font: 500 clamp(20px, 2vw, 26px)/1.36 var(--f-body); text-wrap: pretty; }
.sub { font: 600 clamp(19px, 1.9vw, 24px)/1.2 var(--f-display); letter-spacing: -.01em; margin: clamp(44px, 6vw, 72px) 0 clamp(20px, 2.4vw, 28px); }
.sub--tight { margin-top: 0; }
.prose { max-width: 68ch; }
.prose--wide { max-width: 76ch; font-size: clamp(18px, 1.5vw, 20px); }

.bake { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-weight: 700; }
.bake--pink { background-color: #e0137f; background-image: linear-gradient(rgba(176, 0, 96, .5), rgba(176, 0, 96, .5)), url(img/texture-pink-clay.jpg); background-size: cover; background-position: center; }
.bake--hair { background-color: #3a1708; background-image: linear-gradient(rgba(40, 10, 0, .28), rgba(40, 10, 0, .28)), url(img/texture-hair.jpg); background-size: 620px auto; background-position: 30% 55%; }

/* ---------- cards ---------- */
.cards { list-style: none; display: grid; gap: var(--gap); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--start, .cards--brand, .cards--rules { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cards--start > li, .cards--brand > li, .cards--rules > li { grid-column: span 2; }
.cards--start > li:nth-child(n+4), .cards--brand > li:nth-child(n+4), .cards--rules > li:nth-child(n+4) { grid-column: span 3; }

.card { background: #fff; color: var(--ink); border-radius: var(--r); padding: var(--pad); box-shadow: var(--clay-card); }
.band--pink .card, .band--pink .tablecard { box-shadow: var(--clay-card-pink); }
.band--deep .card, .band--deep .tablecard { box-shadow: inset 0 2px 0 #fff, inset 0 -8px 12px rgba(6, 44, 56, .06), 0 7px 0 rgba(0, 0, 0, .35), 0 22px 40px rgba(0, 0, 0, .35); }
.card h3, .card h4 { font: 600 clamp(16px, 1.45vw, 19px)/1.28 var(--f-display); letter-spacing: -.01em; color: var(--pink-deep); margin-bottom: 12px; }
.card p + p { margin-top: 12px; }
.card--light { background: var(--light-soft); box-shadow: inset 0 2px 0 #fffbe9, inset 0 -8px 12px rgba(150, 100, 0, .08), 0 6px 0 rgba(150, 100, 0, .28), 0 20px 36px rgba(6, 44, 56, .14); }
.card--light h3 { color: var(--wine); }
.card--quote {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%), linear-gradient(rgba(184, 0, 98, .72), rgba(184, 0, 98, .72)), #ff2e93 url(img/texture-pink-clay.jpg) center / cover;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .6), inset 0 -10px 14px rgba(120, 0, 62, .4), 0 7px 0 var(--pink-under), 0 22px 36px rgba(90, 0, 45, .3);
}
.card--quote h4 { color: #fff; }
.card--quote blockquote { font: 800 clamp(20px, 2vw, 26px)/1.15 var(--f-display); letter-spacing: -.02em; margin-bottom: 14px; text-shadow: 0 2px 0 rgba(120, 0, 62, .7); }
.card--quote p { font-weight: 500; text-shadow: 0 1px 0 rgba(120, 0, 62, .6); }
.hello { font: 800 clamp(20px, 2vw, 26px)/1.15 var(--f-display); letter-spacing: -.02em; color: var(--pink); }
.cards--plain .card p { font-weight: 500; }

.cards--num { counter-reset: n; }
.cards--num > li { counter-increment: n; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; }
.cards--num > li::before { content: counter(n); grid-row: span 2; font: 800 44px/1 var(--f-display); color: var(--pink); min-width: 1.1ch; }
.cards--num > li > * { grid-column: 2; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }

.callout { margin-top: clamp(32px, 4vw, 48px); padding: var(--pad); border-radius: var(--r); background: var(--blush); color: var(--wine); font-weight: 500; box-shadow: inset 0 2px 0 #fff, inset 0 -8px 12px rgba(194, 0, 106, .08), 0 6px 0 rgba(194, 0, 106, .22), 0 20px 36px rgba(90, 0, 45, .10); }
.callout--gap { background: var(--deep); color: #e9fffb; font-weight: 400; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -8px 12px rgba(0, 0, 0, .25), 0 6px 0 #02161d, 0 20px 36px rgba(6, 44, 56, .25); }
.callout h3 { font: 600 clamp(17px, 1.6vw, 21px)/1.25 var(--f-display); color: var(--light); margin-bottom: 12px; }
.callout p { max-width: 80ch; }

.truth, .truth-strip { display: block; padding: 20px var(--pad); border-radius: 22px; background: var(--light-soft); color: var(--deep); font-weight: 600; line-height: 1.5; box-shadow: inset 0 2px 0 #fffbe9, inset 0 -6px 10px rgba(150, 100, 0, .10), 0 5px 0 rgba(150, 100, 0, .32), 0 16px 28px rgba(6, 44, 56, .12); }
.truth { margin-top: clamp(32px, 4vw, 48px); }
.truth-strip { margin-top: clamp(28px, 3.4vw, 44px); box-shadow: inset 0 2px 0 #fffbe9, inset 0 -6px 10px rgba(150, 100, 0, .10), 0 6px 0 rgba(110, 0, 56, .45), 0 18px 30px rgba(90, 0, 45, .3); }
.truth-tag { display: inline-block; margin-right: 10px; padding: 5px 11px; border-radius: 999px; background: var(--deep); color: var(--light); font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.note { margin-top: 18px; font-weight: 600; color: var(--ink); }

/* ---------- lists ---------- */
.ticks { list-style: none; display: grid; gap: 14px; }
.ticks > li { position: relative; padding-left: 28px; }
.ticks > li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9fcd, var(--pink) 60%, var(--pink-deep)); box-shadow: 0 2px 0 var(--pink-under); }
.steps { list-style: none; counter-reset: s; display: grid; gap: 14px; }
.steps > li { counter-increment: s; position: relative; padding-left: 44px; }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 600 13px/1 var(--f-display); color: #fff; background: radial-gradient(circle at 35% 28%, #ff8cc4, var(--pink) 62%, var(--pink-deep)); box-shadow: inset 0 -3px 4px rgba(120, 0, 62, .4), 0 3px 0 var(--pink-under); }
.checks { list-style: none; display: grid; gap: 14px; }
.checks > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; }
.box { width: 26px; height: 26px; margin-top: 2px; border-radius: 8px; background: #fff; border: 2.5px solid var(--wine); box-shadow: inset 0 3px 4px rgba(58, 4, 32, .16); }

/* ---------- tables ---------- */
.tablecard { background: #fff; color: var(--ink); border-radius: var(--r); padding: clamp(12px, 1.4vw, 18px); box-shadow: var(--clay-card); }
.t { width: 100%; border-collapse: collapse; font-size: 16.5px; line-height: 1.45; }
.t th, .t td { padding: 15px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(6, 44, 56, .13); font-weight: 400; }
.t thead th { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); vertical-align: bottom; }
.t tbody th { font-weight: 700; }
.t tbody tr:last-child > * { border-bottom: 0; }
.t tfoot > tr > * { border-bottom: 0; }
.fig { font-weight: 700; color: var(--pink-deep); }
.t-num td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-num thead th { text-align: right; }
.t-num thead th:first-child { text-align: left; }
.t .total > * { border-top: 3px solid var(--pink); font-weight: 800; color: var(--pink-deep); font-size: 1.06em; }
.t-services td:nth-child(2) { min-width: 9.5em; }
.tscroll { overflow-x: auto; border-radius: 14px; }
.t-build td { font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .t-stack, .t-stack tbody, .t-stack tr, .t-stack th, .t-stack td { display: block; }
  .t-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .t-stack tbody tr { padding: 14px 0 16px; border-bottom: 2px solid rgba(194, 0, 106, .22); }
  .t-stack tbody tr:first-child { padding-top: 6px; }
  .t-stack tbody tr:last-child { border-bottom: 0; padding-bottom: 6px; }
  .t-stack tbody th, .t-stack tbody td { border-bottom: 0; padding: 6px 14px; }
  .t-stack tbody th { font: 600 17px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--pink-deep); padding-bottom: 8px; }
  .t-stack tbody td::before { content: attr(data-label); display: block; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
  .t-services td:nth-child(2) { min-width: 0; }
}

/* ---------- masthead and film ---------- */
.masthead { padding-block: clamp(28px, 3.4vw, 44px) clamp(40px, 5vw, 64px); background: linear-gradient(180deg, rgba(255, 46, 147, 0) 0, rgba(255, 46, 147, 0) 70%, rgba(255, 46, 147, .55) 100%), #ff2e93 url(img/texture-pink-clay.jpg) center / cover; }
.masthead-grid { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.greeting { font: 500 clamp(14px, 1.2vw, 16px)/1.3 var(--f-mono); letter-spacing: .04em; color: var(--wine); margin-bottom: 14px; }
h1 { font-family: var(--f-display); }
.wordmark { display: block; font: 800 clamp(54px, 6.5vw, 84px)/.9 var(--f-display); letter-spacing: -.045em; text-transform: lowercase; color: #fff; text-shadow: 0 1px 0 #ffd3e8, 0 4px 0 var(--pink-under), 0 6px 0 var(--pink-under), 0 16px 26px rgba(80, 0, 40, .45); }
.h1-sub { display: block; margin-top: 18px; font: 600 clamp(20px, 2.1vw, 28px)/1.1 var(--f-display); letter-spacing: -.01em; color: var(--wine); }
.byline { margin-top: 10px; font: 500 14.5px/1.4 var(--f-mono); color: var(--wine); }
.masthead-note { margin: 18px 0 26px; max-width: 34ch; font-weight: 500; line-height: 1.45; color: var(--wine); }

.film { min-width: 0; }
.film-frame { position: relative; padding: clamp(8px, 1vw, 12px); border-radius: clamp(22px, 2.6vw, 34px); background: linear-gradient(180deg, #fff, #ffeaf3); box-shadow: inset 0 2px 0 #fff, inset 0 -8px 10px rgba(194, 0, 106, .14), 0 9px 0 #8e0a50, 0 30px 60px rgba(70, 0, 36, .5); }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: clamp(15px, 1.8vw, 24px); background: #1a0410; }
.film-sound { position: absolute; top: clamp(20px, 2.4vw, 30px); right: clamp(20px, 2.4vw, 30px); z-index: 2; }
.film-play { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; }
.film-play:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) {
  .film-sound::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 3px solid rgba(255, 255, 255, .9); opacity: 0; animation: ring 2.4s ease-out 1.2s 4; pointer-events: none; }
  @keyframes ring { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.22); } }
}
.film figcaption { margin-top: 32px; font-size: 15.5px; line-height: 1.45; color: var(--wine); font-weight: 500; }
.film figcaption strong { font-weight: 700; }

/* ---------- plates (live etch figures) ---------- */
.plate { position: relative; }
.plate-stage { position: relative; overflow: hidden; background: #ff2e93 url(img/texture-pink-clay.jpg) center / cover; isolation: isolate; }
.plate-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.plate-stage > :not(canvas) { position: relative; z-index: 1; }
.plate--bleed { background: var(--foam); }
.plate--bleed .plate-stage { height: clamp(340px, 42vw, 560px); }
.plate--framed { margin-block: clamp(36px, 5vw, 64px); }
.plate--framed .plate-stage { border-radius: clamp(24px, 3vw, 36px); border: clamp(8px, 1vw, 12px) solid #fff; box-shadow: 0 8px 0 rgba(6, 44, 56, .16), 0 28px 54px rgba(6, 44, 56, .2); }
.band--pink .plate--framed .plate-stage { box-shadow: 0 9px 0 #8e0a50, 0 30px 56px rgba(70, 0, 36, .45); }
.band--deep .plate--framed .plate-stage { box-shadow: 0 9px 0 rgba(0, 0, 0, .4), 0 30px 56px rgba(0, 0, 0, .4); }
#plate-wave .plate-stage, #plate-smooth .plate-stage { aspect-ratio: 16 / 6; min-height: 280px; }
.plate--plait .plate-stage { aspect-ratio: 16 / 6.4; min-height: 340px; }
.plate--route .plate-stage { aspect-ratio: 16 / 6.4; min-height: 340px; }

.plate-cap { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 20px; row-gap: 6px; align-items: baseline; padding-top: 20px; padding-bottom: 4px; font: 400 13.5px/1.55 var(--f-mono); }
.plate--bleed .plate-cap { padding-bottom: 0; }
.plate-no { color: var(--accent); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.plate-name { font: 600 15px/1.3 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.plate-note { max-width: 78ch; }
.replay { justify-self: end; align-self: start; height: 32px; padding: 0 14px; border: 0; cursor: pointer; font: 600 13px/1 var(--f-body); }

/* white clay labels that sit on a plate */
.tag { display: inline-block; padding: 8px 13px; border-radius: 14px; font: 600 14px/1.25 var(--f-body); color: var(--wine); background: linear-gradient(180deg, #fff, #fff1f7); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 5px rgba(194, 0, 106, .14), 0 3px 0 rgba(110, 0, 56, .42), 0 9px 14px rgba(70, 0, 36, .3); }
.tag small { display: block; margin-top: 2px; font: 400 11.5px/1.3 var(--f-mono); color: #74334f; }
.tag--val { font: 500 14px/1.25 var(--f-mono); white-space: nowrap; }
.plate.is-live .tag, .plate.is-live .bars-tick, .plate.is-live .menu-axis { opacity: 0; }
.plate .tag, .plate .bars-tick, .plate .menu-axis { transition: opacity .5s ease; }
.plate.is-live.show-tags .tag, .plate.is-live.show-tags .bars-tick, .plate.is-live.show-tags .menu-axis { opacity: 1; }

/* plate 5: menu */
.menu { padding: clamp(24px, 3.2vw, 44px); }
.menu-title, .bars-title { font: 600 clamp(17px, 1.7vw, 22px)/1.2 var(--f-display); letter-spacing: -.01em; color: var(--wine); margin-bottom: clamp(18px, 2vw, 26px); }
.menu-title span, .bars-title span { display: block; margin-top: 6px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .02em; }
.menu-rows { list-style: none; display: grid; padding-block: 10px 6px; }
.menu-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: end; padding-top: 12px; }
.menu-rows .tag { justify-self: start; }
.menu-rows .tag--val { justify-self: end; }
.menu-rows .track { grid-column: 1 / -1; height: 26px; }
.menu-axis { position: relative; height: 22px; margin-top: 12px; font: 500 12.5px/1 var(--f-mono); color: var(--wine); }
.menu-axis span { position: absolute; top: 4px; translate: -50% 0; white-space: nowrap; }
.menu-axis span:nth-child(1) { left: 0; translate: 0 0; }
.menu-axis span:nth-child(2) { left: 33.333%; }
.menu-axis span:nth-child(3) { left: 66.667%; }
.menu-axis span:nth-child(4) { left: 100%; translate: -100% 0; }

/* plate 6: plait */
.plait-roles { list-style: none; position: absolute !important; left: clamp(24px, 3vw, 40px); top: clamp(24px, 3vw, 40px); bottom: clamp(24px, 3vw, 40px); width: clamp(132px, 19%, 220px); display: flex; flex-direction: column; justify-content: space-between; }
.plait-roles .tag { display: block; }
.tag--join { position: absolute !important; left: 0; top: 0; max-width: 200px; text-align: center; font-size: 13px; }

/* plate 7: route */
.route-stops { list-style: none; position: absolute !important; inset: 0; }
.route-stops .tag { position: absolute; left: 0; top: 0; max-width: 190px; }
.tag--home { color: #fff; text-shadow: 0 1px 0 rgba(110, 0, 56, .8); background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 50%), linear-gradient(rgba(184, 0, 98, .72), rgba(184, 0, 98, .72)), #ff2e93 url(img/texture-pink-clay.jpg) center / 200px auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 5px rgba(120, 0, 62, .45), 0 0 0 3px #fff, 0 4px 0 3px rgba(110, 0, 56, .42), 0 12px 16px rgba(70, 0, 36, .34); }
.tag--home small { color: #fff; }

/* plate 8: bars */
.bars { padding: clamp(24px, 3.2vw, 44px); }
.bars-area { position: relative; height: clamp(250px, 30vw, 380px); --axis: clamp(64px, 7vw, 84px); }
.bars-tick { position: absolute; left: 0; bottom: calc(var(--v) / 320000 * 100%); padding-bottom: 5px; font: 500 12px/1 var(--f-mono); color: var(--wine); }
.bars-cols { position: absolute; inset: 0 0 0 var(--axis); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 4vw, 64px); }
.bars-legend { list-style: none; margin-top: 22px; padding-left: clamp(64px, 7vw, 84px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 4vw, 64px); }
.bars-legend > li { display: grid; gap: 9px; align-content: start; }
.bars-legend strong { font: 600 clamp(15px, 1.5vw, 19px)/1.2 var(--f-display); color: var(--wine); margin-bottom: 4px; }
.bars-legend .tag { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; }
.bars-legend .tag b { font: 500 14px/1.2 var(--f-mono); white-space: nowrap; }
.key { display: block; width: 20px; height: 14px; border-radius: 3px; border: 2.5px solid #0f8f95; }
.key--b { width: 14px; height: 10px; margin-inline: 3px; }
.key--c { background: linear-gradient(135deg, #17a7ab, #0b6f7c); border-color: #0b6f7c; width: 14px; height: 10px; margin-inline: 3px; }

/* plate 9: dial */
.plate--dial .plate-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(24px, 3.2vw, 44px); }
.dial-side { order: 1; background: #fff; color: var(--ink); border-radius: 24px; padding: var(--pad); box-shadow: var(--clay-card-pink); }
.dial-zone { order: 2; aspect-ratio: 1 / .9; min-height: 280px; }
.dial-zone .tag { position: absolute; left: 0; top: 0; white-space: nowrap; }
.tag--tick { font: 500 13px/1.2 var(--f-mono); padding: 6px 10px; }
.tag--trigger { font: 600 14px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--deep); background: linear-gradient(180deg, #fff6d6, var(--light)); box-shadow: inset 0 1px 0 #fffbe9, inset 0 -3px 5px rgba(150, 100, 0, .2), 0 3px 0 rgba(120, 76, 0, .6), 0 9px 14px rgba(70, 0, 36, .3); }
.dial-title { font: 600 clamp(17px, 1.7vw, 22px)/1.22 var(--f-display); letter-spacing: -.01em; color: var(--pink-deep); }
.dial-sub { margin: 10px 0 16px; font: 500 13px/1.45 var(--f-mono); color: var(--ink-soft); }
.dial-table { font-size: 15.5px; }
.dial-table th, .dial-table td { padding: 11px 10px; }
.dial-table th:first-child { padding-left: 0; }
.dial-table td { font-variant-numeric: tabular-nums; font-weight: 600; }
.dial-table small { display: block; font: 400 11.5px/1.3 var(--f-mono); color: var(--ink-soft); }

/* ---------- section specifics ---------- */
.statement { font: 500 clamp(17px, 1.5vw, 20px)/1.4 var(--f-body); color: var(--wine); }
.statement strong { display: block; margin-top: 14px; max-width: 22ch; font: 800 clamp(30px, 5.2vw, 70px)/1.03 var(--f-display); letter-spacing: -.035em; color: #fff; text-shadow: 0 3px 0 var(--pink-under), 0 12px 26px rgba(90, 0, 45, .35); text-wrap: balance; }
.statement .bake--hair { text-shadow: none; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .55)); }

.pair-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.pair-imgs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 26px 26px; border: clamp(6px, .8vw, 10px) solid #fff; box-shadow: 0 8px 0 #8e0a50, 0 24px 44px rgba(70, 0, 36, .42); background: #fff; }
.pair-imgs img:first-child { object-position: 18% 50%; }
.pair-imgs img:last-child { object-position: 42% 50%; margin-top: clamp(20px, 3vw, 44px); }
.pair figcaption, .arch figcaption, .carpanel figcaption { margin-top: 18px; font: 400 13px/1.5 var(--f-mono); }

.arch img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 62% 50%; border-radius: 999px 999px 28px 28px; border: clamp(6px, .8vw, 10px) solid #fff; box-shadow: 0 8px 0 rgba(194, 0, 106, .35), 0 24px 44px rgba(90, 0, 45, .22); background: #fff; }
.duo--team { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.duo--team .ticks { gap: 18px; }

.cols3 + .duo--car { margin-top: var(--gap); }
.duo--car { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.carpanel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); border: clamp(6px, .8vw, 10px) solid #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .4), 0 24px 44px rgba(0, 0, 0, .4); background: #fff; }
.watch { align-self: start; }
.watch p { font: 500 clamp(18px, 1.6vw, 21px)/1.45 var(--f-body); }

.safety { margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 4vw, 56px); border-radius: clamp(28px, 3vw, 40px); color: #e9fffb; --focus: var(--light); background: linear-gradient(180deg, rgba(6, 44, 56, .84), rgba(6, 44, 56, .95)), #062c38 url(img/texture-ocean.jpg) center / cover; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 8px 0 #02161d, 0 28px 50px rgba(6, 44, 56, .28); }
.safety h3 { font: 800 clamp(22px, 2.6vw, 34px)/1.1 var(--f-display); letter-spacing: -.02em; color: var(--light); margin-bottom: 18px; }
.safety > p { max-width: 78ch; }
.safety a { color: #ffd0e6; }
.safety .steps { margin: 26px 0; max-width: 78ch; gap: 16px; }
.safety .steps > li::before { color: var(--deep); background: radial-gradient(circle at 35% 28%, #fff3c9, var(--light) 62%, #e0a520); box-shadow: inset 0 -3px 4px rgba(120, 76, 0, .35), 0 3px 0 #94680a; }
.safety-close { font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: #fff; }

.fin-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.strip { display: flex; gap: 3px; height: 34px; margin-top: 22px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: var(--clay-card); }
.strip span { flex: var(--v) 1 0; min-width: 0; border-radius: 5px; background: linear-gradient(180deg, #ff6fb4, var(--pink) 55%, var(--pink-deep)); }
.strip span:nth-child(even) { background: linear-gradient(180deg, #5fe0dc, var(--ocean) 55%, #0c8f95); }
.strip span:last-child { background: linear-gradient(180deg, #ffe08a, var(--light) 55%, #dba21c); }
.strip span:first-child { border-radius: 9px 5px 5px 9px; }
.strip span:last-child { border-radius: 5px 9px 9px 5px; }
.strip-cap { margin-top: 12px; font: 400 13px/1.5 var(--f-mono); color: var(--ink-soft); }
#financials .wrap > .prose { margin-bottom: 24px; font-weight: 500; }

.when { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.cols3--road .card h3 { margin-bottom: 20px; }
.cols3--road .steps > li { font-size: 16.5px; }
#roadmap .plate--framed { margin-bottom: 0; }

.t-risks tbody th { width: 27%; }
.t-risks td:nth-child(2) { width: 30%; }

.duo--assume { margin-top: 0; }

/* ---------- footer ---------- */
.foot { padding-block: clamp(56px, 7vw, 96px); font-size: 16px; }
.foot p { max-width: 70ch; }
.foot p + p { margin-top: 12px; }
.foot-mark { font: 800 clamp(40px, 9vw, 124px)/.95 var(--f-display); letter-spacing: -.045em; max-width: none !important; background: #19c6c1 url(img/texture-ocean.jpg) center 30% / cover; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: saturate(1.25) brightness(1.25); padding-bottom: .08em; }
.foot-hello { font: 500 15px/1.4 var(--f-mono); color: #ffd0e6; margin-bottom: 26px; }
.foot-made { font: 600 15px/1.3 var(--f-display); color: var(--light); margin-top: 26px !important; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .cards--3, .cols3 { grid-template-columns: minmax(0, 1fr); }
  .cards--start, .cards--brand, .cards--rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--start > li, .cards--brand > li, .cards--rules > li,
  .cards--start > li:nth-child(n+4), .cards--brand > li:nth-child(n+4), .cards--rules > li:nth-child(n+4) { grid-column: auto; }
  .fin-grid { grid-template-columns: minmax(0, 1fr); }
  .plate--dial .plate-stage { grid-template-columns: minmax(0, 1fr); }
  .dial-zone { order: 1; width: 100%; max-width: 460px; margin-inline: auto; }
  .dial-side { order: 2; }
}
@media (max-width: 860px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .masthead-grid { grid-template-columns: minmax(0, 1fr); }
  .masthead-note { margin: 14px 0 20px; max-width: 46ch; }
  .duo, .duo--team, .duo--car { grid-template-columns: minmax(0, 1fr); }
  .arch { max-width: 420px; }
  .plate-cap { grid-template-columns: auto minmax(0, 1fr) auto; }
  .plate-note { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .cards--2, .cards--start, .cards--brand, .cards--rules { grid-template-columns: minmax(0, 1fr); }
  .topnav { gap: 8px; }
  .topnav-mark { font-size: 14px; }
  .clay--big { min-height: 56px; padding: 0 22px 0 18px; }
  .film-sound { top: 16px; right: 16px; }
  .t { font-size: 15.5px; }
  .t-proj { min-width: 432px; font-size: 14.5px; }
  .t-proj th, .t-proj td { padding: 13px 12px; }
  .t-num th, .t-num td { padding-inline: 12px; }
  #plate-wave .plate-stage, #plate-smooth .plate-stage { aspect-ratio: 4 / 3; }
  .plate--plait .plate-stage { aspect-ratio: auto; height: 470px; }
  .plait-roles { position: relative !important; inset: auto; left: auto; top: auto; bottom: auto; width: auto; flex-direction: row; gap: 8px; padding: 24px 24px 0; align-items: stretch; }
  .plait-roles .tag { flex: 1 1 0; min-width: 0; padding: 8px 9px; font-size: 12.5px; }
  .plait-roles .tag small { font-size: 10.5px; }
  .plate--route .plate-stage { aspect-ratio: auto; height: 520px; }
  .route-stops .tag { max-width: 150px; font-size: 13px; }
  .bars-legend { grid-template-columns: minmax(0, 1fr); padding-left: 0; gap: 18px; }
  .bars-cols { gap: 12px; }
  .menu-rows .tag { font-size: 13px; padding: 7px 11px; }
  .dial-table { font-size: 14.5px; }
  .dial-table th, .dial-table td { padding: 10px 6px; }
  .cards--num > li::before { font-size: 34px; }
  .cards--num > li { column-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .topnav, .film-sound, .film-play, .replay { display: none !important; }
}

.no-motion .replay { display: none; }

/* ---------- interaction: year toggle, service rows ---------- */
.js-only { display: none; }
.js .js-only { display: block; }
.yeartabs { display: none; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.js .yeartabs { display: flex; }
.yeartabs .chip { border: 0; cursor: pointer; height: 40px; padding: 0 16px; font-size: 14.5px; }
.yeartabs .chip[aria-pressed="true"] {
  color: #fff; text-shadow: 0 1px 0 rgba(110, 0, 56, .8);
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 50%), linear-gradient(rgba(184, 0, 98, .72), rgba(184, 0, 98, .72)), #ff2e93 url(img/texture-pink-clay.jpg) center / 220px auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 5px rgba(120, 0, 62, .45), 0 0 0 2.5px #fff, 0 3px 0 2.5px var(--pink-under), 0 9px 12px rgba(90, 0, 45, .3);
}
.bars .yeartabs { margin-bottom: 26px; }
.dial-side .yeartabs { margin-bottom: 14px; }

:is(.t-proj, .t-build, .dial-table) :is(th, td), .bars-legend > li { transition: opacity .25s ease, background-color .25s ease; }
html[data-year="1"] :is(.t-proj, .t-build, .dial-table) :is(th, td):is(:nth-child(3), :nth-child(4)),
html[data-year="2"] :is(.t-proj, .t-build, .dial-table) :is(th, td):is(:nth-child(2), :nth-child(4)),
html[data-year="3"] :is(.t-proj, .t-build, .dial-table) :is(th, td):is(:nth-child(2), :nth-child(3)),
html[data-year="1"] .bars-legend > li:not(:nth-child(1)),
html[data-year="2"] .bars-legend > li:not(:nth-child(2)),
html[data-year="3"] .bars-legend > li:not(:nth-child(3)) { opacity: .26; }
html[data-year="1"] :is(.t-proj, .t-build, .dial-table) :is(th, td):nth-child(2),
html[data-year="2"] :is(.t-proj, .t-build, .dial-table) :is(th, td):nth-child(3),
html[data-year="3"] :is(.t-proj, .t-build, .dial-table) :is(th, td):nth-child(4) { background-color: var(--blush); }
@media (max-width: 820px) {
  html[data-year="1"] .t-build tbody td:is(:nth-child(3), :nth-child(4)),
  html[data-year="2"] .t-build tbody td:is(:nth-child(2), :nth-child(4)),
  html[data-year="3"] .t-build tbody td:is(:nth-child(2), :nth-child(3)) { display: none; }
  html:not([data-year="all"]) .t-build tbody td { background-color: transparent; }
}
@media (max-width: 640px) {
  html[data-year="1"] .t-proj :is(th, td):is(:nth-child(3), :nth-child(4)),
  html[data-year="2"] .t-proj :is(th, td):is(:nth-child(2), :nth-child(4)),
  html[data-year="3"] .t-proj :is(th, td):is(:nth-child(2), :nth-child(3)),
  html[data-year="1"] .bars-legend > li:not(:nth-child(1)),
  html[data-year="2"] .bars-legend > li:not(:nth-child(2)),
  html[data-year="3"] .bars-legend > li:not(:nth-child(3)) { display: none; }
  html:not([data-year="all"]) .t-proj { min-width: 0; }
}

.plate .tag--btn { border: 0; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 10px; transition: transform .12s ease, box-shadow .12s ease, opacity .5s ease; }
.plate .tag--btn:hover { transform: translateY(-1px); }
.plate .tag--btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(194, 0, 106, .14), 0 0 0 rgba(110, 0, 56, .42), 0 3px 6px rgba(70, 0, 36, .3); }
.chev { flex: none; width: 9px; height: 9px; margin: -4px 2px 0 0; border-right: 2.5px solid var(--pink-deep); border-bottom: 2.5px solid var(--pink-deep); transform: rotate(45deg); transition: transform .2s ease; }
.tag--btn[aria-expanded="true"] .chev { transform: rotate(225deg); margin-top: 4px; }
.menu-more { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 32px; margin: 2px 0 8px; padding: 24px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: var(--clay-card-pink); font-size: 15.5px; line-height: 1.4; }
.menu-more dt { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.menu-more dd { margin: 3px 0 0; font-weight: 600; }
@media (max-width: 640px) { .menu-more { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion that runs once on entering view (see js/page.js) ---------- */
.cu { font-variant-numeric: tabular-nums; }
.cu.is-counting { font-size: 0; }
.cu.is-counting::after { content: attr(data-live); font-size: var(--cu-fs); }

.mo-run.mo-rise { transition: transform .8s cubic-bezier(.28, 1.55, .45, 1); transition-delay: var(--mo-d, 0ms); will-change: transform; }
.mo-pre.mo-rise { transform: translateY(34px) scale(.95); }

.mo-run.mo-wipe { clip-path: inset(-60px -60px -60px -60px); transition: clip-path .95s cubic-bezier(.65, 0, .2, 1); transition-delay: var(--mo-d, 0ms); }
.mo-pre.mo-wipe { clip-path: inset(-60px 100% -60px 0); }

.mo-grow span { transform-origin: left center; }
.mo-run.mo-grow span { transition: transform .6s cubic-bezier(.3, 1.45, .5, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.mo-pre.mo-grow span { transform: scaleX(0); }

.rule9 { display: block; margin-top: clamp(14px, 1.6vw, 22px); max-width: 100%; overflow: visible; }
.rule9 path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.band--pink h2 .rule9 { filter: drop-shadow(0 1px 0 var(--pink-under)); }
.rule9-burin { fill: var(--light); stroke: #fff; stroke-width: 1.2; opacity: 0; }
.mo-run.mo-rule path { transition: stroke-dashoffset .95s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.mo-run.mo-rule .rule9-burin { animation: rule-burin 1.05s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes rule-burin { 0% { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(234px); opacity: 0; } }
.mo-pre.mo-rule path { stroke-dashoffset: 1; }

@media (prefers-reduced-motion: reduce) {
  .mo-pre { transform: none !important; clip-path: none !important; }
  .mo-pre.mo-grow span { transform: none !important; }
  .mo-pre.mo-rule path { stroke-dashoffset: 0 !important; }
}


/* ============ audit fixes, 15 Nov 2026 ============ */
/* a small "modelled estimate" tag for headings a reader can land on directly */
.est { display: inline-block; margin-left: 12px; padding: 5px 11px; border-radius: 999px; vertical-align: middle; white-space: nowrap;
  font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--deep);
  background: var(--light-soft); box-shadow: inset 0 0 0 1.5px var(--light); }

/* contrast: the plate number on the pink band was white on pink (3.5:1) */
.band--pink .plate-no { color: var(--wine); }

/* tap targets: nothing a finger has to hit is under 44 px */
.chip { height: 44px; padding: 0 17px; }
.yeartabs .chip { height: 44px; }
.replay { height: 44px; padding: 0 16px; font-size: 14px; }
.topnav-mark { padding: 14px 0; }
.tag--btn { min-height: 44px; }

/* small text a reader needs: nothing under 14 px for sentences, 12.5 px for labels */
.plate-cap { font-size: 14.5px; }
.tag small { font-size: 12.5px; }
.plait-roles .tag small { font-size: 12.5px; }
.menu-title span, .bars-title span { font-size: 13.5px; }
.bars-legend .tag { font-size: 14px; }
.dial-sub { font-size: 14px; }
.dial-table small { font-size: 12.5px; }
.pair figcaption, .arch figcaption, .carpanel figcaption { font-size: 14.5px; }
.tag--join { font-size: 14px; }

@media (max-width: 860px) {
  /* the film leads on phones: compact title, then the film, then the byline, note and button */
  .masthead-grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .masthead-copy { display: contents; }
  .greeting { order: 1; margin-bottom: 0; }
  .masthead-copy h1 { order: 2; }
  .film { order: 3; }
  .byline { order: 4; margin-top: 4px; }
  .masthead-note { order: 5; margin: 0; }
  .masthead-copy .clay { order: 6; align-self: flex-start; margin-top: 6px; }
  .wordmark { font-size: clamp(40px, 12vw, 60px); }
  .h1-sub { margin-top: 10px; font-size: 20px; }
}
@media (max-width: 640px) {
  /* plate caption: number and Replay on one row, then the name and the note at full width, so the name never runs under the button */
  .plate-cap { grid-template-columns: minmax(0, 1fr) auto; }
  .plate-no { grid-column: 1; grid-row: 1; align-self: center; }
  .replay { grid-column: 2; grid-row: 1; }
  .plate-name, .plate-note { grid-column: 1 / -1; white-space: normal; }
  .plait-roles .tag { font-size: 13.5px; }
  .plait-roles .tag small { font-size: 12.5px; }
  .menu-rows .tag { font-size: 14px; }
  .route-stops .tag { font-size: 14px; }
  .est { margin-left: 0; margin-top: 8px; display: table; }
  .dial-table { min-width: 340px; }
}

/* the name cut into the car doors: a canvas sits over the finished picture only while the lettering is being cut */
.car-etch { position: relative; }
.car-etch canvas { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }
.carpanel .replay { margin-left: 12px; vertical-align: middle; }
/* plate 1 keeps its proportions on wide screens, so the car above the beach is never cut off at the doors */
.plate--bleed .plate-stage { height: clamp(340px, 42vw, 1100px); }