/* ==========================================================================
   HTLA core — the unified editorial design system.
   Tokens, base type, layout, components and the shared chrome (header,
   drawer, dock, footer, enquiry sheet). Loaded by every page, Astro and
   legacy alike. Base element rules are scoped to .ht-body so they outrank
   Tailwind's preflight whichever order the two stylesheets arrive in.
   ========================================================================== */

:root {
  /* The palette is a warm paper one and every surface here sets its own colour,
     so the page renders the same in a dark OS theme. Declaring the scheme stops
     the browser theming what we do not paint — scrollbars, date pickers,
     autofill and select popups — dark against a light page. */
  color-scheme: light;

  --paper: #FBF9F5;
  --paper-2: #F5F1E9;
  --paper-3: #EEE8DC;
  --card: #FFFFFF;
  --ink: #0E1318;
  --ink-2: #161C23;
  --ink-3: #242C36;
  --charcoal: #3D434E;
  --slate: #5F6773;
  --gold: #B8912A;
  --gold-soft: #C5A869;
  --gold-ink: #7F6016;

  /* Focus is deeper than the brand gold so it clears 3:1 on ivory. */
  --field-line: #908779;
  --focus: #A07D20;
  --focus-ring: rgba(160, 125, 32, 0.18);
  --gold-wash: rgba(184, 145, 42, 0.08);
  --line: #E8E3DA;
  --line-strong: #D6CEBF;
  --wa: #25D366;
  --danger: #9F2F27;
  --ok: #1D6B44;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* For large surfaces entering and leaving — sheet, drawer. The house curve
     front-loads too hard for something that fills the screen. */
  --ease-enter: cubic-bezier(0.25, 0.1, 0.1, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* For chrome that moves with the page as it scrolls (header, dock). It has to
     start as fast as the scroll it follows. An accelerating exit barely moved
     for the first 50ms of a fling and then snapped away: a twitch. */
  --ease-follow: cubic-bezier(0, 0, 0.2, 1);

  --shadow-sm: 0 1px 2px rgba(14, 19, 24, 0.04), 0 2px 8px -2px rgba(14, 19, 24, 0.05);
  --shadow-md: 0 1px 2px rgba(14, 19, 24, 0.04), 0 10px 24px -8px rgba(14, 19, 24, 0.08), 0 28px 56px -28px rgba(14, 19, 24, 0.12);
  --shadow-lg: 0 2px 4px rgba(14, 19, 24, 0.04), 0 20px 44px -14px rgba(14, 19, 24, 0.14), 0 56px 110px -40px rgba(14, 19, 24, 0.20);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --header-h: 56px;
  --dock-h: 78px;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Semantic roles, so switching theme is a token swap.
     "contrast" surfaces are the deliberately dark bands (footer, dock,
     penalty panel). They stay dark in both themes, but lift off the page
     rather than sink into it once the page itself is dark.
     "solid" is the inverted button/chip, "tint" the gold wash. */
  --contrast-bg: #0E1318;
  --contrast-bg-2: #161C23;
  --contrast-text: #C3C8CF;
  --contrast-heading: #FFFFFF;
  --contrast-muted: #8C939D;
  --contrast-line: rgba(255, 255, 255, 0.08);
  --contrast-line-strong: rgba(255, 255, 255, 0.28);

  /* The dock floats, so its surface is translucent over whatever scrolls past. */
  --dock-bg: rgba(14, 19, 24, 0.88);
  --dock-line: rgba(255, 255, 255, 0.14);
  --solid-bg: #0E1318;
  --solid-bg-hover: #242C36;
  --solid-text: #FFFFFF;
  --on-gold: #0E1318;
  --tint: #FCF7EA;
  --tint-line: rgba(184, 145, 42, 0.38);
  --memo-bg: #FFFEFB;
  --photo-bg: #E7DFD1;
  --glass-bg: rgba(255, 255, 255, 0.86);
  --pill-bg: rgba(255, 255, 255, 0.94);
  --placeholder-veil: rgba(245, 241, 233, 0.78);
  --header-bg: rgba(251, 249, 245, 0.92);
  --header-line: rgba(14, 19, 24, 0.06);
  --hover-wash: rgba(14, 19, 24, 0.05);
  --overlay: rgba(14, 19, 24, 0.45);
  --ok-bg: #E9F5EE;
  --danger-bg: #FBEDEB;

  --guilloche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23B8912A' stroke-width='0.8'%3E%3Cg transform='translate(300 300)'%3E%3Cellipse rx='286' ry='88'/%3E%3Cellipse rx='286' ry='88' transform='rotate(15)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(30)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(45)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(60)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(75)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(90)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(105)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(120)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(135)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(150)'/%3E%3Cellipse rx='286' ry='88' transform='rotate(165)'/%3E%3Cellipse rx='204' ry='46' transform='rotate(7.5)'/%3E%3Cellipse rx='204' ry='46' transform='rotate(37.5)'/%3E%3Cellipse rx='204' ry='46' transform='rotate(67.5)'/%3E%3Cellipse rx='204' ry='46' transform='rotate(97.5)'/%3E%3Cellipse rx='204' ry='46' transform='rotate(127.5)'/%3E%3Cellipse rx='204' ry='46' transform='rotate(157.5)'/%3E%3Ccircle r='92'/%3E%3Ccircle r='150'/%3E%3Ccircle r='238'/%3E%3Ccircle r='296'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root { --header-h: 72px; --dock-h: 0px; }
}

/* ---------- Base ---------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

.ht-body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
}

@media (min-width: 768px) { .ht-body { padding-bottom: 0; } }

.ht-body :is(h1, h2, h3, h4) {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ht-body :is(h5, h6) { font-family: var(--sans); font-weight: 600; color: var(--ink); }
.ht-body p { text-wrap: pretty; }
.ht-body img { max-width: 100%; height: auto; }
.ht-body [hidden] { display: none !important; }
.ht-body ::selection { background: rgba(184, 145, 42, 0.24); color: var(--ink); }
.ht-body :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ht-body button { font-family: inherit; }

.ht-main { display: block; padding-top: var(--header-h); }
.ht-num, .ht-body .tabular-nums { font-variant-numeric: tabular-nums lining-nums; }
.ht-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------------------------------------------------------- */

.ht-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.ht-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.ht-eyebrow-plain::before { display: none; }
.ht-eyebrow-light { color: var(--gold-soft); }

.ht-body .ht-display { margin: 0; font-size: clamp(2.625rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -0.015em; }
.ht-body .ht-h1 { margin: 0; font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.04; letter-spacing: -0.012em; }
.ht-body .ht-h2 { margin: 0; font-size: clamp(2.125rem, 4.2vw, 3.25rem); line-height: 1.08; }
.ht-body .ht-h3 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.18; }
.ht-body .ht-h4 { margin: 0; font-size: 1.375rem; line-height: 1.25; font-weight: 600; }
.ht-body :is(.ht-display, .ht-h1, .ht-h2, .ht-h3) em { font-style: italic; color: var(--gold-ink); }

.ht-lead { margin: 0; max-width: 40rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--charcoal); }
.ht-muted { color: var(--slate); }
.ht-small { font-size: 0.875rem; line-height: 1.6; }
.ht-prose-sm p { margin: 0 0 1em; }
.ht-kicker-num { font: 600 0.75rem/1 var(--sans); letter-spacing: 0.08em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }

.ht-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color 0.2s ease;
}
@media (hover: hover) { .ht-link:hover { color: var(--gold-ink); } }
/* A standalone link is a tap target, not running text. Vertical padding on an
   inline element grows the hit area without touching the line box, so these
   reach a thumb-sized height while the layout stays exactly where it was.
   Links set inside prose are left alone: there the neighbours are other words. */
@media (pointer: coarse) {
  .ht-link { padding-block: 11px; }
  :where(p, li, dd, dt, blockquote, figcaption, .ht-prose, .ht-article-body) .ht-link { padding-block: 0; }
}

/* ---------- Layout -------------------------------------------------------- */

.ht-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.ht-wrap-narrow { max-width: 860px; }
.ht-wrap-wide { max-width: 1320px; }

.ht-section { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.ht-section-tight { padding-block: clamp(44px, 6vw, 80px); }
.ht-line-top { border-top: 1px solid var(--line); }
.ht-bg-alt { background: var(--paper-2); }
.ht-bg-card { background: var(--card); }
.ht-bg-ink { background: var(--contrast-bg); color: var(--contrast-text); }
.ht-body .ht-bg-ink :is(h1, h2, h3, h4) { color: var(--contrast-heading); }
.ht-bg-ink .ht-eyebrow { color: var(--gold-soft); }
.ht-bg-ink .ht-lead { color: #C9CED5; }

.ht-section-head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 60px); }
@media (min-width: 900px) {
  .ht-section-head-split { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; column-gap: 64px; }
  .ht-section-head-split > .ht-eyebrow { grid-column: 1 / -1; }
}

.ht-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 519px) { .ht-actions > .ht-btn { flex: 1 1 100%; } }

.ht-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 768px) {
  .ht-grid-2, .ht-grid-3, .ht-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ht-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ht-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ht-split { display: grid; gap: clamp(36px, 6vw, 88px); }
@media (min-width: 1024px) {
  .ht-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .ht-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ht-sticky { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* ---------- Buttons ------------------------------------------------------- */

.ht-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 600 0.9375rem/1.1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ht-btn:active { transform: scale(0.98); }
.ht-btn[disabled] { opacity: 0.6; cursor: progress; }
.ht-btn-gold { background: var(--gold); color: var(--on-gold); }
@media (hover: hover) { .ht-btn-gold:hover { background: #C49D38; } }
.ht-btn-ink { background: var(--solid-bg); color: var(--solid-text); }
@media (hover: hover) { .ht-btn-ink:hover { background: var(--solid-bg-hover); } }
.ht-btn-outline { border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) { .ht-btn-outline:hover { border-color: var(--ink); background: var(--card); } }
.ht-btn-outline-light { border-color: var(--contrast-line-strong); color: var(--contrast-heading); }
@media (hover: hover) { .ht-btn-outline-light:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.06); } }
.ht-btn-wa { background: var(--wa); color: var(--on-gold); text-align: center; }
.ht-btn-wa .ht-btn-label { display: block; flex: 1 1 auto; min-width: 0; text-align: center; }
@media (hover: hover) { .ht-btn-wa:hover { background: #3BDC78; } }
.ht-btn-sm { min-height: 40px; padding: 0 1rem; font-size: 0.8125rem; }
.ht-btn-lg { min-height: 56px; padding: 0 1.75rem; font-size: 1rem; }
.ht-btn-block { width: 100%; }
.ht-btn-grow { flex: 1; }
.ht-btn .ht-ico { transition: transform 0.25s var(--ease); }
@media (hover: hover) { .ht-btn:hover .ht-ico-go { transform: translateX(3px); } }
@media (max-width: 767px) {
  .ht-btn { min-height: 54px; }
  .ht-btn-sm { min-height: 44px; }
  /* A nowrap label sets the min-content width of whatever holds it, so a long
     one pushed narrow cards — and the page — sideways at 320. */
  .ht-btn { white-space: normal; text-wrap: balance; }
}

.ht-ico { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.ht-ico-sm { width: 1rem; height: 1rem; }

/* ---------- Header -------------------------------------------------------- */

.ht-skip {
  position: fixed;
  left: 1rem;
  top: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--ink);
  color: #FFFFFF;
  font: 600 0.875rem var(--sans);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-220%);
  transition: transform 0.2s var(--ease), opacity 0.2s ease;
}
.ht-skip:focus-visible { opacity: 1; pointer-events: auto; transform: none; }

.ht-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  backdrop-filter: saturate(1.4) blur(20px);
  border-bottom: 1px solid var(--header-line);
  /* Follows the scroll in both directions and settles in about a fifth of a
     second. The house expo-out curve had the right start but lingered 450ms. */
  transition: transform 0.22s var(--ease-follow), box-shadow 0.3s ease;
}
.ht-header.is-scrolled { box-shadow: 0 10px 28px -20px rgba(14, 19, 24, 0.28); }
.ht-header.is-hidden { transform: translateY(-100%); }

.ht-header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
@media (max-width: 767px) { .ht-header-inner { gap: 0; padding: 0 6px 0 16px; } }

.ht-brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; min-width: 0; margin-right: auto; color: var(--ink); text-decoration: none; }
.ht-brand-mark { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; flex: 0 0 auto; }
.ht-brand-words { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.ht-brand-name { font: 600 1.1875rem/1 var(--serif); letter-spacing: 0.005em; white-space: nowrap; color: var(--ink); }
.ht-brand-sub { margin-top: 3px; font: 600 0.625rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); }
@media (min-width: 768px) {
  .ht-brand-mark { width: 36px; height: 36px; }
  .ht-brand-name { font-size: 1.375rem; }
  .ht-brand-sub { font-size: 0.6875rem; }
}
@media (max-width: 359px) {
  .ht-brand { gap: 0.45rem; }
  .ht-brand-mark { width: 24px; height: 24px; }
  .ht-brand-name { font-size: 1.0625rem; }
  .ht-brand-sub { display: none; }
}

.ht-nav { display: none; }
@media (min-width: 1200px) { .ht-nav { display: flex; align-items: center; gap: 0.1rem; margin-right: 0.5rem; } }

.ht-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 40px;
  padding: 0 0.7rem;
  border: 0;
  background: none;
  color: var(--charcoal);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ht-nav-link[aria-current] { color: var(--ink); }
@media (hover: hover) { .ht-nav-link:hover { color: var(--ink); } }
.ht-nav-link[aria-current]::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--gold);
}
.ht-tools { position: relative; }
.ht-tools-toggle[aria-current]::after { margin-left: -9px; }
.ht-tools-toggle .ht-ico { transition: transform 0.22s var(--ease-enter); }
.ht-tools-toggle[aria-expanded="true"] .ht-ico { transform: rotate(180deg); }
/* The menu arrived on the expo-out curve and left on it too: exits on that
   curve dash off and then linger. Now a short settle in, a quicker fall away. */
