/* The Long Game, design v2. One street: a white page, the drawings standing on
   paperbark ground, ironbark type, red gum only on what can be clicked, mallee once at each end.
   Type: Jubilat for the few headlines, Acumin for reading. Scale: 13, 15, 17, 20, 26, 34, 46, 64, 92.
   Corners are square throughout. Motion: the opening (once per visit) and what a click opens. */
@font-face { font-family: "Bitter"; font-weight: 400; font-display: swap; src: url("../fonts/bitter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 600; font-display: swap; src: url("../fonts/bitter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-weight: 700; font-display: swap; src: url("../fonts/bitter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); }


:root {
  --white: #FFFFFF; --paper: #EFE6D8; --ink: #2E2A27; --ink-2: #4A443E; --muted: #6F665C;
  --accent: #7D2027; --accent-press: #641A20; --deep: #274133; --calm: #9AB08D; --paper-2: #D8CFC0;
  --rule: rgba(46, 42, 39, .16); --rule-3: rgba(46, 42, 39, .3); --paper-50: rgba(239, 230, 216, .5);
  --serif: "jubilat", "Bitter", Georgia, serif; --sans: "acumin-pro", "Archivo", Arial, Helvetica, sans-serif;
  --gutter: clamp(20px, 4vw, 56px); --wide: 1280px; --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, figure, ol { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--paper); }
.v2-wrap { width: 100%; max-width: calc(var(--wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 90; }
.skip:focus { top: 16px; }
.tbc { color: var(--accent); }
.v2-note { margin-top: 10px; font-size: 13px; color: var(--accent); }
.ref-tag { font-size: 12px; color: var(--muted); }

/* Actions: one button style, one link style. */
.v2-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; background: var(--accent); color: var(--paper); font-weight: 500; font-size: 16px; text-decoration: none; transition: background-color 200ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .v2-btn:hover { background: var(--accent-press); } }
.v2-btn:active { transform: scale(.97); }
.v2-btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.v2-btn-light { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .v2-btn-light:hover { background: var(--white); } }
.v2-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color 200ms ease, text-underline-offset 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .v2-link:hover { color: var(--accent); text-underline-offset: 4px; } }

/* Header */
.v2-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 var(--gutter); background: var(--white); border-bottom: 1px solid var(--rule); }
.v2-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.v2-brand img { height: 26px; width: auto; }
.v2-brand span { font-family: var(--serif); font-size: 19px; white-space: nowrap; }
.v2-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.v2-nav a:not(.v2-btn) { text-decoration: none; padding: 6px 0; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat; transition: background-size 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .v2-nav a:not(.v2-btn):hover, .v2-nav a[aria-current="page"] { background-size: 100% 2px; } }
.v2-menu-button { display: none; width: 44px; height: 44px; border: 1px solid var(--rule); background: none; cursor: pointer; place-items: center; }
.v2-menu-button span { display: block; width: 18px; height: 2px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
.v2-menu { display: grid; padding: 8px var(--gutter) 20px; background: var(--white); border-bottom: 1px solid var(--rule); }
.v2-menu[hidden] { display: none; }
.v2-menu a:not(.v2-btn) { padding: 12px 0; font-family: var(--serif); font-size: 21px; text-decoration: none; border-bottom: 1px solid var(--rule); }
.v2-menu .v2-btn { margin-top: 16px; justify-content: center; }
@media (max-width: 960px) { .v2-nav { display: none; } .v2-menu-button { display: grid; } }
.no-js .v2-menu-button { display: none; }

/* Hero: the headline in the sky, the street on its ground. */
.v2-hero { padding-top: clamp(40px, 7vw, 96px); background: linear-gradient(to bottom, var(--white) 0, var(--white) calc(100% - clamp(90px, 11vw, 170px)), var(--paper) calc(100% - clamp(90px, 11vw, 170px))); }
.v2-hero-copy { display: grid; gap: 28px 48px; align-items: end; }
@media (min-width: 1000px) { .v2-hero-copy { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.v2-hero h1 { font-size: clamp(36.12px, 5.28vw, 71.76px); line-height: .98; letter-spacing: -.025em; max-width: 13.5ch; }
.v2-hero-side { padding-bottom: 8px; color: var(--ink-2); font-size: 18px; max-width: 36ch; }
.v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.v2-street { position: relative; margin: clamp(16px, 3vw, 40px) auto 0; max-width: 1600px; padding: 0 var(--gutter); }
.v2-street img { width: 100%; height: auto; transition: clip-path 1500ms cubic-bezier(.77, 0, .175, 1); clip-path: inset(0 0 0 0); }
html.tlg-hold .v2-street img { clip-path: inset(0 100% 0 0); }
.v2-street figcaption { padding: 6px 0 0; text-align: right; }

/* The premise: on the ground the street stands on. */
.v2-premise { background: var(--paper); padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 10vw, 140px); }
.v2-premise .v2-wrap { display: grid; gap: 18px 48px; }
@media (min-width: 1000px) { .v2-premise .v2-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.v2-premise-lead { font-family: var(--serif); font-size: clamp(24.08px, 2.72vw, 35.88px); line-height: 1.12; letter-spacing: -.012em; max-width: 20ch; }
.v2-premise-body { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; padding-top: 10px; }

/* Section heads: a headline and, where there is one, its link on the same line. */
.v2-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.v2-method h2, .v2-paths h2, .v2-insights h2 { font-size: clamp(25.8px, 2.88vw, 35.88px); line-height: 1.08; letter-spacing: -.015em; max-width: 18ch; }

/* The method: five stages standing on one ground line, like houses along a street. */
.v2-method { padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 9vw, 120px); }
.v2-stages { list-style: none; margin: clamp(36px, 5vw, 64px) auto 0; padding: 0 var(--gutter); max-width: calc(var(--wide) + var(--gutter) * 2); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; position: relative; }
.v2-stages::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 132px; height: 22px; background: var(--paper); z-index: 0; }
.v2-stage { position: relative; z-index: 1; }
.v2-stage img { height: 150px; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; }
.v2-stage-n { margin-top: 26px; font-family: var(--serif); font-size: 15px; color: var(--muted); font-variant-numeric: lining-nums; }
.v2-stage h3 { margin-top: 2px; font-size: 22px; line-height: 1.15; }
.v2-stage p:last-child { margin-top: 8px; font-size: 15px; color: var(--ink-2); max-width: 24ch; }
@media (max-width: 900px) {
  .v2-stages { grid-template-columns: repeat(5, minmax(210px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .v2-stage { scroll-snap-align: start; }
  .v2-stages::before { width: calc(5 * 238px); right: auto; }
}

/* Pathways: three drawings, no boxes. The first leads. */
.v2-paths { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--rule); }
.v2-paths-grid { margin-top: clamp(32px, 5vw, 56px); display: grid; gap: 40px 32px; }
@media (min-width: 900px) { .v2-paths-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; } .v2-path-lead { grid-row: span 2; } }
.v2-path { display: grid; gap: 16px; text-decoration: none; align-content: start; }
.v2-path-art { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.v2-path-lead .v2-path-art { aspect-ratio: 4 / 3; }
.v2-path-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.v2-path-text { display: grid; gap: 4px; font-size: 16px; color: var(--ink-2); max-width: 46ch; }
.v2-path-title { font-family: var(--serif); font-size: 22px; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color 200ms ease; }
.v2-path-lead .v2-path-title { font-size: 29px; }
@media (hover: hover) and (pointer: fine) { .v2-path:hover .v2-path-title { text-decoration-color: var(--accent); } }
.v2-path-fit { font-size: 14px; color: var(--muted); }
@media (min-width: 900px) { .v2-path:not(.v2-path-lead) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } .v2-path:not(.v2-path-lead) .v2-path-art { aspect-ratio: 1 / 1; } }
.v2-art-note { margin-top: 28px; }

/* Jim: set like a letter. */
.v2-jim { padding: clamp(72px, 10vw, 140px) 0; background: var(--paper); }
.v2-jim-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .v2-jim-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } }
.v2-jim-media { position: relative; max-width: 420px; padding: 0 40px 56px 0; }
.v2-photo { aspect-ratio: 4 / 5; background: var(--paper-2); display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; font-size: 14px; color: var(--ink-2); }
.v2-book { position: absolute; right: 0; bottom: 0; width: 40%; transform: rotate(4deg); box-shadow: 0 1px 0 rgba(46, 42, 39, .1), 0 22px 36px -18px rgba(46, 42, 39, .6); }
.v2-letter { max-width: 36em; }
.v2-letter-lead { font-family: var(--serif); font-size: clamp(22.36px, 2.24vw, 28.08px); line-height: 1.25; letter-spacing: -.01em; }
.v2-letter-lead cite { font-style: italic; }
.v2-letter > p:nth-child(2) { margin-top: 20px; font-size: 18px; color: var(--ink-2); max-width: 46ch; }
.v2-sign { margin: 30px 0 30px; font-family: "adobe-handwriting-ernie", cursive; font-size: 41px; line-height: 1; color: var(--ink); }

/* Insights: a contents page. */
.v2-insights { padding: clamp(72px, 10vw, 140px) 0; }
.v2-insights-grid { display: grid; gap: 40px 80px; }
@media (min-width: 900px) { .v2-insights-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.v2-insights-grid > div p { margin-top: 18px; color: var(--ink-2); max-width: 38ch; }
.v2-contents { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.v2-contents li { border-bottom: 1px solid var(--rule); }
.v2-contents a { display: block; padding: 18px 0; font-family: var(--serif); font-size: clamp(17.2px, 1.6vw, 20.28px); line-height: 1.2; text-decoration: none; transition: color 200ms ease, padding-left 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .v2-contents a:hover { color: var(--accent); padding-left: 10px; } }

/* Close: mallee, with the street in paperbark line along the bottom. */
.v2-close { background: var(--deep); color: var(--paper); padding-top: clamp(72px, 10vw, 140px); overflow: hidden; }
.v2-close h2 { color: var(--paper); font-size: clamp(30.96px, 4vw, 56.16px); line-height: 1.02; letter-spacing: -.02em; max-width: 14ch; }
.v2-close p { margin: 20px 0 30px; max-width: 40ch; font-size: 18px; color: rgba(239, 230, 216, .85); }
.v2-close-street { width: min(1280px, 120%); max-width: none; margin: clamp(40px, 6vw, 72px) auto -2px; position: relative; left: 50%; transform: translateX(-50%); }

/* Footer */
.v2-foot { padding: 48px var(--gutter); display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); font-size: 14px; color: var(--ink-2); max-width: calc(var(--wide) + var(--gutter) * 2); margin: 0 auto; }
.v2-foot img { height: 22px; width: auto; margin-bottom: 14px; }
.v2-foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; align-content: start; }
.v2-foot nav a { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .v2-foot nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); } }
.v2-foot > p { grid-column: 1 / -1; max-width: 80ch; font-size: 13px; }

