/* /approach: how Lu Jia Jun plans. Top to bottom: the first screen with the headline across the bottom, a short
   intro, two pictures, a statement and three principles, the steps with a picture column pinned beside them on wide
   screens, his planning style, the film, the reviews (.cv-proof), the closing call (.cv-call) and
   the licence disclaimer.
   Colours: a near-black ground with Night Turquoise smoke behind it (approach.js draws it). Every word is a cream tint
   of Muted Khaki, and links are Muted Khaki itself, one tone darker than the text.
   Muted Khaki also draws the marks (the pointer, focus). Anzac is only inside the logo.
   Everything reads with no script. The script adds .cv-motion (reveals) and .cv-pin (the pinned steps). */

@font-face { font-family: "Cover Display"; src: url("/fonts/Imbue-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* The small text: Mona Sans (GitHub, SIL Open Font License), at its widest and in a light weight. */
@font-face { font-family: "Cover Text"; src: url("/fonts/MonaSans-Variable-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  --cv-ground: #050505;
  --cv-ink: #E5E2CB;           /* every word: Muted Khaki tinted 55% towards white */
  --cv-kh: #C6BE8B;            /* Muted Khaki: links and marks */
  --cv-nt: #004137;            /* Night Turquoise: the smoke, text selection */
  --cv-rule: rgba(229, 226, 203, .28);
  --cv-gut: 3.5%;
  --cv-ease: cubic-bezier(.625, .05, 0, 1);   /* the letter roll */
  --cv-out: cubic-bezier(.16, 1, .3, 1);      /* expo out */
  --cv-p3: cubic-bezier(.215, .61, .355, 1);  /* power3 out */
  --cv-io: cubic-bezier(.76, 0, .24, 1);      /* power4 in-out */
  --cv-display: "Cover Display", "Libre Baskerville", Georgia, serif;
  --cv-text: "Cover Text", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cv-ground); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: transparent; color: var(--cv-ink);
  font: 280 1rem/1.5 var(--cv-text); font-stretch: 125%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cv-kh); outline-offset: 4px; }
::selection { background: var(--cv-nt); color: var(--cv-ink); }

/* the light behind the page: fixed, under everything */
#cv-bg {
  position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 8% 12%, rgba(0, 65, 55, .62), transparent 70%),
    radial-gradient(50vw 60vh at 85% 75%, rgba(224, 184, 72, .11), transparent 70%),
    var(--cv-ground);
}
#cv-bg canvas { display: block; width: 100%; height: 100%; }

.cv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── type ──
   The display face has no width axis, but a step up in weight widens its letters by about 5%, so the two big sizes
   are set at 595 and the smaller lines at 705. At 595 the headline's second line is 1171.8 px wide in a 1997 px
   window. */
.cv-h1, .cv-h2, .cv-h3, .cv-step__t, .cv-lines, .cv-nav__h {
  font-family: var(--cv-display); font-weight: 595; font-stretch: normal; font-optical-sizing: auto;
}
.cv-up { font-size: .9rem; font-weight: 280; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; }
.cv-h2 { max-width: 6.9em; margin: 0 auto; font-size: 7vw; line-height: 1.1; text-align: center; }
.cv-h3 { font-size: 3rem; line-height: 1.1; }

/* links: [ words ] with a letter roll on hover */
.cv-link {
  display: inline-block; color: var(--cv-kh); text-decoration: none;
  font: 280 .85rem/1.3 var(--cv-text); font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase;
}
/* the brackets are drawn, not read out: the empty text after the slash is what a screen reader gets */
.cv-link::before { content: "[ "; content: "[ " / ""; }
.cv-link::after { content: " ]"; content: " ]" / ""; }
/* the big links take the display face; set after .cv-link, whose font shorthand would otherwise reset it */
.cv-link--big {
  font-family: var(--cv-display); font-weight: 500; font-stretch: normal; font-optical-sizing: auto;
  font-size: min(2rem, 7vw); line-height: 1.3; letter-spacing: 0; text-transform: none;
}
/* The display face has an optical-size axis (10 to 100): auto matches the cut to the type size, so small lines get
   sturdier strokes than the hairline cut made for the headline. The smaller display lines are also set heavier. */
.cv-lines, .cv-h3, .cv-step__t, .cv-nav__h, .cv-link--big { font-weight: 705; letter-spacing: .01em; }
.cv-w { display: inline-block; white-space: nowrap; }
.cv-ch { display: inline-block; overflow: hidden; line-height: 1.3; vertical-align: top; }
.cv-ch > span { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform .6s var(--cv-ease); transition-delay: calc(var(--i, 0) * 10ms); }
a:hover .cv-ch > span, a:focus-visible .cv-ch > span { transform: translateY(-1.3em); }

/* a picture: cropped to its box */
.cv-pic { overflow: hidden; }
.cv-pic img { width: 100%; height: 100%; object-fit: cover; }