@keyframes htMenuIn { from { opacity: 0; transform: translate3d(0, -4px, 0) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes htMenuOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -3px, 0) scale(0.99); } }
.ht-tools-menu.is-closing { animation: htMenuOut 0.14s var(--ease-exit) both; pointer-events: none; }
.ht-tools-menu {
  position: absolute;
  transform-origin: top right;
  top: calc(100% + 14px);
  right: -8px;
  width: 300px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  animation: htMenuIn 0.2s var(--ease-enter) both;
}
.ht-tools-item { display: block; padding: 0.8rem 0.9rem; border-radius: 10px; text-decoration: none; }
.ht-tools-item strong { display: block; color: var(--ink); font: 600 0.9375rem/1.3 var(--sans); }
.ht-tools-item span { display: block; margin-top: 0.15rem; color: var(--slate); font-size: 0.8125rem; line-height: 1.4; }
.ht-tools-item:focus-visible { background: var(--paper-2); outline: none; }
@media (hover: hover) { .ht-tools-item:hover { background: var(--paper-2); outline: none; } }

.ht-header-actions { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 767px) {
  .ht-header-actions { gap: 0; }
  .ht-header-actions .ht-icon-btn { width: 44px; }
}
.ht-only-desktop { display: none !important; }
.ht-from-tablet { display: none !important; }
@media (min-width: 768px) { .ht-from-tablet { display: inline-flex !important; } }
@media (min-width: 1200px) {
  .ht-only-desktop { display: inline-flex !important; }
  .ht-show-compact { display: none !important; }
}

.ht-icon-btn {
  display: inline-grid;
  place-items: center;
  /* .ht-from-tablet forces inline-flex, where place-items centres only one
     axis; justify-content holds the icon centred under either display. */
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Hover styles across the site apply only where the device can hover. On a
   touchscreen a tapped button keeps matching :hover until something else is
   tapped, which left this wash stuck around the header buttons. Touch gets the
   same wash only while the finger is down. */
@media (hover: hover) { .ht-icon-btn:hover { background: var(--hover-wash); } }
.ht-icon-btn:active { background: var(--hover-wash); }
.ht-icon-btn-line { flex: 0 0 auto; width: 54px; height: 54px; border: 1px solid var(--line-strong); }
.ht-menu-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburger-bar { display: block; width: 22px; height: 1.75px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease-enter), opacity 0.18s linear; }
.hamburger-active .bar-1 { transform: translateY(6.75px) rotate(45deg); }
.hamburger-active .bar-2 { opacity: 0; }
.hamburger-active .bar-3 { transform: translateY(-6.75px) rotate(-45deg); }

/* ---------- Fullscreen mobile drawer -------------------------------------- */

.ht-drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: var(--header-h);
  box-sizing: border-box;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -6px, 0);
  /* Leaving: quick and accelerating, then out of the tree. */
  transition: opacity 0.18s var(--ease-exit), transform 0.18s var(--ease-exit), visibility 0s linear 0.18s;
}
/* Arriving: the expo-out curve took a full-screen panel to half opacity in
   two frames, which flashed. This one fades in at a pace the eye follows. */
.ht-drawer.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.26s var(--ease-enter), transform 0.34s var(--ease-enter); }
@media (min-width: 1200px) { .ht-drawer { display: none; } }

.ht-drawer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
}
.ht-drawer-nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ht-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: 500 1.2rem/1.3 var(--sans);
  text-decoration: none;
}
.ht-drawer-link small { color: var(--slate); font-size: 0.85rem; font-weight: 400; }
.ht-drawer-link .ht-ico { color: var(--gold-ink); transition: transform 0.25s var(--ease); }
.ht-drawer-link[aria-current] { color: var(--gold-ink); }
.ht-drawer-link:active .ht-ico { transform: translateX(4px); }
/* The links follow the panel in rather than racing it: a short lift, a small
   start delay, and a tight 22ms cascade so the list reads as one movement. */
@keyframes htDrawerItem { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
.ht-drawer.open .ht-drawer-link { animation: htDrawerItem 0.32s var(--ease-enter) 40ms both; }
.ht-drawer.open .ht-drawer-link:nth-child(2) { animation-delay: 62ms; }
.ht-drawer.open .ht-drawer-link:nth-child(3) { animation-delay: 84ms; }
.ht-drawer.open .ht-drawer-link:nth-child(4) { animation-delay: 106ms; }
.ht-drawer.open .ht-drawer-link:nth-child(5) { animation-delay: 128ms; }
.ht-drawer.open .ht-drawer-link:nth-child(6) { animation-delay: 150ms; }
.ht-drawer.open .ht-drawer-link:nth-child(7) { animation-delay: 172ms; }

/* Tools: a swipeable strip beneath the page links. It bleeds to the screen
   edge so the next card visibly peeks in, which says "swipe" without a hint. */
.ht-drawer-tools { margin-top: -4px; }
.ht-drawer-tools-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--gold-ink); font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.ht-drawer-tools-title span { padding: 1px 7px; border-radius: 999px; background: var(--tint); color: var(--gold-ink); font-size: 0.6875rem; letter-spacing: 0; }
.ht-drawer-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 42%);
  gap: 10px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 2px var(--gutter) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ht-drawer-rail::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .ht-drawer-rail { grid-auto-columns: minmax(160px, 1fr); } }
.ht-drawer-tool {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 108px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 0.2s var(--ease-enter), border-color 0.2s var(--ease);
}
.ht-drawer-tool .ht-ico { width: 22px; height: 22px; margin-bottom: 8px; color: var(--gold-ink); }
.ht-drawer-tool strong { font: 600 0.9375rem/1.25 var(--sans); }
.ht-drawer-tool span { color: var(--slate); font-size: 0.8125rem; line-height: 1.35; }
.ht-drawer-tool:first-child { border-color: var(--tint-line); background: var(--tint); }
.ht-drawer-tool:active { transform: scale(0.97); }
.ht-drawer-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ht-drawer.open .ht-drawer-tools { animation: htDrawerItem 0.36s var(--ease-enter) 170ms both; }

