/* Pacific Horizon Therapy — Option A "Horizon" shared design system (warm refactor, see REFACTOR-A.md)
   A fixed warm-gradient layer (no photo backdrops), soft white cards on top,
   terracotta CTA, slate ink. Blue survives only inside the logo image.
   Type: Roboto throughout, like the original site (ships Cyrillic subsets).
   Weights in use: 400 body · 500 UI/subheads · 700 headings/emphasis. */

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root {
  /* ===== Warm system (REFACTOR-A.md) — pages use these, never hard-code ===== */
  --bg: #F7F3EE;              /* base cream under the gradient layer */
  --cta: #B05C38;             /* CTA fill, white text 4.7:1 */
  --cta-hover: #9A4C2C;
  --on-cta: #fff;
  --cta-soft: #F6E6DC;        /* terracotta-tinted fills (selected pills, badges, banners) */
  --terracotta: #C26D47;      /* DECORATIVE only: dots, rules, icon tints, pill borders — never text on cream */
  /* terracotta TEXT (eyebrows, links, active states). Spec #9A4C2C measured only ~4.0:1 where hero
     eyebrows sit on the gradient (#E2CDC1 under the 10%/20% radial) → nudged to 4.7:1 worst case. */
  --terracotta-ink: #8A4424;
  --sage: #3A5A40;            /* sage TEXT (5.9:1 on --sage-soft) */
  --sage-soft: #E5EEE5;
  --stone: #D6D3D1;           /* stone borders */
  --stone-soft: rgba(231, 229, 228, 0.5);
  --slate: #1E293B;           /* default .btn fill */
  --alarm: #A63A2A;           /* emergency callout accent (5.9:1 on its tint) */
  --alarm-soft: #FDF3EF;

  /* legacy names → re-tinted to the warm system (pages still reference them) */
  --sea: var(--cta);
  --sea-deep: var(--terracotta-ink);
  --sea-soft: var(--cta-soft);
  --sun: var(--cta);          /* fills only — carries white text */
  --sun-deep: var(--terracotta-ink);
  --sun-ink: var(--terracotta-ink);
  --sun-text: var(--terracotta-ink);
  --on-sun: #fff;
  --sun-soft: var(--cta-soft);
  --primary: var(--cta);
  --sand: #f7f1ea;
  --paper: #fbf8f4;           /* solid surface used when glass is unavailable */

  /* ink */
  --ink: #1E293B;
  /* spec #5F6F84 passes on flat cream (4.6:1) but only 3.4:1 on the gradient's darker areas → slate-600, 4.9:1 worst case */
  --ink-2: #475569;
  --ink-3: #475569;
  --muted: var(--ink-2);
  --line: rgba(30, 41, 59, 0.1);
  --link: var(--terracotta-ink);
  --focus: var(--terracotta-ink);

  /* surfaces — the "soft card" */
  --glass: rgba(255, 255, 255, 0.85);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-border: var(--stone-soft);
  --blur: blur(12px);
  --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 4px 12px -6px rgba(28, 25, 23, 0.1);
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 8px 24px -14px rgba(28, 25, 23, 0.14);
  --shadow-lg: 0 2px 4px rgba(28, 25, 23, 0.04), 0 16px 32px -16px rgba(28, 25, 23, 0.18), 0 40px 72px -36px rgba(28, 25, 23, 0.26);
  --halo: none;

  /* status */
  --ok: #1d7a55;
  --ok-bg: #dff3ea;
  --warn: #8a4f00;
  --warn-bg: #fdf0da;
  --err: #b3261e;
  --err-bg: #fbe3e1;

  /* type */
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17 → 18px */

  /* 8px spacing scale */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;
  --section-y: clamp(var(--s-5), 7vw, var(--s-12));

  /* layout */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --gutter: 16px;
  --content: 1120px;
  --rail-w: 96px;
  --bottom-h: 68px;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(60px + var(--s-2));
  /* phones: keep focused/anchored content clear of the bottom tab bar */
  scroll-padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom) + var(--s-2));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.55;
  color: var(--ink);
  background-color: #3d251e; /* matches the mesh base so overscroll never flashes cream */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Warm gradient backdrop (fixed layer ≙ background-attachment:fixed, which fails on iOS).
   No photo backgrounds and no scrim any more — every page shares this one layer. ---------- */