/* Reviewer feedback button, preview links only. */
.feedback-button { position: fixed; right: 16px; bottom: 16px; z-index: 40; background: var(--ink); color: var(--paper); padding: 12px 16px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* The opening, home page, once per visit: a padlock on mallee, the key slides in and turns, the
   shackle lifts, and the two halves of the page part to show the site. About 3.2 seconds; any
   click, Enter, Escape or Skip goes straight to the reveal. Never shown with reduced motion. */
.tlg-opening { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; }
.tlg-opening[hidden] { display: none; }
.tlg-door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--deep); transition: transform 900ms cubic-bezier(.77, 0, .175, 1); }
.tlg-door-l { left: 0; box-shadow: inset -1px 0 0 rgba(239, 230, 216, .18); }
.tlg-door-r { right: 0; box-shadow: inset 1px 0 0 rgba(239, 230, 216, .18); }
.tlg-scene { position: relative; width: min(420px, 78vw); height: auto; overflow: visible; opacity: 0; transform: scale(.96); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.tlg-opening.is-in .tlg-scene { opacity: 1; transform: none; }
.tlg-key-slide { transform: translateX(-230px); opacity: 0; transition: transform 760ms var(--ease-out), opacity 300ms ease; }
.tlg-opening.is-insert .tlg-key-slide { transform: none; opacity: 1; }
.tlg-key-turn { transform-origin: 380px 252px; transition: transform 420ms cubic-bezier(.65, 0, .35, 1); }
.tlg-opening.is-turn .tlg-key-turn { transform: scaleY(.22); }
.tlg-shackle { transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.tlg-opening.is-open .tlg-shackle { transform: translateY(-28px); }
.tlg-body { transition: transform 160ms ease-out; }
.tlg-opening.is-open .tlg-body { transform: translateY(3px); }
.tlg-opening.is-out .tlg-scene { opacity: 0; transform: scale(.9); transition-duration: 320ms; }
.tlg-opening.is-part .tlg-door-l { transform: translateX(-101%); }
.tlg-opening.is-part .tlg-door-r { transform: translateX(101%); }
.tlg-opening.is-part { pointer-events: none; }
.tlg-skip { position: absolute; right: 20px; bottom: 20px; min-height: 44px; padding: 10px 16px; background: none; border: 1px solid var(--paper-50); color: var(--paper); font-size: 13px; cursor: pointer; transition: opacity 200ms ease; }
.tlg-opening.is-part .tlg-skip { opacity: 0; }



@media (prefers-reduced-motion: reduce) {
  /* Gentler, not zero: nothing slides, scales or blurs, but swaps still fade so nothing hard-cuts. */
  *, *::before, *::after { animation: none !important; transition-property: opacity !important; transition-duration: 150ms !important; transition-delay: 0s !important; }
  .tlg-opening { display: none !important; }
  .mx-frame { transform: none !important; filter: none !important; }
}
@media print { .v2-menu-button, .tlg-opening, .feedback-button { display: none !important; } .v2-head { position: static; } html.tlg-hold .v2-street img { clip-path: none; } }

/* ============================ Inner pages ============================ */
.v2-small { font-size: 15px; color: var(--muted); }
.v2-lead { margin-top: 22px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.v2-intro { padding: clamp(56px, 9vw, 128px) 0 clamp(48px, 7vw, 96px); }
.v2-intro h1 { font-size: clamp(34.4px, 4.48vw, 59.28px); line-height: 1.02; letter-spacing: -.022em; max-width: 16ch; }
.v2-intro .v2-small { margin-top: 20px; max-width: 56ch; }
.v2-plain { min-height: 52vh; }
.v2-404 img { margin-bottom: 28px; height: 160px; width: auto; }

/* Method intro: the words, and the key with its three houses. */
.v2-intro-split .v2-wrap { display: grid; gap: 48px 80px; }
@media (min-width: 960px) { .v2-intro-split .v2-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.v2-keyfig { display: flex; gap: 32px; align-items: center; background: var(--paper); padding: clamp(24px, 3vw, 40px); }
.v2-key { width: clamp(64px, 7vw, 92px); flex: none; overflow: visible; }
.v2-principles { display: grid; gap: 6px; }
.v2-principles .v2-small { margin: 0 0 8px; font-size: 14px; }
.wf-principle { display: grid; gap: 2px; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: 12px 0; cursor: pointer; color: inherit; min-height: 44px; }
.wf-principle span:first-child { font-family: var(--serif); font-size: 20px; line-height: 1.2; transition: color 200ms ease; }
.wf-principle span:last-child { font-size: 14px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .wf-principle:hover span:first-child, .wf-principle:focus-visible span:first-child { color: var(--accent); } }
.wf-house { transition: transform 500ms cubic-bezier(.3, .85, .3, 1); transform-box: fill-box; transform-origin: center; }
.wf-house.lift { transform: translateX(-28px); }

/* Method: the interactive stages. */
.v2-mx { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--rule); }
.v2-mx h2 { font-size: clamp(25.8px, 2.88vw, 35.88px); line-height: 1.08; letter-spacing: -.015em; }
.v2-mx .mx-intro p { margin-top: 14px; max-width: 52ch; color: var(--ink-2); }
.v2-mx .mx-intro p:last-child { color: var(--accent); font-size: 13px; }
/* ---------------------------------------------------------------------------------------------
   The Method, interactive. An exclusive accordion on the left; the stage's engraving
   on the right swaps as each stage opens. Built on <details name>, so it works with no script and
   in every browser (without script every stage can open). Script adds: one open at a time where
   the browser lacks name="", the picture swap, previous and next, and arrow keys between stages.
   --------------------------------------------------------------------------------------------- */
.mx-intro { max-width: 70ch; }
.mx-grid { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .mx-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.mx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.mx-item { border-bottom: 1px solid var(--rule-2); }
.mx-item:has(details[open]) { border-bottom-color: var(--ink); }
.wf-stage > summary::-webkit-details-marker { display: none; }
.mx-head { list-style: none; display: grid; grid-template-columns: 40px 1fr 40px; gap: 14px; align-items: center; padding: 22px 0; cursor: pointer; min-height: 64px; }
.mx-head:focus-visible { outline-offset: 4px; }
.mx-num { font-family: "jubilat", "Bitter", Georgia, serif; font-size: 14px; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.mx-titles { display: grid; gap: 2px; }
.mx-name { font-family: "jubilat", "Bitter", Georgia, serif; font-size: clamp(18.92px, 1.92vw, 23.4px); line-height: 1.15; letter-spacing: -.01em; transition: color 200ms ease; }
.mx-q { font-size: 14px; color: var(--ink-2); }
.mx-toggle { justify-self: end; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule-3); position: relative; transition: background-color 240ms ease, border-color 240ms ease, transform 240ms var(--ease-out); }
.mx-toggle::before, .mx-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 280ms var(--ease-out), background-color 240ms ease; }
.mx-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > .mx-head .mx-toggle { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
details[open] > .mx-head .mx-toggle::before, details[open] > .mx-head .mx-toggle::after { background: var(--paper); }
details[open] > .mx-head .mx-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) and (pointer: fine) {
  .mx-head:hover .mx-name { color: var(--accent); }
  .mx-head:hover .mx-toggle { border-color: var(--ink); }
}
.mx-head:active .mx-toggle { transform: scale(.94); }
details[open] > .mx-head:active .mx-toggle { transform: rotate(180deg) scale(.94); }
.mx-body { padding: 0 0 28px 54px; }
.mx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 28px; }
.mx-fact p:last-child { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.mx-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mx-inline-art { display: block; width: min(200px, 60%); height: auto; margin: 0 0 18px; }
@media (min-width: 960px) { .mx-inline-art { display: none; } }
@media (max-width: 640px) { .mx-body { padding-left: 0; } .mx-head { grid-template-columns: 30px 1fr 36px; } }
@media (prefers-reduced-motion: no-preference) {
  details[open] > .mx-body { animation: mxIn 280ms var(--ease-out); }
  @keyframes mxIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* The picture side: sticky on wide screens, hidden on phones (each stage shows its own art). */
.mx-stage { display: none; }
@media (min-width: 960px) { .mx-stage { display: block; position: sticky; top: 96px; } }
.mx-stage-inner { position: relative; aspect-ratio: 4 / 4.2; background: var(--paper-2); overflow: hidden; }
.mx-stage-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 46%, rgba(255, 255, 255, .45), transparent 70%); }
.mx-frame { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 12% 12% 22%; opacity: 0; transform: scale(.96); filter: blur(4px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), filter 420ms var(--ease-out); }
.mx-frame.is-active { opacity: 1; transform: none; filter: none; }
.mx-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mx-frame figcaption { position: absolute; left: 28px; bottom: 24px; font-family: "jubilat", "Bitter", Georgia, serif; font-size: clamp(24.08px, 2.4vw, 31.2px); line-height: 1; letter-spacing: -.015em; color: var(--ink); }
.mx-cap-num { display: block; font-size: 13px; letter-spacing: 0; color: var(--accent); margin-bottom: 8px; }
.mx-progress { position: absolute; left: 28px; right: 132px; bottom: 32px; display: none; }
.mx-nav { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.mx-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-3); background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-out); }
.mx-nav button:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .mx-nav button:not(:disabled):hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.no-js .mx-nav { display: none; }
.mx-note { margin-top: 10px; font-size: 11px; color: var(--muted); }
.mx-meter { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(46, 42, 39, .08); }
.mx-meter i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform 520ms var(--ease-out); }

.mx-stage-inner { background: var(--paper); }
.mx-frame figcaption { color: var(--ink); }
.mx-cap-num { color: var(--muted) !important; }
.mx-label { letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important; font-weight: 600; color: var(--ink) !important; }
.mx-num { color: var(--muted) !important; }

