/* ============================================================
   assets/home-v5.css - the homepage, v5. Linked only by index.html, from the
   HOME-HEAD region scripts/gen-home.mjs writes. Every rule is scoped under .hv
   (the wrapper gen-home.mjs emits inside <main>) or under html.hv-home (the
   class the HOME-HEAD boot script puts on <html> before first paint, on this
   page only), so nothing here can reach another page.

   THE SYSTEM (design/home-v5 634f692, DESIGN-STANDARD sections 1 to 8).
   Tokens live on html.hv-home and on .hv, light and dark, keyed off the site's
   own theme attribute html[data-theme] (the head bootstrap resolves auto,
   explicit light and explicit dark before first paint). The shared header,
   footer, search, mobile menu and sticky bar are RESTYLED here for this page,
   never forked: their markup stays the generators'.

   ORDER CONTRACT (critical CSS): everything above the single marker line
   below (tokens, system components, header, hero, trust band, including their
   media and motion rules, the phone base rules of "chosen with care" and the
   below-the-fold gate 9d) is inlined into the head; everything after it
   loads non-blocking, on a phone only once the hero photograph has painted
   (scripts/gen-home.mjs), and html.hv-css (set by assets/home-v5.js, started once it lands) lifts 9d. No @font-face or @import
   above the marker; every url() is absolute.

   Glass discipline: every backdrop-filter sits behind @supports with a
   -webkit- twin, has a solid fallback under @supports not, and a solid fill
   under prefers-reduced-transparency. Motion: 360ms cubic-bezier(.2,.8,.2,1)
   for UI, 0.45s for a theme change, nothing under prefers-reduced-motion.
   ============================================================ */

/* ---- 0. tokens ---------------------------------------------------------------------- */
html.hv-home, .hv {
  /* THE PORTAL'S NAMES (portal/brand-tokens.css), identical values. Mode-independent
     tokens live here; the dark block below redefines only what changes. The site's
     own names further down are aliases of these, so one edit reaches both. */
  --v5-canvas: #FDFCF8; --v5-d2: #FBF9F4; --v5-d3: #F7F3EB; --v5-d4: #F1ECE1;
  --v5-ink: #1A0D2E; --v5-body: #4A3D5C; --v5-muted: #6E607C;
  --v5-line: rgba(61,26,92,0.15); --v5-line-strong: rgba(61,26,92,0.22);
  --v5-am: #5D2D8A; --v5-am-l: #7B4FA6; --v5-am-ll: #735C8D;
  --v5-gold: #826738; --v5-gold-l: #C9A96E; --v5-gold-d: #705930;
  --v5-focus: #E5BF73;
  --g-tint: rgba(255,255,255,0.82); --g-tint-strong: rgba(255,255,255,0.92); --g-solid: #FFFFFF;
  --g-edge: rgba(255,255,255,0.7);
  --g-hl: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px rgba(255,255,255,0.35);
  --g-shadow: 0 12px 32px -16px rgba(61,26,92,0.28), 0 1px 2px rgba(61,26,92,0.06);
  --g-blur: 24px; --g-sat: 180%; --g-blur-sm: 18px; --g-sat-sm: 140%;
  --g-scrim: rgba(26,13,46,0.42);
  --g-btn: linear-gradient(to bottom, #7A4CB0, #5D2D8A);
  --g-btn-hover: linear-gradient(to bottom, #8658BD, #6A3699);
  --g-btn-press: linear-gradient(to bottom, #6C419F, #52277A);
  --g-btn-ink: #FBF8F2; --g-btn-edge: rgba(255,255,255,0.16);
  --g-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 22px -10px rgba(93,45,138,0.7);
  --g-atmos: radial-gradient(70% 40% at 10% -4%, rgba(176,143,204,0.3), transparent 70%), radial-gradient(60% 36% at 94% 0%, rgba(233,197,144,0.26), transparent 72%), radial-gradient(90% 50% at 50% 106%, rgba(93,45,138,0.1), transparent 74%);
  --g-r-sm: 12px; --g-r-md: 16px; --g-r-lg: 24px; --g-r-card: 26px; --g-r-input: 14px; --g-r-pill: 999px;
  --g-s1: 4px; --g-s2: 8px; --g-s3: 12px; --g-s4: 16px; --g-s5: 24px; --g-s6: 32px; --g-s7: 48px; --g-s8: 64px;
  --g-ease: cubic-bezier(.25,.8,.25,1); --g-dur-fast: .22s; --g-dur-base: .3s; --g-dur-slow: .45s;
  --g-shine: #B8914F; --g-shine-2: #E0C07F; --g-shine-dur: 1700ms;
  --brd-control: #6B4B93; --color-error: #874343;

  --bg: var(--v5-canvas); --bg2: #F5F1EA; --bgs: var(--v5-canvas); --card: #FFFFFF; --ph: #ECE6EF;
  --ink: var(--v5-ink); --ink2: var(--v5-body); --sub: var(--v5-body); --mute: var(--v5-muted);
  --gold: var(--v5-gold); --accent: var(--v5-am);
  --line: var(--v5-line); --line2: rgba(61,26,92,0.08); --linestrong: var(--v5-line-strong);
  --tint: rgba(201,169,110,0.14);
  --btn: var(--g-btn); --btnink: var(--g-btn-ink);
  /* the gold gradient is NOT the primary fill any more: it stays only for the
     documented exception, buttons on the deep amethyst panels (.hc, .hv-amx, .hv-gold, forms) */
  --gl: linear-gradient(180deg, #DDC392 0%, #C9A96E 100%); --glink: #1A0D2E;
  --glass: var(--g-tint); --glassedge: var(--g-edge);
  --glassstrong: var(--g-tint-strong); --glasssolid: var(--g-solid);
  --fbbg: rgba(255,255,255,0.72); --fbedge: rgba(93,45,138,0.22); --fbhov: rgba(255,255,255,0.95); --fbsolid: #FFFFFF;
  --shsoft: rgba(61,26,92,0.06); --sh: rgba(61,26,92,0.28); --starbg: #E6DDEE;
  --prog: #5D2D8A; --logo: #3D1A5C;
  --navhov: rgba(93,45,138,0.08);
  --amx: linear-gradient(165deg, #3D1A5C 0%, #2A1242 55%, #190A29 100%);
  --elev: 0 1px 2px rgba(26,13,46,0.05), 0 8px 18px -6px rgba(26,13,46,0.12), 0 22px 44px -18px rgba(26,13,46,0.2);
  --focus: var(--v5-focus);
  --serif: 'Cormorant Garamond', 'EvSerifM', Georgia, serif;
  --sans: 'DM Sans', 'EvSansM', Arial, sans-serif;
  --ease: var(--g-ease); --dur: var(--g-dur-base); --theme-dur: var(--g-dur-slow);
  --r-card: var(--g-r-card); --r-hc: var(--r-card); --r-input: var(--g-r-input); --r-pill: var(--g-r-pill);
  --sec: 80px; --gut: 20px;

  /* THE TYPE SCALE (job site-type-scale-1013, founder 13 Oct 2026: "use font sizing very
     smartly and intelligently"). ONE small, deliberate scale, the SAME values as the
     portal's app/brand-tokens.css (portal-type-scale-1013), side by side in
     verification/site-type-scale-1013b/SCALE-PARITY.md. THIS BLOCK IS THE ONLY PLACE A
     FONT SIZE IS WRITTEN AS A NUMBER: every other rule says var(--fs-*), and
     scripts/check-type-scale.mjs fails on a new literal anywhere else.
     rem against a 16px root. Floors: nothing under --fs-label (12px), nothing above
     --fs-display, one display per page; stat and price numerals use --fs-title at most.
       --fs-display  the ONE hero headline per page               36 to 52px
       --fs-title    section titles (h2), stat and price numerals 26 to 34px
       --fs-heading  card and sub-section titles (h3)             18 to 21px
       --fs-lead     the one intro sentence under display/title   16 to 18px
       --fs-body     body                                         16px
       --fs-legal    long-form article and legal reading body     17px
       --fs-small    secondary text, card meta, helper text       14px
       --fs-caption  footer links, timestamps, chips, badges      13px
       --fs-label    eyebrows, footer column headings (uppercase) 12px
       --fs-fine     the footer's legal / copyright line          12px
       --fs-button   primary and secondary buttons                15px
       --fs-input    every input, select and textarea             16px (iOS zooms below) */
  --fs-display: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  --fs-title: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);
  --fs-heading: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-body: 1rem;
  --fs-legal: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-fine: 0.75rem;
  --fs-button: 0.9375rem;
  --fs-input: 1rem;
  --lh-display: 1.08; --lh-title: 1.15; --lh-heading: 1.25; --lh-lead: 1.55;
  --lh-body: 1.6; --lh-small: 1.5; --lh-caption: 1.45; --lh-label: 1.4;
  --ls-display: -0.01em; --ls-label: 0.1em; --fw-label: 500; --fw-button: 500;
  --measure: 65ch;
  /* assets/design-tokens.css is byte-identical forever (scripts/check-asset-cache-keys.mjs
     RULE C) and still defines the old fluid names on :root; these aliases win over that
     :root on every page (html.hv-home and html.tv5 are more specific), so every rule that
     reads an old name is sized by this scale. */
  --fs-micro: var(--fs-caption); --fs-card-title: var(--fs-heading); --fs-card-body: var(--fs-small);
  --fs-h2: var(--fs-title); --fs-page-hero: var(--fs-display); --fs-hero: var(--fs-display);
}
html.hv-home[data-theme="dark"], html[data-theme="dark"] .hv {
  --v5-canvas: #0A0711; --v5-d2: #120C1E; --v5-d3: #191127; --v5-d4: #1F1730;
  /* --bgs is the BROWSER-CHROME colour only: scripts/gen-theme-v5.mjs ties it to the theme-color meta pair, and the 13
     agency posts (protected, bytes frozen) carry #150A22 in that meta. The page itself is painted with --v5-canvas. */
  --bgs: #150A22;
  --v5-ink: #FAF7F1; --v5-body: #BFB5CE; --v5-muted: #A398B3;
  --v5-line: rgba(226,201,154,0.13); --v5-line-strong: rgba(226,201,154,0.22);
  --v5-am: #3D1A5C; --v5-am-l: #7B4FA6; --v5-am-ll: #B08FCC;
  --v5-gold: #C9A96E; --v5-gold-l: #E2C99A; --v5-gold-d: #A8854A;
  --g-tint: rgba(29,14,46,0.66); --g-tint-strong: rgba(14,9,24,0.96); --g-solid: #1D0E2E;
  --g-edge: rgba(226,201,154,0.18);
  --g-hl: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,255,255,0.03);
  --g-shadow: 0 12px 32px -14px rgba(4,2,8,0.6);
  --g-scrim: rgba(13,7,22,0.62);
  --g-atmos: radial-gradient(70% 40% at 10% -4%, rgba(123,79,166,0.34), transparent 70%), radial-gradient(60% 36% at 94% 0%, rgba(201,169,110,0.08), transparent 72%), radial-gradient(90% 50% at 50% 106%, rgba(123,79,166,0.2), transparent 74%);
  --g-shine: #F0C978; --g-shine-2: #FFFFFF;
  --brd-control: #7E5CA8; --color-error: #C97A7A;

  --bg: transparent; --bg2: transparent;
  --card: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%); --ph: #1A1226;
  /* dark gold is the portal's #C9A96E (fills, rules, eyebrows); the pale #E2C99A
     stays as --accent and --v5-gold-l, the text/link tone where a small glyph on glass needs the lift */
  --accent: var(--v5-gold-l);
  --line2: rgba(226,201,154,0.08);
  --tint: rgba(226,201,154,0.10);
  --fbbg: rgba(255,255,255,0.05); --fbedge: rgba(226,201,154,0.26); --fbhov: rgba(255,255,255,0.09); --fbsolid: #241335;
  --shsoft: rgba(4,2,8,0.45); --sh: rgba(4,2,8,0.6); --starbg: #342A44;
  --prog: #E2C99A; --logo: #FFFFFF;
  --navhov: rgba(176,143,204,0.16);
  --amx: radial-gradient(1000px 560px at 85% 0%, rgba(201,169,110,0.08), rgba(201,169,110,0) 65%), linear-gradient(165deg, #2A1242 0%, #1C0B2D 60%, #0D0717 100%);
  --elev: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px -12px rgba(4,2,8,0.5), 0 30px 60px -24px rgba(4,2,8,0.6);
}
@media (min-width: 768px) {
  html.hv-home, .hv { --gut: 40px; }
  html.hv-home, .hv { --elev: 0 1px 2px rgba(26,13,46,0.05), 0 12px 28px -8px rgba(26,13,46,0.12), 0 36px 72px -28px rgba(26,13,46,0.22); }
  html.hv-home[data-theme="dark"], html[data-theme="dark"] .hv { --elev: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px -12px rgba(4,2,8,0.5), 0 40px 80px -30px rgba(4,2,8,0.6); }
}
@media (min-width: 1024px) {
  html.hv-home, .hv { --gut: 72px; --sec: 140px; --g-r-card: 30px; }
}

/* The page's own names, kept so every existing section reads the tokens. */
.hv {
  --hv-bg: var(--bg);
  --hv-bg-alt: var(--bg2);
  --hv-card: var(--card);
  --hv-ink: var(--ink);
  --hv-body: var(--ink2);
  --hv-muted: var(--sub);
  --hv-line: var(--line);
  --hv-line-strong: var(--linestrong);
  --hv-accent: var(--accent);
  --hv-plum: #3D1A5C;
  --hv-on-photo: #FFFFFF;
  --hv-gold-on-dark: #E2C99A;
  --hv-diamond: #C9A96E;
  --hv-dark-ink: #1A0D2E;
  --hv-scrim: 16,9,26;
  --hv-serif: var(--serif);
  --hv-sans: var(--sans);
  --hv-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --hv-clear: var(--evara-header-clear, 128px);
  --hv-gut: var(--gut);
  --hv-radius: var(--r-card);
}

/* ---- 1. the page: one canvas, the theme change ----------------------------------------------
   Light: cream. Dark: the purple frosted canvas #0A0711 (--v5-canvas; founder
   ruling 12 Oct 2026: never black, never the retired #150A22). Both themes paint
   the portal's own atmosphere (--g-atmos: a violet and a gold light) over that
   canvas. It is a layer of .hv itself, so it scrolls with the page (never
   viewport-fixed) and fades in over a theme change. */
html.hv-home, html.hv-home body { background-color: var(--v5-canvas); }
/* An in-page anchor glides to its target; under reduced motion it jumps
   (review round 1 B10). The other sheets' html rule keeps auto, so this one
   names the scope class. */
@media (prefers-reduced-motion: no-preference) {
  html.hv-home { scroll-behavior: smooth; }
}
.hv {
  display: block;
  position: relative;
  isolation: isolate;
  /* Clearance for a fixed header is PADDING on the wrapper, never a margin on
     the hero (a top margin collapses through <main> and <body>: CLS). The
     homepage's own floating header sits over the hero, so it needs none. */
  padding-top: var(--hv-clear);
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--v5-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-tap-highlight-color: transparent;
  interpolate-size: allow-keywords;
}
html.hv-home .hv { padding-top: 0; }
.hv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--g-atmos);
}
@media (prefers-reduced-motion: no-preference) {
  html.hv-theming .hv::before { animation: hv-atmos-in var(--theme-dur) var(--ease) both; }
}
@keyframes hv-atmos-in { from { opacity: 0; } to { opacity: 1; } }
/* A theme change eases over 0.45s. assets/home-v5.js sets html.hv-theming for
   the length of the change only, so no other motion is touched. */
@media (prefers-reduced-motion: no-preference) {
  html.hv-theming :not(img):not(picture):not(video),
  html.hv-theming :not(img):not(picture):not(video)::before,
  html.hv-theming :not(img):not(picture):not(video)::after {
    transition-property: background-color, color, border-color, fill, stroke, box-shadow, opacity, -webkit-text-fill-color !important;
    transition-duration: var(--theme-dur) !important;
    transition-timing-function: var(--ease) !important;
    transition-delay: 0s !important;
  }
}
/* The shared circle-reveal overlay paints near-black; this page eases instead. */
html.hv-home .theme-transition { display: none !important; }

.hv *, .hv *::before, .hv *::after { box-sizing: border-box; }
.hv [hidden] { display: none !important; }
/* Lining numerals everywhere; tabular in prices and tables. */
.hv, .hv *, html.hv-home #site-header *, html.hv-home footer * { font-variant-numeric: lining-nums; }
.hv [data-price], .hv table, .hv table *, .hv .hv-tnum, html.hv-home #site-header [data-price] { font-variant-numeric: lining-nums tabular-nums; }
.hv ::selection { background: rgba(201,169,110,0.35); }

/* The page's inherited element rules (section padding, p and li sizes, img
   height:auto, the fixed <nav>) are neutralised here, once, so every component
   below starts from its own values. */
.hv section { padding: 0 !important; margin: 0; position: relative; }
.hv h1, .hv h2, .hv h3, .hv p, .hv ul, .hv ol, .hv li, .hv figure, .hv blockquote { margin: 0; padding: 0; }
.hv ul, .hv ol { list-style: none; }
.hv h1, .hv h2, .hv h3 { text-wrap: balance; font-kerning: normal; }
.hv p, .hv blockquote { text-wrap: pretty; }
.hv picture { display: block; }
.hv .hv-slide picture, .hv .hv-checks-photo picture, .hv .hv-close-photo picture, .hv .hv-screen picture { position: absolute; inset: 0; }
.hv .hv-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#main .hv a:not([class]) { color: var(--hv-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hv .hv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hv .hv-br-wide { display: none; }

/* Focus: a 2px gold ring with a 3px offset on every interactive element. Over
   photographs and inside deep amethyst the ring is the light gold. */
.hv :focus-visible,
html.hv-home #site-header :focus-visible,
html.hv-home #mob :focus-visible,
html.hv-home footer :focus-visible,
html.hv-home .tr-sticky :focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}
.hv .hv-hero, .hv .hv-band, .hv .hv-checks, .hv .hv-close, .hv .hv-meet-office,
.hv .hc, .hv .hv-amx, .hv .hv-onphoto, html.hv-home footer { --focus: var(--v5-focus); }
/* A disclosure summary is a full-width row with no surface of its own: its
   ring takes the control radius, so no focused surface shows a sharp corner
   (review round 1 M5). A summary drawn as a pill keeps its own corner. */
.hv details > summary:not(.fb):not(.fbd):focus-visible,
html.hv-home #mob details > summary:focus-visible,
html.hv-home footer details > summary:focus-visible { border-radius: var(--r-input); }
/* the pointer on every control: a select opens, a field's label focuses or
   toggles its field (review round 2 m1) */
.hv label[for], .hv select { cursor: pointer; }

/* ---- 2. type ------------------------------------------------------------------------------
   Display: Cormorant Garamond 400, left aligned, the second phrase in gold
   italic <em>. Eyebrows: 12px, 700, 2px tracking, uppercase, gold. .sh: the
   serif card title or large figure. Minimum text 13px. */
.hv .hv-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: -0.026em;
  color: var(--hv-ink);
  text-align: left;
}
.hv .hv-h2 em, .hv .hv-h1 em, .hv .hv-display em { font-style: italic; font-weight: inherit; }
.hv .hv-h2 em { color: var(--gold); }
.hv .hv-h2--light em, .hv .hv-display em { color: #E8D2A6; }
.hv .hv-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--hv-body); }
.hv .hv-sub { font-size: var(--fs-body); line-height: 1.5; color: var(--hv-muted); }
/* The type scale's floor rules (site-type-scale-1013): a heading no component sizes still
   reads a token instead of the browser's 2em/1.5em/1.17em, at zero specificity (:where), so
   every component rule wins over them. A subheading inside a disclosure's answer is body
   size (bold, its own weight). Every field is exactly 16px, an inline style included,
   because a field under 16px makes iOS zoom the page. */
:where(html.hv-home, .hv) :where(h1) { font-size: var(--fs-display); }
:where(html.hv-home, .hv) :where(h2) { font-size: var(--fs-title); }
:where(html.hv-home, .hv) :where(h3) { font-size: var(--fs-heading); }
:where(html.hv-home, .hv) :where(h4, h5, h6) { font-size: var(--fs-body); }
.hv details :is(h3, h4):not(summary *) { font-size: var(--fs-body); }
html.hv-home :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=range], [type=color], [type=file], [type=image]), select, textarea) { font-size: var(--fs-input) !important; }
.hv .hv-rule { display: block; width: 56px; height: 2px; border-radius: var(--r-pill); background: var(--hv-accent); }
/* the content column: 1200px between the gutters (20 phone, 40 tablet, 72 desktop) */
.hv .hv-in { --hv-max: 1200px; width: 100%; max-width: calc(var(--hv-max) + 2 * var(--hv-gut)); margin-inline: auto; padding-inline: var(--hv-gut); }
.hv .hv-in--wide { --hv-max: 1296px; }
.hv .hv-head-row { display: flex; flex-direction: column; gap: 12px; }
.hv .ey {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold);
}
.hv .ey::before { content: none; display: none; }
/* 14px on phones, the text floor (R9); the design's 12px from 768px */
@media (min-width: 768px) { .hv .ey { font-size: var(--fs-label); } }
.hv .hc .ey, .hv .hv-amx .ey, .hv .hv-onphoto .ey { color: var(--hv-gold-on-dark); }
.hv .sh { font-family: var(--serif); font-weight: 500; line-height: 1.05; }

/* Heading shine. A gold light crosses a heading once (1.7s) when
   assets/home-v5.js adds .lit as it comes into view; the hero headline
   (.hv-shine-loop, added after the load event, never before: LCP) catches it
   again every 9s. At rest the text is its own colour. Only headings whose
   children are text, <em> and <br> take part, so a heading that holds a
   control keeps its own colours. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hv :is(h1, h2, h3):not(:has(:not(em, br))),
  .hv :is(h1, h2, h3):not(:has(:not(em, br))) em,
  .hv .sh, .hv .ey {
    background-image: linear-gradient(105deg, currentColor 0%, currentColor 40%, var(--g-shine) 50%, currentColor 60%, currentColor 100%);
    background-size: 250% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hv :is(h1, h2, h3):not(:has(:not(em, br))) em {
    background-image: linear-gradient(105deg, currentColor 0%, currentColor 40%, var(--g-shine-2) 50%, currentColor 60%, currentColor 100%);
  }
  /* headings on photographs and deep panels always take the dark theme's light */
  .hv .hv-h1, .hv .hv-h2--light, .hv .hv-display { --g-shine: #F0C978; --g-shine-2: #FFFFFF; }
}
@keyframes hv-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* ONE SWEEP, NOT AN INFINITE LOOP (site-seo-perf-1014, 14 Oct 2026). This used to
   be a 9 s infinite animation whose keyframes swept for 26 percent of the cycle
   and held still for the rest. background-position is a main-thread property,
   so Chromium re-resolved style and repainted the headline on every frame of
   the hold too: measured at 4x CPU, 290 ms of every second, for as long as the
   page was open (verification/site-seo-perf-1014/DIAGNOSIS.md D2). The sweep is
   now exactly its old 2340 ms (26 percent of 9 s) with the same curve and the
   same 1.4 s lead, played once; the components script restarts it every 9 s
   while the headline is on screen (assets/home-v5.js, shineLoop), so the light
   passes at the same moments as before and the page is idle in between. */
@keyframes hv-shine-loop { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hv h2.lit, .hv h2.lit em, .hv h3.lit, .hv h3.lit em, .hv .sh.lit, .hv .ey.lit { animation: hv-shine var(--g-shine-dur) cubic-bezier(.45,0,.2,1) both; }
  .hv .hv-h1.hv-shine-loop em { animation: hv-shine-loop 2340ms cubic-bezier(.4,0,.2,1) 1.4s both; }
  .hv .hv-h1.hv-shine-loop:not(.hv-rise) { animation: hv-shine-loop 2340ms cubic-bezier(.4,0,.2,1) 1.4s both; }
}
@media (forced-colors: active) {
  .hv h1, .hv h2, .hv h3, .hv .sh, .hv .ey, .hv h1 em, .hv h2 em, .hv h3 em { background-image: none !important; -webkit-text-fill-color: currentColor !important; }
}

/* ---- 3. buttons ---------------------------------------------------------------------------
   The portal's three buttons (glass.css .g-btn): 48px (44px for --sm), 16px/600,
   .01em, pill, padding 0 --g-s5, a --g-dur-fast press and hover response.
   .hv-btn--primary (and --onphoto, --light, --ink, --wa): the deep-amethyst
   gradient, ivory ink, a 1px light edge and the amethyst shadow, in light AND dark,
   on photographs and on the deep .hc/.hv-amx panels alike (it stays legible on
   them: the top of the gradient is 3:1 against the panel, so there is no gold
   fallback).
   .fb / .hv-btn--outline: the glass secondary (tint, 1px line, blur-sm, ink text)
   with a trailing arrow on .fb (drawn here; never add an arrow element).
   .fbd: the same glass on dark sections and photographs, ivory ink.
   .fb--icon (and a .fb slider button): a 44px round icon button, no arrow.
   Local --ctl-* names: the ink, tint, solid twin, edge and shadow every secondary
   control and chip reads. Light surfaces read the theme's tokens; the always-deep
   panels (.hc, .hv-amx) and .fbd read the same recipe in ivory, so a control never
   puts dark ink on a dark panel (or the reverse) in either theme. */
