/* LT UK, direction C at full depth: the shared system (Child LT 016.3).
   One band of her border unwinds from her seal at the door, rings the dial that turns you to each part of
   her work, and ends in her seal where you book. A's colours, B's navigation in A's place, D's held steps. */

@font-face { font-family: "Aloja"; src: url("/2026-10-28-now/_assets/previews/c/round2/_assets/fonts/aloja.f29ab89306.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/2026-10-28-now/_assets/previews/c/round2/_assets/fonts/lora-400-normal.a7e3bcfbf6.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/2026-10-28-now/_assets/previews/c/round2/_assets/fonts/lora-700-normal.97a79a60c8.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/2026-10-28-now/_assets/previews/c/round2/_assets/fonts/lora-400-italic.1be4ea8fcd.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/2026-10-28-now/_assets/previews/c/round2/_assets/fonts/lora-700-italic.3418613e15.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

@view-transition { navigation: auto; }

/* ---------- tokens: A's palette exactly, light and dark; C's indigo and white panels ---------- */
:root {
  --paper: #fcfbf8; --paper-2: #f4f0e8; --ink: #1c1a18; --ink-2: #55504a;
  --rule: rgba(28, 26, 24, 0.16); --rule-strong: rgba(28, 26, 24, 0.5);
  --or: #ff914d; --or-text: #a3461a; --on-or: #1c1a18;
  --c-su: #5b6c8f; --t-su: #5b6c8f;
  --c-biz: #ff914d; --t-biz: #a3461a;
  --c-home: #7d8f69; --t-home: #5c6b4b;
  --c-gift: #a8677a; --t-gift: #8c4d60;
  --indigo: #18223a; --on-indigo: #f2eee7; --on-indigo-2: #c9c6d3;
  --white-panel: #ffffff; --on-white: #1c1a18;
  --pic-bg: #e9e2d6;
  --pill-solid: rgba(252, 248, 243, 0.97);
  --pill-bg: linear-gradient(rgba(255, 145, 77, 0.12), rgba(255, 145, 77, 0.12)), rgba(252, 251, 248, 0.8);
  --pill-mark-bg: #faf1e9; --pill-edge: rgba(28, 26, 24, 0.12);
  --shadow: 0 10px 34px rgba(28, 26, 24, 0.16), 0 1px 3px rgba(28, 26, 24, 0.08);
  --rise-shadow: 0 -22px 50px rgba(28, 26, 24, 0.08);
  --solid: #1c1a18; --on-solid: #fcfbf8; --focus: #1c1a18;
  --tint: 16%; --band-op: 0.12;
  --brake: cubic-bezier(0.16, 0.84, 0.24, 1);
  --head: "Aloja", "Lora", Georgia, serif; --body: "Lora", Georgia, serif;
  --maxw: 1180px;
  --gut: clamp(40px, 5vw, 72px);
  --lane-l: 36px; --lane-r: 20px;
  --navh: 76px;
  color-scheme: light;
}
@media (min-width: 760px) { :root { --lane-l: var(--gut); --lane-r: var(--gut); } }
@media (min-width: 1700px) { :root { --maxw: 1320px; } }
:root[data-theme="dark"] {
  --paper: #151412; --paper-2: #1d1b18; --ink: #f2eee7; --ink-2: #bdb6ab;
  --rule: rgba(242, 238, 231, 0.17); --rule-strong: rgba(242, 238, 231, 0.5);
  --or-text: #ffa46e; --c-su: #8fa0c4; --t-su: #8fa0c4;
  --c-biz: #ff914d; --t-biz: #ffa46e; --c-home: #a9bb94; --t-home: #a9bb94; --c-gift: #d197a8; --t-gift: #d197a8;
  --indigo: #1e2a46; --white-panel: #e9e3d8; --on-white: #1c1a18;
  --pic-bg: #2a2621;
  --pill-solid: rgba(30, 28, 25, 0.97);
  --pill-bg: linear-gradient(rgba(255, 145, 77, 0.1), rgba(255, 145, 77, 0.1)), rgba(26, 24, 21, 0.8);
  --pill-mark-bg: #2b241f; --pill-edge: rgba(242, 238, 231, 0.14);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --rise-shadow: 0 -22px 50px rgba(0, 0, 0, 0.35);
  --solid: #f2eee7; --on-solid: #151412; --focus: #f2eee7;
  --tint: 14%; --band-op: 0.1;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151412; --paper-2: #1d1b18; --ink: #f2eee7; --ink-2: #bdb6ab;
    --rule: rgba(242, 238, 231, 0.17); --rule-strong: rgba(242, 238, 231, 0.5);
    --or-text: #ffa46e; --c-su: #8fa0c4; --t-su: #8fa0c4;
    --c-biz: #ff914d; --t-biz: #ffa46e; --c-home: #a9bb94; --t-home: #a9bb94; --c-gift: #d197a8; --t-gift: #d197a8;
    --indigo: #1e2a46; --white-panel: #e9e3d8; --on-white: #1c1a18;
    --pic-bg: #2a2621;
    --pill-solid: rgba(30, 28, 25, 0.97);
    --pill-bg: linear-gradient(rgba(255, 145, 77, 0.1), rgba(255, 145, 77, 0.1)), rgba(26, 24, 21, 0.8);
    --pill-mark-bg: #2b241f; --pill-edge: rgba(242, 238, 231, 0.14);
    --shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --rise-shadow: 0 -22px 50px rgba(0, 0, 0, 0.35);
    --solid: #f2eee7; --on-solid: #151412; --focus: #f2eee7;
    --tint: 14%; --band-op: 0.1;
    color-scheme: dark;
  }
}

/* her seal: the master in light, her dark file in dark. Where the seal sits on a ground that is not white
   (the wallpaper, the orange block) the dark file is used in both themes: inside the seal's edge it is the
   master, unchanged; only the white square outside the edge is clear */
.m-dark { display: none !important; }
:root[data-theme="dark"] .m-light { display: none !important; }
:root[data-theme="dark"] .m-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .m-light { display: none !important; }
  :root:not([data-theme="light"]) .m-dark { display: block !important; }
}
.seal .m-light { display: none !important; }
.seal .m-dark { display: block !important; }
/* the seal file's centre is (203, 202) in a 403 box: nudged so the mark itself sits exactly centred (P22) */
.seal img { width: 100%; height: 100%; transform: translate(-0.372%, -0.124%); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.125rem)/1.62 var(--body);
  overflow-x: clip; padding-bottom: calc(var(--navh) + max(14px, env(safe-area-inset-bottom))); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2 { font-family: var(--head); font-weight: 400; text-transform: uppercase; line-height: 1.08; letter-spacing: 0.01em; margin: 0 0 0.45em; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 5rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3.6rem); }
