/* Stem Cells Bangkok, site styles v3 (r18, 2026-10-12).
   One direction, three colour ways on html[data-way]: marigold (default), jade, ink.
   Type: Literata Display (opsz 72 instance, wght 300 to 500) and Wix Madefor Text (wght 400 to 800),
   both SIL OFL 1.1, self-hosted (licences in /assets/fonts/OFL-*.txt). Every layout sits on one 12 column grid. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Literata Display"; src: url("/assets/fonts/literata-display-latin-v1.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata Display"; src: url("/assets/fonts/literata-display-italic-latin-v1.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Wix Madefor Text"; src: url("/assets/fonts/wixmadefortext-latin-v1.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Wix Madefor Text"; src: url("/assets/fonts/wixmadefortext-italic-latin-v1.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
/* Metric-matched fallbacks, so the swap to the web fonts does not move the layout. */
@font-face { font-family: "Literata Fallback"; src: local("Georgia"); size-adjust: 108%; ascent-override: 109%; descent-override: 28.5%; line-gap-override: 0%; }
@font-face { font-family: "Wix Fallback"; src: local("Arial"); size-adjust: 108%; ascent-override: 93.3%; descent-override: 23.3%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --f-display: "Literata Display", "Literata Fallback", Georgia, serif;
  --f-text: "Wix Madefor Text", "Wix Fallback", -apple-system, "Segoe UI", sans-serif;

  /* type, fluid between 390 and 1600 px */
  --t-d1: clamp(2.5rem, 1.6rem + 3.6vw, 5.25rem);
  --t-d2: clamp(2rem, 1.45rem + 2.25vw, 3.5rem);
  --t-d3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --t-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --t-body: 1.125rem;
  --t-small: 1rem;
  --t-meta: 0.9375rem;

  /* space and grid */
  --gutter: max(clamp(20px, 4.2vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* clear of a sideways phone's notch */
  --gap: clamp(16px, 2vw, 32px);
  --cols: repeat(12, minmax(0, 1fr));
  --section: clamp(96px, 10vw, 184px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --max: 1680px;
  --measure: 34em;
  --header-h: 76px;

  --r-control: 8px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h18.4M13.2 .9 18.4 6l-5.2 5.1' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");

  /* shared by all three ways */
  --field-border: #66707A;
  --placeholder: #6B747D;
  --error: #B42318;
  --error-bg: #FCEFEE;
}

/* Way 1, Marigold (default): white and grey paper, night ink, marigold fills with ink text.
   The accent is a fill colour only, never text on white (2.9:1). The full stop on paper
   uses the deeper --mark-on-paper (3.5:1, enough for large text). */
:root, [data-way="marigold"] {
  --paper: #FFFFFF;
  --paper-2: #F3F4F2;
  --ink: #0E1822;
  --ink-2: #4A5560;
  --line: rgba(14, 24, 34, .16);
  --accent: #D9822B;
  --accent-hover: #C87420;
  --mark-on-paper: #C87420;
  --accent-ink: #0E1822;
  --field: #0E1822;
  --on-field: #F3F4F2;
  --on-field-2: rgba(243, 244, 242, .74);
  --on-field-line: rgba(243, 244, 242, .22);
  --mark-on-field: #D9822B;
  --focus: #0E1822;
}
/* Way 2, Jade: deep jade fills with white text, an ink-green field. */
[data-way="jade"] {
  --accent: #1E5A48;
  --accent-hover: #174838;
  --accent-ink: #FFFFFF;
  --mark-on-paper: #1E5A48;
  --field: #10261F;
  --on-field: #EEF2EF;
  --on-field-2: rgba(238, 242, 239, .74);
  --on-field-line: rgba(238, 242, 239, .22);
  --mark-on-field: #8CC1AC;
}
/* Way 3, Ink: no accent colour at all; ink fills, the photographs carry the colour. */
[data-way="ink"] {
  --accent: #0E1822;
  --accent-hover: #26323D;
  --accent-ink: #FFFFFF;
  --mark-on-paper: #0E1822;
  --mark-on-field: #F3F4F2;
}
.on-field { --focus: var(--on-field); }
.review-panel, .cookie-bar, .way-switch { --focus: var(--ink); }

/* r18 tokens: the hero and statement sizes, the long ease, and the button colour used on photographs. */
:root {
  --t-hero: clamp(2.75rem, 0.95rem + 7.2vw, 9.5rem);
  --t-statement: clamp(1.625rem, 1.05rem + 2.3vw, 3.625rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* A button on a photograph needs a light fill in every way: marigold, light jade, or paper white, all with ink text. */
  --photo-btn: var(--mark-on-field);
  --photo-btn-ink: #0E1822;
  --photo-btn-hover: #E69140;
  interpolate-size: allow-keywords;
}
[data-way="jade"] { --photo-btn-hover: #A3CFBD; }
[data-way="ink"] { --photo-btn-hover: #DCDFDB; } /* off-white to white was too slight to see; ink dims the button instead */
.on-field .stop { color: var(--mark-on-field); }
/* Visually hidden, still read by screen readers (the h2 word reveal keeps the plain heading text here). */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink);
  font-family: var(--f-text); font-size: var(--t-body); line-height: 1.6;
  font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 340; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--t-d1); font-weight: 300; line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--t-d1); font-weight: 300; line-height: 1.04; letter-spacing: -0.022em; }
h3 { font-size: var(--t-d3); font-weight: 380; line-height: 1.2; letter-spacing: -0.01em; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
.on-field ::selection { background: var(--mark-on-field); color: var(--field); }
.review-panel ::selection { background: var(--accent); color: var(--accent-ink); }

.in { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: 16px; top: -120px; z-index: 100; padding: 12px 18px; border-radius: var(--r-control);
  background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Margin note: the section's name, set in the display italic beside or above the heading. */
.note, .kicker { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 26px; border: 0; border-radius: var(--r-control);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--f-text); font-size: 1.0625rem; font-weight: 650; line-height: 1.2; letter-spacing: .003em;
  text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: progress; opacity: .72; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn-arrow::after, .text-link::after {
  content: ""; flex: none; width: 20px; height: 12px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.text-link {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em;
}
.text-link::after { width: 16px; height: 10px; }
@media (hover: hover) {
  .btn-arrow:hover::after, .text-link:hover::after { transform: translateX(3px); }
}

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); min-height: var(--header-h); }
.mark, .foot-mark { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.012em; line-height: 1; text-decoration: none; white-space: nowrap; }
.mark { margin-right: auto; font-size: 1.375rem; }
.mark span, .foot-mark span { font-style: italic; }
/* The full stop: one accent mark that also closes the hero headline and makes the favicon. */
.mark::after, .foot-mark::after { content: "."; content: "." / ""; color: var(--mark-on-paper); font-style: normal; }
.foot-mark::after { color: var(--mark-on-field); }
.stop { color: var(--mark-on-paper); }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 36px); }
.main-nav a {
  padding-block: 10px; font-size: .9375rem; font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.main-nav a:hover { background-size: 100% 1px; }
.header-cta { transition: opacity .25s var(--ease), visibility .25s, background-color .2s var(--ease); }
/* The header button steps back while the hero button or the form is on screen (classes set by app-public-v2.js),
   and on guides while the rail button or the end band is on screen (class set by blog-v1.js). */
.hero-cta-visible .header-cta, .review-visible .header-cta, .guide-cta-visible .header-cta { opacity: 0; visibility: hidden; }

.mobile-menu { display: none; }
.mobile-menu summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px;
  list-style: none; cursor: pointer; font-size: .9375rem; font-weight: 600; -webkit-user-select: none; user-select: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after {
  content: ""; width: 18px; height: 18px;
  background: linear-gradient(currentColor, currentColor) center 5px / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center 12px / 100% 1.5px no-repeat;
}
.mobile-menu[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transform: rotate(45deg);
}
.mobile-menu nav {
  position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: 8px var(--gutter) 28px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  max-height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu nav a:not(.btn) {
  padding-block: 14px; border-bottom: 1px solid var(--line); text-decoration: none;
  font-family: var(--f-display); font-size: 1.75rem; font-weight: 300; line-height: 1.2; letter-spacing: -0.012em;
}
.mobile-menu .menu-cta { margin-top: 24px; width: 100%; }
@media (max-width: 999px) {
  .main-nav { display: none; }
  .mobile-menu { display: block; }
}
/* An open menu sits above the cookie choice; the choice is back when the menu closes. */
.top:has(.mobile-menu[open]) { z-index: 65; }
@media (max-width: 999px) and (max-height: 480px) {
  .mobile-menu nav { padding-bottom: 16px; }
  .mobile-menu nav a:not(.btn) { padding-block: 8px; font-size: 1.375rem; }
  .mobile-menu .menu-cta { margin-top: 14px; }
}
@media (max-width: 700px) {
  :root { --header-h: 64px; }
  .mark { font-size: 1.25rem; }
  .header-cta { display: none; }
}

/* Homepage: the header shares the hero's dark field and turns to paper once the whole hero has scrolled under it
   (class past-hero, set by the inline script after the hero). Without JavaScript it stays on paper. */
.home .top { transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); }
.js .home .top:not(.past-hero) { background: var(--field); border-bottom-color: transparent; color: var(--on-field); --focus: var(--on-field); }
.js .home .top:not(.past-hero) .mark::after { color: var(--mark-on-field); }
.js .home .top:not(.past-hero):has(.mobile-menu[open]) { background: var(--paper); border-bottom-color: var(--line); color: var(--ink); --focus: var(--ink); }
.js .home .top:not(.past-hero):has(.mobile-menu[open]) .mark::after { color: var(--mark-on-paper); }
.js .home .top:not(.past-hero) .header-cta, .hero-cta { background: var(--photo-btn); color: var(--photo-btn-ink); }
.js .home .top:not(.past-hero) .header-cta:hover, .hero-cta:hover { background: var(--photo-btn-hover); }

/* ---------- Section heads ---------- */
.sec-head { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: baseline; }
.sec-head .note { grid-column: 1 / 4; }
.sec-head h2 { grid-column: 4 / 13; }
.sec-head .sec-sub { grid-column: 4 / 13; margin-top: 24px; max-width: 32em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 799px) {
  .sec-head { display: block; }
  .sec-head .note { margin-bottom: 14px; }
}

/* ---------- Hero: the headline on the dark field, the photograph beside it or above it ---------- */
/* No text ever sits on the photograph, so the faces stay clear at every window size. The hero pulls up under the
   sticky header, which shares its field until the hero has passed. */
.hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--header-h) - 1px); background: var(--field); color: var(--on-field); --focus: var(--on-field); }
/* Upright windows (phones, tablets): the photo first, then headline, sentence and button. The photo takes the height
   the copy leaves in the first screen, between 56vw and 125vw. */