.ht-drawer-utility { display: grid; gap: 10px; margin-top: auto; padding-top: 4px; }
.ht-utility-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  box-sizing: border-box;
}
.ht-utility-row > .ht-ico { color: var(--gold-ink); }
.ht-utility-row strong { display: block; font: 600 0.95rem/1.3 var(--sans); }
.ht-utility-row small { display: block; color: var(--slate); font-size: 0.8rem; line-height: 1.35; }
.ht-utility-wa > .ht-ico { color: #17984A; }
.ht-utility-address { flex-wrap: wrap; }
.ht-utility-address > span { flex: 1; min-width: 12rem; }
.ht-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.8125rem var(--sans);
  cursor: pointer;
}

.ht-lock { overflow: hidden; }

/* ---------- Thumb-zone dock ----------------------------------------------- */

.ht-dock {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 12px;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--dock-line);
  border-radius: 18px;
  background: var(--dock-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  /* Fade and slide share one timing: a fade that finished first read as a blink. */
  transition: transform 0.22s var(--ease-follow), opacity 0.22s var(--ease-follow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ht-dock { -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
}
/* The pill has to clear its own inset and shadow on the way out. */
.ht-dock.is-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; }
.ht-dock-wa, .ht-dock-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  border: 0;
  color: var(--ink);
  transition: background-color 0.2s var(--ease);
  font: 600 0.9375rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}
/* The secondary action is quiet; only its icon carries the WhatsApp green. */
.ht-dock-wa { background: transparent; color: #FFFCF5; border-right: 1px solid var(--dock-line); }
.ht-dock-wa svg { color: var(--wa); }
.ht-dock-wa:active { background: rgba(255, 255, 255, 0.07); }
.ht-dock-cta { background: var(--gold); color: var(--on-gold); }
.ht-dock-cta:active { background: var(--gold-soft); }
@media (min-width: 768px) { .ht-dock { display: none; } }
/* Pages whose own content is the next step (the thank-you page) opt out of the dock. */
.ht-no-dock .ht-dock { display: none; }
.ht-body.ht-no-dock { padding-bottom: env(safe-area-inset-bottom); }

/* ---------- Enquiry sheet ------------------------------------------------- */

/* Sheet motion. The house expo-out curve moved ~150px of a phone-height sheet
   in its first frame, then crept the last few pixels for a quarter second:
   a slam followed by a wait. This curve starts gently enough for the eye to
   pick the motion up, peaks mid-flight, and settles with no tail. Leaving is
   quicker than arriving and accelerates away, as a dismissal should. */
.ht-sheet { --sheet-in: var(--ease-enter); --sheet-out: var(--ease-exit); position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.24s; }
.ht-sheet.is-open { visibility: visible; pointer-events: auto; transition: none; }
.ht-sheet-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s linear;
}
.ht-sheet.is-open .ht-sheet-overlay { opacity: 1; transition-duration: 0.28s; }
.ht-sheet-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.24s var(--sheet-out);
  will-change: transform;
}
.ht-sheet.is-open .ht-sheet-panel { transform: none; transition: transform 0.34s var(--sheet-in); }
@media (max-width: 767px) {
  .ht-sheet-panel { top: auto; left: 0; width: 100%; height: 94vh; height: 94dvh; border-radius: 20px 20px 0 0; transform: translate3d(0, 100%, 0); }
  /* Fading a full-screen backdrop blur costs phones frames exactly while the
     sheet is moving; the dimmed overlay does the job on its own. */
  .ht-sheet-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.ht-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 20px 14px 16px 24px; border-bottom: 1px solid var(--line); }
.ht-body .ht-sheet-title { margin: 0.4rem 0 0; font-size: 1.875rem; line-height: 1.08; }
.ht-sheet-title:focus { outline: none; }
.ht-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px calc(28px + env(safe-area-inset-bottom)); }
.ht-sheet-intro { margin: 0 0 22px; color: var(--slate); font-size: 0.9rem; line-height: 1.6; }

/* ---------- Forms --------------------------------------------------------- */

.ht-form-step { display: grid; gap: 18px; }
.ht-form-step[data-step] { animation: htRise 0.45s var(--ease) both; }
.ht-field { display: grid; gap: 8px; min-width: 0; }
.ht-field > label, .ht-label { color: var(--ink); font: 600 0.8125rem/1.3 var(--sans); letter-spacing: 0.01em; }
.ht-optional { color: var(--slate); font-weight: 400; }
.ht-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .ht-input {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background-color: var(--card);
  color: var(--ink);
  font: 400 1rem/1.4 var(--sans);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ht-field input[type="date"] { -webkit-appearance: auto; appearance: auto; }
.ht-field textarea { min-height: 128px; resize: vertical; }
.ht-field select { transition: background-position 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
@media (hover: hover) { .ht-field select:hover { border-color: var(--line-strong); } }
.ht-field select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A07D20' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.ht-field :is(input, select, textarea):focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-ring); }
.ht-field ::placeholder { color: var(--slate); opacity: 1; }
/* The chevron is a literal inside a data URI, so it cannot take the token. */
:root[data-theme="dark"] .ht-field select { transition: background-position 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
@media (hover: hover) { .ht-field select:hover { border-color: var(--line-strong); } }
.ht-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ht-field select { transition: background-position 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
@media (hover: hover) { .ht-field select:hover { border-color: var(--line-strong); } }
.ht-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}
.ht-field-note { margin: 0; color: var(--slate); font-size: 0.8125rem; line-height: 1.5; }
.ht-field-note a, .ht-check a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px; }
.ht-field-error { margin: 0; color: var(--danger); font-size: 0.875rem; font-weight: 600; }
.ht-field-row { display: grid; gap: 18px; }
@media (min-width: 520px) { .ht-field-row { grid-template-columns: 1fr 1fr; } }
.ht-check { display: flex; align-items: flex-start; gap: 12px; color: var(--charcoal); font-size: 0.875rem; line-height: 1.5; cursor: pointer; }
.ht-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); }
.ht-form-actions { display: flex; gap: 10px; }
.ht-form-status { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--paper-2); font-size: 0.875rem; }
.ht-form-status[data-state="error"] { background: var(--danger-bg); color: var(--danger); }
.ht-form-status[data-state="ok"] { background: var(--ok-bg); color: var(--ok); }
.ht-or { display: flex; align-items: center; gap: 12px; color: var(--slate); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ht-or::before, .ht-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Segmented choices and 54px triage options. */
.ht-options { display: grid; gap: 10px; }
.ht-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: 500 1rem/1.35 var(--sans);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
}
@media (hover: hover) { .ht-option:hover { border-color: var(--gold); } }
.ht-option:active { transform: scale(0.99); }
.ht-option[aria-pressed="true"], .ht-option[aria-checked="true"], .ht-option.is-selected { border-color: var(--gold); background: var(--tint); }
.ht-option::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-top: 1.5px solid var(--gold-ink); border-right: 1.5px solid var(--gold-ink); transform: rotate(45deg); }
.ht-option-noarrow::after { display: none; }