h3, h4 { font-family: var(--body); font-weight: 700; line-height: 1.22; margin: 0 0 0.4em; text-wrap: balance; }
h3 { font-size: clamp(1.3rem, 1.12rem + 0.7vw, 1.75rem); }
h4 { font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); }
h5 { font: 700 0.78rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 1.1em 0 0.4em; }
p { margin: 0 0 1em; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--solid); color: var(--on-solid); padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: calc(var(--maxw) + var(--lane-l) + var(--lane-r)); margin-inline: auto; padding-left: var(--lane-l); padding-right: var(--lane-r); }
.eyebrow { font: 700 0.78rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.8rem; }
.sec { position: relative; padding-block: clamp(64px, 8vw, 120px); }
main { position: relative; display: block; isolation: isolate; overflow-x: clip; }
.dot { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--c-su); margin-right: 0.55em; }
.panel-biz .dot, .dl-biz .dot, .pt-biz .dot, .sp-biz .dot, .pg-biz .dot { background: var(--c-biz); }
.panel-home .dot, .dl-home .dot, .pt-home .dot, .sp-home .dot, .pg-home .dot { background: var(--c-home); }
.panel-gift .dot, .dl-gift .dot, .pt-gift .dot, .sp-gift .dot, .pg-gift .dot { background: var(--c-gift); }

/* the motifs: Start-ups kikko in ink (never orange lines, P3), Business seigaiha, Home shippo, Gift Trix asanoha */
.pl { fill: none; stroke-width: var(--sw, 1); }
.pf { fill: var(--paper); }
.p-ink .pl { stroke: var(--ink); } .p-biz .pl { stroke: var(--c-biz); }
.p-home .pl { stroke: var(--c-home); } .p-gift .pl { stroke: var(--c-gift); }
#m-asanoha, #m-kikko, #m-seigaiha, #m-shippo { --sw: 1.1; }
#m-asanoha-s, #m-kikko-s, #m-shippo-s { --sw: 0.6; }
#m-seigaiha-s { --sw: 0.55; }
#m-seigaiha-s .pf { fill: color-mix(in srgb, var(--c-biz) var(--tint), var(--paper)); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-weight: 700; text-align: center; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.btn-line { border: 1.5px solid var(--ink); }
.btn-line:hover, .btn-line:focus-visible { background: var(--solid); color: var(--on-solid); }
.btn-solid { background: var(--solid); color: var(--on-solid); }
.btn-solid:hover, .btn-solid:focus-visible { background: color-mix(in srgb, var(--solid) 82%, var(--paper)); }
.btn-ink { background: #1c1a18; color: #fcfbf8; }
.btn-ink:hover, .btn-ink:focus-visible { background: #3a3632; }
.go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.go::after { content: ""; width: 20px; height: 1.6px; background: currentColor; transition: width 0.35s var(--brake); }
.go:hover::after, .go:focus-visible::after { width: 32px; }

/* ---------- the navigation: B's logo pill and link pill as one set, in A's place (bottom centre) ---------- */
.navset { position: fixed; z-index: 50; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 12px); }
.pill { display: flex; align-items: center; padding: 5px; border-radius: 999px; background: var(--pill-solid); border: 1px solid var(--pill-edge); box-shadow: var(--shadow); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pill { background: var(--pill-bg); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
}
.pill-logo { gap: 10px; text-decoration: none; color: var(--ink); }
.pill-logo .mono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pill-mark-bg); flex: none; }
.pill-logo .mono::before { content: ""; display: block; width: 21px; height: 25px; background: currentColor; -webkit-mask: url("/2026-10-28-now/_assets/previews/c/round2/_assets/brand/lt-monogram.4e2116731d.svg") center / contain no-repeat; mask: url("/2026-10-28-now/_assets/previews/c/round2/_assets/brand/lt-monogram.4e2116731d.svg") center / contain no-repeat; }
.pill-logo:hover .mono, .pill-logo:focus-visible .mono { box-shadow: inset 0 0 0 2px var(--or); }
.logo-words { display: none; line-height: 1; padding-right: 14px; white-space: nowrap; }
.logo-words b { display: block; font: 400 1.05rem/1 var(--head); letter-spacing: 0.05em; }
.logo-words small { display: block; margin-top: 4px; font: 700 0.62rem/1 var(--body); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); }
.pill-nav { gap: 2px; }
.nl { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 0.875rem/1 var(--body); text-decoration: none; white-space: nowrap; transition: background-color 0.25s ease; }
.nl:hover { background: rgba(255, 145, 77, 0.2); }
.nl[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nl-call { background: var(--or); color: var(--on-or); padding: 0 14px; }
.nl-call:hover { background: #ff8136; }
.l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-btn .th-i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-btn[data-at="dark"] .th-i { background: currentColor; }
.theme-btn[data-at="light"] .th-i { background: transparent; }
html:not(.js) .theme-btn, html:not(.js) .menu-btn { display: none; }
@media (max-width: 359px) { .nl-about { display: none; } .nl { padding: 0 8px; } }
@media (min-width: 768px) {
  .logo-words { display: block; }
  .nl { padding: 0 15px; font-size: 0.95rem; }
  .nl-call { padding: 0 18px; }
  .l-long { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .l-short { display: none; }
}
@media (min-width: 1100px) { .menu-btn { display: none; } }

/* the menu: a sheet that rises from the set */
.sheet { border: 0; padding: 0; width: min(94vw, 460px); max-height: calc(100svh - 110px); margin: auto auto calc(var(--navh) + 14px); border-radius: 24px; background: var(--pill-solid); color: var(--ink); box-shadow: var(--shadow); }
.sheet::backdrop { background: rgba(20, 18, 16, 0.4); }
.sheet-in { padding: 14px 22px 22px; display: grid; gap: 14px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; }
.sheet-h { font-size: 1.4rem; margin: 0; }
.sheet-close { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent; }
.sheet-label { font: 700 0.75rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 4px; }
.sheet-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sheet-parts a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 14px; text-decoration: none; font-weight: 700; }
.sheet-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.sheet-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.05rem; }
.sheet a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: no-preference) { .sheet[open] { animation: sheet-in 0.42s var(--brake); } @keyframes sheet-in { from { opacity: 0; transform: translateY(26px); } } }
.theme { border: 0; margin: 0; padding: 0; }
.theme legend { font: 700 0.75rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.theme-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-opts label { position: relative; }
.theme-opts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme-opts span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; }
.theme-opts input:checked + span { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.theme-opts input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- the pause button: top right at every width ---------- */
.pause { position: fixed; z-index: 55; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--pill-edge); background: var(--pill-solid); box-shadow: var(--shadow); color: var(--ink); }
.pause svg { width: 18px; height: 18px; fill: currentColor; }
.pause .pz-play, .pause[aria-pressed="true"] .pz-bars { display: none; }
.pause[aria-pressed="true"] .pz-play { display: inline; }
html:not(.js) .pause { display: none; }
@media (prefers-reduced-motion: reduce) { .pause { display: none; } }

