/* ==========================================================================
   Orbiteches — "Alpenglow"
   An original design system drawn from Himachal Pradesh: the deodar belt
   above Shimla, Spiti's cold desert, rhododendron on the Dhauladhar slopes,
   and Chandratal at 4,270 m. No template, no framework, no attribution.

   Written with CSS logical properties throughout, so the Arabic (RTL)
   locale mirrors the entire layout rather than half of it.

   Contents
     1  Tokens — neutrals, the five prayer-flag accents, seasons
     2  Base and typography
     3  Layout scaffolding
     4  Masthead (top navigation)
     5  Buttons and links
     6  The ridge scene — sky, ridgelines, grain
     7  Hero and interior page heads
     8  Figure strip
     9  Ticker
    10  Service tracks — the flag device
    11  Editorial split
    12  Process steps
    13  Quotes and people
    14  Offer cards
    15  FAQ
    16  Call-to-action band
    17  Forms
    18  Long-form legal prose
    19  Footer sitemap
    20  Motion
    21  RTL refinements
    22  Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------
   Two independent axes:

     data-theme  = light | dark      the visitor's choice, remembered
     data-season = spring | autumn | winter
                                     a brand decision, set once in the HTML

   The season only skins the dark "scene" areas — hero sky, ridgelines, the
   CTA band and the four track colours. The neutral ground is shared, so
   switching seasons can never break body-copy contrast.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* High-altitude daylight: birch, lichen, snowmelt. Green-biased neutrals
     rather than a default grey — they sit under a green brand. */
  --ground:     #edf0e8;
  --surface:    #f8faf4;
  --sunk:       #e2e7dc;
  --ink:        #10201a;
  --ink-2:      #354840;
  --muted:      #56685e;
  --line:       #c6d2c2;
  --line-soft:  #dbe2d7;

  /* The five accents — the prayer-flag set that runs across every Himachali
     pass, reinterpreted as the landscape colours they actually sit against.
     Each has a graphic value (fills, plates, rules) and a -t text value that
     clears 4.5:1 on --ground. */
  --deodar:       #1d4634;   --deodar-t:     #17402e;
  --alpenglow:    #e8603a;   --alpenglow-t:  #ab3d18;
  --rhodo:        #c22e5d;   --rhodo-t:      #a92450;
  --spiti:        #cf9a35;   --spiti-t:      #7d5a09;
  --chandra:      #21809a;   --chandra-t:    #10606f;

  --on-accent:  #fffdf8;

  /* The deodar plate behind monograms and the skip link. Held dark in both
     themes so the type on it always clears 4.5:1. */
  --plate:      #1d4634;
  --on-plate:   #fffdf8;

  /* Semantic roles */
  --link:       var(--chandra-t);
  --link-hover: var(--deodar-t);
  --em-color:   var(--rhodo-t);
  --focus:      var(--alpenglow-t);
  --bad:        #a3311a;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --shell: 1120px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 6vw, 5rem);
  --nav-h: 64px;

  --radius: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --shadow-1: 0 1px 2px rgba(16, 32, 26, 0.05), 0 8px 24px -16px rgba(16, 32, 26, 0.25);
  --shadow-2: 0 2px 4px rgba(16, 32, 26, 0.06), 0 24px 48px -28px rgba(16, 32, 26, 0.35);
}

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

  --ground:     #0d1512;
  --surface:    #14201a;
  --sunk:       #0a110e;
  --ink:        #eaf2ea;
  --ink-2:      #bccbc1;
  --muted:      #8ba093;
  --line:       #26382e;
  --line-soft:  #1c2a23;

  --plate:      #2c6a4d;
  --on-plate:   #fffdf8;

  --deodar:       #4ea87a;   --deodar-t:     #63bd8e;
  --alpenglow:    #ff8a5c;   --alpenglow-t:  #ff9c72;
  --rhodo:        #ff5d86;   --rhodo-t:      #ff7d9e;
  --spiti:        #e8b950;   --spiti-t:      #edc76a;
  --chandra:      #4fb6cf;   --chandra-t:    #6ac6dc;

  --on-accent:  #0d1512;

  --link:       var(--chandra-t);
  --link-hover: var(--spiti-t);
  --em-color:   var(--rhodo-t);
  --focus:      var(--spiti);
  --bad:        #ff8a6b;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 48px -28px rgba(0, 0, 0, 0.9);
}

/* ---- Seasonal skins ------------------------------------------------------
   Each season sets the sky, the four ridge layers, the emphasis gradient,
   the CTA plate and the four track colours. Ridge and sky values are always
   dark, so the white type over them holds in either theme.               */

/* Each sky is a steep dark base with a separate alpenglow bloom drifting over
   the top corner. Splitting them keeps the glow where nothing is read over it
   and the copy side dark — a single radial goes pale in the middle as it
   scales, which is what costs the headline its contrast. */

/* Spring rhododendron — March and April, buransh in bloom across the
   mid-hills at 1,500–3,000 m, new deodar growth, snowmelt in the streams. */