/* ---------- Components ---------------------------------------------------- */

.ht-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s ease;
}
a.ht-card { color: inherit; text-decoration: none; }
@media (hover: hover) { a.ht-card:hover, .ht-card-hover:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); } }
.ht-card-plain { background: transparent; box-shadow: none; }
.ht-card > p { margin: 0.6rem 0 0; }
.ht-card-foot { margin-top: auto; padding-top: 22px; }

.ht-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ht-checks li { position: relative; padding-left: 28px; line-height: 1.55; }
.ht-checks li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 2px;
  width: 13px;
  height: 7px;
  border-bottom: 1.75px solid var(--gold);
  border-left: 1.75px solid var(--gold);
  transform: rotate(-45deg);
}
.ht-rule-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ht-rule-list > li { padding: 18px 0; border-bottom: 1px solid var(--line); }

.ht-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--ink);
  font: 500 0.8125rem/1.3 var(--sans);
  box-shadow: var(--shadow-sm);
}
.ht-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #2F9E62; box-shadow: 0 0 0 3px rgba(47, 158, 98, 0.18); }
.ht-dot-gold { background: var(--gold); }

.ht-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--charcoal);
  font: 500 0.875rem var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { .ht-chip:hover { border-color: var(--gold); color: var(--ink); } }
.ht-chip[aria-current], .ht-chip.is-active { border-color: var(--solid-bg); background: var(--solid-bg); color: var(--solid-text); }
.ht-chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.ht-chip-row::-webkit-scrollbar { display: none; }

.ht-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--charcoal); font: 500 0.75rem/1.4 var(--sans); }

/* Hero with guilloche linework and warm ambient light. */
.ht-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(48px, 8vw, 112px) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 84% 20%, rgba(184, 145, 42, 0.08) 0%, transparent 55%), var(--paper);
}
.ht-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -240px;
  width: 780px;
  height: 780px;
  background: var(--guilloche) center / contain no-repeat;
  opacity: 0.18;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
@media (max-width: 767px) {
  .ht-hero::before { top: -140px; right: -280px; width: 520px; height: 520px; opacity: 0.095; transform: none; }
}
.ht-hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .ht-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; } }
.ht-hero .ht-lead { margin-top: 22px; }
.ht-hero .ht-actions { margin-top: 32px; }

.ht-guilloche-bg { position: relative; isolation: isolate; overflow: hidden; }
.ht-guilloche-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -200px -300px auto;
  width: 640px;
  height: 640px;
  background: var(--guilloche) center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}

.ht-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--slate); font-size: 0.8125rem; }
.ht-breadcrumb a { color: var(--slate); text-decoration: none; }
@media (hover: hover) { .ht-breadcrumb a:hover { color: var(--ink); } }
.ht-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }

/* Architectural 4:5 portrait frame. */
.ht-portrait { position: relative; isolation: isolate; margin: 0; }
.ht-portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
}
.ht-portrait-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(184, 145, 42, 0.6);
  border-radius: var(--radius-lg);
  background: var(--photo-bg);
  box-shadow: var(--shadow-lg);
}
.ht-portrait-frame picture, .ht-portrait-frame img { display: block; width: 100%; height: 100%; }
.ht-portrait-frame img { object-fit: cover; object-position: 50% 14%; }
/* The caption wraps as text, not as flex items: wrapping the container put
   the dot alone on its own line with the name beneath it. */
.ht-portrait-status {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  align-items: flex-start;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 10px 16px;
  white-space: normal;
}
.ht-portrait-status > span:last-child { min-width: 0; }
/* Sits on the first line of the name rather than the middle of the block. */
.ht-portrait-status .ht-dot { margin-top: 4px; }
@media (max-width: 767px) {
  .ht-portrait-status { right: 12px; bottom: 12px; left: 12px; padding: 9px 14px; }
}
@media (max-width: 767px) { .ht-portrait::before { inset: 12px -12px -12px 12px; } }

/* Credential strip. */
.ht-cred-strip { border-block: 1px solid var(--contrast-line); background: var(--contrast-bg); color: var(--contrast-text); }
.ht-cred-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  max-width: var(--wrap);
  list-style: none;
  font: 500 0.6875rem/1.4 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* A marker per item, not a separator between them: when the row wraps, a
   separator would lead the new line as a stray mark. */
.ht-cred-list li { display: inline-flex; align-items: center; gap: 10px; }
.ht-cred-list li::before { content: ""; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
/* The source of an award is not itself a credential, so it sits back. */
.ht-cred-src { color: var(--contrast-muted); }
.ht-cred-src::before { content: "·"; margin: 0 0.5em 0 0.4em; }

@media (max-width: 767px) {
  .ht-cred-list { display: grid; justify-items: start; gap: 14px; padding-block: 24px; text-align: left; }
  /* Block, not inline-flex: the source line has to fall beneath its item. */
  .ht-cred-list li { display: block; position: relative; padding-left: 20px; line-height: 1.5; }
  /* Every item carries its own marker here, rather than a separator between. */
  .ht-cred-list li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }
  .ht-cred-src { display: block; margin-top: 3px; font-size: 0.6875rem; letter-spacing: 0.1em; }
  .ht-cred-src::before { display: none; }
}

/* Figures. */
.ht-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
@media (min-width: 900px) { .ht-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ht-stat { padding: clamp(20px, 3vw, 30px); background: var(--card); }
.ht-stat strong { display: block; color: var(--ink); font: 500 clamp(1.875rem, 3.4vw, 2.75rem)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.ht-stat span { display: block; margin-top: 10px; color: var(--slate); font-size: 0.875rem; line-height: 1.45; }

/* Timelines. */
.ht-steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: htstep; }
.ht-steps > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
.ht-steps > li:last-child { padding-bottom: 0; }
.ht-steps > li::before {
  counter-increment: htstep;
  content: counter(htstep, decimal-leading-zero);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
  color: var(--gold-ink);
  font: 600 0.8125rem var(--sans);
  font-variant-numeric: tabular-nums;
}
.ht-steps > li::after { content: ""; position: absolute; top: 48px; bottom: 0; left: 24px; width: 1px; background: var(--line-strong); }
.ht-steps > li:last-child::after { display: none; }
.ht-body .ht-steps h3 { margin: 10px 0 6px; font-size: 1.375rem; line-height: 1.25; }
.ht-steps p { margin: 0; }
.ht-bg-alt .ht-steps > li::before { background: var(--paper-2); }
@media (min-width: 960px) {
  .ht-steps-row { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 28px; }
  .ht-steps-row > li { grid-template-columns: 1fr; gap: 14px; padding-bottom: 0; }
  .ht-steps-row > li::after { top: 24px; right: -28px; bottom: auto; left: 60px; width: auto; height: 1px; }
  .ht-body .ht-steps-row h3 { margin-top: 4px; }
}

/* FAQ. */
.ht-faq { border-top: 1px solid var(--line); }
.ht-faq details { border-bottom: 1px solid var(--line); }
.ht-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 18px 0;
  color: var(--ink);
  font: 500 1.3125rem/1.3 var(--serif);
  list-style: none;
  cursor: pointer;
}
.ht-faq summary::-webkit-details-marker { display: none; }
.ht-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--gold-ink);
  border-bottom: 1.5px solid var(--gold-ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.3s var(--ease-enter);
}
/* Follows intent: [open] stays set until a close finishes, which turned the
   arrow back only after the panel had already shut. */