.hv {
  --ctl-ink: var(--v5-ink);
  --ctl-fill: var(--g-tint);
  --ctl-solid: var(--g-solid);
  --ctl-edge: var(--v5-line);
  --ctl-edge-hover: var(--v5-line-strong);
  --ctl-shadow: var(--g-hl), var(--g-shadow);
}
.hv .hc, .hv .hv-amx, .hv .fbd {
  --ctl-ink: var(--g-btn-ink);
  --ctl-fill: color-mix(in srgb, var(--g-btn-ink) 8%, transparent);
  --ctl-solid: color-mix(in srgb, var(--g-btn-ink) 12%, rgb(var(--hv-scrim)));
  --ctl-edge: color-mix(in srgb, var(--v5-gold-l) 36%, transparent);
  --ctl-edge-hover: color-mix(in srgb, var(--v5-gold-l) 60%, transparent);
  --ctl-shadow: inset 0 1px 0 color-mix(in srgb, var(--g-btn-ink) 12%, transparent);
}
.hv .hv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-s2);
  min-height: 48px;
  height: var(--hv-btn-h, 48px);
  padding: 0 var(--g-s5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
.hv .hv-btn:hover { transform: translateY(-1px); }
.hv .hv-btn:active { transform: scale(0.985); }
.hv .hv-btn svg { flex: none; }
.hv .hv-btn:disabled, .hv .hv-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; box-shadow: none; }
.hv .hv-btn--primary, .hv .hv-btn--ink, .hv .hv-btn--wa, .hv .hv-btn--onphoto, .hv .hv-btn--light {
  background: var(--g-btn);
  color: var(--g-btn-ink);
  border-color: var(--g-btn-edge);
  box-shadow: var(--g-btn-shadow);
}
.hv .hv-btn--primary:hover, .hv .hv-btn--ink:hover, .hv .hv-btn--wa:hover, .hv .hv-btn--onphoto:hover, .hv .hv-btn--light:hover { background: var(--g-btn-hover); }
.hv .hv-btn--primary:active, .hv .hv-btn--ink:active, .hv .hv-btn--wa:active, .hv .hv-btn--onphoto:active, .hv .hv-btn--light:active { background: var(--g-btn-press); }
.hv .hv-btn--sm { --hv-btn-h: 44px; min-height: 44px; padding: 0 var(--g-s4); font-size: var(--fs-button); }
.hv .hv-btn--full { display: flex; width: 100%; }

/* the glass secondary: .fb, .fbd and the outline button share one recipe */
.hv .fb, .hv .fbd {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-s2);
  align-self: flex-start;
  min-height: 48px;
  padding: 0 var(--g-s5);
  border-radius: var(--r-pill);
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
.hv .fb, .hv .fbd, .hv .hv-btn--outline {
  border: 1px solid var(--ctl-edge);
  background: var(--ctl-solid);
  color: var(--ctl-ink);
  box-shadow: var(--ctl-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .fb, .hv .fbd, .hv .hv-btn--outline { background: var(--ctl-fill); -webkit-backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat-sm)); backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat-sm)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .fb, .hv .fbd, .hv .hv-btn--outline { background: var(--ctl-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .hv .fb, .hv .fbd, .hv .hv-btn--outline { background: var(--ctl-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hv .fb:hover, .hv .fbd:hover, .hv .hv-btn--outline:hover { transform: translateY(-1px); border-color: var(--ctl-edge-hover); }
.hv .fb:active, .hv .fbd:active { transform: scale(0.985); }
.hv .fb::after, .hv .fbd::after {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--g-dur-fast) var(--g-ease);
}
.hv .fb:hover::after, .hv .fbd:hover::after { translate: 4px 0; }
.hv .fb--icon, .hv .fb.hv-sl-prev, .hv .fb.hv-sl-next, .hv .fbd--icon { width: 44px; height: 44px; min-height: 44px; padding: 0; }
.hv .fb--icon::after, .hv .fb.hv-sl-prev::after, .hv .fb.hv-sl-next::after, .hv .fbd--icon::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  .hv .hv-btn:active, .hv .fb:active, .hv .fbd:active { transform: none; }
}

/* Choice chips: the portal's .g-chip, pill, 14px/600, a glass tint and a 1px line, no
   blur of their own (a row of them would spend the frosted budget); selected is the
   amethyst primary fill. 44px, not the portal's 40px: this site's tap-target floor. */
.hv .hv-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--g-s4);
  border: 1px solid var(--ctl-edge);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ctl-ink);
  background: var(--ctl-fill);
  box-shadow: var(--ctl-shadow);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease), transform var(--g-dur-fast) var(--g-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hv .hv-opt:not([aria-pressed="true"]):not(.is-on):hover { border-color: var(--ctl-edge-hover); }
}
.hv .hv-opt:active { transform: scale(0.985); }
.hv .hv-opt[aria-pressed="true"], .hv .hv-opt.is-on {
  color: var(--g-btn-ink);
  background: var(--g-btn);
  border-color: var(--g-btn-edge);
}
@media (prefers-reduced-motion: reduce) {
  .hv .hv-opt:active { transform: none; }
}

/* ---- 4. materials ---------------------------------------------------------------------------
   The portal's one glass recipe: a tint over the page (--g-tint), a 1px hairline
   (--v5-line), the specular top edge (--g-hl), a soft shadow (--g-shadow), blur
   (--g-blur) and saturation (--g-sat); the solid tint (--g-solid) where
   backdrop-filter is missing or transparency is reduced.
   .hv-glassm: that glass; light on light, amethyst in dark.
   .hv-glass: the same glass tinted deep neutral, for anything on a photograph.
   .hv-frost: the light glass for a small control on a photograph (the small blur).
   .hc: the frosted deep amethyst card, radius var(--r-card) (26 phone, 30 from 1024).
   .hv-amx: a deep amethyst panel surface (no blur). The two deep panels are
   site-only surfaces: they carry the portal's edge, highlight and shadow tokens;
   in the light theme the highlight and edge are the dark theme's values (--pn-hl),
   because the light tokens are white and would glare on amethyst. */
.hv .hv-glassm {
  background: var(--g-solid);
  color: var(--v5-ink);
  box-shadow: inset 0 0 0 1px var(--v5-line), var(--g-hl), var(--g-shadow);
}
.hv .hv-glass { background: rgba(var(--hv-scrim),0.62); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.14); color: var(--hv-on-photo); }
.hv .hv-frost { background: rgba(253,252,248,0.94); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.7); color: var(--hv-dark-ink); }
.hv .hc, .hv .hv-amx, html.hv-home .jc-card--concierge { --pn-hl: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,255,255,0.03), inset 0 0 0 1px rgba(226,201,154,0.18); }
html[data-theme="dark"] .hv .hc, html[data-theme="dark"] .hv .hv-amx, html[data-theme="dark"].hv-home .jc-card--concierge { --pn-hl: var(--g-hl), inset 0 0 0 1px var(--g-edge); }
.hv .hc {
  position: relative;
  border-radius: var(--r-card);
  color: #FFFFFF;
  background: linear-gradient(158deg, #321254 0%, #240D3E 50%, #160826 100%);
  box-shadow: var(--pn-hl), var(--g-shadow);
}
html[data-theme="dark"] .hv .hc {
  background: linear-gradient(158deg, #2E1448 0%, #1C0C2F 55%, #120820 100%);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-glassm { background: var(--g-tint); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
  .hv .hv-glass { background: rgba(var(--hv-scrim),0.46); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
  .hv .hv-frost { background: rgba(253,252,248,0.78); -webkit-backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat-sm)); backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat-sm)); }
  .hv .hc {
    background: radial-gradient(640px 380px at 92% 0%, rgba(201,169,110,0.18) 0%, rgba(201,169,110,0) 62%), linear-gradient(158deg, rgba(50,18,84,0.92) 0%, rgba(36,13,62,0.93) 50%, rgba(22,8,38,0.95) 100%);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
    backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  }
  html[data-theme="dark"] .hv .hc {
    background: radial-gradient(640px 380px at 92% 0%, rgba(201,169,110,0.12) 0%, rgba(201,169,110,0) 62%), linear-gradient(158deg, rgba(62,28,94,0.72) 0%, rgba(40,17,64,0.74) 50%, rgba(22,9,36,0.82) 100%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-glassm { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv .hv-glass { background: rgba(var(--hv-scrim),0.62); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv .hv-frost { background: rgba(253,252,248,0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv .hc { background: linear-gradient(158deg, #321254 0%, #240D3E 50%, #160826 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .hv .hc { background: linear-gradient(158deg, #2E1448 0%, #1C0C2F 55%, #120820 100%); }
}
@media (prefers-reduced-transparency: reduce) {
  .hv .hv-glassm { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv .hv-glass { background: rgba(var(--hv-scrim),0.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv .hv-frost { background: rgba(253,252,248,0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv .hc { background: linear-gradient(158deg, #321254 0%, #240D3E 50%, #160826 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .hv .hc { background: linear-gradient(158deg, #2E1448 0%, #1C0C2F 55%, #120820 100%); }
}
.hv .hv-amx { background: var(--amx); color: #FFFFFF; box-shadow: var(--pn-hl), var(--g-shadow); }
/* In a repeated grid or rail the same look is painted without blur. */
.hv .hv-tint-dark { background: rgba(var(--hv-scrim),0.74); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); color: var(--hv-on-photo); }
.hv .hv-tint-light { background: rgba(253,252,248,0.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7); color: var(--hv-dark-ink); }
/* A 1px hairline on every photograph, so bright edges never dissolve. */
.hv .hv-ph, .hv .hv-photo { outline: 1px solid rgba(31,16,48,0.07); outline-offset: -1px; }
html[data-theme="dark"] .hv .hv-ph, html[data-theme="dark"] .hv .hv-photo { outline-color: rgba(255,255,255,0.07); }
/* Content wider than the screen scrolls in its own box with an edge fade. */
.hv .fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }

/* Card spotlight: a soft light follows the pointer across a .sp card
   (desktop pointers only; assets/home-v5.js feeds --mx and --my). */
:where(.hv .sp) { position: relative; }
.hv .sp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--hv-ease);
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(93,45,138,0.07), rgba(93,45,138,0) 45%);
}
html[data-theme="dark"] .hv .sp::after { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(226,201,154,0.10), rgba(226,201,154,0) 45%); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hv .sp:hover::after { opacity: 1; }
}

/* ---- 5. scroll reveal and the slider --------------------------------------------------------
   .up rises into place once. Only elements still below the fold when
   assets/home-v5.js starts are held back (.up-wait), so nothing above the
   fold ever hides and nothing moves layout (translate, not margin). */
@media (prefers-reduced-motion: no-preference) {
  .hv .up.up-wait { opacity: 0; translate: 0 28px; }
  .hv .up.up-in { opacity: 1; translate: none; transition: opacity 900ms var(--hv-ease) var(--up-d, 0ms), translate 900ms var(--hv-ease) var(--up-d, 0ms); }
  /* a revealed pill button or plan card keeps its 360ms hover and press response */
  .hv .fb.up.up-in, .hv .fbd.up.up-in, .hv .hv-plan.up.up-in { transition: opacity 900ms var(--hv-ease) var(--up-d, 0ms), translate 900ms var(--hv-ease) var(--up-d, 0ms), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
}

/* The slider: <div class="hv-slider" data-slider aria-label="..."> holding
   <div class="hv-track" role="list"> of .hv-slide-i (role="listitem"),
   button.hv-sl-prev / button.hv-sl-next and <div class="hv-sl-dots">.
   Swipe with scroll-snap; the buttons and dots are frosted and sit on the
   photograph (base) or, with .hv-slider--rail, in the section (the buttons
   take .fb, the dots sit under the track). Every box is sized before the
   script runs, and the controls reserve their place, so nothing shifts. */
.hv .hv-slider { position: relative; --sl-gap: 0px; --sl-pad: 0px; }
.hv .hv-track {
  display: flex;
  gap: var(--sl-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sl-pad);
  padding-inline: var(--sl-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.hv .hv-track::-webkit-scrollbar { display: none; }
/* a scroller inside a clipped frame: the ring is drawn 3px INSIDE its edge
   (2px ring, 3px clear), the standard's ring turned inward, since outside it
   would be clipped */
.hv .hv-track:focus-visible { outline-offset: -5px !important; border-radius: var(--r-card); }
.hv .hv-slide-i { flex: none; scroll-snap-align: start; }
.hv .hv-slider:not(.is-ready) .hv-sl-prev,
.hv .hv-slider:not(.is-ready) .hv-sl-next { visibility: hidden; }
.hv .hv-sl-prev, .hv .hv-sl-next {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  color: #FFFFFF;
  cursor: pointer;
  translate: 0 -50%;
  background: rgba(16,9,26,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.14);
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-sl-prev, .hv .hv-sl-next { background: rgba(16,9,26,0.5); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-sl-prev, .hv .hv-sl-next { background: rgba(16,9,26,0.62); }
}
@media (prefers-reduced-transparency: reduce) {
  .hv .hv-sl-prev, .hv .hv-sl-next { background: rgba(16,9,26,0.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hv .hv-sl-prev { left: 12px; }
.hv .hv-sl-next { right: 12px; }
.hv .hv-sl-prev:active, .hv .hv-sl-next:active { transform: scale(0.94); }
/* disabled (the first or last page): the disc stays, as drawn, and only the
   arrow dims; a whole-button fade left a ghost on the photograph. The pointer
   stays too (review round 2 m1): the disc is still the rail's control */
.hv .hv-sl-prev[aria-disabled="true"] svg, .hv .hv-sl-next[aria-disabled="true"] svg { opacity: 0.4; }
.hv .hv-sl-prev svg, .hv .hv-sl-next svg { width: 18px; height: 18px; }
.hv .hv-sl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 3;
  display: flex;
  justify-content: center;
  min-height: 44px;
  pointer-events: none;
}
.hv .hv-sl-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  margin: 0 -7px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
/* the bar grows by transform, never by width: 14px idle, 34px current */
.hv .hv-sl-dot > span { display: block; width: 34px; height: 3px; border-radius: var(--r-pill); flex: none; background: rgba(255,255,255,0.5); transform: scaleX(0.4118); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.hv .hv-sl-dot:first-child { margin-left: 0; }
.hv .hv-sl-dot:last-child { margin-right: 0; }
.hv .hv-sl-dot[aria-current="true"] > span { transform: none; background: #FFFFFF; }
.hv .hv-slider--rail .hv-sl-prev, .hv .hv-slider--rail .hv-sl-next { position: static; translate: none; }
.hv .hv-slider--rail .hv-sl-dots { position: static; margin-top: 8px; }
.hv .hv-slider--rail .hv-sl-dot > span { background: var(--linestrong); }
.hv .hv-slider--rail .hv-sl-dot[aria-current="true"] > span { background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .hv .hv-sl-dot > span, .hv .hv-sl-prev, .hv .hv-sl-next { transition: none; }
}

/* ---- 6. the shared site header, restyled for this page ---------------------------------------
   ONE frosted capsule, the portal's GlassCapsule (portal/glass.css .g-capsule, .g-capsule-wrap
   and .g-icon-btn; portal/brand-bar.tsx). #nav is the capsule and holds everything, on every
   width and every page: the back arrow, the brand slot with the stacked v1.4 lockup, the ten
   items (from 1440px), the sun and moon, the site search, Sign in, the one primary action
   ("Get started") and the menu button. Every rule starts at html.hv-home here and
   scripts/gen-theme-v5.mjs re-scopes it to html.tv5, so every page wears this header (the
   tv5-only announcement line is scripts/theme-v5/30-chrome.css).

   THE RECIPE, portal values and tokens only: pill radius, min-height 56px, padding 6px 16px,
   a 1px var(--v5-line) edge, var(--g-hl) and var(--g-shadow), a var(--g-solid) fill where
   backdrop-filter is missing or transparency is reduced, otherwise var(--g-tint) under
   blur(var(--g-blur)) saturate(var(--g-sat)). It is fixed at top max(10px, safe area) with a
   16px side inset, centred, 1120px at most. With its edge it is 58px tall (--hdr-h). Nothing
   inside it blurs again (a backdrop filter inside a backdrop filter reads nothing): the round
   controls and Sign in are a plain tint, the primary action is var(--g-btn). Scrolling only
   deepens its shadow.

   WRITTEN DEVIATIONS from the portal capsule:
   1. From 1024px it is min(100% - 48px, 1296px), not 1120px: the ten items, Sign in, the
      primary action and the three controls need 1250px inside it (DM Sans advance widths:
      the items are 640px at 13.5px/500, plus 6px each side).
   2. Under 360px the side inset is 10px and the padding 12px, so the lockup (28px there) and
      the three controls still fit 320px.
   3. The back arrow is hidden under 420px, as before: the arrow, the lockup and three 44px
      controls do not fit one row there; the menu and the browser carry the way back.
   4. The search toggle lives in the utility bar in the shared markup (frozen on the 13 agency
      posts), so .ub-right is laid over the capsule with the capsule's own box and the toggle
      is placed from the fixed widths below.
   5. No current-item mark: the header's bytes are identical sitewide (scripts/gen-header.mjs). */
html.hv-home {
  --hdr-top: max(10px, env(safe-area-inset-top, 0px));
  --hdr-x: var(--g-s4);
  --hdr-l: max(var(--hdr-x), env(safe-area-inset-left, 0px));
  --hdr-r: max(var(--hdr-x), env(safe-area-inset-right, 0px));
  --hdr-max: 1120px;
  --hdr-pad: var(--g-s4);
  --hdr-gap: var(--g-s2);
  --hdr-ctl: 44px;
  --hdr-h: 58px;
  --hdr-search-w: var(--hdr-ctl);
  --hdr-search-r: calc(var(--hdr-ctl) + var(--hdr-gap));
  --hdr-signin-w: 76px;
  --hdr-cta-w: 112px;
  --hv-clear: calc(var(--hdr-top) + var(--hdr-h) + var(--g-s2));
  scroll-padding-top: var(--hv-clear);
}
/* the scroll-progress line, gold */
html.hv-home #sp {
  height: 2px;
  z-index: 2000;
  pointer-events: none;
  background: linear-gradient(90deg, #5D2D8A, #C9A96E 60%, #EFDDB4);
  background-size: 100% 100%;
}
/* the capsule. !important on the fill and the padding: design-tokens.css paints a square
   cream strip behind a scrolled nav in light ([data-theme="light"] nav.s, !important) and
   mobile-fixes.css pads every nav (!important) */
html.hv-home #site-header #nav,
html.hv-home #site-header #nav.s,
html.hv-home #site-header #utility-bar.ub-dismissed ~ #nav {
  position: fixed;
  top: var(--hdr-top);
  left: var(--hdr-l);
  right: var(--hdr-r);
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-s3);
  width: auto;
  max-width: var(--hdr-max);
  min-height: 56px;
  margin: 0 auto;
  padding: 6px var(--hdr-pad) !important;
  border: 1px solid var(--v5-line);
  border-radius: var(--r-pill);
  color: var(--v5-ink);
  background: var(--g-solid) !important;
  box-shadow: var(--g-hl), var(--g-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: box-shadow var(--g-dur-base) var(--g-ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home #site-header #nav,
  html.hv-home #site-header #nav.s,
  html.hv-home #site-header #utility-bar.ub-dismissed ~ #nav {
    background: var(--g-tint) !important;
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
    backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home #site-header #nav,
  html.hv-home #site-header #nav.s,
  html.hv-home #site-header #utility-bar.ub-dismissed ~ #nav { background: var(--g-solid) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html.hv-home #site-header #nav,
  html.hv-home #site-header #nav.s,
  html.hv-home #site-header #utility-bar.ub-dismissed ~ #nav { background: var(--g-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* once the page scrolls the capsule gains shadow, nothing else changes */
html.hv-home #site-header #nav.s,
html.hv-home #site-header #utility-bar.ub-dismissed ~ #nav.s { box-shadow: var(--g-hl), var(--g-shadow), var(--g-shadow); }
html.hv-home #site-header #nav.s::before { content: none; display: none; }
html.hv-home #nav .nav-lead { display: flex; align-items: center; gap: var(--hdr-gap); flex: none; }
/* the round controls inside the capsule: the portal's .g-icon-btn. A plain tint over the
   capsule (the capsule is the one blur), a 1px line, 44px, lifting 1px on hover and
   pressing to .96. The search toggle is named through its utility bar so these rules
   outrank the DESIGN-STANDARD transition-property rule at the foot of this sheet. */
html.hv-home #nav .hdr-back,
html.hv-home #nav .theme-btn,
html.hv-home #nav .hbg,
html.hv-home #site-header #utility-bar .ss-toggle {
  box-sizing: border-box;
  width: var(--hdr-ctl);
  height: var(--hdr-ctl);
  min-width: var(--hdr-ctl);
  min-height: var(--hdr-ctl);
  max-width: var(--hdr-ctl);
  max-height: var(--hdr-ctl);
  flex: 0 0 var(--hdr-ctl);
  margin: 0;
  padding: 0;
  border: 1px solid var(--v5-line);
  border-radius: var(--r-pill);
  background: var(--g-tint);
  box-shadow: none;
  color: var(--v5-ink);
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  transition: transform var(--g-dur-fast) var(--g-ease), background-color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
@media (hover: hover) and (pointer: fine) {
  html.hv-home #nav .hdr-back:hover,
  html.hv-home #nav .theme-btn:hover,
  html.hv-home #nav .hbg:hover,
  html.hv-home #site-header #utility-bar .ss-toggle:hover { transform: translateY(-1px); border-color: var(--v5-line-strong); color: var(--v5-ink); }
}
html.hv-home #nav .hdr-back:active,
html.hv-home #nav .theme-btn:active,
html.hv-home #nav .hbg:active,
html.hv-home #site-header #utility-bar .ss-toggle:active { transform: scale(0.96); }
/* the back control (every page but the homepage, scripts/lib-parents.mjs): the arrow only;
   its accessible name says where it goes ("Back to Matchmaking"), so the word stays for
   assistive technology */
html.hv-home #nav .hdr-back { position: relative; display: inline-grid; place-items: center; }
html.hv-home #nav .hdr-back svg { width: 18px; height: 18px; flex: none; }
html.hv-home #nav .hdr-back .hb-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the brand slot (the portal's .g-capsule-brand): the Evara v1.4 artwork (assets/brand/,
   written only by scripts/lib-logo.mjs), the stacked 05 Compact mark, never the
   horizontal one, 30px tall at every width (28px under 360px). The slot is 44px high with
   8px each side, and the capsule pads 6px and 1px of edge, so the mark has 14px of clear
   space above and below it and never fills the capsule. The file is shown as is (height
   set, width from the native aspect; never masked, recoloured or clipped). */
html.hv-home #nav .logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--g-s2);
  border-radius: var(--r-pill);
  background: none;
  box-shadow: none;
  overflow: visible;
  text-decoration: none;
}
html.hv-home #nav .logo img {
  flex: none;
  width: auto !important;
  height: 30px !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  margin: 0;
  filter: none !important;
}
/* below 420px the back arrow, the mark and the three controls do not fit one
   row; the menu button and the browser carry the way back there */
@media (max-width: 419.98px) {
  html.hv-home #nav .hdr-back { display: none !important; }
}
@media (max-width: 359.98px) {
  html.hv-home { --hdr-x: 10px; --hdr-pad: var(--g-s3); --hdr-gap: var(--g-s1); }
  html.hv-home #nav .logo img { height: 28px !important; }
}
/* the items (1440px and up, all ten; the menu button carries them below that), ink on
   the capsule */
html.hv-home #nav .nl { display: none !important; }
/* each link is a 44px target; the 36px pill is its padding box (the 4px
   transparent border above and below is hit area only) */
html.hv-home #nav .nl a {
  display: flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: solid transparent;
  border-width: 4px 0;
  background-clip: padding-box;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--fs-caption) !important;
  font-weight: 500;
  letter-spacing: 0 !important;
  text-transform: none;
  white-space: nowrap;
  color: var(--v5-ink);
  transition: background-color var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease);
}
html.hv-home #nav .nl a::after { content: none; display: none; }
html.hv-home #nav .nl a:hover, html.hv-home #nav .dd:hover > a { background: var(--navhov) padding-box; color: var(--v5-ink); }
html.hv-home #nav .nl li { display: flex; }
/* the menus: a panel under the capsule at the card radius, rows of exactly 44px as pills,
   8px in from its edge, so the end rows' corners are concentric with the panel's (30px less
   8px is the row's 22px). It hangs 8px under the capsule, not under its row. It sits inside
   the capsule's own backdrop root, where a blur would read nothing, so it takes the portal's
   solid surface (var(--g-solid)) and no filter of its own: the page never ghosts through it. */
html.hv-home #nav .ddm {
  top: calc(100% + (var(--hdr-h) - var(--hdr-ctl)) / 2 + var(--g-s2));
  left: 0;
  transform: none;
  min-width: 210px;
  padding: var(--g-s2);
  border: 1px solid var(--v5-line);
  border-radius: var(--r-card);
  background: var(--g-solid);
  box-shadow: var(--g-hl), var(--g-shadow);
}
html.hv-home #nav .ddm::before { top: -16px; height: 16px; }
html.hv-home #nav .ddm a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--v5-ink);
}
html.hv-home #nav .ddm a:hover { padding-left: 14px; background: var(--navhov); color: var(--accent); }
/* the right-hand group: sun and moon, [search], Sign in, join, menu */
html.hv-home #nav .nav-actions { display: flex; align-items: center; gap: var(--hdr-gap); flex: none; }
html.hv-home #nav .nav-actions > .theme-toggle { order: 1; margin-right: calc(var(--hdr-search-w) + var(--hdr-gap)) !important; }
html.hv-home #nav .nav-actions > .hdr-signin { order: 2; }
html.hv-home #nav .nav-actions > .hdr-cta { order: 3; }
html.hv-home #nav .nav-actions > .hbg { order: 4; }
/* Sign in (the portal's secondary pill, a plain tint inside the capsule) and the one
   primary action (the portal's primary pill, the 44px small variant, amethyst with ivory
   ink in light and in dark). Fixed widths: the search toggle is placed from them. */
html.hv-home #nav .hdr-signin,
html.hv-home #nav .hdr-cta {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--hdr-ctl);
  min-height: var(--hdr-ctl);
  padding: 0 var(--g-s3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
html.hv-home #nav .hdr-signin { width: var(--hdr-signin-w); border-color: var(--v5-line); background: var(--g-tint); color: var(--v5-ink); }
html.hv-home #nav .hdr-cta {
  width: var(--hdr-cta-w);
  border-color: var(--g-btn-edge);
  background: var(--g-btn);
  color: var(--g-btn-ink);
  box-shadow: var(--g-btn-shadow);
}
@media (hover: hover) and (pointer: fine) {
  html.hv-home #nav .hdr-signin:hover { transform: translateY(-1px); border-color: var(--v5-line-strong); color: var(--v5-ink); }
  html.hv-home #nav .hdr-cta:hover { background: var(--g-btn-hover); color: var(--g-btn-ink); transform: translateY(-1px); }
}
html.hv-home #nav .hdr-signin:active { transform: scale(0.985); }
html.hv-home #nav .hdr-cta:active { background: var(--g-btn-press); transform: scale(0.985); }
/* the page's focus rule drops every box-shadow on a focused control; the primary keeps its own */
html.hv-home #nav .hdr-cta:focus-visible { box-shadow: var(--g-btn-shadow) !important; }
/* the sun and moon: one round button, the one that switches away from the
   theme on screen (the shared toggle's third, auto, stays in the menu) */
html.hv-home #nav .theme-toggle {
  display: flex !important;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: none;
}
html.hv-home #nav .theme-btn { display: none; }
html.hv-home[data-theme="dark"] #nav .theme-btn[data-theme-set="light"],
html.hv-home[data-theme="light"] #nav .theme-btn[data-theme-set="dark"] { display: inline-grid; place-items: center; }
html.hv-home #nav .theme-btn svg { width: 18px; height: 18px; min-width: 18px; min-height: 18px; stroke-width: 1.8; }
/* the menu button */
html.hv-home #nav .hbg {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
html.hv-home #nav .hbg span { width: 18px; height: 1.8px; border-radius: 0; background: var(--v5-ink); }
/* the site search, carried out of the utility bar into the capsule. The bar's row
   (.ub-right) is laid over the capsule with the capsule's own box (same inset, same
   maximum, same height, same edge and padding), so the toggle can be placed from the
   capsule's right edge by the widths of what stands to its right, whatever the width of
   the screen. The row takes no clicks; only the search does. The announcement line is not
   part of this header (scripts/theme-v5/30-chrome.css shows it, in the flow, from 1024px). */
html.hv-home #site-header #utility-bar,
html.hv-home #site-header #utility-bar.ub-dismissed {
  position: static;
  display: block;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  transition: none;
}
html.hv-home #utility-bar .ub-inner { display: block; width: auto; max-width: none; padding: 0; gap: 0; }
html.hv-home #utility-bar .ub-left,
html.hv-home #utility-bar .ub-dismiss { display: none !important; }
html.hv-home #utility-bar .ub-right {
  position: fixed;
  top: var(--hdr-top);
  left: var(--hdr-l);
  right: var(--hdr-r);
  z-index: 1002;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  width: auto;
  max-width: var(--hdr-max);
  height: var(--hdr-h);
  margin: 0 auto;
  padding: 0 calc(var(--hdr-pad) + 1px + var(--hdr-search-r)) 0 0;
  pointer-events: none;
}
html.hv-home #utility-bar .site-search { pointer-events: auto; }
html.hv-home #site-header #utility-bar .ss-toggle { display: grid; place-items: center; }
html.hv-home #site-header .ss-toggle svg { width: 17px; height: 17px; flex: none; }
/* the search panel: a glass sheet under the capsule (the strong tint, blur 24 and 180) */
html.hv-home #site-header .ss-panel {
  position: fixed;
  top: calc(var(--hdr-top) + var(--hdr-h) + var(--g-s2));
  left: var(--hdr-l);
  right: var(--hdr-r);
  width: auto;
  max-width: var(--hdr-max);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--v5-line);
  border-radius: var(--r-card);
  background: var(--g-solid);
  box-shadow: var(--g-hl), var(--g-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home #site-header .ss-panel { background: var(--g-tint-strong); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home #site-header .ss-panel { background: var(--g-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  html.hv-home #site-header .ss-panel { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.hv-home #site-header .ss-input {
  min-height: 52px;
  padding: 0 var(--g-s4);
  border: 0;
  border-bottom: 1px solid var(--v5-line);
  background: transparent;
  color: var(--v5-ink);
  font-size: var(--fs-input);
}
html.hv-home #site-header .ss-input::placeholder { color: var(--v5-muted); }
html.hv-home #site-header .ss-result { padding: 12px var(--g-s4); border-bottom: 1px solid var(--line2); }
html.hv-home #site-header .ss-result:hover, html.hv-home #site-header .ss-result.ss-selected { background: var(--navhov); }
html.hv-home #site-header .ss-result-title { font-size: var(--fs-small); color: var(--v5-ink); }
html.hv-home #site-header .ss-result-desc, html.hv-home #site-header .ss-empty { font-size: var(--fs-caption); color: var(--sub); }
/* the phone and tablet menu: a glass sheet under the capsule (the strong tint, blur 24 and
   180, the card radius, the portal's shadow), 8px below it, right-aligned with it, with the
   page dimmed round it by the portal's scrim */
html.hv-home #mob.mm {
  inset: auto;
  top: calc(var(--hdr-top) + var(--hdr-h) + var(--g-s2));
  left: var(--hdr-l);
  right: var(--hdr-r);
  max-height: calc(100dvh - var(--hdr-top) - var(--hdr-h) - var(--g-s2) - var(--g-s4));
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--g-s3);
  padding: var(--g-s3) var(--g-s4) var(--g-s4);
  border: 1px solid var(--v5-line);
  border-radius: var(--r-card);
  background-color: var(--g-solid);
  background-image: none;
  box-shadow: var(--g-hl), var(--g-shadow), 0 0 0 100vmax var(--g-scrim);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home #mob.mm { background-color: var(--g-tint-strong); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home #mob.mm { background-color: var(--g-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  html.hv-home #mob.mm { background-color: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the link list is a <nav>, so the bare legacy `nav` rules of the homepage's older
   sheets reach it: their z-index 1000 (which, on a flex item of the sheet, applies
   even unpositioned and lifted the list over the close button), their padding
   (!important in mobile-fixes.css) and their vw gap from 1024px, which indented
   and spaced the list off the actions above it. Its box is therefore set in full. */
html.hv-home #mob .mm-links { z-index: auto; position: static; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; max-width: none; padding: 0 44px 0 0 !important; }
/* the theme control with its third choice, auto, which the capsule does not carry */
html.hv-home #mob .mm-theme { display: flex; gap: 6px; margin: 0 auto 0 0; padding: 0; border: 0; background: none; transform: none; }
html.hv-home #mob .mm-theme .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid var(--v5-line);
  border-radius: var(--r-pill);
  background: var(--g-tint);
  box-shadow: none;
  color: var(--v5-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), background-color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
html.hv-home #mob .mm-theme .theme-btn[aria-pressed="true"] { background: var(--navhov); border-color: var(--v5-line-strong); }
html.hv-home #mob .mm-theme .theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html.hv-home #mob a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 0 6px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--v5-ink);
}
html.hv-home #mob .mm-links a { border-bottom: 1px solid var(--line2); }
html.hv-home #mob .mm-links a:last-child { border-bottom: 0; }
/* the close control is the capsule's round control (the portal's .g-icon-btn) and sits
   where its circle is concentric with the sheet's corner */
html.hv-home #mob .mmx {
  position: absolute;
  top: calc(var(--r-card) - 22px);
  right: calc(var(--r-card) - 22px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--v5-line);
  border-radius: var(--r-pill);
  background: var(--g-tint);
  color: var(--v5-ink);
  font-size: var(--fs-heading);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), background-color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
@media (hover: hover) and (pointer: fine) {
  html.hv-home #mob .mmx:hover,
  html.hv-home #mob .mm-theme .theme-btn:hover { transform: translateY(-1px); border-color: var(--v5-line-strong); color: var(--v5-ink); }
}
html.hv-home #mob .mmx:active,
html.hv-home #mob .mm-theme .theme-btn:active { transform: scale(0.96); }
html.hv-home #mob .mm-sep { flex: none; width: 100%; max-width: none; height: 1px; margin: 0; background: var(--v5-line); }
html.hv-home #mob .mm-search { width: 100% !important; max-width: none !important; }
/* the sheet scrolls inside itself when a group is open on a short screen */
html.hv-home #mob.mm { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* Sign In and the one primary action head the sheet on a phone, where they leave the
   capsule: the portal's standard 48px pills, the secondary a line and the primary amethyst */
html.hv-home #mob .mm-acts { display: flex; gap: var(--g-s2); width: 100%; padding-right: 48px; }
html.hv-home #mob .mm-acts a {
  flex: 1 1 0;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 var(--g-s4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
html.hv-home #mob .mm-acts .mm-signin { border-color: var(--v5-line-strong); color: var(--v5-ink); }
html.hv-home #mob .mm-acts .mm-cta {
  border-color: var(--g-btn-edge);
  background: var(--g-btn);
  color: var(--g-btn-ink);
  box-shadow: var(--g-btn-shadow);
}
@media (hover: hover) and (pointer: fine) {
  html.hv-home #mob .mm-acts .mm-signin:hover { transform: translateY(-1px); border-color: var(--v5-line-strong); }
  html.hv-home #mob .mm-acts .mm-cta:hover { background: var(--g-btn-hover); transform: translateY(-1px); }
}
html.hv-home #mob .mm-acts a:active { transform: scale(0.985); }
html.hv-home #mob .mm-acts .mm-cta:active { background: var(--g-btn-press); }
html.hv-home #mob .mm-acts .mm-cta:focus-visible { box-shadow: var(--g-btn-shadow) !important; }
/* About, Services and Communities: the row's menus as groups (native details) */
html.hv-home #mob .mm-grp { width: 100%; border-bottom: 1px solid var(--line2); }
html.hv-home #mob .mm-grp > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 6px;
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--v5-ink);
}
html.hv-home #mob .mm-grp > summary::-webkit-details-marker { display: none; }
html.hv-home #mob .mm-grp > summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--dur) var(--ease);
}
html.hv-home #mob .mm-grp[open] > summary::after { rotate: 180deg; }
html.hv-home #mob .mm-sub { display: flex; flex-direction: column; padding: 0 0 8px 14px; }
html.hv-home #mob .mm-links .mm-sub a { min-height: 44px; border-bottom: 0; font-size: var(--fs-body); font-weight: 400; color: var(--sub); }
/* the menu's search: the portal's .g-search (a 52px pill with an icon slot). The sheet
   is itself frosted, so the pill takes the glass tint only: no blur inside a blur. The
   icon is drawn on the wrapper, so the generator's markup stays as it is. */