:root,
:root[data-season="spring"] {
  --sky-base:
    linear-gradient(168deg, #6e2f52 0%, #57315b 22%, #3c4a52 46%, #2a3d36 68%, #16261f 88%, #0f1c17 100%);
  --sky-bloom:
    radial-gradient(66% 70% at 76% -2%,
      #ffe7d4 0%, #f9c0cf 16%, #e58aa8 34%, rgba(190, 88, 128, 0.55) 52%, rgba(150, 60, 100, 0) 74%);
  --r1: #6b5f80; --r2: #414f5c; --r3: #24402f; --r4: #11261a;
  --scene-ink: #ffffff;
  --scene-ink-2: rgba(255, 255, 255, 0.88);
  --scene-kick: #ffd0dc;
  --cta-bg: #c62a54; --cta-fg: #fff6f8;
  --cta-bg-hi: #a91f45;
  --em-a: #ffd0dc; --em-b: #fff3d9;
  --track-1: #3f93bd; --track-2: #e2547e; --track-3: #4f9d55; --track-4: #e8b93f;
  --flag-1: #4a90b8; --flag-2: #f7f3ea; --flag-3: #d6335f; --flag-4: #4f9d55; --flag-5: #e8b93f;
}

/* Autumn dusk — post-monsoon, the clearest skies of the year, alpenglow
   burning on the Dhauladhar snowline, poplars turning gold in Kinnaur. */
:root[data-season="autumn"] {
  --sky-base:
    linear-gradient(168deg, #6f2f3f 0%, #4e2a44 24%, #332a38 48%, #23282a 70%, #141d19 90%, #0e1714 100%);
  --sky-bloom:
    radial-gradient(66% 70% at 76% -2%,
      #ffd9ad 0%, #f79a5a 15%, #db6033 32%, rgba(180, 68, 60, 0.55) 50%, rgba(140, 50, 70, 0) 74%);
  --r1: #5b3a52; --r2: #3a2a44; --r3: #1d2b28; --r4: #0e1814;
  --scene-ink: #ffffff;
  --scene-ink-2: rgba(255, 255, 255, 0.88);
  --scene-kick: #ffd9b8;
  --cta-bg: #cf9a35; --cta-fg: #1f1502;
  --cta-bg-hi: #e0ae4b;
  --em-a: #ffd9a3; --em-b: #ffefd0;
  --track-1: #3f93bd; --track-2: #d94873; --track-3: #4f9d55; --track-4: #cf9a35;
  --flag-1: #21809a; --flag-2: #f4f1e8; --flag-3: #c22e5d; --flag-4: #3f8f5f; --flag-5: #cf9a35;
}

/* Deep winter — December to February, Dhauladhar and Spiti under snow,
   Chandratal frozen, long blue shadows, one warm ember of lamplight. */
:root[data-season="winter"] {
  --sky-base:
    linear-gradient(168deg, #2f4c70 0%, #27405e 24%, #1e3149 48%, #182838 70%, #101c28 90%, #0b141d 100%);
  --sky-bloom:
    radial-gradient(66% 70% at 72% -2%,
      #f8fcff 0%, #d9ebf7 14%, #a6c8de 30%, rgba(122, 160, 190, 0.5) 50%, rgba(74, 111, 149, 0) 74%);
  --r1: #6d8bab; --r2: #46617f; --r3: #23374d; --r4: #101c29;
  --scene-ink: #ffffff;
  --scene-ink-2: rgba(255, 255, 255, 0.88);
  --scene-kick: #d6e9f6;
  --cta-bg: #c96524; --cta-fg: #fff6ef;
  --cta-bg-hi: #b0551b;
  --em-a: #bfe3f5; --em-b: #ffffff;
  --track-1: #4a9fc4; --track-2: #d97a3a; --track-3: #6d8bab; --track-4: #cfe4f2;
  --flag-1: #4a9fc4; --flag-2: #f2f8fb; --flag-3: #d97a3a; --flag-4: #6d8bab; --flag-5: #cfe4f2;
}

/* --------------------------------------------------------------------------
   2. Base and typography
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-inline-size: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 24, "WONK" 1;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); }

h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.45em;
}

/* The one editorial flourish: an italic phrase carrying the emphasis. */
.em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--em-color);
}

p { margin: 0 0 1.05rem; text-wrap: pretty; max-inline-size: 68ch; }
p:last-child { margin-block-end: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

strong, b { color: var(--ink); font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the dark grounds — hero artwork, CTA band, footer — the alpenglow ring
   is too close to its surroundings to read as a focus indicator. */
.scene :focus-visible,
.cta :focus-visible,
.colophon :focus-visible,
html.js .masthead.at-top :focus-visible { outline-color: #ffffff; }

::selection { background: var(--rhodo); color: #fff; }

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -9999px;
  z-index: 300;
  background: var(--plate);
  color: var(--on-plate);
  padding: 0.75rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; color: #fffdf8; }

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Mono utility label used everywhere: section indices, tags, captions. */
.eyebrow, .index, .kicker, .crumb, .slab-no, .step-when,
.offer .tag, .rail .k, .field label, .colophon h3, .track-no {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Several of these are <p>, and the 68ch prose measure would break a
     tracked-out mono label across two lines long before it needs to. */
  max-inline-size: none;
}

/* --------------------------------------------------------------------------
   3. Layout scaffolding
   -------------------------------------------------------------------------- */
.shell {
  inline-size: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.rule {
  border: 0;
  border-block-start: 1px solid var(--line-soft);
  margin: 0;
}

.band { padding-block: var(--section-y); }
.band--tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.band--wash { background: var(--surface); border-block: 1px solid var(--line-soft); }

.band-head {
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
  max-inline-size: 64ch;
}

.index {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--muted);
  margin-block-end: 0.8rem;
}
.index::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--line);
}

.band-head h2 { margin-block-end: 0.4rem; }
.band-head p { max-inline-size: 60ch; margin-block-start: 0.75rem; }

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-inline-size: 56ch;
}

/* --------------------------------------------------------------------------
   4. Masthead — horizontal top navigation
   --------------------------------------------------------------------------
   Sticky, and solid by default so it is readable over any content with
   JavaScript disabled. When JS is present the page opens with the bar
   transparent over the dark hero scene, and it solidifies on first scroll.
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line-soft);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);

  --nav-ink: var(--ink);
  --nav-ink-2: var(--ink-2);
  --nav-line: var(--line);
}

/* Over the hero scene: transparent, light type. The class ships in the markup
   and app.js removes it once the visitor scrolls past the scene — gated on
   html.js so that with JavaScript off the bar simply stays solid and legible. */
html.js .masthead.at-top {
  background: transparent;
  border-block-end-color: rgba(255, 255, 255, 0.18);

  --nav-ink: #ffffff;
  --nav-ink-2: rgba(255, 255, 255, 0.9);
  --nav-line: rgba(255, 255, 255, 0.4);
}
/* Over artwork the chrome needs its own weight: a soft shadow behind the
   type, and a smoked plate behind the two controls — they sit in the top
   corner, which is exactly where the alpenglow bloom is brightest. */
html.js .masthead.at-top .wordmark,
html.js .masthead.at-top .mainnav a.navlink { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
html.js .masthead.at-top .icon-btn,
html.js .masthead.at-top .lang-btn { background: rgba(9, 17, 14, 0.55); }
html.js .masthead.at-top .icon-btn:hover,
html.js .masthead.at-top .lang-btn:hover { background: rgba(9, 17, 14, 0.72); }

.masthead-inner {
  min-block-size: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  color: var(--nav-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.wordmark:hover { color: var(--nav-ink); }
.wordmark sub {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nav-ink-2);
  vertical-align: baseline;
  bottom: 0;
  padding-inline-start: 0.55rem;
  border-inline-start: 1px solid var(--nav-line);
  align-self: center;
}
@media (max-width: 900px) { .wordmark sub { display: none; } }

/* The client's logo is a wide lockup on a dark plate. In the masthead we show
   a tight crop of its emblem so it reads as a mark at 34px; the full lockup
   appears at size in the footer, where the dark plate looks deliberate. */
.logo-emblem {
  display: block;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  overflow: hidden;
  border-radius: 8px;
  background: #0d1b25;
}
.logo-emblem img {
  inline-size: 96px;
  block-size: 64px;
  max-inline-size: none;
  margin-block-start: -9px;
  margin-inline-start: -31px;
}
[dir="rtl"] .logo-emblem img { margin-inline-start: 0; margin-inline-end: -31px; }

.logo-full {
  inline-size: 190px;
  max-inline-size: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Primary navigation ------------------------------------------------------ */
.mainnav {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.1rem);
  margin-inline-start: auto;
}

.mainnav a.navlink {
  position: relative;
  color: var(--nav-ink-2);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.4rem 0.15rem;
  transition: color 0.2s var(--ease);
}
.mainnav a.navlink::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--cta-bg);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease);
}
.mainnav a.navlink:hover { color: var(--nav-ink); }
.mainnav a.navlink:hover::after { transform: scaleX(1); }
.mainnav a.navlink[aria-current="page"] { color: var(--nav-ink); font-weight: 600; }
.mainnav a.navlink[aria-current="page"]::after { transform: scaleX(1); }

/* Prayer-flag row: the five colours, in the order they run on a pass. */
.flags {
  display: flex;
  gap: 3px;
  flex: none;
  margin-inline-start: 0.3rem;
}
.flags i {
  inline-size: 6px;
  block-size: 15px;
  border-radius: 1px;
  display: block;
}
.flags i:nth-child(1) { background: var(--flag-1); }
.flags i:nth-child(2) { background: var(--flag-2); }
.flags i:nth-child(3) { background: var(--flag-3); }
.flags i:nth-child(4) { background: var(--flag-4); }
.flags i:nth-child(5) { background: var(--flag-5); }
@media (max-width: 1060px) { .flags { display: none; } }

.masthead-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

.icon-btn {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--nav-line);
  border-radius: 99px;
  color: var(--nav-ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--nav-ink) 12%, transparent); }

.nav-toggle { display: none; }
.nav-toggle span {
  display: block;
  inline-size: 17px;
  block-size: 1.5px;
  background: currentColor;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 17px;
  block-size: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav-toggle span::before { inset-block-start: -5px; }
.nav-toggle span::after { inset-block-start: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* Language switcher ------------------------------------------------------- */
.lang { position: relative; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  block-size: 40px;
  padding-inline: 0.8rem;
  background: transparent;
  border: 1px solid var(--nav-line);
  border-radius: 99px;
  color: var(--nav-ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lang-btn:hover { background: color-mix(in srgb, var(--nav-ink) 12%, transparent); }
.lang-btn svg { transition: transform 0.2s var(--ease); }
.lang-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-inline-size: 14rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
  display: none;
  z-index: 220;
  box-shadow: var(--shadow-2);
}
.lang-menu.is-open { display: block; }

.lang-menu button {
  inline-size: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.92rem;
  text-align: start;
  cursor: pointer;
}
.lang-menu button:hover { background: var(--sunk); color: var(--ink); }
.lang-menu button[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang-menu button .code {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Mobile: the nav folds into a drawer under the bar. --------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: grid; }

  .mainnav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--ground);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .mainnav.is-open { opacity: 1; visibility: visible; transform: none; }

  .mainnav a.navlink {
    color: var(--ink-2);
    padding: 0.85rem 0.2rem;
    font-size: 1.02rem;
    border-block-end: 1px solid var(--line-soft);
  }
  .mainnav a.navlink::after { inset-inline: 0 auto; inline-size: 22px; }
  .mainnav a.navlink[aria-current="page"] { color: var(--ink); }
  /* Full-size in the drawer — a 35px pill is a poor thumb target. */
  .mainnav .btn {
    margin-block-start: 1.1rem;
    padding: 0.8rem 1.3rem;
    font-size: 0.95rem;
  }
}

/* Very narrow phones: the bar has to hold a wordmark, a language control,
   a theme toggle and a menu button inside ~290px. Tighten the gutter, drop
   the language chevron, and let the wordmark come down a step. */
@media (max-width: 400px) {
  :root { --gutter: 0.9rem; }
  .masthead-inner { gap: 0.35rem; }
  .masthead-tools { gap: 0.3rem; }
  .wordmark { font-size: 1.02rem; gap: 0.45rem; }
  .lang-btn { padding-inline: 0.55rem; gap: 0.3rem; }
  .lang-btn svg:last-child { display: none; }
  .kicker::before { display: none; }
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 99px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.btn:hover {
  background: var(--cta-bg-hi);
  color: var(--cta-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.btn:active { transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}

.btn--sm { padding: 0.5rem 1rem; font-size: 0.86rem; }
.btn--wide { inline-size: 100%; }

.btn .arw { transition: transform 0.25s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
[dir="rtl"] .btn .arw { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arw { transform: scaleX(-1) translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Over the scene, the ghost button borrows light type. */
.scene .btn--ghost {
  color: var(--scene-ink);
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
.scene .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
  padding-block-end: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tlink:hover { color: var(--rhodo-t); border-color: var(--rhodo-t); }
[dir="rtl"] .tlink svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   6. The ridge scene
   --------------------------------------------------------------------------
   Three stacked layers, all decorative:
     .sky      the seasonal alpenglow gradient, drifting slowly
     .ridges   four SVG ridgelines that parallax at different rates
     .grain    a faint film grain so the gradient never bands
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  isolation: isolate;
  color: var(--scene-ink-2);
  background: #0b1310;
  overflow: hidden;
}
.scene h1, .scene h2, .scene h3 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); }
.scene p { color: var(--scene-ink-2); }
.scene a:not(.btn) { color: var(--scene-kick); }

/* A scrim between the artwork and the copy. Without it the alpenglow bloom
   can drift under a headline and take the contrast below 4.5:1 — the
   gradient is decoration, and it is not allowed to cost legibility. */
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(9, 17, 14, 0.24) 0%, rgba(9, 17, 14, 0.08) 26%,
      rgba(9, 17, 14, 0) 52%, rgba(9, 17, 14, 0.24) 100%),
    linear-gradient(to right,
      rgba(9, 17, 14, 0.6) 0%, rgba(9, 17, 14, 0.28) 34%,
      rgba(9, 17, 14, 0.04) 60%, rgba(9, 17, 14, 0) 78%);
}
[dir="rtl"] .scene::before {
  background:
    linear-gradient(to bottom,
      rgba(9, 17, 14, 0.24) 0%, rgba(9, 17, 14, 0.08) 26%,
      rgba(9, 17, 14, 0) 52%, rgba(9, 17, 14, 0.24) 100%),
    linear-gradient(to left,
      rgba(9, 17, 14, 0.6) 0%, rgba(9, 17, 14, 0.28) 34%,
      rgba(9, 17, 14, 0.04) 60%, rgba(9, 17, 14, 0) 78%);
}
/* Full-width copy on phones: the horizontal scrim can't help, so the
   vertical one carries the load. */
@media (max-width: 760px) {
  .scene::before,
  [dir="rtl"] .scene::before {
    background:
      linear-gradient(to bottom,
        rgba(9, 17, 14, 0.5) 0%, rgba(9, 17, 14, 0.34) 42%,
        rgba(9, 17, 14, 0.16) 70%, rgba(9, 17, 14, 0.3) 100%);
  }
}

/* The italic emphasis phrase, gradient-filled over dark grounds. The solid
   colour is declared first so the text is never invisible where
   background-clip: text is unsupported. */
.scene .em,
.cta .em { color: var(--em-b); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .scene .em,
  .cta .em {
    background-image: linear-gradient(92deg, var(--em-a), var(--em-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sky-base);
}

/* The alpenglow itself: a separate layer so it can drift on a compositor-only
   transform — roughly 46 seconds a cycle, the way the light actually moves at
   dusk. Felt, not watched. */
.sky::after {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--sky-bloom);
  animation: bloom-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bloom-drift {
  from { transform: translate3d(-1.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.09); }
}
[dir="rtl"] .sky::after { transform: scaleX(-1); animation-name: bloom-drift-rtl; }
@keyframes bloom-drift-rtl {
  from { transform: scaleX(-1) translate3d(-1.5%, -1.5%, 0) scale(1); }
  to   { transform: scaleX(-1) translate3d(2.5%, 2%, 0) scale(1.09); }
}

/* On a phone the copy runs the full width, so the bloom is pushed further
   into the corner, where nothing has to be read over it. */
@media (max-width: 760px) {
  .sky::after {
    inset: -22% -34% -6% 22%;
    animation: none;
  }
}

.ridges {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: min(88%, 560px);
  z-index: 1;
  pointer-events: none;
}
.ridges svg {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
}
/* --sy is written by app.js on scroll; --k is each layer's parallax rate.
   The far ridges lag most, so the range reads as depth rather than slide. */
.ridges .ridge {
  transform: translateY(calc(var(--sy, 0px) * var(--k, 0)));
  will-change: transform;
}
.ridges .r1 { fill: var(--r1); opacity: 0.55; --k: 0.25; }
.ridges .r2 { fill: var(--r2); opacity: 0.82; --k: 0.18; }
.ridges .r3 { fill: var(--r3); --k: 0.11; }
.ridges .r4 { fill: var(--r4); --k: 0.05; }

.grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene > .shell,
.scene .scene-body { position: relative; z-index: 3; }

/* --------------------------------------------------------------------------
   7. Hero and interior page heads
   -------------------------------------------------------------------------- */
.hero {
  /* The bar is transparent over the hero, so the hero pays for its height. */
  padding-block: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem)) 0;
  margin-block-start: calc(var(--nav-h) * -1);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  margin-block-end: 1rem;
}
.kicker::before {
  content: "";
  inline-size: 2rem;
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
}
.scene .kicker { color: var(--scene-kick); }

.hero h1 {
  max-inline-size: 17ch;
  margin-block-end: 1rem;
}
.hero .lede { color: var(--scene-ink-2); max-inline-size: 46ch; }

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  padding-block: 1.5rem clamp(2.5rem, 6vw, 4rem);
}
@media (max-width: 860px) {
  .hero-foot { grid-template-columns: 1fr; align-items: start; }
}

.hero-points { display: grid; gap: 0.6rem; margin-block-end: 1.5rem; }
.hero-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.94rem;
  color: var(--scene-ink-2);
}
.hero-points .tick { color: var(--scene-kick); margin-block-start: 0.35rem; }

/* Interior page head — the same scene, at a quarter of the height. */
.pagehead {
  padding-block: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem)) clamp(2rem, 5vw, 3.5rem);
  margin-block-start: calc(var(--nav-h) * -1);
}
.pagehead h1 { max-inline-size: 20ch; }
.pagehead .lede { color: var(--scene-ink-2); }

/* A page head that carries a figure strip along its foot, as the home hero does. */
.pagehead.has-figs { padding-block-end: 0; }
.pagehead.has-figs .scene-body > .shell { padding-block-end: clamp(2rem, 5vw, 3.5rem); }

.crumb {
  color: var(--scene-kick);
  margin-block-end: 0.9rem;
}
.crumb a { color: var(--scene-kick); border-block-end: 1px solid transparent; }
.crumb a:hover { border-block-end-color: currentColor; }

/* --------------------------------------------------------------------------
   8. Figure strip
   --------------------------------------------------------------------------
   Sits at the foot of the hero, over the scene, on a glassy plate.
   -------------------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.figures li {
  padding: 1rem clamp(0.75rem, 1.8vw, 1.25rem);
  border-inline-start: 1px solid var(--line-soft);
}
.figures li:first-child { border-inline-start: 0; }

.figures .fig {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-block-end: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.figures .cap {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* The strip that carries the figures across the foot of the hero scene. */
.figstrip {
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 16, 13, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.figstrip .figures li { border-inline-start-color: rgba(255, 255, 255, 0.14); }
.figstrip .fig { color: #fff; }
.figstrip .cap { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 760px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures li:nth-child(odd) { border-inline-start: 0; }
  .figures li:nth-child(n + 3) { border-block-start: 1px solid var(--line-soft); }
  .figstrip .figures li:nth-child(n + 3) { border-block-start-color: rgba(255, 255, 255, 0.14); }
}

/* --------------------------------------------------------------------------
   9. Ticker
   -------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  padding-block: 0.8rem;
  border-block-end: 1px solid var(--line-soft);
  background: var(--surface);
}
.ticker-track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  inline-size: max-content;
  animation: ticker 44s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* In RTL the track is laid out from the right edge, so it has to travel the
   other way — reversing the animation would just walk it off the strip. */
@keyframes ticker-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .ticker-track { animation-name: ticker-rtl; }

.ticker span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker span::before {
  content: "";
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-end: 0.7rem;
  vertical-align: 0.15em;
  background: var(--rhodo);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   10. Service tracks — the flag device
   --------------------------------------------------------------------------
   Four services, four colours, used consistently site-wide: a track keeps
   its colour on the home card, the services page rule and the footer.
   -------------------------------------------------------------------------- */
.slab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
}
@media (max-width: 800px) { .slab-grid { grid-template-columns: 1fr; } }

.slab {
  position: relative;
  overflow: hidden;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.slab::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: var(--c, var(--deodar));
}
.slab:hover {
  transform: translateY(-3px);
  border-color: var(--c, var(--line));
  box-shadow: var(--shadow-2);
}

.slab-no { color: var(--c-t, var(--muted)); display: block; margin-block-end: 0.9rem; }
.slab .glyph { color: var(--c-t, var(--deodar-t)); margin-block-end: 0.8rem; }
.slab h3 { margin-block-end: 0.45rem; }
.slab p { font-size: 0.94rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 1.25rem; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
}

/* Track colour assignment — one place, applied everywhere. */
.t1 { --c: var(--track-1); --c-t: var(--chandra-t); }
.t2 { --c: var(--track-2); --c-t: var(--rhodo-t); }
.t3 { --c: var(--track-3); --c-t: var(--deodar-t); }
.t4 { --c: var(--track-4); --c-t: var(--spiti-t); }

/* A services-page section keyed to its track colour. */
.band--track .index { color: var(--c-t, var(--muted)); }
.band--track .index::after { background: var(--c, var(--line)); opacity: 0.5; }
.band--track h2 { position: relative; }
.band--track .ticks svg { color: var(--c-t, var(--deodar-t)); }

/* --------------------------------------------------------------------------
   11. Editorial split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.ticks { display: grid; gap: 0.75rem; margin-block-start: 1.5rem; }
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.96rem;
}
.ticks svg { color: var(--deodar-t); margin-block-start: 0.36rem; }

/* --------------------------------------------------------------------------
   12. Process steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0.75rem; }

.step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(0.85rem, 2vw, 1.75rem);
  align-items: start;
  padding: 1.15rem clamp(1rem, 2vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease);
}
.step:hover { border-color: var(--line); }
@media (max-width: 800px) {
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .step p { grid-column: 2; }
}
/* Inside a two-column split there is never room for the three-track layout. */
.split .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
.split .step p { grid-column: 2; }

.step-no {
  font-size: 0.72rem;
  color: var(--rhodo-t);
  padding-block-start: 0.4rem;
}
.step-when {
  display: block;
  color: var(--muted);
  margin-block-end: 0.45rem;
}
.step h3 { font-size: 1.1rem; margin-block-end: 0; }
.step p { font-size: 0.93rem; }

/* --------------------------------------------------------------------------
   13. Quotes and people
   -------------------------------------------------------------------------- */
.pull {
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  border-inline-start: 4px solid var(--spiti);
}
.pull blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}
.pull blockquote::before { content: "\201C"; color: var(--rhodo-t); }
.pull blockquote::after { content: "\201D"; color: var(--rhodo-t); }

/* Scoped to the text block, not to any span in the byline — the avatar is a
   span too, and a bare `.byline span` rule wins over `.mono-avatar` on
   specificity and repaints the monogram in the muted colour. */
.byline { display: flex; align-items: center; gap: 0.85rem; }
.byline div b { display: block; font-size: 0.95rem; color: var(--ink); font-weight: 600; }
.byline div span { display: block; font-size: 0.82rem; color: var(--muted); }

.mono-avatar {
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--plate);
  color: var(--on-plate);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.mono-avatar picture { display: contents; }
.mono-avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
}
.person {
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.person .mono-avatar {
  inline-size: 60px;
  block-size: 60px;
  font-size: 1rem;
  margin-block-end: 0.9rem;
}
.person h3 { font-size: 1.15rem; margin-block-end: 0.2rem; }
.person .role {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chandra-t);
  margin-block-end: 0.9rem;
}
.person p { font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   14. Offer cards
   -------------------------------------------------------------------------- */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
  align-items: stretch;
}
.offer {
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.offer--feature {
  border-color: var(--rhodo);
  box-shadow: var(--shadow-1);
  position: relative;
}
.offer--feature::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  block-size: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--rhodo);
}
.offer .tag { color: var(--muted); display: block; margin-block-end: 0.7rem; }
.offer--feature .tag { color: var(--rhodo-t); }
.offer h3 { margin-block-end: 0.45rem; }
.offer p { font-size: 0.92rem; }
.offer .ticks { margin-block: 1rem auto; }
.offer .btn { margin-block-start: 1.4rem; }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.6rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease);
}
.faq details[open] { border-color: var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1rem, 2vw, 1.4rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--rhodo-t);
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .answer {
  padding: 0 clamp(1rem, 2vw, 1.4rem) 1.2rem;
  max-inline-size: 68ch;
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   16. Call-to-action band
   -------------------------------------------------------------------------- */
.cta {
  background: var(--deodar);
  color: rgba(255, 253, 248, 0.82);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
:root[data-theme="dark"] .cta { background: #12301f; }
.cta::after {
  /* One ridgeline silhouette along the foot of the band. */
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 90px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.18' d='M0 92 L110 64 L214 88 L322 46 L430 80 L540 50 L648 84 L762 52 L870 84 L980 58 L1090 86 L1200 64 L1200 120 L0 120 Z'/%3E%3C/svg%3E")
    no-repeat bottom / 100% 100%;
  pointer-events: none;
}
.cta .shell { position: relative; z-index: 1; }
.cta h2 { color: #fffdf8; max-inline-size: 20ch; }
.cta p { max-inline-size: 52ch; color: rgba(255, 253, 248, 0.82); }
.cta .kicker { color: rgba(255, 253, 248, 0.72); }
.cta .btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fffdf8;
  border-color: rgba(255, 253, 248, 0.45);
}
.cta .btn--ghost:hover { background: #fffdf8; color: var(--deodar); border-color: #fffdf8; }

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.2rem; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 620px) { .form-2 { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field label { color: var(--muted); }
.field label .req { color: var(--rhodo-t); }

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: 0.85rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-block-size: 10rem; resize: vertical; }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--chandra-t);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chandra) 22%, transparent);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356685e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-inline-end: 2.4rem;
}
[dir="rtl"] .field select {
  background-position: left 0.95rem center;
  padding-inline-end: 0.95rem;
  padding-inline-start: 2.4rem;
}

