/* The TVC live brochure. Indigo Passage palette, IBM Plex, a fixed 1920x1080 canvas. */

@font-face { font-family: 'Plex Serif'; font-weight: 200; font-display: swap; src: url(/brochure/fonts/plex-serif-latin-200.woff2) format('woff2'); }
@font-face { font-family: 'Plex Serif'; font-weight: 300; font-display: swap; src: url(/brochure/fonts/plex-serif-latin-300.woff2) format('woff2'); }
@font-face { font-family: 'Plex Serif'; font-weight: 400; font-display: swap; src: url(/brochure/fonts/plex-serif-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Plex Serif'; font-weight: 500; font-display: swap; src: url(/brochure/fonts/plex-serif-latin-500.woff2) format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 300; font-display: swap; src: url(/brochure/fonts/plex-sans-latin-300.woff2) format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 400; font-display: swap; src: url(/brochure/fonts/plex-sans-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 500; font-display: swap; src: url(/brochure/fonts/plex-sans-latin-500.woff2) format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 600; font-display: swap; src: url(/brochure/fonts/plex-sans-latin-600.woff2) format('woff2'); }

:root {
  --paper: #F7F8F7;
  --wash: #E8F0F5;
  --mist: #ADC5D7;
  --river: #527B9B;
  --brand: #064771;
  --ink: #11283A;
  --line: #D5DFE6;
  --soft: #D9E5ED; /* body text on brand blue */
  --ui: #1F1E1D; /* the controls around the page: Claude's dark palette */
  --ui-raised: #30302E;
  --ui-line: rgba(222, 220, 209, .15);
  --ui-text: #FAF9F5;
  --ui-dim: #C2C0B6;
  --serif: 'Plex Serif', Georgia, serif;
  --sans: 'Plex Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #262624; overflow: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--mist); color: var(--ink); }

/* The stage: one fixed page, scaled to fit whatever screen it is on. */
#stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden; transform: translate(-50%, -50%); transform-origin: 50% 50%; transition: left .45s var(--ease), transform .45s var(--ease); }
.js body:not(.ready) #stage { visibility: hidden; }

.page { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--paper); color: var(--ink); font: 400 24px/1.5 var(--sans); font-variant-numeric: lining-nums; }
.page.white { background: #fff; }
.page.wash { background: var(--wash); }
.page.blue { background: var(--brand); color: #fff; }
.page.ink { background: var(--ink); color: var(--paper); }
.page.black { background: #000; }

/* Running head and footer. The footer rule is the route: it fills as the story advances. */
.run { position: absolute; left: 96px; top: 52px; font: 400 24px/1 var(--serif); z-index: 3; }
.run b { font-weight: 400; margin-right: 10px; }
.foot { position: absolute; left: 96px; right: 96px; bottom: 34px; z-index: 3; }
.thread { position: relative; height: 1px; background: var(--line); }
.thread .done { position: absolute; left: 0; top: 0; height: 1px; background: var(--brand); }
.thread b { position: absolute; top: -3px; width: 1px; height: 7px; background: var(--river); }
.foot-row { display: flex; justify-content: space-between; margin-top: 13px; font-size: 16px; line-height: 1.2; }
.foot-row span b { font-weight: 500; margin-right: 14px; }
.foot-row em { font-style: normal; color: var(--river); margin-right: 30px; }
.blue .thread { background: rgba(255, 255, 255, .24); }
.blue .thread .done { background: #fff; }
.blue .thread b { background: var(--mist); }
.blue .foot-row em { color: var(--mist); }

/* Type. */
.st { font-family: var(--serif); font-weight: 300; line-height: 1.05; letter-spacing: -.022em; }
.st > span { display: block; }
.st > span:first-child { color: var(--river); }
.st > span:last-child { color: var(--brand); }
.st > .i { padding-left: 1.1em; }
.st.xxl { font-size: 196px; line-height: 1; }
.st.xl { font-size: 142px; }
.st.l { font-size: 100px; }
.st.m { font-size: 78px; }
.blue .st > span:first-child { color: #fff; }
.blue .st > span:last-child { color: var(--mist); }
.lead { font: 300 36px/1.32 var(--serif); letter-spacing: -.008em; color: var(--ink); }
.blue .lead { color: #fff; }
.note { margin-top: 26px; font-size: 19px; line-height: 1.45; color: var(--river); max-width: 560px; }
.note.wide { max-width: 600px; }
.blue .note { color: var(--mist); }
.h { font: 400 38px/1.2 var(--serif); color: var(--brand); }
.mt { margin-top: 40px; }
.mt-s { margin-top: 26px; }

/* The line reveal masks each line; this keeps descenders inside the mask. */
.ln-split-mask { padding: .08em .06em .24em; margin: -.08em -.06em -.24em; }

/* Frames. */
.b { position: absolute; left: 96px; right: 96px; top: 124px; bottom: 104px; }
.stack { display: flex; flex-direction: column; justify-content: space-between; }
.head-row { display: grid; grid-template-columns: 1040px 1fr; gap: 72px; align-items: end; }
.chart { display: block; overflow: visible; }
.chart.bleed { position: absolute; inset: 0; }
.chart-right { display: flex; justify-content: flex-end; align-items: center; }

/* Art slots. Empty ones hold their place until the artwork lands in public/brochure/art. */
.plate { position: absolute; background: var(--wash); overflow: hidden; }
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate.full { inset: 0; }
.plate.cover { background: #000; }
.plate.side { right: 0; top: 0; bottom: 0; width: 760px; }
.plate.side:not(.empty) { background: none; }
.plate.side img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); mask-image: linear-gradient(90deg, transparent, #000 20%); }
.plate.strip { right: 96px; top: 64px; width: 720px; height: 230px; }
.plate.empty::after { content: attr(data-art); position: absolute; right: 22px; bottom: 16px; font: 400 14px/1 var(--sans); color: var(--river); opacity: .7; }
.plate.empty.cover::after { content: none; }
.page.wash .plate.empty { background: transparent; }

/* The wing: cropped, huge, tone on tone. */
.wing { position: absolute; fill: #fff; opacity: .055; pointer-events: none; }
.wing.hero { width: 1760px; height: auto; right: -320px; top: -210px; }
.wing.drift { width: 1500px; height: auto; right: -420px; bottom: -300px; }
.wing.back { opacity: .05; }

/* Title and back cover. */
.title-block { position: absolute; left: 96px; top: 150px; right: 96px; }
.title-block .lead { margin-top: 56px; max-width: 980px; font-size: 36px; color: var(--soft); }
.title-foot { position: absolute; left: 96px; right: 96px; bottom: 64px; display: flex; justify-content: space-between; align-items: flex-end; }
.title-foot p { font-size: 18px; line-height: 1.5; text-align: right; color: var(--mist); }
.logo { display: block; width: 300px; height: auto; color: #fff; }
.back-block { position: absolute; left: 96px; bottom: 80px; }
.back-block p { margin-top: 28px; font-size: 18px; color: var(--mist); }

/* Chapter openers: the left of the art is left open for the words. */
.open { position: absolute; left: 96px; top: 164px; width: 900px; }
.bignum { font: 200 150px/1 var(--serif); color: var(--river); margin-bottom: 36px; letter-spacing: -.03em; }
.open .lead { margin-top: 44px; max-width: 640px; }

/* Prologue. */
.pro { right: 840px; top: 150px; }
.pro .st.xl { font-size: 100px; }
.pro-text { margin-top: 56px; max-width: 900px; display: grid; gap: 24px; font-size: 26px; line-height: 1.5; }

/* Contents. */
.contents-head { position: absolute; left: 96px; top: 128px; }
.stop { position: absolute; display: block; width: 330px; z-index: 2; }
.stop .num { font: 300 25px/1 var(--serif); color: var(--river); }
.stop h2 { font: 300 46px/1.12 var(--serif); letter-spacing: -.012em; color: var(--brand); margin-top: 8px; }
.stop p { font-size: 20px; line-height: 1.4; margin-top: 8px; }
.stop .pg { display: block; margin-top: 8px; font-size: 17px; color: var(--river); }
.stop:hover h2 { color: var(--ink); }
.stone-dot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 9px #fff, 0 0 0 10px var(--mist); }
.path { fill: none; stroke: var(--mist); stroke-width: 3; }
.path.soft { stroke: var(--wash); stroke-width: 26; stroke-linecap: round; }

/* Lists. */
.rows { align-self: start; }
.row { display: grid; grid-template-columns: 300px 1fr; gap: 36px; padding: 25px 0 27px; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row h2 { font: 400 30px/1.2 var(--serif); letter-spacing: -.006em; color: var(--brand); }
.row p { font-size: 23px; line-height: 1.42; }
.blue .row { border-color: rgba(255, 255, 255, .24); }
.blue .row h2 { color: #fff; }
.blue .row p { color: var(--soft); }

.cols { display: grid; gap: 40px; }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.col { border-top: 1px solid var(--brand); padding-top: 22px; }
.col h2 { font: 400 34px/1.18 var(--serif); color: var(--brand); margin-bottom: 18px; min-height: 2.36em; }
.col p { font-size: 24px; line-height: 1.42; }
.cols-3 .col h2 { min-height: 0; font-size: 28px; margin-bottom: 8px; }
.cols-3 .col p { font-size: 21px; line-height: 1.4; }

.figure { display: flex; align-items: flex-end; gap: 22px; margin-top: 56px; }
.figure b { font: 200 190px/.82 var(--serif); color: var(--brand); letter-spacing: -.03em; }
.figure span { font-size: 24px; line-height: 1.3; color: var(--river); max-width: 220px; padding-bottom: 6px; }
.figure.small { margin-top: 26px; }
.figure.small b { font-size: 84px; }
.figure.small span { max-width: 460px; font-size: 19px; padding-bottom: 2px; }

/* Grids per composition. */
.two-a { display: grid; grid-template-columns: 760px 1fr; gap: 72px; align-items: center; }
.two-a .st.l { font-size: 88px; }
.two-b { display: grid; grid-template-columns: 720px 1fr; gap: 28px; align-items: center; }
.two-c { display: grid; grid-template-columns: 660px 1fr; gap: 56px; align-items: center; }
.two-d { display: grid; grid-template-columns: 720px 1fr; gap: 72px; align-items: center; }
.two-d .row { grid-template-columns: 230px 1fr; gap: 30px; }
.two-e { display: grid; grid-template-columns: 800px 1fr; gap: 64px; align-items: center; }
.two-e .row { grid-template-columns: 260px 1fr; gap: 30px; padding: 20px 0 22px; }
.two-e .row h2 { font-size: 28px; }
.two-e .row p { font-size: 21px; }
.statement { margin-top: 56px; font: 300 44px/1.26 var(--serif); letter-spacing: -.012em; color: #fff; }
.two-f { display: grid; grid-template-columns: 560px 1fr; gap: 56px; align-items: center; }
.two-g { display: grid; grid-template-columns: 700px 1fr; gap: 64px; align-items: center; }
.two-i { display: grid; grid-template-columns: 760px 1fr; gap: 0; align-items: center; }
.two-i p:not(.lead) { color: var(--soft); }
.two-j { display: grid; grid-template-columns: 700px 1fr; gap: 72px; align-items: center; }
.two-j .row { grid-template-columns: 280px 1fr; gap: 30px; }
.two-k { display: grid; grid-template-columns: 640px 1fr; gap: 40px; align-items: center; }

/* Tables. */
.tbl { font-size: 23px; line-height: 1.36; }
.tr { display: grid; grid-template-columns: var(--cols); column-gap: 32px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.tr.th { padding: 0 0 13px; border-top: 0; align-items: end; font-size: 19px; line-height: 1.25; color: var(--river); }
.tbl b { display: block; font: 400 27px/1.2 var(--serif); color: var(--brand); }
.tbl small { display: block; margin-top: 3px; font-size: 18px; color: var(--river); }
.tbl .pos { font: 500 22px/1.3 var(--sans); }
.tbl .nm { font: 300 44px/1 var(--serif); color: var(--brand); }
.tbl.dd .tr { padding: 27px 0; }
.tbl.dd b { font-size: 29px; }
.own { position: relative; height: 22px; background: var(--wash); }
.own i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); }
.tbl.compare .tr { padding: 0; align-items: stretch; }
.tbl.compare .tr > div { padding: 30px 0; display: flex; align-items: center; }
.tbl.compare .tr.th > div { padding: 18px 0; align-items: flex-end; }
.tbl.compare .tr > div:nth-child(2) { background: var(--brand); color: #fff; padding-left: 30px; padding-right: 20px; font-weight: 500; }
.tbl.compare .tr.th > div:nth-child(2) { font: 400 30px/1 var(--serif); }

/* Dot field. */
.dots-page { display: flex; flex-direction: column; justify-content: space-between; top: 118px; bottom: 96px; }
.dots-head { display: grid; grid-template-columns: 1120px 1fr; gap: 56px; align-items: end; }
.dots-head .lead { color: var(--soft); font-size: 32px; }

.ridge-head { position: absolute; left: 96px; top: 128px; }
.leader { stroke: var(--mist); stroke-width: 1.2; }
.leader.dark { stroke: var(--river); }
.big { font: 300 66px/1 var(--serif); fill: var(--brand); letter-spacing: -.02em; }
.big.sm { font-size: 46px; }
.big.xs { font-size: 36px; }
.big.xxs { font-size: 28px; }
.big.huge { font-size: 104px; }
.big.light, .name.light { fill: #fff; }
.big.mid { font-size: 32px; }
.big.ink { fill: var(--ink); }
.name { font: 400 25px/1 var(--sans); fill: var(--ink); }
.name.sm { font-size: 20px; }
.blue .big, .blue .name { fill: #fff; }
.blue .name { fill: var(--soft); }
.track { fill: #fff; }
.paper .track { fill: var(--wash); }
.bar { fill: var(--brand); }
.val { font: 400 30px/1 var(--sans); fill: #fff; }
.val.out { fill: var(--brand); }
.slice { stroke: #fff; stroke-width: 2; }
.hair { stroke: var(--line); stroke-width: 1; }
.water { fill: var(--wash); }
.node { fill: #fff; }
.paper .node { fill: var(--brand); }
.cord { fill: none; stroke: var(--mist); stroke-width: 1.5; }
.hub { fill: #fff; }
.hubtext { font: 400 26px/1 var(--serif); fill: var(--brand); }
.blue .chart text.big.ink { fill: #fff; }

.legend { display: grid; gap: 11px; margin-top: 30px; }
.legend li { display: flex; align-items: center; font-size: 21px; line-height: 1.25; }
.legend i { flex: none; width: 30px; height: 18px; margin-right: 14px; }
.legend b { font-weight: 400; color: var(--river); margin-left: 6px; }

/* Reach. */
.reach { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; }
.pairs { display: grid; gap: 17px; margin-top: 20px; }
.pairs dt { font-weight: 500; font-size: 23px; color: var(--brand); }
.pairs dd { font-size: 22px; line-height: 1.4; }
.aside { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mist); font: 300 25px/1.34 var(--serif); }

/* TCG. */
.stat-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 780px; background: #fff; padding: 96px 96px 124px 76px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; align-content: space-between; z-index: 1; }
.stat-panel b { display: block; font: 300 84px/1 var(--serif); color: var(--brand); letter-spacing: -.024em; }
.stat-panel span { display: block; margin-top: 12px; font-size: 22px; line-height: 1.25; }
.stat-panel small { display: block; margin-top: 3px; font-size: 18px; color: var(--river); }
.tcg { right: 856px; }
.tcg .st.l { font-size: 92px; }
.tcg-text { margin-top: 30px; display: grid; gap: 14px; font-size: 23px; line-height: 1.44; }
.tcg .h { margin-top: 32px; }
.countries { margin-top: 8px; font-size: 21px; line-height: 1.46; }

/* One team. */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.stage { border-top: 1px solid var(--brand); padding-top: 18px; }
.stage-n { display: flex; align-items: baseline; gap: 12px; font-size: 21px; color: var(--river); }
.stage-n b { font: 200 62px/1 var(--serif); color: var(--brand); }
.stage h2 { margin: 12px 0 14px; font: 400 34px/1.2 var(--serif); color: var(--brand); }
.stage li { font-size: 22px; line-height: 1.36; padding: 11px 0; border-top: 1px solid var(--line); }

/* Sectors. */
.sectors { display: grid; grid-template-columns: 860px 1fr; gap: 60px; align-items: center; top: 96px; bottom: 90px; }
.sectors .note { margin-top: 18px; }
.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 40px; }
.sector-cell { border-top: 1px solid var(--brand); padding-top: 16px; }
.sector-cell b { display: block; font: 200 74px/1 var(--serif); color: var(--brand); letter-spacing: -.024em; }
.sector-cell h2 { margin: 12px 0 8px; font: 400 29px/1.18 var(--serif); color: var(--brand); min-height: 2.36em; }
.sector-cell p { font-size: 21px; line-height: 1.36; }

.mini-stats { display: grid; gap: 14px; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 18px; }
.mini-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.mini-stats dt { font-size: 22px; }
.mini-stats dd { font: 300 60px/1 var(--serif); color: var(--brand); }
.wash .mini-stats { border-color: var(--mist); }

/* Process. */
.proc-head { position: absolute; left: 96px; top: 124px; }
.proc-head .lead { margin-top: 12px; font-size: 30px; }
.proc-head .lead b { font-weight: 400; color: var(--river); margin-right: 8px; }
.step { position: absolute; width: 530px; }
.step-n { font: 200 128px/1 var(--serif); color: var(--brand); letter-spacing: -.03em; }
.step h2 { margin: 10px 0 12px; font: 400 40px/1.15 var(--serif); color: var(--brand); }
.step p { font-size: 23px; line-height: 1.42; }
.step .step-n { font-size: 128px; line-height: 1; }
.key { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--mist); font-weight: 500; color: var(--brand); }
.key span { display: block; font-weight: 400; font-size: 18px; color: var(--river); }

/* Identity. */
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; }
.ladder li { position: relative; }
.ladder .ln { position: absolute; left: 150px; top: 8px; font: 200 44px/1 var(--serif); color: var(--river); }
.ladder h2 { margin: 18px 0 6px; font: 400 33px/1.16 var(--serif); color: var(--brand); }
.ladder p { font-size: 22px; line-height: 1.38; }
.ring { fill: none; stroke: var(--brand); stroke-width: 1.5; }
.fill { fill: var(--brand); }
.callout { display: grid; grid-template-columns: 720px 1fr; gap: 56px; align-items: center; padding: 28px 40px; background: var(--brand); color: #fff; }
.callout h2 { font: 300 40px/1.18 var(--serif); letter-spacing: -.008em; }
.callout p { font-size: 22px; line-height: 1.42; color: var(--soft); }

/* Live figures in a row. */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
.figures > div { border-top: 1px solid rgba(255, 255, 255, .32); padding-top: 20px; }
.figures b { display: block; font: 200 136px/1 var(--serif); letter-spacing: -.03em; color: #fff; font-variant-numeric: lining-nums; }
.figures span { display: block; margin-top: 12px; font-size: 25px; line-height: 1.3; color: var(--soft); }
.figures small { display: block; margin-top: 4px; font-size: 19px; color: var(--mist); }

.figures.pair { grid-template-columns: repeat(2, 1fr); gap: 28px 44px; margin-top: 44px; }
.figures.pair b { font-size: 84px; }
.figures.pair span { margin-top: 6px; font-size: 22px; }

/* Five sliding doors, each left a little open. */
.doors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; }
.door-frame { display: block; position: relative; height: 280px; overflow: hidden; background: var(--wash); border: 1px solid var(--mist); }
.door-frame i { position: absolute; inset: 0 26% 0 0; }
.door-frame i::after { content: ''; position: absolute; right: 16px; top: 44%; width: 3px; height: 13%; background: rgba(255, 255, 255, .7); }
.door:nth-child(1) i { background: #94B1C6; }
.door:nth-child(2) i { background: #7698B2; }
.door:nth-child(3) i { background: #527B9B; }
.door:nth-child(4) i { background: #2F7099; }
.door:nth-child(5) i { background: #064771; }
.door .nb { white-space: nowrap; }
.door h2 { margin-top: 22px; font: 400 31px/1.16 var(--serif); color: var(--brand); }
.door p { margin-top: 10px; font-size: 22px; line-height: 1.38; }

/* Three themed columns. */
.stages.three { grid-template-columns: repeat(3, 1fr); gap: 48px; }
.stage li b { display: block; font-weight: 500; color: var(--brand); }
.blue .stage { border-top-color: rgba(255, 255, 255, .4); }
.blue .stage-n { color: var(--mist); }
.blue .stage h2 { color: #fff; }
.blue .stage li { border-top-color: rgba(255, 255, 255, .2); color: var(--soft); }
.blue .stage li b { color: #fff; }

/* Fee route. */
.fee-route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; position: relative; }
.fee-step { position: relative; padding-top: 40px; }
.fee-step::before { content: ''; position: absolute; left: 0; right: -44px; top: 8px; height: 1px; background: var(--river); }
.fee-step:last-child::before { right: 0; }
.fee-step::after { content: ''; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--brand); }
.fee-when { font-size: 23px; color: var(--river); }
.fee-value { margin-top: 4px; font: 200 84px/1.05 var(--serif); letter-spacing: -.024em; color: var(--brand); }
.fee-sub { margin-top: 2px; font-size: 24px; font-weight: 500; }
.fee-step ul { margin-top: 16px; }
.fee-step li { padding: 9px 0; font-size: 22px; line-height: 1.34; border-top: 1px solid var(--mist); }

/* Referral. */
.referral { display: grid; grid-template-columns: 760px 1fr; gap: 72px; align-items: center; }
.rate { font: 200 200px/.95 var(--serif); letter-spacing: -.04em; color: #fff; white-space: nowrap; }
.rate-note { margin-top: 18px; font: 300 36px/1.3 var(--serif); color: var(--soft); }
.referral .row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .24); }

/* The bridge. */
.pier.left { fill: var(--river); }
.pier.right { fill: var(--brand); }
.deck { fill: none; stroke-width: 12; }
.deck.left { stroke: var(--river); }
.deck.right { stroke: var(--brand); }
.meet { fill: #fff; stroke: var(--brand); stroke-width: 5; }
.rail { fill: none; stroke: var(--mist); stroke-width: 2; }
.tide-line { stroke: var(--mist); stroke-width: 1; }
.bank { fill: var(--wash); }
.pier-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; margin-top: 12px; }
.pier-steps li { text-align: center; }
.pier-steps b { display: block; font: 200 62px/1 var(--serif); color: var(--brand); }
.pier-steps h2 { margin: 8px 0 6px; font: 400 33px/1.16 var(--serif); color: var(--brand); }
.pier-steps p { font-size: 23px; line-height: 1.38; }

/* Data room. */
.two-h { display: grid; grid-template-columns: 800px 1fr; grid-template-rows: auto auto; gap: 30px 56px; align-content: space-between; }
.two-h .st.l { font-size: 84px; }
.two-h .lead { font-size: 29px; }
.room-notes { grid-column: 1 / -1; }
.room { background: #fff; box-shadow: 0 12px 32px rgba(6, 71, 113, .1); align-self: center; }
.room-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 22px; background: var(--ink); color: #fff; font-size: 17px; }
.room-bar b { font-weight: 500; }
.room-bar span { color: var(--mist); font-size: 15px; }
.room-body { display: grid; grid-template-columns: 1fr 340px; }
.two-h .mini-stats { margin-top: 24px; padding-top: 14px; gap: 8px; }
.two-h .mini-stats dd { font-size: 48px; }
.room-index { padding: 12px 22px; }
.room-index li { display: flex; gap: 16px; padding: 13px 0; font-size: 22px; border-bottom: 1px solid var(--line); }
.room-index li:last-child { border-bottom: 0; }
.room-index span { color: var(--river); width: 16px; }
.room-link { padding: 18px 22px; background: var(--wash); }
.room-link dt { font-weight: 500; font-size: 20px; color: var(--brand); margin-bottom: 8px; }
.room-link dd { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 20px; }
.sw { position: relative; width: 40px; height: 20px; background: var(--mist); }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #fff; }
.sw.on { background: var(--brand); }
.sw.on::after { left: 23px; }

/* Services. */
.zero { position: absolute; left: 80px; bottom: 96px; font: 200 480px/.78 var(--serif); color: var(--wash); letter-spacing: -.04em; }
.figure-label { position: absolute; left: 340px; bottom: 16px; font-size: 26px; color: var(--river); }
.two-j > div:first-child { align-self: start; padding-top: 26px; }

/* FAQ. */
.faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; }
.faq div { border-top: 1px solid var(--brand); padding-top: 18px; }
.faq dt { font: 400 35px/1.2 var(--serif); color: var(--brand); min-height: 2.4em; }
.faq dd { margin-top: 12px; font-size: 24px; line-height: 1.4; }

/* Fees. */

/* Contact. */
.contact { display: flex; flex-direction: column; justify-content: space-between; top: 150px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 56px; border-top: 1px solid var(--brand); padding-top: 26px; }
.contact-grid h2 { font: 400 34px/1.2 var(--serif); color: var(--brand); margin-bottom: 12px; }
.contact-grid p { font-size: 23px; line-height: 1.44; margin-top: 8px; }
.contact-grid a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }

/* Transitions. */
#mist { position: absolute; left: 0; top: 0; width: 3000px; height: 1080px; z-index: 50; visibility: hidden; pointer-events: none;
  background: linear-gradient(90deg, rgba(247, 248, 247, 0) 0, rgba(247, 248, 247, .85) 14%, #F7F8F7 26%, #E8F0F5 50%, #F7F8F7 74%, rgba(247, 248, 247, .85) 86%, rgba(247, 248, 247, 0) 100%); }
#tide { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 51; visibility: hidden; pointer-events: none; }

/* Controls: hidden until the mouse moves. */
#bar { position: fixed; left: calc(50% + var(--dock, 0px) / 2); bottom: 20px; display: flex; align-items: center; gap: 2px; padding: 4px; transform: translate(-50%, 10px); background: var(--ui); color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 12px; font: 400 14px/1 var(--sans); opacity: 0; pointer-events: none; transition: opacity .2s, transform .35s var(--ease), left .45s var(--ease); z-index: 90; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
body.ui #bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#bar > * { padding: 10px 13px; border-radius: 8px; white-space: nowrap; }
#bar button, #bar a { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; transition: background .15s; }
#bar button:hover, #bar a:hover { background: var(--ui-raised); }
#bar .main, #bar .main:hover { background: var(--ui-text); color: var(--ui); font-weight: 500; }
#bar .main:hover { background: #fff; }
#bar .main[aria-busy='true'] { cursor: progress; opacity: .8; }
#pos { color: var(--ui-dim); font-variant-numeric: tabular-nums; }
.edge { position: fixed; top: 50%; width: 40px; height: 40px; margin-top: -20px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui); color: var(--ui-text); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .2s, background .15s, left .45s var(--ease); z-index: 90; }
.edge.prev { left: calc(var(--dock, 0px) + 14px); }
.edge.next { right: 14px; }
.edge svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.ui .edge { opacity: 1; pointer-events: auto; }
.edge:hover { background: var(--ui-raised); }
.edge[disabled] { visibility: hidden; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ui-text); outline-offset: 2px; }

/* The slide list: opens from the left on right-click. */
#index { position: fixed; left: 0; top: 0; bottom: 0; width: 300px; max-width: 100vw; z-index: 85; display: flex; flex-direction: column; background: var(--ui); color: var(--ui-text); border-right: 1px solid var(--ui-line); font: 400 13px/1.38 var(--sans); transform: translateX(-100%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
body.slides #index { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.index-head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 10px 12px 16px; }
.index-head p { min-width: 0; font-size: 14px; }
.index-head b { font-weight: 500; }
.index-head span { color: var(--ui-dim); margin-left: 4px; }
#index-close { flex: none; width: 32px; height: 32px; padding: 7px; border: 0; border-radius: 8px; background: none; color: var(--ui-dim); cursor: pointer; transition: background .15s, color .15s; }
#index-close:hover { background: var(--ui-raised); color: var(--ui-text); }
#index-close svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#index ol { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 24px; scrollbar-width: thin; scrollbar-color: var(--ui-raised) transparent; }
#index li { flex: none; }
#index li.chapter { margin-top: 6px; }
#index a { display: block; border-radius: 10px; outline-offset: 3px; }
.thumb { position: relative; display: block; width: 268px; height: 151px; overflow: hidden; contain: strict; border-radius: 8px; background: var(--ui-raised); box-shadow: 0 0 0 1px var(--ui-line); transition: box-shadow .15s; }
.thumb .page { inset: auto; left: 0; top: 0; transform: scale(.13958); transform-origin: 0 0; pointer-events: none; }
.slide-name { display: flex; gap: 8px; margin-top: 7px; color: var(--ui-dim); transition: color .15s; }
.slide-name span { flex: none; min-width: 16px; color: #8B8980; font-variant-numeric: tabular-nums; }
#index li.chapter .slide-name { color: var(--ui-text); font-weight: 500; }
#index a:hover .thumb { box-shadow: 0 0 0 1px rgba(222, 220, 209, .4); }
#index a:hover .slide-name { color: var(--ui-text); }
#index a[aria-current='page'] .thumb { box-shadow: 0 0 0 2px var(--ui), 0 0 0 4px var(--ui-text); }
#index a[aria-current='page'] .slide-name { color: var(--ui-text); }
#index a[aria-current='page'] .slide-name span { color: var(--ui-text); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* The PDF: every page in a row, exactly 1920x1080. */
@page { size: 1920px 1080px; margin: 0; }
body.print { background: #fff; overflow: visible; height: auto; }
body.print .page { position: relative; inset: auto; break-after: page; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.print .page:last-child { break-after: auto; }