/* Locked Brand Core colours; Söhne remains the approved English family.
   System fonts are an INTERNAL-REVIEW fallback, not a new brand decision. */
:root {
    color-scheme: dark;
    --deep: #081d23;
    --white: #ffffff;
    --porcelain: #fafcfd;
    --muted: #aec5ca;
    --champagne: #c7b58a;
    --focus: #7bc8d5;
    --gutter: clamp(24px, 5vw, 96px);
    --scroll-distance: 0px;
}
* { box-sizing: border-box; }
html { background: var(--deep); scroll-behavior: auto; }
body { margin: 0; background: var(--deep); color: var(--white); font-family: var(--font-latin); }
button { font: inherit; }
[hidden] { display: none !important; }
.hero-track { position: relative; height: 100vh; height: 100svh; }
.hero-track.is-ready { height: calc(100svh + var(--scroll-distance)); }
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 400px; overflow: hidden; isolation: isolate; background: var(--deep); }
.hero-media, .hero-poster, .hero-canvas, .hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -3; }
.hero-poster, .hero-canvas { object-fit: cover; object-position: 50% 50%; }
.hero-canvas { opacity: 0; }
.has-canvas .hero-canvas { opacity: 1; }
.has-canvas .hero-poster { visibility: hidden; }
/* A continuous Deep scrim protects HTML text; no panel, glass or shadows. */
.hero-scrim { z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgb(8 29 35 / 78%) 0%, rgb(8 29 35 / 42%) 37%, rgb(8 29 35 / 4%) 74%), linear-gradient(180deg, rgb(8 29 35 / 30%), transparent 24%, transparent 55%, rgb(8 29 35 / 75%) 76%, rgb(8 29 35 / 90%)); }
.hero-header { position: absolute; z-index: 3; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3.5vh, 40px) var(--gutter); }
.wordmark { display: block; width: clamp(148px, 12.2vw, 195px); height: auto; }
/* Redundant editorial metadata only; content and controls keep full contrast. */
.hero-metadata { position: absolute; top: clamp(86px, 10vh, 108px); left: var(--gutter); margin: 0; color: var(--white); opacity: .3; font: 10px/1.6 "Söhne", "Sohne", Arial, sans-serif; letter-spacing: .14em; pointer-events: none; }
.hero-index { margin: 0; color: var(--white); opacity: .35; font-size: 12px; line-height: 1.75; letter-spacing: .15em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.motion-toggle { color: var(--porcelain); background: transparent; border: 0; padding: 12px 0 12px 16px; min-height: 44px; cursor: pointer; font-size: 14px; line-height: 1.4; text-underline-offset: 5px; }
.motion-toggle:hover { text-decoration: underline; }
.motion-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.hero-scene { position: absolute; inset: 0; pointer-events: none; }
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); top: 35%; perspective: 900px; pointer-events: none; }
.scene-kicker { width: fit-content; margin: 0 0 28px; font-size: 13px; line-height: 1.5; letter-spacing: .14em; color: var(--muted); }
.scene-headline { margin: 0; color: var(--white); font-size: clamp(48px, 4.7vw, 88px); font-weight: 700; line-height: 1.08; letter-spacing: 0; }
.word-emphasis { color: var(--champagne); }
.scene-support, .scene-kicker, .scene-actions, .hero-bottom, .motion-toggle { font-family: "Söhne", "Sohne", Arial, sans-serif; }
.scene-support { margin: 28px 0 0; max-width: 47ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; color: var(--porcelain); opacity: .8; }
.scene-actions { margin-top: 28px; pointer-events: auto; max-width: 560px; }
.cta-row { display: flex; align-items: center; gap: 24px; }
.hero-cta { display: inline-flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 20px; min-height: 50px; border: 1px solid var(--porcelain); font: inherit; font-size: 16px; line-height: 1.3; cursor: pointer; }
.hero-cta-primary { background: var(--champagne); border-color: var(--champagne); color: var(--deep); box-shadow: 0 3px 9px rgb(0 0 0 / 12%); transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.hero-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgb(0 0 0 / 16%); }
.hero-cta-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgb(0 0 0 / 12%); }
.hero-cta-secondary { background: transparent; color: var(--porcelain); border-color: transparent; padding-inline: 0; }
.hero-cta-secondary:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-cta:focus-visible, .still-controls button:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.cta-notice { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 14px; max-width: 55ch; }
.story-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.story-progress span { display: block; width: 100%; height: 100%; background: var(--porcelain); transform: scaleX(0); transform-origin: left; }
.still-controls { display: flex; gap: 18px; }
.still-controls button { background: transparent; color: var(--porcelain); border: 0; font: inherit; font-size: 14px; min-height: 44px; cursor: pointer; padding: 8px; }
.still-controls button:disabled { color: var(--muted); cursor: default; }
.still-controls button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 4px; }
.headline-line { display: block; }
.word-mask { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .13em; margin-bottom: -.13em; padding-right: .045em; margin-right: -.045em; }
.word { display: inline-block; transform-origin: 50% 80%; }
.is-intro .word { will-change: transform; }
.hero-bottom { position: absolute; z-index: 3; inset: auto var(--gutter) clamp(28px, 4vh, 48px); display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.hero-cue, .hero-status { margin: 0; font-size: 14px; line-height: 1.5; }
.hero-cue { color: var(--porcelain); }
.hero-status { color: var(--muted); max-width: 34ch; text-align: right; }
.hero-status:empty { display: none; }
.noscript-note { position: absolute; bottom: 70px; left: var(--gutter); right: var(--gutter); font-size: 14px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
    .hero-copy { top: 39%; }
    h1 { font-size: clamp(42px, 7.6vw, 58px); line-height: 1.1; }
    .headline-line { max-width: 15ch; }
    .hero-scrim { background: linear-gradient(90deg, rgb(8 29 35 / 78%), rgb(8 29 35 / 38%)), linear-gradient(180deg, rgb(8 29 35 / 25%), transparent 30%, transparent 70%, rgb(8 29 35 / 65%)); }
    .hero-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
    .hero-status { text-align: left; }
    .motion-toggle { max-width: 130px; }
}
@media (max-height: 550px) and (min-width: 761px) {
    .hero-copy { top: 24%; }
    .scene-headline { font-size: clamp(42px, 4vw, 56px); }
    .scene-kicker { margin-bottom: 16px; }
    .scene-support { margin-top: 16px; }
    .scene-actions { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-cta-primary { transition: none; }
    .hero-cta-primary:hover, .hero-cta-primary:active { transform: none; }
}

/* =========================================================
   RESPONSIVE HERO v1 — TABLET + MOBILE STATIC EXPERIENCE
   Desktop sequence remains untouched. Compact viewports use one
   intentional still so the first visit is fast, legible and calm.
   ========================================================= */
.hero-mobile-static{display:none}

@media (max-width:1024px){
    :root{--gutter:clamp(20px,5.5vw,44px)}
    .hero-track,.hero-track.is-ready{height:auto!important;min-height:100svh}
    .hero{position:relative;top:auto;height:auto;min-height:100svh;overflow:hidden}
    .hero-media,.hero-scrim,.hero-scene,.hero-bottom,.story-progress,.hero-metadata,.hero-header,.noscript-note{display:none!important}
    .hero-mobile-static{display:flex;position:relative;min-height:100svh;align-items:flex-end;isolation:isolate;background:var(--deep);overflow:hidden}
    .hero-mobile-image,.hero-mobile-scrim{position:absolute;inset:0;width:100%;height:100%}
    .hero-mobile-image{z-index:-3;object-fit:cover;object-position:67% 50%;filter:saturate(.88) contrast(1.03) brightness(.82)}
    .hero-mobile-scrim{z-index:-2;background:
        linear-gradient(180deg,rgba(8,29,35,.30) 0%,rgba(8,29,35,.20) 25%,rgba(8,29,35,.64) 58%,rgba(8,29,35,.97) 100%),
        linear-gradient(90deg,rgba(8,29,35,.38),transparent 72%)}
    .hero-mobile-copy{width:100%;padding:clamp(150px,24svh,230px) var(--gutter) clamp(42px,7svh,70px)}
    .hero-mobile-kicker{margin:0 0 18px;color:var(--muted);font-size:10px;line-height:1.5;letter-spacing:.15em}
    .hero-mobile-copy h1{margin:0;max-width:10.5ch;color:var(--white);font-size:clamp(48px,8.6vw,72px);font-weight:700;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
    .hero-mobile-copy h1 em{font-style:normal;color:var(--champagne)}
    .hero-mobile-support{margin:24px 0 0;max-width:43ch;color:rgba(250,252,253,.82);font-size:clamp(16px,2.4vw,19px);line-height:1.65}
    .hero-mobile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:30px}
    .hero-mobile-primary,.hero-mobile-secondary{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;text-decoration:none;font-size:14px}
    .hero-mobile-primary{padding:13px 16px;background:var(--champagne);border:1px solid var(--champagne);color:var(--deep);font-weight:500}
    .hero-mobile-secondary{padding:12px 0;color:var(--porcelain);border-bottom:1px solid var(--focus)}
    .hero-mobile-primary:focus-visible,.hero-mobile-secondary:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
    .hero-mobile-note{margin:32px 0 0;padding-top:18px;border-top:1px solid rgba(123,200,213,.28);max-width:60ch;color:rgba(174,197,202,.72);font-size:10px;line-height:1.6;letter-spacing:.035em}
}

@media (max-width:600px){
    .hero-mobile-static{min-height:max(720px,100svh)}
    .hero-mobile-image{object-position:71% 50%}
    .hero-mobile-copy{padding-block-start:clamp(126px,20svh,175px);padding-block-end:34px}
    .hero-mobile-copy h1{font-size:clamp(44px,13vw,58px);line-height:1}
    .hero-mobile-support{font-size:15px;line-height:1.62}
    .hero-mobile-actions{align-items:stretch;flex-direction:column;gap:10px;margin-top:26px}
    .hero-mobile-primary,.hero-mobile-secondary{width:100%;min-height:48px}
    .hero-mobile-primary{padding-inline:15px}
    .hero-mobile-secondary{justify-content:space-between;padding-inline:0}
    .hero-mobile-note{margin-top:26px}
}

/* =========================================================
   MOBILE PRECISION v6 — HERO
   Compact, scan-first mobile treatment. Desktop/tablet untouched.
   ========================================================= */
@media (max-width:600px){
  .hero-mobile-static{
    min-height:620px;
    height:78svh;
    max-height:680px;
    align-items:flex-end;
  }
  .hero-mobile-image{object-position:69% 48%;filter:saturate(.84) contrast(1.04) brightness(.78)}
  .hero-mobile-copy{padding:104px 16px 26px}
  .hero-mobile-kicker{margin-bottom:10px;font-size:8px;letter-spacing:.13em}
  .hero-mobile-copy h1{font-size:clamp(36px,10.3vw,42px);line-height:.98;max-width:11.5ch;letter-spacing:-.042em}
  .hero-mobile-support{margin-top:14px;font-size:13px;line-height:1.52;max-width:38ch}
  .hero-mobile-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 14px;
    margin-top:18px;
    align-items:center;
  }
  .hero-mobile-primary,.hero-mobile-secondary{width:auto;min-height:46px;font-size:12px}
  .hero-mobile-primary{padding:11px 13px}
  .hero-mobile-secondary{padding:10px 0;white-space:nowrap}
  .hero-mobile-note{margin-top:14px;padding-top:11px;font-size:8px;line-height:1.5;max-width:44ch}
}

/* ===== Persian / RTL foundation v4.0 ===== */
html[dir="rtl"] body,html[dir="rtl"] .hero{direction:rtl;font-family:var(--font-persian);text-align:start}
html[dir="rtl"] .scene-headline,html[dir="rtl"] .hero-mobile-copy h1{font-family:var(--font-persian);letter-spacing:0}
html[dir="rtl"] .hero-mobile-copy,html[dir="rtl"] .hero-copy{text-align:start}
html[dir="rtl"] .hero-mobile-primary span,html[dir="rtl"] .hero-mobile-secondary span,html[dir="rtl"] .hero-cta span{display:inline-block;transform:scaleX(-1)}

/* =========================================================
   PERSIAN HERO TYPOGRAPHY + RTL POLISH v4.1
   ========================================================= */
html[dir="rtl"] body,html[dir="rtl"] .hero{font-family:var(--font-persian)}
html[dir="rtl"] .scene-headline,html[dir="rtl"] .hero-mobile-copy h1{font-family:var(--font-persian);font-weight:800;letter-spacing:0;line-height:1.12;text-wrap:balance}
html[dir="rtl"] .scene-kicker,html[dir="rtl"] .scene-support,html[dir="rtl"] .scene-actions,html[dir="rtl"] .hero-bottom,html[dir="rtl"] .motion-toggle,html[dir="rtl"] .hero-mobile-kicker,html[dir="rtl"] .hero-mobile-support,html[dir="rtl"] .hero-mobile-actions,html[dir="rtl"] .hero-mobile-note{font-family:var(--font-persian)}
html[dir="rtl"] .scene-kicker,html[dir="rtl"] .hero-mobile-kicker,html[dir="rtl"] .hero-metadata{letter-spacing:0;text-transform:none}
html[dir="rtl"] .scene-support,html[dir="rtl"] .hero-mobile-support{line-height:1.82}
html[dir="rtl"] .hero-copy{left:var(--gutter);right:var(--gutter);text-align:right}
html[dir="rtl"] .hero-scrim{background:linear-gradient(270deg,rgb(8 29 35 / 78%) 0%,rgb(8 29 35 / 42%) 37%,rgb(8 29 35 / 4%) 74%),linear-gradient(180deg,rgb(8 29 35 / 30%),transparent 24%,transparent 55%,rgb(8 29 35 / 75%) 76%,rgb(8 29 35 / 90%))}
html[dir="rtl"] .hero-metadata{left:auto;right:var(--gutter);font-family:var(--font-persian)}
html[dir="rtl"] .story-progress span{transform-origin:right}
html[dir="rtl"] .hero-status{text-align:left}
html[dir="rtl"] .hero-mobile-primary span,html[dir="rtl"] .hero-mobile-secondary span,html[dir="rtl"] .hero-cta span{display:inline-block;transform:scaleX(-1)}
@media(max-width:1024px){
  html[dir="rtl"] .hero-mobile-copy{text-align:right}
  html[dir="rtl"] .hero-mobile-scrim{background:linear-gradient(180deg,rgba(8,29,35,.30) 0%,rgba(8,29,35,.20) 25%,rgba(8,29,35,.64) 58%,rgba(8,29,35,.97) 100%),linear-gradient(270deg,rgba(8,29,35,.55),transparent 72%)}
  html[dir="rtl"] .hero-mobile-copy h1{line-height:1.08;max-width:11.5ch}
}
@media(max-width:600px){
  html[dir="rtl"] .hero-mobile-copy h1{font-size:clamp(34px,10vw,41px);line-height:1.08;max-width:12ch}
  html[dir="rtl"] .hero-mobile-support{font-size:13px;line-height:1.7}
}