/* ── the first screen: nav at the top, the headline across the bottom ── */
.cv-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 1.4rem var(--cv-gut) 0; }
.cv-nav__home { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.cv-logo { display: block; width: max(12rem, 16.7vw); }   /* the logo stands 4.3% of the window's width tall */
.cv-nav__cols { display: flex; gap: clamp(2.5rem, 7vw, 7rem); padding-top: 1.6rem; }
.cv-nav__h { margin-bottom: .55rem; font-size: 1.75rem; line-height: 1.1; }
.cv-nav__col ul { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.cv-h1 { margin: max(4rem, calc(50vh - 10.5rem)) 10% 0; font-size: 10vw; line-height: 1.1; }
.cv-h1__l { display: block; }
.cv-h1__l--2 { text-align: right; }

/* ── the intro: one line about him, then one sentence over four lines ── */
.cv-intro { padding: 6rem var(--cv-gut) 10rem; }
.cv-intro__p { width: 26rem; max-width: 100%; margin: 0 auto; text-indent: 4rem; }
.cv-h2.cv-intro__h { max-width: 9em; }
/* a first screen that holds one short headline and nothing else */
.cv-hero--tall { min-height: 100vh; }
/* a longer two-line headline: it sits a little higher, so its second line clears the adviser's card */
.cv-hero--approach .cv-h1 { margin-top: max(4rem, calc(50vh - 15rem)); }
.cv-lines { max-width: 18em; margin: clamp(6rem, 9vw, 8rem) auto 0; font-size: 3vw; line-height: 1.39; text-align: center; }
.cv-lines > span { display: block; }
.cv-lines > span + span { margin-top: 1.5em; }

/* ── two pictures: a big one from the left edge, a small one beside it ── */
.cv-pics { display: flex; align-items: flex-start; gap: 1.67vw; }
.cv-pics__big { flex: none; width: 65vw; aspect-ratio: 936 / 655; }
.cv-pics__little { flex: none; width: 20vw; aspect-ratio: 288 / 376; }

/* ── what you can expect: a statement, then three things set out across the width ── */
.cv-expect { padding: 12rem 0 8rem; }
/* its second line, "Traditional approach.", is the widest the statement gets: room for it on one line at every size */
.cv-expect .cv-h2 { max-width: 7.6em; }
/* the principles' titles are longer here than the grid was drawn for: the middle column is wider and the titles
   shrink with the window, so each title keeps to two lines */
.cv-expect .cv-h3 { font-size: min(3rem, 3.6vw); }
@media (min-width: 992px) { .cv-expect .cv-pr { grid-template-columns: 9vw 31vw 30vw 1fr; } }
.cv-pr { display: grid; grid-template-columns: 13.8vw 34.5vw 21.5vw 1fr; margin-top: 8rem; }
.cv-pr__i { display: flex; flex-direction: column; gap: 1.5rem; }
.cv-pr__i:nth-child(1) { grid-column: 2; }
.cv-pr__i:nth-child(2) { grid-column: 3; }
.cv-pr__i:nth-child(3) { grid-column: 4; }
.cv-pr .cv-up { max-width: 15rem; }

/* ── the five steps. Narrow screens, and no script: each step's picture above its words ── */
.cv-how { padding: 9rem 0 14rem; }
.cv-step { display: flex; flex-direction: column; }
.cv-step__media { order: -1; }
.cv-step__vis { margin-left: 2.5%; aspect-ratio: 792 / 905; }
.cv-step__vis--1 { width: 95%; }
.cv-step__vis--2 { width: 87.6%; }
.cv-step__vis .cv-pic { width: 100%; height: 100%; }
.cv-step__text { margin: 4.4rem 0 4.4rem 29%; max-width: 22rem; }
.cv-step__t { max-width: 7.25em; margin-bottom: 1.5rem; font-size: 3rem; line-height: 1.1; }
.cv-step__text .cv-up { max-width: 15rem; }

/* wide screens with the script: the words on the left, one picture pinned on the right.
   The script marks each step before, active or after (whichever step's words sit nearest the window's middle is
   active). The active step's words show at full strength and the rest dim; the pictures of every step up to the
   active one show, so the active one, later in the page, covers the earlier ones and fades in over them. */
@media (min-width: 992px) {
  .cv-pin .cv-steps { position: relative; padding: 23vh 0 30vh; }
  .cv-pin .cv-step { min-height: 50vh; justify-content: center; }
  .cv-pin .cv-step__text { width: 24.2vw; max-width: none; margin: 0 0 0 10.6vw; opacity: .25; transition: opacity .5s ease-in-out; }
  .cv-pin .cv-step[data-status="active"] .cv-step__text { opacity: 1; }
  .cv-pin .cv-step__media { position: absolute; top: 0; bottom: 0; left: 49.8vw; width: 39.6vw; pointer-events: none; }
  .cv-pin .cv-step__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
  .cv-pin .cv-step__vis { width: 100%; max-height: 90vh; margin: 0; aspect-ratio: 570 / 652; opacity: 0; visibility: hidden; transition: opacity .5s ease-in-out, visibility .5s ease-in-out; }
  .cv-pin .cv-step[data-status="before"] .cv-step__vis,
  .cv-pin .cv-step[data-status="active"] .cv-step__vis { opacity: 1; visibility: visible; }
  .cv-pin-now .cv-step__vis, .cv-pin-now .cv-step__text { transition: none; }
}


/* ── the close: two pictures and the links, the logo, then who he is between two hairlines ── */
.cv-foot__top { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 0 var(--cv-gut); }
.cv-foot__pics { display: flex; align-items: flex-start; gap: 1.25vw; }
.cv-foot__pic { flex: none; width: 25.6vw; aspect-ratio: 710 / 972; }
.cv-foot__pic--little { width: 12.6vw; aspect-ratio: 181 / 247; }
/* The link column sits against the right margin: big links 2rem with 76 px from one to the next, small links
   46 px apart, at a 1997 px window. */
.cv-foot__links { display: flex; flex-direction: column; gap: 2.1rem; justify-self: end; }
.cv-foot__big { display: flex; flex-direction: column; align-items: flex-start; gap: 2.15rem; }
.cv-foot__small { display: flex; flex-direction: column; align-items: flex-start; gap: 1.77rem; }
.cv-foot__logo { width: 50vw; margin: clamp(3.5rem, 6vw, 5.5rem) var(--cv-gut) 2.2rem auto; }
.cv-foot__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 1.2rem var(--cv-gut); margin-bottom: 2.2rem;
  border-top: 1px solid var(--cv-rule); border-bottom: 1px solid var(--cv-rule);
  font-size: .8rem; font-weight: 300; line-height: 1.4; letter-spacing: .02em;
}
.cv-foot__bar .cv-link { flex: none; }

/* ── the square pointer (mouse only; js/cover.js turns it on). It eases after the mouse and grows over a link. ── */
.cv-cur { position: fixed; left: 0; top: 0; z-index: 9999; display: none; pointer-events: none; will-change: transform; }
.cv-cur i { display: block; width: 10px; height: 10px; background: var(--cv-kh); transform: translate(-50%, -50%); transition: transform .25s ease, opacity .25s ease; }
.cv-cur.is-link i { transform: translate(-50%, -50%) scale(2); opacity: .45; }
html.cv-cursor-on, html.cv-cursor-on * { cursor: none !important; }
html.cv-cursor-on .cv-cur { display: block; }

/* ── motion ── */
/* on load: the nav drops in, then the headline's two lines blur in */
@keyframes cv-drop { from { transform: translateY(-110%); } }
@keyframes cv-in { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } }
.cv-nav { animation: cv-drop 1s var(--cv-out) .2s both; }
.cv-h1__l { animation: cv-in 1.2s var(--cv-out) .6s both; }
.cv-h1__l--2 { animation-delay: .68s; }
/* Home opens on the logo: alone in the middle of a dark window, it blurs in, stands for two seconds and blurs out.
   The smoke shows faintly behind it. Then the menu drops in, the adviser's card fades in and the headline blurs in.
   All of it is keyed on the logo's layer coming first in the body, so the other pages open as they always did. */