.err { display: none; font-size: 0.82rem; color: var(--bad); }
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea { border-color: var(--bad); }
.field.is-bad .err { display: block; }

.form-note { font-size: 0.84rem; color: var(--muted); }

.form-flash {
  display: none;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--deodar);
  border-inline-start-width: 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--deodar) 10%, var(--surface));
  font-size: 0.94rem;
  color: var(--ink);
}
.form-flash.is-on { display: flex; }
.form-flash svg { flex: none; margin-block-start: 0.2rem; color: var(--deodar-t); }

.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* Key/value rail */
.rail {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.rail li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem clamp(1rem, 2vw, 1.3rem);
  border-block-start: 1px solid var(--line-soft);
  font-size: 0.95rem;
}
.rail li:first-child { border-block-start: 0; }
@media (max-width: 560px) { .rail li { grid-template-columns: 1fr; gap: 0.25rem; } }
.rail .k { color: var(--muted); padding-block-start: 0.25rem; }

/* --------------------------------------------------------------------------
   18. Long-form legal prose
   -------------------------------------------------------------------------- */
.prose { max-inline-size: 70ch; }

.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  margin-block: 2.75rem 0.9rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line-soft);
}
.prose > h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }

.prose h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-block: 1.5rem 0.5rem;
}

.prose p { margin-block-end: 1rem; }
.prose ul, .prose ol { margin-block: 0.75rem 1.25rem; display: grid; gap: 0.55rem; }