.ht-faq details[open]:not(.is-closing) summary::after { transform: translateY(2px) rotate(-135deg); }
.ht-faq details > :not(summary) { max-width: 46rem; margin: 0; padding: 0 0 22px; }

/* Tables. */
.ht-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ht-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums lining-nums; }
.ht-table th { padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.1em; text-align: left; text-transform: uppercase; }
.ht-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--charcoal); vertical-align: top; }
.ht-table tr:last-child td { border-bottom: 0; }
.ht-table .ht-r { text-align: right; white-space: nowrap; }
.ht-table strong { color: var(--ink); font-weight: 600; }

/* Opt-in: an item/amount table that stacks rather than scrolls on a phone. */
@media (max-width: 560px) {
  .ht-table-stack, .ht-table-stack tbody, .ht-table-stack tfoot, .ht-table-stack td { display: block; width: auto; }
  .ht-table-stack thead { display: none; }
  .ht-table-stack tr { display: block; padding: 15px 16px; border-bottom: 1px solid var(--line); }
  .ht-table-stack tr:last-child { border-bottom: 0; }
  .ht-table-stack td { padding: 0; border: 0; }
  .ht-table-stack td.ht-r { margin-top: 8px; color: var(--ink); font-weight: 600; text-align: left; white-space: normal; }
  .ht-table-stack .memo-total td.ht-r { font-size: 1.0625rem; }
}

/* Callouts. */
/* Capped to the same 44rem measure the prose uses. Dropped into a full-width
   wrap with nothing to constrain it, a callout ran to 131 characters a line on
   a wide screen — the eye loses the start of the next line at that length. */
.ht-callout { max-width: 44rem; padding: 20px 22px; border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--paper-2); color: var(--charcoal); }
.ht-callout > :first-child { margin-top: 0; }
.ht-callout > :last-child { margin-bottom: 0; }
.ht-callout-label { display: block; margin-bottom: 6px; color: var(--gold-ink); font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }

/* Quotes. */
.ht-quote { margin: 0; color: var(--ink); font: 500 clamp(1.5rem, 2.8vw, 2.25rem)/1.3 var(--serif); text-wrap: balance; }
.ht-quote-mark { display: block; height: 2.4rem; color: var(--gold-ink); font: 500 5rem/0.9 var(--serif); }

.ht-divider { height: 1px; margin: 0; border: 0; background: var(--line); }

/* Intake banner and footer. */
.ht-intake-banner { background: var(--contrast-bg-2); color: var(--contrast-text); }
.ht-intake-banner-inner { display: grid; gap: 24px; padding-block: 44px; }
@media (min-width: 900px) { .ht-intake-banner-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; } }
.ht-intake-banner-title { max-width: 42rem; margin: 10px 0 0; color: var(--contrast-heading); font: 500 clamp(1.5rem, 2.6vw, 2.125rem)/1.2 var(--serif); text-wrap: balance; }
.ht-intake-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 519px) { .ht-intake-banner-actions > * { flex: 1 1 100%; } }

.ht-footer { background: var(--contrast-bg); color: var(--contrast-muted); font-size: 0.9375rem; }
.ht-footer .ht-brand, .ht-footer .ht-brand-name { color: var(--contrast-heading); }
.ht-footer .ht-brand-sub { color: var(--gold-soft); }
.ht-footer-grid { display: grid; gap: 36px; padding-block: 64px 44px; }
@media (min-width: 640px) { .ht-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ht-footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023px) { .ht-footer-brand { grid-column: 1 / -1; } }
.ht-footer-brand p { max-width: 22rem; margin: 18px 0 0; line-height: 1.6; }
.ht-footer-brand address { max-width: 22rem; margin-top: 12px; color: var(--contrast-muted); font-size: 0.875rem; font-style: normal; line-height: 1.5; }
.ht-footer-title { margin: 0 0 14px; color: var(--contrast-heading); font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.ht-footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* An email address is one unbreakable word and the column is narrower than it
   at 1024, where it pushed the whole page sideways. */
.ht-footer-col li { min-width: 0; overflow-wrap: anywhere; }
.ht-footer a { color: var(--contrast-text); text-decoration: none; transition: color 0.2s ease; }
@media (hover: hover) { .ht-footer a:hover { color: var(--gold-soft); } }
.ht-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px; border-top: 1px solid var(--contrast-line); color: var(--contrast-muted); font-size: 0.8125rem; }
.ht-footer-base p { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }

/* The one read-progress bar on the site. It hangs just below the header's edge:
   under the header while it shows, and at the top of the screen when the
   header slides away, so it is visible for the whole read. (Articles used to
   draw a second, fixed bar of their own; that is gone.) */
.ht-read-progress {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Encrypted intake note. Quiet on purpose: a reassurance beside the decision to
   enquire, not a banner competing with it. */
.ht-secure { display: flex; align-items: flex-start; gap: 12px; max-width: 34rem; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ht-secure-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--tint); color: var(--gold-ink); }
.ht-secure-icon .ht-ico { width: 17px; height: 17px; }
.ht-secure p { margin: 0; color: var(--charcoal); font-size: .875rem; line-height: 1.55; }
.ht-secure strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.ht-secure .ht-link { margin-left: 4px; white-space: nowrap; }

/* Return to top. Hidden until a reader is deep in a page and heading back up. */
/* The print clone lives here, out of the way until a print begins. */
#htPrintArea { display: none; }