html.hv-home #mob .mm-search { position: relative; }
html.hv-home #mob .mm-search::before {
  content: "";
  position: absolute;
  left: var(--g-s4);
  top: 26px;
  z-index: 1;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
  pointer-events: none;
  background-color: var(--v5-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.hv-home #mob .ss-input-mob {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--g-s4) 0 calc(var(--g-s4) + 20px + var(--g-s3));
  border: 1px solid var(--v5-line);
  border-radius: var(--r-pill);
  background: var(--g-tint);
  color: var(--v5-ink);
  font-family: var(--sans);
  font-size: var(--fs-input);
  transition: border-color var(--g-dur-fast) var(--g-ease);
}
html.hv-home #mob .ss-input-mob:focus-visible { border-color: var(--v5-focus); }
html.hv-home #mob .ss-input-mob::placeholder { color: var(--v5-muted); }
@media (prefers-reduced-transparency: reduce) {
  html.hv-home #mob .ss-input-mob { background: var(--g-solid); }
}
@media (prefers-reduced-motion: reduce) {
  html.hv-home #mob .ss-input-mob { transition: none; }
}
html.hv-home #mob .ss-results-mob { width: 100%; }
html.hv-home #mob .ss-results-mob .ss-result { display: block; min-height: 44px; padding: 10px 6px; border-bottom: 1px solid var(--line2); font-weight: 400; }
html.hv-home #mob .ss-result-title { font-size: var(--fs-body); color: var(--ink); }
html.hv-home #mob .ss-result-desc, html.hv-home #mob .ss-empty { font-size: var(--fs-small); color: var(--sub); }
@media (max-width: 767px) {
  html.hv-home #site-header .ss-result-desc, html.hv-home #site-header .ss-empty { font-size: var(--fs-small); }
}
@media (min-width: 480px) {
  html.hv-home #mob.mm { left: auto; right: max(var(--hdr-r), calc((100% - var(--hdr-max)) / 2)); width: 366px; }
}

/* the WhatsApp button: the primary pill's recipe on a 52px circle (amethyst gradient, ivory ink,
   1px edge, the specular inset), never green; hover, press as the primary button */
html.hv-home .evara-wa-fab { box-sizing: border-box; width: 52px; height: 52px; border: 1px solid var(--g-btn-edge); background: var(--g-btn); color: var(--g-btn-ink); box-shadow: var(--g-btn-shadow); }
@media (hover: hover) and (pointer: fine) {
  html.hv-home .evara-wa-fab:hover { background: var(--g-btn-hover); transform: translateY(-1px); }
}
html.hv-home .evara-wa-fab:active { background: var(--g-btn-press); transform: scale(0.985); }
/* The dock's height sets the WhatsApp button's offset (SELL-STYLES reads
   --tr-bar-h), and that button is in the first viewport, so the token sits above
   the fold marker; the dock itself (block 21) is styled below it. */
@media (max-width: 767px) {
  html.hv-home { --tr-bar-h: 76px; }
}

@media (min-width: 768px) {
  html.hv-home { --hdr-search-r: calc(var(--hdr-signin-w) + var(--hdr-cta-w) + var(--hdr-ctl) + 3 * var(--hdr-gap)); }
  html.hv-home #nav .hdr-signin, html.hv-home #nav .hdr-cta { display: inline-flex; }
  html.hv-home #site-header .ss-panel { position: absolute; top: calc(100% + (var(--hdr-h) - var(--hdr-ctl)) / 2 + var(--g-s2)); left: auto; right: 0; width: 360px; max-width: none; margin: 0; }
  html.hv-home #mob .mm-acts { display: none; }
}
/* from 1024px the capsule is min(100% - 48px, 1296px): written deviation 1 above */
@media (min-width: 1024px) {
  html.hv-home { --hdr-x: var(--g-s5); --hdr-max: 1296px; }
}
@media (min-width: 1440px) {
  html.hv-home { --hdr-search-r: calc(var(--hdr-signin-w) + var(--hdr-cta-w) + 2 * var(--hdr-gap)); }
  /* the ten items leave 12px of slack in the capsule, so the least gap between its three
     groups is 8px here */
  html.hv-home #site-header #nav,
  html.hv-home #site-header #nav.s,
  html.hv-home #site-header #utility-bar.ub-dismissed ~ #nav { gap: var(--g-s2); }
  html.hv-home #nav .nl {
    display: flex !important;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    overflow: visible;
  }
  html.hv-home #nav .hbg { display: none !important; }
}
/* reduced motion: the portal's rule, nothing animates and nothing lifts or presses */
@media (prefers-reduced-motion: reduce) {
  html.hv-home #site-header #nav,
  html.hv-home #site-header #nav.s,
  html.hv-home #site-header #utility-bar.ub-dismissed ~ #nav,
  html.hv-home #nav .nl a,
  html.hv-home #nav .hdr-back,
  html.hv-home #nav .theme-btn,
  html.hv-home #nav .hbg,
  html.hv-home #nav .hdr-signin,
  html.hv-home #nav .hdr-cta,
  html.hv-home #site-header #utility-bar .ss-toggle,
  html.hv-home #mob .mmx,
  html.hv-home #mob .mm-theme .theme-btn,
  html.hv-home #mob .mm-acts a { transition: none; }
  html.hv-home #nav .hdr-back:hover,
  html.hv-home #nav .hdr-back:active,
  html.hv-home #nav .theme-btn:hover,
  html.hv-home #nav .theme-btn:active,
  html.hv-home #nav .hbg:hover,
  html.hv-home #nav .hbg:active,
  html.hv-home #nav .hdr-signin:hover,
  html.hv-home #nav .hdr-signin:active,
  html.hv-home #nav .hdr-cta:hover,
  html.hv-home #nav .hdr-cta:active,
  html.hv-home #site-header #utility-bar .ss-toggle:hover,
  html.hv-home #site-header #utility-bar .ss-toggle:active,
  html.hv-home #mob .mmx:hover,
  html.hv-home #mob .mmx:active,
  html.hv-home #mob .mm-theme .theme-btn:hover,
  html.hv-home #mob .mm-theme .theme-btn:active,
  html.hv-home #mob .mm-acts a:hover,
  html.hv-home #mob .mm-acts a:active { transform: none; }
}
/* The header holds still across a page change (@view-transition, the shared
   theme): each control is captured on its own, so the capsule is the same picture
   before and after and only the page under it changes. Each control and not the
   capsule: the capsule is the one blurred surface, so it stays in the page's own
   picture and keeps blurring the page behind it through the change. */
@media (prefers-reduced-motion: no-preference) {
  html.hv-home #nav .hdr-back { view-transition-name: hv-back; }
  html.hv-home #nav .logo { view-transition-name: hv-logo; }
  html.hv-home #nav .nl { view-transition-name: hv-links; }
  html.hv-home #nav .hdr-signin { view-transition-name: hv-signin; }
  html.hv-home #nav .hdr-cta { view-transition-name: hv-cta; }
  html.hv-home #nav .theme-btn[data-theme-set="light"] { view-transition-name: hv-sun; }
  html.hv-home #nav .theme-btn[data-theme-set="dark"] { view-transition-name: hv-moon; }
  html.hv-home #nav .hbg { view-transition-name: hv-menu; }
  html.hv-home #site-header .ss-toggle { view-transition-name: hv-search; }
}
/* The theme change (assets/site-header.js setTheme): one cross-fade of the whole
   page over the theme's 0.45s. The press only starts it, so its frame paints at
   once; the page restyles once, under the fade, with no transition on every
   element. The controls drop their names for it, so the frosted capsule is captured
   with the page behind it and fades with it, and the page stays live under the
   fade (a tap reaches the page, whose layout the theme never moves). */
@media (prefers-reduced-motion: no-preference) {
  html.hv-home.hv-theme-vt #nav .hdr-back,
  html.hv-home.hv-theme-vt #nav .logo,
  html.hv-home.hv-theme-vt #nav .nl,
  html.hv-home.hv-theme-vt #nav .hdr-signin,
  html.hv-home.hv-theme-vt #nav .hdr-cta,
  html.hv-home.hv-theme-vt #nav .theme-btn[data-theme-set],
  html.hv-home.hv-theme-vt #nav .hbg,
  html.hv-home.hv-theme-vt #site-header .ss-toggle { view-transition-name: none; }
  html.hv-home.hv-theme-vt::view-transition { pointer-events: none; }
  html.hv-home.hv-theme-vt::view-transition-old(root),
  html.hv-home.hv-theme-vt::view-transition-new(root) { animation-duration: var(--theme-dur); animation-timing-function: var(--ease); }
}
/* The join chooser: dialog#join-chooser (scripts/join-content.mjs, opened by
   "Get started" through assets/site-header.js) and, on /join, the same two cards
   in the page. One frosted panel; the two paths are the homepage's two plan
   cards, Membership the light card and Matchmaking the deep amethyst one with
   gold, each wholly one tap (its primary action is stretched over it) with one
   quiet second link. The panel fits one screen at 1440x708 and 390x844 and
   scrolls inside itself below that. These rules restyle the older chooser
   rules of assets/site-header.css, which the homepage and the core still carry,
   so each one names every property those set. The close control sits where
   its circle is concentric with the panel's corner. */
/* g-rise: the portal's modal and toast entrance, opacity 0 to 1 while the box rises 12px
   and settles from 0.985 (--g-dur-base, --g-ease). The join chooser panel, the off-hours
   dialog panel (scripts/theme-v5/50-forms.css) and the call-back dialog use it. */
@keyframes g-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
}
/* The chooser keeps its wide two-column layout (760px, the two plan cards side by side
   from 640px); every other dialog is the portal's 440px modal. Its panel is the portal
   Modal's glass: --g-tint-strong, blur, 1px hairline, specular edge, soft shadow, card
   radius, a plum scrim (never black) with a 6px blur. */
html.hv-home .jc-dialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--v5-ink);
  font-family: var(--sans);
  overflow: visible;
  animation: none;
}
html.hv-home .jc-dialog::backdrop { background: var(--g-scrim, rgba(26,13,46,0.5)); animation: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home .jc-dialog::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home .jc-dialog::backdrop { background: linear-gradient(var(--g-scrim, rgba(26,13,46,0.5)), var(--g-scrim, rgba(26,13,46,0.5))), linear-gradient(var(--g-scrim, rgba(26,13,46,0.5)), var(--g-scrim, rgba(26,13,46,0.5))), var(--g-scrim, rgba(26,13,46,0.5)); }
}
@media (prefers-reduced-transparency: reduce) {
  html.hv-home .jc-dialog::backdrop { background: linear-gradient(var(--g-scrim, rgba(26,13,46,0.5)), var(--g-scrim, rgba(26,13,46,0.5))), linear-gradient(var(--g-scrim, rgba(26,13,46,0.5)), var(--g-scrim, rgba(26,13,46,0.5))), var(--g-scrim, rgba(26,13,46,0.5)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.hv-home .jc-dialog:not([open]) { pointer-events: none; }
html.hv-home .jc-panel {
  position: relative;
  box-sizing: border-box;
  width: auto;
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: var(--g-s5) var(--g-s3) var(--g-s2);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--v5-line);
  border-radius: var(--r-card);
  background: var(--g-solid);
  background-image: none;
  color: var(--v5-ink);
  font-family: var(--sans);
  box-shadow: var(--g-hl), var(--g-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home .jc-panel { background: var(--g-tint-strong); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.hv-home .jc-panel { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html.hv-home .jc-panel { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.hv-home .jc-dialog[open] .jc-panel { animation: g-rise var(--g-dur-base) var(--g-ease) both; }
}
html.hv-home .jc-panel::before { content: none; }
/* the close control: the portal's 44px circle icon button; a tint only (the panel behind it is
   already blurred), a hairline, the page ink */
html.hv-home .jc-close {
  position: absolute;
  top: calc(var(--r-card) - 22px);
  right: calc(var(--r-card) - 22px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--v5-line);
  border-radius: 50%;
  background: var(--g-tint);
  color: var(--v5-ink);
  opacity: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), background-color var(--g-dur-fast) var(--g-ease);
}
html.hv-home .jc-close .evara-icon { width: 18px; height: 18px; stroke-width: 1.6; }
html.hv-home .jc-close:active { transform: scale(0.96); }
html.hv-home .jc-head { max-width: none; margin: 0 0 12px; padding: 0 40px; text-align: center; }
html.hv-home .jc-title { margin: 0; font-family: var(--serif); font-size: var(--fs-title); font-weight: 400; line-height: var(--lh-title); letter-spacing: -0.3px; color: var(--ink); text-wrap: balance; }
html.hv-home .jc-head-sub { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--sub); text-wrap: balance; }
html.hv-home .jc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
html.hv-home .jc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: var(--g-s4) var(--g-s4) var(--g-s1);
  border: 0;
  border-radius: calc(var(--r-card) - 6px);
  background: var(--g-tint);
  color: var(--v5-ink);
  text-align: left;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--v5-line), var(--g-hl);
  transition: transform var(--g-dur-base) var(--g-ease), box-shadow var(--g-dur-base) var(--g-ease);
}
html.hv-home .jc-card--concierge { --focus: #E2C99A; background: var(--amx); color: #FFFFFF; box-shadow: var(--pn-hl); }
html.hv-home .jc-card .jc-ico { position: absolute; top: 16px; right: 16px; display: flex; width: 26px; height: 26px; border-radius: 0; background: none; color: var(--accent); transform: none; transition: none; }
html.hv-home .jc-card .jc-ico .evara-icon { width: 26px; height: 26px; stroke-width: 1.5; }
html.hv-home .jc-card--concierge .jc-ico { color: #F2D48F; }
html.hv-home .jc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: auto; padding-right: 36px; }
html.hv-home .jc-name { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 500; line-height: var(--lh-heading); letter-spacing: -0.3px; color: inherit; text-wrap: balance; }
html.hv-home .jc-line { margin-top: 4px; font-size: var(--fs-body); line-height: 1.4; color: var(--ink2); text-wrap: pretty; }
html.hv-home .jc-card .jc-detail { font-size: var(--fs-small); font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--sub); text-wrap: pretty; }
html.hv-home .jc-card--concierge .jc-line { color: rgba(255,255,255,0.88); }
html.hv-home .jc-card--concierge .jc-detail { color: rgba(255,255,255,0.72); }
html.hv-home .jc-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: auto; margin: 12px 0 16px; padding-top: 12px; border-top: 1px solid var(--line2); }
html.hv-home .jc-card--concierge .jc-offer { border-top-color: rgba(255,255,255,0.14); }
html.hv-home .jc-card .jc-price { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: inherit; text-wrap: pretty; }
html.hv-home .jc-card .jc-price [data-price] { color: var(--gold); }
html.hv-home .jc-card--concierge .jc-price [data-price] { color: #F2D48F; }
html.hv-home .jc-card .jc-count { display: none; }
/* the card's action is the primary pill: amethyst gradient, ivory ink, 1px edge, specular
   inset, 48px; the Matchmaking card too (the gradient reads on its deep amethyst) */
html.hv-home .jc-card .jc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-s2);
  box-sizing: border-box;
  min-height: 48px;
  margin: auto 0 0;
  padding: 0 var(--g-s5);
  border: 1px solid var(--g-btn-edge);
  border-radius: var(--r-pill);
  background: var(--g-btn);
  color: var(--g-btn-ink);
  box-shadow: var(--g-btn-shadow);
  font-family: var(--sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  text-wrap: balance;
  touch-action: manipulation;
  transition: transform var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease);
}
html.hv-home .jc-card .jc-cta:not(.jc-second):active { background: var(--g-btn-press); transform: scale(0.985); }
/* a card's secondary action (/join: one primary per page, review round 2 M1):
   outlined, no whole-card overlay, so only the button is the action */