.cv-load { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none; }
.cv-load img { width: min(22rem, 70vw); height: auto; opacity: 0; animation: cv-load 2.65s linear .3s both; }
@keyframes cv-load {
  0% { opacity: 0; filter: blur(10px); transform: translateY(8px); }
  13% { opacity: 1; filter: blur(0); transform: none; }
  89% { opacity: 1; filter: blur(0); transform: none; }
  100% { opacity: 0; filter: blur(10px); transform: none; }
}
@keyframes cv-dawn { 0%, 12% { opacity: 0; } 28%, 62% { opacity: .3; } 100% { opacity: 1; } }
@keyframes cv-wait { from { visibility: hidden; } }
.cv-load ~ #cv-bg { animation: cv-dawn 5s linear both; }
.cv-load ~ .cv-hero .cv-nav { animation-delay: 3.2s; }
.cv-load ~ .cv-hero .cv-h1__l { animation-delay: 3.7s; }
.cv-load ~ .cv-card { animation: cv-in .6s var(--cv-out) 3.45s both; }
.cv-load ~ main, .cv-load ~ footer { animation: cv-wait 0s linear 3.2s both; }

/* on scroll, once each (js/cover.js adds .is-in when an element's top passes its start line) */
.cv-motion [data-rv="blur"] { opacity: 0; filter: blur(8px); transform: translateY(10px); transition: opacity 1.4s var(--cv-p3), filter 1.4s var(--cv-p3), transform 1.4s var(--cv-p3); }
.cv-motion [data-rv="fade"] { opacity: 0; transform: translateY(20px); transition: opacity 1.4s var(--cv-out), transform 1.4s var(--cv-out); }
.cv-motion [data-rv="img"] { clip-path: inset(100% 100% 0 0); transition: clip-path 1.8s var(--cv-io); }
.cv-motion [data-rv="img"] img { transform: scale(1.15); transform-origin: bottom left; transition: transform 1.8s var(--cv-io); }
/* Small text under a subheading (same parent) holds a moment, so the subheading is the first thing shown. On a jump
   or a fast flick both start in the same frame, and this fade is quicker than the subheading's blur. */