.prose ul li { position: relative; padding-inline-start: 1.3rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  inline-size: 6px;
  block-size: 6px;
  background: var(--rhodo);
  transform: rotate(45deg);
}

.prose ol { counter-reset: prose-ol; }
.prose ol li {
  position: relative;
  padding-inline-start: 2rem;
  counter-increment: prose-ol;
}
.prose ol li::before {
  content: counter(prose-ol) ".";
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--rhodo-t);
}

.prose dl { margin-block: 0.75rem 1.25rem; }
.prose dt { font-weight: 600; color: var(--ink); margin-block-start: 1rem; }
.prose dd { margin: 0.25rem 0 0; }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--spiti);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-block-end: 2.5rem;
}
.callout h2 { margin: 0 0 0.75rem; padding: 0; border: 0; font-size: 1.3rem; }
.callout ul { margin-block-end: 0; }

.toc {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block-end: 2.5rem;
}
.toc li { border-block-start: 1px solid var(--line-soft); }
.toc li:first-child { border-block-start: 0; }
.toc a {
  display: flex;
  gap: 0.9rem;
  padding: 0.7rem clamp(0.9rem, 2vw, 1.2rem);
  color: var(--ink-2);
  font-size: 0.94rem;
}
.toc a:hover { color: var(--rhodo-t); background: var(--sunk); }
.toc .n {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  padding-block-start: 0.22rem;
  flex: none;
}