.hero-stage { display: flex; flex-direction: column; min-height: 100svh; padding-top: calc(var(--header-h) + 1px); padding-bottom: clamp(28px, 5vw, 56px); }
.hero-media { position: relative; flex: 1 1 auto; min-height: 56vw; max-height: 125vw; overflow: hidden; background: #0B1218; }
.hero-media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.hero-copy { margin-top: clamp(24px, 5vw, 48px); }
/* The negative margin hangs the S by its .057em side bearing, so its ink lines up with the sentence and button below. */
.hero h1 { margin-left: -.057em; font-size: min(var(--t-hero), calc((100vw - 2 * var(--gutter)) / 7.9), 12.5svh); font-weight: 300; line-height: .96; letter-spacing: -0.035em; }
.hero h1 .hl { display: block; }
.hero h1 .stop { color: var(--mark-on-field); }
.hero-act { display: grid; justify-items: start; gap: clamp(16px, 3svh, 28px); max-width: 30em; margin-top: clamp(16px, 3.5svh, 40px); }
.hero-sub { font-size: var(--t-lead); line-height: 1.5; color: var(--on-field); color: color-mix(in srgb, var(--on-field) 86%, transparent); }
@media (max-width: 599px) { .hero-cta { width: 100%; } }
/* Landscape windows: headline, sentence and button at the foot of columns 1 to 7; the photo fills columns 8 to 12 from
   the header down to the facts and runs off the right edge. */
@media (min-aspect-ratio: 6/5) {
  .hero { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: max(560px, 100svh); }
  .hero-stage { position: relative; justify-content: flex-end; min-height: 0;
    padding-top: calc(var(--header-h) + clamp(16px, 6svh - 12px, 48px)); padding-bottom: clamp(24px, 12svh - 28px, 88px); }
  .hero-media { position: absolute; top: calc(var(--header-h) + 1px); bottom: 0; right: 0; min-height: 0; max-height: none;
    left: calc(max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)) + (min(100%, var(--max)) - 2 * var(--gutter) + var(--gap)) * 7 / 12); }
  .hero-media img { object-position: 50% 50%; }
  .hero-copy { margin-top: 0; }
  /* "Stem cell therapy", the longest line, is 7.16em wide: this cap ends it two column gaps before the photo.
     Change 85.92 (= 7.16 x 12) if the headline changes. */
  .hero h1 { font-size: min(var(--t-hero), calc(((min(100vw, var(--max)) - 2 * var(--gutter)) * 7 - var(--gap) * 17) / 85.92), 12.5svh); }
  .hero-act { max-width: min(30em, calc(((min(100vw, var(--max)) - 2 * var(--gutter)) * 7 - var(--gap) * 5) / 12)); }
  /* The rule above the facts ends one column gap before the photo, whose lower edge carries the line on. */
  .hero-facts .facts-list::before { right: calc((100% + var(--gap)) * 5 / 12); }
}
/* Phones on their side: smaller headline and sentence, so the button still makes the first screen. The copy and the
   photo take the whole window, so the facts start at its lower edge instead of showing as a thin strip along it. The
   560px floor of larger windows goes: with the browser bar showing it pushed the button below the phone's lower edge. */