/* Two related statements: the first set large, the second plain. */
.v2-pair { padding: clamp(56px, 8vw, 112px) 0; }
.v2-pair-ground { background: var(--paper); }
.v2-pair-grid { display: grid; gap: 40px 80px; }
@media (min-width: 900px) { .v2-pair-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.v2-pair h2 { font-size: 21px; line-height: 1.2; }
.v2-pair p { margin-top: 12px; color: var(--ink-2); max-width: 52ch; }
.v2-pair-lead h2 { font-size: clamp(24.08px, 2.4vw, 31.2px); line-height: 1.1; letter-spacing: -.012em; max-width: 18ch; }
.v2-pair-lead p { font-family: var(--serif); font-size: clamp(17.2px, 1.44vw, 18.72px); line-height: 1.45; color: var(--ink); max-width: 34ch; margin-top: 18px; }

/* Pathways: three full rows, the drawing large beside the facts. */
.v2-pws { padding: 0 0 clamp(56px, 8vw, 112px); }
.v2-pw { display: grid; gap: 28px 64px; padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--rule); }
@media (min-width: 960px) { .v2-pw { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .v2-pw-flip .v2-pw-art { order: 2; } .v2-pw-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .v2-pw-art { position: sticky; top: 104px; } }
.v2-pw-art { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.v2-pw-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.v2-pw-n { font-size: 15px; color: var(--muted); }
.v2-pw h2 { margin-top: 6px; font-size: clamp(25.8px, 2.72vw, 34.32px); line-height: 1.06; letter-spacing: -.015em; }
.v2-pw-desc { margin-top: 18px; font-size: 18px; color: var(--ink-2); max-width: 46ch; }
.v2-pw dl { margin: 26px 0 0; display: grid; gap: 6px; max-width: 48ch; }
.v2-pw dt { font-weight: 600; font-size: 15px; margin-top: 12px; }
.v2-pw dd { margin: 0; font-size: 15px; color: var(--ink-2); }
.v2-slot { margin-top: 22px; padding: 14px 16px; border: 1px dashed var(--rule); font-size: 14px; color: var(--muted); max-width: 48ch; }
.v2-art-note { margin-top: 12px; }

/* About */
.v2-about-intro .v2-wrap { display: grid; gap: 40px 80px; align-items: end; }
@media (min-width: 900px) { .v2-about-intro .v2-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.v2-about-photo { max-width: 460px; width: 100%; }
.v2-story { padding: clamp(56px, 8vw, 112px) 0; background: var(--paper); }
.v2-story-grid { display: grid; gap: 48px 80px; }
@media (min-width: 960px) { .v2-story-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } .v2-story-art { position: sticky; top: 104px; } }
.v2-story h2 { font-size: clamp(24.08px, 2.4vw, 31.2px); line-height: 1.1; }
.v2-story-list { list-style: none; padding: 0; margin-top: 32px; counter-reset: s; }
.v2-story-list li { position: relative; padding: 20px 0 20px 48px; border-top: 1px solid var(--rule); counter-increment: s; }
.v2-story-list li::before { content: counter(s); position: absolute; left: 0; top: 22px; font-family: var(--serif); color: var(--muted); }
.v2-story-list h3 { font-size: 21px; line-height: 1.2; }
.v2-story-list p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.v2-story-art { margin: 0; background: var(--white); padding: 20px; }
.v2-story-art img { width: 100%; height: auto; }
.v2-story-art figcaption { margin-top: 10px; }
.v2-why { padding: clamp(56px, 8vw, 112px) 0; }
.v2-why-lead { max-width: 52rem; }
.v2-why-lead h2 { font-size: 21px; }
.v2-why-lead p { margin-top: 16px; font-family: var(--serif); font-size: clamp(22.36px, 2.4vw, 31.2px); line-height: 1.22; letter-spacing: -.01em; }
.v2-why-grid { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 36px 48px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.v2-why-grid h3 { font-size: 21px; line-height: 1.2; }
.v2-why-grid p { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.v2-signoff { margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--rule); display: grid; gap: 4px; justify-items: start; }
.v2-signoff .v2-sign { margin: 0; }
.v2-signoff .v2-small { margin-bottom: 20px; }

/* Book */
.v2-book-intro { background: var(--paper); }
.v2-book-intro .v2-wrap { display: grid; gap: 48px 96px; align-items: center; }
@media (min-width: 900px) { .v2-book-intro .v2-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.v2-book-cover { margin: 0; justify-self: center; width: min(360px, 80%); transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(46, 42, 39, .1), 0 40px 60px -30px rgba(46, 42, 39, .65); }
.v2-book-intro h1 { margin-top: 10px; }
.v2-book-intro p:not(.v2-small):not(.v2-lead):not(.v2-note) { margin-top: 18px; max-width: 52ch; color: var(--ink-2); }

/* Insights: a contents page with pictures. */
.v2-articles { padding: 0 0 clamp(56px, 8vw, 112px); }
.v2-art-list { list-style: none; padding: 0; margin-top: 16px; border-top: 1px solid var(--ink); }
.v2-art-row { display: grid; gap: 20px 56px; padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--rule); align-items: center; }
@media (min-width: 820px) { .v2-art-row { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.v2-art-row h2 { font-size: clamp(22.36px, 2.24vw, 28.08px); line-height: 1.1; letter-spacing: -.01em; }
.v2-art-row p { margin-top: 10px; max-width: 52ch; color: var(--ink-2); }
.v2-art-row .v2-template { font-size: 13px; color: var(--muted); }
.v2-art-row figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.v2-art-row img { width: 100%; height: 100%; object-fit: cover; }

/* Start here */
.v2-start { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); }
.v2-start-grid { display: grid; gap: 48px 80px; }
@media (min-width: 980px) { .v2-start-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } .v2-form { position: sticky; top: 96px; } }
.v2-start h1 { font-size: clamp(34.4px, 4vw, 53.04px); line-height: 1.02; letter-spacing: -.022em; max-width: 14ch; }
.v2-start h2 { margin-top: 48px; font-size: 21px; }
.v2-next { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: n; }
.v2-next li { position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--rule); counter-increment: n; color: var(--ink-2); max-width: 48ch; }
.v2-next li::before { content: counter(n); position: absolute; left: 0; top: 14px; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.v2-journey { margin: 36px 0 24px; }
.v2-journey figcaption { margin-top: 8px; }
.v2-start-copy > .v2-small { max-width: 52ch; }
.v2-form { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); background: var(--paper); }
.v2-form label { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.v2-form input:not([type="checkbox"]):not([type="radio"]), .v2-form select, .v2-form textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid rgba(46, 42, 39, .35); background: var(--white); font: inherit; font-weight: 400; color: var(--ink); border-radius: 0; transition: border-color 200ms ease, box-shadow 200ms ease; }
.v2-form textarea { resize: vertical; }
.v2-form input:focus, .v2-form select:focus, .v2-form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(125, 32, 39, .25); }
.v2-form fieldset { border: 0; padding: 0; margin: 0; }
.v2-form legend { font-size: 15px; font-weight: 500; padding: 0; margin-bottom: 8px; }
.v2-form fieldset > div { display: flex; gap: 24px; }
.v2-form fieldset label, .v2-form label:has(> input[type="checkbox"]) { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.v2-form input[type="checkbox"], .v2-form input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.v2-form button[type="submit"] { min-height: 52px; border: 0; background: var(--accent); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; transition: background-color 200ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .v2-form button[type="submit"]:hover { background: var(--accent-press); } }
.v2-form button[type="submit"]:active { transform: scale(.98); }
.v2-form > p { font-size: 14px; color: var(--ink-2); }
.wf-error { color: var(--accent); font-size: 13px; font-weight: 600; }
.wf-error:empty { display: none; }
[aria-invalid="true"] { border-color: var(--accent) !important; border-width: 2px !important; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.v2-close-short { padding-bottom: clamp(64px, 9vw, 120px); }
.v2-close-short .v2-wrap { display: grid; gap: 8px 64px; align-items: end; }
@media (min-width: 900px) { .v2-close-short .v2-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .v2-close-short h2 { grid-row: span 2; } .v2-close-short p { margin-top: 0; } .v2-close-short .v2-btn { justify-self: start; } }
@media (max-width: 900px) { .v2-stages { scroll-padding-inline: var(--gutter); } .v2-stages::before { left: var(--gutter); } }


/* Mobile: feel installed, not embedded. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, select, [role="button"] { touch-action: manipulation; }
button, .v2-btn, .v2-nav a, .v2-menu a, .wf-principle, .mx-head, .mx-nav button, .tlg-skip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.v2-head { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.feedback-button { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.tlg-skip { right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.v2-foot { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
.v2-stages { overscroll-behavior-x: contain; }
.v2-form input, .v2-form select, .v2-form textarea { font-size: max(16px, 1em); }
/* Press feedback on touch, where there is no hover. */
.v2-link:active, .v2-contents a:active, .v2-nav a:active, .v2-menu a:not(.v2-btn):active, .v2-path:active .v2-path-title { opacity: .6; transition: opacity 80ms ease-out; }
.wf-principle:active span:first-child { color: var(--accent); }

/* Start here: on a phone the form comes straight after the introduction. */
.v2-start-grid { grid-template-areas: "intro" "form" "copy"; }
.v2-start-intro { grid-area: intro; } .v2-form { grid-area: form; } .v2-start-copy { grid-area: copy; }
.v2-start-copy h2 { margin-top: 0; }
@media (min-width: 980px) { .v2-start-grid { grid-template-areas: "intro form" "copy form"; grid-template-rows: auto 1fr; } .v2-start-copy h2 { margin-top: 16px; } }
/* Menu button becomes a close mark when the menu is open. */
.v2-menu-button span { transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
.v2-menu-button[aria-expanded="true"] span { transform: rotate(45deg); box-shadow: 0 0 0 var(--ink); }
.v2-menu-button[aria-expanded="true"] span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: rotate(90deg); }
.v2-menu-button span { position: relative; }

/* Home pathways: three even columns, every drawing the same shape, words aligned underneath. */
@media (min-width: 900px) { .v2-paths-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto !important; } .v2-path-lead { grid-row: auto !important; } }
.v2-path, .v2-path:not(.v2-path-lead) { grid-template-columns: 1fr !important; align-items: start !important; }
.v2-path-art, .v2-path-lead .v2-path-art, .v2-path:not(.v2-path-lead) .v2-path-art { aspect-ratio: 4 / 3 !important; }
.v2-path-lead .v2-path-title { font-size: 22px; }

/* Jim's portrait (interim, 192px source: shown no larger than it holds up). */
.v2-portrait { margin: 0; }
.v2-portrait img { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; object-fit: cover; filter: saturate(.9); }
.v2-portrait figcaption { max-width: 280px; }
.v2-jim-media { max-width: 360px; }
.v2-jim-media .v2-book { width: 34%; right: 0; bottom: 96px; }

/* Home: who it's for, and a lead under section headings. */
.v2-forwho-h { margin-top: 32px; font-size: 19px; }
.v2-forwho { list-style: none; padding: 0; margin: 12px 0 0; }
.v2-forwho li { position: relative; padding: 10px 0 10px 30px; border-top: 1px solid rgba(46, 42, 39, .14); color: var(--ink); font-size: 17px; }
.v2-forwho li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.v2-sec-lead { margin-top: 14px; max-width: 52ch; font-size: 18px; color: var(--ink-2); }
.v2-stage-n { font-family: var(--sans) !important; font-size: 13px !important; }
.v2-stage h3 { font-size: 21px !important; }
.mx-frame figcaption { max-width: calc(100% - 150px); font-size: clamp(20.64px, 1.92vw, 26.52px) !important; }

/* ============================ Motion ============================ */
/* Phone menu: drops from the header on open, closes instantly. */
.v2-menu { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .v2-menu { opacity: 0; transform: translateY(-8px); } }
/* Form: errors and the fallback ease in rather than jolt the layout. */
.wf-error { display: block; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
@starting-style { .wf-error { opacity: 0; transform: translateY(-4px); } }
#form-fallback { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { #form-fallback { opacity: 0; transform: translateY(-4px); } }
/* Thanks: the small lock opens once. Its resting state is open, so with reduced motion it simply shows open. */
.v2-thanks-head { display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 24px); }
.v2-thanks-lock { flex: none; width: clamp(44px, 5vw, 64px); height: auto; overflow: visible; }
.v2-thanks-lock .lk-shackle { fill: none; stroke: var(--deep); stroke-width: 14; stroke-linecap: square; transform: translateY(-26px); }
.v2-thanks-lock .lk-body { fill: var(--white); stroke: var(--deep); stroke-width: 10; }
.v2-thanks-lock .lk-hole { fill: var(--deep); }
@media (prefers-reduced-motion: no-preference) {
  .v2-thanks-lock .lk-shackle { animation: lkOpen 520ms cubic-bezier(.34, 1.56, .64, 1) 300ms both; }
  @keyframes lkOpen { from { transform: none; } to { transform: translateY(-26px); } }
}

/* ============================ Copy blocks and footer ============================ */
/* Review notes: one consistent small tag wherever they sit, never the size of the text around them. */
.tbc { display: inline-block; margin: 6px 0 0; padding: 3px 8px; border-left: 2px solid var(--accent); background: rgba(125, 32, 39, .06); color: var(--accent); font-family: var(--sans); font-size: 12px; font-style: normal; font-weight: 500; line-height: 1.45; letter-spacing: 0; vertical-align: baseline; max-width: 60ch; }
.v2-close .tbc, .v2-dark .tbc { background: rgba(239, 230, 216, .1); color: var(--paper); border-color: var(--paper); }
.v2-note { color: var(--muted); }
/* Closing street: keep its own proportions (the height attribute was stretching the box). */
.v2-close-street { height: auto; display: block; }
/* Footer */
.v2-foot { display: block; padding: clamp(48px, 6vw, 80px) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
.v2-foot-top { display: grid; gap: 40px 64px; }
@media (min-width: 900px) { .v2-foot-top { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.v2-foot-mark { display: inline-block; }
.v2-foot img { height: 30px; margin: 0 0 18px; }
.v2-foot-credit { margin: 0; max-width: 34ch; font-family: var(--serif); font-size: clamp(16.34px, 1.44vw, 17.94px); line-height: 1.3; color: var(--ink); }
.v2-foot-credit span { display: block; }
.v2-foot-credit span + span { margin-top: 6px; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.v2-foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-content: start; }
.v2-foot-nav > div { display: grid; gap: 4px; align-content: start; }
.v2-foot-h { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.v2-foot-nav a { display: block; padding: 6px 0; color: var(--ink); font-size: 16px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .v2-foot-nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
.v2-foot-nav a:active { opacity: .6; }
.v2-foot-legal { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.v2-foot-legal p { margin: 0; max-width: 92ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* Single-message sections: heading left, message right, so the block fills the width. */
@media (min-width: 900px) {
  .v2-pair-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 112px); align-items: start; }
  .v2-pair-lead > h2 { grid-row: 1 / span 6; }
  .v2-pair-lead > :not(h2) { grid-column: 2; }
  .v2-pair-lead > p:first-of-type { margin-top: 0; max-width: 40ch; }
  .v2-foot-nav { grid-template-columns: repeat(2, minmax(150px, 220px)); justify-content: end; }
}
.v2-pair-lead p.v2-note { margin-top: 14px; }

/* Home steps: the first three are about whether you can hold it, the last two are the holding. */
.v2-stages { padding-top: 40px; }
.v2-stages::before { top: 172px; }
.v2-stage-phase { position: absolute; top: -40px; left: 0; margin: 0; padding-top: 8px; border-top: 2px solid var(--deep); font-size: 14px; font-weight: 600; color: var(--deep); white-space: nowrap; }
.v2-span-3 { width: calc(300% + 56px); }
.v2-span-2 { width: calc(200% + 28px); }

/* Article pages */
.v2-art-head { padding-bottom: clamp(32px, 4vw, 48px); }
.v2-art-head h1 { max-width: 20ch; }
.v2-art-head .v2-lead { max-width: 46ch; }
.v2-crumb { margin: 0 0 18px; font-size: 15px; }
.v2-crumb a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.v2-art-hero { margin: 0; }
.v2-art-hero img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.v2-prose { max-width: 66ch; padding: clamp(40px, 6vw, 72px) 0 0; font-size: 18px; line-height: 1.7; color: var(--ink); }
.v2-prose > p + p { margin-top: 1.1em; }
.v2-prose h2 { margin: 1.9em 0 .5em; font-size: clamp(20.64px, 1.92vw, 23.4px); line-height: 1.2; }
.v2-prose ul { margin: 1em 0 0; padding-left: 1.2em; }
.v2-prose li + li { margin-top: .5em; }
.v2-prose li::marker { color: var(--accent); }
.v2-prose p { margin: 0; }
.v2-prose ul + p, .v2-prose h2 + p { margin-top: 0; }
.v2-prose ul + p { margin-top: 1.1em; }
.v2-figs { margin-top: clamp(40px, 5vw, 56px); padding: 24px 24px 22px; background: var(--paper); }
.v2-figs h2 { margin: 0 0 8px; font-size: 21px; }
.v2-figs p { font-size: 16px; color: var(--ink-2); }
.v2-art-next { margin: clamp(48px, 6vw, 80px) 0 clamp(56px, 8vw, 112px); padding-top: 24px; border-top: 1px solid var(--rule); }
.v2-art-next .v2-small { margin: 0 0 6px; color: var(--muted); }
.v2-art-next a { font-family: var(--serif); font-size: clamp(20.64px, 2.08vw, 24.96px); line-height: 1.2; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.v2-art-row h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .v2-art-row h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; } }
.v2-art-more { margin-top: 14px !important; }
/* Client stories: room for real testimonials, shown as empty slots until consent is in writing. */
.v2-stories { padding: clamp(72px, 10vw, 140px) 0; }
.v2-stories-ground { background: var(--white); border-top: 1px solid var(--rule); }
.v2-stories h2 { font-size: clamp(25.8px, 2.88vw, 35.88px); line-height: 1.08; letter-spacing: -.015em; max-width: 18ch; }
.v2-stories .v2-sec-lead { max-width: 52ch; }
.v2-story-grid { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .v2-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.v2-story { display: grid; align-content: start; gap: 14px; min-height: 260px; padding: 28px 26px; border: 1px dashed var(--rule-3); background: var(--white); }
.v2-story-kind { margin: 0; padding-top: 10px; border-top: 2px solid var(--deep); width: max-content; font-size: 14px; font-weight: 600; color: var(--deep); }
.v2-story-q { margin: 0; font-family: var(--serif); font-size: clamp(18.92px, 1.76vw, 21.84px); line-height: 1.25; color: var(--muted); }
.v2-story-q::before { content: "\201C"; display: block; height: .55em; font-size: 2.4em; line-height: 1; color: var(--paper-2); }
.v2-story-who { margin: auto 0 0; font-size: 15px; color: var(--ink-2); }
.v2-story-grid { align-items: stretch; } .v2-story { height: 100%; box-sizing: border-box; }
/* Holding page for launch (coming-soon.html) */
.v2-soon { background: var(--deep); color: var(--paper); min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.v2-soon-main { display: grid; align-content: space-between; overflow: hidden; padding-top: clamp(48px, 9vw, 120px); }
.v2-soon-mark { width: 104px; height: auto; margin-bottom: clamp(32px, 5vw, 56px); }
.v2-soon h1 { color: var(--paper); font-size: clamp(32.68px, 4.8vw, 65.52px); line-height: 1.02; letter-spacing: -.022em; max-width: 15ch; }
.v2-soon-lead { margin: 24px 0 0; max-width: 44ch; font-size: clamp(17px, 1.6vw, 20px); color: rgba(239, 230, 216, .88); }
.v2-soon-open { margin: 28px 0 0; padding-top: 10px; border-top: 2px solid var(--paper); width: max-content; font-weight: 600; }
.v2-soon-street { display: block; width: min(1280px, 130%, 92svh); height: auto; max-width: none; margin: clamp(40px, 6vw, 72px) auto -2px; position: relative; left: 50%; transform: translateX(-50%); }
.v2-soon-foot { padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--deep); border-top: 1px solid rgba(239, 230, 216, .2); }
.v2-soon-foot p { margin: 0 auto; max-width: var(--wide); font-size: 13px; color: rgba(239, 230, 216, .8); }
@media (min-width: 900px) {
  .v2-soon-main { position: relative; min-height: calc(100svh - 64px); align-content: start; }
  .v2-soon-street { position: absolute; left: auto; right: -3vw; bottom: 0; transform: none; width: min(50vw, 980px, 120svh); margin: 0; }
}

/* ============================ About, rebuilt ============================ */
.v2-ab-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 8vw, 112px); }
.v2-ab-hero-grid { display: grid; gap: 48px 96px; align-items: center; }
@media (min-width: 900px) { .v2-ab-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.v2-ab-hero h1 { font-size: clamp(41.28px, 5.6vw, 74.88px); line-height: 1; letter-spacing: -.025em; }
.v2-ab-hero .v2-lead { margin-top: 24px; max-width: 34ch; font-family: var(--serif); font-size: clamp(18.06px, 1.6vw, 20.28px); line-height: 1.4; color: var(--ink); }
.v2-ab-hero .v2-actions { margin-top: 32px; }
.v2-ab-media { position: relative; justify-self: center; width: min(100%, 440px); padding: 0; }
.v2-ab-photo { margin: 0; width: 78%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.v2-ab-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9); }
.v2-ab-book { position: absolute; right: 0; top: 38%; width: 40%; transform: rotate(4deg); box-shadow: 0 1px 0 rgba(46, 42, 39, .1), 0 22px 36px -18px rgba(46, 42, 39, .6); }
.v2-ab-photo-note { margin: 14px 0 0; }
.v2-ab-story { background: var(--paper); padding: clamp(64px, 9vw, 128px) 0; }
.v2-ab-story-grid { display: grid; gap: 40px 96px; align-items: start; }
@media (min-width: 900px) { .v2-ab-story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .v2-ab-story-head { position: sticky; top: 112px; } }
.v2-ab-story-head h2 { font-size: clamp(27.52px, 3.04vw, 37.44px); line-height: 1.08; letter-spacing: -.015em; }
.v2-ab-story-head > p { margin-top: 16px; max-width: 36ch; font-size: 17px; color: var(--ink-2); }
.v2-ab-chapters { list-style: none; margin: 0; padding: 0 0 0 32px; border-left: 2px solid var(--deep); }
.v2-ch { position: relative; padding: 0 0 clamp(32px, 4vw, 48px); }
.v2-ch:last-child { padding-bottom: 0; }
.v2-ch::before { content: ""; position: absolute; left: -40px; top: 6px; width: 14px; height: 14px; background: var(--paper); border: 2px solid var(--deep); border-radius: 50%; }
.v2-ch-n { margin: 0; font-size: 14px; font-weight: 600; color: var(--deep); }
.v2-ch h3 { margin-top: 4px; font-size: clamp(20.64px, 1.92vw, 23.4px); line-height: 1.15; }
.v2-ch-d { margin: 8px 0 0; max-width: 46ch; font-size: 16px; color: var(--ink-2); }
.v2-ab-why { padding: clamp(64px, 9vw, 128px) 0; }
.v2-ab-why-grid { display: grid; gap: 40px 80px; align-items: center; }
@media (min-width: 900px) { .v2-ab-why-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.v2-ab-why h2 { font-size: 19px; color: var(--muted); font-weight: 500; }
.v2-ab-quote { margin: 16px 0 0; font-family: var(--serif); font-size: clamp(25.8px, 2.88vw, 37.44px); line-height: 1.16; letter-spacing: -.015em; color: var(--ink); max-width: 22ch; }
.v2-ab-quote-small { margin: 20px 0 0; font-size: 18px; color: var(--ink-2); }
.v2-ab-why-art { margin: 0; }
.v2-ab-why-art img { width: 100%; height: auto; display: block; }
.v2-ab-facts { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: 36px 80px; }
@media (min-width: 900px) { .v2-ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-ab-facts > div { padding-top: 20px; border-top: 2px solid var(--deep); }
.v2-ab-facts h3 { font-size: 21px; line-height: 1.2; }
.v2-ab-facts p { margin-top: 10px; font-size: 17px; color: var(--ink-2); max-width: 46ch; }

/* Footer: brand, links and a way in, so the row reads as one band */
@media (min-width: 900px) {
  .v2-foot-top { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
  .v2-foot-nav { justify-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.v2-foot-cta { display: grid; gap: 16px; align-content: start; }
.v2-foot-cta p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--ink); max-width: 22ch; }
.v2-foot-cta .v2-btn { justify-self: start; }
/* Book: two plain blocks */
.v2-bk-holds { padding: clamp(56px, 8vw, 112px) 0; }
.v2-bk-grid { margin-top: 0; }
.v2-bk-grid h2 { font-size: clamp(22.36px, 2.08vw, 24.96px); line-height: 1.15; }
.v2-bk-list { margin: 14px 0 0; padding-left: 1.1em; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.4; color: var(--ink); }
.v2-bk-list li + li { margin-top: 10px; }
.v2-bk-list li::marker { color: var(--accent); }
/* Articles list: bigger pictures, and the whole row is the link */
.v2-art-row { position: relative; }
@media (min-width: 820px) { .v2-art-row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.v2-art-row h2 a::after { content: ""; position: absolute; inset: 0; }
.v2-art-row .v2-art-more { position: relative; z-index: 1; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .v2-art-row:hover h2 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; text-decoration-thickness: 2px; } }
.v2-art-row:active h2 a { opacity: .6; }
/* Review notes toggle (preview only) */
/* Two modes: review notes show only in review view (preview addresses, switched by feedback.js). Public view never shows them. */
html:not(.review-view) .tbc, html:not(.review-view) .ref-tag, html:not(.review-view) .v2-note:has(> .tbc) { display: none !important; }
.notes-toggle { position: fixed; right: 16px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 60; min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule-3); background: var(--white); color: var(--ink); font: 500 13px/1 var(--sans); cursor: pointer; box-shadow: 0 6px 20px -10px rgba(46, 42, 39, .5); }
@media print { .notes-toggle { display: none !important; } }

/* ============================ Green bands: the closing look, used for the big moments ============================ */
.v2-green { background: var(--deep); color: var(--paper); padding: clamp(72px, 10vw, 136px) 0; position: relative; }
.v2-green h2, .v2-green h3 { color: var(--paper); }
.v2-green p { color: rgba(239, 230, 216, .88); }
.v2-green a:not(.v2-btn) { color: var(--paper); text-decoration-color: var(--paper); }
.v2-green .tbc { background: rgba(239, 230, 216, .1); color: var(--paper); border-color: var(--paper); }
.v2-green + .v2-close, .v2-close + .v2-green { border-top: 1px solid rgba(239, 230, 216, .18); }
.v2-green-grid { display: grid; gap: 40px 80px; align-items: center; }
@media (min-width: 900px) { .v2-green-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.v2-green-copy h2 { font-size: clamp(30.96px, 3.68vw, 49.92px); line-height: 1.04; letter-spacing: -.02em; max-width: 14ch; }
.v2-green-copy p { margin-top: 20px; max-width: 40ch; font-size: clamp(17px, 1.5vw, 19px); }
.v2-green-copy .v2-btn { margin-top: 28px; }
.v2-green-art { margin: 0; justify-self: center; }
.v2-green-art img { display: block; width: 100%; max-width: 440px; height: auto; }
.v2-green-strip { margin: clamp(40px, 6vw, 72px) 0 0; }
.v2-green-strip img { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; }
/* green versions of the message sections and About's "why" */
.v2-pair.v2-green .v2-pair-lead p { color: var(--paper); }
.v2-pair.v2-green .v2-pair-lead h2 { color: var(--paper); }
.v2-ab-why.v2-green h2 { color: rgba(239, 230, 216, .75); }
.v2-ab-why.v2-green .v2-ab-quote { color: var(--paper); }
.v2-ab-why.v2-green .v2-ab-quote-small { color: rgba(239, 230, 216, .85); }
.v2-ab-why.v2-green .v2-ab-facts > div { border-top-color: rgba(239, 230, 216, .6); }
.v2-ab-why.v2-green .v2-ab-facts p { color: rgba(239, 230, 216, .85); }
.v2-ab-why-art.v2-line img { max-width: 300px; margin: 0 auto; }

/* Six pathways on the home page: three by two */
.v2-paths-six { gap: 40px 28px; }
@media (min-width: 900px) { .v2-paths-six { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 600px) and (max-width: 899px) { .v2-paths-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-paths-six .v2-path-art { aspect-ratio: 16 / 10 !important; background: var(--white); }
.v2-paths-six .v2-path-art img { object-fit: contain; object-position: 50% 100%; }
.v2-paths-six .v2-path-title { font-size: 22px; }
.v2-pw-art img { object-fit: contain; background: var(--white); }
/* ============================ Article tools, steps and checklists ============================ */
.v2-steps-list { margin: 1em 0 0; padding: 0; list-style: none; counter-reset: st; }
.v2-steps-list li { position: relative; padding: 0 0 0 44px; counter-increment: st; }
.v2-steps-list li + li { margin-top: 14px; }
.v2-steps-list li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--deep); color: var(--paper); font: 600 14px/1 var(--sans); }
.v2-check { margin: 1em 0 0; padding: 0; list-style: none; }
.v2-check li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--rule); }
.v2-check li:last-child { border-bottom: 1px solid var(--rule); }
.v2-check li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 18px; height: 18px; border: 2px solid var(--deep); }
.v2-credit { margin-top: 8px; font-size: 13px; color: var(--muted); }
.v2-art-hero img { aspect-ratio: 3 / 2; max-height: 560px; }
.v2-art-row img { aspect-ratio: 3 / 2; }
.tl { margin: clamp(36px, 5vw, 56px) 0 0; padding: clamp(22px, 3vw, 32px); background: var(--paper); }
.tl h2 { margin: 0 0 8px !important; font-size: clamp(20.64px, 1.92vw, 23.4px); }
.tl > p { font-size: 16px; color: var(--ink-2); }
.tl-form { margin-top: 20px; display: grid; gap: 24px; }
@media (min-width: 760px) { .tl-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.tl-fields { display: grid; gap: 12px; }
.tl-field { display: grid; gap: 4px; }
.tl-label { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tl-input { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--rule-3); padding: 0 12px; min-height: 48px; }
.tl-input:focus-within { border-color: var(--deep); box-shadow: 0 0 0 2px rgba(39, 65, 51, .25); }
.tl-input input, .tl-input select { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 0; outline: none; }
.tl-unit { flex: none; font-size: 14px; color: var(--muted); }
.tl-sub { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--deep); }
.tl-out { margin: 0; padding: 20px; background: var(--deep); color: var(--paper); display: grid; gap: 14px; position: sticky; top: 96px; }
.tl-row { display: grid; gap: 2px; }
.tl-row dt { font-size: 13px; color: rgba(239, 230, 216, .8); }
.tl-row dd { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.25; color: var(--paper); }
.tl-key { padding-top: 14px; border-top: 1px solid rgba(239, 230, 216, .25); }
.tl-key dd { font-size: 22px; }
.tl-note { margin-top: 14px !important; font-size: 13px !important; color: var(--muted) !important; }
@media (max-width: 759px) { .tl-out { position: static; } }
/* QA fixes: inputs at 16px so phones don't zoom; footer links and brand at least 44px tall to tap */
.v2-form input:not([type="checkbox"]):not([type="radio"]), .v2-form select, .v2-form textarea { font-size: 16px; }
.v2-foot-nav a { min-height: 44px; display: flex; align-items: center; padding: 0; }
.v2-foot-nav > div { gap: 0; }
.v2-brand { min-height: 44px; display: inline-flex; align-items: center; }
@media (pointer: coarse) { .v2-link { display: inline-block; padding: 11px 0; } }

/* Five steps, re-laid: equal paper tiles so every picture sits square over its text,
   a single line with a marker per step underneath, phase labels above. */
.v2-stages::before { display: none; }
.v2-stage { display: flex; flex-direction: column; }
.v2-stage img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center bottom; background: var(--paper); padding: 14% 12% 0; box-sizing: border-box; }
.v2-stage-n { position: relative; margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--rule-3); }
.v2-stage:not(:last-child) .v2-stage-n { margin-right: -28px; }
.v2-stage-n::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--deep); }
.v2-stage:nth-child(n+4) .v2-stage-n::before { background: var(--accent); }
@media (max-width: 900px) {
  .v2-stages { display: block; overflow: visible; padding-top: 0; }
  .v2-stage { display: grid; grid-template-columns: 104px 1fr; column-gap: 20px; align-items: start; padding: 18px 0; border-top: 1px solid var(--rule); }
  .v2-stage img { grid-row: 1 / span 3; grid-column: 1; padding: 10% 8% 0; }
  .v2-stage:has(.v2-stage-phase) img { grid-row: 2 / span 3; }
  .v2-stage-phase { position: static; grid-column: 1 / -1; width: auto !important; white-space: normal; margin: 6px 0 14px !important; }
  .v2-stage > :not(img):not(.v2-stage-phase) { grid-column: 2; }
  .v2-stage-n { margin: 0 !important; padding-top: 0; border-top: 0; padding-left: 16px; }
  .v2-stage:not(:last-child) .v2-stage-n { margin-right: 0 !important; }
  .v2-stage-n::before { top: 5px; }
  .v2-stage p:last-child { max-width: none; }
}

/* Example stories: the label stays visible even with review notes hidden */
.v2-story-q { color: var(--ink-2); }
.v2-story-path { display: block; color: var(--muted); font-size: 14px; }
.v2-story-flag { margin: 0; padding: 6px 10px; width: max-content; max-width: 100%; font-size: 13px; color: var(--accent); background: rgba(125, 32, 39, .06); border-left: 2px solid var(--accent); }
.v2-ab-sub { margin-top: 12px; font-family: var(--serif); font-size: clamp(17.2px, 1.6vw, 18.72px); line-height: 1.3; color: var(--ink-2); max-width: 30ch; }
@media (min-width: 900px) { .v2-bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-story-example .v2-story-q { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.35; }

/* Alignment pass: reading text stays left; a few standalone moments are centred. */
/* 1. Closing band on every page */
.v2-close { text-align: center; }
.v2-close h2 { margin-inline: auto; }
.v2-close p { margin-inline: auto; }
.v2-close-short .v2-wrap { display: block; }
.v2-close-short p { margin: 20px auto 30px !important; }
/* 2. Home opening statement, with the reading text left-aligned in a centred column */
@media (min-width: 1000px) { .v2-premise .v2-wrap { grid-template-columns: minmax(0, 1fr); } }
.v2-premise .v2-wrap { justify-items: center; }
.v2-premise-lead { text-align: center; max-width: 22ch; margin: 0 auto clamp(12px, 2vw, 24px); }
.v2-premise .v2-wrap > div { width: 100%; max-width: 640px; }
.v2-premise-body { max-width: none; }
/* 3. About pull quote */
.v2-ab-why-grid { justify-items: center; text-align: center; }
@media (min-width: 900px) { .v2-ab-why-grid { grid-template-columns: minmax(0, 1fr); } }
.v2-ab-why-art { order: -1; width: 160px; }
.v2-ab-why-art.v2-line img { max-width: 160px; }
.v2-ab-quote { margin-inline: auto; }
.v2-ab-quote-small { max-width: 56ch; margin-inline: auto; }
/* 4. Headings over full-width grids */
.v2-paths .v2-sec-head, .v2-stories .v2-sec-head { flex-direction: column; align-items: center; text-align: center; }
.v2-paths .v2-sec-head h2, .v2-stories .v2-sec-head h2, .v2-paths .v2-sec-lead, .v2-stories .v2-sec-lead { margin-inline: auto; }
/* On phones, longer centred paragraphs are hard to read: keep them left. */
@media (max-width: 700px) {
  .v2-paths .v2-sec-head, .v2-stories .v2-sec-head { align-items: flex-start; text-align: left; }
  .v2-ab-quote-small { text-align: left; }
  .v2-ab-why-grid { justify-items: start; text-align: left; }
  .v2-ab-quote { margin-inline: 0; }
  .v2-ab-why-art { justify-self: center; }
}

/* Correction pass: delivery and roles on pathways, roles on How it works, book enquiry, worked example */
.v2-pw-deliver { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.v2-pw-deliver h3 { font-size: 18px; line-height: 1.3; margin: 0 0 10px; }
.v2-pw-deliver h3 + * { margin-bottom: 22px; }
.v2-pw-steps { margin: 0; padding-left: 1.3em; font-size: 15px; color: var(--ink-2); }
.v2-pw-steps li { margin: 4px 0; }
.v2-pw-who { display: grid; gap: 4px 0; margin: 0; font-size: 15px; }
.v2-pw-who dt { font-weight: 600; color: var(--deep); margin-top: 8px; }
.v2-pw-who dd { margin: 0; color: var(--ink-2); }
.v2-roles { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--rule); }
.v2-roles h2 { font-size: clamp(24.08px, 2.4vw, 31.2px); line-height: 1.1; }
.v2-roles-grid { display: grid; gap: 24px; margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 900px) { .v2-roles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.v2-roles-grid > div { padding-top: 14px; border-top: 2px solid var(--deep); }
.v2-roles-grid h3 { font-size: 19px; line-height: 1.25; }
.v2-roles-grid p { margin-top: 8px; color: var(--ink-2); }
.v2-book-get { padding: clamp(56px, 8vw, 104px) 0; background: var(--paper); text-align: center; }
.v2-book-get h2 { font-size: clamp(24.08px, 2.4vw, 31.2px); }
.v2-book-get p { max-width: 56ch; margin: 12px auto 0; color: var(--ink-2); }
.v2-book-get .v2-actions { justify-content: center; margin-top: 24px; }
.v2-worked dl { display: grid; gap: 0; margin: 12px 0; }
.v2-worked-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.v2-worked-row dt { margin: 0; } .v2-worked-row dd { margin: 0; font-weight: 600; text-align: right; }

/*: green footer, paperbark sections, photo placeholders, blog cards, resources */
.v2-paper { background: var(--paper); }
.v2-roles { background: var(--paper); border-top: 0; }
.v2-bk-holds { background: var(--paper); padding: clamp(56px, 8vw, 104px) 0; }
.v2-book-get { background: var(--white); }
.v2-pw-flip { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
/* footer */
footer.v2-foot { max-width: none; background: var(--deep); color: rgba(239, 230, 216, .85); }
footer.v2-foot > * { max-width: var(--wide); margin-inline: auto; }
.v2-foot-credit, .v2-foot-cta p { color: var(--paper); }
.v2-foot-credit span + span, .v2-foot-h { color: rgba(239, 230, 216, .72); }
.v2-foot-nav a { color: var(--paper); }
.v2-foot-legal { border-top-color: rgba(239, 230, 216, .2); }
.v2-foot-legal p { color: rgba(239, 230, 216, .7); }
.v2-foot .v2-btn { background: var(--paper); color: var(--ink); }
.v2-foot .tbc { background: rgba(239, 230, 216, .1); color: var(--paper); border-color: var(--paper); }
.v2-foot a:focus-visible { outline-color: var(--paper); }
/* photo pending */
.v2-photo-pending { display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em; border: 1px dashed var(--rule-3); }
.v2-portrait.v2-photo-pending { width: 100%; max-width: 280px; aspect-ratio: 1; }
.v2-portrait.v2-photo-pending figcaption { grid-row: 2; }
.v2-letter-quote { margin: 20px 0 18px; font-family: var(--serif); font-size: clamp(17.2px, 1.6vw, 20.28px); line-height: 1.3; color: var(--ink); }
.v2-letter-quote span { display: block; margin-top: 6px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
/* story photo */
.v2-story-person { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.v2-story-person .v2-story-who { margin: 0; }
.v2-story-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px dashed var(--rule-3); font-size: 13px; color: var(--muted); }
/* blog cards on home */
.v2-insights-posts { display: block; padding: clamp(64px, 9vw, 120px) 0; }
.v2-post-grid { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 0; display: grid; gap: 28px; }
@media (min-width: 700px) { .v2-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .v2-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-post a { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.v2-post-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper); }
.v2-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .v2-post a:hover .v2-post-img img { transform: scale(1.03); } .v2-post a:hover .v2-post-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } }
.v2-post-title { margin-top: 6px; font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--ink); }
.v2-post-stand { font-size: 15px; color: var(--ink-2); }
.v2-post-more { margin-top: 28px; }
/* resources */
.v2-resources { padding: 0 0 clamp(64px, 9vw, 120px); }
.v2-res-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
@media (min-width: 900px) { .v2-res-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-res { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px; background: var(--paper); align-items: start; }
.v2-res img { width: 120px; height: 120px; object-fit: cover; }
.v2-res h2 { font-size: 21px; line-height: 1.2; }
.v2-res p { margin: 8px 0 16px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 520px) { .v2-res { grid-template-columns: 1fr; } .v2-res img { width: 100%; height: 160px; } }
.v2-res-more { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--rule); max-width: 60ch; }
.v2-res-more h2 { font-size: 22px; }
.v2-res-more p { color: var(--ink-2); }
footer.v2-foot nav a, footer.v2-foot .v2-foot-nav a { color: var(--paper); }
.v2-story { display: flex; flex-direction: column; gap: 14px; } .v2-story-person { margin-top: auto; }

/* Paragraph width: paragraphs fill their container or column instead of a narrow measure.
   Centred statements keep a cap so lines stay readable; long-form article text keeps a wide but readable measure. */
.v2-hero-side, .v2-premise-body, .v2-stage p:last-child, .v2-path-text, .v2-letter > p, .v2-insights-grid > div p,
.v2-lead, .v2-intro .v2-small, .v2-mx .mx-intro p, .mx-intro, .v2-pair p, .v2-pair-lead p, .v2-pair-lead > p:first-of-type,
.v2-pw-desc, .v2-pw dl, .v2-book-intro p:not(.v2-small):not(.v2-lead):not(.v2-note), .v2-art-row p, .v2-next li,
.v2-start-copy > .v2-small, .v2-sec-lead, .v2-foot-legal p, .v2-art-head .v2-lead, .v2-ab-hero .v2-lead,
.v2-ab-story-head > p, .v2-ch-d, .v2-ab-facts p, .v2-green-copy p, .v2-ab-sub, .v2-res-more, .v2-soon-lead,
.v2-roles .v2-sec-lead, .v2-pw-who, .v2-pw-steps { max-width: none; }
.v2-premise .v2-wrap > div { max-width: 960px; }
.v2-paths .v2-sec-lead, .v2-stories .v2-sec-lead, .v2-ab-quote-small, .v2-book-get p { max-width: 72ch; }
.v2-close p { max-width: 60ch; }
.v2-prose { max-width: 880px; }

/* The key on How it works: horizontal key, three house teeth, a lock. Each principle opened
   sets a tooth and slides the key in; all three turn the key and open the lock. */
.tlg-keyfig { display: grid; gap: 24px; align-items: start; }
.tlg-key { width: 100%; height: auto; overflow: visible; }
.tlg-key-body { fill: var(--ink); }
.tlg-tooth { fill: var(--ink); transition: transform 450ms var(--ease-out), fill 300ms ease; transform-box: fill-box; transform-origin: center; }
.tlg-tooth.is-set { fill: var(--accent); }
.tlg-lock rect { fill: var(--paper-2); stroke: var(--ink); stroke-width: 3; }
.tlg-hole { fill: var(--ink); transition: transform 500ms var(--ease-out); transform-box: view-box; transform-origin: 586px -100px; }
.tlg-key-move { transition: transform 600ms var(--ease-out); }
.tlg-keyfig[data-step="1"] .tlg-key-move { transform: translateX(18px); }
.tlg-keyfig[data-step="2"] .tlg-key-move { transform: translateX(36px); }
.tlg-keyfig[data-step="3"] .tlg-key-move { transform: translateX(56px) scaleY(.82); transform-origin: 300px -100px; }
.tlg-keyfig[data-step="3"] .tlg-hole { transform: rotate(90deg); }
.tlg-keyfig[data-step="3"] .tlg-lock rect { fill: var(--calm); }
.tlg-principles { display: grid; gap: 0; }
.tlg-principles > .v2-small { margin: 0 0 10px; font-size: 14px; }
.tlg-pr { border-top: 1px solid var(--rule); }
.tlg-pr-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 48px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font-family: var(--serif); font-size: 19px; line-height: 1.25; }
.tlg-pr-btn::after { content: "+"; margin-left: auto; font-family: var(--sans); font-size: 19px; color: var(--muted); transition: transform 200ms var(--ease-out); }
.tlg-pr-btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.tlg-pr-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 13px; border: 1px solid var(--ink); }
.tlg-pr-btn[aria-expanded="true"] .tlg-pr-n { background: var(--accent); border-color: var(--accent); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .tlg-pr-btn:hover > span:nth-child(2) { color: var(--accent); } }
.tlg-pr-btn:active { opacity: .7; }
.tlg-pr-body p { margin: 0 0 14px 38px; font-size: 15px; color: var(--ink-2); }
.tlg-turned { margin: 12px 0 0; min-height: 1.5em; font-weight: 600; color: var(--deep); }
.tlg-jdm { margin-top: 28px; padding: 22px 24px; background: var(--paper); border-left: 3px solid var(--deep); }
.tlg-jdm h2 { font-size: 21px; line-height: 1.2; }
.tlg-jdm p { margin-top: 10px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .tlg-key-move, .tlg-tooth, .tlg-hole { transition: none; } }
.v2-stories .v2-sec-head h2, .v2-paths .v2-sec-head h2 { max-width: none; text-wrap: balance; }