html.hv-home .jc-card .jc-cta.jc-second { background: var(--g-tint); color: var(--v5-ink); border-color: var(--v5-line-strong); box-shadow: var(--g-hl); }
html.hv-home .jc-card--concierge .jc-cta.jc-second { background: rgba(255,255,255,0.06); color: #F2D48F; border-color: rgba(226,201,154,0.5); box-shadow: none; }
html.hv-home .jc-card .jc-arrow { display: inline-flex; margin: 0; transition: transform var(--dur) var(--ease); }
html.hv-home .jc-card .jc-arrow .evara-icon { width: 16px; height: 16px; vertical-align: 0; }
/* the whole card is the primary action; its ring is the action's own */
html.hv-home .jc-card .jc-primary::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: calc(var(--r-card) - 6px); }
html.hv-home .jc-card .jc-primary:focus-visible::after { outline: none; }
html.hv-home .jc-card:has(.jc-primary:focus-visible) { outline: none; }
/* the card's words paint above that overlay and let a tap fall through to it,
   so nothing readable sits under another layer */
html.hv-home .jc-card .jc-body, html.hv-home .jc-card .jc-offer { position: relative; z-index: 2; pointer-events: none; }
html.hv-home .jc-card .jc-ico { z-index: 2; pointer-events: none; }
html.hv-home .jc-card .jc-sub {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
  color: var(--sub);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-wrap: balance;
}
html.hv-home .jc-card--concierge .jc-sub { color: #E8D2A6; }
html.hv-home .jc-help { margin: 4px 0 0; padding: 4px 8px; text-align: center; font-size: var(--fs-small); line-height: 1.6; color: var(--sub); text-wrap: balance; }
html.hv-home .jc-help a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* /join on a phone: one path at a time, chosen by the segmented control above
   the cards (Journeys); the dialog never carries the control */
html.hv-home .jc-seg { display: none; }
@media (max-width: 767px) {
  html.hv-home .jc-seg { display: flex; margin: 0 0 12px; }
  html.hv-home .jc-seg:has([value="concierge"]:checked) + .jc-page-grid .jc-card--self,
  html.hv-home .jc-seg:has([value="self_serve"]:checked) + .jc-page-grid .jc-card--concierge { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  html.hv-home .jc-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--v5-line-strong), var(--g-hl), var(--g-shadow); }
  html.hv-home .jc-card--concierge:hover { box-shadow: var(--pn-hl), var(--g-shadow); }
  html.hv-home .jc-card:hover .jc-cta:not(.jc-second) { background: var(--g-btn-hover); }
  html.hv-home .jc-card .jc-cta:not(.jc-second):hover { transform: translateY(-1px); }
  html.hv-home .jc-card:hover .jc-arrow { transform: translateX(3px); }
  html.hv-home .jc-card .jc-sub:hover { color: var(--ink); }
  html.hv-home .jc-card--concierge .jc-sub:hover { color: #FFFFFF; }
  html.hv-home .jc-close:hover { transform: translateY(-1px); }
  html.hv-home .jc-help a:hover { color: var(--ink); }
  /* a card whose action is secondary is not itself a link: it does not lift */
  html.hv-home .jc-card:has(.jc-second):hover { transform: none; box-shadow: inset 0 0 0 1px var(--v5-line), var(--g-hl); }
  html.hv-home .jc-card--concierge:has(.jc-second):hover { box-shadow: var(--pn-hl); }
  html.hv-home .jc-card:has(.jc-second):hover .jc-arrow { transform: none; }
  html.hv-home .jc-card .jc-cta.jc-second:hover { background: var(--g-tint-strong); }
  html.hv-home .jc-card--concierge .jc-cta.jc-second:hover { background: rgba(255,255,255,0.08); }
  html.hv-home .jc-card .jc-cta.jc-second:hover .jc-arrow { transform: translateX(3px); }
}
@media (min-width: 640px) {
  html.hv-home .jc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 768px) {
  html.hv-home .jc-panel { padding: var(--g-s6) var(--g-s5) var(--g-s2); }
  html.hv-home .jc-head { margin-bottom: 24px; }
  html.hv-home .jc-title { font-size: var(--fs-title); }
  html.hv-home .jc-head-sub { font-size: var(--fs-body); }
  html.hv-home .jc-card { padding: var(--g-s5) var(--g-s5) var(--g-s2); }
  html.hv-home .jc-card .jc-ico { top: 22px; right: 22px; }
  html.hv-home .jc-name { font-size: var(--fs-heading); }
  html.hv-home .jc-offer { margin: 16px 0 16px; padding-top: 16px; }
  html.hv-home .jc-help { margin-top: 8px; }
}
@media (min-width: 1024px) {
  html.hv-home .jc-title { font-size: var(--fs-title); }
}
/* opening: the panel rises with g-rise (above); closing fades the dialog out where the browser
   keeps a closing dialog on top (overlay); the scrim fades in and out over the same time */
@media (prefers-reduced-motion: no-preference) {
  html.hv-home .jc-dialog[open]::backdrop { transition: opacity var(--g-dur-base) var(--g-ease); }
  @starting-style {
    html.hv-home .jc-dialog[open]::backdrop { opacity: 0; }
  }
  @supports (overlay: auto) {
    html.hv-home .jc-dialog,
    html.hv-home .jc-dialog[open] { transition: opacity var(--g-dur-base) var(--g-ease), translate var(--g-dur-base) var(--g-ease), scale var(--g-dur-base) var(--g-ease), overlay var(--g-dur-base) allow-discrete, display var(--g-dur-base) allow-discrete; }
    html.hv-home .jc-dialog::backdrop,
    html.hv-home .jc-dialog[open]::backdrop { transition: opacity var(--g-dur-base) var(--g-ease), overlay var(--g-dur-base) allow-discrete, display var(--g-dur-base) allow-discrete; }
    html.hv-home .jc-dialog:not([open]) { opacity: 0; translate: 0 8px; scale: 0.985; }
    html.hv-home .jc-dialog:not([open])::backdrop { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html.hv-home .jc-card, html.hv-home .jc-card .jc-arrow { transition: none; }
  html.hv-home .jc-card:hover, html.hv-home .jc-card:hover .jc-arrow { transform: none; }
}


/* ---- 7. hero ------------------------------------------------------------------------------ */
.hv .hv-hero {
  height: clamp(560px, calc(100vh - var(--hv-clear) - 48px), 820px);
  height: clamp(560px, calc(100svh - var(--hv-clear) - 48px), 820px);
  overflow: hidden;
  background: #2A1640;
  color: var(--hv-on-photo);
  isolation: isolate;
}
/* the homepage header floats over the photograph, so the hero fills the
   first screen down to the trust band */
html.hv-home .hv .hv-hero {
  height: clamp(600px, calc(100vh - 48px), 860px);
  height: clamp(600px, calc(100svh - 48px), 860px);
}
.hv .hv-slides { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.hv .hv-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; z-index: 1; }
.hv .hv-slide.is-on { opacity: 1; z-index: 2; }
.hv .hv-slide[data-hv-defer] { display: none; }
.hv .hv-slides.is-ready .hv-slide[data-hv-defer] { display: block; }
.hv .hv-slide .hv-img { object-position: var(--hv-pos, 50% 50%); height: calc(100% + var(--hv-lift, 0px)); margin-top: calc(-1 * var(--hv-lift, 0px)); }
/* The design's scrim (C15): a cloud of purple-black centred on the headline,
   plus a soft top wash for the header and a floor under the controls and the
   band. Purple-black, never black (C19). */
.hv .hv-hero-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 60% at 50% 62%, rgba(30,10,46,0.8) 0%, rgba(30,10,46,0.3) 52%, rgba(30,10,46,0) 78%),
    linear-gradient(180deg, rgba(30,10,46,0.30) 0%, rgba(30,10,46,0) 18%, rgba(30,10,46,0) 48%, rgba(30,10,46,0.66) 100%);
}
.hv .hv-hero-in {
  position: absolute; left: 20px; right: 20px; bottom: 26px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
/* The box is anchored to the bottom, so a page that painted while its HTML was
   still arriving showed the headline and buttons, then lifted them by the pill
   and the dots when those arrived: 0.06 on a throttled phone, on about half the
   loads once the sheet got faster. :last-child matches only after the parser has
   finished the parent, so the box stays unpainted until it is complete; a browser
   without :has() skips the rule and paints as before. */
.hv .hv-hero-in:not(:has(> .hv-dots:last-child)) { visibility: hidden; }
/* 52px phone to 88px at 1440 (the design's sizes). The soft purple-black
   shadow is a drop-shadow filter, not text-shadow: the headline's fill is the
   shine gradient clipped to the text, and a text-shadow would paint over it. */
.hv .hv-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--hv-on-photo);
  max-width: 7.2em;
  /* phone: balanced lines, so the headline never ends on one word at 390
     ("Where the / right person / becomes family."); from 768px the approved
     two-line break stands (the 768px block sets it back to wrap) */
  text-wrap: balance;
  filter: drop-shadow(0 2px 15px rgba(24,6,40,0.42));
}
.hv .hv-hero-cta { display: flex; gap: 8px; width: 100%; justify-content: center; }
.hv .hv-hero-cta .hv-btn { flex: 1; }

/* Phone: one line of text. At the 14px phone floor; its links keep 44px targets,
   and the negative margins give the design's visual spacing back without shrinking them. */
.hv .hv-pill { display: flex; align-items: center; gap: 8px; margin: -14px 0; border-radius: var(--r-card); font-size: var(--fs-small); font-weight: 600; color: rgba(255,255,255,0.94); }
.hv .hv-pill.hv-glass { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hv .hv-pill-i { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-height: 44px; }
.hv .hv-pill-n { font: inherit; }
.hv .hv-pill-l { font-weight: 600; }
.hv .hv-pill-rating .hv-stars { order: -1; }
.hv .hv-pill-clients, .hv .hv-pill .hv-pill-since .hv-pill-l { display: none; }
.hv .hv-pill-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.6); }
.hv .hv-pill-sep--a { display: none; }
.hv .hv-stars { font-size: var(--fs-fine); letter-spacing: 0.06em; line-height: 1; color: var(--hv-gold-on-dark); }
.hv .hv-stars .evr-stars-bg { opacity: 0.45 !important; color: #FFFFFF; }

/* The dot buttons are 44px tall around a 3px bar: the margins place the bar
   where the design puts it and keep the band's height clear beneath it. */
.hv .hv-dots { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; margin-top: -4px; margin-bottom: 37px; }
/* reserved before the script runs, so revealing the controls moves nothing */
.hv .hv-dots.is-off { visibility: hidden; }
.hv .hv-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0; margin: 0 -8px;
  background: transparent; border: 0; cursor: pointer;
}
/* The bar grows by transform, never by width, so switching photographs is no
   layout shift. 14px idle, 34px current. */
.hv .hv-dot-bar { position: relative; display: block; width: 34px; height: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,0.45); overflow: hidden; transform: scaleX(0.4118); transition: transform var(--dur) var(--ease), translate var(--dur) var(--ease); }
.hv .hv-dot[aria-current="true"] .hv-dot-bar { transform: none; }
/* The design packs the three bars 6px apart around the group's centre; the
   buttons keep a 28px pitch (44px targets, -8px margins), so each bar slides
   (translate, no layout) to the design's place for the photograph showing. */