@media (min-aspect-ratio: 6/5) and (max-height: 500px) {
  .hero { min-height: 0; }
  .hero-stage { min-height: 100svh; }
  .hero h1 { font-size: min(calc(((min(100vw, var(--max)) - 2 * var(--gutter)) * 7 - var(--gap) * 17) / 85.92), 11svh); }
  .hero-act { gap: 12px; margin-top: 12px; }
  .hero-sub { font-size: 1rem; line-height: 1.45; }
}
/* The shortest of them, an Android phone on its side with the browser bar showing: a smaller headline and sentence,
   tighter spacing and a lower button, so the button still makes the first screen. */
@media (min-aspect-ratio: 6/5) and (max-height: 330px) {
  .hero-stage { padding-top: calc(var(--header-h) + 8px); padding-bottom: 16px; }
  .hero h1 { font-size: min(calc(((min(100vw, var(--max)) - 2 * var(--gutter)) * 7 - var(--gap) * 17) / 85.92), 9.5svh); }
  .hero-act { gap: 8px; margin-top: 8px; }
  .hero-sub { font-size: .9375rem; line-height: 1.4; }
  .hero-cta { min-height: 48px; }
}
/* Short upright phones (an SE with its toolbars showing): smaller headline, tighter spacing, so the button still makes
   the first screen. The photo keeps its height: below 56vw the square crop would cut into her hair. */
@media (max-aspect-ratio: 119/100) and (max-height: 600px) {
  .hero-copy { margin-top: 16px; }
  .hero h1 { font-size: min(calc((100vw - 2 * var(--gutter)) / 7.9), 5.6svh); }
  .hero-act { gap: 10px; margin-top: 10px; }
  .hero-sub { font-size: 1.0625rem; line-height: 1.45; }
}

/* ---------- Facts: four short lines on the hero's field, in one row from 1000 px, two by two below ---------- */
.facts-list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.facts-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--on-field-line); transform-origin: left; }
.facts-list li { position: relative; display: grid; align-content: start; gap: 4px; overflow: clip; padding: 22px var(--gap) 26px 0; }
.facts-list li + li { padding-left: var(--gap); }
.facts-list li + li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 26px; border-left: 1px solid var(--on-field-line); }
.facts-list strong { font-family: var(--f-display); font-size: 1.25rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.005em; }
.facts-list span { font-size: var(--t-small); line-height: 1.45; color: var(--on-field-2); }
@media (max-width: 999px) {
  .hero-facts { padding-bottom: 8px; }
  .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-list li, .facts-list li + li { padding: 18px 16px 20px 0; }
  .facts-list li:nth-child(even) { padding-left: 16px; }
  .facts-list li:nth-child(n+3) { border-top: 1px solid var(--on-field-line); }
  .facts-list li + li::before { top: 18px; bottom: 20px; }
  .facts-list li:nth-child(3)::before { content: none; }
  .facts-list strong { font-size: 1.125rem; line-height: 1.35; }
  .facts-list span { font-size: .9375rem; }
}

/* ---------- Statement: one paragraph, read in as you scroll ---------- */
.statement { padding-block: var(--section); }
.statement .in { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); }
.statement-text {
  grid-column: 2 / 12; max-width: 24em;
  font-family: var(--f-display); font-size: var(--t-statement); font-weight: 300;
  line-height: 1.18; letter-spacing: -0.02em; color: var(--ink);
}
.statement-text > span:not(.w) { display: block; margin-top: .55em; }
.statement-text em { font-style: italic; color: var(--mark-on-paper); }
@media (max-width: 799px) { .statement-text { grid-column: 1 / -1; } }
/* Words light up in reading order (app-public-v3.js wraps them in .w). Without the script the text is plain. */
.lit-ready .statement-text .w { opacity: .2; transition: opacity .35s linear; }
.lit-ready .statement-text .w.on { opacity: 1; }