/* Five principles on How it works: one row per principle, picture and words side by side,
   everything visible, aligned to one grid. Replaces the accordion with a separate picture panel. */
.v2-pl { padding: clamp(64px, 9vw, 120px) 0; }
.pl-intro h2 { font-size: clamp(25.8px, 2.88vw, 35.88px); line-height: 1.08; letter-spacing: -.015em; }
.pl-intro > p { margin-top: 14px; font-size: 18px; color: var(--ink-2); }
.pl-list { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; }
.pl-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--rule); }
.pl-phase { grid-column: 1 / -1; margin: 0 0 4px; padding-top: 8px; border-top: 2px solid var(--deep); width: max-content; font-size: 14px; font-weight: 600; color: var(--deep); }
.pl-row:has(.pl-phase) { border-top: 0; }
.pl-art { margin: 0; background: var(--paper); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.pl-art img { width: 78%; height: 86%; object-fit: contain; }
.pl-n { margin: 0; font-size: 13px; color: var(--muted); }
.pl-text h3 { margin-top: 2px; font-size: clamp(24.08px, 2.24vw, 29.64px); line-height: 1.1; }
.pl-q { margin-top: 4px; font-family: var(--serif); font-size: 19px; color: var(--ink-2); }
.pl-text > p:not(.pl-n):not(.pl-q) { margin-top: 12px; color: var(--ink-2); }
.pl-good { font-size: 15px; }
.pl-good strong { color: var(--deep); font-weight: 600; }
.v2-pl .ref-tag { margin-top: 16px; }
@media (max-width: 700px) {
  .pl-row { grid-template-columns: 96px 1fr; gap: 12px 18px; align-items: start; }
  .pl-art { aspect-ratio: 1; }
  .pl-art img { width: 88%; height: 88%; }
  .pl-text h3 { font-size: 22px; }
  .pl-q { font-size: 17px; }
}

.svg-deep{fill:var(--deep)}

/* Stories retold from the book: a short account, not a quote, so no quote mark and reading-size type. */
.v2-story-retold { border-style: solid; }
.v2-story-retold .v2-story-q { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.v2-story-retold .v2-story-q::before { content: none; }

/* ============================ Illustration set v3 ============================ */
.v2-paths-six .v2-path-art { background: var(--paper); }
.v2-paths-six .v2-path-art img, .v2-pw-art img { object-fit: cover; object-position: 50% 60%; background: none; }
.v2-pw-art { aspect-ratio: 3 / 2; }
.v2-green-art img { max-width: 520px; }
/* principles: art sits straight on the page, no tile behind it */
.v2-stage img, .v2-stage img[src] { padding: 0; background: none; aspect-ratio: 1 / 1; height: auto; object-fit: contain; object-position: center bottom; }
.v2-stages::before { display: none; }
.pl-art { background: none; }
.pl-art img { width: 100%; height: 100%; object-fit: contain; }
/* About: line drawing in the green "why" band */
.v2-ab-why-art.v2-line img { max-width: 280px; }

/* ============================ Journeys: five ways in, as linked rows ============================ */
.v2-journeys { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: 28px 64px; align-items: start; }
@media (min-width: 900px) { .v2-journeys { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .v2-journeys-head { position: sticky; top: 104px; } }
.v2-journeys .v2-forwho-h { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.012em; max-width: 14ch; text-align: left; }
.v2-forwho-sub { margin: 14px 0 0; max-width: 34ch; color: var(--ink-2); font-size: 16px; text-align: left; }
.v2-journeys .v2-forwho { margin: 0; padding: 0; list-style: none; display: block; max-width: none; border-top: 1px solid var(--rule-3); }
.v2-journeys .v2-forwho li { padding: 0; border: 0; border-bottom: 1px solid var(--rule-3); background: none; }
.v2-journeys .v2-forwho li::before { content: none; }
.v2-journeys .v2-forwho a { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 20px 44px 20px 0; color: var(--ink-2); text-decoration: none; font-size: 16px; line-height: 1.4; transition: padding-left 240ms var(--ease-out), color 200ms ease; }
.v2-journeys .v2-forwho strong { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.15; color: var(--ink); transition: color 200ms ease; }
.v2-journeys .v2-forwho a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: right 240ms var(--ease-out); }
.v2-journeys .v2-forwho a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v2-journeys .v2-forwho a:active { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .v2-journeys .v2-forwho a:hover { padding-left: 10px; color: var(--accent); }
  .v2-journeys .v2-forwho a:hover strong { color: var(--accent); }
  .v2-journeys .v2-forwho a:hover::after { right: 0; }
}
@media (prefers-reduced-motion: reduce) { .v2-journeys .v2-forwho a, .v2-journeys .v2-forwho a::after { transition: none; } }

/* ============================ Full images in rounded frames ============================ */
.v2-stage img, .v2-stage img[src] { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 14px; }
.pl-art { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; }
.pl-art img { width: 100%; height: 100%; object-fit: cover; }
.v2-path-art, .v2-pw-art { border-radius: 16px; overflow: hidden; }
.v2-404 img { border-radius: 14px; }

/* ============================ Pathway details as accordions ============================ */
.v2-accs { margin-top: 24px; border-top: 1px solid var(--rule-3); }
.v2-acc { border-bottom: 1px solid var(--rule-3); }
.v2-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 12px 0; cursor: pointer; font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); }
.v2-acc summary::-webkit-details-marker { display: none; }
.v2-acc summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--ease-out); }
.v2-acc[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.v2-acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .v2-acc summary:hover { color: var(--accent); } }
.v2-acc-body { padding: 0 0 18px; font-size: 15px; color: var(--ink-2); }
.v2-acc-body p { margin: 0; max-width: 60ch; }
.v2-acc-body ol { margin: 0; padding-left: 1.2em; }
.v2-acc-body ol li { padding: 3px 0; }
.v2-acc-body dl { margin: 0; }
.v2-acc-body dt { margin-top: 12px; font-weight: 600; color: var(--ink); }
.v2-acc-body dt:first-child { margin-top: 0; }
.v2-acc-body dd { margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) { .v2-acc summary::after { transition: none; } }
.v2-journey img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.v2-journeys .v2-forwho { max-width: none; width: 100%; }
.v2-ab-why-art { width: min(280px, 70vw); }
@media (max-width: 700px) { .v2-premise-body { font-size: 17px; } }
.v2-premise .v2-wrap.v2-journeys { justify-items: stretch; }
.v2-premise .v2-wrap.v2-journeys > div { max-width: none; width: auto; }
@media (min-width: 900px) { .v2-premise .v2-wrap.v2-journeys { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

/* ============================ Character: ink then wash, handwriting, deckled edges, paper grain ============================ */
@font-face { font-family: "Caveat"; font-weight: 500; font-display: swap; src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2"); }
:root { --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive; }

/* 1. Hero: ink first, then the watercolour */
.v2-street-art { position: relative; }
.v2-street-art img { display: block; width: 100%; height: auto; }
.v2-street img.v2-street-ink { position: absolute; inset: 0; mix-blend-mode: multiply; }
html.tlg-hold .v2-street img { clip-path: none; }
.v2-street-art.is-waiting .v2-street-ink { clip-path: inset(0 100% 0 0); }
.v2-street-art.is-waiting .v2-street-wash { opacity: 0; filter: saturate(.4); }
.v2-street-art.is-drawn .v2-street-ink { clip-path: inset(0 0 0 0); transition: clip-path 1700ms cubic-bezier(.65, 0, .35, 1); }
.v2-street-art.is-drawn .v2-street-wash { opacity: 1; filter: none; transition: opacity 1200ms cubic-bezier(.23, 1, .32, 1) 1300ms, filter 1600ms ease 1300ms; }
@media (prefers-reduced-motion: reduce) { .v2-street-art .v2-street-ink, .v2-street-art .v2-street-wash { clip-path: none !important; opacity: 1 !important; filter: none !important; transition: none !important; } }

/* 2. Handwritten notes */
.v2-hand { font-family: var(--hand); font-weight: 500; color: var(--accent); line-height: 1.1; }
.v2-hand-pick { position: relative; margin: 18px 0 0; font-size: 28px; transform: rotate(-3deg); transform-origin: left center; max-width: 16ch; }
.v2-hand-pick svg { display: block; margin: 2px 0 0 60%; color: var(--accent); }
@media (max-width: 899px) { .v2-hand-pick svg { transform: rotate(40deg); margin-left: 40%; } }
.v2-stage-phase { font-family: var(--hand) !important; font-weight: 500 !important; font-size: 23px !important; letter-spacing: 0; line-height: 1; top: -46px; border-top: 0 !important; padding-top: 14px !important; background: no-repeat left top / 100% 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C 60 2, 110 7, 170 4 S 290 2, 340 5 S 390 3, 399 4' fill='none' stroke='%23274133' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.v2-stage-phase.v2-span-2 { color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C 50 6, 120 2, 180 5 S 300 6, 350 3 S 392 5, 399 4' fill='none' stroke='%237D2027' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.v2-hand-quote { font-family: var(--hand) !important; font-weight: 500; font-size: clamp(28px, 2.6vw, 34px) !important; line-height: 1.1 !important; color: var(--accent) !important; transform: rotate(-1.5deg); transform-origin: left center; }
.v2-hand-quote::after { content: ""; display: block; width: min(320px, 80%); height: 10px; margin-top: 4px; background: no-repeat left center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 70 2, 150 9, 298 3' fill='none' stroke='%237D2027' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.v2-hand-quote span { transform: rotate(1.5deg); }

/* 3. Deckled edges where one band meets another, and a faint paper grain */
.v2-green, .v2-close, .v2-paths.v2-paper, .v2-stories-ground { position: relative; }
.v2-green::before, .v2-close::before, .v2-paths.v2-paper::before, .v2-stories-ground::before {
  content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: inherit; background-image: none; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 L14 7 L22 10 L37 6 L49 9 L58 5 L74 8 L83 4 L97 8 L110 6 L121 10 L136 5 L148 8 L161 4 L170 7 L186 5 L197 9 L210 6 L224 8 L233 3 L249 7 L262 5 L271 9 L287 6 L298 8 L311 4 L325 7 L334 5 L350 9 L361 6 L374 8 L386 4 L399 7 L410 5 L424 9 L437 6 L446 8 L462 5 L471 8 L480 6 L480 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom / 480px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 L14 7 L22 10 L37 6 L49 9 L58 5 L74 8 L83 4 L97 8 L110 6 L121 10 L136 5 L148 8 L161 4 L170 7 L186 5 L197 9 L210 6 L224 8 L233 3 L249 7 L262 5 L271 9 L287 6 L298 8 L311 4 L325 7 L334 5 L350 9 L361 6 L374 8 L386 4 L399 7 L410 5 L424 9 L437 6 L446 8 L462 5 L471 8 L480 6 L480 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom / 480px 14px; }
.v2-premise, .v2-paper, .v2-jim { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.v2-stories-ground { border-top: 0; }
.v2-green, .v2-close, .v2-paths.v2-paper, .v2-stories-ground { overflow: visible; overflow-x: clip; }

/* ============================ Tidy pass: one section rhythm, centred closing street, clickable door cards ============================ */
:root { --sec: clamp(64px, 8vw, 112px); }
.v2-premise { padding: clamp(24px, 4vw, 48px) 0 var(--sec); }
.v2-method, .v2-paths, .v2-jim, .v2-insights, .v2-stories, .v2-green, .v2-ab-story, .v2-ab-why, .v2-pair, section.v2-story, .v2-why, .v2-bk-holds, .v2-mx { padding-top: var(--sec); padding-bottom: var(--sec); }
.v2-paths + .v2-jim { padding-top: 0; }
.v2-close { padding-top: var(--sec); }
.v2-close-short { padding-bottom: var(--sec); }
.v2-close-street { margin: clamp(40px, 5vw, 64px) 0 -2px !important; left: 50%; transform: translateX(-50%); width: min(1100px, 100%); }
@media (max-width: 700px) { .v2-close-street { width: 130%; } }

.v2-paths-six .v2-path { display: grid; align-content: start; gap: 16px; color: inherit; text-decoration: none; border-radius: 16px; }
.v2-paths-six .v2-path-art img { transition: transform 600ms cubic-bezier(.23, 1, .32, 1); }
.v2-paths-six .v2-path-title { display: inline-flex; align-items: center; gap: 10px; transition: color 200ms ease; }
.v2-paths-six .v2-path-title::after { content: ""; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 240ms cubic-bezier(.23, 1, .32, 1); }
.v2-paths-six .v2-path:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.v2-paths-six .v2-path:active .v2-path-art { transform: scale(.985); transition: transform 120ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .v2-paths-six .v2-path:hover .v2-path-art img { transform: scale(1.04); }
  .v2-paths-six .v2-path:hover .v2-path-title { color: var(--accent); }
  .v2-paths-six .v2-path:hover .v2-path-title::after { transform: translateX(4px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) { .v2-paths-six .v2-path-art img, .v2-paths-six .v2-path-title::after { transition: none; } }

/* ============================ Footer on paper, torn from the green above ============================ */
footer.v2-foot { position: relative; background: var(--paper); color: var(--ink-2); padding: clamp(56px, 7vw, 88px) var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px)); overflow-x: clip;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
footer.v2-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--paper); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 8 L11 6 L24 9 L35 5 L51 8 L60 6 L77 9 L88 4 L99 7 L114 5 L126 9 L139 6 L147 8 L163 4 L174 7 L188 6 L199 9 L214 5 L222 8 L238 4 L250 7 L263 6 L274 9 L289 5 L300 8 L314 4 L326 7 L337 6 L352 9 L363 5 L377 8 L388 4 L401 7 L413 6 L426 9 L438 5 L449 8 L463 6 L472 8 L480 6 L480 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom / 480px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 8 L11 6 L24 9 L35 5 L51 8 L60 6 L77 9 L88 4 L99 7 L114 5 L126 9 L139 6 L147 8 L163 4 L174 7 L188 6 L199 9 L214 5 L222 8 L238 4 L250 7 L263 6 L274 9 L289 5 L300 8 L314 4 L326 7 L337 6 L352 9 L363 5 L377 8 L388 4 L401 7 L413 6 L426 9 L438 5 L449 8 L463 6 L472 8 L480 6 L480 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom / 480px 14px; }
.v2-close { padding-bottom: 0; }
.v2-close.v2-close-short { padding-bottom: calc(var(--sec) + 14px); }
footer.v2-foot .v2-foot-top { gap: 40px 48px; }
@media (min-width: 900px) { footer.v2-foot .v2-foot-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
footer.v2-foot .v2-foot-credit { color: var(--ink); }
footer.v2-foot .v2-foot-credit span + span, footer.v2-foot .v2-foot-h { color: var(--muted); }
footer.v2-foot .v2-foot-h { font-family: var(--hand); font-weight: 500; font-size: 22px; line-height: 1; margin-bottom: 8px; color: var(--accent); }
footer.v2-foot .v2-foot-nav { grid-template-columns: 2fr 1fr; gap: 24px 48px; }
footer.v2-foot .v2-foot-nav > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
footer.v2-foot .v2-foot-nav > div:first-child .v2-foot-h { grid-column: 1 / -1; }
footer.v2-foot nav a, footer.v2-foot .v2-foot-nav a { color: var(--ink); font-size: 15px; min-height: 40px; }
footer.v2-foot img { filter: none; }
body:has(.v2-close) footer.v2-foot .v2-foot-cta { display: none; }
footer.v2-foot .v2-foot-legal { border-top-color: var(--rule-3); }
footer.v2-foot .v2-foot-legal p { color: var(--muted); }
footer.v2-foot .tbc { background: rgba(125, 32, 39, .08); color: var(--accent); border-color: var(--accent); }
footer.v2-foot a:focus-visible { outline-color: var(--accent); }
footer.v2-foot .v2-btn { background: var(--accent); color: var(--paper); }
@media (max-width: 600px) { footer.v2-foot .v2-foot-nav { grid-template-columns: 1fr; } }

/* ============================ How it works page, relook ============================ */
/* hero: copy left, the Jim Downs Method note right */
@media (min-width: 960px) { .v2-intro-split > .v2-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; align-items: end; gap: 32px 72px; } }
.v2-jdm-side .tlg-jdm { margin: 0; padding: clamp(22px, 2.4vw, 32px); background: var(--paper); border: 0; border-radius: 16px; transform: rotate(-.6deg); }
.v2-jdm-side .tlg-jdm h2 { font-family: var(--hand); font-weight: 500; font-size: 28px; line-height: 1.05; color: var(--accent); }
.v2-jdm-side .tlg-jdm p { font-size: 15px; color: var(--ink-2); }
.v2-jdm-side .v2-note { margin-top: 12px; }

/* principles: alternating rows, handwritten numbering */
.v2-pl .pl-intro { max-width: 62ch; }
.pl-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(32px, 5vw, 80px); padding: clamp(28px, 4vw, 48px) 0; border-top: 0; }
.pl-row + .pl-row:not(:has(.pl-phase)) { border-top: 1px solid var(--rule); }
.pl-text { max-width: 54ch; }
.pl-n { font-family: var(--hand); font-weight: 500; font-size: 24px; line-height: 1; color: var(--accent); }
.pl-phase { font-family: var(--hand); font-weight: 500; font-size: 26px; line-height: 1; width: 100% !important; border-top: 0 !important; padding: 0 0 12px !important; margin: 0 0 8px !important; color: var(--deep);
  background: no-repeat left bottom / min(420px, 100%) 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C 60 2, 110 7, 170 4 S 290 2, 340 5 S 390 3, 399 4' fill='none' stroke='%23274133' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
#principle-hold .pl-phase { color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C 50 6, 120 2, 180 5 S 300 6, 350 3 S 392 5, 399 4' fill='none' stroke='%237D2027' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pl-art { aspect-ratio: 4 / 3; }
@media (min-width: 761px) {
  .pl-row:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .pl-row:nth-child(even) .pl-art { order: 2; }
  .pl-row:nth-child(even) .pl-text { order: 1; justify-self: end; }
}
@media (max-width: 760px) { .pl-row { grid-template-columns: 1fr; } .pl-art { aspect-ratio: 16 / 10; } }

/* three tests: its own paper band */
.v2-tests { padding: var(--sec) 0; }
.v2-tests-wrap { display: grid; gap: 28px; }
.v2-tests-copy h2 { font-size: clamp(25.8px, 2.88vw, 35.88px); line-height: 1.08; letter-spacing: -.015em; }
.v2-tests .v2-keyfig { background: var(--white); border-radius: 16px; }
@media (min-width: 960px) { .v2-tests-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 72px; } }

/* pathways band on paper, seasons drawn in ink */
.v2-pair-paper { background-color: var(--paper); color: var(--ink); }
.v2-pair-paper .v2-pair-lead h2, .v2-pair-paper .v2-pair-lead p { color: var(--ink); }
.v2-pair-paper .tbc { background: rgba(125, 32, 39, .08); color: var(--accent); border-color: var(--accent); }

/* deckled top edge for any paper band that follows white */
.v2-edge { position: relative; overflow-x: clip; }
.v2-edge::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--paper); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 L14 7 L22 10 L37 6 L49 9 L58 5 L74 8 L83 4 L97 8 L110 6 L121 10 L136 5 L148 8 L161 4 L170 7 L186 5 L197 9 L210 6 L224 8 L233 3 L249 7 L262 5 L271 9 L287 6 L298 8 L311 4 L325 7 L334 5 L350 9 L361 6 L374 8 L386 4 L399 7 L410 5 L424 9 L437 6 L446 8 L462 5 L471 8 L480 6 L480 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom / 480px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 L14 7 L22 10 L37 6 L49 9 L58 5 L74 8 L83 4 L97 8 L110 6 L121 10 L136 5 L148 8 L161 4 L170 7 L186 5 L197 9 L210 6 L224 8 L233 3 L249 7 L262 5 L271 9 L287 6 L298 8 L311 4 L325 7 L334 5 L350 9 L361 6 L374 8 L386 4 L399 7 L410 5 L424 9 L437 6 L446 8 L462 5 L471 8 L480 6 L480 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left bottom / 480px 14px; }
.v2-roles { background: var(--white) !important; background-image: none !important; padding: var(--sec) 0; }

/* ============================ Three tests: the brand key and keyhole ============================ */
.tlg-key-v2 .tlg-plate { fill: var(--paper); stroke: var(--ink); stroke-width: 3; transition: fill 400ms ease 900ms; }
.tlg-key-v2 .tlg-hole { fill: var(--ink); transform-box: view-box; transition: fill 300ms ease 950ms; }
.tlg-keyfig .tlg-key-v2 .tlg-key-move { transform: none; transition: transform 650ms cubic-bezier(.23, 1, .32, 1); }
.tlg-keyfig[data-step="1"] .tlg-key-v2 .tlg-key-move { transform: translateX(16px); }
.tlg-keyfig[data-step="2"] .tlg-key-v2 .tlg-key-move { transform: translateX(32px); }
.tlg-keyfig[data-step="3"] .tlg-key-v2 .tlg-key-move { transform: translateX(150px); }
.tlg-key-v2 .tlg-key-turn { transform-box: view-box; transform-origin: 0 -100px; transition: transform 460ms cubic-bezier(.65, 0, .35, 1); }
.tlg-keyfig[data-step="3"] .tlg-key-v2 .tlg-key-turn { transform: scaleY(.4); transition-delay: 650ms; }
.tlg-keyfig[data-step="3"] .tlg-key-v2 .tlg-hole { fill: var(--accent); transform: none; }
.tlg-keyfig[data-step="3"] .tlg-key-v2 .tlg-plate { fill: #E4EBDD; }
.tlg-key-v2 .tlg-tooth { fill: var(--ink); }
.tlg-key-v2 .tlg-tooth.is-set { fill: var(--accent); }
.tlg-keyfig[data-step="3"] .tlg-lock rect.tlg-plate { stroke: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tlg-key-v2 .tlg-key-move, .tlg-key-v2 .tlg-key-turn, .tlg-key-v2 .tlg-plate, .tlg-key-v2 .tlg-hole { transition: none !important; } .tlg-keyfig[data-step="3"] .tlg-key-v2 .tlg-key-turn { transform: none; } }

/* ============================ Three tests: logo key and keyhole only ============================ */
.tlg-pr-btn[aria-expanded="true"] .tlg-pr-n { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.tlg-keyfig[data-step="3"] .tlg-key-v2 .tlg-key-turn { transform: scaleY(.35); }

/* swipe hint only shows on phones */
.v2-swipe-hint { display: none; }
/* ============================ Phones: bigger hero street, swipeable rows, tighter cards ============================ */
@media (max-width: 699px) {
  /* hero: let the street run wider than the screen so the houses read */
  .v2-street { overflow-x: clip; padding-inline: 0; }
  .v2-street-art { width: 165%; margin-left: -34%; }
  .v2-street figcaption { padding-inline: var(--gutter); }

  /* doors, stories and articles: one swipeable row each instead of a long stack */
  .v2-paths-six, .v2-story-grid, .v2-insights-posts .v2-post-grid {
    display: flex !important; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .v2-paths-six::-webkit-scrollbar, .v2-story-grid::-webkit-scrollbar, .v2-insights-posts .v2-post-grid::-webkit-scrollbar { display: none; }
  .v2-paths-six > *, .v2-story-grid > *, .v2-insights-posts .v2-post-grid > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
  .v2-paths-six .v2-path-art { aspect-ratio: 4 / 3 !important; }
  .v2-story { min-height: 0; padding: 22px 20px; }
  .v2-swipe-hint { display: block; margin: 0 0 6px; font-family: var(--hand); font-weight: 500; font-size: 21px; color: var(--accent); }
}


/* The way back to We're Here To Help (assets/js/way-back.js). Shows only to people who came
   through its door. */
.way-back { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--gutter); background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 14px; line-height: 1.3; }
.way-back-link { color: var(--paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.way-back-link:hover, .way-back-link:focus-visible { color: var(--white); }
.way-back-close { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; }
.way-back-close:hover, .way-back-close:focus-visible { background: rgba(239, 230, 216, .14); }

/* The six doors: the colour washes on once, the first time the grid is seen. Set up by site.js,
   so without JS the images show as they are. Both classes are removed once it has played. */
.v2-paths-six.wash-ready .v2-path-art img, .v2-pw-art.wash-ready img { opacity: .82; filter: saturate(.08) contrast(1.02) brightness(1.03); transform: scale(1.012); }
.v2-paths-six.wash-in .v2-path-art img, .v2-pw-art.wash-in img {
  opacity: 1; filter: none; transform: none;
  transition: opacity 760ms ease-out, filter 980ms ease-out, transform 980ms cubic-bezier(.23, 1, .32, 1);
  transition-delay: var(--wash-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .v2-paths-six.wash-ready .v2-path-art img, .v2-pw-art.wash-ready img { opacity: 1; filter: none; transform: none; }
}

/* Property pathways: each one is framed differently, so the five do not read as
   the same picture five times. A wide establishing view of the street, then a
   mid view across two dwellings, a close cutaway, a panorama along a build, and
   a close view of a tired house. The home page grid keeps the uncropped art,
   where the matching compositions are what make it read as a set. */
#investment .v2-pw-art { aspect-ratio: 906 / 508; }
#multiroom .v2-pw-art { aspect-ratio: 978 / 592; }
#development .v2-pw-art { aspect-ratio: 990 / 492; }
#distressed .v2-pw-art { aspect-ratio: 882 / 608; }

/* Version 2: the home page carries the journey instead of explaining it. Three steps, then the
   doors, then the principles. Each block says one thing, in the fewest words that still mean it. */
.v2-steps3 { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 28px 48px; }
@media (min-width: 760px) { .v2-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-steps3 > li { display: grid; gap: 6px; align-content: start; border-top: 2px solid var(--rule); padding-top: 14px; }
.v2-steps3 .v2-step-n { margin: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2-steps3 h2 { margin: 0; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.12; letter-spacing: -.012em; }
.v2-steps3 p { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 32ch; }
.v2-steps3 .v2-link { justify-self: start; margin-top: 4px; }

/* The risks, said plainly and early, the way the Soffit page does it. */
.v2-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46ch; }
.v2-facts li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.45; }
.v2-facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }

/* v2 pathways: the short form, with the long detail behind one accordion. */
.v2-pw-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0 0; align-items: baseline; }
.v2-pw-meta dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2-pw-meta dd { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
.v2-pw-text .v2-acc { margin-top: 18px; }
.v2-acc-long h3 { margin: 16px 0 4px; font-size: 16px; letter-spacing: -.004em; }
.v2-acc-long h3:first-child { margin-top: 0; }
.tl-form-slim { margin: 20px 0 0; }
.tl-form-slim .tl-ask { margin: 0 0 12px; font-size: 18px; font-weight: 600; letter-spacing: -.008em; }
.tl-form-slim .tl-fine { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
/* The pathway tool spans both columns and sits under the pathway it belongs to. */
.v2-pw > .tl-form-slim { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 26px; border-top: 1px solid var(--rule); }
.v2-pw .v2-pw-meta { grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; }
.v2-pw .v2-pw-meta dt { font-weight: 400; margin-top: 0; }
.tl-form-slim .tl-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 620px) { .tl-form-slim .tl-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) {
  .tl-form-slim { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 4fr); gap: 18px 44px; align-items: start; }
  .tl-form-slim .tl-ask { grid-column: 1; grid-row: 1; margin: 0; }
  .tl-form-slim .tl-fine { grid-column: 1; grid-row: 2; align-self: start; margin-top: 2px; }
  .tl-form-slim .tl-fields { grid-column: 2; grid-row: 1 / span 2; }
  .tl-form-slim .tl-out { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
@media (min-width: 960px) {
  .v2-pw > .v2-pw-art, .v2-pw > .v2-pw-text { grid-row: 1; }
  .v2-pw > .tl-form-slim { grid-row: 2; }
}
/* Readiness checklist, used where a pathway turns on judgement rather than arithmetic. */
.tl-checks { display: grid; gap: 12px; align-content: start; }
.tl-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.tl-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--deep); cursor: pointer; }
@media (min-width: 900px) { .tl-form-slim .tl-checks { grid-column: 2; grid-row: 1 / span 2; } }
/* A sentence-length answer reads as prose, not as a headline figure. */
.tl-row-say dd { font-family: inherit; font-size: 16px; line-height: 1.45; color: rgba(239, 230, 216, .92); }
/* Position questions on the enquiry form, grouped so they read as one optional block. */
.v2-form-group { margin: 6px 0 0; padding: 20px 0 4px; border: 0; border-top: 1px solid var(--rule); display: grid; gap: 16px; }
.v2-form-group legend { padding: 0; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2-form-note { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 46ch; }
/* The radio-row rule above is meant for Preferred contact; these are stacked selects. */
.v2-form .v2-form-group label { display: grid; gap: 6px; font-weight: 500; }