.hv .hv-dot:nth-child(1) .hv-dot-bar { translate: -2px 0; }
.hv .hv-dot:nth-child(2) .hv-dot-bar { translate: -10px 0; }
.hv .hv-dot:nth-child(1)[aria-current="true"] .hv-dot-bar { translate: 8px 0; }
.hv .hv-dot:nth-child(2)[aria-current="true"] .hv-dot-bar { translate: 0 0; }
.hv .hv-dot:nth-child(3)[aria-current="true"] .hv-dot-bar { translate: -8px 0; }
.hv .hv-dot:nth-child(1)[aria-current="true"] ~ .hv-dot:nth-child(2) .hv-dot-bar { translate: 10px 0; }
.hv .hv-dot[aria-current="true"] ~ .hv-dot:nth-child(3) .hv-dot-bar { translate: 2px 0; }
.hv .hv-dot-fill { position: absolute; inset: 0; background: #FFFFFF; transform: scaleX(0); transform-origin: left center; }
.hv .hv-dot[aria-current="true"] .hv-dot-fill { transform: scaleX(1); }
.hv .is-playing .hv-dot[aria-current="true"] .hv-dot-fill { animation: hv-fill var(--hv-dur, 6500ms) linear both; }
.hv .is-paused .hv-dot[aria-current="true"] .hv-dot-fill { animation-play-state: paused; }
@keyframes hv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The pause controls (WCAG 2.2.2) of the hero, the trust band, the steps and
   the review excerpts. The hero's and the band's show at rest (brief 4l: every
   auto-cycling element has a visible pause control): a small dark disc on the
   photograph, a solid disc at the band's end. The steps and review ones stay
   clipped until keyboard focus. Absolutely placed, so showing one moves
   nothing. Hover, focus inside and a press pause the motion too
   (assets/home-v5.js); off screen it waits. */
.hv .hv-pause, .hv .hv-band-pause, .hv .hv-steps-pause, .hv .hv-rv-pause { position: absolute; }
.hv :is(.hv-steps-pause, .hv-rv-pause):not(:focus-visible) { clip: rect(0 0 0 0); clip-path: inset(50%); }
.hv .hv-pause {
  top: 0; left: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0; margin-left: 6px;
  border: 0; border-radius: 50%; background: transparent; color: #FFFFFF; cursor: pointer; isolation: isolate;
}
/* the visible mark: a 32px disc inside the 44px target, centred on the icon */
.hv .hv-pause::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: var(--hv-pause-c, 50%);
  width: var(--hv-pause-d, 32px); height: var(--hv-pause-d, 32px); translate: -50% -50%;
  border-radius: var(--r-pill); background: rgba(16,9,26,0.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.hv .hv-pause svg { width: 14px; height: 14px; }
.hv .hv-pause .hv-i-play { display: none; }
.hv .hv-pause[data-state="paused"] .hv-i-play { display: block; }
.hv .hv-pause[data-state="paused"] .hv-i-pause { display: none; }
/* Phone: the controls' 44px targets hang below their marks, so the stack is
   14px shorter and the headline, pill and bar sit at the design's heights
   (headline top 439px of the 800px phone frame) with no two targets
   overlapping and the band still clear. */
@media (max-width: 767px) {
  .hv .hv-dots { margin-bottom: 23px; align-items: flex-start; }
  .hv .hv-dot { align-items: flex-start; padding-top: 10px; }
  .hv .hv-pause { align-items: flex-start; padding-top: 4px; --hv-pause-c: 11px; --hv-pause-d: 28px; }
}

/* ---- 8. the moving trust band -------------------------------------------------------------- */
/* Frosted deep amethyst glass laid over the bottom of the hero photograph
   (C01): the hero keeps the band's height clear under its controls. */
.hv .hv-band {
  position: relative; z-index: 5; display: flex; align-items: center; height: 48px; margin-top: -48px; overflow: hidden;
  background: linear-gradient(90deg, rgba(42,18,66,0.94), rgba(61,26,92,0.95) 50%, rgba(42,18,66,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), inset 0 -1px 0 rgba(255,255,255,0.08);
  color: #FFFFFF;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-band { background: linear-gradient(90deg, rgba(42,18,66,0.8), rgba(61,26,92,0.84) 50%, rgba(42,18,66,0.8)); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-band { background: linear-gradient(90deg, rgba(42,18,66,0.94), rgba(61,26,92,0.95) 50%, rgba(42,18,66,0.94)); }
}
@media (prefers-reduced-transparency: reduce) {
  .hv .hv-band { background: linear-gradient(90deg, #2A1242, var(--hv-plum) 50%, #2A1242); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hv .hv-band-view { flex: 1; order: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.hv .hv-band-move { display: flex; width: max-content; }
.hv .hv-band-list { display: flex; flex: none; }
/* 14px on phones (R9). The diamond is placed absolutely at the item's end, where the
   flow put it, so every measure finds it where it paints. */
.hv .hv-band-i { position: relative; display: inline-flex; align-items: center; padding-right: 52px; white-space: nowrap; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.2px; line-height: 1; }
.hv .hv-band-i::after { content: ''; position: absolute; top: 50%; right: 22px; width: 8px; height: 8px; margin-top: -4px; background: var(--hv-diamond); transform: rotate(45deg) scale(0.72); }
/* shown at rest over the moving line, clear of the site's floating WhatsApp
   control (which covers the band's last 72px): a solid disc with the glass
   edge, so no item shows through behind the mark */
.hv .hv-band-pause { position: static; flex: none; order: 2; align-self: center; margin: 0 88px 0 8px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hv .hv-band-pause svg { width: 12px; height: 12px; }
.hv .hv-band-pause .hv-i-play { display: none; }
.hv .hv-band-pause[data-state="paused"] .hv-i-play { display: block; }
.hv .hv-band-pause[data-state="paused"] .hv-i-pause { display: none; }
/* The band moves by CSS alone (no layout change when the script arrives). The
   script only adds the pause control and the touch pause; hover and keyboard
   focus pause it too. */
@media (prefers-reduced-motion: no-preference) {
  .hv .hv-band-move { animation: hv-band 48s linear infinite; }
}
.hv .hv-band:hover .hv-band-move,
.hv .hv-band:focus-within .hv-band-move,
.hv .hv-band.is-paused .hv-band-move,
.hv .hv-band.is-off .hv-band-move { animation-play-state: paused; }
@keyframes hv-band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hv .hv-band { height: auto; min-height: 48px; padding: 14px 0 !important; }
  .hv .hv-band-dup { display: none; }
  .hv .hv-band-move { width: 100%; }
  .hv .hv-band-list { flex-wrap: wrap; justify-content: center; row-gap: 12px; flex: 1; padding: 0 12px; }
}

/* ---- 9. above-the-fold motion and wide screens: the hero and the band ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hv .hv-slide { transition: opacity 1200ms ease; }
  .hv .hv-slide .hv-img { transform: scale(1.07); transition: transform 7000ms linear; }
  .hv .hv-slide.is-on .hv-img { transform: scale(1); }
  .hv .hv-rise { animation: hv-rise 1100ms var(--hv-ease) both; animation-delay: var(--hv-d, 0ms); }
  /* the hero headline keeps its entrance at index 0 when its shine joins */
  .hv .hv-h1.hv-rise.hv-shine-loop { animation: hv-rise 1100ms var(--hv-ease) var(--hv-d, 0ms) both, hv-shine-loop 2340ms cubic-bezier(.4,0,.2,1) 1.4s both; }
  @keyframes hv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .hv .hv-rise, .hv .hv-band-move, .hv .hv-dot-fill { animation: none !important; }
  .hv .hv-btn, .hv .fb, .hv .fbd, .hv .hv-opt, .hv .hv-img, .hv .hv-slide, .hv .hv-dot-bar, .hv .fb::after, .hv .fbd::after, .hv .hv-btn::after { transition: none !important; }
  .hv .hv-btn:hover, .hv .fb:hover, .hv .fbd:hover { transform: none; }
  .hv h1, .hv h2, .hv h3, .hv .sh, .hv .ey, .hv h1 em, .hv h2 em, .hv h3 em { animation: none !important; background-position: 0 0; }
}
@media (min-width: 768px) {
  .hv .hv-slide .hv-img { height: 100%; margin-top: 0; }
  .hv .hv-slide .hv-img--ad { object-position: var(--hv-pos-wide, var(--hv-pos)); }
  .hv .hv-br-narrow { display: none; }
  .hv .hv-hero { height: clamp(600px, calc(100vh - var(--hv-clear)), 900px); height: clamp(600px, calc(100svh - var(--hv-clear)), 900px); }
  html.hv-home .hv .hv-hero { height: clamp(640px, 100vh, 960px); height: clamp(640px, 100svh, 960px); }
  .hv .hv-hero-scrim { background: radial-gradient(ellipse 70% 58% at 50% 50%, rgba(30,10,46,0.76) 0%, rgba(30,10,46,0.3) 52%, rgba(30,10,46,0) 78%), linear-gradient(180deg, rgba(30,10,46,0.30) 0%, rgba(30,10,46,0) 18%, rgba(30,10,46,0) 48%, rgba(30,10,46,0.66) 100%); }
  .hv .hv-hero-in { left: 0; right: 0; bottom: 44px; gap: 24px; }
  .hv .hv-h1 { max-width: 11.4em; letter-spacing: -0.025em; text-wrap: wrap; }
  .hv .hv-hero-cta { width: auto; gap: 10px; }
  .hv .hv-hero-cta .hv-btn { flex: none; font-size: var(--fs-button); padding: 0 32px; }
  .hv .hv-hero-cta .hv-btn--glass { padding: 0 32px; }
  .hv .hv-hero-cta .hv-wa-ic { width: 18px; height: 18px; }
  .hv .hv-pill { gap: 0; margin: 0; padding: 14px 6px; border-radius: var(--r-card); }
  .hv .hv-pill.hv-glass { background: rgba(var(--hv-scrim),0.62); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.14); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hv .hv-pill.hv-glass { background: rgba(var(--hv-scrim),0.46); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hv .hv-pill.hv-glass { background: rgba(var(--hv-scrim),0.62); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .hv .hv-pill.hv-glass { background: rgba(var(--hv-scrim),0.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  .hv .hv-pill-i { display: grid; justify-items: center; align-content: center; gap: 4px 8px; padding: 0 28px; min-height: 52px; }
  .hv .hv-pill-rating { grid-template-columns: auto auto; }
  .hv .hv-pill-rating .hv-stars { order: 0; font-size: var(--fs-fine); }
  .hv .hv-pill-rating .hv-pill-l { grid-column: 1 / 3; }
  .hv .hv-pill-n { font-family: var(--serif); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 500; color: #FFFFFF; }
  .hv .hv-pill-l { font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,0.78); }
  .hv .hv-pill-clients, .hv .hv-pill .hv-pill-since .hv-pill-l { display: block; }
  .hv .hv-pill-clients { display: grid; }
  .hv .hv-pill-sep, .hv .hv-pill-sep--a { display: block; width: 1px; height: 34px; border-radius: 0; background: rgba(255,255,255,0.28); }
  .hv .hv-dots { margin-top: -22px; margin-bottom: 48px; }
  .hv .hv-band { height: 58px; margin-top: -58px; }
  .hv .hv-band-i { padding-right: 68px; }
  .hv .hv-band-i::after { right: 30px; }
  /* the site's floating WhatsApp control sits over the band's right end from
     768px: the pause control, when focus shows it, stands clear of it */
  .hv .hv-band-pause { margin-right: 92px; }
  @media (prefers-reduced-motion: reduce) { .hv .hv-band { height: auto; min-height: 58px; } }
  .hv .hv-sl-prev { left: 16px; }
  .hv .hv-sl-next { right: 16px; }
}

@media (min-width: 1024px) {
  .hv .hv-br-wide { display: inline; }
}

/* ---- 9b. hero slides that fit their faces (data/home.mjs HERO `fit`) ------------------------ */
/* From 768px a `fit` slide's photograph keeps the box around its faces (--hv-fy
   top, --hv-fh height, --hv-fw width, fractions of the photograph; --hv-ar is
   its width / height) clear of the header pills and the headline:
   - it is the plain cover at the design's object-position (--hv-py, the wide
     crop's vertical position) wherever that already clears them;
   - else it moves up just enough (the chins on the band's lower edge, the top
     never below the hero's top, the faces' top never under the pills), grown
     a little past the cover size if that is what keeps the hero covered;
   - and only where the faces are taller than the band, or wider than the
     screen, is it scaled down, with a blurred copy of the same file (same
     srcset, no extra bytes) in the margin and a feathered edge onto it.
   The band: the header pills end at 70px; the headline's first line box
   starts 325px (the controls under it: 44px inset, 70px dots, 80px stats pill,
   58px buttons, three 24px gaps) plus its two lines (2 x 0.95 x its font size)
   above the hero's bottom; 10px of air each side. Above the fold marker: the
   first slide is the LCP photograph and must not move when the stylesheet
   arrives. */
.hv .hv-img--fill { display: none; }
@media (min-width: 768px) {
  .hv .hv-slide--fit .hv-img--fit {
    --hv-fit-a: 80px;
    --hv-fit-b: calc(100% - 335px - 1.9 * clamp(52px, 38.63px + 3.4286vw, 88px));
    --hv-fit-h: min(max(100%, 100vw / var(--hv-ar), (100% - var(--hv-fit-b)) / (1 - var(--hv-fy) - var(--hv-fh))), (var(--hv-fit-b) - var(--hv-fit-a)) / var(--hv-fh), (100vw - 20px) / (var(--hv-fw) * var(--hv-ar)));
    position: absolute; left: 50%; translate: -50% 0;
    top: max(var(--hv-fit-a) - var(--hv-fy) * var(--hv-fit-h), min((100% - var(--hv-fit-h)) * var(--hv-py), var(--hv-fit-b) - (var(--hv-fy) + var(--hv-fh)) * var(--hv-fit-h), 0px));
    width: auto; height: var(--hv-fit-h); aspect-ratio: var(--hv-ar);
    /* side feather only where the photograph is narrower than the screen (in a
       mask, 100% is the photograph's own width) */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 clamp(0px, (100vw - 100%) / 2, 80px), #000 calc(100% - clamp(0px, (100vw - 100%) / 2, 80px)), transparent), linear-gradient(180deg, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 clamp(0px, (100vw - 100%) / 2, 80px), #000 calc(100% - clamp(0px, (100vw - 100%) / 2, 80px)), transparent), linear-gradient(180deg, #000 90%, transparent);
    mask-composite: intersect;
  }
  .hv .hv-slide--fit .hv-img--fill { display: block; object-position: 50% 50%; filter: blur(28px) saturate(1.1); scale: 1.12; }
}

/* ---- 9c. the strip under the band, for a phone's first screen ---------------------------------- */
/* On a phone the hero is 100svh - 48px tall and the band sits inside its foot,
   so the first 48px under it show before any scroll: they are the canvas (the
   body's own colour), the top padding of the section that follows, which 9d
   keeps out of the page until the whole stylesheet lands. Nothing to paint
   here, so the first screen needs no rule of a section below the hero. */


/* ---- 9d. until the whole stylesheet lands: nothing below the first screen exists -------------- */
/* Every section after the trust band and the footer are not rendered
   (display: none) until the whole stylesheet has landed and applied
   and assets/home-v5.js has started: the loader in the head (scripts/gen-home.mjs
   CSS_LOADER) starts the script from the stylesheet's load event and the
   script's first statement sets html.hv-css, so they appear already styled and
   set up, below what is on screen. No frame ever shows them with the inline half alone
   (no unstyled flash) and nothing on screen moves when they appear (no layout
   shift): a visitor who scrolls before the stylesheet lands reaches the end of
   the first screen's content and waits there. The first frame styles and lays
   out only the first screen. Nothing here is on the first screen, and the
   look once the stylesheet has landed is unchanged. Without JavaScript
   html.hv-home is never set and the <noscript> stylesheet serves as before. */
html.hv-home:not(.hv-css) .hv > .hv-band ~ *, html.hv-home:not(.hv-css) body > footer { display: none; }

/* ---- the way (job site-path-coherence-1015). The chooser's choice is the page's: html[data-way]
   is "self" or "match" (set before first paint from ?way= or the session, then by the chooser;
   absent means self, so without script the page is the Explore yourself page, complete). Every
   element carrying data-wv belongs to one way; the other way's copy stays in the HTML and is
   only not shown. The switch moves nothing above the chooser; the entry fade is the shared
   motion curve and is off for visitors who ask for less motion. */
html[data-way="match"] [data-wv="self"], html:not([data-way="match"]) [data-wv="match"] { display: none !important; }
html[data-way="match"] .tv-dock[data-dock-way] .tr-sticky-price:not([data-wv]) { display: none; }
.hv .hv-faq-wv { display: contents; }
html.way-anim [data-wv] { animation: hv-way-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes hv-way-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.way-anim [data-wv] { animation: none; } }

/* @below-fold */

/* ---- 11. below the hero (site-clean-1004, 4 Oct 2026): the homepage's own arrangement of the
   shared v5 components (scripts/lib-v5.mjs; their look is the @v5-components block). Only the
   placement is here: which column holds what, and which chip row or matrix shows for the
   checked option (native radios; without :has every row shows). Every section fits one
   1440 x 708 view and the phone limits (contract 7); spacing on the 4px grid, radius tokens. */
.hv .hv-where-grid, .hv .hv-care-grid, .hv .hv-invite-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.hv .hv-where-t, .hv .hv-care-t, .hv .hv-invite-t { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.hv .hv-where-t > .tv-anscard, .hv .hv-where-t > .tv-disc, .hv .hv-invite-icons { align-self: stretch; max-width: none; }
.hv .hv-where-pic, .hv .hv-care-pic, .hv .hv-invite-pic { display: none; }
.hv .hv-where-links, .hv .hv-care-m { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; min-width: 0; }
.hv .hv-where-links > .tv-seg, .hv .hv-care-m > .tv-seg { margin: 0; }
.hv .hv-care-v { align-self: stretch; }
@supports selector(:has(*)) {
  .hv .hv-where-links:has(input[value="places"]:checked) .hv-where-g:not([data-links="places"]),
  .hv .hv-where-links:has(input[value="communities"]:checked) .hv-where-g:not([data-links="communities"]),
  .hv .hv-where-links:has(input[value="guides"]:checked) .hv-where-g:not([data-links="guides"]),
  .hv .hv-care-m:has(input[value="checks"]:checked) .hv-care-v[data-view="vis"],
  .hv .hv-care-m:has(input[value="vis"]:checked) .hv-care-v[data-view="checks"] { display: none; }
}
/* brief 8b: an answer card is prose, never a section's graphic, so below 1024px the
   premium photograph stays, as a band under the links */
@media (max-width: 1023px) {
  .hv .hv-where-grid > .hv-where-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 320px; }
}
/* how it works: the matching announcement and the membership link under the steps, inside
   the steps graphic (brief 8b); from 768px the steps are a grid and the foot spans it */
.hv .hv-how-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.hv .hv-how-foot #home-matching-ann { font-size: var(--fs-body); line-height: 1.5; color: var(--ink2); }
@media (min-width: 768px) {
  .hv .tv-steps--app > .hv-how-foot { grid-column: 1 / -1; margin-top: -24px; }
}
/* real couples: the heading with the link to every story, the couples, then the Google
   rating beside the review excerpts' disclosure (section 7 styles both) */
.hv .hv-stories .tv-head { align-items: flex-start; }
.hv .hv-stories-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px; }
.hv .hv-stories-foot > .hv-rv-agg { align-self: flex-start; }
@media (max-width: 767px) {
  .hv .hv-stories { --rail-h: min(420px, calc(100svh - 436px)); }
  /* choose: the routes card a little closer to its heading and its switch */
  .hv .hv-choose .tv-head { margin-bottom: 16px; }
  .hv .hv-choose .tv-seg { margin-bottom: 12px; }
  .hv .hv-care-grid { gap: 12px; }
  .hv .hv-care-t { gap: 12px; }
  .hv .hv-care-m { gap: 8px; }
}
/* the consultation panel: a modal dialog holding the .hc consultation */
.hv .hv-cq-dlg { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); margin: auto; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
.hv .hv-cq-dlg[hidden] { display: none; }
.hv .hv-cq-dlg::backdrop { background: rgba(16,9,26,0.62); }
.hv .hv-cq-dlg > .hv-cq { position: relative; margin: 0; max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow: auto; overscroll-behavior: contain; }
.hv .hv-cq-x { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgba(255,255,255,0.08); color: #FFFFFF; cursor: pointer; }
.hv .hv-cq-x:hover { background: rgba(255,255,255,0.16); }
html.hv-dlg-open { overflow: hidden; }
/* the office map: a click-to-load facade (assets/home-v5.js section 5) */
.hv .hv-map-go { position: absolute; left: 50%; bottom: 12px; z-index: 2; translate: -50% 0; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: rgba(16,9,26,0.74); color: #FFFFFF; font: 600 var(--fs-small)/1 var(--sans); white-space: nowrap; cursor: pointer; }
.hv .hv-map-go[hidden], .hv .hv-map.is-live .hv-map-go { display: none; }
@media (min-width: 768px) {
  .hv .hv-stories .tv-head { align-items: flex-end; margin-bottom: 24px; }
  .hv .hv-stories-foot { flex-direction: row; align-items: center; gap: 32px; }
  .hv .hv-stories-foot > .hv-rx-disc { flex: 1 1 auto; min-width: 0; }
}
@media (min-width: 1024px) {
  /* choose: the heading on one line, its line under it, so the comparison fits one view */
  .hv .hv-choose .tv-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hv .hv-choose .tv-head .hv-lead { flex: none; max-width: none; }
  .hv .hv-where-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .hv .hv-invite-grid { grid-template-columns: auto minmax(0, 1fr); gap: 72px; }
  .hv .hv-care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
  .hv .hv-where-pic, .hv .hv-invite-pic { display: block; }
  /* the care photograph takes its column's width under the words, at most 320px tall */
  .hv .hv-care-t > .hv-care-pic { display: block; align-self: stretch; width: auto; max-width: none; aspect-ratio: auto; height: min(320px, calc(100vh - 420px)); height: min(320px, calc(100svh - 420px)); max-height: none; }
}
/* real couples from 1360px: the rating and the excerpts stand beside the couples, in the
   width the three cards leave free, foot aligned with the photographs' foot */
@media (min-width: 1360px) {
  .hv .hv-stories .tv-sec-in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .hv .hv-stories .tv-head { grid-column: 1 / -1; }
  .hv .hv-stories .tv-stories { grid-column: 1; min-width: 0; }
  .hv .hv-stories-foot { grid-column: 2; flex-direction: column; align-items: stretch; gap: 16px; margin: 0; }
  .hv .hv-stories-foot > .hv-rv-agg { align-self: flex-start; }
  .hv .hv-stories-foot .hv-rx-list { grid-template-columns: minmax(0, 1fr); }
}
/* page to page: a 360 ms cross-fade where both documents opt in, never under
   reduced motion (contract 6; the non-critical half, so the first paint and
   the LCP photograph never wait on it) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 360ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* ---- 10. text links with an arrow (existing sections; new work uses .fb) -------------------- */
.hv .hv-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--g-s2);
  border-radius: calc(var(--r-input) - 2px);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ctl-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--g-dur-fast) var(--g-ease);
}
.hv .hv-link:hover { text-decoration-color: var(--v5-gold); }
.hv .hc .hv-link:hover, .hv .hv-amx .hv-link:hover, .hv .hv-link--gold:hover { text-decoration-color: var(--v5-gold-l); }
.hv .hv-link .hv-arw { display: inline-flex; transition: transform var(--g-dur-fast) var(--g-ease); }
.hv .hv-link:hover .hv-arw { transform: translateX(4px); }
.hv .hv-link--gold { color: var(--hv-gold-on-dark); }

/* ---- 11. chosen with care: the section left the homepage on 4 Oct 2026 (site-clean-1004).
   This heading stays only as the end of the extracted link block and the start of the photo
   frame below (data/theme-v5-extract.json); the photo frame is still shared. */
.hv .hv-photo { position: relative; overflow: hidden; border-radius: var(--hv-radius); background: var(--ph); }
.hv .hv-photo picture { position: absolute; inset: 0; }
.hv .hv-photo .hv-img { object-position: var(--hv-pos, 50% 50%); transition: transform 1600ms var(--hv-ease); }
/* a photograph art-directed at 768px (one couple per page) takes its wide crop */
@media (min-width: 768px) {
  .hv .hv-photo .hv-img--ad { object-position: var(--hv-pos-wide, var(--hv-pos)); }
}

/* the search programme's answer block and the old sections 4 (three steps) and 5 (the checks
   panel) left the homepage on 4 Oct 2026; this line ends the extracted photo frame above. */

/* ---- 6. the plan cards -------------------------------------------------------------------- */
/* No longer on the homepage; extracted for tv5 pages as the plans block. Two plan cards that
   end together. Membership: the light card. Personalised matchmaking: the deep amethyst panel
   (.hv-amx) with gold. The tier tiles are rows until their card is 540px wide, then three columns. */
.hv .hv-plan { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r-card); transition: transform var(--dur) var(--ease); }
.hv .hv-plan--m { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2), var(--elev); }
.hv .hv-plan--p { box-shadow: inset 0 0 0 1px rgba(201,169,110,0.35), var(--elev); }
html[data-theme="dark"] .hv .hv-plan--p {
  background: radial-gradient(700px 420px at 90% 0%, rgba(201,169,110,0.10), rgba(201,169,110,0) 65%), linear-gradient(165deg, #2E1448 0%, #1C0C2F 55%, #120820 100%);
  box-shadow: inset 0 0 0 1px rgba(226,201,154,0.22), 0 40px 80px rgba(4,2,8,0.55);
}
.hv .hv-plan-photo { flex: none; height: 300px; border-radius: 0; }
.hv .hv-plan-badge {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 600; color: #FFFFFF;
  background: rgba(16,9,26,0.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.14);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-plan-badge { background: rgba(16,9,26,0.66); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .hv-plan-badge { background: rgba(16,9,26,0.74); }
}
@media (prefers-reduced-transparency: reduce) {
  .hv .hv-plan-badge { background: rgba(16,9,26,0.8); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hv .hv-plan-body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px 20px 24px; container-type: inline-size; }
.hv .hv-plan-lead { display: inline-flex; align-self: flex-start; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.4px; background: var(--tint); color: var(--accent); }
.hv .hv-plan--p .hv-plan-lead { background: rgba(242,212,143,0.14); color: #F2D48F; }
.hv .hv-plan-head { display: flex; flex-direction: column; gap: 8px; }
.hv .hv-plan-t { font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: -0.6px; font-weight: 500; color: var(--ink); }
.hv .hv-plan--p .hv-plan-t { color: #FFFFFF; }
.hv .hv-plan-who { font-size: var(--fs-small); line-height: 1.5; color: var(--sub); }
.hv .hv-plan--p .hv-plan-who { color: rgba(255,255,255,0.72); }
.hv .hv-plan-pts { display: flex; flex-direction: column; gap: 11px; }
.hv .hv-plan-pts li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
.hv .hv-plan--p .hv-plan-pts li { color: #FFFFFF; }
.hv .hv-plan-tick { flex: none; display: flex; width: 22px; height: 22px; margin-top: 1px; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--tint); color: var(--accent); }
.hv .hv-plan--p .hv-plan-tick { background: rgba(242,212,143,0.16); color: #F2D48F; }
.hv .hv-plan-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line2); }
.hv .hv-plan--p .hv-plan-foot { border-top-color: rgba(255,255,255,0.12); }
.hv .hv-plan-facts { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hv .hv-plan-fact { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 13px; border-radius: calc(var(--r-card) - 10px); background: var(--tint); }
.hv .hv-plan-fact .ey, .hv .hv-tier-n { font-size: var(--fs-label); letter-spacing: 2px; }
.hv .hv-plan-big { font-size: var(--fs-heading); line-height: var(--lh-heading); color: var(--ink); white-space: nowrap; }
.hv .hv-plan-small { font-size: var(--fs-caption); line-height: 1.4; color: var(--sub); }
.hv .hv-plan-line { font-size: var(--fs-small); line-height: 1.5; color: var(--ink); }
/* the tiers' GST line on the amethyst card */
.hv .hv-tier-gst { margin: 0; font-size: var(--fs-caption); line-height: 1.5; color: rgba(255,255,255,0.72); }
.hv .hv-plan-line b { font-weight: 700; }
.hv .hv-plan-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
/* on phone each action takes the full width; a long secondary label wraps
   inside its pill rather than run past the card */
.hv .hv-plan-acts > a { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.hv .hv-plan-acts .fb, .hv .hv-plan-acts .fbd { white-space: normal; text-align: center; padding-block: 8px; }
/* the design's 14.5px for "Compare Select, Reserve and Luxe"; on phone a
   narrower inline padding keeps it on one line in a 390px card (it still
   wraps inside its pill on a narrower phone) */
.hv .hv-plan-acts .fbd { font-size: var(--fs-button); }
@media (max-width: 767px) { .hv .hv-plan-acts .fbd { padding-inline: 14px; } }
/* the tier tiles: rows (phone), three columns in a wide card */
.hv .hv-tiers { display: flex; flex-direction: column; gap: 8px; }
.hv .hv-tier {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "note p" "go p";
  align-items: center; column-gap: 12px; row-gap: 2px; min-width: 0; padding: 12px 14px;
  border-radius: calc(var(--r-card) - 12px); text-decoration: none; color: #FFFFFF;
  background: rgba(12,5,22,0.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hv .hv-tier--luxe {
  background: linear-gradient(160deg, rgba(242,212,143,0.14), rgba(12,5,22,0.3));
  box-shadow: inset 0 0 0 1px rgba(242,212,143,0.5);
}
.hv .hv-tier .hv-tier-n { grid-area: n; color: var(--hv-diamond); }
.hv .hv-tier-p { grid-area: p; font-size: var(--fs-heading); line-height: var(--lh-heading); white-space: nowrap; color: #FFFFFF; }
.hv .hv-tier--luxe .hv-tier-p { color: #F2D48F; }
.hv .hv-tier-note { grid-area: note; font-size: var(--fs-caption); line-height: 1.35; color: rgba(255,255,255,0.62); }
/* one end of an income band never breaks inside itself ("₹3 crore"); each end
   is its own data-price node (scripts/gen-home.mjs begin()) */
.hv [data-price$=".incomeFrom"], .hv [data-price$=".incomeTo"] { white-space: nowrap; }
.hv .hv-tier-go { grid-area: go; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--fs-caption); font-weight: 700; color: #E8D2A6; white-space: nowrap; }
.hv .hv-tier-arw { display: inline-block; flex: none; transition: translate var(--dur) var(--ease); }
@container (min-width: 540px) {
  .hv .hv-tiers { flex-direction: row; }
  .hv .hv-tier { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "p" "note" "go"; align-content: start; row-gap: 4px; padding: 14px 14px 13px; border-radius: calc(var(--r-card) - 10px); }
  .hv .hv-tier.hv-tier--luxe { flex-grow: 1.22; }
  .hv .hv-tier-p { font-size: var(--fs-heading); line-height: var(--lh-heading); }
  .hv .hv-tier-note { line-height: 1.4; }
}
@media (hover: hover) and (pointer: fine) {
  .hv .hv-plan:hover { transform: translateY(-4px); }
  .hv .hv-plan:hover .hv-img { transform: scale(1.04); }
  .hv .hv-tier:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(226,201,154,0.55); }
  .hv .hv-tier:hover .hv-tier-arw { translate: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hv .hv-plan, .hv .hv-tier, .hv .hv-tier-arw { transition: none; }
  .hv .hv-plan:hover, .hv .hv-tier:hover { transform: none; }
  .hv .hv-plan:hover .hv-img { transform: none; }
}
@media (min-width: 768px) {
  .hv .hv-plan-photo { height: 360px; }
  .hv .hv-plan-facts { display: grid; }
  .hv .hv-plan-line { display: none; }
  .hv .hv-plan-acts > a { flex: none; }
}
/* side by side from 1024px: below it the Membership card, shorter than the
   tier tiles, would hold an empty band above its facts strip */
@media (min-width: 1024px) {
  .hv .hv-plan-photo { height: 440px; }
  .hv .hv-plan-body { padding: 30px 32px 32px; }
  .hv .hv-plan-t { font-size: var(--fs-heading); }
  .hv .hv-plan-who { font-size: var(--fs-small); }
}

/* ---- 6b. for families of distinction: the private consultation --------------------------------
   The homepage invitation (section 11) opens it in a modal dialog: a frosted deep amethyst .hc
   panel (the .hc material, its dark rule and its solid fallback are section 4). Short shadows
   only (R102). Below 1024px one question at a time, driven by [data-step] (assets/home-v5.js
   section 6); 1024px and up every question at once, the suggestion beside them. */

/* the consultation */
.hv .hv-cq { display: flex; flex-direction: column; gap: 22px; margin: 22px 8px 0; padding: 24px 18px 26px; }
.hv .hv-cq p { margin: 0; }
.hv .hv-cq-l, .hv .hv-cq-r, .hv .hv-cq-qs { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hv .hv-cq-head, .hv .hv-cq-priv, .hv .hv-cq-n, .hv .hv-cq-or { display: none; }
.hv .hv-cq-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.8px; color: #FFFFFF; }
.hv .hv-cq-h em { font-style: italic; font-weight: inherit; color: #E8D2A6; }
.hv .hv-cq-intro { font-size: var(--fs-small); line-height: 1.55; color: rgba(255,255,255,0.72); }
.hv .hv-cq-prog { display: flex; flex-direction: column; gap: 12px; }
.hv .hv-cq-prog-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hv .hv-cq-stepl { font-size: var(--fs-small); font-weight: 600; color: rgba(255,255,255,0.74); font-variant-numeric: lining-nums tabular-nums; }
/* one bar per question (--cq-n, set on the panel by scripts/gen-home.mjs): the current
   question half lit, the answered ones gold, all gold once the suggestion shows */
.hv .hv-cq-bar { display: grid; grid-template-columns: repeat(var(--cq-n, 4), minmax(0, 1fr)); gap: 6px; }
.hv .hv-cq-bar span { display: block; height: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,0.14); transition: background-color var(--dur) var(--ease); }
.hv .hv-cq[data-step="0"] .hv-cq-bar span:nth-child(1),
.hv .hv-cq[data-step="1"] .hv-cq-bar span:nth-child(2),
.hv .hv-cq[data-step="2"] .hv-cq-bar span:nth-child(3),
.hv .hv-cq[data-step="3"] .hv-cq-bar span:nth-child(4) { background: rgba(226,201,154,0.55); }
.hv .hv-cq[data-step="1"] .hv-cq-bar span:nth-child(1),
.hv .hv-cq[data-step="2"] .hv-cq-bar span:nth-child(-n+2),
.hv .hv-cq[data-step="3"] .hv-cq-bar span:nth-child(-n+3),
.hv .hv-cq[data-step="4"] .hv-cq-bar span { background: var(--hv-gold-on-dark); }
.hv .hv-cq-q { display: none; flex-direction: column; gap: 14px; }
.hv .hv-cq[data-step="0"] .hv-cq-q[data-cq-q="0"],
.hv .hv-cq[data-step="1"] .hv-cq-q[data-cq-q="1"],
.hv .hv-cq[data-step="2"] .hv-cq-q[data-cq-q="2"],
.hv .hv-cq[data-step="3"] .hv-cq-q[data-cq-q="3"] { display: flex; }
.hv .hv-cq[data-step="4"] .hv-cq-qs, .hv .hv-cq:not([data-step="4"]) .hv-cq-r { display: none; }
.hv .hv-cq-qt { font-family: var(--serif); font-size: var(--fs-heading); line-height: var(--lh-heading); color: #FFFFFF; }
.hv .hv-cq-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.hv .hv-cq .hv-opt { min-width: 44px; white-space: nowrap; }
.hv .hv-cq-recs { display: flex; flex-direction: column; outline: none; }
.hv .hv-cq-rec { display: flex; flex-direction: column; gap: 14px; }
.hv .hv-cq-rec[hidden] { display: none; }
.hv .hv-cq-rt { font-family: var(--serif); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 400; color: #FFFFFF; }
.hv .hv-cq-rl { font-size: var(--fs-small); line-height: 1.55; color: rgba(255,255,255,0.78); }
.hv .hv-cq-pay { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.hv .hv-cq-pay .hv-btn { align-self: stretch; }
.hv .hv-cq-fine { font-size: var(--fs-small); line-height: 1.5; color: rgba(255,255,255,0.7); }
.hv .hv-cq-open { align-self: stretch; }
.hv .hv-cq-form { display: none; flex-direction: column; gap: 12px; }
.hv .hv-cq.is-form .hv-cq-form { display: flex; }
.hv .hv-cq.is-form .hv-cq-open, .hv .hv-cq.is-sent .hv-cq-open, .hv .hv-cq.is-sent .hv-cq-form, .hv .hv-cq.is-sent .hv-cq-or { display: none; }
.hv .hv-cq-form .hpf { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hv .hv-cq-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hv .hv-cq-f { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.3px; color: rgba(255,255,255,0.76); }
/* fields: the portal's .g-input, one recipe for the consultation panel's .hv-cq-in and
   the forms' .tv-in (selects and textareas included). Both live on the deep .hc panel:
   light theme gives a pale field (dark ink, 4.5:1 and up), dark theme a deep one (ivory
   ink); the --brd-control edge and the focus ring mark it on either. The global focus
   rule paints a 2px outline and clears box-shadow with !important, so a field's ring
   restates both with !important at a higher specificity. */
.hv .hv-cq-in, .hv .tv-in {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--g-s4);
  border: 1px solid var(--brd-control);
  border-radius: var(--r-input);
  background: var(--v5-d2);
  color: var(--v5-ink);
  font-family: var(--sans);
  font-size: var(--fs-input);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  outline: none;
  transition: border-color var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease);
}
.hv textarea.hv-cq-in, .hv textarea.tv-in { min-height: 112px; padding-block: var(--g-s3); line-height: 1.5; resize: vertical; }
.hv .hv-cq-in::placeholder, .hv .tv-in::placeholder { color: var(--v5-muted); }
.hv .hv-cq-in:focus-visible, .hv .tv-in:focus-visible { outline: none !important; border-color: var(--v5-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v5-focus) 38%, transparent) !important; }
.hv .hv-cq-in[aria-invalid="true"], .hv .tv-in[aria-invalid="true"] { border-color: var(--color-error); }
@media (prefers-reduced-motion: reduce) {
  .hv .hv-cq-in, .hv .tv-in { transition: none; }
}
/* the whole row is the checkbox's 44px target */
.hv .hv-cq-consent { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: var(--fs-small); line-height: 1.5; color: rgba(255,255,255,0.76); cursor: pointer; }
/* drawn here, not the native box: WebKit paints a native checkbox as a white
   square whatever the accent-color, which glared on the plum card in dark.
   min-height 0: the site's touch rule (design-tokens.css, pointer: coarse)
   gives every input 44px, which stretched the box into a 20 x 44 bar; the
   label row is the 44px target. No scale when checked (motion.css grows a
   consent box 12%): it stays the design's 20px square. */
.hv .hv-cq-consent input {
  flex: none; box-sizing: border-box; width: 20px; height: 20px; min-height: 0; margin: 0; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--brd-control); border-radius: calc(var(--r-input) - 9px); background: var(--v5-d2);
  cursor: pointer; transition: background var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease);
}
.hv .hv-cq-consent input:checked {
  transform: none;
  border-color: var(--g-btn-edge);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat, var(--g-btn);
}
.hv .hv-cq-consent input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (forced-colors: active) { .hv .hv-cq-consent input { -webkit-appearance: auto; appearance: auto; } }
#main .hv .hv-cq-consent a, .hv .hv-cq-consent a { color: var(--hv-gold-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.hv .hv-cq-err { font-size: var(--fs-small); line-height: 1.45; color: #FFD2CB; }
.hv .hv-cq-err[hidden], .hv .hv-cq-thanks[hidden], .hv .hv-cq-back[hidden] { display: none; }
.hv .hv-cq-form .hv-btn { align-self: stretch; }
.hv .hv-cq-thanks { display: flex; flex-direction: column; gap: 10px; outline: none; }
.hv .hv-cq-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: rgba(255,255,255,0.8); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.hv .hv-cq-nojs { font-size: var(--fs-small); line-height: 1.55; color: rgba(255,255,255,0.86); }
.hv .hv-cq-nojs a { color: var(--hv-gold-on-dark); }

@media (min-width: 768px) {
  .hv .hv-cq { margin-inline: 24px; padding: 32px 36px 34px; }
  .hv .hv-cq-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* the consultation: every question at once, the suggestion beside them */
  .hv .hv-cq { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 3.9vw, 56px); margin: 96px 0 0; padding: clamp(40px, 3.6vw, 52px) clamp(36px, 3.9vw, 56px); border-radius: var(--r-hc); }
  .hv .hv-cq-l { gap: 26px; }
  .hv .hv-cq-head { display: flex; flex-direction: column; gap: 12px; }
  .hv .hv-cq-prog, .hv .hv-cq-open, .hv .hv-cq-back { display: none !important; }
  .hv .hv-cq[data-step] .hv-cq-qs { display: flex; gap: 26px; }
  .hv .hv-cq .hv-cq-q { display: flex; gap: 12px; }
  .hv .hv-cq-qt { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: rgba(255,255,255,0.86); }
  .hv .hv-cq-n { display: inline; margin-right: 0.85em; color: var(--hv-diamond); font-variant-numeric: lining-nums tabular-nums; }
  .hv .hv-cq-opts[data-cq-key="income"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv .hv-cq-priv { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: calc(var(--r-hc) - 18px); background: rgba(12,5,22,0.3); box-shadow: inset 0 0 0 1px rgba(226,201,154,0.18); font-size: var(--fs-small); line-height: 1.5; color: rgba(255,255,255,0.78); }
  .hv .hv-cq-priv svg { flex: none; margin-top: 2px; color: var(--hv-gold-on-dark); }
  .hv .hv-cq[data-step] .hv-cq-r { display: flex; align-self: start; gap: 16px; padding: 30px; border-radius: calc(var(--r-hc) - 10px); background: rgba(8,5,14,0.42); box-shadow: inset 0 0 0 1px rgba(226,201,154,0.18); }
  .hv .hv-cq-rec { gap: 16px; }
  .hv .hv-cq-rt { font-size: var(--fs-title); }
  .hv .hv-cq-pay .hv-btn { align-self: flex-start; padding: 0 28px; }
  .hv .hv-cq-or { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,0.72); }
  .hv .hv-cq-or-l { flex: 1; height: 1px; background: rgba(226,201,154,0.2); }
  .hv .hv-cq .hv-cq-form { display: flex; }
  .hv .hv-cq.is-sent .hv-cq-form, .hv .hv-cq.is-sent .hv-cq-or { display: none; }
  .hv .hv-cq-nojs { grid-column: 1 / -1; }
}

/* ---- 7. real couples: lib-v5 stories() draws the couples; here the stars, the Google rating
   and the review excerpts beside them ---------------------------------------------------------- */
/* five stars that never shrink; the gold layer is clipped at the exact width
   of the rating: whole x (star + gap) + fraction x star (README R57) */
.hv .hv-stars5 { --st: 15px; --sg: 2px; position: relative; display: inline-block; flex: none; width: calc(5 * var(--st) + 4 * var(--sg)); height: var(--st); line-height: 0; }
.hv .hv-stars5-bg, .hv .hv-stars5-fg { position: absolute; top: 0; left: 0; display: flex; gap: var(--sg); overflow: hidden; }
.hv .hv-stars5-bg { color: #E3DBCB; }
.hv .hv-stars5-fg { width: calc(var(--whole) * (var(--st) + var(--sg)) + var(--part) * var(--st)); color: #9A7A3F; }
.hv .hv-stars5 svg { flex: none; display: block; width: var(--st); height: var(--st); }
html[data-theme="dark"] .hv .hv-stars5-bg { color: var(--starbg); }
html[data-theme="dark"] .hv .hv-stars5-fg { color: var(--hv-gold-on-dark); }
.hv .hv-rx-stars { --st: 13px; }

/* the Google rating and the review excerpts (data/reviews.mjs, no count): the rating is one
   link to every review on Google; the excerpts sit in a closed disclosure beside it */
.hv .hv-rv-agg { display: inline-flex; flex: none; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; }
.hv .hv-rv-n { font-family: var(--serif); font-size: var(--fs-title); font-weight: 500; line-height: var(--lh-title); color: var(--ink); }
.hv .hv-rv-meta { display: flex; flex-direction: column; gap: 4px; }
.hv .hv-rv-on { font-size: var(--fs-small); line-height: 1.3; white-space: nowrap; color: var(--sub); }
.hv .hv-rv-all { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .hv .hv-rv-agg:hover .hv-rv-all { color: var(--accent); }
}
.hv .hv-rx-disc { margin: 0; }
.hv .hv-rx-note { margin-bottom: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--sub); }
.hv .hv-rx-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hv .hv-rx { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-input); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); }
.hv .hv-rx-q { font-family: var(--serif); font-size: var(--fs-heading); font-style: italic; line-height: var(--lh-heading); color: var(--ink); }
.hv .hv-rx-by { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--sub); }
@media (min-width: 768px) {
  .hv .hv-rx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the rail buttons (couples, and meet's heading row) are the glass secondary
   circle (44px, ink, a 1px line), not the dark on-photo glass of the slider base */
.hv .fb.hv-sl-prev, .hv .fb.hv-sl-next { border: 1px solid var(--ctl-edge); background: var(--ctl-solid); color: var(--ctl-ink); box-shadow: var(--ctl-shadow); transition: transform var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .fb.hv-sl-prev, .hv .fb.hv-sl-next { background: var(--ctl-fill); -webkit-backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat-sm)); backdrop-filter: blur(var(--g-blur-sm)) saturate(var(--g-sat-sm)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hv .fb.hv-sl-prev, .hv .fb.hv-sl-next { background: var(--ctl-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .hv .fb.hv-sl-prev, .hv .fb.hv-sl-next { background: var(--ctl-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hv .fb.hv-sl-prev:hover, .hv .fb.hv-sl-next:hover { border-color: var(--ctl-edge-hover); }
.hv .fb.hv-sl-prev:active, .hv .fb.hv-sl-next:active { transform: scale(0.985); }

/* ---- 8. meet the family behind Evara --------------------------------------------------------
   One slider (.hv-meet-sl is the [data-slider]): Raynu, the team group photograph,
   then the client-facing roster, whole cards with the previous and next buttons in
   the heading row (768px and up), no edge fade. Every card is one height, --meet-h,
   so the section fits one view, and each photograph keeps its own shape: the
   portraits 4:5 and the group 4:3 (audit 37). The office card leads with the static
   map (the live map loads only on request, assets/home-v5.js section 5); it is the
   last card of the rail below 1024px and stands fixed beside the slider from
   1024px: it sits in the track but is positioned against .hv-meet-grid, so the
   track neither scrolls nor clips it. */
.hv .hv-meet { --meet-h: 380px; padding-block: var(--sec-t) var(--sec-b) !important; background: var(--hv-bg); }
.hv .hv-meet-sl { --sl-gap: 12px; --sl-pad: var(--hv-gut); }
.hv .hv-meet-head { gap: 12px; padding-bottom: 24px; }
.hv .hv-meet-side { display: flex; align-items: center; gap: 16px; }
.hv .hv-meet-side .hv-sub { font-size: var(--fs-body); line-height: 1.5; color: var(--sub); }
.hv .hv-meet-ctl { display: none; gap: 8px; }
.hv .hv-meet-sl .hv-track { margin-inline: calc(-1 * var(--hv-gut)); }
.hv .hv-meet-card { position: relative; flex: none; height: var(--meet-h); border-radius: var(--r-card); overflow: hidden; }
.hv .hv-meet-card--p { width: calc(var(--meet-h) * 0.8); }
.hv .hv-meet-card--g { width: min(calc(var(--meet-h) * 4 / 3), 100%); }
.hv .hv-meet-card .hv-img { transition: scale 1600ms var(--hv-ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hv .hv-meet-card:hover .hv-img { scale: 1.04; }
}
/* the caption plates: the light glass's own solid colours, painted without blur (a
   rail's repeated plate, design-system 3.5) */
.hv .hv-meet-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: calc(var(--r-card) - 8px); background: var(--glasssolid); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px var(--glassedge); color: var(--ink); }
.hv .hv-meet-n { font-size: var(--fs-small); font-weight: 700; line-height: 1.3; color: var(--ink); }
.hv .hv-meet-r { font-size: var(--fs-small); line-height: 1.35; color: var(--ink2); }
.hv .hv-meet-office { flex: none; scroll-snap-align: start; box-sizing: border-box; width: 300px; height: var(--meet-h); display: flex; flex-direction: column; gap: 12px; padding: 8px 8px 20px; border-radius: var(--r-card); background: #2A1640; color: #FFFFFF; }
html[data-theme="dark"] .hv .hv-meet-office { background: linear-gradient(180deg, #2A1742 0%, #211235 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.08); }
.hv .hv-map { position: relative; flex: 1 1 0; min-height: 96px; border-radius: calc(var(--r-card) - 8px); overflow: hidden; isolation: isolate; background: #3A2356; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
/* the map deepened in dark; the live Google frame is drawn light, so it is
   inverted and turned back to its own hues (a dark map, the pin still red) */
html[data-theme="dark"] .hv .hv-map { filter: brightness(0.72) saturate(0.8); }
html[data-theme="dark"] .hv .hv-map iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.7) brightness(1.05); }
.hv .hv-map-ph { position: absolute; inset: 0; display: block; }
.hv .hv-map-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hv .hv-map-halo { position: absolute; left: 38%; top: 52%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: rgba(242,212,143,0.16); box-shadow: 0 0 0 1px rgba(242,212,143,0.3); }
.hv .hv-map-pin { position: absolute; left: 38%; top: 52%; display: flex; flex-direction: column; align-items: center; translate: -50% -100%; }
.hv .hv-map-tag { display: flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: var(--glassstrong); color: var(--ink); font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; white-space: nowrap; box-shadow: 0 6px 18px rgba(24,6,40,0.28); }
.hv .hv-map-pin svg { margin-top: 4px; }
/* the frame fades in over the static map, which is never hidden: a blocked
   frame fires load too, and a blank frame then leaves the static map showing */
.hv .hv-map iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.hv .hv-map.is-live iframe { opacity: 1; pointer-events: auto; }
.hv .hv-meet-addr { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.hv .hv-meet-ey { margin-bottom: 4px; letter-spacing: 2px; color: var(--hv-diamond); }
.hv .hv-meet-st { font-size: var(--fs-small); line-height: 1.45; font-weight: 600; color: #FFFFFF; }
.hv .hv-meet-lines { font-size: var(--fs-small); line-height: 1.5; color: rgba(255,255,255,0.76); }
.hv .hv-meet-foot { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }
.hv .hv-meet-foot .fbd { align-self: flex-start; }
.hv .hv-meet-call { padding-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .hv .hv-meet-card .hv-img, .hv .hv-map iframe { transition: none; }
}
@media (min-width: 768px) {
  .hv .hv-meet-sl { --sl-gap: 16px; }
  .hv .hv-meet-ctl { display: inline-flex; }
}
@media (min-width: 1024px) {
  .hv .hv-meet { --meet-h: min(400px, calc(100svh - 320px)); }
  .hv .hv-meet-sl { --sl-pad: 0px; }
  .hv .hv-meet-grid { position: relative; }
  .hv .hv-meet-sl .hv-track { margin-inline: 0 436px; }
  .hv .hv-meet-office { position: absolute; top: 0; right: 0; width: 420px; gap: 16px; padding: 12px 12px 24px; }
  .hv .hv-map { border-radius: calc(var(--r-card) - 12px); }
  .hv .hv-meet-addr, .hv .hv-meet-foot { padding: 0 20px; }
}

/* ---- 9. questions, answered ------------------------------------------------------------------
   The section rhythm (--sec-t, --sec-b) so it fits one view; the heading column
   is sticky beside the questions on desktop. */
.hv .hv-faq { background: var(--hv-bg); }
.hv .hv-faq-grid { display: flex; flex-direction: column; gap: 32px; padding-block: var(--sec-t) var(--sec-b); }
.hv .hv-faq-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (max-width: 767px) {
  .hv .hv-faq-head > .up:last-child { align-self: stretch; }
  .hv .hv-faq-head .hv-btn { display: flex; width: 100%; }
}
.hv .hv-faq-head .hv-sub { font-size: var(--fs-lead); line-height: 1.55; color: var(--sub); }
.hv .hv-faq-i { border-top: 1px solid var(--hv-line); }
.hv .hv-faq-i:last-child { border-bottom: 1px solid var(--hv-line); }
.hv .hv-faq-i > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; min-height: 44px; border-bottom: 0 !important; letter-spacing: normal; }
.hv .hv-faq-i > summary::-webkit-details-marker { display: none; }
.hv .hv-faq-qt { font-family: var(--hv-serif); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 500; color: var(--hv-ink); text-wrap: balance; }
.hv .hv-faq-pl { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--hv-card); box-shadow: inset 0 0 0 1px var(--hv-line-strong); color: var(--hv-ink); display: flex; align-items: center; justify-content: center; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
/* open: the x on the card colour, as drawn (the design's [open] tint is
   overridden by its own inline background) */
.hv .hv-faq-i[open] > summary .hv-faq-pl { transform: rotate(45deg); }
@media (hover: hover) { .hv .hv-faq-i > summary:hover .hv-faq-pl { background: var(--hv-bg-alt); } }
.hv .hv-faq-a { padding: 0 48px 24px 0; font-size: var(--fs-body); line-height: 1.6; color: var(--hv-body); letter-spacing: normal; }
@supports selector(::details-content) {
  .hv .hv-faq-i::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
  .hv .hv-faq-i[open]::details-content { block-size: auto; }
}
.hv { interpolate-size: allow-keywords; }
@media (min-width: 768px) {
  .hv .hv-faq-i > summary { padding: 24px 0; }
  .hv .hv-faq-a { padding-bottom: 24px; }
}
@media (min-width: 1024px) {
  .hv .hv-faq-grid { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 100px; align-items: start; }
  .hv .hv-faq-head { position: sticky; top: calc(var(--hv-clear) + 24px); }
  .hv .hv-faq-a { padding-bottom: 28px; }
}

/* ---- 10. begin your story ------------------------------------------------------------------
   Both faces in frame (c-cheek 12% 20% on phone, c-stage 50% 22% from 768px),
   the design's stronger scrim behind the words, two actions only. At least the
   viewport tall up to 740 / 760 / 800px (a minimum, never a fixed height), so it
   fits one view (design-system 4.13). */
.hv .hv-close { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: min(100vh, 740px); min-height: min(100svh, 740px); overflow: hidden; background: #2A1640; color: var(--hv-on-photo); isolation: isolate; }
html[data-theme="dark"] .hv .hv-close { background: linear-gradient(180deg, #2A1242 0%, #1C0B2D 100%); }
.hv .hv-close-photo { position: absolute; inset: 0; z-index: 0; }
.hv .hv-close-photo .hv-img { object-position: var(--hv-pos, 50% 50%); }
.hv .hv-close-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 62% 46% at 50% 74%, rgba(20,8,32,0.72) 0%, rgba(20,8,32,0.3) 55%, rgba(20,8,32,0) 80%), linear-gradient(180deg, rgba(20,8,32,0.05) 25%, rgba(20,8,32,0.72) 100%); }
.hv .hv-close-in { position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 200px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hv .hv-display { font-family: var(--hv-serif); font-weight: 400; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.025em; color: #FFFFFF; }
.hv .hv-close-p { font-size: var(--fs-lead); line-height: 1.5; color: rgba(255,255,255,0.92); }
.hv .hv-close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.hv .hv-close-cta .hv-btn { flex: 1 1 0; padding: 0 var(--g-s4); }
@media (min-width: 768px) {
  .hv .hv-close { min-height: min(100vh, 760px); min-height: min(100svh, 760px); }
  .hv .hv-close-photo .hv-img--ad { object-position: var(--hv-pos-wide, var(--hv-pos)); }
  .hv .hv-close-in { padding: 240px 20px 48px; gap: 24px; }
  .hv .hv-close-cta { width: auto; }
  .hv .hv-close-cta .hv-btn { flex: none; padding: 0 32px; }
}
@media (min-width: 1024px) {
  .hv .hv-close { min-height: min(100vh, 800px); min-height: min(100svh, 800px); }
  .hv .hv-close-in { max-width: 1000px; padding: 280px 20px 56px; }
}

/* ---- the photographs' depth: the design's img.px, drawn 14% large with a
   slow parallax as the section crosses the screen (transform only, so no
   layout moves); still when motion is reduced ------------------------------- */
.hv .hv-plan-photo .hv-img, .hv .hv-close-photo .hv-img { scale: 1.14; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hv .hv-plan-photo .hv-img, .hv .hv-close-photo .hv-img { animation: hv-px linear both; animation-timeline: view(); }
  }
}
@keyframes hv-px { from { translate: 0 -5%; } to { translate: 0 5%; } }

/* ---- motion off: the sections --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hv .hv-link .hv-arw, .hv .hv-faq-pl { transition: none !important; }
  .hv .hv-faq-i::details-content { transition: none !important; }
  .hv .up.up-wait, .hv .up.up-in { opacity: 1; translate: none; transition: none; }
}

/* ---- 768px and up: tablet, two columns where desktop has two or more ------------------------ */
@media (min-width: 768px) {
  .hv .hv-head-row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; }
}

/* @v5-components:start */
/* ---- v5 components: the site's shared pieces the homepage also shows -------------------------
   Rendered by scripts/lib-v5.mjs (routes, steps, compact checks and visibility,
   stories, disclosures, pictures, the section shell and its type), styled ONCE
   here (ruling R1) and extracted for every tv5 page by scripts/gen-theme-v5.mjs.
   The FAQ, the close band and the dock keep the homepage's own sections 9, 10
   and 21. Components the homepage does not show live in scripts/theme-v5/.
   Spacing on the 4px grid, radius tokens with concentric corners, 360ms. */

/* the section shell: rhythm on the inner box, the top clears the header pills */
.hv { --sec-t: 72px; --sec-b: 8px; --rail-h: min(420px, calc(100svh - 379px)); }
.hv .tv-sec { background: var(--hv-bg); }
.hv .tv-sec--alt { background: var(--hv-bg-alt); }
.hv .tv-sec-in { padding-block: var(--sec-t) var(--sec-b); }
.hv .tv-sec--seam .tv-sec-in { padding-bottom: 40px; }
.hv .tv-head { margin-bottom: 24px; }
.hv .tv-head .hv-lead { max-width: 640px; }
.hv .tv-head-t { display: flex; flex-direction: column; gap: 12px; }

/* type: the functional heading, labels and figures inside graphics (no shine) */
.hv .tv-h2f { font-family: var(--serif); font-weight: 400; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.02em; color: var(--ink); text-align: left; }
.hv .tv-h2f em { font-style: italic; font-weight: inherit; color: var(--gold); }
.hv .tv-lbl { display: block; font-family: var(--sans); font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold); }
.hv .tv-fig { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--fs-heading); line-height: var(--lh-heading); white-space: nowrap; color: var(--ink); }
.hv .tv-body { font-size: var(--fs-body); line-height: 1.6; color: var(--ink2); }
.hv .tv-meta { display: block; font-size: var(--fs-small); line-height: 1.5; color: var(--sub); }
.hv .tv-pill { display: inline-flex; align-self: flex-start; align-items: center; min-height: 32px; padding: 0 var(--g-s3); border: 1px solid var(--ctl-edge); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; line-height: 1.2; background: var(--ctl-fill); color: var(--ctl-ink); white-space: nowrap; }
.hv .tv-pill--gold { background: color-mix(in srgb, var(--v5-gold-l) 14%, transparent); border-color: color-mix(in srgb, var(--v5-gold-l) 36%, transparent); color: var(--hv-gold-on-dark); }
.hv .tv-pill--opt { background: transparent; border-color: var(--v5-line-strong); color: var(--v5-body); }

/* pictures: pool frames, focal crops, the frame's own colour before paint */
.hv .tv-pic { position: relative; overflow: hidden; background-color: var(--lq, var(--ph)); }
html[data-theme="dark"] .hv .tv-pic { background-color: var(--lqd, var(--ph)); }
.hv .tv-pic picture { position: absolute; inset: 0; }
.hv .tv-pic .hv-img { object-position: var(--hv-pos, 50% 50%); }
.hv .tv-pic--full { position: absolute; inset: 0; }
.hv .tv-pic--split { width: 100%; aspect-ratio: 1; border-radius: var(--r-card); }
.hv .tv-pic--framed { width: 100%; aspect-ratio: 3 / 2; max-height: 480px; border-radius: var(--r-card); }
.hv .tv-pic--rail-item { height: var(--rail-h); aspect-ratio: 0.695; }
.hv .tv-pic--card { width: 100%; aspect-ratio: 16 / 9; max-height: 180px; border-radius: 0; }
.hv .tv-pic--thumb { flex: none; width: 64px; height: 64px; border-radius: var(--r-input); }

/* the segmented control: native radios in .hv-opt labels, switched by :has */
.hv .tv-seg { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0 0 16px; padding: 4px; border: 0; border-radius: var(--r-pill); }
/* it sits on a section surface and reads as one: its glass is the solid twin,
   so the header keeps the frosted budget (material-motion: at most 3 at once) */
.hv .tv-seg.hv-glassm { background: var(--glasssolid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hv .tv-seg .hv-opt { flex: 1 1 auto; padding: 0 var(--g-s3); border-color: transparent; background: transparent; box-shadow: none; white-space: nowrap; }
.hv .tv-cmp .tv-seg, .hv .tv-tiers .tv-seg { flex-wrap: nowrap; }
.hv .tv-seg .hv-opt:has(:checked) { color: var(--g-btn-ink); background: var(--g-btn); border-color: var(--g-btn-edge); box-shadow: var(--g-btn-shadow); }
.hv .tv-seg .hv-opt:has(:checked):hover { border-color: var(--g-btn-edge); }
.hv .tv-seg .hv-opt:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
@supports not selector(:has(*)) {
  .hv .tv-seg { display: none; }
}

/* the table base: explicit roles in the markup; labelled rows on phones */
.hv .tv-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.hv .tv-tbl :is(th, td) { padding: 8px 0; text-align: left; vertical-align: top; font-weight: 400; }
.hv .tv-tbl .tv-lbl--phone { margin-bottom: 4px; }
.hv .tv-tbl .tv-meta { margin-top: 4px; }
.hv .tv-tbl-acts .fb, .hv .tv-tbl-acts .fbd { white-space: normal; text-align: center; }

/* routes: Membership or Personalised matchmaking (design-system 4.1). Phone: one
   route at a time as a card of labelled rows; 768px and up: two aligned cards */
.hv .tv-cmp-t { display: block; padding: 16px 20px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2), var(--elev); }
.hv .tv-cmp-t :is(thead, tbody, tr) { display: block; }
.hv .tv-cmp-t :is(th, td) { display: block; }
.hv .tv-cmp-t thead th { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 4px; padding: 0 0 12px; }
/* the thumb's top-left corner follows the card's (its radius less the inset) */
.hv .tv-cmp-t thead th .tv-thumb { grid-row: 1 / span 2; width: 52px; height: 52px; border-top-left-radius: calc(var(--r-card) - 20px); }
.hv .tv-cmp-t thead th .tv-pill { min-height: 28px; justify-self: start; }
.hv .tv-cmp-t .tv-tbl-corner { display: none; }
.hv .tv-cmp-t tbody tr { padding: 8px 0; box-shadow: inset 0 1px 0 var(--line2); }
.hv .tv-cmp-t tbody th { padding: 0 0 4px; }
.hv .tv-cmp-t tbody td { padding: 0; }
.hv .tv-cmp-t .tv-tbl-acts { padding-top: 12px; }
.hv .tv-cmp-t .tv-tbl-acts td:first-child { display: none; }
.hv .tv-cmp-t .tv-tbl-acts td { padding: 0; }
.hv .tv-cmp-t .tv-tbl-acts td + td { margin-top: 8px; }
.hv .tv-col-t { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 500; line-height: var(--lh-heading); color: var(--ink); }
@supports selector(:has(*)) {
  .hv .tv-cmp:has(input[value="m"]:checked) [data-col="p"],
  .hv .tv-cmp:has(input[value="p"]:checked) [data-col="m"] { display: none; }
  .hv .tv-cmp .tv-tbl .tv-lbl--phone { display: none; }
  .hv .tv-cmp:has(input[value="p"]:checked) .tv-cmp-t { background: var(--amx); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(201,169,110,0.35), var(--elev); }
  .hv .tv-cmp:has(input[value="p"]:checked) .tv-cmp-t :is(.tv-col-t, .tv-fig) { color: #FFFFFF; }
  .hv .tv-cmp:has(input[value="p"]:checked) .tv-cmp-t .tv-lbl { color: var(--hv-diamond); }
  .hv .tv-cmp:has(input[value="p"]:checked) .tv-cmp-t .tv-meta { color: rgba(255,255,255,0.72); }
  .hv .tv-cmp:has(input[value="p"]:checked) .tv-cmp-t tbody tr { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
  .hv .tv-cmp:has(input[value="p"]:checked) .tv-cmp-t { --focus: #E2C99A; }
}
.hv .tv-cmp-t .tv-tbl-acts a { width: 100%; }

/* steps: three steps, all legible (design-system 4.3); the app variant adds
   the sample preview beside them from 768px */
.hv .tv-tl { display: flex; flex-direction: column; gap: 24px; counter-reset: tvstep; }
.hv .tv-tl-i { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: baseline; counter-increment: tvstep; }
.hv .tv-tl-n { grid-row: 1 / span 2; font-family: var(--serif); font-weight: 500; font-size: var(--fs-heading); line-height: var(--lh-heading); color: var(--accent); }
.hv .tv-tl-n::before { content: counter(tvstep, decimal-leading-zero); }
.hv .tv-tl-t { font-family: var(--serif); font-weight: 500; font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: -0.01em; color: var(--ink); }
.hv .tv-tl .tv-body { grid-column: 2; max-width: 440px; }
/* a step that chooses the preview is a label: a 44px tap target at every width,
   its 8px each way given back by its margin, so no line moves (review round 2
   B10: 34px at 390) */
.hv .tv-tl--sel label { display: inline-block; padding-block: 8px; margin-block: -8px; cursor: pointer; }
.hv .tv-ax-stage { display: none; }
@media (max-width: 767px) {
  .hv .tv-tl-r { display: none; }
}

/* the app excerpt: a designed sample screen, never a screenshot; blurred
   discs stand in for people, and every screen is labelled Sample */
.hv .tv-ax { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 16px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2), var(--elev); }
.hv .tv-ax-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hv .tv-ax-app { font-family: var(--serif); font-size: var(--fs-heading); font-weight: 500; line-height: var(--lh-heading); color: var(--ink); }
.hv .tv-ax-sample { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 700; color: var(--sub); box-shadow: inset 0 0 0 1px var(--linestrong); }
.hv .tv-ax-body { display: flex; flex-direction: column; gap: 12px; }
.hv .tv-ax-row, .hv .tv-ax-card { display: flex; align-items: center; gap: 12px; }
.hv .tv-ax-card { padding: 12px; border-radius: calc(var(--r-card) - 16px); background: var(--tint); }
/* the sample screens are built from the site's own words and icons (lib-v5 AX): rows, cards, a field */
.hv .tv-ax-lines { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.hv .tv-ax-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hv .tv-ax-li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 12px 8px 8px; border-radius: var(--r-input); background: var(--tint); }
.hv .tv-ax-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); color: var(--gold); }
.hv .tv-ax-ic .evara-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hv .tv-ax-t { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--ink); }
.hv .tv-ax-s { font-size: var(--fs-small); line-height: 1.3; color: var(--sub); }
.hv .tv-ax-ok { flex: none; display: inline-flex; color: var(--accent); }
.hv .tv-ax-ok .evara-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv .tv-ax-hint { color: var(--mute); font-weight: 500; }
.hv .tv-ax-send { background: var(--btn); color: var(--btnink); box-shadow: none; }
.hv .tv-ax-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hv .tv-ax-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; background: var(--tint); color: var(--accent); }
.hv .tv-ax-chip .evara-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hv .tv-ax-h { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--ink); }
.hv .tv-ax-btn { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-button); font-weight: var(--fw-button); background: var(--btn); color: var(--btnink); }
.hv .tv-ax-msg { align-self: flex-start; max-width: 80%; padding: 8px 12px; border-radius: calc(var(--r-card) - 16px); font-size: var(--fs-body); line-height: 1.4; background: var(--tint); color: var(--ink); }
.hv .tv-ax-msg--me { align-self: flex-end; background: var(--btn); color: var(--btnink); }
.hv .tv-ax-type { padding: 6px 6px 6px 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); }

/* compact checks and visibility (the homepage's care section) */
.hv .tv-chk-list, .hv .tv-chk-list tbody { display: block; width: 100%; border-collapse: separate; border-spacing: 0; }
.hv .tv-chk-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "e e"; align-items: center; gap: 4px 12px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
.hv .tv-chk-r:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.hv .tv-chk-r > * { display: block; padding: 0; text-align: left; }
.hv .tv-chk-n { grid-area: n; font-size: var(--fs-body); font-weight: 600; line-height: 1.5; color: var(--ink); }
.hv .tv-chk-s { grid-area: s; }
.hv .tv-chk-e { grid-area: e; font-size: var(--fs-body); line-height: 1.5; color: var(--ink2); }
@media (max-width: 767px) {
  .hv .tv-chk-r { padding-block: 8px; }
  .hv .tv-chk-r .tv-pill { min-height: 28px; }
}
.hv .tv-vis--compact { display: block; }
.hv .tv-vis--compact :is(thead, tbody, tr, th, td) { display: block; }
.hv .tv-vis--compact thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hv .tv-vis--compact tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
.hv .tv-vis--compact .tv-vis-n { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.hv .tv-vis--compact td { padding: 0; color: var(--ink2); }
.hv .tv-vis--compact .tv-lbl--phone { display: inline; margin: 0 8px 0 0; font-size: var(--fs-label); letter-spacing: 1px; }

/* the disclosure: long-form kept in the same HTML, behind a complete summary */
.hv .tv-disc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hv .tv-disc > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 12px 0; list-style: none; cursor: pointer; }
.hv .tv-disc > summary::-webkit-details-marker { display: none; }
.hv .tv-disc-s { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--ink); }
.hv .tv-disc[open] > summary .hv-faq-pl { transform: rotate(45deg); }
.hv .tv-disc-b { padding: 0 0 16px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink2); }
.hv .tv-disc-list { display: flex; flex-direction: column; gap: 8px; }
.hv .tv-disc-list b { font-weight: 600; color: var(--ink); }
@supports selector(::details-content) {
  .hv .tv-disc::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
  .hv .tv-disc[open]::details-content { block-size: auto; }
}

/* stories: real couples on rail-item photographs, the plate painted without
   blur (a repeated item, design-system 3.5) */
.hv .tv-stories { --sl-gap: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 12px; }
.hv .tv-stories > .hv-track { grid-column: 1 / -1; }
.hv .tv-story { position: relative; flex: none; margin: 0; overflow: hidden; border-radius: var(--r-card); }
.hv .tv-story .tv-pic--rail-item { border-radius: 0; }
.hv .tv-story-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-input) var(--r-input) calc(var(--r-card) - 12px) calc(var(--r-card) - 12px); }
.hv .tv-story-n { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: rgba(255,255,255,0.86); }
.hv .tv-story-q { font-family: var(--serif); font-size: var(--fs-heading); font-style: italic; font-weight: 500; line-height: var(--lh-heading); color: #FFFFFF; text-wrap: balance; }

/* rail controls under a rail: the dots, then the previous and next pills, in
   one row that keeps its height before the script builds the dots */
.hv .tv-rail-ctl { grid-column: 2; grid-row: 2; display: flex; gap: 8px; justify-content: flex-end; }
/* the rail's own controls and a table's action pills sit on solid surfaces, so
   they draw no blur and a page keeps its frosted budget for the header */
.hv .tv-rail-ctl .fb { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ctl-solid); }
.hv .tv-tbl .tv-tbl-acts :is(.fb, .fbd) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* every dot keeps its full 44px hit area; a long rail (over six) moves by its buttons only */
.hv .tv-stories .hv-sl-dot { flex: none; }
.hv .tv-stories--many .hv-sl-dots { display: none; }
.hv .tv-stories .hv-sl-dots, .hv .tv-tbl-rail .hv-sl-dots { grid-column: 1; grid-row: 2; justify-content: flex-start; margin: 0; }

@media (min-width: 768px) {
  .hv { --sec-t: 96px; --sec-b: 44px; --rail-h: min(400px, calc(100svh - 316px)); }
  .hv .tv-sec--seam .tv-sec-in { padding-bottom: 72px; }
  .hv .tv-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
  .hv .tv-head .hv-lead { flex: 0 1 480px; }
  .hv .tv-pic--split { aspect-ratio: 4 / 5; width: auto; height: min(calc(100vh - 140px), 700px); height: min(calc(100svh - 140px), 700px); }
  .hv .tv-pic--framed { max-height: min(480px, calc(100vh - 332px)); max-height: min(480px, calc(100svh - 332px)); }
  .hv .tv-pic--rail-item { aspect-ratio: 0.726; }
  .hv .tv-pic--card { max-height: 200px; }
  .hv .tv-pic--thumb { width: 72px; height: 72px; }
  .hv .tv-pic .hv-img--ad { object-position: var(--hv-pos-wide, var(--hv-pos, 50% 50%)); }

  .hv .tv-cmp .tv-seg { display: none; }
  /* two aligned cards: every cell paints its column, so the columns read as
     cards and every text sits on its own surface */
  .hv .tv-cmp-t { display: grid; grid-template-columns: 200px repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); column-gap: 12px; padding: 0; background: none; box-shadow: none; filter: drop-shadow(0 8px 18px rgba(26,13,46,0.08)); }
  html[data-theme="dark"] .hv .tv-cmp-t { filter: drop-shadow(0 16px 40px rgba(4,2,8,0.4)); }
  .hv .tv-cmp-t :is(thead, tbody, tr) { display: contents; }
  .hv .tv-cmp-t :is(th, td) { grid-row: var(--r); padding: 12px 24px; }
  .hv .tv-cmp-t [data-col="m"] { background: var(--glasssolid); box-shadow: inset 1px 0 0 var(--line2), inset -1px 0 0 var(--line2); }
  .hv .tv-cmp-t [data-col="p"] { background: var(--hv-plum); box-shadow: inset 1px 0 0 rgba(201,169,110,0.35), inset -1px 0 0 rgba(201,169,110,0.35); }
  html[data-theme="dark"] .hv .tv-cmp-t [data-col="p"] { background: #2A1242; }
  .hv .tv-cmp-t thead [data-col] { border-radius: var(--r-card) var(--r-card) 0 0; }
  .hv .tv-cmp-t thead [data-col="m"] { box-shadow: inset 1px 1px 0 var(--line2), inset -1px 0 0 var(--line2); }
  .hv .tv-cmp-t thead [data-col="p"] { box-shadow: inset 1px 1px 0 rgba(201,169,110,0.35), inset -1px 0 0 rgba(201,169,110,0.35); }
  .hv .tv-cmp-t .tv-tbl-acts [data-col] { border-radius: 0 0 var(--r-card) var(--r-card); }
  .hv .tv-cmp-t .tv-tbl-acts [data-col="m"] { box-shadow: inset 1px -1px 0 var(--line2), inset -1px 0 0 var(--line2) !important; }
  .hv .tv-cmp-t .tv-tbl-acts [data-col="p"] { box-shadow: inset 1px -1px 0 rgba(201,169,110,0.35), inset -1px 0 0 rgba(201,169,110,0.35) !important; }
  .hv .tv-cmp-t tbody tr > th { padding-top: 16px; }
  .hv .tv-cmp-t tr > :nth-child(1) { grid-column: 1; padding-inline: 0; }
  .hv .tv-cmp-t tr > :nth-child(2) { grid-column: 2; }
  .hv .tv-cmp-t tr > :nth-child(3) { grid-column: 3; }
  .hv .tv-cmp-t .tv-tbl-corner, .hv .tv-cmp-t .tv-tbl-acts td:first-child { display: block; }
  .hv .tv-cmp-t thead th { padding: 24px 24px 16px; }
  .hv .tv-cmp-t thead .tv-tbl-corner { padding: 0; }
  .hv .tv-cmp-t tbody tr:not(.tv-tbl-acts) > [data-col="m"] { box-shadow: inset 0 1px 0 var(--line2), inset 1px 0 0 var(--line2), inset -1px 0 0 var(--line2); }
  .hv .tv-cmp-t tbody tr:not(.tv-tbl-acts) > [data-col="p"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 1px 0 0 rgba(201,169,110,0.35), inset -1px 0 0 rgba(201,169,110,0.35); }
  .hv .tv-cmp-t tbody tr > th { box-shadow: inset 0 1px 0 var(--line); }
  .hv .tv-cmp-t .tv-tbl-acts td { padding: 16px 24px 24px; }
  .hv .tv-cmp-t .tv-tbl-acts td:first-child { box-shadow: none; }
  .hv .tv-cmp-t .tv-tbl-acts td + td { margin-top: 0; }
  .hv .tv-cmp [data-col] { display: block !important; }
  .hv .tv-cmp [data-col="p"], .hv .tv-cmp [data-col="p"] :is(.tv-col-t, .tv-fig) { color: #FFFFFF; }
  .hv .tv-cmp [data-col="p"] .tv-meta { color: rgba(255,255,255,0.72); }
  .hv .tv-cmp [data-col="p"] { --focus: #E2C99A; }
  .hv .tv-cmp thead [data-col] { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .hv .tv-cmp-t thead th .tv-thumb { width: 72px; height: 72px; border-top-left-radius: calc(var(--r-card) - 24px); }
  .hv .tv-col-t { flex-basis: 100%; font-size: var(--fs-heading); }
  .hv .tv-cmp .tv-lbl--phone { display: none; }

  .hv .tv-steps:not(.tv-steps--app) .tv-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .hv .tv-steps:not(.tv-steps--app) .tv-tl-i { grid-template-columns: minmax(0, 1fr); padding-top: 16px; box-shadow: inset 0 2px 0 var(--tint); }
  .hv .tv-steps:not(.tv-steps--app) .tv-tl-n { grid-row: auto; }
  .hv .tv-steps:not(.tv-steps--app) .tv-tl .tv-body { grid-column: 1; }
  .hv .tv-steps--app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: center; }
  .hv .tv-steps--app .tv-tl { gap: 8px; }
  /* the steps choose the sample screen beside them (phones show no preview) */
  .hv .tv-tl--sel .tv-tl-i { padding: 16px; border-radius: var(--r-input); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .hv .tv-tl--sel label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .hv .tv-tl--sel .tv-tl-i:has(:checked) { background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
  .hv .tv-tl--sel .tv-tl-i:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) {
    .hv .tv-tl--sel .tv-tl-i:hover { box-shadow: inset 0 0 0 1px var(--linestrong); }
  }
  .hv .tv-ax-stage { position: relative; display: grid; }
  .hv .tv-ax { grid-area: 1 / 1; min-height: 300px; padding-bottom: 68px; visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
  .hv .tv-ax[data-step="1"],
  .hv .tv-steps:has(.tv-tl-r[value="2"]:checked) .tv-ax[data-step="2"],
  .hv .tv-steps:has(.tv-tl-r[value="3"]:checked) .tv-ax[data-step="3"] { visibility: visible; opacity: 1; transition: opacity var(--dur) var(--ease), visibility 0s; }
  .hv .tv-steps:has(.tv-tl-r[value="2"]:checked) .tv-ax[data-step="1"],
  .hv .tv-steps:has(.tv-tl-r[value="3"]:checked) .tv-ax[data-step="1"] { visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
  .hv .tv-ax-pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
  .hv .tv-ax-pause[hidden] { display: none; }
  /* a 44px control on the preview card: the frost's solid twin, no blur */
  .hv .tv-ax-pause.hv-frost { background: rgba(253,252,248,0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv .tv-ax-pause > span { width: 12px; height: 14px; box-shadow: inset 4px 0 0 currentColor, inset -4px 0 0 currentColor; }
  .hv .tv-ax-pause[data-state="paused"] > span { width: 0; height: 0; box-shadow: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; translate: 1px 0; }

  .hv .tv-chk-c { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hv .tv-chk-r { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; grid-template-areas: "n e s"; gap: 16px; }
  .hv .tv-vis--compact tbody tr { grid-template-columns: 160px repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hv .tv-vis--compact .tv-lbl--phone { display: none; }
  .hv .tv-vis--compact thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hv .tv-vis--compact thead tr { display: grid; grid-template-columns: 160px repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 8px; }
  .hv .tv-vis--compact thead th { padding: 0; font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold); }

  .hv .tv-stories { --sl-gap: 16px; }
  .hv .tv-cmp-t .tv-tbl-acts a { width: auto; }
  .hv .tv-story-q { font-size: var(--fs-heading); }
  /* the cells keep their inner padding (the phone card rule names tbody) */
  .hv .tv-cmp-t tbody :is(th, td) { padding: 12px 24px; }
}
@media (min-width: 1024px) {
  .hv .tv-pic--framed { width: auto; max-width: 720px; }
  .hv .tv-stories:not(.tv-stories--many) .tv-rail-ctl, .hv .tv-stories .hv-sl-dots { display: none; }
  /* two couples sit centred in the column */
  .hv .tv-stories[data-count="2"] > .hv-track { justify-content: center; }
}
@media (hover: hover) and (pointer: fine) {
  .hv .tv-story .hv-img { transition: scale 1600ms var(--hv-ease); }
  .hv .tv-story:hover .hv-img { scale: 1.05; }
}
@media (prefers-reduced-motion: reduce) {
  .hv .tv-tl--sel .tv-tl-i, .hv .tv-ax, .hv .tv-story .hv-img, .hv .tv-disc::details-content { transition: none !important; }
  .hv .tv-story:hover .hv-img { scale: none; }
}
/* the hero headline of a tv5 page catches the light every 9 s once the page
   has loaded (the components script adds .hv-shine-loop) */
@media (prefers-reduced-motion: no-preference) {
  .hv .tv-h1.hv-shine-loop, .hv .tv-h1.hv-shine-loop em { animation: hv-shine-loop 2340ms cubic-bezier(.4,0,.2,1) 1.4s both; }
}
/* more questions: the rest of a long FAQ in one closed disclosure (R16) */
.hv .hv-faq-more { border-bottom: 1px solid var(--hv-line); }
.hv .hv-faq-more > summary { padding: 20px 0; }
.hv .hv-faq-more > summary .tv-disc-s { font-family: var(--hv-serif); font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 500; color: var(--hv-ink); }
@media (min-width: 768px) {
  .hv .hv-faq-more > summary { padding: 24px 0; }
}
/* a question led by its icon */
.hv .hv-faq-i > summary .tv-faq-ic { flex: none; }
.hv .hv-faq-i > summary:has(.tv-faq-ic) .hv-faq-qt { flex: 1 1 auto; }
/* faqList cols: 2: two independent accordions from 1024px, the head above */
.hv .tv-faq-2 .tv-faq-col .hv-faq-i:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .hv .tv-faq-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
  .hv .tv-faq-2 > :not(.tv-faq-col) { grid-column: 1 / -1; }
  .hv .hv-faq-grid:has(> .tv-faq-2) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hv .hv-faq-grid:has(> .tv-faq-2) .hv-faq-head { position: static; }
}
/* a plain link in prose on a page whose main is the .hv wrapper */
:where(main.hv) a:not([class]) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hv .hv-faq-more-b .hv-faq-i:last-child { border-bottom: 0; }
/* the answer card: an AI-answer anchor heading and its answer. One quiet glass panel (the purple solid in dark, never black) with a
   large radius; the whole answer opens behind a pill, in the same HTML (site-polish-sitewide-1010, D5). */
.hv .tv-anscard { display: flex; flex-direction: column; gap: 12px; max-width: 760px; padding: 28px; border-radius: var(--r-hc); background: var(--glasssolid); box-shadow: inset 0 0 0 1px var(--glassedge); }
.hv .tv-anscard-h { font-family: var(--serif); font-weight: 500; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--ink); text-wrap: balance; }
.hv .tv-anscard-p { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink2); }
.hv .tv-anscard-p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* brief 8b: the card shows one line; the whole answer opens behind one quiet pill (here and in every hero's .tv-ans) */
.hv .tv-ans-more { border: 0; }
.hv .tv-ans-more:last-child { border-bottom: 0; }
.hv .tv-ans-more > summary { display: inline-flex; width: auto; align-self: flex-start; gap: 10px; min-height: 44px; padding: 0 8px 0 18px; border-radius: var(--r-pill); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line2); }
.hv .tv-ans-more .hv-faq-qt { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.hv .tv-ans-more .hv-faq-pl { width: 28px; height: 28px; background: var(--card); }
.hv .tv-ans-more[open] > summary { margin-bottom: 4px; }
.hv .tv-ans-more > .hv-faq-a { padding: 12px 0 0; font-size: var(--fs-body); max-width: 68ch; }
.hv .tv-ans-more > .hv-faq-a > * + * { margin-top: 12px; }
@media (min-width: 768px) {
  .hv .tv-anscard { padding: 40px; }
}
/* split: a photograph beside the words; phones stack, the photograph first
   (.tv-split--rev: the words first, because lib-v5 split() writes the words
   first in the markup for it: a page that paints while its HTML is still
   arriving shows the first child alone, and a photograph that is first in the
   markup but second on screen jumped under the words when they arrived, 0.26
   on a throttled phone. On a tablet and up the grid places both explicitly.) */
.hv .tv-split { display: flex; flex-direction: column; gap: 24px; }
.hv .tv-split-b { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.hv .tv-split-b > [data-graphic] { align-self: stretch; }
/* the icon row: at most four, one icon family, one stroke */
.hv .tv-icons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hv .tv-icon { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; padding: 16px 24px; border-radius: var(--r-input); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); }
/* the icon chip sits further in than its card's corner reaches (padding over
   1.5 times the card radius), so both take the input radius */
.hv .tv-icon-ic { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-input); background: var(--tint); color: var(--gold); }
.hv .tv-icon-ic .evara-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hv .tv-icon-t { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; color: var(--ink); }
.hv .tv-icon-d { font-size: var(--fs-body); line-height: 1.4; color: var(--ink2); }
@media (max-width: 767px) {
  .hv .tv-split--nophone > .tv-pic { display: none; }
}
@media (min-width: 768px) {
  .hv .tv-split { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; }
  .hv .tv-split--rev { grid-template-columns: minmax(0, 1fr) auto; }
  .hv .tv-split--rev > .tv-pic { grid-column: 2; grid-row: 1; }
  .hv .tv-split--rev > .tv-split-b { grid-column: 1; grid-row: 1; }
  .hv .tv-icons { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
  .hv .tv-icon { grid-template-columns: minmax(0, 1fr); row-gap: 8px; align-content: start; padding: 24px; }
  .hv .tv-icon-ic { grid-row: auto; width: 48px; height: 48px; }
  .hv .tv-icon-t { margin-top: 8px; }
}
@media (min-width: 1024px) {
  .hv .tv-split { gap: 72px; }
}
/* a photograph beside the words never makes its section taller than the screen (1440x900 one-screen rule, D10) */
@media (min-width: 1024px) {
  .hv :is(.tv-split, .hv-where-grid, .hv-invite-grid) > :is(.tv-pic, .hv-where-pic, .hv-invite-pic) { max-height: calc(100vh - 260px); max-height: calc(100svh - 260px); }
}
/* a card beside a photograph is the same height as it: heading above, line and pill below */
@media (min-width: 1024px) {
  .hv .tv-split > .tv-split-b { align-self: stretch; }
  .hv .tv-split > .tv-split-b > .tv-anscard { flex: 1 1 auto; max-width: none; }
  .hv .hv-where-grid > .hv-where-t { align-self: stretch; }
  .hv .hv-where-t > .tv-anscard { flex: 1 1 auto; }
  .hv .tv-split > .tv-split-b > .tv-anscard, .hv .hv-where-t > .tv-anscard { justify-content: center; gap: 20px; padding: 56px; }
  .hv .tv-split > .tv-split-b > .tv-anscard > .tv-anscard-h, .hv .hv-where-t > .tv-anscard > .tv-anscard-h { font-size: var(--fs-title); }
  .hv .tv-split > .tv-split-b > .tv-anscard > .tv-anscard-p, .hv .hv-where-t > .tv-anscard > .tv-anscard-p { font-size: var(--fs-lead); max-width: 34ch; }
}
/* an answer card with its one companion graphic (R16 (6)) */
.hv .tv-ans-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hv .tv-ans-duo > .tv-anscard { max-width: none; }
/* phones: a wider measure for the fixed answer text, a tighter pair */
@media (max-width: 767px) {
  .hv .tv-anscard { padding: 24px 20px; border-radius: var(--r-card); }
  .hv .tv-ans-duo { gap: 12px; }
}
@media (min-width: 1024px) {
  .hv .tv-ans-duo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
}
/* a link inside text on a photograph or a deep amethyst panel */
.hv .hv-onphoto p a:not([class]), .hv .hc p a:not([class]), .hv .hv-amx p a:not([class]),
#main .hv .hv-onphoto p a:not([class]), #main .hv .hc p a:not([class]), #main .hv .hv-amx p a:not([class]) { color: #E8D2A6; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* a row of link chips (in-page contents, the homepage link groups) */
.hv .tv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hv .tv-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--g-s4); border: 1px solid var(--ctl-edge); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; line-height: 1.2; color: var(--ctl-ink); text-decoration: none; background: var(--ctl-fill); box-shadow: var(--ctl-shadow); touch-action: manipulation; transition: background var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease), transform var(--g-dur-fast) var(--g-ease); }
.hv .tv-chip:active { transform: scale(0.985); }
.hv .tv-chip[aria-pressed="true"], .hv .tv-chip.is-on { color: var(--g-btn-ink); background: var(--g-btn); border-color: var(--g-btn-edge); }
@media (hover: hover) and (pointer: fine) {
  .hv .tv-chip:hover { border-color: var(--ctl-edge-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .hv .tv-chip { transition: none; }
  .hv .tv-chip:active { transform: none; }
}
/* the header's theme toggle keeps its pill through the token (its source,
   assets/design-tokens.css, is pinned byte-identical, so the token is set here) */
html.hv-home .theme-toggle, html.tv5 .theme-toggle { border-radius: var(--r-pill); }
/* @v5-components:end */

/* ---- 20. the shared footer, the one footer on every page ----------------------------------------
   The footer of every page with a header, this one included: rendered by
   scripts/lib-site-footer.mjs into the SITE-FOOTER region (scripts/gen-header.mjs)
   and styled only here; scripts/gen-theme-v5.mjs extracts this block for html.tv5.
   The portal's dark amethyst glass band in both themes: the footer carries the dark
   theme's own values (the --v5-* and --g-* it reads are re-bound on it below, so a light
   page does not turn it pale), a violet light and a faint gold light behind the glass, a
   1px hairline and the specular top edge. Gold group headings (--v5-gold-l), 44px link
   rows, the tertiary underline on the quiet links, the primary pill on its one button.
   Its layout classes are its own (sf-), so the legacy
   footer rules the homepage's older sheets still carry cannot reach it; the
   legacy names a guard or a script keys on (.ftci, .ftb, .sla-badge) are set in
   full here. Phone: the logo and line, the primary routes, "Visit or call", six
   closed groups (native details; assets/home-v5.js section F), the legal lines.
   From 768px the groups stand open in columns beside the contact group. */
html.hv-home footer.site-ft {
  --v5-ink: #FAF7F1; --v5-body: #BFB5CE; --v5-muted: #A398B3;
  --v5-line: rgba(226,201,154,0.13); --v5-line-strong: rgba(226,201,154,0.22);
  --v5-gold: #C9A96E; --v5-gold-l: #E2C99A; --v5-focus: #E5BF73; --focus: var(--v5-focus);
  --g-solid: #1D0E2E; --g-tint: rgba(29,14,46,0.66);
  --g-hl: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,255,255,0.03);
  display: block;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--v5-line);
  padding: 40px max(var(--gut), calc((100% - 1296px) / 2)) calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--g-solid);
  background: radial-gradient(900px 420px at 15% 0%, color-mix(in srgb, var(--v5-am-l) 30%, transparent), transparent 70%), radial-gradient(700px 360px at 100% 100%, color-mix(in srgb, var(--v5-gold) 8%, transparent), transparent 72%), var(--g-solid);
  box-shadow: var(--g-hl);
  color: var(--v5-ink);
  font-family: var(--sans);
  font-size: var(--fs-caption);
  line-height: 1.5;
  text-align: left;
  interpolate-size: allow-keywords;
}
html.hv-home .site-ft p { margin: 0; }
html.hv-home .site-ft ul { margin: 0; padding: 0; list-style: none; }
html.hv-home .site-ft li { margin: 0; padding: 0; }
html.hv-home .site-ft a { text-decoration: none; transform: none; transition: color var(--g-dur-fast) var(--g-ease), text-decoration-color var(--g-dur-fast) var(--g-ease); }
html.hv-home .site-ft .sf-top { display: flex; flex-direction: column; margin: 0; }
/* the footer mark: 05 Compact White at 200 CSS px (lib-logo.mjs) on the amethyst footer */
html.hv-home .site-ft .sf-logo { display: inline-flex; align-items: flex-start; padding: 12px 0; }
html.hv-home .site-ft .sf-logo img { display: block; width: 200px; height: auto; max-width: 100%; filter: none; background: transparent; }
html.hv-home .site-ft .sf-tag { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: var(--fs-body); line-height: 1.35; color: var(--v5-body); text-wrap: balance; }
/* the primary routes: two columns of 44px rows on a phone, one line from 768px */
html.hv-home .site-ft .sf-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 20px; }
html.hv-home .site-ft .sf-routes a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-caption); font-weight: 500; line-height: 1.3; color: var(--v5-ink); }
/* Visit or call: the one customer number, as a call and on WhatsApp, first */
html.hv-home .site-ft .sf-contact { display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--v5-line); }
html.hv-home .site-ft .sf-ey,
html.hv-home .site-ft .sf-gh { font-family: var(--sans); font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.3; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--v5-gold-l); }
html.hv-home .site-ft .sf-ey { margin-bottom: 8px; }
html.hv-home .site-ft .ftci { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--v5-body); }
html.hv-home .site-ft .ftci a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--v5-ink); }
html.hv-home .site-ft .sf-ey + .ftci a { font-size: var(--fs-small); font-weight: 600; color: var(--v5-ink); }
html.hv-home .site-ft .sf-addr { padding: 10px 0; }
html.hv-home .site-ft .sla-badge { display: block; margin: 2px 0 0; padding: 0; border: 0; background: none; font-family: var(--sans); font-size: var(--fs-caption); letter-spacing: 0; line-height: 1.5; text-align: left; color: var(--v5-gold-l); }
/* the six groups: closed rows on a phone */
html.hv-home .site-ft .sf-groups { margin-top: 20px; border-top: 1px solid var(--v5-line); }
html.hv-home .site-ft .sf-stack { display: contents; }
html.hv-home .site-ft .sf-grp { border-bottom: 1px solid var(--v5-line); }
html.hv-home .site-ft .sf-gh { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0; list-style: none; cursor: pointer; }
html.hv-home .site-ft .sf-gh::-webkit-details-marker { display: none; }
html.hv-home .site-ft .sf-gh::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--g-dur-base) var(--g-ease);
}
html.hv-home .site-ft .sf-grp[open] > .sf-gh::after { rotate: 180deg; }
@supports selector(::details-content) {
  html.hv-home .site-ft .sf-grp::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
  html.hv-home .site-ft .sf-grp[open]::details-content { block-size: auto; overflow: visible; }
}
html.hv-home .site-ft .sf-list { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 12px; }
html.hv-home .site-ft .sf-list a { display: flex; align-items: center; min-width: 44px; min-height: 44px; font-size: var(--fs-caption); line-height: 1.3; color: var(--v5-body); }
/* the company and legal lines, the heritage line first */
html.hv-home .site-ft .sf-legal { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
html.hv-home .site-ft .sf-legal p { font-size: var(--fs-fine); line-height: 1.6; letter-spacing: 0; color: var(--v5-muted); }
html.hv-home .site-ft .sf-legal .sf-heritage { margin-bottom: 6px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v5-gold-l); }
/* the legal links; assets/cookie-consent.js adds "Choose what we track" to this row */
html.hv-home .site-ft .ftb { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 20px; margin: 12px 0 0; padding: 0; border: 0; text-align: left; }
html.hv-home .site-ft .sf-leg { display: flex; flex-wrap: wrap; gap: 0 20px; }
html.hv-home .site-ft .sf-leg a,
html.hv-home .site-ft .cc-manage-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-size: var(--fs-fine); color: var(--v5-body); opacity: 1; }
/* the quiet links are the portal's tertiary: a 1px underline, 5px off the text, gold on hover */
html.hv-home .site-ft .sf-leg a,
html.hv-home .site-ft .cc-manage-link,
html.hv-home .site-ft .ftci a,
html.hv-home .site-ft .evara-track-switch__more { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: currentColor; }
html.hv-home .site-ft .cc-manage-wrap { display: contents; }
/* 22px in from every edge, more than 1.5 times its 14px corner, so the pills
   inside are clear of the corners rather than crowding them */
html.hv-home .site-ft .cc-panel { flex: 1 0 100%; box-sizing: border-box; max-width: 440px; margin: 8px 0 16px; padding: 22px; border: 1px solid var(--v5-line); border-radius: var(--r-input); background: var(--g-tint); box-shadow: var(--g-hl); font-family: var(--sans); font-size: var(--fs-small); line-height: 1.6; color: var(--v5-body); }
html.hv-home .site-ft .cc-panel[hidden] { display: none; }
html.hv-home .site-ft .cc-panel__close { min-height: 44px; padding: 8px 16px; border: 1px solid var(--v5-line-strong); border-radius: var(--r-pill); background: var(--g-tint); box-shadow: var(--g-hl); color: var(--v5-ink); font-family: var(--sans); font-size: var(--fs-button); font-weight: var(--fw-button); }
html.hv-home .site-ft .evara-track-switch__btn { min-height: 44px; padding: 0 var(--g-s4); border: 1px solid var(--g-btn-edge); border-radius: var(--r-pill); background: var(--g-btn); color: var(--g-btn-ink); box-shadow: var(--g-btn-shadow); font-family: var(--sans); font-size: var(--fs-button); font-weight: var(--fw-button); letter-spacing: 0.01em; transition: transform var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease); }
html.hv-home .site-ft .evara-track-switch__btn:active { background: var(--g-btn-press); transform: scale(0.985); }
html.hv-home .site-ft .evara-track-switch__btn:disabled { border-color: var(--v5-line-strong); background: var(--g-tint); color: var(--v5-body); box-shadow: var(--g-hl); }
html.hv-home .site-ft .evara-track-switch__more { color: var(--v5-gold-l); font-size: var(--fs-small); }
html.hv-home .site-ft .evara-track-switch__status { font-size: var(--fs-small); color: var(--v5-body); }
@media (hover: hover) and (pointer: fine) {
  html.hv-home .site-ft a:hover { color: var(--v5-ink); text-decoration-color: var(--v5-gold); }
  html.hv-home .site-ft .sf-routes a:hover, html.hv-home .site-ft .sf-list a:hover { color: var(--v5-gold-l); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--v5-gold); }
  html.hv-home .site-ft .evara-track-switch__btn:not(:disabled):hover { background: var(--g-btn-hover); transform: translateY(-1px); }
}
@media (min-width: 768px) {
  html.hv-home footer.site-ft { padding-top: 48px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  /* one rule runs under the brand row: the contact group and the groups both
     draw it, with no column gap, so it reads as one line */
  html.hv-home .site-ft .sf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 0; align-items: start; }
  html.hv-home .site-ft .sf-brand { grid-column: 1; grid-row: 1; }
  html.hv-home .site-ft .sf-routes { grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; margin: 0; padding-left: 40px; }
  html.hv-home .site-ft .sf-routes a { font-size: var(--fs-caption); }
  html.hv-home .site-ft .sf-contact { grid-column: 1; grid-row: 2; margin-top: 32px; padding: 32px 32px 0 0; }
  html.hv-home .site-ft .sf-groups { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; padding: 32px 0 0 40px; }
  html.hv-home .site-ft .sf-stack { display: flex; flex-direction: column; gap: 20px; }
  html.hv-home .site-ft .sf-grp { border: 0; }
  /* the heading of an open column is still a <summary>, so its box keeps the
     44px floor; the 18px it gains sits above the text, in the space the column
     already leaves there, so nothing on screen moves */
  html.hv-home .site-ft .sf-gh { align-items: flex-end; min-height: 44px; margin-top: -18px; padding: 18px 0 10px; font-size: var(--fs-label); letter-spacing: 0.16em; cursor: default; }
  html.hv-home .site-ft .sf-gh::after { display: none; }
  html.hv-home .site-ft .sf-list { padding: 0; }
  html.hv-home .site-ft .sf-list a { font-size: var(--fs-caption); }
  /* For business stands apart from the family journey, under its own rule */
  html.hv-home .site-ft .sf-grp[data-sf="business"] { padding-top: 20px; border-top: 1px solid var(--v5-line); }
  html.hv-home .site-ft .sf-ey { font-size: var(--fs-label); letter-spacing: 0.16em; }
  html.hv-home .site-ft .ftci, html.hv-home .site-ft .ftci a { font-size: var(--fs-small); }
  html.hv-home .site-ft .sf-ey + .ftci a { font-size: var(--fs-small); }
  html.hv-home .site-ft .sla-badge { font-size: var(--fs-caption); }
  html.hv-home .site-ft .sf-legal { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--v5-line); }
  html.hv-home .site-ft .sf-legal p { font-size: var(--fs-fine); }
  html.hv-home .site-ft .sf-legal .sf-heritage { font-size: var(--fs-fine); letter-spacing: 0.16em; }
  html.hv-home .site-ft .sf-leg a, html.hv-home .site-ft .cc-manage-link { font-size: var(--fs-fine); }
}
@media (min-width: 1024px) {
  html.hv-home footer.site-ft { padding-top: 56px; }
  html.hv-home .site-ft .sf-top { grid-template-columns: 320px minmax(0, 1fr); }
  html.hv-home .site-ft .sf-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 48px; }
  html.hv-home .site-ft .sf-routes { padding-left: 48px; }
}
/* With a mouse (hover and a fine pointer, 768px and up) the footer's link lists sit on a
   calm 32px rhythm: each link keeps its 44px box and gives 6px of it to each neighbour, so
   the hit area never shrinks. On a touch screen the rows stay a full 44px apart. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  html.hv-home .site-ft .sf-list a { margin-block: -6px; }
  html.hv-home .site-ft .sf-contact .ftci a { margin-block: -6px; }
  html.hv-home .site-ft .sf-list { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html.hv-home .site-ft .sf-gh::after { transition: none; }
  html.hv-home .site-ft .sf-grp::details-content { transition: none; }
}

/* ---- 21. the sticky bar, as the design's frosted dock (phone; scripts/lib-v5.mjs dock) ----------
   Two variants share it, and both are styled only here (extracted for html.tv5):
   dock:buy (.tr-sticky-price and one action) and dock:call (.tv-dock--call: Call
   Now and a call back, in .mobile-sticky-cta). Phone only; the region's own
   script adds .tr-sticky--on once the hero has passed and drops it over the
   begin section, a focused field, an open dialog. It rides above the consent
   banner by --evara-cc-h with no transition on that lift until html.cc-measured
   (assets/cookie-consent.js), so it never crosses the banner's band. The
   after-hours panel's two lines (.oh-hours, .oh-call, scripts/lib-footer-contact.mjs)
   sit on the dialog's glass panel (scripts/theme-v5/50-forms.css, the portal's Modal). */