/* ---------- How it works: three parts on a line, beside the written answer ---------- */
.how { padding-block: var(--section); background: var(--paper-2); }
.how-grid { display: grid; grid-template-columns: var(--cols); grid-template-rows: auto 1fr auto; column-gap: var(--gap); }
.how-head { grid-column: 1 / 6; grid-row: 1; display: block; }
.how-head .note { margin-bottom: 18px; }
.how-head h2 { font-size: var(--t-d2); line-height: 1.06; letter-spacing: -0.018em; }
.how-parts { position: relative; grid-column: 1 / 6; grid-row: 2; margin-top: clamp(40px, 5vw, 72px); padding-left: 40px; }
/* The line: a hairline, and over it the accent line that grows with the scroll (--p, set by app-public-v3.js). */
.how-parts::before, .how-parts::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; }
.how-parts::before { background: var(--line); }
.how-parts::after { background: var(--mark-on-paper); transform: scaleY(var(--p, 0)); transform-origin: top; }
.how-part { display: grid; align-content: start; gap: 12px; padding-block: clamp(28px, 4vw, 64px); }
.how-part h3 { position: relative; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 3rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; transition: color .4s var(--ease); }
.how-part h3::before {
  content: ""; position: absolute; left: -40px; top: calc(.55em - 7px); box-sizing: border-box; width: 13px; height: 13px;
  border: 1px solid var(--ink-2); border-radius: 50%; background: var(--paper-2);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.how-part.is-active h3::before, .how-part.is-past h3::before { border-color: var(--mark-on-paper); background: var(--mark-on-paper); }
.how-part p { max-width: 20em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.how-live .how-part h3 { color: var(--ink-2); }
.how-live .how-part.is-active h3 { color: var(--ink); }
.how-cta { grid-column: 1 / 6; grid-row: 3; padding-top: clamp(32px, 4vw, 56px); padding-left: 40px; }
.doc-wrap { grid-column: 6 / 13; grid-row: 1 / 4; align-self: start; }
/* The sheet stays in view beside the three parts only where it fits the window whole (.how-stick, set by
   app-public-v3.js). Elsewhere, and without the script, it sits still beside them. */
@media (min-width: 1000px) {
  .how-stick .how-part { min-height: 58vh; }
  .how-stick .doc-wrap { position: sticky; top: calc(var(--header-h) + 3vh); }
}
/* Beside the sheet the step text keeps a clear margin from it. */
@media (min-width: 1000px) { .how-parts { padding-right: clamp(40px, 4.5vw, 64px); } }
@media (max-width: 999px) {
  .how-head, .how-parts, .how-cta, .doc-wrap { grid-column: 1 / -1; }
  .how-head { grid-row: 1; }
  .how-parts { grid-row: 2; }
  .doc-wrap { grid-row: 3; margin-top: 48px; }
  .how-cta { grid-row: 4; padding-left: 0; }
}

/* The document: a white sheet lying on the grey, with a stamp. */
.doc {
  position: relative; padding: clamp(28px, 2.6vw, 48px); background: #fff; border-radius: 2px;
  box-shadow: 0 1px 1px rgba(14, 24, 34, .04), 0 2px 4px rgba(14, 24, 34, .04), 0 12px 24px -6px rgba(14, 24, 34, .08), 0 40px 80px -20px rgba(14, 24, 34, .18);
}
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: var(--t-meta); letter-spacing: .01em; color: var(--ink-2); }
.doc-top span:last-child {
  padding: 4px 10px 3px; border: 2px solid currentColor; border-radius: 3px; color: var(--mark-on-paper);
  font-family: var(--f-text); font-size: 1.1875rem; font-weight: 800; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-6deg);
}
.doc-title { margin-top: clamp(20px, 1.8vw, 32px); font-family: var(--f-display); font-size: clamp(1.625rem, 1.1rem + 1.1vw, 2.5rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.018em; }
.doc-meta { display: grid; gap: 6px; margin-top: 18px; font-size: var(--t-meta); line-height: 1.5; }
.doc-meta div, .doc-line { display: grid; grid-template-columns: 8em minmax(0, 1fr); column-gap: 20px; }
.doc-meta dt, .doc-line dt { color: var(--ink-2); }
.doc-lines { margin-top: clamp(20px, 2vw, 32px); border-top: 1px solid var(--ink); }
.doc-line { align-items: baseline; padding-block: 12px 13px; border-bottom: 1px solid var(--line); }
.doc-line dt { font-size: var(--t-meta); line-height: 1.5; }
.doc-line dd { font-family: var(--f-display); font-size: 1.125rem; font-weight: 380; line-height: 1.32; }
.doc-ink { display: block; }
.doc-foot { margin-top: 18px; font-family: var(--f-display); font-size: 1.125rem; font-style: italic; }
.doc-wrap figcaption { max-width: 36em; margin-top: 14px; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2); }
/* Filling in (app-public-v3.js adds .doc-live, then .is-filled per part). Without the script the sheet is complete. */
.doc-live .doc-ink { clip-path: inset(-.25em 100% -.25em -.25em); transition: clip-path .9s var(--ease) var(--fill-delay, 0ms); }
.doc-live .is-filled .doc-ink { clip-path: inset(-.25em); }
@media (max-width: 599px) {
  .doc-meta div, .doc-line { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* ---------- Cost: the dark ledger ---------- */
.cost { padding-block: var(--section); background: var(--field); color: var(--on-field); }
.cost .note { color: var(--on-field-2); }
.ledger { margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--on-field-line); }
.ledger-row { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 8px; align-items: end; padding-block: clamp(28px, 3vw, 48px); border-bottom: 1px solid var(--on-field-line); }
.ledger-place { grid-column: 1 / 5; grid-row: 1; font-family: var(--f-display); font-size: var(--t-d3); font-weight: 380; line-height: 1.2; letter-spacing: -0.01em; }
.ledger-what { grid-column: 1 / 5; grid-row: 2; max-width: 22em; color: var(--on-field-2); }
.ledger-price { grid-column: 5 / 13; grid-row: 1 / 3; justify-self: end; text-align: right; font-family: var(--f-display); }
.ledger-pre { display: block; margin-bottom: 6px; font-family: var(--f-text); font-size: var(--t-meta); color: var(--on-field-2); }
/* The figure rises out of its own line (overflow clip, .num-in moves). */
.ledger-num {
  display: block; overflow: clip; padding: .06em 0 .16em;
  font-size: clamp(2.75rem, 1.2rem + 5.2vw, 7rem); font-weight: 300; line-height: .95; letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.num-in { display: inline-block; }
.cur { margin-right: .18em; font-size: .42em; font-weight: 400; letter-spacing: 0; vertical-align: .92em; }
.to { margin-inline: .12em; font-size: .42em; font-style: italic; letter-spacing: 0; }
.fnref { margin-left: .1em; font-size: .64em; line-height: 0; vertical-align: super; font-variant-numeric: lining-nums; }
.fnref a { padding: 0 .15em; font-weight: 700; color: var(--ink); text-decoration: none; }
.fnref a:hover { text-decoration: underline; }
.cost .fnref a { color: var(--mark-on-field); }
@media (max-width: 799px) {
  .ledger-row { grid-template-columns: minmax(0, 1fr); }
  .ledger-place, .ledger-what, .ledger-price { grid-column: 1; grid-row: auto; }
  .ledger-price { justify-self: start; text-align: left; margin-top: 14px; }
}
@media (max-width: 599px) {
  .ledger-num { font-size: min(2.75rem, calc((100vw - 2 * var(--gutter)) / 8.2)); }
}

/* Scale: 0 to 6,000 US dollars. Bangkok's published range is a band, the US average is a pin. */
.scale { margin-top: clamp(48px, 5vw, 72px); }
.scale-track { position: relative; height: 96px; border-bottom: 1px solid var(--on-field); }
.scale-band { position: absolute; left: 40%; right: 25%; bottom: 0; height: 28px; background: var(--mark-on-field); transform-origin: left; }
.scale-mark { position: absolute; left: 85.93%; bottom: 0; width: 1px; height: 56px; background: var(--on-field); }
.scale-mark::before { content: ""; position: absolute; left: -6px; top: -12px; box-sizing: border-box; width: 13px; height: 13px; border: 2px solid var(--on-field); border-radius: 50%; background: var(--field); }
.scale-label { position: absolute; font-size: var(--t-meta); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.scale-label-us { top: 4px; right: calc(14.07% - 7px); }
.scale-label-bkk { top: 40px; left: 40%; }
.scale-ticks { position: relative; height: 40px; font-size: var(--t-meta); color: var(--on-field-2); font-variant-numeric: tabular-nums; }
.scale-ticks span { position: absolute; top: 12px; white-space: nowrap; transform: translateX(-50%); }
.scale-ticks span::before { content: ""; position: absolute; top: -12px; left: 50%; height: 6px; border-left: 1px solid var(--on-field-2); }
.scale-ticks span:nth-child(1) { left: 0; transform: none; }
.scale-ticks span:nth-child(1)::before { left: 0; }
.scale-ticks span:nth-child(2) { left: 33.333%; }
.scale-ticks span:nth-child(3) { left: 66.667%; }
.scale-ticks span:nth-child(4) { right: 0; transform: none; }
.scale-ticks span:nth-child(4)::before { left: auto; right: 0; }
/* The narrowest phones: the tick numbers one step smaller, so 4,000 and US$6,000 keep a gap between them. */
@media (max-width: 359px) { .scale-ticks { font-size: .875rem; } }

.cost-foot { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--on-field-line); }
.fns { grid-column: 1 / 7; display: grid; align-content: start; gap: 10px; }
/* The number hangs in the margin; the note text (with its link) flows as one paragraph. */
.fn { position: relative; padding-left: 1.75em; font-size: var(--t-meta); line-height: 1.55; color: var(--on-field-2); scroll-margin-top: calc(var(--header-h) + 64px); }
.fn-n { position: absolute; left: 0; top: 0; font-family: var(--f-display); font-weight: 500; color: var(--mark-on-field); font-variant-numeric: lining-nums; }
.fn a { color: var(--on-field); }
.fn:target { background: rgba(255, 255, 255, .08); outline: 8px solid rgba(255, 255, 255, .08); }
.cost-note { grid-column: 8 / 13; display: grid; justify-items: start; align-content: start; gap: 16px; }
.cost-note p { font-size: var(--t-small); line-height: 1.55; color: var(--on-field); }
@media (max-width: 799px) { .fns, .cost-note { grid-column: 1 / -1; } }

/* ---------- Conditions: four photographs, set off the grid like a spread ---------- */
.conditions { padding-block: var(--section); }
.cond-index {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: clamp(64px, 8vw, 140px); align-items: start;
  margin: clamp(48px, 6vw, 96px) 0 0; padding: 0; list-style: none;
}
.ix { position: relative; display: flex; flex-direction: column; }
.ix-photo { order: -1; position: relative; margin-bottom: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.ix-photo picture, .ix-photo img { display: block; width: 100%; height: 100%; }
.ix-photo img { object-fit: cover; transition: transform .9s var(--ease-out); }
.ix-name { display: inline-flex; align-items: baseline; gap: .4em; font-size: clamp(1.3125rem, 1.05rem + 1.1vw, 2.5rem); font-weight: 320; line-height: 1.1; letter-spacing: -0.018em; }
.ix-name::after {
  content: ""; flex: none; width: .62em; height: .38em; background: var(--mark-on-paper);
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.ix-line { margin-top: 10px; max-width: 26em; color: var(--ink-2); }
/* The whole item is one link: the empty .ix-go covers it. */
.ix-go { position: absolute; inset: 0; z-index: 2; }
@media (hover: hover) {
  .ix:hover .ix-photo img { transform: scale(1.04); }
  .ix:hover .ix-name::after { transform: translateX(6px); }
}
@media (min-width: 900px) {
  .ix:nth-child(1) { grid-column: 1 / 8; }
  .ix:nth-child(1) .ix-photo, .ix:nth-child(4) .ix-photo { aspect-ratio: 4 / 3; }
  .ix:nth-child(2) { grid-column: 9 / 13; margin-top: clamp(80px, 12vw, 220px); }
  .ix:nth-child(3) { grid-column: 2 / 6; }
  .ix:nth-child(4) { grid-column: 7 / 13; margin-top: clamp(64px, 10vw, 180px); }
}
@media (max-width: 899px) {
  .cond-index { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .ix:nth-child(even) { margin-top: 48px; }
  .ix-line { font-size: var(--t-small); }
}

/* ---------- Five questions: a list beside its heading ---------- */
.check { padding-block: var(--section); background: var(--paper-2); }
.check .in { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.check .sec-head { grid-column: 1 / 6; display: block; }
.check .sec-head .note { margin-bottom: 18px; }
.check .sec-head h2 { font-size: var(--t-d2); line-height: 1.06; letter-spacing: -0.018em; }
.check .sec-head .sec-sub { margin-top: 24px; }
.check h2 em { font-style: italic; }
.checklist { grid-column: 7 / 13; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.checklist li { position: relative; display: grid; gap: 10px; padding-block: clamp(24px, 2.6vw, 40px); }
.checklist li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line); transform-origin: left; }
.checklist h3 { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.75rem); font-weight: 320; line-height: 1.12; letter-spacing: -0.018em; }
.checklist p { max-width: 30em; color: var(--ink-2); }
@media (min-width: 1000px) { .check .sec-head { position: sticky; top: calc(var(--header-h) + 48px); } }
@media (max-width: 999px) { .check .sec-head, .checklist { grid-column: 1 / -1; } }

/* ---------- Place: Bangkok at full width, running into the dark form ---------- */
.place { position: relative; isolation: isolate; height: clamp(420px, 78vh, 900px); margin: 0; overflow: hidden; background: #0B1218; color: #fff; }
.place-photo { position: absolute; inset: -8% 0; z-index: -1; }
.place-photo picture, .place-photo img { display: block; width: 100%; height: 100%; }
.place-photo img { object-fit: cover; object-position: 50% 50%; }
.place::after { content: ""; position: absolute; inset: 50% 0 0; z-index: -1; background: linear-gradient(to top, var(--field), transparent); }
.place figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px;
  padding-bottom: clamp(20px, 3vw, 40px); font-size: var(--t-meta); line-height: 1.5; color: rgba(255, 255, 255, .8);
}
.place-name { font-family: var(--f-display); font-style: italic; font-size: clamp(1.375rem, 1rem + 1.2vw, 2.25rem); color: #fff; }
.place + .review { padding-top: clamp(64px, 7vw, 120px); }
@media (max-width: 699px) { .place { height: clamp(360px, 62vh, 560px); } }


/* ---------- Review: the form, as paper on the field ---------- */
.review { padding-block: var(--section); background: var(--field); color: var(--on-field); }
.review-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.review-intro { grid-column: 1 / 6; container-type: inline-size; }
/* Sized to its column so the heading keeps two lines: its longer line, "are a candidate.", is 6.58em wide. */
.review-intro h2 { font-size: min(var(--t-d1), 14.6cqi); }
.review-intro .note { margin-bottom: 18px; color: var(--on-field-2); }
/* Emphasis in headings is set in the display italic, as in the hero headline. */
.review-intro h2 em { font-style: italic; }
.review-promises { list-style: none; max-width: 30em; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--on-field-line); }
.review-promises li { display: flex; align-items: baseline; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--on-field-line); }
.review-promises li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mark-on-field); transform: translateY(-2px); }
.referral-note { margin-top: 28px; font-size: var(--t-meta); color: var(--on-field-2); }
.referral-note a { color: var(--on-field); font-weight: 600; }
.review-panel { grid-column: 7 / 13; padding: clamp(24px, 3.5vw, 56px); background: var(--paper); color: var(--ink); scroll-margin-top: calc(var(--header-h) + 16px); }
@media (max-width: 999px) { .review-intro, .review-panel { grid-column: 1 / -1; } }
/* On phones the form panel runs to the screen edges and the foot of the section, so a hairline marks where the guides begin. */
@media (max-width: 599px) { .review { padding-bottom: 0; } .review-panel { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 56px; } .review + .guides { border-top: 1px solid var(--line); } }

#leadform { position: relative; }
#leadform[aria-busy="true"] { cursor: progress; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: var(--t-meta); color: var(--ink-2); }
.form-top p:first-child { font-family: var(--f-display); font-size: 1.25rem; font-weight: 400; color: var(--ink); }
.form-progress { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 28px; padding: 0; font-size: var(--t-meta); color: var(--ink-2); }
.form-progress li { display: inline-flex; align-items: center; gap: 10px; }
.form-progress li span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--field-border); border-radius: 50%; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.form-progress li.current { font-weight: 600; color: var(--ink); }
.form-progress li.current span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#leadform:not(.form-enhanced) .form-progress { display: none; }
#leadform:not(.form-enhanced) .form-top { margin-bottom: 24px; }
#leadform fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#leadform legend { padding: 0; margin-bottom: 20px; font-family: var(--f-display); font-size: var(--t-d3); font-weight: 380; line-height: 1.2; letter-spacing: -0.01em; }
#leadform:not(.form-enhanced) #step-two { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.field label span { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid var(--field-border); border-radius: var(--r-control);
  background: var(--paper); color: var(--ink); font-size: 1.0625rem; line-height: 1.4;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 23px) 52%, calc(100% - 17px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-error { font-size: var(--t-meta); font-weight: 600; line-height: 1.4; color: var(--error); }
.field-error:empty { display: none; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
@media (max-width: 599px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.consent-field { margin: 4px 0 24px; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; font-size: var(--t-small); line-height: 1.5; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.consent-field .field-error { display: block; margin-top: 8px; padding-left: 38px; }
.consent-field .field-error:empty { display: none; }
.step-next { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.reassure { font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2); }
#step-two > .reassure { margin-top: 14px; }
.form-actions { display: flex; align-items: stretch; gap: 12px; }
.form-actions .btn { flex: 1; }
.back-button { min-height: 56px; padding: 0 22px; border: 1px solid var(--field-border); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font-weight: 600; cursor: pointer; transition: border-color .15s var(--ease); }
.back-button:hover { border-color: var(--ink); }
.privacy-link { margin-top: 24px; font-size: var(--t-meta); }
.privacy-link a { color: var(--ink-2); }
.nojs-note { margin-top: 12px; font-size: var(--t-meta); color: var(--ink-2); }
.form-error { display: grid; justify-items: start; gap: 10px; margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--error); background: var(--error-bg); color: var(--ink); font-size: var(--t-small); line-height: 1.5; }
.form-error #error-message { font-weight: 600; }
.form-error .back-button { min-height: 48px; }
/* Phones: the send button takes the full width, so its label stays on one line, and Back sits under it.
   fix10: Continue in step one takes the same full width, so both steps end on the same button shape. */
@media (max-width: 599px) {
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { flex: none; }
  .form-actions .back-button { min-height: 48px; }
  .step-next .btn { width: 100%; }
}
.success-state { display: grid; gap: 16px; padding-block: 8px; }
.success-state h3 { font-size: var(--t-d2); font-weight: 300; line-height: 1.08; letter-spacing: -0.018em; }
.success-state p { color: var(--ink-2); }

/* ---------- Guides (homepage list) ---------- */
.guides { padding-block: var(--section); }
.guide-list { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--ink); }
.guide-card { position: relative; display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: baseline; padding-block: clamp(20px, 2.2vw, 30px); border-bottom: 1px solid var(--line); }
.guide-card h3 { grid-column: 1 / 6; }
.guide-card h3 a { text-decoration: none; }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-card p { grid-column: 6 / 11; color: var(--ink-2); }
.guide-card .guide-time { grid-column: 11 / 13; justify-self: end; font-size: var(--t-meta); white-space: nowrap; }
@media (hover: hover) { .guide-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } }
.guides .sec-head h2 { font-size: var(--t-d2); line-height: 1.08; letter-spacing: -0.018em; }
.all-guides { margin-top: 32px; }
.empty-guides { margin-top: 32px; color: var(--ink-2); }
@media (max-width: 799px) {
  .guide-card { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .guide-card h3, .guide-card p, .guide-card .guide-time { grid-column: 1; justify-self: start; }
}

/* ---------- FAQ ---------- */
.faq { padding-block: var(--section); background: var(--paper-2); }
.faq-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.faq-intro { grid-column: 1 / 5; display: grid; justify-items: start; gap: 18px; container-type: inline-size; }
/* Capped by the column width so "before booking" (6.47em) always fits on one line. */
.faq-intro h2 { font-size: min(var(--t-d2), 15cqi); line-height: 1.08; letter-spacing: -0.018em; }
.faq-intro p:not(.note) { max-width: 24em; color: var(--ink-2); }
.qs { grid-column: 6 / 13; border-top: 1px solid var(--ink); }
.qs details { border-bottom: 1px solid var(--line); }
.qs summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 24px; padding-block: 22px;
  list-style: none; cursor: pointer;
  font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 380; line-height: 1.3; letter-spacing: -0.008em; text-wrap: balance;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after {
  content: ""; width: 20px; height: 20px; transition: transform .3s var(--ease);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.qs details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .qs summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } }
.qs .a { max-width: 40em; padding: 0 44px 26px 0; color: var(--ink-2); }
.qs .a a { color: var(--ink); font-weight: 500; }
@media (min-width: 1000px) {
  .faq-intro { position: sticky; top: calc(var(--header-h) + 40px); }
}
@media (max-width: 999px) { .faq-intro, .qs { grid-column: 1 / -1; } }
@media (max-width: 599px) { .qs .a { padding-right: 0; } }

/* r18: larger guide titles with an arrow after the reading time, and answers that open smoothly where the browser can. */
.guide-card h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem); font-weight: 320; line-height: 1.15; letter-spacing: -0.015em; }
.guide-card .guide-time { display: inline-flex; align-items: center; gap: 10px; }
.guide-card .guide-time::after {
  content: ""; flex: none; width: 20px; height: 12px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform .25s var(--ease);
}
@media (hover: hover) { .guide-card:hover .guide-time::after { transform: translateX(4px); } }
.qs summary { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); }
@supports selector(::details-content) {
  .qs details::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .qs details[open]::details-content { block-size: auto; }
  /* The reduced-motion block further down reaches elements and ::before/::after only, so this one is set here. */
  @media (prefers-reduced-motion: reduce) { .qs details::details-content { transition: none; } }
}