.cv-motion [data-rv="blur"] ~ [data-rv="fade"] { transition-delay: .35s; }
.cv-motion [data-rv].is-in { opacity: 1; filter: none; transform: none; }
.cv-motion [data-rv="img"].is-in { clip-path: inset(0 0 0 0); }
.cv-motion [data-rv="img"].is-in img { transform: none; }
/* the statement heading: letters rise into place on wide screens, the whole line blurs in on narrow ones */
.cv-sw { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: top; }
.cv-sl { display: inline-block; }
@media (min-width: 992px) {
  .cv-motion [data-rv="split"] .cv-sl { opacity: 0; transform: translateY(110%); transition: transform 1.2s var(--cv-out), opacity 1.2s var(--cv-out); transition-delay: calc(var(--i, 0) * 12ms); }
  .cv-motion [data-rv="split"].is-in .cv-sl { opacity: 1; transform: none; }
}
@media (max-width: 991px) {
  .cv-motion [data-rv="split"] { opacity: 0; filter: blur(6px); transform: translateY(10px); transition: opacity 1.4s var(--cv-out), filter 1.4s var(--cv-out), transform 1.4s var(--cv-out); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── tablets ── */
@media (max-width: 991px) {
  .cv-h1 { margin-left: 5%; margin-right: 5%; font-size: 11vw; }
  .cv-lines { font-size: 4vw; }
  .cv-h2 { font-size: 10vw; }
  .cv-pr { display: flex; flex-direction: column; gap: 6rem; margin-top: 6rem; }
  .cv-pr__i:nth-child(1) { margin-left: 24.6%; }
  .cv-pr__i:nth-child(2), .cv-pr__i:nth-child(3) { margin-left: 35.6%; }
}

/* ── phones ── */
@media (max-width: 640px) {
  .cv-nav__cols { display: none; }
  .cv-logo { width: 60vw; }
  .cv-h1 { margin-left: var(--cv-gut); margin-right: var(--cv-gut); font-size: 13.5vw; }
  .cv-intro { padding: 4.5rem var(--cv-gut) 6.5rem; }
  .cv-intro__p { text-indent: 2.5rem; }
  .cv-lines { font-size: max(1.45rem, 6.4vw); }
  .cv-pics { gap: 2.5vw; }
  .cv-pics__big { width: 66vw; }
  .cv-pics__little { width: 28vw; }
  .cv-expect { padding: 7rem 0 4rem; }
  .cv-h2 { font-size: 13vw; }
  .cv-h3, .cv-step__t { font-size: 2.3rem; }
  .cv-pr { gap: 4rem; margin-top: 4.5rem; }
  .cv-pr__i:nth-child(n) { margin: 0 var(--cv-gut) 0 12%; }
  .cv-how { padding: 5rem 0 8rem; }
  .cv-step__text { margin: 2.6rem var(--cv-gut) 3.6rem 12%; }
  .cv-foot__top { grid-template-columns: 1fr; gap: 3rem; }
  .cv-foot__pic { width: 54vw; }
  .cv-foot__pic--little { width: 26vw; }
  .cv-foot__links { padding-left: 0; justify-self: start; }
  .cv-foot__logo { width: 72vw; }
  .cv-foot__bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ── his planning style: one statement and the line he approved ── */
.cv-style { padding: 2rem var(--cv-gut) 10rem; }
.cv-style .cv-h2 { max-width: 9em; }
.cv-style__p { width: 26rem; max-width: 100%; margin: 4rem auto 0; text-indent: 4rem; }

/* ── the film: one example plan run through 1,000 simulated futures, as a section of its own from the left edge
   to the right. It sits under his planning style with nothing under the player. The poster is an <img> because an
   <img> can load lazily and a poster attribute can't. Chrome paints a grey panel over a player that has no frame
   yet, so the script keeps the player hidden behind the poster until the film starts (approach.js, film): by itself
   and muted as the section fades in, or on the play button where the page doesn't move. Nothing of the film
   downloads before it starts. Without the script the player stands as the browser draws it. Phones get the upright
   4:5 cut and its poster, so the film's own words are large enough to read there; the box takes that shape at the
   same width the sources switch at. The box is never taller than the window, and both the poster and the player
   fit the film inside it (contain) on the film's own ground colour, so a short wide window, or a browser that
   ignores the media rule on a video source, shows the whole frame, never a cropped one. ── */
.cv-film { padding: 0 0 10rem; }
.cv-film__fig { margin: 0; }
.cv-film__box { position: relative; aspect-ratio: 16 / 9; max-height: 100vh; max-height: 100svh; margin: 0 auto; background: #0c1115; }
.cv-film__box img, .cv-film__box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cv-film__box.is-poster video { visibility: hidden; }
.cv-motion [data-rv="film"] { opacity: 0; transition: opacity 1.6s var(--cv-out); }
.cv-film__play { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--cv-ink); cursor: pointer; }
.cv-film__play[hidden], .cv-film__sound[hidden] { display: none; }
.cv-film__play:focus-visible { outline-offset: -8px; }
.cv-film__play span, .cv-film__sound { display: inline-flex; align-items: center; gap: 1rem; padding: 1.3rem 1.7rem; background: var(--cv-nt);
  font: 400 1rem/1 var(--cv-text); font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase; transition: background-color .4s ease; }
.cv-film__play span::before { content: ""; border-left: .72rem solid currentColor; border-top: .44rem solid transparent; border-bottom: .44rem solid transparent; }
.cv-film__play:hover span, .cv-film__sound:hover { background: #00574a; }
/* the sound button, bottom right while the film plays by itself, clear of the player's own control bar: the only
   sign that the film has sound */
.cv-film__sound { position: absolute; bottom: 4rem; right: var(--cv-gut); z-index: 2; margin: 0; border: 0; padding: .8rem 1rem; color: var(--cv-ink); font-size: .8rem; cursor: pointer; }

/* ── what clients say: the reviews from the homepage, word for word. Each review sits under a changed first name,
   and one line under them says so. Two columns, the second set lower, no boxes. ── */
.cv-proof { padding: 10rem 0 10rem; }
/* The line over the reviews: very large, the first line from the left of a box three quarters of the window wide,
   the second to its right edge. Each line rises on its own. The small line under it names what follows. */
.cv-h1.cv-win { margin: 0 12.5%; font-size: 15vw; }
.cv-win__l { display: block; }
.cv-win__l--2 { text-align: right; }
.cv-proof__label { margin: 8rem 13.8vw 3.5rem; color: var(--cv-kh); }
.cv-proof__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem 8vw; margin: 0 13.8vw; }
.cv-proof__i:nth-child(even) { margin-top: 7rem; }
.cv-proof__i figure { margin: 0; }
.cv-proof__q {
  margin: 0; font-family: var(--cv-display); font-weight: 595; font-optical-sizing: auto;
  font-size: clamp(1.45rem, 1.9vw, 2.1rem); line-height: 1.34; letter-spacing: .01em;
}
.cv-proof__q::before { content: "\201C"; }
.cv-proof__q::after { content: "\201D"; }
.cv-proof__who { margin-top: 1.6rem; color: var(--cv-kh); }

/* ── the call: one statement, one way to start ── */
.cv-call { padding: 6rem var(--cv-gut) 12rem; text-align: center; }
.cv-call .cv-h2 { max-width: 9em; }
.cv-call__go { display: inline-flex; align-items: center; gap: 1.2rem; margin-top: 4rem; padding: 1.5rem 1.8rem;
  background: var(--cv-nt); color: var(--cv-ink); text-decoration: none;
  font: 400 1rem/1 var(--cv-text); font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase;
  transition: background-color .4s ease; }
.cv-call__go:hover { background: #00574a; }
.cv-call__go svg { width: .8rem; height: .8rem; }

.cv-foot__disc { margin: 0 var(--cv-gut) 2.6rem; max-width: 62rem; font-size: .78rem; font-weight: 300; line-height: 1.6; color: rgba(229,226,203,.8); }
.cv-foot__disc a { color: inherit; }

@media (max-width: 991px) {
  .cv-proof__list { grid-template-columns: 1fr; gap: 4.5rem; margin: 0 var(--cv-gut) 0 12%; }
  .cv-proof__i:nth-child(even) { margin-top: 0; }
  .cv-film { margin-top: -4rem; padding-bottom: 7rem; }
  .cv-film__play span { gap: .7rem; padding: .85rem 1.1rem; font-size: .8rem; }
  .cv-film__play span::before { border-left-width: .56rem; border-top-width: .34rem; border-bottom-width: .34rem; }
}
@media (max-width: 700px) {
  .cv-film__box { aspect-ratio: 4 / 5; }
}

/* ── three pages: home, About me and /approach ── */

/* The menu on every page: two small headings in the text face over their bracketed links, the first column a
   little past the middle of the window and the second three quarters across; on a phone the two columns sit under
   the logo, left and right. */
.cv-nav__h { margin-bottom: .45rem; font-family: var(--cv-text); font-stretch: 125%; font-weight: 500; font-size: 1rem; line-height: 1.25; letter-spacing: 0; text-transform: uppercase; }
.cv-nav__cols { display: grid; grid-template-columns: minmax(21vw, max-content) auto; column-gap: 1rem; width: 40.8vw; padding-top: 0; }
.cv-nav__col ul { gap: .62rem; }
.cv-link[aria-current="page"] { color: var(--cv-ink); }

/* Home. Its first screen is one window tall and carries the headline alone at the bottom left: a whole sentence on
   a narrow measure, three or four lines, the last one about nine tenths of the way down the window. */
.cv-hero--home { display: flex; flex-direction: column; min-height: 100vh; }
.cv-hero--home .cv-h1 { max-width: 34vw; margin: auto var(--cv-gut) 7.1vh; font-size: 5.5vw; line-height: 1; }

/* Home, under the first screen: one picture that stays put while three short lines pass it (what he does, who for,
   to what end). A sticky column holds the picture, so it needs no script. */
.cv-three { padding: 7rem 0 3rem; }
.cv-three__pin { display: grid; grid-template-columns: 31.5vw 1fr; align-items: center; }
.cv-three__pic { height: 91vh; }
.cv-three__pic .cv-pic { width: 100%; height: 100%; }
.cv-three__pic img { object-position: 8% 50%; }   /* the tall frame keeps the left of the picture, where its subject is */
.cv-three__lines { display: grid; gap: 2.2rem; margin-left: 27.5vw; }
/* these lines stand alone on the ground, so they are set larger and heavier than the small text elsewhere */
.cv-three__lines li { font-size: clamp(1.05rem, 1.5vw, 1.45rem); font-weight: 420; color: #F2F0E2; }
.cv-three__l { display: block; line-height: 1.8; }
.cv-three__w { display: inline-block; overflow: hidden; vertical-align: top; }
.cv-three__w > span { display: inline-block; }
/* with the page's script on a wide window: the block is pinned for a screen and a half, the picture stays at the
   left, and the three lines share one spot, taking turns (the script slides each word in its clipped box, one word after another) */
.cv-three.is-on { height: 250vh; padding: 0; }
.cv-three.is-on .cv-three__pin { position: sticky; top: 0; display: block; height: 100vh; overflow: hidden; }
.cv-three.is-on .cv-three__pic { position: absolute; left: 0; top: 4.4vh; width: 31.5vw; height: 91.2vh; }
.cv-three.is-on .cv-three__lines { position: absolute; left: 59vw; top: 47vh; display: block; margin: 0; }
.cv-three.is-on .cv-three__lines li { position: absolute; left: 0; top: 0; white-space: nowrap; }
.cv-three.is-on .cv-three__w > span { will-change: transform; }

/* Home, under the picture, and My philosophy's two blocks of short lines: a section with air above and below. On My
   philosophy the lines sit side by side in equal columns (on a narrower window they fall back to the principles'
   staggered column). */
.cv-half { padding: 9rem 0 8rem; }
.cv-half .cv-h2 { max-width: 9em; }
.cv-half .cv-h3 { font-size: 2.4rem; }
/* Home's services: a headline-size heading in the middle, one small line under it, then each service as a row
   between hairlines, its name on the left and a few words on the right */
.cv-h1.cv-half__h { margin: 0 var(--cv-gut); text-align: center; }
.cv-half__p { width: 26rem; max-width: calc(100% - 2 * var(--cv-gut)); margin: 3.2rem auto 0; text-indent: 4rem; }
.cv-rows { margin: 7rem var(--cv-gut) 0 11vw; }
.cv-row { border-top: 1px solid var(--cv-rule); }
/* each row is one link, edge to edge */
.cv-row__a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; padding: 2.6rem 1.3vw; color: inherit; text-decoration: none; transition: background-color .4s ease; }
.cv-row__a:hover, .cv-row__a:focus-visible { background: rgba(0, 65, 55, .42); }
.cv-row:last-child { border-bottom: 1px solid var(--cv-rule); }
.cv-row .cv-h3 { font-size: 3rem; }
.cv-row .cv-up { text-align: right; }
.cv-half--serve { padding-top: 0; }
.cv-half .cv-pr .cv-up { max-width: 17rem; }
@media (min-width: 992px) {
  .cv-half .cv-pr { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4vw; margin: 7rem 7vw 0; }
  .cv-half .cv-pr__i:nth-child(n) { grid-column: auto; }
}
/* Home's dark band: from the line over the services to the end of the reviews the page stands on solid black, the
   smoke shut out, with a shaped edge above and below it: a wide arch between two square shoulders. */
.cv-dark__in { background: #000; }
.cv-dark__cap { display: block; width: 100%; height: 23.1vw; margin-bottom: -1px; fill: #000; }
.cv-dark__cap--foot { margin: -1px 0 0; transform: scaleY(-1); }
.cv-part { padding: 15rem 0 4rem; }
.cv-dark .cv-part { padding-top: 4rem; }
/* a line that stands alone, ending at the right; where it is two lines, the first starts at the left */
.cv-h1.cv-part__h { margin: 0 10%; font-size: 10vw; text-align: right; }
/* in the dark band the two lines sit on a measure of seven tenths of the window */
.cv-dark .cv-h1.cv-part__h { margin: 0 15%; }
.cv-part__l { display: block; }
.cv-part__l:first-child { text-align: left; }
/* the small text under it: a narrow block in the middle of the window, its first line set in */
.cv-part__p { width: 26rem; max-width: calc(100% - 2 * var(--cv-gut)); margin: 2rem auto 0; text-indent: 4rem; }

/* Home, under the brand line: his special services as a list of names, each with its picture.
   As it stands here it is a plain list, a name on the left and its picture on the right, and that is what a reader
   with reduced motion gets. With the page's script it becomes two wheels (.is-on): the block is pinned for one
   screen of scrolling, every name and picture is placed by the script, names along the right side of a wheel on
   the left, pictures along the left side of a wheel on the right. */
.cv-wheel { position: relative; }
.cv-wheel__list { margin: 3rem var(--cv-gut) 0; }
.cv-wheel__i { display: grid; grid-template-columns: minmax(0, 1fr) min(30%, 16rem); align-items: center; gap: 0 6vw; padding: 1.6rem 1.5vw; border-top: 1px solid var(--cv-rule); }
.cv-wheel__i:last-child { border-bottom: 1px solid var(--cv-rule); }
.cv-wheel__name { font-family: var(--cv-display); font-weight: 595; font-stretch: normal; font-optical-sizing: auto; font-size: 4.2vw; line-height: 1; letter-spacing: .01em; color: var(--cv-kh); }
.cv-wheel__pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cv-nt); }
.cv-wheel__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-wheel.is-on { height: 200vh; }
.cv-wheel.is-on .cv-wheel__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.cv-wheel.is-on .cv-wheel__list { margin: 0; }
.cv-wheel.is-on .cv-wheel__i { display: contents; }
.cv-wheel.is-on .cv-wheel__name, .cv-wheel.is-on .cv-wheel__pic { position: absolute; left: 0; top: 0; will-change: transform; }
.cv-wheel.is-on .cv-wheel__name { white-space: nowrap; }
.cv-wheel.is-on .cv-wheel__pic { width: 16vw; }
/* On a phone the wheels are tighter, so a long name gets a smaller size and breaks onto two lines to stay in view. */
@media (max-width: 767px) {
  .cv-wheel__name { font-size: 6.4vw; }
  .cv-wheel.is-on .cv-wheel__name { max-width: 40vw; white-space: normal; text-align: right; }
  .cv-wheel.is-on .cv-wheel__pic { width: 30vw; }
}

/* About me. The first screen: one statement between two hairlines, where the menu's first column starts, and the
   page's name very large across the bottom, whole, its foot just above the fold. */
.cv-hero--about { position: relative; min-height: 100vh; overflow-x: clip; }
.cv-about__say { width: 21rem; max-width: 60vw; margin: max(3rem, 13vh) 0 0 55.7vw; padding: 1rem 0; text-align: center; border-top: 1px solid var(--cv-rule); border-bottom: 1px solid var(--cv-rule); }
.cv-giant { position: absolute; left: var(--cv-gut); bottom: .02em; margin: 0; font-family: var(--cv-display); font-weight: 595; font-optical-sizing: auto; font-stretch: normal; font-size: 25vw; line-height: .9; white-space: nowrap; }
.cv-about__pic { width: 31vw; aspect-ratio: 1000 / 1143; margin: 2rem 0 9rem; }
/* About me: what he believes, set large with its first line set in, over his two promises side by side; and who
   he works with, a centred heading over a narrow column of short paragraphs. */
.cv-creed { padding: 1rem 0 10rem; }
.cv-creed__p { margin: 0 12.5%; font-family: var(--cv-display); font-weight: 595; font-stretch: normal; font-optical-sizing: auto; font-size: 3vw; line-height: 1.4; text-indent: 10vw; }
.cv-creed .cv-pr .cv-up { max-width: 17rem; }
@media (min-width: 992px) {
  .cv-creed .cv-pr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10vw; margin: 8rem 15.9vw 0; }
  .cv-creed .cv-pr__i:nth-child(n) { grid-column: auto; }
}
.cv-choose { padding: 6rem var(--cv-gut) 11rem; }
.cv-h2.cv-choose__h { max-width: none; }
.cv-choose__text { margin-top: 8rem; }
.cv-choose__text p + p { margin-top: 2rem; }

/* The closing call on every page: "Your adviser" very large and dim behind the button, in a dim Muted Khaki so it
   stands off the turquoise smoke wherever the smoke is lit. The dim words are decoration; the heading a screen
   reader gets is separate. */
.cv-call { padding: 9rem var(--cv-gut) 12rem; text-align: center; }
.cv-call__top { display: grid; place-items: center; }
.cv-call__top > * { grid-area: 1 / 1; }
.cv-call__ghost { margin: 0; font-family: var(--cv-display); font-weight: 595; font-optical-sizing: auto; font-stretch: normal; font-size: 17vw; line-height: 1; white-space: nowrap; color: #5e5b41; user-select: none; }
.cv-call .cv-call__go { position: relative; margin-top: 0; background: var(--cv-ink); color: #050505; }
.cv-call .cv-call__go:hover { background: var(--cv-kh); }

/* The adviser's card, fixed at the bottom right of every page (smaller on a phone): his picture, who he is, one
   way to reach him. */
.cv-card { position: fixed; right: 2rem; bottom: 2rem; z-index: 100; display: flex; gap: .9rem; width: 21.5rem; padding: .5rem; background: var(--cv-nt); color: var(--cv-ink); }
.cv-card img { flex: none; width: 7rem; height: 8.56rem; object-fit: cover; }
.cv-card__t { display: flex; flex-direction: column; align-items: flex-start; padding: .55rem .4rem .45rem 0; }
.cv-card__h { font-family: var(--cv-text); font-stretch: 125%; font-weight: 500; font-size: .8rem; line-height: 1.25; text-transform: uppercase; white-space: nowrap; }
.cv-card__s { margin-top: .2rem; font-size: .8rem; font-weight: 300; line-height: 1.3; color: rgba(229,226,203,.86); }
.cv-card .cv-link { margin-top: auto; color: var(--cv-ink); }

/* why he does this: his own account, read as sentences in the thin text face */
.cv-story { padding: 2rem var(--cv-gut) 10rem; }
.cv-story .cv-h2 { max-width: 9em; }
.cv-story__text { width: 36rem; max-width: 100%; margin: 4.5rem auto 0; }
.cv-story__text p { font: 300 1rem/1.7 var(--cv-text); font-stretch: 125%; letter-spacing: .01em; color: rgba(229,226,203,.92); }
.cv-story__text p + p { margin-top: 1.05em; }
.cv-story__text .cv-story__sig { margin-top: 3rem; font: 280 .9rem/1.5 var(--cv-text); font-stretch: 125%; letter-spacing: .5px; text-transform: uppercase; color: var(--cv-kh); }
.cv-story__sig span { display: block; }


@media (max-width: 991px) {
  .cv-nav__cols { width: auto; grid-template-columns: max-content max-content; column-gap: 2.4rem; }
  .cv-three { padding-top: 5rem; }
  .cv-three__pin { grid-template-columns: 1fr; }
  .cv-three__pic { width: 66vw; height: auto; aspect-ratio: 4 / 5; }
  .cv-three__lines { margin: 3.5rem var(--cv-gut) 0 12%; }
  .cv-half { padding: 7rem 0 6rem; }
  .cv-half .cv-h3 { font-size: 2.3rem; }
  .cv-rows { margin: 4.5rem var(--cv-gut) 0; }
  .cv-row__a { flex-direction: column; gap: .7rem; padding: 2rem 0; }
  .cv-row .cv-h3 { font-size: 2.3rem; }
  .cv-row .cv-up { text-align: left; }
  .cv-h1.cv-win { margin: 0 5%; }
  .cv-proof__label { margin: 5rem var(--cv-gut) 2.5rem 12%; }
  .cv-part { padding: 10rem 0 7rem; }
  .cv-h1.cv-part__h { margin: 0 5%; }
  .cv-about__say { margin-left: 45vw; }
  .cv-about__pic { width: 60vw; margin-bottom: 6rem; }
  .cv-creed__p { margin: 0 var(--cv-gut); font-size: 5.2vw; }
  .cv-choose__text { margin-top: 5rem; }
}
@media (max-width: 640px) {
  /* one line on a phone: the brand line is longer than the first screen's headline */
  .cv-h1.cv-part__h { margin: 0 var(--cv-gut); font-size: 10.2vw; text-align: left; }
  .cv-part__p { margin: 1.6rem var(--cv-gut) 0; }
  .cv-h1.cv-win { margin: 0 var(--cv-gut); font-size: 17vw; }
  .cv-hero--home .cv-h1 { max-width: none; margin-bottom: 9rem; font-size: 10.5vw; line-height: 1.06; }
  .cv-about__say { width: auto; max-width: none; margin: 4rem var(--cv-gut) 0; }
  .cv-giant { font-size: 26vw; }
  .cv-call__ghost { font-size: 21vw; }
  .cv-card { right: .7rem; bottom: .7rem; width: auto; gap: .55rem; padding: .35rem; }
  .cv-card img { width: 2.9rem; height: 3.55rem; }
  .cv-card__t { padding: .15rem .3rem .1rem 0; }
  .cv-card__h { font-size: .66rem; }
  .cv-card__s { font-size: .6rem; }
  .cv-card .cv-link { font-size: .66rem; }
  /* phones keep the two link columns, under the logo: this is the only menu the page has */
  .cv-nav { flex-direction: column; gap: 1.6rem; }
  .cv-nav__cols { width: 100%; grid-template-columns: 1fr max-content; column-gap: 1rem; }
  .cv-nav__h { font-size: .8rem; }
  .cv-film__sound { bottom: 3.4rem; padding: .65rem .8rem; font-size: .72rem; }
}

@media print {
  #cv-bg, .cv-cur, .cv-pics, .cv-step__media, .cv-film__box, .cv-foot__pics, .cv-card, .cv-call__ghost, .cv-three__pic, .cv-about__pic, .cv-dark__cap, .cv-load { display: none !important; }
  .cv-dark__in { background: none; }
  html, body { background: #fff; color: #121923; }
  .cv-link { color: #004137; }
  [data-rv], .cv-sl, .cv-step__text { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; }
}