/* Placeholders the client must replace before publishing. Deliberately loud. */
mark.todo {
  background: #ffe8a3;
  color: #4a3200;
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.82em;
  border-block-end: 2px solid var(--alpenglow);
}
:root[data-theme="dark"] mark.todo { background: #5c4a12; color: #ffeaa8; }

.stamp {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 2rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   19. Footer sitemap
   --------------------------------------------------------------------------
   A genuine sitemap on every page — every page and anchor, grouped — on the
   deodar ground, so the site closes on the darkest colour in the palette.
   -------------------------------------------------------------------------- */
.colophon {
  background: var(--deodar);
  color: rgba(255, 253, 248, 0.78);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
:root[data-theme="dark"] .colophon { background: #0f2519; }

.colophon-flags {
  display: flex;
  gap: 0;
  margin-block-end: clamp(2rem, 4vw, 3rem);
  border-radius: 2px;
  overflow: hidden;
}
.colophon-flags i { display: block; block-size: 4px; flex: 1; }
.colophon-flags i:nth-child(1) { background: var(--flag-1); }
.colophon-flags i:nth-child(2) { background: var(--flag-2); }
.colophon-flags i:nth-child(3) { background: var(--flag-3); }
.colophon-flags i:nth-child(4) { background: var(--flag-4); }
.colophon-flags i:nth-child(5) { background: var(--flag-5); }

.colophon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 1000px) { .colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .colophon-grid { grid-template-columns: 1fr; } }

.colophon h3 {
  color: rgba(255, 253, 248, 0.62);
  margin-block-end: 1rem;
}
.colophon li { margin-block-end: 0.55rem; }
.colophon li a,
.colophon li span {
  font-size: 0.9rem;
  color: rgba(255, 253, 248, 0.78);
}
.colophon li a { border-block-end: 1px solid transparent; }
.colophon li a:hover { color: #fffdf8; border-block-end-color: rgba(255, 253, 248, 0.5); }
.colophon-blurb {
  font-size: 0.92rem;
  max-inline-size: 34ch;
  margin-block-start: 1.1rem;
  color: rgba(255, 253, 248, 0.78);
}

.colophon-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgba(255, 253, 248, 0.18);
  font-size: 0.8rem;
  color: rgba(255, 253, 248, 0.62);
}
.colophon-base p { margin: 0; max-inline-size: none; }
.colophon-base a { color: rgba(255, 253, 248, 0.78); }
.colophon-base a:hover { color: #fffdf8; }
.colophon-base .credit { margin-inline-start: auto; }
@media (max-width: 700px) { .colophon-base .credit { margin-inline-start: 0; } }

/* --------------------------------------------------------------------------
   20. Motion
   --------------------------------------------------------------------------
   Jazzy, but on a leash: nothing here blocks reading, and all of it is
   switched off under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.js [data-rise] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--rise-d, 0ms);
}
.js [data-rise].is-up { opacity: 1; transform: none; }

/* When a non-English locale is remembered, the inline head script stamps
   data-boot-lang and the page stays hidden until the translation is applied,
   so nobody sees a flash of English first. With JS off it is never set. */
html.js[data-boot-lang] body { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-rise] { opacity: 1; transform: none; }
  .sky { animation: none; }
  .ridges .ridge { transform: none !important; }
}

/* --------------------------------------------------------------------------
   21. RTL refinements
   -------------------------------------------------------------------------- */
[dir="rtl"] {
  --font-display: "Noto Naskh Arabic", "Fraunces", Georgia, serif;
  --font-body: "Noto Sans Arabic", "Public Sans", system-ui, sans-serif;
}
[dir="rtl"] body { line-height: 1.9; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.3; }
[dir="rtl"] .eyebrow, [dir="rtl"] .index, [dir="rtl"] .kicker, [dir="rtl"] .crumb,
[dir="rtl"] .slab-no, [dir="rtl"] .step-when, [dir="rtl"] .offer .tag,
[dir="rtl"] .rail .k, [dir="rtl"] .field label, [dir="rtl"] .colophon h3,
[dir="rtl"] .track-no, [dir="rtl"] .person .role, [dir="rtl"] .chip,
[dir="rtl"] .lang-menu button .code, [dir="rtl"] .stamp { letter-spacing: 0; }
[dir="rtl"] .sky { background-position: 30% 6%; }
[dir="rtl"] .lang-menu { inset-inline-end: 0; }

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
.mt-1 { margin-block-start: 1rem; }
.mt-2 { margin-block-start: 1.5rem; }
.mt-3 { margin-block-start: 2rem; }
.center { text-align: center; }
.max-56 { max-inline-size: 56ch; }