/* ---------- Footer: the name, set across the full width ---------- */
.site-foot { padding-block: clamp(64px, 8vw, 128px) clamp(20px, 2.5vw, 36px); overflow: clip; background: var(--field); color: var(--on-field); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.foot-cols { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 28px; align-items: start; }
.foot-disclaimer { grid-column: 1 / 7; max-width: 40em; font-size: var(--t-small); line-height: 1.6; color: var(--on-field-2); }
.footer-links { grid-column: 8 / 11; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-links a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--on-field-line); text-underline-offset: .32em; }
.footer-links a:hover { text-decoration-color: currentColor; }
.foot-op { grid-column: 11 / 13; font-size: var(--t-meta); color: var(--on-field-2); }
/* The name runs edge to edge of the content width. Its ink, full stop included, is 8.08em wide: 12.38cqi (100 / 8.08)
   where container units work, a vw estimate where not. The negative margin hangs the S by its .057em side bearing.
   The bottom margin keeps the tail of the g inside the footer, which clips its overflow. */
.foot-mark { justify-self: start; margin: clamp(40px, 7vw, 120px) 0 .2em -.057em; font-size: min(10.6vw, 11.8rem); font-size: 12.38cqi; font-weight: 300; line-height: .82; letter-spacing: -0.04em; }
@media (max-width: 899px) {
  .foot-disclaimer, .footer-links, .foot-op { grid-column: 1 / -1; }
  .footer-links { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }
}