body[data-page]::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh; /* cover the area behind collapsing mobile toolbars */
  pointer-events: none;
  /* Warm mocha mesh: bright sun top-right, amber horizon glow, terracotta left, dark-earth vignette bottom */
  background-color: #3d251e;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(252, 227, 199, .85) 0%, rgba(252, 227, 199, 0) 45%),
    radial-gradient(circle at 65% 35%, rgba(232, 163, 110, .7) 0%, rgba(232, 163, 110, 0) 50%),
    radial-gradient(circle at 15% 40%, rgba(140, 82, 58, .85) 0%, rgba(140, 82, 58, 0) 55%),
    radial-gradient(ellipse 70% 45% at 30% 105%, rgba(42, 24, 19, .8) 0%, rgba(42, 24, 19, 0) 70%),
    linear-gradient(135deg, #7c4832 0%, #a86b4d 30%, #4a2d24 70%, #2a1813 100%);
}

/* Paper sheet: every page's content sits on one light surface so text stays AA over the dark mesh */
main.page {
  position: relative;
  width: min(calc(100% - 16px), calc(var(--content) + 2 * clamp(20px, 4vw, 56px)));
  margin: clamp(8px, 2vw, 28px) auto 0;
  padding: clamp(8px, 2vw, 24px) clamp(16px, 4vw, 56px) clamp(24px, 4vw, 48px);
  background: rgba(250, 248, 245, .92);
  border: 1px solid rgba(231, 229, 228, .4);
  border-radius: clamp(16px, 2vw, 28px);
  box-shadow: 0 30px 80px -30px rgba(20, 10, 6, .65);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { main.page { background: #faf8f5; } }
@media (prefers-reduced-transparency: reduce) { main.page { background: #faf8f5; } }

img { max-width: 100%; height: auto; display: block; } /* never distort: explicit heights must pair with object-fit */
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease-out; }
a:hover { color: #6E3418; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(194, 109, 71, 0.24); color: var(--ink); }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
h4 { font-weight: 700; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
.lead { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.eyebrow { display: inline-block; font-family: var(--font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: var(--terracotta-ink); margin-bottom: var(--s-1); }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* (photo halo retired — --halo is none; kept so older page CSS referencing it stays valid) */

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { top: 8px; color: #fff; }

/* ---------- Layout shell ---------- */
.page { padding: 0 var(--gutter); }
.container { width: 100%; max-width: var(--content); margin: 0 auto; }
.section { padding: var(--section-y) 0; }
.section:first-child { padding-top: clamp(var(--s-3), 4vw, var(--s-6)); }
.section + .section { padding-top: 0; }
main { padding-bottom: clamp(24px, 4vw, 48px); }
main p, main li { max-width: 68ch; }

.grid-2 { display: grid; gap: clamp(var(--s-3), 4vw, var(--s-6)); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1.15fr 0.85fr; } .grid-2.even { grid-template-columns: 1fr 1fr; } }

/* Section heading group: eyebrow + h2 + lead */
.section-head { max-width: 65ch; margin: 0 0 clamp(var(--s-3), 4vw, var(--s-5)); }
.section-head h2, .section-head h1 { margin-bottom: 12px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head .lead { margin: 0; }
.section-head > :last-child { margin-bottom: 0; }
.section-head.center, .center > .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Surfaces: the "soft card" ---------- */
.card, .soft-card {
  position: relative;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(231, 229, 228, .5);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
  padding: clamp(var(--s-3), 3.5vw, var(--s-5));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.card.solid, .soft-card.solid { background: rgba(255, 255, 255, .94); }
.card + .card { margin-top: var(--s-3); }
.card > :last-child, .soft-card > :last-child { margin-bottom: 0; }

/* =====================================================================
   Shared components (warm refactor). Pages may use them directly.
   .soft-card          — alias of the .card look (white/85, blur 12, stone hairline, 16px radius)
   .card-grid          — responsive auto-fit grid for cards (min 260px columns)
   .price-pill         — pill with the price: <span class="price-pill">CA$160</span>
     .price-pill--free — sage "Free" variant; .price-pill--terracotta — terracotta-tinted variant
   .duration-tag       — small neutral tag: <span class="duration-tag">50 minutes</span> (optional leading svg)
   .step-card          — soft card with a numbered bubble: <li class="step-card"><span class="step-num">1</span><h3>…</h3><p>…</p></li>
                         (.step-list = <ol> grid wrapper for several step cards)
   .info-card          — soft card with an icon tile: <div class="info-card"><span class="ico">svg</span><h3>…</h3><p>…</p></div>
   .cta-banner         — one-row terracotta-tinted banner: <div class="cta-banner"><div><h2>…</h2><p>…</p></div><a class="btn btn--sun">…</a></div>
                         stacks on phones (< 700px) with a full-width button
   .callout-emergency  — calm but prominent red/terracotta-bordered notice for 911 / 310-6789 / 9-8-8
   ===================================================================== */
.card-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card-grid > .card + .card { margin-top: 0; }

.price-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 14px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(194, 109, 71, .45);
  color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.price-pill--free { background: var(--sage-soft); border-color: rgba(58, 90, 64, .3); color: var(--sage); }
.price-pill--terracotta { background: var(--cta-soft); border-color: rgba(194, 109, 71, .45); color: var(--terracotta-ink); }

.duration-tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 12px; border-radius: 999px;
  background: rgba(30, 41, 59, .05); color: var(--ink-2);
  font-size: .875rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.duration-tag svg { width: 16px; height: 16px; flex: none; color: var(--terracotta); }

.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.step-card {
  position: relative;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(231, 229, 228, .5);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
  padding: var(--s-3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.step-card .step-num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px;
  border-radius: 999px; background: var(--cta-soft); color: var(--terracotta-ink);
  box-shadow: inset 0 0 0 1px rgba(194, 109, 71, .35);
  font-weight: 700; font-size: 1rem; line-height: 1;
}
.step-card h3 { margin-bottom: 6px; }
.step-card p { color: var(--ink-2); margin-bottom: 0; }

.info-card {
  position: relative;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(231, 229, 228, .5);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
  padding: var(--s-3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.info-card .ico {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px;
  border-radius: 12px; background: var(--cta-soft); color: var(--terracotta-ink);
}
.info-card .ico svg { width: 22px; height: 22px; }
.info-card h3 { margin-bottom: 6px; }
.info-card p { color: var(--ink-2); }
.info-card > :last-child { margin-bottom: 0; }

.cta-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: clamp(var(--s-3), 3vw, var(--s-4)) clamp(var(--s-3), 3.5vw, var(--s-5));
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(246, 230, 220, .95) 0%, rgba(255, 255, 255, .88) 100%);
  border: 1px solid rgba(194, 109, 71, .3);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cta-banner > div { min-width: 0; }
.cta-banner h2, .cta-banner h3 { margin-bottom: 4px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.cta-banner p { margin: 0; color: var(--ink-2); }
.cta-banner .btn { flex: none; }
@media (max-width: 699px) {
  .cta-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .cta-banner .btn { width: 100%; }
}

.callout-emergency {
  position: relative;
  padding: var(--s-2) var(--s-2) var(--s-2) calc(var(--s-2) + 4px);
  border-radius: 12px;
  background: var(--alarm-soft);
  border: 1px solid rgba(166, 58, 42, .3);
  box-shadow: inset 4px 0 0 var(--alarm);
  color: var(--ink); font-size: .9375rem; line-height: 1.5;
}
.callout-emergency strong, .callout-emergency .callout-h { color: var(--alarm); }
.callout-emergency .callout-h { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-weight: 700; font-size: 1rem; line-height: 1.45; }
.callout-emergency .callout-h svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.callout-emergency ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.callout-emergency a { color: var(--alarm); font-weight: 700; }
.callout-emergency a:hover { color: #7F2A1E; }
.callout-emergency p { margin: 0 0 6px; }
.callout-emergency > :last-child { margin-bottom: 0; }

/* No backdrop-filter, or the user asked for less transparency → solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, 0.97); --glass-strong: #fff; }
  .card, .soft-card, .step-card, .info-card { background: rgba(255, 255, 255, .96); }
  .site-header, .bottom-nav, .side-rail { background: #fff !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #fff; --glass-strong: #fff; --blur: none; }
  .card, .soft-card, .step-card, .info-card, .cta-banner, .site-header, .bottom-nav, .side-rail, .trust-strip > * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .card, .soft-card, .step-card, .info-card { background: #fff; }
  .site-header, .bottom-nav, .side-rail { background: #fff !important; }
}

.hero-img, .photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
}

/* Framed photo: <figure class="photo-frame"><img …><figcaption>…</figcaption></figure> */
.photo-frame { margin: 0; position: relative; display: grid; gap: 12px; justify-items: start; }
.photo-frame img, .photo-frame picture {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.6);
  outline-offset: -1px;
}
.photo-frame--portrait img { aspect-ratio: 4 / 5; }
.photo-frame--tall img { aspect-ratio: 2 / 3; }
.photo-frame--wide img { aspect-ratio: 16 / 9; }
.photo-frame--square img { aspect-ratio: 1; }
.photo-frame figcaption, .photo-frame .caption {
  display: inline-block; max-width: 100%;
  padding: 6px 14px; border-radius: 999px;
  background: var(--glass-strong); box-shadow: var(--shadow-sm);
  font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2);
}

/* Painted "photos": CSS-only scenes echoing the original stock imagery */
.scene { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; }
.scene::after { content: none; } /* no stripe overlay — leftover scenes stay clean */
.scene--calm { background:
  radial-gradient(9% 6% at 50% 50%, #fffbe8, rgba(255,251,232,0) 100%),
  radial-gradient(40% 18% at 50% 52%, rgba(255,236,190,0.9), rgba(255,236,190,0) 70%),
  linear-gradient(180deg, #3e4d5e 0%, #8a9aa8 24%, #d9d6c3 48%, #efe6c9 52%, #a9b5bd 60%, #4a5a69 100%); }
.scene--sunset { background:
  radial-gradient(8% 5.5% at 56% 50%, #fff4dc, #ffdcb0 60%, rgba(255,220,176,0) 100%),
  radial-gradient(45% 20% at 56% 52%, rgba(255,210,170,0.85), rgba(255,210,170,0) 70%),
  linear-gradient(180deg, #8ea3c0 0%, #d8c9d0 30%, #f3d6c3 50%, #e7b9a6 54%, #9c8fae 70%, #3b3558 100%); }
.scene--road { background:
  linear-gradient(180deg, transparent 72%, #7fb05a 72%, #5f8f3f 100%),
  radial-gradient(30% 12% at 30% 62%, #fff, rgba(255,255,255,0) 70%),
  radial-gradient(35% 14% at 70% 58%, #fff, rgba(255,255,255,0) 70%),
  linear-gradient(180deg, #3d86d1 0%, #7fb4e6 50%, #cfe3f5 72%); }
.scene--road::before { content: ""; position: absolute; left: 20%; right: -10%; bottom: 0; height: 28%; background: #8e959b; clip-path: polygon(42% 0, 48% 0, 100% 100%, 0 100%); }
.scene--road::after { display: none; }
.scene--room { aspect-ratio: 16 / 9; background:
  linear-gradient(180deg, transparent 80%, #9c8062 80%),
  linear-gradient(90deg, #6f8a93 0 22%, transparent 22% 78%, #6f8a93 78%),
  radial-gradient(20% 30% at 50% 45%, #fdf4e2, #dfe7e3 60%, #b8c9c8 100%);
}

/* ---------- Trust strip: small credential items with icons ---------- */
.trust-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.trust-strip > * {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; max-width: 100%; margin: 0;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.25; color: var(--ink-2);
}
.trust-strip svg, .trust-strip .ico { flex: none; width: 20px; height: 20px; color: var(--terracotta); }
.trust-strip .ico { display: inline-grid; place-items: center; }
.trust-strip .ico svg { width: 20px; height: 20px; }
.trust-strip a { color: var(--link); }
.trust-strip strong { color: var(--ink); font-weight: 700; }
@media (max-width: 479px) {
  .trust-strip > * { font-size: 0.875rem; padding: 6px 12px 6px 8px; min-height: 36px; }
}

/* ---------- Buttons ---------- */
/* hierarchy: .btn--sun = terracotta CTA (primary conversion) · .btn = slate (strong secondary, e.g. form submit/continue)
   · .btn--ghost = white/85 with stone border (tertiary) */
.btn {
  --bg: var(--slate); --fg: #fff; --bg-hover: #334155;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 500 1.0625rem/1.1 var(--font); text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.12), 0 8px 20px -12px rgba(30, 41, 59, 0.45);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { color: var(--fg); background: var(--bg-hover); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn--sun { --bg: var(--cta); --fg: var(--on-cta); --bg-hover: var(--cta-hover); box-shadow: 0 1px 2px rgba(120, 50, 20, 0.14), 0 8px 20px -10px rgba(176, 92, 56, 0.6); }
.btn--sun:hover { background: var(--bg-hover); color: var(--on-cta); }
.btn--ghost { --bg: rgba(255,255,255,.85); --fg: var(--ink); --bg-hover: #fff; box-shadow: inset 0 0 0 1px var(--stone); }
.btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #A8A29E, var(--shadow-sm); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Chips / pills / badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--stone); color: var(--ink); font-size: .9375rem; line-height: 1.3; }
a.chip, button.chip { min-height: 44px; text-decoration: none; cursor: pointer; font: inherit; font-size: .9375rem; transition: background-color .15s ease-out, border-color .15s ease-out; }
a.chip:hover, button.chip:hover { background: #fff; border-color: #A8A29E; color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current], .chip.is-active { background: var(--cta-soft); border-color: rgba(194, 109, 71, .55); color: var(--terracotta-ink); font-weight: 500; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; background: var(--cta-soft); color: var(--terracotta-ink); }
.badge--blue, .badge--sage { background: var(--sage-soft); color: var(--sage); }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--err { background: var(--err-bg); color: var(--err); }

/* ---------- Lists ---------- */
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.list-check li { position: relative; padding-left: 32px; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--sun-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A4424' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.list-dot { padding-left: 1.2em; margin: 0 0 1em; }
.list-dot li { margin: .4em 0; }
.list-dot li::marker { color: var(--terracotta); }

/* ---------- Accordion (native <details>) ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 4px; font-weight: 500; transition: color .15s ease-out; }
.accordion summary:hover { color: var(--terracotta-ink); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2b38' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: transform .2s var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .panel { padding: 0 4px var(--s-3); color: var(--ink-2); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; margin-bottom: var(--s-2); }
.field label, .field .label { font-weight: 500; font-size: 1rem; }
.field .req { color: var(--ink-3); font-weight: 400; font-size: .875rem; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 1.0625rem/1.4 var(--font); /* ≥ 16px: no iOS zoom */
  color: var(--ink);
  background: rgba(255,255,255,.94); border: 1px solid rgba(31,43,56,.24); border-radius: var(--radius-sm);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.textarea { min-height: 144px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(31,43,56,.38); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 4px rgba(176,92,56,.18); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--err); }
.field .error { color: var(--err); font-size: .9375rem; min-height: 0; }
.field-row { display: grid; gap: 0 var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.checkbox input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--cta); flex: none; }

.alert { padding: var(--s-2); border-radius: var(--radius-sm); font-size: 1rem; }
.alert--ok { background: var(--ok-bg); color: var(--ok); }
.alert--err { background: var(--err-bg); color: var(--err); }
.alert--info { background: var(--cta-soft); color: var(--terracotta-ink); }

/* ---------- Reveal on scroll (app.js adds .reveal + .is-visible) ---------- */
/* Fail-safe: only hidden while html.js-reveal is set AND the element isn't marked visible yet.
   app.js adds .js-reveal only with IntersectionObserver + motion allowed, and force-shows everything after 1.5s. */
html.js-reveal .reveal { transition: opacity .25s ease-out, transform .25s ease-out; transition-delay: var(--reveal-delay, 0ms); }
html.js-reveal .reveal:not(.is-visible) { opacity: 0; transform: translateY(8px); }
html.js-reveal .reveal.reveal-instant { transition: none; }
@media (prefers-reduced-motion: reduce) { html.js-reveal .reveal:not(.is-visible) { opacity: 1; transform: none; } }

/* ---------- Shell: header (desktop), rail (tablet), bottom bar (mobile) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 var(--gutter);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(231, 229, 228, .4);
}
.site-header { justify-content: flex-start; gap: 8px; }
.brand { display: inline-flex; align-items: center; margin-right: auto; flex: none; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.brand img { height: 38px; width: auto; }
.lbl-short { display: none; }
.site-header .nav-links { display: none; }
.site-header .header-cta { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .18s var(--ease); }
.icon-btn:hover { background: rgba(255,255,255,.9); }
.icon-btn svg { width: 24px; height: 24px; }

@keyframes pht-pill-in { from { background-color: transparent; transform: scale(.82); } to { transform: none; } }

/* bottom tab bar — phones */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom));
  padding: 6px 6px env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(231, 229, 228, .8);
  box-shadow: 0 -8px 24px -18px rgba(28, 25, 23, .25);
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-radius: 14px; color: var(--ink-2); text-decoration: none; font-size: .75rem; font-weight: 500; line-height: 1.1; transition: color .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.bottom-nav a svg { width: 24px; height: 24px; }
.bottom-nav a[aria-current="page"] { color: var(--terracotta-ink); font-weight: 700; }
.bottom-nav a[aria-current="page"] .ico { background: var(--cta-soft); box-shadow: inset 0 0 0 1px rgba(194, 109, 71, .3); animation: pht-pill-in .25s var(--ease); }
.bottom-nav .ico { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 999px; transition: background-color .2s var(--ease), transform .15s var(--ease); }
.bottom-nav a:active .ico { transform: scale(.94); }
.bottom-nav a.is-cta .ico { background: var(--cta); color: var(--on-cta); }
.bottom-nav a.is-cta { color: var(--terracotta-ink); }
.bottom-nav a.is-cta[aria-current="page"] .ico { background: var(--cta-hover); box-shadow: 0 0 0 3px rgba(194, 109, 71, .28); }

/* side rail — tablets */
.side-rail { display: none; }

/* slide-over "more" sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 28, 38, .35); opacity: 0; pointer-events: none; transition: opacity .2s ease-out; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 86vh; overflow: auto; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--paper); border-radius: 24px 24px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; box-shadow: 0 -12px 40px rgba(20,28,38,.25); }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(31,43,56,.2); margin: 0 auto 16px; }
body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
body.sheet-open .sheet { transform: none; visibility: visible; transition: transform .25s var(--ease), visibility 0s; }
.sheet nav a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; transition: background-color .18s var(--ease); }
.sheet nav a:hover { background: rgba(28,25,23,.05); }
.sheet nav a svg { width: 22px; height: 22px; color: var(--ink-3); }
.sheet nav a[aria-current="page"] { background: var(--cta-soft); color: var(--terracotta-ink); }
.sheet nav a[aria-current="page"] svg { color: var(--terracotta-ink); }
.sheet .sheet-contact { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 1rem; }

/* footer — one soft panel: brand/contact · navigation · offices · emergency notice; copyright row below */
.site-footer { padding: var(--s-4) var(--gutter) calc(var(--bottom-h) + var(--s-5) + env(safe-area-inset-bottom)); color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.site-footer .container {
  display: grid; gap: var(--s-4) var(--s-4); grid-template-columns: 1fr;
  padding: clamp(var(--s-3), 3.5vw, var(--s-5));
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(231, 229, 228, .5);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.site-footer .footer-col { min-width: 0; }
.site-footer .footer-logo { display: inline-block; margin-bottom: 12px; }
.site-footer .footer-logo img { width: 168px; height: auto; }
.site-footer .tagline { margin: 0 0 12px; color: var(--ink-2); font-weight: 500; }
.site-footer h4 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.site-footer .footer-offices { gap: 16px; }
.site-footer .footer-offices strong { color: var(--ink); font-weight: 500; }
.site-footer .footer-offices address { font-style: normal; }
.site-footer a { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.site-footer a:hover { color: var(--terracotta-ink); text-decoration: underline; }
.site-footer a svg { width: 18px; height: 18px; flex: none; color: var(--terracotta); }
.site-footer nav.footer-col a { display: inline-block; min-height: 0; padding: 7px 0; line-height: 1.35; } /* wrapped RU/UK labels stay tidy; ≥ 32px targets */
.site-footer .footer-contact { display: grid; }
.site-footer .footer-contact a { overflow-wrap: anywhere; }
.site-footer .callout-emergency a { display: inline; min-height: 0; color: var(--alarm); text-decoration: underline; }
.site-footer .nowrap, .nowrap { white-space: nowrap; }
.site-footer .credential { font-size: .9375rem; margin: 12px 0 0; }
.site-footer .credential a { display: inline; min-height: 0; padding: 10px 0; color: var(--link); text-decoration: underline; } /* ≥ 24px target without breaking the line */
.site-footer .footer-base { grid-column: 1 / -1; margin: 0; padding-top: var(--s-2); border-top: 1px solid rgba(214, 211, 209, .7); font-size: .875rem; color: var(--ink-2); }
@media (min-width: 700px) { .site-footer .container { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .site-footer .container { grid-template-columns: 1.25fr 1fr .9fr 1.3fr; } }

/* ---------- Tablet: 700–1099px → side rail ---------- */
@media (min-width: 700px) {
  :root { --gutter: 32px; }
  html { scroll-padding-top: var(--s-2); scroll-padding-bottom: var(--s-2); }
  .bottom-nav { display: none; }
  main { padding-bottom: var(--s-4); }
  .site-footer { padding-bottom: var(--s-5); }
  body { padding-left: var(--rail-w); }
  .site-header { display: none; }
  .side-rail {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: var(--rail-w);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 8px;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-right: 1px solid rgba(231, 229, 228, .6);
    box-shadow: 8px 0 24px -22px rgba(28, 25, 23, .3);
    overflow-y: auto;
  }
  /* full logo, uncropped (842×317) on a small white tile */
  .side-rail .rail-logo { display: block; flex: none; width: 80px; margin-bottom: 16px; padding: 8px 6px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
  .side-rail .rail-logo img { display: block; width: 100%; height: auto; aspect-ratio: 842 / 317; object-fit: contain; }
  .side-rail a.rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-height: 56px; padding: 8px 2px; border-radius: 14px; color: var(--ink-2); text-decoration: none; font-size: .78rem; font-weight: 500; text-align: center; line-height: 1.2; transition: color .2s var(--ease); }
  .side-rail a.rail-item .ico { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 999px; transition: background-color .2s var(--ease), transform .15s var(--ease); }
  .side-rail a.rail-item svg { width: 24px; height: 24px; }
  .side-rail a.rail-item:hover { color: var(--ink); }
  .side-rail a.rail-item:hover .ico { background: rgba(28, 25, 23, .05); }
  .side-rail a.rail-item:active .ico { transform: scale(.94); }
  .side-rail a.rail-item[aria-current="page"] { color: var(--terracotta-ink); font-weight: 700; }
  .side-rail a.rail-item[aria-current="page"] .ico { background: var(--cta-soft); box-shadow: inset 0 0 0 1px rgba(194, 109, 71, .3); animation: pht-pill-in .25s var(--ease); }
  .side-rail a.rail-item.is-cta .ico { background: var(--cta); color: var(--on-cta); }
  .side-rail a.rail-item.is-cta { color: var(--terracotta-ink); }
  .side-rail a.rail-item.is-cta:hover .ico { background: var(--cta-hover); }
  .side-rail a.rail-item.is-cta[aria-current="page"] .ico { background: var(--cta-hover); box-shadow: 0 0 0 3px rgba(194, 109, 71, .28); }
  .side-rail .rail-spacer { flex: 1; }
}

/* ---------- Desktop: ≥1100px → top header ---------- */
@media (min-width: 1100px) {
  :root { --gutter: 40px; }
  html { scroll-padding-top: calc(var(--header-h) + var(--s-2)); }
  body { padding-left: 0; }
  .side-rail { display: none; }
  .site-header { display: flex; height: var(--header-h); }
  .site-header .menu-btn { display: none; }
  .brand img { height: 48px; }
  .site-header .nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .site-header .nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 1rem; transition: background-color .2s var(--ease), color .2s var(--ease); }
  .site-header .nav-links a:hover { background: rgba(28, 25, 23, .05); color: var(--ink); }
  .site-header .nav-links a[aria-current="page"] { color: var(--terracotta-ink); background: rgba(246, 230, 220, .8); }
  .site-header .header-cta { display: inline-flex; min-height: 44px; padding: 0 20px; font-size: 1rem; }
  /* logo (left) · centred links · CTA + language (right): equal flexible sides keep the links centred */
  .site-header { gap: 16px; }
  .site-header .brand { flex: 1 1 0; margin-right: 0; min-width: max-content; }
  .site-header .header-actions { flex: 1 1 0; min-width: max-content; }
  .site-header .nav-links { margin: 0; flex: none; }
  .site-header .nav-links a, .site-header .header-cta { white-space: nowrap; }
  .site-header .header-cta { flex: none; }
  /* long languages (ru/uk): app.js adds these step by step until the row fits */
  .site-header.is-compact .nav-links a { padding: 0 12px; }
  .site-header.is-compact .nav-links .lbl-long { display: none; }
  .site-header.is-compact .nav-links .lbl-short { display: inline; }
  .site-header.is-tight .nav-links a { font-size: .9375rem; padding: 0 10px; }
  .site-header.is-tight .header-cta { padding: 0 20px; }
  .site-header.is-tight .header-cta .lbl-long { display: none; }
  .site-header.is-tight .header-cta .lbl-short { display: inline; }
}

/* ---------- Language switcher (flag + code button → flag + autonym menu) ---------- */
.lang-flag { display: block; flex: none; width: 20px; height: 14px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(28, 40, 54, .18); }
.lang-switch { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 10px 0 12px;
  border: 1px solid transparent; border-radius: 999px;
  background: rgba(28, 40, 54, .04); color: var(--ink);
  font: 500 .9375rem/1 var(--font); letter-spacing: .04em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.lang-btn:hover { background: rgba(255, 255, 255, .92); border-color: var(--line); }
.lang-btn[aria-expanded="true"] { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.lang-btn .chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s var(--ease); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  min-width: 212px; margin: 0; padding: 6px; list-style: none;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
  transform-origin: top right; animation: pht-menu-in .16s var(--ease);
}
@keyframes pht-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.lang-menu li { margin: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 500; white-space: nowrap;
  transition: background-color .15s var(--ease);
}
.lang-menu a:hover { background: rgba(28, 40, 54, .06); color: var(--ink); }
.lang-menu a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 12px; }
.lang-menu a[aria-checked="true"] { background: var(--cta-soft); color: var(--terracotta-ink); }
.lang-menu .check { width: 18px; height: 18px; margin-left: auto; color: var(--terracotta-ink); visibility: hidden; }
.lang-menu a[aria-checked="true"] .check { visibility: visible; }

/* tablet (no top header): the same switcher floats in the top-right corner */
.lang-float { display: none; }
@media (min-width: 700px) and (max-width: 1099px) {
  .lang-float { display: block; position: fixed; top: 12px; right: 16px; z-index: 55; }
  .lang-float .lang-btn {
    background: var(--glass-strong); border-color: var(--glass-border);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  }
  .lang-float .lang-btn:hover, .lang-float .lang-btn[aria-expanded="true"] { background: #fff; }
}

/* phone sheet: language section */
.sheet .sheet-lang { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.sheet .sheet-lang-h { margin: 0 0 8px 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sheet .sheet-lang-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet .sheet-lang-list a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 500;
}
.sheet .sheet-lang-list a:hover { background: #fff; border-color: rgba(28, 40, 54, .2); }
.sheet .sheet-lang-list a[aria-current="true"] { background: var(--cta-soft); border-color: rgba(194, 109, 71, .45); color: var(--terracotta-ink); }

/* "This site is available in Russian/Ukrainian" suggestion (English pages only) */
.lang-hint { padding: 12px var(--gutter) 0; }
.lang-hint-in {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--content); margin: 0 auto; padding: 4px 4px 4px 16px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 999px;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font-size: 1rem; color: var(--ink-2);
}
.lang-hint p { flex: 1; margin: 0; line-height: 1.35; }
.lang-hint-go { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.lang-hint-x { flex: none; width: 44px; height: 44px; border-radius: 999px; color: var(--ink-3); }
.lang-hint-x svg { width: 20px; height: 20px; }
@media (min-width: 700px) and (max-width: 1099px) {
  .lang-hint { padding-top: 12px; padding-right: calc(16px + 104px); } /* clear the floating switcher */
}
@media print { .lang-switch, .lang-float, .lang-hint { display: none !important; } }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: var(--s-2); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.hide-mobile { display: none; }
@media (min-width: 700px) { .hide-mobile { display: initial; } .hide-tablet-up { display: none; } }
.divider { height: 1px; background: var(--line); border: 0; margin: var(--s-3) 0; }

/* ---------- Language flags ---------- */
.flag{display:inline-block;width:21px;height:14px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(28,40,54,.15);vertical-align:-2px;margin-right:8px;flex:none}
.flags{display:inline-flex;gap:4px;margin-right:8px} .flags .flag{margin-right:0}
.trust-strip .flags{margin-right:0;flex:none}
.lang-item{white-space:nowrap;display:inline-flex;align-items:center}
.trust-strip li.langs-pill{gap:14px}
.trust-strip li.langs-pill .flag{margin-right:6px}
.chip:has(.flag), .lang-list li{display:inline-flex;align-items:center}

@media print {
  body[data-page]::before { display: none; }
  html.js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}