/* ---------- her string: laid only by renderBand (system.js) through her border helper (lt-border.js) ---------- */
.band-layer { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
/* the string's own layer is never shrunk to the page's width by the img, svg { max-width: 100% } rule (a frame
   that reaches past the right edge on a phone would be scaled, so its loop would land short of what it frames);
   main clips it sideways, so it never widens the page */
.band-layer { max-width: none; }
.band-host { overflow: visible; }
.band-host.lt-instant { transition: none; }
/* her string's colour, set only here (P16): her orange, or the colour of the part it passes */
.band-host.lt-c-or { --lt-border-orange: #FF914D; }
.band-host.lt-c-su { --lt-border-orange: var(--c-su); }
.band-host.lt-c-biz { --lt-border-orange: var(--c-biz); }
.band-host.lt-c-home { --lt-border-orange: var(--c-home); }
.band-host.lt-c-gift { --lt-border-orange: var(--c-gift); }
/* P16: along its length the string takes each section's colour and blends into the next, as a gradient down the
   page (system.js writes one pair per stretch: her colour, and its ground taken toward white as lt-border.css takes
   it); the class colour above stays as the fallback until the gradient is written */
.band-host.has-grad .lt-border__petals { fill: var(--g-full); }
.band-host.has-grad .lt-border__wave, .band-host.has-grad .lt-border__edges { stroke: var(--g-full); }
.band-host.has-grad .lt-border__ground { fill: var(--g-ground); }
.band-grad stop { transition: stop-color 0.8s ease; }
@media (prefers-reduced-motion: reduce) { .band-grad stop { transition: none; } }
/* with no script the dial keeps a plain rim; with script her string rings it */
.dial-rim { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.js .dial-rim { display: none; }
.seal, .tucks { position: relative; z-index: 2; }

/* ---------- the motif family under every section (P5, P6, P83), drawn in behind her string's front (P9) ----------
   Faint, in the part's tone or in ink, strongest at the page's edges where her string runs and clear in the middle
   where the words are; system.js moves --rev down the section with the string's front, and it never goes back */
[data-sec] { isolation: isolate; }
.sec-motif { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; --rev: calc(100% + 120px);
  -webkit-mask-image: linear-gradient(#000 calc(var(--rev) - 110px), transparent var(--rev)), linear-gradient(90deg, #000, rgba(0, 0, 0, 0.3) 22%, transparent 38%, transparent 62%, rgba(0, 0, 0, 0.3) 78%, #000);
  mask-image: linear-gradient(#000 calc(var(--rev) - 110px), transparent var(--rev)), linear-gradient(90deg, #000, rgba(0, 0, 0, 0.3) 22%, transparent 38%, transparent 62%, rgba(0, 0, 0, 0.3) 78%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.js .sec-motif { --rev: 0px; }
.sm-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0.09; }
.sm-ink .sm-art { opacity: 0.075; }
.sm-su .sm-art { opacity: 0.08; }
html.measuring .sec-motif { display: none; }

/* ---------- pictures ---------- */
.pic { position: relative; margin: 0; overflow: hidden; background: var(--pic-bg); }
.pic picture, .pic img { display: block; width: 100%; height: 100%; }
.pic img { object-fit: cover; }
.ill { position: absolute; z-index: 3; right: 10px; bottom: 10px; background: #1c1a18; color: #fcfbf8; font: 700 0.72rem/1 var(--body); letter-spacing: 0.04em; padding: 6px 9px; border-radius: 5px; pointer-events: none; }
/* hover zoom (A's): the picture scales inside its frame; the press twin on touch */
.zoom .pic img, .tada-frame .pic img { transition: transform 0.45s var(--brake); }
@media (hover: hover) { .zoom:hover .pic img, .tada-frame:has(.frame-panel:hover) .pic img { transform: scale(1.03); } }
@media (hover: none) { .zoom:active .pic img { transform: scale(1.02); } }

/* ---------- held sections (D's ride) ---------- */
.ride { position: relative; }
.ride-probe { position: absolute; left: 0; top: 0; width: 1px; height: var(--step, 75svh); visibility: hidden; pointer-events: none; }
.ride { --step: 75svh; }
@media (min-width: 1100px) { .ride { --step: 75vh; } }
.ride-stage { position: relative; }
.ride.ride-on { height: calc(100svh + var(--n, 3) * var(--step)); padding-block: 0; }
@media (min-width: 1100px) { .ride.ride-on { height: calc(100vh + var(--n, 3) * var(--step)); } }
.ride.ride-on .ride-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
@media (min-width: 1100px) { .ride.ride-on .ride-stage { height: 100vh; } }
.ride.ride-on .ride-stops { position: relative; }
.ride.ride-on .ride-stop { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translateX(28px);
  transition: opacity 450ms var(--brake), transform 450ms var(--brake), visibility 0s linear 450ms; }
.ride.ride-on .ride-stop.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity 450ms var(--brake), transform 450ms var(--brake), visibility 0s; }
.ride.ride-on .ride-stop.is-past { transform: translateX(-28px); }
/* D's staggered entry: the children of a step arrive one after another, 60 ms apart */
.ride.ride-on .ride-stop > * { transition: opacity 450ms ease, transform 600ms var(--brake); }
.ride.ride-on .ride-stop:not(.is-on) > * { opacity: 0; transform: translateX(22px); }
.ride.ride-on .ride-stop.is-on > :nth-child(1) { transition-delay: 60ms; }
.ride.ride-on .ride-stop.is-on > :nth-child(2) { transition-delay: 120ms; }
.ride.ride-on .ride-stop.is-on > :nth-child(3) { transition-delay: 180ms; }
.ride.ride-on .ride-stop.is-on > :nth-child(4) { transition-delay: 240ms; }
.ride.ride-on .ride-stop.is-on > :nth-child(5) { transition-delay: 300ms; }
.ride.ride-on.ride-away .ride-stop, .ride.ride-on.ride-away .ride-stop > * { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ride.ride-on .ride-stop, .ride.ride-on .ride-stop.is-on, .ride.ride-on .ride-stop > * { transform: none !important; transition: opacity 0.2s ease, visibility 0s !important; }
}

/* ---------- rise: a section set off slides up over the last and finishes on its own time (D's brake) ---------- */
.rise { position: relative; background: var(--paper); border-radius: 30px 30px 0 0; margin-top: -30px; box-shadow: var(--rise-shadow); }
@media (prefers-reduced-motion: no-preference) {
  .js .rise:not(.is-up) { transform: translateY(64px); }
  .js .rise.is-up { animation: rise-up 700ms var(--brake) backwards; }
  @keyframes rise-up { from { transform: translateY(64px); } }
}
html.measuring .rise { transform: none !important; animation: none !important; }

/* ---------- open in place (C's Open and Close) ---------- */
.open { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font-weight: 700; }
.open::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.4s var(--brake); }
.open[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.open:hover, .open:focus-visible { background: var(--solid); color: var(--on-solid); }
.more { display: grid; grid-template-rows: 1fr; }
.js .more { grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--brake); }
.more-in { min-height: 0; overflow: hidden; }
.js .more-in { visibility: hidden; transition: visibility 0s linear 0.6s; }
.js .is-open > .more { grid-template-rows: 1fr; }
.js .is-open > .more > .more-in { visibility: visible; transition: visibility 0s; }
@media (prefers-reduced-motion: reduce) { .js .more { transition: none; } }

/* ---------- the price cards ---------- */
.cards { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.cards--n1 { max-width: 560px; }
@media (min-width: 600px) {
  .cards--n2, .cards--n3, .cards--n4, .cards--n5, .cards--n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--n3 > .card:last-child, .cards--n5 > .card:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .cards--n3, .cards--n5, .cards--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--n3 > .card:last-child, .cards--n5 > .card:nth-child(5) { grid-column: auto; }
}
.cards + .cards { margin-top: 18px; }
.card { position: relative; padding: 24px 22px 22px; border-radius: 20px; background: var(--white-panel); color: var(--on-white); border: 1px solid var(--rule); }
:root[data-theme="dark"] .card { --ink: #1c1a18; --ink-2: #55504a; --rule: rgba(28, 26, 24, 0.16); --rule-strong: rgba(28, 26, 24, 0.5); --solid: #1c1a18; --on-solid: #fcfbf8; --focus: #1c1a18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { --ink: #1c1a18; --ink-2: #55504a; --rule: rgba(28, 26, 24, 0.16); --rule-strong: rgba(28, 26, 24, 0.5); --solid: #1c1a18; --on-solid: #fcfbf8; --focus: #1c1a18; } }
.card-name { margin-bottom: 0.25em; font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem); }
.card-for { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 0.6em; }
.card-price { margin: 0 0 0.75em; }
.card-price .amt { font: 700 clamp(2.2rem, 2rem + 0.8vw, 2.7rem)/1 var(--body); letter-spacing: -0.01em; }
.card-price .unit { color: var(--ink-2); }
/* the lines every price carries (her VAT line, the 14-day line and the rest, word for word from prices.json): kept on
   the closed card beside the figure, set as one quieter block in smaller type so the name and the figure lead */
.card-always { display: grid; gap: 5px; margin: 0 0 16px; padding: 11px 13px 12px; border-radius: 12px; background: color-mix(in srgb, #1c1a18 4.5%, transparent); color: var(--ink-2); font-size: 0.8rem; line-height: 1.45; }
.card-always li:first-child { font-weight: 700; color: var(--ink); }
.card-always li + li { padding-top: 5px; border-top: 1px solid var(--rule); }
/* on a phone the lines run on as one short paragraph, every word kept and in place on the closed card (P66) */
@media (max-width: 599px) {
  .card { padding: 20px 18px 18px; }
  .card-always { display: block; padding: 9px 11px 10px; font-size: 0.76rem; line-height: 1.42; }
  .card-always li { display: inline; }
  .card-always li:first-child { display: block; margin-bottom: 3px; }
  .card-always li + li { padding-top: 0; border-top: 0; }
  .card-always li + li:not(:nth-child(2))::before { content: " \00b7  "; color: var(--rule-strong); }
}
.card-summary { margin-top: 14px; font-style: italic; }
.card-list { display: grid; gap: 4px; font-size: 0.95rem; }
.card-list li { position: relative; padding-left: 18px; }
.card-list li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 8px; height: 1.5px; background: currentColor; opacity: 0.6; }
.card--laura .her-label { font: 700 0.72rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.card--laura .her { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1.5px solid var(--rule-strong); }
.card--laura .her-text { white-space: pre-wrap; font-weight: 700; line-height: 1.45; margin: 0; }
.pair { grid-column: 1 / -1; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); padding: 14px; border: 1.5px dashed var(--rule-strong); border-radius: 26px; }
.pair-note { grid-column: 1 / -1; margin: 0; font-size: 0.9rem; color: var(--ink-2); font-style: italic; }

/* ---------- the dial ---------- */
.dial { --d: 300px; position: relative; width: var(--d); height: var(--d); margin-inline: auto; touch-action: pan-y; }
.dial-face { position: absolute; inset: 0; }
.dial-svg { width: 100%; height: 100%; overflow: visible; }
.q-su { fill: color-mix(in srgb, var(--c-su) var(--tint), var(--paper)); }
.q-biz { fill: color-mix(in srgb, var(--c-biz) var(--tint), var(--paper)); }
.q-home { fill: color-mix(in srgb, var(--c-home) var(--tint), var(--paper)); }
.q-gift { fill: color-mix(in srgb, var(--c-gift) var(--tint), var(--paper)); }
.seg-su { fill: color-mix(in srgb, var(--c-su) var(--tint), var(--paper)); } .seg-su.seg-alt { fill: color-mix(in srgb, var(--c-su) calc(var(--tint) * 1.6), var(--paper)); }
.seg-biz { fill: color-mix(in srgb, var(--c-biz) var(--tint), var(--paper)); } .seg-biz.seg-alt { fill: color-mix(in srgb, var(--c-biz) calc(var(--tint) * 1.6), var(--paper)); }
.seg-home { fill: color-mix(in srgb, var(--c-home) var(--tint), var(--paper)); } .seg-home.seg-alt { fill: color-mix(in srgb, var(--c-home) calc(var(--tint) * 1.6), var(--paper)); }
.seg-gift { fill: color-mix(in srgb, var(--c-gift) var(--tint), var(--paper)); } .seg-gift.seg-alt { fill: color-mix(in srgb, var(--c-gift) calc(var(--tint) * 1.6), var(--paper)); }
.seg-su.is-now { fill: color-mix(in srgb, var(--c-su) 40%, var(--paper)); } .seg-biz.is-now { fill: color-mix(in srgb, var(--c-biz) 40%, var(--paper)); }
.seg-home.is-now { fill: color-mix(in srgb, var(--c-home) 40%, var(--paper)); } .seg-gift.is-now { fill: color-mix(in srgb, var(--c-gift) 40%, var(--paper)); }
.seg { transition: fill 0.6s ease; }
.q-pat { opacity: 0.55; pointer-events: none; }
.q-line { fill: none; stroke: var(--paper); stroke-width: 1.4; }
.q { cursor: pointer; transition: fill 0.4s ease; }
.q.is-hot.q-su { fill: color-mix(in srgb, var(--c-su) 30%, var(--paper)); }
.q.is-hot.q-biz { fill: color-mix(in srgb, var(--c-biz) 30%, var(--paper)); }
.q.is-hot.q-home { fill: color-mix(in srgb, var(--c-home) 30%, var(--paper)); }
.q.is-hot.q-gift { fill: color-mix(in srgb, var(--c-gift) 30%, var(--paper)); }
.dial-hub-bg { fill: var(--paper); }
.dial-lt { position: absolute; left: 50%; top: 50%; width: 15%; height: 17.94%; transform: translate(-50%, -50%); background: var(--ink); -webkit-mask: url("/2026-10-28-now/_assets/previews/c/round2/_assets/brand/lt-monogram.4e2116731d.svg") center / contain no-repeat; mask: url("/2026-10-28-now/_assets/previews/c/round2/_assets/brand/lt-monogram.4e2116731d.svg") center / contain no-repeat; pointer-events: none; }
.dial-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dial-lines .leader { stroke: var(--rule-strong); stroke-width: 1; fill: none; }
.dial-lines .leader.is-now { stroke: var(--ink); stroke-width: 1.5; }
.dial-labels { position: absolute; inset: 0; pointer-events: none; }
.dial-label { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px 0 12px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 700 0.9rem/1 var(--body); text-decoration: none;
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.dial-label .dot { width: 10px; height: 10px; margin-right: 0.5em; }
/* each part's one line: shown on a wide screen while the dial shows her work at a glance (P54) */
.dl-what { display: none; }
.dial[data-ov][data-lay="out"] .dial-label { flex-wrap: wrap; max-width: 17em; white-space: normal; text-align: left; padding: 8px 15px 9px 12px; border-radius: 16px; line-height: 1.2; }
.dial[data-ov][data-lay="out"] .dl-what { display: block; flex-basis: 100%; margin: 3px 0 0 calc(10px + 0.5em); font-weight: 400; font-size: 0.8rem; color: var(--ink-2); }
.dial[data-ov][data-lay="out"] .dial-label[aria-pressed="true"] .dl-what { color: inherit; }
.dial-label:hover, .dial-label.is-hot { border-color: var(--ink); }
.dial-label[aria-pressed="true"], .dial-label[aria-current="page"], .dial-label.is-now { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
html:not(.js) .dial-label { position: static; transform: none; margin: 4px; }
html:not(.js) .dial-labels { position: static; display: flex; flex-wrap: wrap; justify-content: center; padding-top: calc(var(--d) + 12px); }
.dial--home .dial-face, .dial--index .dial-face { view-transition-name: lt-dial; }
.dial-parts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the index dial's outer ring: her four parts, each quarter named and a link to its page; the disc inside is this
   page's own sections */
.pa { stroke: var(--paper); stroke-width: 0.8; transition: fill 0.3s ease; }
.pa-su { fill: color-mix(in srgb, var(--c-su) 22%, var(--paper)); } .pa-biz { fill: color-mix(in srgb, var(--c-biz) 22%, var(--paper)); }
.pa-home { fill: color-mix(in srgb, var(--c-home) 24%, var(--paper)); } .pa-gift { fill: color-mix(in srgb, var(--c-gift) 22%, var(--paper)); }
.dp.is-here .pa-su { fill: color-mix(in srgb, var(--c-su) 55%, var(--paper)); } .dp.is-here .pa-biz { fill: color-mix(in srgb, var(--c-biz) 50%, var(--paper)); }
.dp.is-here .pa-home { fill: color-mix(in srgb, var(--c-home) 52%, var(--paper)); } .dp.is-here .pa-gift { fill: color-mix(in srgb, var(--c-gift) 50%, var(--paper)); }
/* the names are set in the ring's own units: about 12 px on a phone, 13 to 14 px wider up */
.pa-t { font: 700 10px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink); pointer-events: none; }
@media (max-width: 359px) { .pa-t { font-size: 11.6px; letter-spacing: 0.05em; } }
@media (min-width: 760px) { .pa-t { font-size: 7.6px; } }
.dp:hover .pa, .dp:focus-visible .pa { stroke: var(--ink); stroke-width: 1.4; }
.dial-parts a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the dial's labels: outside with leader lines on a wide screen, on the quarters on a tablet, in a row under it on a phone */
.dial[data-lay="in"] .dial-label { font-size: 0.8rem; padding: 0 10px 0 9px; }
.dial[data-lay="row"] { margin-bottom: calc(var(--rowh, 44px) + 16px); }
.head-dial .dial--index[data-lay="row"] { margin-bottom: calc(var(--rowh, 44px) + var(--d) * 0.085 + 34px); }
.dial[data-lay="row"] .dial-labels { inset: auto; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: max-content; max-width: calc(100vw - 40px); pointer-events: auto; }
.dial--index[data-lay="row"] .dial-labels { top: calc(100% + var(--d) * 0.085 + 12px); }
.dial[data-lay="row"] .dial-label { position: static; transform: none; padding: 0 9px 0 8px; font-size: 0.78rem; }
.dial[data-lay="row"] .dial-label .dot { width: 9px; height: 9px; margin-right: 0.4em; }
/* the footer dial: small, turning slowly, its four labels beside it */
.dial--footer { --d: 128px; display: grid; grid-template-columns: var(--d) auto; align-items: center; gap: 20px; width: auto; height: auto; margin: 0; }
.dial--footer .dial-face { position: relative; width: var(--d); height: var(--d); }
.dial--footer .dial-labels { position: static; display: grid; gap: 6px; }
.dial--footer .dial-label { position: static; transform: none; justify-self: start; }
.dial--footer .dial-lines { display: none; }
/* the index dial, at the head of a part's page */
.dial--index { --d: min(62vw, 330px); margin-block: 64px; }
@media (min-width: 1100px) { .dial--index { --d: min(28vw, 50vh, 400px); margin-block: 90px; } }
/* the index dial, docked once the head has scrolled away */
.dial-dock { position: fixed; z-index: 54; right: max(12px, env(safe-area-inset-right)); top: calc(max(12px, env(safe-area-inset-top)) + 54px); display: none; }
.dial-dock.is-on { display: block; }
.dock-btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid var(--pill-edge); background: var(--pill-solid); box-shadow: var(--shadow); }
.dock-btn svg { width: 40px; height: 40px; }
@media (min-width: 1100px) { .dock-btn { width: 96px; height: 96px; } .dock-btn svg { width: 82px; height: 82px; } }
.dock-sheet .dial { --d: min(70vw, 300px); margin: 34px auto 40px; }

/* ---------- the ta-da: a before and after the visitor plays ---------- */
.tada { position: relative; }
.tada-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--pic-bg); touch-action: pan-y; }
.tada-layer { position: absolute; inset: 0; }
.tada-layer .pic { width: 100%; height: 100%; }
.js .tada-layer { opacity: var(--o, 0); }
.js .tada-layer[data-i="0"] { opacity: 1; }
.js .tada[data-n="2"]:not([data-kind="built"]) .tada-layer[data-i="1"] { opacity: 1; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.tada-divider { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 0; z-index: 2; pointer-events: none; }
.tada-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fcfbf8; box-shadow: 0 0 0 1px rgba(28, 26, 24, 0.2); }
.tada-divider::after { content: ""; position: absolute; top: 50%; left: -16px; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: #fcfbf8; box-shadow: 0 2px 10px rgba(28, 26, 24, 0.35); }
.tada[data-n="3"] .tada-divider, .tada[data-kind="built"] .tada-divider { display: none; }
.tada-divider { transition: opacity 0.3s ease; }
.tada[data-end] .tada-divider { opacity: 0; }
.frame-panel { position: absolute; z-index: 4; left: 12px; top: 12px; display: grid; gap: 2px; padding: 12px 16px 12px; border-radius: 14px; background: var(--indigo); color: var(--on-indigo); text-decoration: none; max-width: calc(100% - 24px); transition: background-color 0.25s ease; }
.frame-panel:hover, .frame-panel:focus-visible { background: color-mix(in srgb, var(--indigo) 86%, #ffffff); }
.fp-name { font: 700 1.05rem/1.2 var(--body); }
.fp-go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--on-indigo-2); }
.fp-go::after { content: ""; width: 16px; height: 1.5px; background: currentColor; transition: width 0.3s var(--brake); }
.frame-panel:hover .fp-go::after { width: 26px; }
.tada-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tada-seg { display: flex; flex: 1; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--rule); min-width: 0; }
.tada-seg button { flex: 1; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tada-seg button[aria-pressed="true"] { background: var(--solid); color: var(--on-solid); }
.tada-play { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; font-weight: 700; font-size: 0.88rem; }
.tada-play::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.tada-play:hover, .tada-seg button:hover { border-color: var(--ink); }
@media (max-width: 599px) {
  .tada-play { width: 44px; padding: 0; justify-content: center; }
  .tada-play .tp-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tada-seg button { padding: 0 6px; }
  .tada[data-n="3"] .tada-seg button { font-size: 0.8rem; padding: 0 4px; }
}
@media (max-width: 379px) { .tada-ctrl { flex-wrap: wrap; } .tada-seg { flex-basis: 100%; order: 2; } }
@media (min-width: 600px) and (max-width: 1099px) {
  .tada[data-n="3"] .tada-play { width: 44px; padding: 0; justify-content: center; }
  .tada[data-n="3"] .tada-play .tp-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.tada-slider { position: absolute; inset: 0; z-index: 3; cursor: ew-resize; }
.tada-slider:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; border-radius: 20px; }
html:not(.js) .tada-frame { aspect-ratio: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; background: none; }
html:not(.js) .tada-layer { position: relative; aspect-ratio: 16 / 10; }
html:not(.js) .frame-panel { position: static; grid-column: 1 / -1; }
.layer-cap { display: none; }
html:not(.js) .layer-cap { display: block; position: absolute; left: 8px; bottom: 8px; z-index: 3; background: #fcfbf8; color: #1c1a18; font: 700 0.75rem/1 var(--body); padding: 5px 8px; border-radius: 5px; }
html:not(.js) .dial--home .dial-labels { display: none; }
.ill-built { background: var(--indigo); top: 10px; bottom: auto; }

/* the built demos: an inbox sorting itself, a gift year filling in (real text in the page) */
.tada-built { background: var(--white-panel); color: var(--on-white); }
.inbox { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); font-size: 0.82rem; padding-top: 74px; }
.ib-folders { padding: 10px 8px 10px 12px; border-right: 1px solid rgba(28, 26, 24, 0.12); display: grid; align-content: start; gap: 2px; }
.ib-folders li { display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 8px; }
.ib-folders li[data-folder="inbox"] { background: rgba(91, 108, 143, 0.14); font-weight: 700; }
.ib-folders li.is-bump { animation: bump 0.5s var(--brake); }
@keyframes bump { 40% { background: rgba(91, 108, 143, 0.3); } }
.ib-n { font-weight: 700; color: #5b6c8f; }
.ib-mail { padding: 6px 12px; display: grid; align-content: start; overflow: hidden; }
.ib-mail li { display: grid; grid-template-columns: 1fr auto; gap: 8px; overflow: hidden; padding: 6px 2px; border-bottom: 1px solid rgba(28, 26, 24, 0.1); max-height: 40px; transition: max-height 0.5s var(--brake), opacity 0.4s ease, padding 0.5s var(--brake), transform 0.5s var(--brake); }
.ib-mail li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-mail li span { color: #55504a; white-space: nowrap; }
.ib-mail li.is-filed { max-height: 0; padding-block: 0; opacity: 0; transform: translateX(-30px); border-bottom-width: 0; }
.ib-mail li.ib-stays b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #a3461a; vertical-align: 0.1em; }
.gyear { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 10px; padding: 70px 14px 12px; }
.gy-ring { width: 100%; max-height: 100%; }
.gy-track { fill: none; stroke: rgba(28, 26, 24, 0.14); stroke-width: 14; }
.gy-months text { font: 700 9px/1 var(--body); fill: #55504a; text-anchor: middle; dominant-baseline: central; }
.gy-dot { fill: #a8677a; transform-box: fill-box; transform-origin: center; transition: transform 0.5s var(--brake), opacity 0.4s ease; }
.gy-dot:not(.is-on) { transform: scale(0); opacity: 0; }
.gy-list { display: grid; gap: 6px; font-size: 0.8rem; line-height: 1.3; }
.gy-list li { position: relative; padding: 6px 8px 6px 10px; border-left: 3px solid #a8677a; background: rgba(168, 103, 122, 0.08); border-radius: 0 8px 8px 0; transition: opacity 0.4s ease, transform 0.5s var(--brake); }
.gy-list li:not(.is-on) { opacity: 0; transform: translateY(8px); }
.gy-list b { display: block; }
.gy-list span { color: #55504a; }
.gy-tick { position: absolute; right: 8px; top: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #5c6b4b; }
.gy-tick::before { content: ""; width: 4px; height: 8px; margin-top: -2px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
html:not(.js) .ib-mail li { max-height: none; }
html:not(.js) .gy-list li { opacity: 1; transform: none; }

@media (max-width: 759px) {
  .frame-panel { left: 8px; top: 8px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; }
  .fp-name { font-size: 0.92rem; }
  .fp-go { font-size: 0.8rem; }
  .inbox { padding-top: 52px; font-size: 0.74rem; grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr); }
  .ib-folders { padding: 6px 4px 6px 8px; }
  .ib-folders li { padding: 3px 6px; }
  .ib-mail li { padding: 4px 2px; }
  .ib-mail li span { display: none; }
  .gyear { padding: 50px 8px 8px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px; }
  .gy-list { gap: 4px; font-size: 0.7rem; }
  .gy-list li { padding: 3px 26px 3px 7px; }
  .gy-tick { right: 5px; top: 50%; margin-top: -9px; }
}
.ride-on .gy-list span { display: none; }
@media (min-width: 760px) { .ride-on .gy-list span { display: inline; } }

/* ---------- cursor labels (C's): by the pointer, never over the box's own words ---------- */
.cursor-tag { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; padding: 6px 12px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font: 700 0.8rem/1.2 var(--body); opacity: 0; transition: opacity 0.18s ease; white-space: nowrap; }
.cursor-tag.on { opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) { .cursor-tag { display: none; } }
/* the pointer string and the tapped loop */
/* the pointer string: a few short lengths of her string chained on springs, so it bends as it follows (P15) */
.pointer-chain { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 65; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.pointer-chain.on { opacity: 1; }
.pointer-band { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; overflow: visible; }
html.is-paused .pointer-chain { display: none; }
.tap-band { position: absolute; z-index: 5; pointer-events: none; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .pointer-chain { display: none; } }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 3; background: var(--paper-2); padding: 64px 0 36px; font-size: 0.97rem; }
.foot-grid { display: grid; gap: 36px; }
.foot-h { font: 700 0.78rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.foot-name { font-weight: 700; margin-bottom: 4px; }
.foot-tag { font: 400 1.35rem/1.2 var(--head); text-transform: uppercase; margin-bottom: 8px; }
.foot-where { margin: 14px 0 0; font: 400 clamp(1rem, 0.95rem + 0.3vw, 1.2rem)/1.3 var(--head); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); }
.foot-list a { display: inline-flex; align-items: center; min-height: 44px; }
.foot .theme { margin-top: 14px; }
.foot-small { font-size: 0.86rem; color: var(--ink-2); max-width: 30ch; margin: 4px 0 0; }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--ink-2); }
.foot-base p:first-child { display: flex; gap: 22px; }
.foot-base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
@media (min-width: 600px) and (max-width: 899px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; } }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* =========================================================================================================
   Shared by the pages: a part's head, section heads, held steps, worked examples, pictures that are links,
   the prices and the call block (moved here from the pages' own sheets, so no page copies them)
   ========================================================================================================= */

/* ---------- the head: the part's name and the dial as the page's own index ---------- */
.area-head { position: relative; padding: 84px 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.head-ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: color-mix(in srgb, var(--c-su) 9%, transparent);
  -webkit-mask-image: linear-gradient(#000 30%, transparent 96%); mask-image: linear-gradient(#000 30%, transparent 96%); }
.hg-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0.11; }
/* a page that is no part's own carries its head's motif in ink, a little fainter than a part's tone */
[data-part=""] .hg-art { opacity: 0.075; }
.head-grid { position: relative; z-index: 2; display: grid; gap: 8px; align-items: center; }
.part-eyebrow { display: flex; align-items: center; color: var(--t-su); }
.part-eyebrow .dot { width: 13px; height: 13px; }
.area-head h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem); max-width: 13ch; margin-bottom: 0.35em; }
.head-lede { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); max-width: 44ch; color: var(--ink-2); margin-bottom: 1.2em; }
.head-ways { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.head-dial .dial--index { margin-block: 48px 40px; }
@media (min-width: 1100px) {
  .area-head { padding-top: 40px; }
  .head-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(30px, 4vw, 70px); min-height: min(86vh, 860px); }
  .head-dial { grid-column: 1; grid-row: 1; }
  .head-words { grid-column: 2; grid-row: 1; }
  .head-dial .dial--index { --d: min(24vw, 46vh, 360px); margin-block: 70px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .head-words > * { animation: head-in 0.9s var(--brake) both; }
  .js .head-words > :nth-child(2) { animation-delay: 0.12s; } .js .head-words > :nth-child(3) { animation-delay: 0.24s; } .js .head-words > :nth-child(4) { animation-delay: 0.36s; }
  @keyframes head-in { from { opacity: 0; transform: translateY(16px); } }
}

/* ---------- a section's head ---------- */
.sec-head { max-width: 780px; margin-bottom: 26px; }
.sec-lede { color: var(--ink-2); font-size: 1.08rem; max-width: 60ch; }
/* one shared price line printed from prices.json beside a part's prices (<!--@line key="..." -->) */
.price-line { font-weight: 700; max-width: 60ch; margin: 0; }
.duo { display: grid; gap: 26px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.duo > * { min-width: 0; }
.duo-words p { max-width: 46ch; }
.duo-note { color: var(--ink-2); font-style: italic; font-size: 0.95rem; }
.inc { margin: 6px 0 18px; }
.inc-h { font: 700 0.76rem/1.3 var(--body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px; }
.inc-list { display: grid; gap: 3px; max-width: 46ch; font-size: 0.97rem; }
.inc-list li { position: relative; padding-left: 20px; }
.inc-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--c-su); }
@media (max-width: 759px) { .duo-demo { margin-right: 8px; } }
@media (min-width: 1100px) {
  .duo { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: clamp(36px, 4.5vw, 80px); }
  .duo-demo { grid-column: 1; grid-row: 1; }
  .duo-words { grid-column: 2; grid-row: 1; }
}

/* ---------- held steps (D's ride): the steps, the markers in the band's lane, the picture wiped in ---------- */
.how { --n: 3; padding-block: clamp(56px, 7vw, 100px); }
.how-grid { display: grid; gap: 22px; }
.how-head h2 { max-width: 22ch; }
.how.ride-on .how-head h2 { font-size: clamp(1.8rem, 1rem + 2vw, 3rem); }
.how-marks { display: none; }
.how-stops { display: grid; gap: 40px; }
.step-n { font: 700 0.78rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-text); margin-bottom: 0.3rem; }
.how-step > p:not(.step-n) { max-width: 46ch; }
.how-pics { position: relative; display: grid; gap: 12px; }
.how-pic .pic, .how-pics > .pic { aspect-ratio: 3 / 2; border-radius: 18px; }
@media (min-width: 1100px) {
  .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(36px, 4vw, 72px); row-gap: 26px; }
  .how-head { grid-column: 1 / -1; }
  .how-stops { grid-column: 1; }
  .how-pics { grid-column: 2; grid-row: 2; }
}
.how.ride-on .ride-stage { display: flex; flex-direction: column; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: calc(var(--navh) + 18px); }
.how.ride-on .how-grid { flex: 1; min-height: 0; width: 100%; align-content: center; }
.how.ride-on .how-marks { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; }
.how.ride-on .marker { position: absolute; left: var(--mx, 0px); top: var(--my, 0px); transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--rule-strong); font: 700 0.9rem/1 var(--body); color: var(--ink-2); transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease; }
.how.ride-on .marker.is-on, .how.ride-on .marker.is-past { background: var(--or); border-color: var(--or); color: #1c1a18; }
.how.ride-on .how-pics { display: block; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: var(--pic-bg); }
.how.ride-on .how-pic, .how.ride-on .how-pics > .pic { position: absolute; inset: 0; }
.how.ride-on .how-pic .pic, .how.ride-on .how-pics > .pic { height: 100%; aspect-ratio: auto; border-radius: 0; }
/* D's image wipe: the next picture is wiped in over the last */
.how.ride-on .how-pic { clip-path: inset(0 0 0 100%); transform: translateX(6%) scale(1.04); transition: clip-path 1000ms var(--brake), transform 1300ms var(--brake), opacity 0s linear 1000ms; }
.how.ride-on .how-pic.is-past { clip-path: inset(0 0 0 0); transform: translateX(-4%) scale(1.02); opacity: 0; transition: transform 1300ms var(--brake), opacity 600ms ease 400ms; }
.how.ride-on .how-pic.is-on { clip-path: inset(0 0 0 0); transform: none; opacity: 1; z-index: 1; transition: clip-path 1000ms var(--brake), transform 1300ms var(--brake), opacity 0s; }
@media (prefers-reduced-motion: reduce) { .how.ride-on .how-pic, .how.ride-on .how-pic.is-on, .how.ride-on .how-pic.is-past { transition: opacity 0.2s ease; transform: none; clip-path: none; } .how.ride-on .how-pic:not(.is-on) { opacity: 0; } }
/* below 1100 px the held stage fills the screen it holds: the picture takes the room the tallest step leaves (so no
   blank band follows a step), the step markers stand beside the picture as the progress (never beside the step's
   lines), and each step's number sits with its own label (A6, W3, C2, C3, B11) */
@media (max-width: 1099px) {
  .how.ride-on .how-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; gap: 12px; }
  .how.ride-on .how-head { order: -2; }
  .how.ride-on .how-head h2 { font-size: clamp(1.3rem, 1rem + 2vw, 2.2rem); padding-right: 52px; margin-bottom: 0; }
  .how.ride-on .how-head .eyebrow { margin-bottom: 4px; }
  .how.ride-on .marker { width: 26px; height: 26px; font-size: 0.75rem; }
  .how.ride-on .how-pics { order: -1; aspect-ratio: auto; height: auto; min-height: 17svh; }
  .how.ride-on .how-stops { min-height: var(--stops-h, 0px); counter-reset: hstep; }
  .how.ride-on .how-step { counter-increment: hstep; }
  .how.ride-on .step-n::before { content: counter(hstep) "\00a0\00a0\00b7\00a0\00a0"; }
  .how.ride-on .how-step h3 { margin-bottom: 0.2em; }
  .how.ride-on .step-n { margin-bottom: 0.1rem; }
}
@media (max-width: 759px) {
  .how.ride-on .how-step > p:not(.step-n) { font-size: 0.95rem; line-height: 1.45; margin-bottom: 8px; }
  .how.ride-on .example { padding: 10px 14px; font-size: 0.84rem; }
}
/* a tablet holds the step as two columns, its words beside its worked example, at reading size */
@media (min-width: 760px) and (max-width: 1099px) {
  .how.ride-on .marker { width: 30px; height: 30px; }
  .how.ride-on .how-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 30px; align-items: start; }
  .how.ride-on .how-step > * { grid-column: 1; }
  .how.ride-on .how-step > .example { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; max-width: none; }
  .how.ride-on .how-step > p:not(.step-n) { margin-bottom: 10px; }
}
@media (min-width: 1100px) and (max-height: 900px) {
  .how.ride-on .how-step > p:not(.step-n) { margin-bottom: 10px; }
  .how.ride-on .example { padding: 12px 16px; font-size: 0.9rem; }
}

/* ---------- worked examples: real text on a white sheet ---------- */
.example { margin-top: 6px; padding: 16px 18px; border-radius: 16px; background: var(--white-panel); color: var(--on-white); border: 1px solid var(--rule); font-size: 0.95rem; max-width: 520px; }
.ex-h { font: 700 0.72rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #a3461a; margin-bottom: 8px; }

/* ---------- a picture that is a link: the whole picture goes, its label says where ---------- */
.plink { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--on-indigo); background: var(--pic-bg); min-height: 240px; }
.plink .pic { position: absolute; inset: 0; }
.plink .pic img { transition: transform 0.45s var(--brake); }
@media (hover: hover) { .plink:hover .pic img { transform: scale(1.03); } }
@media (hover: none) { .plink:active .pic img { transform: scale(1.02); } }
.pl-words { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: grid; gap: 2px; max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 14px; background: var(--indigo); transition: background-color 0.25s ease; }
.plink:hover .pl-words, .plink:focus-visible .pl-words { background: color-mix(in srgb, var(--indigo) 86%, #ffffff); }
.pl-name { font: 700 0.75rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: #ffb685; }
.pl-line { font: 700 1.05rem/1.3 var(--body); }
.pl-go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--on-indigo-2); }
.pl-go::after { content: ""; width: 16px; height: 1.5px; background: currentColor; transition: width 0.3s var(--brake); }
.plink:hover .pl-go::after { width: 26px; }
@media (hover: hover) and (pointer: fine) {
  .plink .pl-go, .frame-panel .fp-go { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .plink:focus-visible .pl-go, .frame-panel:focus-visible .fp-go { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* ---------- the prices ---------- */
.divide { position: absolute; left: 0; top: 34px; width: 1px; height: 1px; }
.card--laura { background: var(--paper-2); }
:root[data-theme="dark"] .card--laura { background: #e7e1d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card--laura { background: #e7e1d6; } }
.after-cards { display: grid; gap: 18px; margin-top: 26px; align-items: stretch; }
.note-box { padding: 22px 22px 18px; border-radius: 20px; border: 1.5px dashed var(--rule-strong); }
.note-box h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.note-box p { margin-bottom: 0.6em; font-size: 0.98rem; }
.note-box .where-cards { display: grid; gap: 6px; font-size: 0.95rem; }
.note-box .where-cards b { margin-right: 0.3em; }
@media (min-width: 760px) { .after-cards { grid-template-columns: 1fr 1fr; } .after-cards .plink { grid-column: 1 / -1; min-height: 300px; } }
@media (min-width: 1100px) { .after-cards { grid-template-columns: 1fr 1fr 1.2fr; } .after-cards .plink { grid-column: auto; min-height: 0; } }
@media (min-width: 760px) and (max-width: 1099px) { .after-cards > .note-box:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: no-preference) {
  .js .area-prices.is-up .card { animation: card-in 0.6s var(--brake) backwards; }
  .js .area-prices.is-up .card:nth-child(2) { animation-delay: 80ms; }
  .js .area-prices.is-up .card:nth-child(3) { animation-delay: 160ms; }
  .js .area-prices.is-up .card:nth-child(4) { animation-delay: 240ms; }
  @keyframes card-in { from { opacity: 0; transform: translateY(18px); } }
}

/* ---------- the free call: the big block of colour, where the band ends in her seal ---------- */
.call-block { position: relative; display: grid; gap: 22px; align-items: center; background: #ff914d; color: #1c1a18; border-radius: 30px; padding: clamp(30px, 6vw, 80px); --focus: #1c1a18; --ink-2: #1c1a18; }
.call-words { position: relative; z-index: 2; }
.call-block .eyebrow { color: #1c1a18; }
.call-lede { font-size: 1.15rem; max-width: 46ch; }
.call-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.call-note { font-size: 0.92rem; margin: 14px 0 0; }
.call-seal { width: clamp(150px, 22vw, 280px); height: clamp(150px, 22vw, 280px); justify-self: start; order: -1; }
@media (min-width: 1100px) { .call-block { grid-template-columns: minmax(0, 1fr) auto; } .call-seal { order: 0; justify-self: end; } }
/* the small print's ending (privacy, accessibility, not found): no booking panel; the page hands the reader back,
   her string tied off in a small seal, the free call one quiet way on among the others (D6, W11) */
.handback { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.hb-in { display: grid; justify-items: center; gap: 10px; max-width: 680px; margin-inline: auto; text-align: center; }
.hb-seal { width: clamp(104px, 12vw, 150px); height: clamp(104px, 12vw, 150px); margin-bottom: 8px; }
.hb-in h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); padding-right: 0; }
.hb-in p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.hb-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin-top: 8px !important; }
.hb-ways a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); }

/* below 760 px the pause and index-dial buttons sit fixed at the top right: headings leave them room */
@media (max-width: 759px) { main h1:not(.tagline), main h2 { padding-right: 60px; } }
/* below 1100 px the fixed pause and index buttons step out of the way while the reader scrolls down, and come back
   on the way up, at the top of the page, or to the keyboard (A13, B2) */
@media (max-width: 1099px) {
  .pause, .dial-dock { transition: transform 0.4s var(--brake), opacity 0.3s ease; }
  html.ctl-away .pause:not(:focus-visible), html.ctl-away .dial-dock:not(:focus-within) { transform: translateY(-150px); opacity: 0; pointer-events: none; }
  .pause:focus-visible, .dial-dock:focus-within { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .pause, .dial-dock { transition: none; } }
/* a page in no part keeps her orange where the part colour would stand; Business's list marks take its own colour */
[data-part=""] .head-ground { background: color-mix(in srgb, var(--or) 9%, transparent); }
[data-part=""] .part-eyebrow { color: var(--or-text); } [data-part=""] .part-eyebrow .dot { background: var(--or); }
[data-part="business"] .inc-list li::before { border-color: var(--c-biz); }