/* ---------- Phone bar (homepage, up to 700 px) ---------- */
.pbar { display: none; }
@media (max-width: 700px) {
  .pbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; gap: 6px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line);
    transition: transform .35s var(--ease), visibility .35s;
  }
  .pbar .btn { width: 100%; }
  .pbar p { font-size: var(--t-meta); line-height: 1.4; text-align: center; color: var(--ink-2); }
  .hero-cta-visible .pbar, .review-visible .pbar { transform: translateY(105%); visibility: hidden; }
  .home .site-foot { padding-bottom: calc(64px + 108px); }
  /* A link or question reached with the Tab key scrolls clear of the bar instead of stopping behind it. */
  html:has(.pbar) { scroll-padding-bottom: calc(108px + 16px + env(safe-area-inset-bottom)); }
}

/* ---------- Cookie choice ---------- */
/* Decline and Accept carry the same weight, and the page keeps a single marigold button in view. */
.cookie-bar {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 16px;
  width: min(440px, calc(100% - 32px)); padding: 20px 22px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  font-size: var(--t-meta); line-height: 1.55;
}
.cookie-bar a { font-weight: 600; }
.cookie-bar-actions { display: flex; justify-content: flex-end; gap: 10px; }
.cookie-bar-actions button {
  min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: var(--r-control);
  background: var(--paper); color: var(--ink); font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.cookie-bar-actions button:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 700px) {
  .cookie-bar { left: 0; right: 0; bottom: 0; width: auto; gap: 12px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); border-width: 1px 0 0; font-size: var(--t-meta); line-height: 1.45; }
  .cookie-bar-actions > * { flex: 1; }
  /* While the cookie choice is open it takes the phone bar's place (class set by the consent script). */
  .consent-open .pbar { transform: translateY(105%); visibility: hidden; }
}
/* Phones on their side: a slim strip along the foot of the window, set on the page grid with the words under the copy
   and the two buttons under the photo. A box in the photo's corner covered the faces once the browser bar shortened
   the window. */