html.hv-home .tr-sticky { display: none; }
@media (max-width: 767px) {
  html.hv-home .tr-sticky {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    margin: 0;
    padding: 0;
    border: 0;
    /* a capsule: 64px tall, so its 32px ends hold the 48px pills 8px in, concentric; the portal's
       glass: the hairline is an inset ring so the 64px stays 64px */
    border-radius: var(--r-pill);
    background: var(--g-solid);
    box-shadow: inset 0 0 0 1px var(--v5-line), var(--g-hl), var(--g-shadow);
    translate: 0 calc(-1 * var(--evara-cc-h, 0px));
    transform: translateY(12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--g-dur-base) var(--g-ease), opacity var(--g-dur-base) var(--g-ease), visibility 0s linear var(--g-dur-base);
  }
  html.hv-home.cc-measured .tr-sticky { transition: transform var(--g-dur-base) var(--g-ease), opacity var(--g-dur-base) var(--g-ease), translate var(--g-dur-base) var(--g-ease), visibility 0s linear var(--g-dur-base); }
  html.hv-home .tr-sticky.tr-sticky--on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.hv-home .tr-sticky { background: var(--g-tint-strong); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.hv-home .tr-sticky { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    html.hv-home .tr-sticky { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  html.hv-home .tr-sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; max-width: none; min-height: 64px; margin: 0; padding: 8px 8px 8px 20px; }
  html.hv-home .tr-sticky-price { flex: 0 1 auto; min-width: 0; font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--v5-ink); }
  html.hv-home .tr-sticky-price [data-price] { font-weight: 700; white-space: nowrap; color: var(--v5-gold); }
  /* the dock's pills: Call Now and the buy action are the primary pill (amethyst gradient, ivory
     ink, 1px edge, specular inset, 48px); the call back is the secondary glass pill (a tint only,
     the capsule behind it is already blurred) */
  html.hv-home .tr-sticky-cta,
  html.hv-home .tv-dock .msc-call,
  html.hv-home .tv-dock .msc-consult {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-s2);
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 var(--g-s5);
    border: 1px solid var(--g-btn-edge);
    border-radius: var(--r-pill);
    background: var(--g-btn);
    color: var(--g-btn-ink);
    box-shadow: var(--g-btn-shadow);
    font-family: var(--sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-button);
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    touch-action: manipulation;
    transition: transform var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease);
  }
  html.hv-home .tr-sticky-cta:active, html.hv-home .tv-dock .msc-call:active { background: var(--g-btn-press); transform: scale(0.985); }
  /* the call variant: the two actions share the bar, the call first */
  html.hv-home .tv-dock--call .tr-sticky-in { padding: 8px; }
  html.hv-home .tv-dock .mobile-sticky-cta {
    display: flex !important;
    position: static;
    inset: auto;
    z-index: auto;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  html.hv-home .tv-dock .msc-call, html.hv-home .tv-dock .msc-consult { flex: 1 1 0; min-width: 0; padding: 0 var(--g-s3); }
  html.hv-home .tv-dock .msc-call svg { width: 18px; height: 18px; flex: none; }
  /* !important: design-tokens.css sets html[data-theme="light"] .msc-consult to cream, !important */
  html.hv-home .tv-dock .msc-consult { background: var(--g-tint); border-color: var(--v5-line-strong); box-shadow: var(--g-hl); color: var(--v5-ink) !important; }
  html.hv-home .tv-dock .msc-consult:active { transform: scale(0.985); }
  /* the WhatsApp button keeps its lane above the dock */
  html.hv-home body:has(.tr-sticky) .evara-wa-fab { bottom: calc(var(--tr-bar-h) + env(safe-area-inset-bottom, 0px) + 14px) !important; }
}
/* the one floating-action system (site-polish-sitewide-1010, D4): at most one bar (the dock above)
   and the WhatsApp control, never on top of each other (the control keeps its lane above the bar).
   While the footer, a form, a focused field or a dialog is in view the control steps aside (the footer
   has its own WhatsApp row) and the dock does the same (scripts/lib-v5.mjs DOCK_SCRIPT). The governor
   that sets html.fl-quiet is scripts/theme-v5/70-float.js (home: assets/home-v5.js). */