.ht-top-btn {
  position: fixed;
  right: 12px;
  bottom: calc(var(--dock-h) + 16px + env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .ht-top-btn { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.ht-top-btn.is-shown { opacity: 1; transform: none; visibility: visible; }
@media (hover: hover) { .ht-top-btn:hover { border-color: var(--gold); color: var(--gold-ink); } }
@media (min-width: 768px) { .ht-top-btn { right: 24px; bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .ht-top-btn { transition: opacity 0.2s linear, visibility 0.2s; transform: none; } }
.ht-no-dock .ht-top-btn { bottom: calc(16px + env(safe-area-inset-bottom)); }

/* Toasts. */
.ht-toasts {
  position: fixed;
  bottom: calc(var(--dock-h) + 16px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 160;
  display: grid;
  gap: 8px;
  width: min(92vw, 380px);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (min-width: 768px) { .ht-toasts { right: 24px; bottom: 84px; left: auto; transform: none; } }
.ht-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--solid-bg); color: var(--solid-text); font-size: 0.9rem; box-shadow: var(--shadow-lg); animation: htRise 0.4s var(--ease) both; }
.ht-toast.is-leaving { animation: htFade 0.3s ease both; }
.ht-toast > span { flex: 1; }
.ht-toast-action { flex: 0 0 auto; min-height: 36px; margin: -6px -8px -6px 4px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: 600 0.875rem/1 var(--sans); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; pointer-events: auto; }
.ht-toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
@media (hover: hover) { .ht-toast-action:hover { background: color-mix(in srgb, currentColor 10%, transparent); } }
.ht-toast .ht-ico { color: var(--gold-soft); }
.ht-toast[data-kind="warn"] .ht-ico { color: #F2B8B0; }

/* ---------- Encrypted intake section (shared) ----------------------------- */

.hti { padding: clamp(64px, 9vw, 112px) 0; border-top: 1px solid var(--line); background: var(--paper-2); }
.hti--plain { background: var(--paper); }
.hti-shell { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hti-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .hti-grid { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 64px; } }
.hti-eyebrow { margin: 0; color: var(--gold-ink); font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.ht-body .hti-title, .ht-body .hti-title-display { margin: 14px 0 0; color: var(--ink); font: 500 clamp(2.125rem, 4.2vw, 3.25rem)/1.08 var(--serif); letter-spacing: -0.005em; text-wrap: balance; }
.hti-lead, .hti-body { max-width: 36rem; margin: 18px 0 0; color: var(--charcoal); font-size: 1.0625rem; line-height: 1.7; }
.hti-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 519px) { .hti-actions > * { flex: 1 1 100%; } }
.hti-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 1.5rem; border-radius: 10px; font: 600 0.9375rem var(--sans); text-decoration: none; cursor: pointer; box-sizing: border-box; }
.hti-btn-gold { border: 1px solid var(--gold); background: var(--gold); color: var(--on-gold); }
@media (hover: hover) { .hti-btn-gold:hover { background: #C49D38; } }
.hti-btn-ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
@media (hover: hover) { .hti-btn-ghost:hover { border-color: var(--ink); } }
.hti-note { margin: 16px 0 0; color: var(--slate); font-size: 0.875rem; line-height: 1.6; }
.hti-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.ht-body .hti-card > h3 { margin: 0; color: var(--slate); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.hti-list { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.hti-list li { margin: 0; color: var(--charcoal); font-size: 0.9375rem; line-height: 1.65; }
.hti-list strong { color: var(--ink); font-weight: 600; }
.hti-tiles { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hti-tiles { grid-template-columns: 1fr 1fr; } }
.hti-tile { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.hti-tile b { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.hti-tile span { display: block; margin-top: 4px; color: var(--charcoal); font-size: 0.9375rem; line-height: 1.6; }
.hti-steps { display: grid; gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: hti; }
.hti-steps li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 12px; margin: 0; color: var(--charcoal); font-size: 0.9375rem; line-height: 1.65; }
.hti-steps li::before { counter-increment: hti; content: counter(hti); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-ink); font-size: 0.75rem; font-weight: 600; }

/* ---------- Motion -------------------------------------------------------- */

html.htla-reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.htla-reveal-ready .reveal.active { opacity: 1; transform: none; }

@keyframes htRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes htFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes htPop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes htPopOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.98); } }

/* Disclosures. Height and the content fade are both animated in script. */
details[data-ht-disclosure] summary { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Print --------------------------------------------------------- */

.ht-print-only { display: none; }
@media print {
  .ht-header, .ht-drawer, .ht-dock, .ht-top-btn, .ht-footer, .ht-intake-banner, .ht-sheet, .ht-toasts, .ht-skip, .ht-no-print { display: none !important; }
  .ht-main { padding-top: 0; }
  /* A full-viewport minimum on the body becomes a full page of nothing. */
  .ht-body { min-height: 0; background: #FFFFFF; padding: 0; }
  @page { margin: 14mm; }
  .ht-print-only { display: block; }
  /* display, not visibility: a hidden element still occupies pages. */
  html.ht-print-target body > *:not(#htPrintArea) { display: none !important; }
  html.ht-print-target #htPrintArea { display: block !important; }
  html.ht-print-target #htPrintArea .memo { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  html.ht-print-target #htPrintArea .memo::before { display: none !important; }
}

/* ==========================================================================
   Dark theme
   The reader's system preference applies unless they have chosen otherwise;
   the toggle in the header writes data-theme onto <html> and wins either way.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* The same paper, unlit: warm near-blacks, not blue-grey. */
    --paper: #17140F;
    --paper-2: #1D1913;
    --paper-3: #241F18;
    --card: #1C1811;
    --ink: #F5F1E8;
    --ink-2: #E8E2D6;
    --ink-3: #D4CDBE;
    --charcoal: #DDD7C9;
    --slate: #ACA492;

    /* Gold carries text here, so the ink shade lightens rather than darkens. */
    --gold: #C9A24A;
    --gold-soft: #DCC08A;
    --gold-ink: #DBBA6E;
  --field-line: #7C7364;
  --focus: #C9A24A;
  --focus-ring: rgba(201, 162, 74, 0.24);
    --gold-wash: rgba(201, 162, 74, 0.12);

    --line: #2F2A21;
    --line-strong: #433B2F;
    --danger: #F0ABA0;
    --ok: #88D2A5;

    /* Bands that are dark in both themes lift off the page instead of sinking. */
    --contrast-bg: #241F18;
    --contrast-bg-2: #211C15;
    --contrast-text: #DDD7C9;
    --contrast-heading: #FFFCF5;
    --contrast-muted: #ACA492;
    --contrast-line: rgba(245, 241, 232, 0.10);
    --contrast-line-strong: rgba(245, 241, 232, 0.30);
  --dock-bg: rgba(20, 17, 12, 0.88);
  --dock-line: rgba(245, 241, 232, 0.14);

    /* The inverted button becomes ivory on ink. */
    --solid-bg: #EFEADF;
    --solid-bg-hover: #FFFCF5;
    --solid-text: #17140F;
    --on-gold: #17140F;

    --tint: rgba(201, 162, 74, 0.12);
    --tint-line: rgba(201, 162, 74, 0.32);
    --memo-bg: #1D1913;
    --photo-bg: #2F2A21;
    --glass-bg: rgba(28, 24, 17, 0.82);
    --pill-bg: rgba(28, 24, 17, 0.92);
    --placeholder-veil: rgba(23, 20, 15, 0.74);
    --header-bg: rgba(23, 20, 15, 0.92);
    --header-line: rgba(245, 241, 232, 0.08);
    --hover-wash: rgba(245, 241, 232, 0.07);
    --overlay: rgba(8, 6, 3, 0.62);
    --ok-bg: rgba(136, 210, 165, 0.13);
    --danger-bg: rgba(240, 171, 160, 0.13);

    /* Shadows do little on a dark ground; borders carry the elevation. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 32px -12px rgba(0, 0, 0, 0.60);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.50), 0 26px 60px -20px rgba(0, 0, 0, 0.70);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* The same paper, unlit: warm near-blacks, not blue-grey. */
  --paper: #17140F;
  --paper-2: #1D1913;
  --paper-3: #241F18;
  --card: #1C1811;
  --ink: #F5F1E8;
  --ink-2: #E8E2D6;
  --ink-3: #D4CDBE;
  --charcoal: #DDD7C9;
  --slate: #ACA492;

  /* Gold carries text here, so the ink shade lightens rather than darkens. */
  --gold: #C9A24A;
  --gold-soft: #DCC08A;
  --gold-ink: #DBBA6E;
  --field-line: #7C7364;
  --focus: #C9A24A;
  --focus-ring: rgba(201, 162, 74, 0.24);
  --gold-wash: rgba(201, 162, 74, 0.12);

  --line: #2F2A21;
  --line-strong: #433B2F;
  --danger: #F0ABA0;
  --ok: #88D2A5;

  /* Bands that are dark in both themes lift off the page instead of sinking. */
  --contrast-bg: #241F18;
  --contrast-bg-2: #211C15;
  --contrast-text: #DDD7C9;
  --contrast-heading: #FFFCF5;
  --contrast-muted: #ACA492;
  --contrast-line: rgba(245, 241, 232, 0.10);
  --contrast-line-strong: rgba(245, 241, 232, 0.30);
  --dock-bg: rgba(20, 17, 12, 0.88);
  --dock-line: rgba(245, 241, 232, 0.14);

  /* The inverted button becomes ivory on ink. */
  --solid-bg: #EFEADF;
  --solid-bg-hover: #FFFCF5;
  --solid-text: #17140F;
  --on-gold: #17140F;

  --tint: rgba(201, 162, 74, 0.12);
  --tint-line: rgba(201, 162, 74, 0.32);
  --memo-bg: #1D1913;
  --photo-bg: #2F2A21;
  --glass-bg: rgba(28, 24, 17, 0.82);
  --pill-bg: rgba(28, 24, 17, 0.92);
  --placeholder-veil: rgba(23, 20, 15, 0.74);
  --header-bg: rgba(23, 20, 15, 0.92);
  --header-line: rgba(245, 241, 232, 0.08);
  --hover-wash: rgba(245, 241, 232, 0.07);
  --overlay: rgba(8, 6, 3, 0.62);
  --ok-bg: rgba(136, 210, 165, 0.13);
  --danger-bg: rgba(240, 171, 160, 0.13);

  /* Shadows do little on a dark ground; borders carry the elevation. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 32px -12px rgba(0, 0, 0, 0.60);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.50), 0 26px 60px -20px rgba(0, 0, 0, 0.70);
}

/* Portraits were lit for a white page; take the edge off on a dark one. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ht-portrait-frame img,
  :root:not([data-theme="light"]) .team-member-photo img { filter: brightness(0.94) contrast(1.02); }
}
:root[data-theme="dark"] .ht-portrait-frame img,
:root[data-theme="dark"] .team-member-photo img { filter: brightness(0.94) contrast(1.02); }

/* A theme swap restyles the whole page at once. Letting each element run its
   own 0.2-0.35s transition leaves links, buttons and fields morphing between
   two palettes while the surfaces around them have already changed — which is
   what reads as a flicker, so those transitions are held off for the swap.
   The rule names only what actually transitions colour. An earlier version
   matched every element and pseudo-element, and toggling it cost a second
   whole-page restyle two frames after the first: the swap stuttered twice.
   Anything added later that transitions colour belongs in this list.
   The one exception is the control the reader just pressed: its icon keeps
   turning, because that is feedback rather than incidental colour drift. */
html.ht-theming :is(a, button, input, select, textarea, summary, li, label, .ht-link, .ht-btn, .ht-card, .ht-option, .ht-chip, .ht-icon-btn, .ht-header, .ht-blog-card, .ht-blog-featured, .diaspora-download-row, .est-option span, .est-adjust, .home-callout, .about-milestone-tab, .team-assessment-answer, [data-step-dots] > span, .tool-segment span, .tool-check, .cl-matter > span, .cl-chip > span, .cl-chip > span::before, .cl-box, .cl-text strong, .ht-drawer-tool, .cl-change, .ht-toast-action, .ht-tool-inline a, .ht-tool-aside, .ht-tool-tile, .transition),
html.ht-theming :is(.est-option span, .about-milestone-tab)::before { transition: none !important; }
html.ht-theming .ht-theme-toggle .ht-ico { transition: transform 0.4s var(--ease) !important; }

/* The theme control itself. */
.ht-theme-toggle { color: var(--slate); }
@media (hover: hover) { .ht-theme-toggle:hover { color: var(--ink); } }
.ht-theme-toggle .ht-ico { transition: transform 0.4s var(--ease); }
:root[data-theme="dark"] .ht-theme-toggle .ht-ico { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ht-theme-toggle .ht-ico { transform: rotate(180deg); }
}
.ht-theme-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ht-theme-row > span { color: var(--ink); font: 600 0.95rem/1.3 var(--sans); }
.ht-theme-switch { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.ht-theme-switch button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--slate); font: 600 0.875rem var(--sans); cursor: pointer; }
.ht-theme-switch button[aria-pressed="true"] { background: var(--solid-bg); color: var(--solid-text); }

/* Printing is always on white paper, whatever the screen is doing. */
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #FFFFFF;
    --paper-2: #FFFFFF;
    --paper-3: #FFFFFF;
    --card: #FFFFFF;
    --memo-bg: #FFFFFF;
    --ink: #0E1318;
    --charcoal: #1F242B;
    --slate: #4A515C;
    --line: #D8D2C6;
    --line-strong: #B9B2A3;
    --gold-ink: #7A5C13;
    --field-line: #6E6558;
    --focus: #7A5C13;
    --tint: #F7F2E4;
    --contrast-bg: #FFFFFF;
    --contrast-text: #1F242B;
    --contrast-heading: #0E1318;
  }
}