@media (min-aspect-ratio: 6/5) and (max-height: 500px) {
  .cookie-bar { left: 0; right: 0; bottom: 0; width: auto; grid-template-columns: var(--cols); gap: 0 var(--gap); align-items: center;
    padding: 12px max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)) calc(12px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; font-size: var(--t-meta); line-height: 1.45; }
  .cookie-bar p { grid-column: 1 / 8; }
  .cookie-bar-actions { grid-column: 8 / -1; }
  .cookie-bar-actions > * { flex: 1; }
}

/* fix10: the small print in the phone bar and the cookie strip uses the 15 px meta size. On the narrowest phones
   (under 375 px upright, under 640 px on their side) 15 px adds a line and the bar covers more of the screen,
   so it stays at 13 px there. */
@media (max-width: 374px) {
  .pbar p, .cookie-bar { font-size: .8125rem; }
}
@media (min-aspect-ratio: 6/5) and (max-height: 500px) and (max-width: 639px) {
  .cookie-bar { font-size: .8125rem; }
}

/* ---------- Colour way switch (preview build only) ---------- */
/* In the flow after the footer, so it never covers the page; ?way=jade or ?way=ink opens any page in that way. */
.way-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); font-size: .8125rem;
}
.way-label { padding: 0 10px 0 8px; color: var(--ink-2); }
.way-switch button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-control); background: transparent; font-weight: 600; cursor: pointer; }
.way-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* On the homepage the phone bar covers the foot of the window, so its clearance moves from the footer to the switch. */
@media (max-width: 700px) {
  .home:has(.way-switch) .site-foot { padding-bottom: 64px; }
  .home .way-switch { padding-bottom: calc(108px + 14px + env(safe-area-inset-bottom)); }
}