html.hv-home.fl-quiet .evara-wa-fab { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }
html.hv-home .evara-wa-fab { transition: opacity var(--g-dur-base) var(--g-ease), transform var(--g-dur-fast) var(--g-ease), background var(--g-dur-fast) var(--g-ease), visibility 0s linear var(--g-dur-base); }
@media (max-width: 767px) {
  html.hv-home .evara-wa-fab { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html.hv-home .evara-wa-fab { transition: opacity var(--g-dur-base) linear, visibility 0s linear var(--g-dur-base); }
  html.hv-home .evara-wa-fab:hover, html.hv-home .evara-wa-fab:active, html.hv-home.fl-quiet .evara-wa-fab { transform: none; }
}
html.hv-home .oh-hours { margin: 0 0 24px; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.6; color: var(--v5-body); }
html.hv-home .oh-call { margin: 16px 0 0; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.6; color: var(--v5-body); }
html.hv-home .oh-call a { color: var(--v5-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  html.hv-home .tr-sticky, html.hv-home.cc-measured .tr-sticky { transform: none; transition: opacity var(--g-dur-base) linear, visibility 0s linear var(--g-dur-base); }
  html.hv-home .tr-sticky.tr-sticky--on { transition-delay: 0s; }
  html.hv-home .site-ft a { transition: none; }
}

/* ---- 22. focus rings inside clipped boxes, and every UI transition at 360 ms ----------------
   DESIGN-STANDARD 5.5: a scroll rail clips anything outside itself, so its
   ring is drawn 3px inside its edge (above, block 5). The rail is its own
   stacking layer and its cards sit one level down in it, so that inward ring
   paints OVER the cards and photographs instead of under them; nothing else
   moves or changes at rest. The care photographs are a photograph, so their
   ring is the light gold. */
.hv .hv-track, .hv .hv-rv-rail { isolation: isolate; }
.hv .hv-track > * { z-index: -1; }
.hv .hv-rv-move { position: relative; z-index: -1; }
.hv .hv-care-slider { --focus: #E2C99A; }
/* the ring follows the photograph's corner (only while focused: at rest the
   photograph's own clip is the only one, so its edge paints exactly as before) */
.hv .hv-care-slider .hv-track:focus-visible { border-radius: inherit; }
/* the care dots sit 2px from the photograph's clipped edge: their ring turns
   inward too (a 34px square around the dot, clear of the edge) */
.hv .hv-care-slider .hv-sl-dot:focus-visible { outline-offset: -5px !important; }
/* the phone's 48px trust band clips its 44px pause button: the same inward ring */
@media (max-width: 767px) {
  .hv .hv-band-pause:focus-visible { outline-offset: -5px !important; }
}
/* the office map clips its link and the live frame, and the frame paints over
   any ring on itself: the map draws the ring, 3px inside its edge (a focused
   frame never matches :focus in Chromium; assets/home-v5.js sets .is-focus) */
.hv .hv-map.is-focus::after { content: ""; position: absolute; inset: 3px; z-index: 2; border: 2px solid var(--focus); border-radius: calc(var(--r-card) - 11px); pointer-events: none; }
/* the live Google map is drawn light (inverted to dark in the dark theme): its
   ring is the theme's gold, not the light gold of the amethyst card around it */
.hv .hv-map.is-live { --focus: var(--gold); }
@supports selector(:has(*)) {
  .hv .hv-map-ph:focus-visible { outline: none !important; }
  .hv .hv-map:has(> .hv-map-ph:focus-visible)::after { content: ""; position: absolute; inset: 3px; z-index: 2; border: 2px solid var(--focus); border-radius: calc(var(--r-card) - 11px); pointer-events: none; }
}
@media (min-width: 1024px) {
  .hv .hv-map.is-focus::after { border-radius: calc(var(--r-card) - 15px); }
  .hv .hv-map:has(> .hv-map-ph:focus-visible)::after { border-radius: calc(var(--r-card) - 15px); }
}
/* the site's skip link and WhatsApp button take the page's gold ring; the
   skip link drops 8px so its ring is not cut by the top of the window */
html.hv-home a.skip-to-content:focus-visible,
html.hv-home a.evara-wa-fab:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 3px !important; box-shadow: none !important; }
html.hv-home a.skip-to-content:focus,
html.hv-home a.skip-to-content:focus-visible { top: 8px !important; border-radius: var(--r-input) !important; }
/* DESIGN-STANDARD 8.1: the shared header, footer, fields and floating controls
   answer in the page's 360 ms cubic-bezier(.2,.8,.2,1) (their own sheets say
   180 to 300 ms). The search toggle no longer animates `all`, so its focus
   ring appears at once, like every other ring. */
@media (prefers-reduced-motion: no-preference) {
  html.hv-home #site-header .ss-toggle { transition-property: color, background-color, border-color, box-shadow; }
  html.hv-home #site-header .ss-toggle,
  html.hv-home #site-header .hbg span,
  html.hv-home #site-header .theme-btn,
  html.hv-home #site-header .ub-dismiss,
  html.hv-home #site-header .nl a::after,
  html.hv-home #site-header .ss-input,
  html.hv-home footer .ftci a,
  html.hv-home footer .ftleg a,
  html.hv-home footer .ftl a::after,
  html.hv-home .evara-wa-fab,
  html.hv-home .tr-sticky,
  .hv .hpf { transition-duration: var(--dur) !important; transition-timing-function: var(--ease) !important; }
  html.hv-home #site-header .ddm { transition-duration: var(--dur), 0s !important; transition-timing-function: var(--ease), linear !important; }
}