/* ---------- Plain pages (privacy, thank-you, checklist sent, 404); guides and articles in blog-v2.css ---------- */
.plain-page { padding-block: clamp(56px, 8vw, 120px) var(--section); }
.page-head { display: grid; gap: 16px; max-width: 44em; margin-bottom: 40px; }
.page-head p { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

/* ---------- Print ---------- */
@media print {
  /* The dark sections print on white paper, so their light text tones turn to ink. */
  :root, [data-way] { --field: #FFFFFF; --on-field: #0E1822; --on-field-2: #4A5560; --on-field-line: #C9CDD1; --mark-on-field: #0E1822; }
  .top, .pbar, .cookie-bar, .way-switch, .skip-link, .how-cta, .hero-cta, .ix-go, .review-panel { display: none !important; }
  .doc-live .doc-ink { clip-path: none !important; }
  body { font-size: 11pt; }
  .review, .site-foot, .how, .check, .faq { background: none !important; color: #000 !important; }
  .doc-wrap { position: static !important; }
  .how-part { min-height: 0 !important; }
  .how-part, .doc, .checklist li, .ix, .qs details, .guide-card, .place, .facts-list li { break-inside: avoid; }
  h2, h3, .note, .kicker, .faq-intro { break-after: avoid; }
}

/* ---------- Motion (r18) ---------- */
/* Runs only under .motion (head script, set when the visitor has no reduced-motion wish) and under .rv-ready and
   .lit-ready (set by app-public-v3.js). Without them every element sits in its final place. */
@keyframes scb-rise { from { transform: translateY(135%); } to { transform: none; } }
@keyframes scb-unclip { from { clip-path: inset(-.25em -.35em -.3em -.15em); } to { clip-path: none; } }
@keyframes scb-rise-far { from { transform: translateY(110px); } to { transform: none; } }
@keyframes scb-zoom { from { transform: scale(1.08); } to { transform: none; } }
@keyframes scb-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes scb-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.motion .hero h1 .hl { animation: scb-unclip .01s linear 1.7s both; }
.motion .hero h1 .hl > span { display: block; animation: scb-rise 1.1s var(--ease-out) .2s both; }
.motion .hero h1 .hl:nth-child(2) > span { animation-delay: .32s; }
.motion .hero h1 .hl:nth-child(3) > span { animation-delay: .44s; }
.motion .hero-act { animation: scb-up 1s var(--ease-out) .75s both; }
.motion .hero-media img { animation: scb-zoom 2.4s var(--ease-out) both; }
@media (min-width: 1000px) {
  .motion .hero-facts .facts-list::before { animation: scb-draw 1.4s var(--ease-out) .8s both; }
  .motion .hero-facts li > * { animation: scb-rise-far 1s var(--ease-out) calc(.95s + var(--i, 0) * .08s) both; }
  .motion .hero-facts li:nth-child(2) { --i: 1; }
  .motion .hero-facts li:nth-child(3) { --i: 2; }
  .motion .hero-facts li:nth-child(4) { --i: 3; }
}
/* Reveals on scroll: the script marks what is already on screen first, so nothing above the fold waits. */
.rv-ready .ledger-row .num-in { transform: translateY(110%); transition: transform 1.1s var(--ease-out); }
.rv-ready .ledger-row + .ledger-row .num-in { transition-delay: .12s; }
.rv-ready .ledger-row.is-in .num-in { transform: none; }
.rv-ready .scale-band { transform: scaleX(0); transition: transform 1.2s var(--ease-out) .2s; }
.rv-ready .scale.is-in .scale-band { transform: none; }
.rv-ready .scale-mark { opacity: 0; transform: translateY(-20px); transition: opacity .6s var(--ease-out) .5s, transform 1.1s var(--ease-out) .5s; }
.rv-ready .scale.is-in .scale-mark { opacity: 1; transform: none; }
.rv-ready .ix .ix-photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-out); }
.rv-ready .ix picture { transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.rv-ready .ix.is-in .ix-photo { clip-path: inset(0); }
.rv-ready .ix.is-in picture { transform: none; }
.rv-ready .checklist li::after { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.rv-ready .checklist li.is-in::after { transform: none; }
/* Section headings rise word by word, line after line (--li). The plain heading stays for screen readers in .vh. */
.wm { display: inline-block; clip-path: inset(-.2em -.15em -.12em -.15em); }
.wi { display: inline-block; transform: translateY(115%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--li, 0) * 90ms); }
.is-in .wi { transform: none; }
.wm-done .wm { clip-path: none; }
@media print {
  /* No transitions in print: a reveal still running when the page is printed would print half way. */
  .statement-text .w { opacity: 1 !important; transition: none !important; }
  .wi, .num-in, .scale-band, .scale-mark, .ix picture, .checklist li::after, .hero h1 .hl > span, .hero-act, .hero-facts li > *, .facts-list::before { transform: none !important; animation: none !important; transition: none !important; opacity: 1 !important; }
  .ix-photo, .hero h1 .hl, .wm { clip-path: none !important; transition: none !important; }
  .hero-media { display: none !important; }
  .hero { display: block !important; min-height: 0 !important; margin-top: 0 !important; background: none !important; color: var(--ink) !important; }
  .hero-stage { min-height: 0 !important; padding-top: 0 !important; }
  .hero-facts { color: var(--ink) !important; }
  .hero-sub, .hero-facts span { color: var(--ink-2) !important; }
  .place { height: auto !important; background: none !important; color: var(--ink) !important; }
  .place-photo { position: static !important; transform: none !important; }
  .place::after { display: none !important; }
  .place figcaption { position: static !important; color: var(--ink-2) !important; }
  .place-name { color: var(--ink) !important; }
  .cost { background: none !important; color: #000 !important; }
}
/* Preview only: the cycling photo (?hero=bikes) keeps the couple's faces in frame. */
[data-hero="bikes"] .hero-media img { object-position: 45% 0%; }
@media (min-aspect-ratio: 6/5) { [data-hero="bikes"] .hero-media img { object-position: 39% 50%; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Focus ring: keep last ---------- */
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px !important; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 2px !important; border-color: var(--ink); }