/* ============================================================
   PERCIVAL — scroll one-pager
   Design system: "Trust & Authority" (ui-ux-pro-max)
   Navy / steel palette · Heebo (headings) + Assistant (body)
   ============================================================ */

:root {
  /* palette — Trust & Authority */
  --primary: #0F172A;
  --on-primary: #FFFFFF;
  --secondary: #334155;
  --accent: #0369A1;
  --accent-strong: #075985;
  --accent-bright: #38BDF8;   /* accent on dark surfaces */
  --bg-light: #F8FAFC;
  --fg: #020617;
  --muted: #E8ECF1;
  --border: #E2E8F0;
  --ink: #0B1220;             /* dark section canvas */
  --ink-2: #0F172A;
  --white-08: rgba(255, 255, 255, .08);
  --white-14: rgba(255, 255, 255, .14);
  --white-60: rgba(226, 232, 240, .78);
  /* Border for controls whose boundary is the only thing identifying them
     (form fields). Must stay >= 3:1 against the dark surfaces — WCAG 1.4.11.
     --white-14 is only 1.5:1 and is for decorative edges. */
  --field-line: rgba(255, 255, 255, .38);

  --font-head: "Heebo", "Segoe UI", sans-serif;
  --font-body: "Assistant", "Segoe UI", sans-serif;

  --radius: 14px;
  --container: 1160px;
  --nav-h: 64px;

  --shadow-1: 0 1px 2px rgba(2, 6, 23, .06), 0 8px 24px rgba(2, 6, 23, .07);
  --shadow-2: 0 2px 4px rgba(2, 6, 23, .08), 0 16px 40px rgba(2, 6, 23, .14);

  --ease: cubic-bezier(.22, .8, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Belt-and-braces against sideways drift. `overflow-x: hidden` on body alone
     does NOT stop the DOCUMENT panning horizontally — html was still `visible`,
     which is why the page could be dragged left/right on a phone.
     It MUST be `clip`, not `hidden`: `hidden` turns the element into a scroll
     container, and a scroll container on html breaks `position: sticky` for
     everything inside — which would kill the entire scrub film. `clip` crops
     without creating a scroll box, so sticky keeps working. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, canvas, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a, button { cursor: pointer; }

/* WCAG 2.4.7 Focus Visible + 1.4.11 Non-text Contrast (>= 3:1).
   --accent-bright measures 8.6:1 against the dark ink canvas but only 2.08:1
   against the light #F8FAFC sheet, so a single ring colour cannot pass on both.
   The light sections take --accent-strong instead (7.2:1 on #F8FAFC). */
:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
.light :focus-visible,
.sheet :focus-visible {
  outline-color: var(--accent-strong);
}
/* An outward ring is cropped to nothing by an ancestor that clips, so these
   three draw the ring INSIDE the control instead (negative offset). Each was
   verified to be inside an `overflow: hidden` / `clip` box. */
.lang-toggle button:focus-visible {
  outline: 3px solid #fff;      /* 5.9:1 on the pressed accent fill, 18.7:1 unpressed */
  outline-offset: -5px;
}
.faq summary:focus-visible,
.mg-viewport:focus-visible {
  outline-offset: -4px;
}

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

/* ============================================================
   SKIP LINK — WCAG 2.4.1 Bypass Blocks (Level A)
   The home page's nav sits ahead of a 938vh scroll film, so without this a
   keyboard or screen-reader user has no way past the header. Visually hidden
   until focused, then it lands as a normal button at the top-start corner.
   `clip-path` rather than `display:none`, so it stays focusable.
   ============================================================ */
.skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 300;                       /* above .nav (100) and .scroll-progress (200) */
  padding: 12px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--accent-bright);
  color: #04121f;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .5);
  /* visually hidden but reachable */
  clip-path: inset(50%);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  clip-path: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  /* dark ring, not white: the chip's own fill is --accent-bright, so a white
     ring measured only 2.1:1 against it. #04121f is 8.8:1 on that fill. */
  outline: 3px solid #04121f;
  outline-offset: 2px;
}

/* ---------- bilingual visibility ---------- */
html[lang="en"] .he { display: none !important; }
html[lang="he"] .en { display: none !important; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 800;
}
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3, html[lang="he"] h4 {
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
html[lang="he"] .eyebrow { letter-spacing: .06em; }
.on-dark .eyebrow { color: var(--accent-bright); }

.section-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: .16;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1;
  user-select: none;
}

/* ---------- layout ---------- */
.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

section.block { padding: clamp(44px, 4.5vw, 76px) 0; }

.light { background: var(--bg-light); color: var(--fg); }
.on-dark { background: var(--ink); color: #E9EEF5; }
/* distinct dark band — separates "Who / Why" from "About PERCIVAL + founders" */
.on-dark.about-band {
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border-top: 1px solid var(--white-08);
}

.section-head { max-width: 760px; margin-bottom: clamp(16px, 2vw, 32px); }
.section-head h2 { font-size: clamp(30px, 4.4vw, 52px); margin-bottom: 16px; }
.section-head p.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--secondary); }
.on-dark .section-head p.lead { color: var(--white-60); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled {
  background: rgba(11, 18, 32, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--white-08);
}
.nav .container {
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .22em;
  color: #fff;
}
.brand span { color: var(--accent-bright); }
/* The wordmark is 20–24px tall by design, which left the LINK under the 24px
   target minimum (WCAG 2.5.8). Pad the link instead of scaling the logo — the
   nav is 64px tall, so a 44px target fits with room to spare. */
.nav .brand { display: inline-flex; align-items: center; min-height: 44px; }

/* official lockup (white wordmark + orange compass needle — the approved micro-accent) */
.brand img { height: 24px; width: auto; display: block; }
.footer .brand img { height: 17px; opacity: .92; }
@media (max-width: 560px) { .nav .brand img { height: 20px; } }

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin-inline-start: auto;
}
.nav-links a {
  display: block;
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14.5px;
  color: rgba(233, 238, 245, .75);
  border-radius: 8px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: #fff; background: var(--white-08); }
.nav-links a.active { color: var(--accent-bright); }

.nav-cta {
  margin-inline-start: auto;
  display: none;
}

.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--white-14);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.lang-toggle button {
  border: 0;
  background: transparent;
  color: rgba(233, 238, 245, .7);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  padding: 0 14px;
  /* 44px, not 40px — WCAG 2.5.5 / Apple HIG minimum. The nav bar is 64px tall,
     so the taller pill still clears the bar with room to spare. */
  min-height: 44px;
  transition: background .2s, color .2s;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

/* ---------- mobile menu ----------
   Below 860px the nav links used to be display:none with nothing in their
   place, leaving a phone with no navigation at all. They now collapse into a
   panel toggled by .nav-burger. */
.nav-burger {
  display: none;                       /* desktop: the inline links are enough */
  width: 44px; height: 44px;           /* full 44px touch target */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--white-14);
  border-radius: 10px;
  cursor: pointer;
}
.nav-burger__bars,
.nav-burger__bars::before,
.nav-burger__bars::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-burger__bars { position: relative; }
.nav-burger__bars::before { position: absolute; top: -6px; }
.nav-burger__bars::after  { position: absolute; top: 6px; }
/* burger -> X */
.nav-burger[aria-expanded="true"] .nav-burger__bars { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;                         /* under .nav (100), over the page */
  background: rgba(4, 9, 20, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.nav-scrim[hidden] { display: none; }

@media (max-width: 860px) {
  .nav .container { justify-content: space-between; gap: 10px; }
  .nav-burger { display: flex; }

  /* Nothing in the bar may overlap when space runs out. Adding the 44px burger
     left energy.html's bar with ZERO slack (brand 199 + lang 79 + burger 44 +
     gaps 20 = 342 in a 342px container at a 390px viewport), so the "ENERGY"
     badge collided with the language pill instead of anything giving way.
     The logo is the only thing allowed to shrink; the controls never do. */
  .nav .brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .nav .brand img { min-width: 0; }
  .lang-toggle, .nav-burger { flex: 0 0 auto; }
}

/* Below ~480px there is genuinely no room for the sub-brand badge next to the
   language pill and the burger. The page is unmistakably the Energy page from
   its H1 and <title>, so the badge is what gives way. */
@media (max-width: 480px) {
  .en-sub-badge { display: none; }
}

@media (max-width: 860px) {

  /* the links become a dropdown panel under the bar */
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    inset-inline: 0;
    display: block;
    margin: 0;
    padding: 8px max(16px, env(safe-area-inset-left)) 14px;
    background: rgba(11, 18, 32, .96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--white-08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    z-index: 100;
    /* Collapsed state. Kept in the DOM rather than display:none so it can
       animate, with visibility keeping the links out of the tab order.
       NOTE the `visibility 0s` timings: visibility must NOT be given a real
       duration. Transitioned properties only change when the transition
       actually runs, so a duration here meant the panel stayed invisible
       whenever transitions were suppressed (a background tab, for instance) —
       the menu simply never opened. Instead visibility flips instantly on open,
       and on close is delayed until the fade has finished. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .26s var(--ease), opacity .22s var(--ease),
                visibility 0s linear .26s;
  }
  .nav-links.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .26s var(--ease), opacity .22s var(--ease),
                visibility 0s;
  }
  .nav-links li { display: block; }
  .nav-links a {
    font-size: 16.5px;
    padding: 14px 12px;
    min-height: 48px;
    border-radius: 10px;
  }
  .nav-links a + a { margin-top: 2px; }
}

/* 861–980px is the tight window: the burger has just been dropped, but the six
   inline links + logo + language pill add up to more than the container. Nothing
   here wraps, so the last item ("Contact") would simply be clipped. The links
   give up padding and half a point of size — the touch targets are already past
   44px from `min-height`, so nothing drops below spec. */
@media (min-width: 861px) and (max-width: 980px) {
  .nav .container { gap: 16px; }
  .nav-links a { padding-inline: 9px; font-size: 14px; }
}

/* A phone in landscape is short — let a long menu scroll rather than overflow. */
@media (max-width: 860px) and (max-height: 520px) {
  .nav-links { max-height: calc(100vh - var(--nav-h) - 8px); overflow-y: auto; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); box-shadow: var(--shadow-2); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: var(--white-14);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, .45); background: var(--white-08); }
.light .btn-ghost { color: var(--primary); border-color: #CBD5E1; }
.light .btn-ghost:hover { border-color: var(--primary); background: #fff; }

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
html[dir="rtl"] .btn svg.arrow { transform: scaleX(-1); }

/* ============================================================
   SCRUB STAGES (canvas scroll sections)
   ============================================================ */
/* One continuous film. The REAL height is set inline by js/scrub-film.js from
   the per-chapter data-weight values (sum of weights × the root's data-vh), so
   pacing lives with the chapters in the HTML and cannot drift from a hand-kept
   CSS number. The values here are only the pre-JS fallback — keep them roughly
   in sync (currently 6 chapters, weights summing to 6.25, at 150vh / 124vh). */
.scrub-film { position: relative; height: 938vh; }
@media (max-width: 767px) { .scrub-film { height: 775vh; } }
.scrub-film .stage {
  background: var(--ink);
  position: sticky;
  top: 0;
  height: 100vh;
  /* svh, NOT dvh. dvh is the *dynamic* viewport height, so it changed on every
     frame of the mobile URL-bar hide/show animation — which resized the canvas
     (and setting canvas.width CLEARS it) dozens of times in a row. That was the
     mobile flicker. svh is the small viewport height and never moves while
     scrolling; when the bar retracts a thin strip of --ink shows below, which is
     invisible against the film. */
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.scrub-film canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .9s var(--ease); /* smooth hand-off when the idle drift stops */
}

/* gentle circular drift of the Earth while the page rests at the top.
   8-point circle approximation; constant slight zoom hides the panning edges. */
.scrub-film canvas.idle-orbit {
  animation: orbit 18s linear infinite;
}
@keyframes orbit {
  0%    { transform: scale(1.09) translate(0px, -12px); }
  12.5% { transform: scale(1.09) translate(8.5px, -8.5px); }
  25%   { transform: scale(1.09) translate(12px, 0px); }
  37.5% { transform: scale(1.09) translate(8.5px, 8.5px); }
  50%   { transform: scale(1.09) translate(0px, 12px); }
  62.5% { transform: scale(1.09) translate(-8.5px, 8.5px); }
  75%   { transform: scale(1.09) translate(-12px, 0px); }
  87.5% { transform: scale(1.09) translate(-8.5px, -8.5px); }
  100%  { transform: scale(1.09) translate(0px, -12px); }
}
@media (prefers-reduced-motion: reduce) {
  .scrub-film canvas.idle-orbit { animation: none; }
}
.scrub-film .veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 9, 20, .5) 0%, rgba(4, 9, 20, .22) 45%, rgba(11, 18, 32, .88) 100%);
  will-change: opacity;
}

/* text stays readable over the lighter veil */
.chapter--hero h1, .chapter--hero .display-1, .chapter--hero .sub,
.statement h2, .statement p {
  text-shadow: 0 2px 18px rgba(4, 9, 20, .8), 0 1px 3px rgba(4, 9, 20, .7);
}

/* location pin shown while diving into the footage */
.loc-pin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--white-14);
  background: rgba(9, 15, 28, .55);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  padding: 12px 22px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.loc-pin svg { width: 20px; height: 20px; color: var(--accent-bright); flex: 0 0 auto; }
.scrub-film .stage .container { position: relative; z-index: 2; }

/* crossfading phrases inside a stage */
.phrase {
  position: absolute;
  top: 0;
  inset-inline: 0;
  opacity: 0;
  transform: translateY(var(--ph-y, 22px));
  will-change: opacity, transform;
}
.phrase-track { position: relative; min-height: 340px; display: block; width: 100%; }
.chapter--hero .phrase-track { min-height: min(58vh, 560px); }
/* hero phrases hug the bottom of the stage; overflow grows upward */
.chapter--hero .phrase { top: auto; bottom: 0; }
.statement-track { min-height: 42vh; }
.statement-track .phrase {
  top: 50%;
  transform: translateY(calc(-50% + var(--ph-y, 22px)));
}
.phrase.static {
  position: relative;
  top: 0;
  opacity: 1;
  transform: none;
}

/* hero specifics */
.chapter--hero .stage { align-items: flex-end; }
.chapter--hero .hero-inner { padding-bottom: clamp(56px, 9vh, 110px); max-width: 900px; }
.chapter--hero h1,
.chapter--hero .display-1 {
  font-family: var(--font-head);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  font-size: clamp(38px, min(6.8vw, 10.4vh), 84px);
  font-weight: 900;
  margin: 18px 0 20px;
}
html[lang="he"] .chapter--hero .display-1 { letter-spacing: 0; }
/* Legibility scrim behind the hero copy.
   Every other chapter puts its statement on a glass `.has-panel`; the hero had
   nothing, so its text sat directly on the footage. Measured contrast of the
   sub-heading against the brightest 10% of the background, across the frames the
   hero is actually visible for (u 0 → 0.30):
       worst frame (u=0.20, diving into cloud)  1.76  — needs 4.5
   Brightening the text CANNOT fix that: pure opaque white only reaches 2.5 there,
   because the background itself is bright. The background has to come down. This
   gradient adds ~0.40 alpha over the text band (→ sub 4.68, h1 8.73) and fades to
   nothing before the middle of the frame, so the Earth is untouched up top.
   z-index 1: above the canvas and .veil (auto), below .container (2). */
.chapter--hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 60%;
  z-index: 1;
  pointer-events: none;
  /* The text band is 25–58% up this element; those stops are what the contrast
     numbers above were measured against and should not be weakened. The 0% stop
     is below the copy (the solid CTA button sits there and carries its own
     contrast) so it is kept lighter — it is the most visible darkening at the
     frame edge and does not buy any legibility. */
  background: linear-gradient(to top,
    rgba(4, 9, 20, .52) 0%,
    rgba(4, 9, 20, .50) 25%,
    rgba(4, 9, 20, .44) 50%,
    rgba(4, 9, 20, .28) 75%,
    rgba(4, 9, 20, 0) 100%);
}
/* the hero copy stacks taller on a phone — extend the scrim to cover it */
@media (max-width: 767px) {
  .chapter--hero::before { height: 74%; }
}

.chapter--hero .sub {
  /* opaque, not var(--white-60) (which is .78 alpha): the transparency blended
     the text toward whatever was behind it, costing ~1.3 of contrast ratio. */
  color: #E9EEF5;
  font-size: clamp(17px, 1.85vw, 23px);
  max-width: 660px;
  margin-bottom: 30px;
}
.chapter--hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* the hero chapter's second phrase = the first service statement, shown once
   the descent arrives in the terminal. Reuse the glass "legibility panel" but
   pin it to the reading-start edge and keep it narrow, so the traveller walking
   through the centre of the footage stays clear (mirrors the old airport beat). */
.chapter--hero .phrase--svc { inset-inline: 0; }
.chapter--hero .phrase--svc .statement.svc {
  margin-inline: 0 auto;   /* start-aligned: LTR → left, RTL (Hebrew) → right */
  text-align: start;
  max-width: 400px;
}
@media (max-width: 767px) {
  .chapter--hero .phrase--svc .statement.svc { max-width: 100%; }
}

/* narrow screens: clear space between CTAs and the scroll cue */
@media (max-width: 560px) {
  .chapter--hero .hero-inner { padding-bottom: 96px; }
  .chapter--hero .cta-row { gap: 10px; }
}

/* short viewports: keep the whole hero inside the stage */
@media (max-height: 760px) {
  .chapter--hero .hero-inner { padding-bottom: 64px; }
  .chapter--hero h1, .chapter--hero .display-1 { font-size: clamp(26px, 7vh, 44px); margin: 12px 0 12px; }
  .chapter--hero .sub { font-size: 15px; margin-bottom: 18px; max-width: 560px; }
  .kicker { font-size: 11.5px; padding: 7px 13px; }
  .btn { min-height: 46px; padding: 11px 22px; font-size: 15px; }
  .statement h2 { font-size: clamp(26px, 4.6vw, 48px); }
  .chapter--hero .scroll-cue { display: none; }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--white-14);
  background: rgba(9, 15, 28, .5);
  color: var(--accent-bright);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[lang="he"] .kicker { letter-spacing: .05em; }
.kicker .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-bright);
}

.scroll-cue {
  position: absolute;
  bottom: 22px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(233, 238, 245, .6);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
}
html[dir="rtl"] .scroll-cue { transform: translateX(50%); }
/* Sit the cue lower on phones. env() keeps it clear of the iPhone home bar;
   the stage is 100svh so its bottom edge is already just above the browser
   chrome, and this tucks the cue into that last sliver. */
@media (max-width: 860px) {
  .scroll-cue { bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--accent-bright), transparent);
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   INDIA — the punchline beat ("Built for complex markets.")
   Two goals that fight each other: a brighter scene AND a more prominent line.
   Lifting the veil (data-veil="0.4" on the chapter) brightens the footage but
   takes away the contrast the veil was providing, so the contrast has to be
   bought back locally — the same trade the hero makes with .chapter--hero::before,
   but as a tight ellipse rather than a full-width band, so only the strip behind
   the words darkens and the India Gate / sunset sky stay lifted.

   Measured over the frames the copy is actually legible on (u 0.06–0.72, i.e.
   f4–f40 — the later frames only ever show during the seam), with the engine's
   real per-frame veil ramp, contrast taken against the brightest 10% of the
   background inside the live-measured glyph box (stage y 268–532 of 800):
       before   sub 2.23 (FAILS AA)   h2 3.33
       after    sub 5.08              h2 5.92
   and the footage genuinely brightens where the eye reads the scene:
       sky +14%   foreground +21%   everything outside the headline +10%
       the strip directly behind the words -30% (that is what buys the contrast)
   z-index 1: above the canvas and .veil (auto), below .container (2). */
.chapter--india::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* ry 24% is set by the text box, not by taste: at 84px the headline wraps to
     two lines and the block measures 268–532px in an 800px stage, so a shorter
     ellipse leaves the first and last line sitting on bare footage. */
  background: radial-gradient(ellipse 92% 24% at 50% 50%,
    rgba(4, 9, 20, .50) 0%,
    rgba(4, 9, 20, .40) 60%,
    rgba(4, 9, 20, .15) 88%,
    rgba(4, 9, 20, 0) 100%);
}
/* the headline wraps to 2–3 lines on a phone and the sub follows it, so the
   text block is far taller relative to the stage — the ellipse has to grow with
   it or the lower lines fall off the scrim. */
@media (max-width: 767px) {
  .chapter--india::before {
    background: radial-gradient(ellipse 145% 34% at 50% 50%,
      rgba(4, 9, 20, .52) 0%,
      rgba(4, 9, 20, .42) 60%,
      rgba(4, 9, 20, .16) 88%,
      rgba(4, 9, 20, 0) 100%);
  }
}
/* It is the punchline of the film — give it more size and a tighter set than the
   other interlude statements. */
.chapter--india .statement h2 {
  font-size: clamp(38px, 6.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
/* Hebrew has no ascender/descender rhythm to tighten and negative tracking
   collapses the letterforms — same exception the hero display line makes. */
html[lang="he"] .chapter--india .statement h2 { letter-spacing: 0; line-height: 1.1; }
.chapter--india .statement p {
  /* opaque, not var(--white-60) (.78 alpha): the transparency blends the text
     toward the sunset behind it and cost ~1.5 of contrast ratio. */
  color: #E9EEF5;
  font-size: clamp(17px, 1.8vw, 22px);
  margin-top: 22px;
}

/* interlude statements (markets / closing) */
.statement {
  text-align: center;
  margin-inline: auto;
  max-width: 900px;
}
.statement h2 {
  color: #fff;
  font-size: clamp(32px, 5.2vw, 64px);
  font-weight: 900;
}
.statement p {
  margin-top: 18px;
  color: var(--white-60);
  font-size: clamp(16px, 1.6vw, 20px);
  max-width: 640px;
  margin-inline: auto;
}

/* ============================================================
   CARDS — practices
   ============================================================ */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: #CBD5E1;
}

.card .idx {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: .12em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.card h3 { font-size: 21px; margin-bottom: 10px; color: var(--primary); }
.card > p { color: var(--secondary); font-size: 16px; }

.card ul.includes {
  list-style: none;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 9px;
}
.card ul.includes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--secondary);
}
.card ul.includes svg {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--accent);
}

/* ============================================================
   MARKETS (dark)
   ============================================================ */
.market-card {
  background: rgba(15, 23, 42, .66);
  border: 1px solid var(--white-08);
  border-radius: var(--radius);
  padding: 26px 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.market-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, .4);
  background: rgba(15, 23, 42, .85);
}
.market-card h3 {
  color: #fff;
  font-size: 19px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.market-card h3 svg { width: 18px; height: 18px; color: var(--accent-bright); flex: 0 0 auto; }
.market-card p { color: var(--white-60); font-size: 15.5px; }

.beyond {
  margin-top: 34px;
  border: 1px dashed var(--white-14);
  border-radius: var(--radius);
  padding: 22px 26px;
  color: var(--white-60);
  font-size: 16px;
  background: rgba(15, 23, 42, .4);
}
.beyond strong { color: #fff; font-weight: 700; }

/* ============================================================
   MARKETS — circular gallery (3D coverflow ring)
   Progressive enhancement: no-JS / reduced-motion => static grid
   ============================================================ */

/* --- static fallback grid (also the semantic source for the ring) --- */
.mg-fallback {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 960px) { .mg-fallback { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .mg-fallback { grid-template-columns: 1fr; } }

.mg-item { display: flex; flex-direction: column; }
.mg-figure {
  position: relative;
  margin: 0 0 14px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--white-08);
  background: #0b1220;
}
.mg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-name {
  position: absolute;
  inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 36px 16px 14px;
  color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
  background: linear-gradient(0deg, rgba(4,9,20,.88) 0%, rgba(4,9,20,.38) 60%, transparent 100%);
}
.mg-name svg { width: 18px; height: 18px; color: var(--accent-bright); flex: 0 0 auto; }
.mg-desc { color: var(--white-60); font-size: 15.5px; margin: 0; }

/* --- enhanced ring mode (added by JS when motion is allowed) --- */
/* The 3D coverflow ring positions its cards absolutely and rotates them out to
   the sides, so on a narrow screen they extend well past the viewport. Nothing
   clipped them, which made the whole DOCUMENT 568px wide at a 390px viewport —
   that was the sideways drift while scrolling. Clipping the SECTION (full-bleed)
   rather than .markets-gallery lets the ring still reach the screen edges as
   designed. `clip` not `hidden` — see the note on html at the top of this file. */
#markets { overflow-x: clip; }

.markets-gallery.is-ring { position: relative; }
.markets-gallery.is-ring .mg-fallback { display: none; }

.mg-viewport {
  position: relative;
  height: clamp(240px, 30vh, 380px);
  perspective: 1600px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;                 /* keep vertical page scroll; JS handles horizontal */
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.mg-viewport.is-grabbing { cursor: grabbing; }
/* offset is INSET: #markets sets `overflow-x: clip` to contain the 3D ring, which
   cropped an outward ring on this full-width element (WCAG 2.4.7) */
.mg-viewport:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: -4px; border-radius: 14px; }

.mg-stage { position: absolute; inset: 0; transform-style: preserve-3d; }

.mg-card {
  position: absolute;
  left: 50%; top: 50%;
  width: min(440px, 74vw);
  aspect-ratio: 3 / 2;
  /* never taller than the ring frame, so the card can't overflow into the
     country-name caption below it (leaves a clean gap under the card) */
  max-height: 88%;
  margin: 0; padding: 0;
  border: 1px solid var(--white-14);
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.75);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mg-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.02) brightness(.6);
  transition: filter .5s var(--ease);
}
.mg-card.is-active { border-color: rgba(56, 189, 248, .55); box-shadow: 0 40px 80px -28px rgba(3, 105, 161, .55); }
.mg-card.is-active .mg-card__img { filter: saturate(1.06) brightness(1); }
.mg-card__name {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 42px 18px 16px;
  color: #fff; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(17px, 2vw, 22px);
  background: linear-gradient(0deg, rgba(4,9,20,.92) 0%, rgba(4,9,20,.32) 62%, transparent 100%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.mg-card.is-active .mg-card__name { opacity: 1; }
.mg-card__name svg { width: 18px; height: 18px; color: var(--accent-bright); flex: 0 0 auto; }

/* caption under the ring (shows the active market) */
.mg-caption { text-align: center; max-width: 620px; margin: 16px auto 0; min-height: 62px; }
.mg-caption__name {
  font-family: var(--font-head); font-weight: 800; color: #fff;
  font-size: clamp(20px, 2.4vw, 26px);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.mg-caption__name svg { width: 20px; height: 20px; color: var(--accent-bright); flex: 0 0 auto; }
.mg-caption__desc { color: var(--white-60); font-size: 16.5px; margin: 0; }
.mg-caption__name, .mg-caption__desc { transition: opacity .2s var(--ease); }
.mg-caption.is-swapping .mg-caption__name,
.mg-caption.is-swapping .mg-caption__desc { opacity: 0; }

/* controls */
.mg-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
/* Eleven dots plus two arrows are wider than the container on a small phone.
   #markets sets `overflow-x: clip` to contain the 3D ring, so the end dots
   (Israel, Chile) were not merely off-screen — they were clipped away and could
   not be reached at all. WCAG 1.4.10 Reflow / 2.1.1. Both rows now wrap. */
@media (max-width: 620px) {
  .mg-bar { flex-wrap: wrap; gap: 12px 18px; }
  .mg-dots { flex-wrap: wrap; justify-content: center; flex-basis: 100%; order: 3; }
}
.mg-arrow {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  flex: 0 0 auto;                      /* hold the 46px target when space is tight */
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .6); border: 1px solid var(--white-14); color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.mg-arrow:hover { background: rgba(15, 23, 42, .95); border-color: rgba(56, 189, 248, .5); }
.mg-arrow:active { transform: scale(.92); }
.mg-arrow svg { width: 20px; height: 20px; }
.mg-arrow--next svg { transform: scaleX(-1); }
html[dir="rtl"] .mg-arrow--prev svg { transform: scaleX(-1); }
html[dir="rtl"] .mg-arrow--next svg { transform: none; }

.mg-dots { display: flex; align-items: center; gap: 6px; }
.mg-dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  /* never let the flex row shrink a control under the 24px target minimum
     (WCAG 2.5.8) — the row wraps instead, see the @media below .mg-bar */
  flex: 0 0 auto;
}
.mg-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(226, 232, 240, .35);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.mg-dot:hover::before { background: rgba(226, 232, 240, .75); }
.mg-dot.is-active::before { background: var(--accent-bright); transform: scale(1.6); }

/* ============================================================
   INDUSTRIES — gallery4-style horizontal carousel (light section)
   Native scroll-snap track + top-right arrows + dots; JS enhances
   with mouse drag, arrow paging, dot sync. Works with no JS (scroll).
   ============================================================ */
.ind-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.ind-head__text { max-width: 680px; }
.ind-head__text h2 { font-size: clamp(30px, 4.4vw, 52px); margin-bottom: 16px; }
.ind-head__text p.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--secondary); }

.ind-nav { display: flex; gap: 12px; flex: 0 0 auto; padding-bottom: 6px; }
.ind-arrow {
  width: 52px; height: 52px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); color: var(--primary);
  box-shadow: var(--shadow-1);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .12s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.ind-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.ind-arrow:active { transform: scale(.94); }
.ind-arrow svg { width: 22px; height: 22px; }
.ind-arrow[disabled] { opacity: .38; cursor: default; box-shadow: none; }
.ind-arrow[disabled]:hover { border-color: var(--border); color: var(--primary); transform: none; }
html[dir="rtl"] .ind-arrow svg { transform: scaleX(-1); }
@media (max-width: 768px) { .ind-nav { display: none; } }

.ind-gallery { position: relative; }
.ind-track {
  list-style: none; margin: 0; padding: 4px 2px 10px;
  display: flex; gap: clamp(16px, 2vw, 24px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.ind-track::-webkit-scrollbar { display: none; }
.ind-track.is-grabbing { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }

.ind-card {
  position: relative; flex: 0 0 auto;
  width: clamp(240px, 74vw, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 18px; overflow: hidden;
  scroll-snap-align: start;
  background: #0b1220;
  box-shadow: var(--shadow-1);
  transition: box-shadow .3s var(--ease);
}
.ind-card:hover { box-shadow: var(--shadow-2); }
/* Desktop: size cards by viewport HEIGHT (not width) so the whole Industries
   section — heading + cards + controls — fits on one screen. Width follows the
   3:4 aspect ratio. Mobile keeps the width-driven sizing above. */
@media (min-width: 768px) {
  .ind-card { width: auto; height: clamp(320px, 42vh, 430px); }
}
.ind-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.02);
  transform: scale(1.02);
  transition: transform .6s var(--ease);
  -webkit-user-drag: none;
}
.ind-card:hover .ind-card__img { transform: scale(1.08); }
/* image-less industry cards (photo pending) — branded navy tile, centered copy */
.ind-card--soon { background: linear-gradient(158deg, #16233d 0%, #0d1626 62%, #0b1220 100%); }
.ind-card--soon::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(68% 58% at 82% 16%, rgba(56, 189, 248, .20), transparent 60%);
}
.ind-card--soon .ind-card__body {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
}
/* brand scrim: unifies mixed source tones + guarantees text legibility */
.ind-card__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,18,32,.10) 0%, rgba(11,18,32,.30) 42%, rgba(8,13,24,.92) 100%),
    linear-gradient(0deg, rgba(3,105,161,.20), rgba(3,105,161,0) 46%);
}
.ind-card__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2vw, 26px); }
.ind-card__title {
  color: #fff; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(18px, 2vw, 22px); margin-bottom: 8px;
}
.ind-card__desc {
  color: rgba(233, 238, 245, .9); font-size: 14.5px; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.ind-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 26px; }
.ind-dot {
  width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  /* ten dots in a flex row will shrink themselves under the 24px target minimum
     on a narrow viewport rather than wrap (WCAG 2.5.8) — pin the size and let
     .ind-dots wrap instead */
  flex: 0 0 auto;
}
.ind-dot::before {
  content: ""; height: 7px; width: 7px; border-radius: 999px;
  background: #CBD5E1; transition: width .25s var(--ease), background .25s var(--ease);
}
.ind-dot:hover::before { background: var(--secondary); }
.ind-dot.is-active::before { width: 22px; background: var(--accent); }

/* ============================================================
   HOW WE WORK (light)
   ============================================================ */
.diff-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.diff {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px;
  padding: 26px 6px;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: background .2s var(--ease);
}
.diff:hover { background: #fff; }
.diff .num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.diff h3 { font-size: 20px; margin-bottom: 6px; color: var(--primary); }
.diff p { color: var(--secondary); font-size: 16px; max-width: 720px; }
@media (max-width: 560px) {
  .diff { grid-template-columns: 1fr; gap: 8px; }
}

/* sectors strip */
.sectors-wrap { margin-top: clamp(48px, 6vw, 80px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--primary);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chip:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.chip svg { width: 15px; height: 15px; color: var(--accent); }

/* commercial band */
.commercial {
  margin-top: clamp(48px, 6vw, 80px);
  background: var(--primary);
  color: #E9EEF5;
  border-radius: 18px;
  padding: clamp(30px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}
.commercial::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: -120px;
  width: 380px;
  background: radial-gradient(closest-side, rgba(3, 105, 161, .5), transparent 70%);
  pointer-events: none;
}
.commercial h3 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; }
.commercial p { color: var(--white-60); max-width: 640px; }
.model-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; position: relative; z-index: 1; }
.model-pills span {
  border: 1px solid var(--white-14);
  background: var(--white-08);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: #fff;
}

/* ============================================================
   ABOUT + CONTACT (dark)
   ============================================================ */
.about-lead {
  max-width: 820px;
  color: var(--white-60);
  font-size: clamp(17px, 1.6vw, 20px);
}

.beliefs { margin-top: clamp(40px, 5vw, 64px); }
.belief {
  border: 1px solid var(--white-08);
  background: rgba(15, 23, 42, .5);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.belief h4 { color: #fff; font-size: 17.5px; margin-bottom: 8px; }
.belief p { color: var(--white-60); font-size: 15px; }

.founders { margin-top: clamp(48px, 6vw, 72px); }
.founder {
  border: 1px solid var(--white-08);
  background: rgba(15, 23, 42, .55);
  border-radius: 18px;
  padding: 30px 28px;
}
.founder .avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #0C4A6E);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
/* Founders — centered cards; tap the photo to reveal the bio (progressive disclosure) */
.founders { align-items: start; }              /* a card that expands won't stretch its sibling */
.founder { text-align: center; }
.founder-photo-btn {
  position: relative;
  display: inline-block;
  margin: 0 0 16px;
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.founder-photo {
  width: clamp(152px, 21vw, 204px);
  height: clamp(152px, 21vw, 204px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #C3C1C6;
  border: 2px solid var(--white-14);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.founder-photo-btn:hover .founder-photo,
.founder-photo-btn:focus-visible .founder-photo {
  transform: scale(1.03);
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 6px rgba(56, 189, 248, .16);
}
/* Was `outline: none`, leaving only the hover treatment to stand in for focus —
   an indicator identical to hover, and a faint one. Keep the glow, add a real
   ring (WCAG 2.4.7). */
.founder-photo-btn:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 5px;
  border-radius: 50%;
}
/* reveal affordance — a "+" badge that rotates into a "×" when open */
.founder-photo-hint {
  position: absolute; bottom: 8px; inset-inline-end: 8px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: #04121f; background: var(--accent-bright);
  box-shadow: 0 6px 18px rgba(2, 6, 16, .5);
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.founder-photo-hint svg { width: 22px; height: 22px; }
.founder-photo-btn:hover .founder-photo-hint { transform: scale(1.08); }
.founder.is-open .founder-photo-hint { transform: rotate(45deg); }
.founder-cue {
  margin-top: 10px;
  color: var(--accent-bright);
  font-family: var(--font-head); font-weight: 600;
  font-size: 13px; letter-spacing: .03em;
}
.founder.is-open .founder-cue { display: none; }
/* collapsible bio — height animated in JS (measured), smooth open/close */
.founder-bio {
  height: 0;
  overflow: hidden;
  transition: height .4s var(--ease);
  text-align: start;
}
.founder-bio__inner { padding-top: 20px; }
.founder-bio .tags { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .founder-bio { transition: none; }
  .founder-photo, .founder-photo-hint { transition: none; }
}
.founder h3 { color: #fff; font-size: 22px; }
.founder .role {
  color: var(--accent-bright);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  margin: 4px 0 14px;
}
.founder p.bio { color: var(--white-60); font-size: 15.5px; }
.founder p.bio + p.bio { margin-top: 12px; }
.founder .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.founder .tags span {
  font-size: 13px;
  font-family: var(--font-head);
  font-weight: 600;
  color: #CBD5E1;
  border: 1px solid var(--white-14);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ============================================================
   ABOUT → "Who Are We For?" audience cards + "Why Choose
   PERCIVAL?" value cards (replaced the old about-lead + beliefs)
   ============================================================ */
.audience { margin-top: 0; }
.aud-card {
  border: 1px solid var(--white-08);
  background: rgba(15, 23, 42, .5);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.aud-card h3 {
  color: #fff;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
}
.aud-card ul { list-style: none; display: grid; gap: 11px; }
.aud-card li {
  position: relative;
  padding-inline-start: 20px;
  color: var(--white-60);
  font-size: 15px;
  line-height: 1.5;
}
.aud-card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
}
/* light variant — the "Who Are We For" section is now a light block */
.light .aud-card { background: #fff; border-color: var(--border); box-shadow: var(--shadow-1); }
.light .aud-card h3 { color: var(--primary); }
.light .aud-card li { color: var(--secondary); }

.why-head { margin-top: clamp(56px, 8vw, 96px); margin-bottom: clamp(24px, 3vw, 36px); }
.why-card {
  border: 1px solid var(--white-08);
  background: rgba(15, 23, 42, .5);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.why-stat { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.why-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1;
  color: var(--accent-bright);
  letter-spacing: -0.01em;
}
.why-tag {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white-60);
}
.why-title { color: #fff; font-family: var(--font-head); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.why-kicker { color: var(--accent-bright); font-weight: 600; font-size: 14.5px; margin-bottom: 10px; }
.why-desc { color: var(--white-60); font-size: 15px; line-height: 1.55; }

/* FAQ */
.faq {
  margin-top: clamp(48px, 6vw, 80px);
  max-width: 860px;
}
.faq-title {
  color: #fff;
  font-size: clamp(21px, 2.4vw, 27px);
  margin-bottom: 18px;
}
.faq details {
  border: 1px solid var(--white-08);
  background: rgba(15, 23, 42, .5);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: rgba(56, 189, 248, .35); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  min-height: 56px;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16.5px;
  transition: background .2s var(--ease);
}
.faq summary:hover { background: rgba(15, 23, 42, .85); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--accent-bright);
  transition: transform .25s var(--ease);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p {
  padding: 0 20px 18px;
  color: var(--white-60);
  font-size: 15.5px;
  max-width: 720px;
}

/* contact */
.contact-band {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--white-08);
  padding-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .contact-band { grid-template-columns: 1fr; } }

.contact-band h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); margin-bottom: 14px; }
.contact-band .sub { color: var(--white-60); font-size: 17.5px; max-width: 520px; margin-bottom: 30px; }

.contact-list { display: grid; gap: 14px; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--white-08);
  background: rgba(15, 23, 42, .5);
  border-radius: 12px;
  padding: 16px 20px;
  min-height: 56px;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
a.contact-item:hover {
  border-color: rgba(56, 189, 248, .45);
  background: rgba(15, 23, 42, .8);
  transform: translateY(-2px);
}
.contact-item svg { width: 20px; height: 20px; color: var(--accent-bright); flex: 0 0 auto; }
.contact-item .label {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, .6);
  font-family: var(--font-head);
  font-weight: 600;
}
html[lang="he"] .contact-item .label { letter-spacing: .03em; }
.contact-item .value { color: #fff; font-weight: 600; font-size: 16.5px; direction: ltr; unicode-bidi: embed; }
.contact-item .value.bidi-ok { direction: inherit; }

/* footer */
.footer {
  border-top: 1px solid var(--white-08);
  margin-top: clamp(56px, 7vw, 90px);
  padding: 34px 0 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  color: rgba(203, 213, 225, .55);
  font-size: 14.5px;
}
.footer .brand { font-size: 16px; }
.footer .tagline { font-family: var(--font-head); font-weight: 500; }

/* Accessibility statement + copyright. The statement link is legally required to
   be reachable from every page (Israeli Equal Rights regs, reg. 35). It is
   underlined, not just tinted, because colour alone cannot mark a link sitting
   in a run of text (WCAG 1.4.1). */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}
.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(226, 232, 240, .9);       /* 12.6:1 on --ink */
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.footer-links a:hover { color: #fff; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px); /* blur-in entrance: settles into focus rather than just floating up */
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* word-revealed headings own their own blur — keep the block crisp */
.section-head.reveal, .contact-band .reveal { filter: none; }

/* ============================================================
   SECTION TRANSITIONS (Phase 3)
   ============================================================ */

/* 3.1 + 3.3 — sheet overlap: a light "page" is dragged up over the end of the
   dark stage, rounded top + an upward shadow that bridges dark -> light */
.sheet {
  position: relative;
  z-index: 2;
  margin-top: -36px;
  border-start-start-radius: 28px;
  border-start-end-radius: 28px;
  box-shadow: 0 -30px 60px -22px rgba(2, 6, 23, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* soft light "bleed" at the seam instead of a hard edge */
.sheet::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 96px;
  border-start-start-radius: 28px;
  border-start-end-radius: 28px;
  background: radial-gradient(140% 100% at 50% 0, rgba(56, 189, 248, .12), rgba(248, 250, 252, 0) 68%);
  pointer-events: none;
}
@media (max-width: 560px) { .sheet { margin-top: -24px; border-start-start-radius: 20px; border-start-end-radius: 20px; } }

/* 3.2 — word-by-word reveal for section headings (blur -> sharp + rise) */
.reveal-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(6px);
  transition: opacity .42s var(--ease), transform .42s var(--ease), filter .42s var(--ease);
  transition-delay: calc(var(--wi, 0) * 42ms);
  will-change: opacity, transform, filter;
}
.reveal-words.in .w { opacity: 1; transform: none; filter: blur(0); }

/* 3.4 — thin top progress line */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  will-change: transform;
}
html[dir="rtl"] .scroll-progress i { transform-origin: right center; }

/* 3.4 — five section dots with hover labels */
.scroll-dots {
  position: fixed;
  top: 50%;
  inset-inline-end: 16px;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  /* 15px, not 12px: with a 9px dot this puts 24px between dot centres, so the
     24px hit areas below tile without intersecting (WCAG 2.5.8 Target Size). */
  gap: 15px;
  align-items: center;
  padding: 13px 9px;
  background: rgba(11, 18, 32, .5);
  border: 1px solid var(--white-14);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.scroll-dots a {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(226, 232, 240, .4);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
/* The dot stays 9px so the rail keeps its scale, but the TARGET is 24px — a
   9x9 link is far under the minimum (WCAG 2.5.8). Transparent, so nothing
   changes visually. */
.scroll-dots a::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
html[dir="rtl"] .scroll-dots a::before { transform: translate(50%, -50%); }
.scroll-dots a:hover { background: rgba(226, 232, 240, .8); }
.scroll-dots a.active { background: var(--accent-bright); transform: scale(1.5); }
.scroll-dots .dot-label {
  position: absolute;
  inset-inline-end: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: rgba(11, 18, 32, .92);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--white-14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
html[dir="rtl"] .scroll-dots .dot-label { transform: translateY(-50%) translateX(-6px); }
.scroll-dots a:hover .dot-label,
.scroll-dots a:focus-visible .dot-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 860px) { .scroll-dots { display: none; } }

/* 3.5 — subtle heading parallax (transform only; JS-driven, gated) */
[data-parallax] { will-change: transform; }

/* ============================================================
   CARD EFFECTS (Phase 4 — vanilla ports of 21st.dev / MagicUI)
   ============================================================ */

/* 4.1 — Spotlight: a soft radial follows the cursor across the card */
.card, .market-card { position: relative; overflow: hidden; }
.card > *, .market-card > * { position: relative; z-index: 1; }
.card::before, .market-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(56, 189, 248, .16), transparent 62%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.market-card::before {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(56, 189, 248, .22), transparent 60%);
}
.market-card:hover::before { opacity: 1; }

/* 4.2 — Border Beam: a light travels the border ring (conic + ring mask) */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.border-beam, .faq details[open] { position: relative; }
.border-beam::before, .faq details[open]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--beam-angle, 0deg),
              transparent 0 66%, rgba(56, 189, 248, .85) 80%, #bae6fd 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: beam-rotate 6s linear infinite;
}
.faq details[open]::before { animation-duration: 7s; }
@keyframes beam-rotate { to { --beam-angle: 360deg; } }
/* graceful fallback where @property/animated angle is unsupported: static ring, no flicker */
@supports not (background: conic-gradient(from 0deg, red, red)) {
  .border-beam::before, .faq details[open]::before { display: none; }
}

/* ============================================================
   "Why Choose PERCIVAL?" — special animation
   Staggered scale-in entrance + premium hover (lift, rotating
   accent beam, stat glow). Individual `scale` is used for the
   entrance so it composes with the hover `transform` (lift).
   ============================================================ */
.why-card {
  position: relative;
  scale: 1;
  transition:
    transform .35s var(--ease),
    scale .6s var(--ease) var(--d, 0ms),
    border-color .35s var(--ease),
    background .35s var(--ease),
    box-shadow .35s var(--ease);
  will-change: transform, scale;
}
.why-card.reveal:not(.in) { scale: .93; }              /* enters scaled-down, settles on reveal */
.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, .4);
  background: rgba(15, 23, 42, .82);
  box-shadow: 0 26px 64px rgba(2, 6, 16, .55);
}
/* rotating accent beam: calm by default, glides in on hover */
.why-card.border-beam::before { opacity: 0; transition: opacity .45s var(--ease); }
.why-card.border-beam:hover::before { opacity: 1; }
/* the big stat lights up */
.why-num { transition: text-shadow .35s var(--ease), transform .35s var(--ease); }
.why-card:hover .why-num { text-shadow: 0 0 24px rgba(56, 189, 248, .55); transform: translateY(-1px); }
.why-card:hover .why-kicker { color: #bae6fd; }
@media (prefers-reduced-motion: reduce) {
  .why-card { scale: 1 !important; transition: border-color .2s, background .2s; }
  .why-card:hover { transform: none; }
  .why-num, .why-card:hover .why-num { transform: none; }
}

/* 4.3 — 3D tilt on founder cards (JS-driven; desktop + motion only) */
.founders { perspective: 1200px; }
.founder { transform-style: preserve-3d; will-change: transform; }

/* 4.5 — Bento grid for What We Do: Market Entry is the wide featured tile */
.services-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.services-bento > .card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(165deg, #ffffff 0%, #EEF4FB 100%);
  justify-content: flex-start;
}
.services-bento > .card:nth-child(1) h3 { font-size: clamp(22px, 2.2vw, 28px); }
.services-bento > .card:nth-child(2) { grid-column: span 2; }
@media (max-width: 900px) {
  .services-bento { grid-template-columns: repeat(2, 1fr); }
  .services-bento > .card:nth-child(1) { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 620px) {
  .services-bento { grid-template-columns: 1fr; }
  /* match the nth-child specificity so the featured tile stops spanning */
  .services-bento > .card:nth-child(1),
  .services-bento > .card:nth-child(2) { grid-column: auto; grid-row: auto; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .reveal-words .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .scroll-cue::after { animation: none; }
  .phrase { transform: none !important; }
  .marquee__track { animation: none !important; }
  .border-beam::before, .faq details[open]::before { animation: none !important; }
  [data-parallax] { transform: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   JOURNEY FILM (11-chapter continuous scroll) — additions
   ============================================================ */

/* screen-reader-only — the end card's text is baked into the frames */
.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;
}

/* sector tag chip, centered above a chapter statement */
.statement .kicker { margin: 0 auto 20px; }

/* service showcase statements woven into the film (name + description paragraph) */
.statement.svc h2 { font-size: clamp(26px, 4vw, 46px); }
.statement.svc p { max-width: 680px; font-size: clamp(15.5px, 1.5vw, 18px); margin-top: 14px; }

/* Glass "legibility panel" for service statements woven over busy footage.
   Shared by the Airport, Go-To-Market, and Investors chapters. Centered by
   default; slightly larger type than a bare svc statement. */
.statement.svc.has-panel {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3.4vw, 40px);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(6, 12, 24, .58) 0%, rgba(9, 15, 28, .82) 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 26px 70px rgba(2, 6, 16, .55);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.statement.svc.has-panel h2 { font-size: clamp(30px, 4.8vw, 56px); line-height: 1.08; }
.statement.svc.has-panel p {
  max-width: none;
  margin-top: 16px;
  font-size: clamp(16.5px, 1.7vw, 21px);
  color: rgba(255, 255, 255, .85);
}

/* Airport chapter (02) — same glass panel, but pinned to the bottom + the
   reading-start edge instead of centered. Logical props: LTR → bottom-LEFT,
   RTL (Hebrew) → bottom-RIGHT, with text aligned to match. Rules follow
   .has-panel so they win the specificity tie. */
.chapter--corner .statement-track { min-height: 72vh; }
.chapter--corner .statement-track .phrase {
  top: auto;
  bottom: 0;
  inset-inline: 0;
  transform: translateY(var(--ph-y, 22px)); /* keep the opacity-driven drift; drop the -50% centering */
}
/* pinned bottom-LEFT (both languages), kept narrow so it sits to the LEFT of
   the traveller walking through the centre of the terminal footage */
.chapter--corner .statement.svc {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  max-width: 380px;
}
@media (max-width: 767px) {
  .chapter--corner .statement-track { min-height: 64vh; }
  .chapter--corner .statement.svc { max-width: 100%; }
}

/* Everest finale — brand lockup + tagline + CTA (replaces the old baked-in end card).
   Soft radial scrim keeps the white lockup legible over the bright snow footage. */
.endcard-live {
  padding: clamp(30px, 5vw, 68px) clamp(24px, 6vw, 84px);
  border-radius: 28px;
  background: radial-gradient(72% 78% at 50% 50%, rgba(6, 12, 24, .74) 0%, rgba(6, 12, 24, .36) 56%, rgba(6, 12, 24, 0) 100%);
}
.endcard-logo {
  display: block; width: clamp(210px, 30vw, 340px); height: auto;
  margin: 0 auto; filter: drop-shadow(0 3px 20px rgba(4, 9, 20, .85));
}
.endcard-rule {
  display: block; width: 64px; height: 3px; border-radius: 2px;
  background: #F07E21; margin: clamp(16px, 2.2vw, 24px) auto;
}
/* scoped under .endcard-live to win over the generic `.statement p` rule */
.endcard-live .endcard-tagline {
  color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(19px, 2.4vw, 30px); line-height: 1.25;
  text-shadow: 0 2px 18px rgba(4, 9, 20, .9);
  max-width: 22em; margin: 0 auto clamp(24px, 3vw, 34px);
}
html[lang="he"] .endcard-live .endcard-tagline { max-width: 20em; }

/* --- chapters: absolutely stacked in the one sticky stage, one shown at a time --- */
.scrub-film .chapter { position: absolute; inset: 0; display: none; }
.scrub-film .chapter.active { display: block; }
.scrub-film .chapter > .container { position: relative; z-index: 2; height: 100%; display: flex; }
.scrub-film .chapter:not(.chapter--hero) > .container { align-items: center; justify-content: center; }
.scrub-film .chapter--hero > .container { align-items: flex-end; }

/* end card is contain-fit; letterbox against the card's exact gradient (seamless) */
.scrub-film.at-endcard .stage {
  background: radial-gradient(120% 130% at 50% 42%, #0F172A 0%, #0B1220 62%, #05080F 100%);
}

/* contact is its own dark section now (no dragged sheet) — trim the legacy top gap */
.contact-band--top { margin-top: 0; border-top: 0; padding-top: 0; }

/* --- reduced motion: the film collapses to a stack of static posters --- */
.scrub-film.is-static { height: auto; }
.scrub-film.is-static .stage { position: relative; height: auto; min-height: 0; display: block; overflow: visible; }
.scrub-film.is-static canvas,
.scrub-film.is-static .veil,
.scrub-film.is-static .scroll-cue { display: none; }
.scrub-film.is-static .chapter { position: relative; display: flex; min-height: 84vh; overflow: hidden; }
.scrub-film.is-static .chapter .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.scrub-film.is-static .chapter--endcard .poster { object-fit: contain; background: #0B1220; }
.scrub-film.is-static .chapter::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,9,20,.45) 0%, rgba(4,9,20,.25) 45%, rgba(11,18,32,.85) 100%);
}
.scrub-film.is-static .chapter > .container { z-index: 2; }
.scrub-film.is-static .phrase { position: relative; }

/* ============================================================
   Founder LinkedIn link (in About founder cards)
   ============================================================ */
.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 7px 14px;
  border: 1px solid var(--white-14);
  border-radius: 999px;
  color: var(--white-60);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.founder-linkedin svg { width: 16px; height: 16px; flex: 0 0 auto; }
.founder-linkedin:hover,
.founder-linkedin:focus-visible {
  color: #fff;
  border-color: var(--accent-bright);
  background: rgba(56, 189, 248, .12);
  transform: translateY(-1px);
}

/* ============================================================
   Contact — simplified single-column CTA
   ============================================================ */
.contact-cta { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.contact-cta > .reveal { max-width: 640px; }
.contact-cta .sub { margin-left: auto; margin-right: auto; }
.contact-cta .btn { margin-left: auto; margin-right: auto; }

/* ============================================================
   Lead-capture modal (native <dialog>)
   ============================================================ */
.lead-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  /* `right: auto` is LOAD-BEARING, do not remove.
     The UA stylesheet for <dialog> sets `left: 0; right: 0`. With left, right
     AND width all non-auto the box is over-constrained, and the spec resolves
     that by dropping one of them — `right` in LTR but **`left` in RTL**. So in
     Hebrew the dialog anchored to the right edge and the translate(-50%) then
     dragged it off the left side of the screen: at a 390px viewport it sat at
     left:-135 / right:215, i.e. half of it off-screen. */
  right: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  /* dvh so the whole form (incl. the submit button) fits the *visible* area on
     a phone, where 100vh is taller than the screen while the URL bar is shown */
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid var(--white-14);
  border-radius: 18px;
  background: #0E1626;
  color: #fff;
  box-shadow: 0 24px 80px rgba(2, 6, 23, .6);
  overflow: visible;
}
.lead-modal::backdrop {
  background: rgba(4, 9, 20, .66);
  backdrop-filter: blur(6px);
}
.lead-modal[open] .lead-form { animation: leadIn .32s var(--ease); }
@keyframes leadIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-modal[open] .lead-form { animation: none; }
}

.lead-form {
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);   /* match the dialog; see the note above */
  overflow-y: auto;
}
.lead-form .eyebrow { color: var(--accent-bright); margin-bottom: 8px; }
.lead-form h3 {
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.15;
  margin-bottom: 6px;
}
.lead-sub { color: var(--white-60); font-size: 15px; margin-bottom: 22px; }

.lead-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--white-14);
  border-radius: 10px;
  background: transparent;
  color: var(--white-60);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.lead-close svg { width: 20px; height: 20px; }
.lead-close:hover, .lead-close:focus-visible { color: #fff; border-color: var(--accent-bright); background: rgba(56,189,248,.1); }

.lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field--full { grid-column: 1 / -1; }
@media (max-width: 480px) { .lead-grid { grid-template-columns: 1fr; } }

.lead-field label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white-60);
}
.lead-field input,
.lead-field textarea {
  width: 100%;
  padding: 12px 14px;
  /* A field's border IS the affordance that identifies it, so it must clear 3:1
     (WCAG 1.4.11). --white-14 measured 1.51:1 on the #0E1626 modal; --field-line
     is 3.6:1. Buttons keep the fainter border — their visible text identifies
     them, so their border is decorative. */
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15.5px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.lead-field textarea { resize: vertical; min-height: 96px; }
.lead-field input::placeholder,
.lead-field textarea::placeholder { color: rgba(226,232,240,.4); }
.lead-field input:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: rgba(56, 189, 248, .06);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.lead-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.lead-submit {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
  position: relative;
}
.lead-submit[disabled] { opacity: .7; cursor: progress; }
.lead-submit__spin { display: none; width: 16px; height: 16px; }
.is-sending .lead-submit__label { opacity: .55; }
.is-sending .lead-submit__spin {
  display: inline-block;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: leadSpin .7s linear infinite;
}
@keyframes leadSpin { to { transform: rotate(360deg); } }

.lead-status {
  margin-top: 14px;
  font-size: 14.5px;
  min-height: 1.2em;
  text-align: center;
}
.lead-status.is-ok { color: #4ADE80; }
.lead-status.is-error { color: #F87171; }

/* ------------------------------------------------------------
   Lead-submit confirmation banner
   Top-centre, because the bottom of the viewport is taken: the cookie bar spans
   it at z-index 380 and the accessibility launcher sits in the corner at 400.
   z-index 390 therefore clears the cookie bar but deliberately stays UNDER the
   accessibility panel (401), which is a user-invoked overlay and should win.
   The entrance is an `animation`, not a transition, so simply un-hiding the
   element plays it — no second "is-open" class that a throttled rAF could miss.
   ------------------------------------------------------------ */
.lead-toast {
  position: fixed;
  top: calc(var(--nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 390;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(560px, calc(100vw - 32px));
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(74, 222, 128, .38);
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 18px 48px rgba(4, 9, 20, .55);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  /* No fill-mode on purpose. With `both` the element holds the keyframe's
     opacity:0 whenever the animation has not run, so anything that suppresses
     animations leaves an invisible banner. Unfilled, the base styles here are
     the visible state and the animation is pure decoration on top. */
  animation: leadToastIn .34s var(--ease);
}
/* .lead-toast sets display:flex, which beats the UA's [hidden]{display:none} —
   without this rule the banner would be visible on page load. */
.lead-toast[hidden] { display: none; }
@keyframes leadToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lead-toast { animation: none; }
}
.lead-toast__icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: #4ADE80;
  margin-top: 1px;
}
.lead-toast__icon svg { width: 100%; height: 100%; }
.lead-toast__text { flex: 1 1 auto; min-width: 0; }
.lead-toast__title {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin-bottom: 3px;
}
.lead-toast__body {
  display: block;
  /* opaque rather than var(--white-60): this sits on a translucent surface, and
     stacking two alphas dropped the body text under 4.5:1 */
  color: #E9EEF5;
  font-size: 14.5px;
  line-height: 1.5;
}
.lead-toast__close {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  margin: -4px -6px 0 0;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--white-60);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lead-toast__close:hover { background: rgba(255,255,255,.08); color: #fff; }
.lead-toast__close svg { width: 17px; height: 17px; }
/* RTL: the close button flips to the reading-end side on its own via the flex
   order, but the negative margin has to follow it. */
html[dir="rtl"] .lead-toast__close { margin: -4px 0 0 -6px; }
@media (max-width: 560px) {
  .lead-toast { top: calc(var(--nav-h) + 8px); padding: 14px 15px; gap: 11px; }
  .lead-toast__title { font-size: 15px; }
  .lead-toast__body { font-size: 13.5px; }
}

/* ============================================================
   ACCESSIBILITY TOOLBAR  (js/a11y-widget.js)
   A user-preference panel, NOT a substitute for the remediation in this file —
   the site already meets WCAG 2.1 AA on its own. Everything here is layered on
   top via classes and custom properties on <html>, so nothing in the base
   design depends on it.
   ============================================================ */

:root {
  --a11y-fab-offset: 0px;             /* raised by JS while the cookie bar shows */
  --a11y-word: 0em;
  --a11y-letter: 0em;
  --a11y-line: 1.6;
}

/* ---------- the launcher ---------- */
.a11y-fab {
  position: fixed;
  inset-inline-end: 16px;
  bottom: calc(20px + var(--a11y-fab-offset) + env(safe-area-inset-bottom, 0px));
  z-index: 400;                       /* over .skip-link (300) and the nav (100) */
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .55);
  transition: background .2s var(--ease), transform .2s var(--ease), bottom .25s var(--ease);
}
.a11y-fab:hover { background: var(--accent-strong); transform: translateY(-2px); }
.a11y-fab svg { width: 28px; height: 28px; }

/* ---------- the panel ---------- */
.a11y-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 401;
  width: min(400px, 100vw);
  display: flex; flex-direction: column;
  background: #0B1220;
  border-inline-start: 1px solid var(--white-14);
  box-shadow: -20px 0 60px rgba(2, 6, 23, .6);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s var(--ease), visibility 0s linear .28s;
}
html[dir="rtl"] .a11y-panel { transform: translateX(-100%); }
.a11y-panel.is-open,
/* `html[dir="rtl"] .a11y-panel` scores (0,2,1) and would otherwise outrank a
   bare `.a11y-panel.is-open` at (0,2,0), leaving the panel parked off-screen in
   Hebrew. The RTL open state has to be stated at matching specificity. */
html[dir="rtl"] .a11y-panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform .28s var(--ease), visibility 0s;
}
.a11y-scrim {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4, 9, 20, .6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.a11y-scrim[hidden] { display: none; }

.a11y-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  background: var(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  flex: 0 0 auto;
}
.a11y-panel__head h2 {
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 19px;
  letter-spacing: .02em; margin: 0;
}
.a11y-close {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px; color: #fff;
  transition: background .2s var(--ease);
}
.a11y-close:hover { background: rgba(255, 255, 255, .18); }
.a11y-close svg { width: 22px; height: 22px; }

.a11y-panel__body { overflow-y: auto; padding: 18px; flex: 1 1 auto; }

/* ---------- toggle tiles ---------- */
.a11y-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 400px) { .a11y-grid { grid-template-columns: repeat(2, 1fr); } }
.a11y-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 9px; padding: 14px 8px 12px; min-height: 96px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--white-14);
  border-radius: 14px;
  color: #E9EEF5;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; line-height: 1.25;
  text-align: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.a11y-tile svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--accent-bright); }
.a11y-tile:hover { background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .5); }
/* state is carried by fill + border + a check glyph, never colour alone (1.4.1) */
.a11y-tile[aria-pressed="true"] {
  background: var(--accent-bright); border-color: var(--accent-bright); color: #04121f;
}
.a11y-tile[aria-pressed="true"] svg { color: #04121f; }
.a11y-tile__on { display: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.a11y-tile[aria-pressed="true"] .a11y-tile__on { display: block; }
/* the motion switch spans the row — it is the explicit 2.2.2 Pause/Stop/Hide
   control, so it should not read as one option among six */
.a11y-tile--wide {
  grid-column: 1 / -1;
  flex-direction: row; justify-content: center; gap: 12px;
  min-height: 56px; font-size: 14px;
}

.a11y-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- slider rows ---------- */
.a11y-group { margin-top: 26px; }
.a11y-group > h3 {
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 14.5px;
  text-align: center; margin-bottom: 12px;
}
.a11y-row { display: flex; align-items: center; gap: 10px; }
.a11y-step {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--white-14);
  border-radius: 999px; color: #fff; font-size: 22px; line-height: 1;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.a11y-step:hover { background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .5); }
.a11y-step[disabled] { opacity: .4; cursor: default; }
.a11y-step[disabled]:hover { background: rgba(255, 255, 255, .05); border-color: var(--white-14); }

/* a real range input: native keyboard support (arrows / Home / End) and correct
   AT semantics, with the value mirrored in the bubble below */
.a11y-range { flex: 1 1 auto; min-width: 0; }
.a11y-range input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px;          /* full 44px target, thin visible track */
  background: transparent; margin: 0; display: block;
}
.a11y-range input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
}
.a11y-range input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
}
.a11y-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -8px;
  border-radius: 50%; background: #fff; border: 2px solid var(--accent-strong);
  box-shadow: 0 2px 8px rgba(2, 6, 23, .5);
}
.a11y-range input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent-strong);
}
.a11y-out {
  display: block; margin-top: 2px; text-align: center;
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.a11y-hint {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 2px;
  color: rgba(226, 232, 240, .8); font-size: 12px;
}

.a11y-panel__foot {
  flex: 0 0 auto; padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--white-08);
  display: grid; gap: 10px;
}
.a11y-reset {
  min-height: 44px; padding: 10px 18px;
  background: transparent; border: 1px solid var(--white-14); border-radius: 10px;
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 15px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.a11y-reset:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); }
.a11y-panel__foot a {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: #9FDCFB; text-decoration: underline; text-underline-offset: 3px; font-size: 14.5px;
}
.a11y-panel__foot a:hover { color: #fff; }

/* ============================================================
   ACCESSIBILITY TOOLBAR — the effects themselves
   ============================================================ */

/* -- text size. JS stamps each text node's ORIGINAL computed px into
      --a11y-el-fs, so scaling multiplies that instead of compounding off the
      previous value (which is what makes naive font-size widgets drift). -- */
html.a11y-fs [data-a11y-fs] {
  font-size: calc(var(--a11y-el-fs) * var(--a11y-fs, 1)) !important;
}

/* -- spacing. WCAG 1.4.12 asks that the page survive exactly this kind of
      user-imposed spacing, so these are deliberately unconditional. -- */
html.a11y-space body :is(p, li, span, a, h1, h2, h3, h4, h5, h6, button, label, td, th, div, strong, b, em, summary) {
  word-spacing: var(--a11y-word) !important;
  letter-spacing: var(--a11y-letter) !important;
}
html.a11y-line body :is(p, li, span, a, h1, h2, h3, h4, h5, h6, label, td, th, summary) {
  line-height: var(--a11y-line) !important;
}

/* WCAG 1.4.12 says user-imposed spacing must not cost content. The industry
   cards clamp their description to four lines inside a fixed-ratio photo tile,
   so extra spacing pushed the text out of a box that cannot grow — measured 244px
   of text in a 139px window. In spacing mode the tile stops being a photo with
   an overlay and becomes image-above-text, which has no ceiling. */
html:is(.a11y-space, .a11y-line) .ind-card {
  aspect-ratio: auto;
  height: auto !important;
  display: flex;
  flex-direction: column;
}
html:is(.a11y-space, .a11y-line) .ind-card__img {
  position: relative;
  height: 190px;
  flex: 0 0 auto;
  transform: none;
}
html:is(.a11y-space, .a11y-line) .ind-card__scrim { display: none; }
html:is(.a11y-space, .a11y-line) .ind-card__body {
  position: relative;
  flex: 1 1 auto;
  background: var(--ink);
}
html:is(.a11y-space, .a11y-line) .ind-card__desc {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* -- filters. Applied to <html>: `filter` on the ROOT element does not create a
      containing block for fixed descendants (the initial containing block still
      wins), so the fixed nav and the sticky film survive. Verified in-browser.
      The widget itself is re-inverted so its own controls stay readable. -- */
html.a11y-grayscale { filter: grayscale(1); }
html.a11y-mono { filter: grayscale(1) contrast(1.35); }
html.a11y-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert .a11y-panel,
html.a11y-invert .a11y-fab,
html.a11y-invert .a11y-scrim { filter: invert(1) hue-rotate(180deg); }
/* photographs re-inverted so faces and landscapes do not turn into negatives */
html.a11y-invert :is(img, canvas, video) { filter: invert(1) hue-rotate(180deg); }

/* -- high contrast: token overrides rather than a blunt filter, which is only
      possible because the whole design is tokenised. Yellow on black is the
      convention users of this mode expect. -- */
html.a11y-contrast {
  --ink: #000000;
  --ink-2: #000000;
  --primary: #000000;
  --bg-light: #FFFFFF;
  --fg: #000000;
  --secondary: #1A1A1A;
  --muted: #FFFFFF;
  --border: #000000;
  --accent: #0B3F8F;
  --accent-strong: #062A63;
  --accent-bright: #FFE500;
  --white-60: #FFFFFF;
  --white-14: rgba(255, 255, 255, .7);
  --white-08: rgba(255, 255, 255, .55);
  --field-line: #FFFFFF;
}
html.a11y-contrast body,
html.a11y-contrast .on-dark,
html.a11y-contrast .on-dark.about-band,
html.a11y-contrast .en-section--tint,
html.a11y-contrast .cs-section--tint { background: #000 !important; color: #fff !important; }
html.a11y-contrast .light,
html.a11y-contrast .sheet { background: #fff !important; color: #000 !important; }
html.a11y-contrast :is(.on-dark, .en-section, .cs-section, .ac-doc) :is(p, li, span, div, h1, h2, h3, h4, b, strong) { color: #fff !important; }
html.a11y-contrast :is(.light, .sheet) :is(p, li, span, div, h1, h2, h3, h4, b, strong) { color: #000 !important; }
html.a11y-contrast :is(.card, .aud-card, .why-card, .belief, .founder, .market-card, .en-card, .cs-card,
                       .cs-lead-tile, .en-stat, .cs-step, .en-step, .contact-item, .faq details, .ac-contact) {
  background: #000 !important; border-color: #fff !important; box-shadow: none !important;
}
html.a11y-contrast :is(.light) :is(.card, .aud-card, .chip) { background: #fff !important; border-color: #000 !important; }
/* the eyebrow / accent text becomes the high-contrast highlight colour */
html.a11y-contrast .on-dark :is(.eyebrow, .why-num, .why-kicker, .cs-num) { color: #FFE500 !important; }
html.a11y-contrast :is(.btn-primary) { background: #FFE500 !important; color: #000 !important; border-color: #000 !important; }
html.a11y-contrast :is(.btn-ghost) { background: #000 !important; color: #fff !important; border-color: #fff !important; }
/* decorative washes only lower contrast in this mode */
html.a11y-contrast :is(.cs-hero__fx, .ind-card__scrim, .mg-card__name, .mg-name, .commercial::after) { display: none !important; }
html.a11y-contrast :is(.card, .market-card)::before { display: none !important; }
/* text sitting on photography gets a solid plate instead of a gradient */
html.a11y-contrast :is(.ind-card__body, .mg-caption) { background: #000 !important; }
html.a11y-contrast .ind-card__desc, html.a11y-contrast .ind-card__title { color: #fff !important; }
/* gradient-clipped numerals cannot be recoloured — make them solid */
html.a11y-contrast .en-stat b {
  background: none !important; -webkit-text-fill-color: #FFE500 !important; color: #FFE500 !important;
}
html.a11y-contrast .cs-num { -webkit-text-stroke: 0 !important; color: #FFE500 !important; }

/* -- highlight links: underline + a visible box, so links are identifiable
      without relying on colour (1.4.1) -- */
html.a11y-links :is(main, footer) a {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 2px !important;
  outline: 2px dashed currentColor !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* -- readable font: Arial covers both Latin and Hebrew, so one stack serves
      both languages -- */
html.a11y-readable body,
html.a11y-readable :is(h1, h2, h3, h4, h5, h6, p, li, a, span, button, input, textarea, label, div, summary, b, strong) {
  font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
  font-weight: normal;
}
html.a11y-readable :is(h1, h2, h3, h4, h5, h6, .btn, b, strong) { font-weight: 700 !important; }

/* -- stop motion: the same suppression prefers-reduced-motion applies, but on
      demand. This is the 2.2.2 Pause/Stop/Hide control in explicit form. -- */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.a11y-no-motion { scroll-behavior: auto !important; }
html.a11y-no-motion .scrub-film canvas { transition: none !important; }
/* the panel's own open/close must stay usable, not instant-snap to invisible */
html.a11y-no-motion .a11y-panel { transition: visibility 0s !important; }

/* ============================================================
   COOKIE CONSENT  (js/cookie-consent.js)
   ============================================================ */
.pv-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 380;                       /* under the a11y panel, over page chrome */
  background: rgba(9, 15, 28, .97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--white-14);
  box-shadow: 0 -18px 44px rgba(2, 6, 23, .5);
  padding: clamp(16px, 2.4vw, 24px) 0 calc(clamp(16px, 2.4vw, 24px) + env(safe-area-inset-bottom, 0px));
}
.pv-cookie[hidden] { display: none; }
.pv-cookie__inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
}
.pv-cookie__text { flex: 1 1 320px; min-width: 0; }
.pv-cookie__text h2 {
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 17px; margin-bottom: 6px;
}
.pv-cookie__text p { color: var(--white-60); font-size: 15px; line-height: 1.55; margin: 0; }
.pv-cookie__text a { color: #9FDCFB; text-decoration: underline; text-underline-offset: 3px; }
.pv-cookie__text a:hover { color: #fff; }

/* Accept and Reject are deliberately the SAME size, weight and prominence.
   A reject path that is harder to find than accept is not valid consent under
   the GDPR (EDPB guidance on dark patterns). */
.pv-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.pv-cookie__actions .btn { min-height: 48px; padding: 12px 22px; font-size: 15px; }
.pv-cookie__actions .btn-equal {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.pv-cookie__actions .btn-equal:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.pv-cookie__actions .btn-plain {
  background: transparent; color: #fff; border-color: var(--white-14);
}
.pv-cookie__actions .btn-plain:hover { background: var(--white-08); border-color: rgba(255,255,255,.45); }
/* On a phone, stacking three full-width buttons made the bar ~378px tall — half
   the screen. Accept and Reject share the first row (still identical to each
   other, which is what consent validity turns on); Manage takes the row below. */
@media (max-width: 620px) {
  .pv-cookie { padding-top: 14px; }
  .pv-cookie__actions { width: 100%; gap: 8px; }
  .pv-cookie__actions .btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding-inline: 10px; }
  .pv-cookie__actions .btn-plain { flex: 1 1 100%; min-height: 44px; }
  .pv-cookie__text p { font-size: 14px; }
}

/* ---------- preferences dialog ---------- */
.pv-cookie-modal {
  position: fixed; top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%);
  margin: 0; padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  border: 1px solid var(--white-14); border-radius: 18px;
  background: #0E1626; color: #fff;
  box-shadow: 0 24px 80px rgba(2, 6, 23, .6);
  overflow: hidden;
}
.pv-cookie-modal::backdrop { background: rgba(4, 9, 20, .68); backdrop-filter: blur(6px); }
.pv-cookie-modal__in { padding: clamp(22px, 3.4vw, 32px); max-height: calc(100dvh - 40px); overflow-y: auto; }
.pv-cookie-modal h2 {
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 3vw, 25px); margin-bottom: 8px;
}
.pv-cookie-modal > .pv-cookie-modal__in > p { color: var(--white-60); font-size: 15px; margin-bottom: 20px; }

.pv-cat { border: 1px solid var(--white-08); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; background: rgba(255,255,255,.03); }
.pv-cat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pv-cat__top label { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.pv-cat p { color: var(--white-60); font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
.pv-cat__lock {
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-bright); flex: 0 0 auto; padding-top: 4px;
}
html[lang="he"] .pv-cat__lock { letter-spacing: .02em; }

/* switch — 44px target, state shown by knob POSITION as well as colour */
.pv-switch { position: relative; flex: 0 0 auto; width: 56px; height: 44px; }
.pv-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pv-switch__ui {
  position: absolute; top: 50%; inset-inline-start: 0; transform: translateY(-50%);
  width: 56px; height: 30px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid var(--field-line);
  transition: background .2s var(--ease); pointer-events: none;
}
.pv-switch__ui::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  transition: transform .2s var(--ease);
}
.pv-switch input:checked + .pv-switch__ui { background: var(--accent-bright); border-color: var(--accent-bright); }
.pv-switch input:checked + .pv-switch__ui::after { transform: translateX(26px); background: #04121f; }
html[dir="rtl"] .pv-switch input:checked + .pv-switch__ui::after { transform: translateX(-26px); }
.pv-switch input:focus-visible + .pv-switch__ui { outline: 3px solid var(--accent-bright); outline-offset: 3px; }

.pv-cookie-modal__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pv-cookie-modal__foot .btn { flex: 1 1 auto; min-height: 48px; justify-content: center; }


/* ============================================================
   LEGAL / DOCUMENT PAGES  (.ac-*)
   Shared by accessibility.html, privacy.html and terms.html — one readable
   prose column, no reveal animations, no decorative motion. Lived inline in
   accessibility.html until the privacy policy and terms of use were added and
   three pages needed the same rules.
   ============================================================ */
  /* ---- Accessibility statement — a document, not a marketing page.
     One readable prose column, no reveal animations, no decorative motion.
     Built on the site's tokens so it still reads as PERCIVAL. ---- */
  .ac-page { background: var(--ink); }

  .ac-wrap { padding: calc(var(--nav-h) + 56px) 0 clamp(64px, 8vw, 100px); }
  .ac-doc { max-width: 74ch; }

  .ac-doc h1 {
    color: #fff; font-family: var(--font-head); font-weight: 800;
    font-size: clamp(30px, 4.6vw, 50px); line-height: 1.08; margin: 12px 0 20px;
    letter-spacing: -.015em;
  }
  html[lang="he"] .ac-doc h1 { letter-spacing: 0; }
  .ac-doc h2 {
    color: #fff; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(21px, 2.5vw, 27px); line-height: 1.2;
    margin: clamp(40px, 5vw, 56px) 0 14px;
    padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--white-08);
  }
  .ac-doc h3 {
    color: #fff; font-family: var(--font-head); font-weight: 700;
    font-size: 17.5px; margin: 26px 0 8px;
  }
  /* 17.5px at 1.75 line-height, capped at ~74ch — comfortably inside the
     60–75 character measure that keeps long prose readable */
  .ac-doc p, .ac-doc li {
    color: var(--white-60); font-size: 17.5px; line-height: 1.75;
  }
  .ac-doc p { margin-bottom: 16px; }
  .ac-doc p.ac-lead { color: #E9EEF5; font-size: clamp(18px, 2vw, 21px); }

  .ac-doc ul { list-style: none; display: grid; gap: 11px; margin: 6px 0 18px; }
  .ac-doc ul li { position: relative; padding-inline-start: 24px; }
  .ac-doc ul li::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 12px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright);
  }

  .ac-doc a:not(.btn) {
    color: #9FDCFB;                     /* 9.6:1 on --ink */
    text-decoration: underline; text-underline-offset: 3px;
  }
  .ac-doc a:not(.btn):hover { color: #fff; }

  /* contact block */
  .ac-contact {
    margin-top: 22px; display: grid; gap: 12px;
    border: 1px solid var(--white-14); border-radius: 16px;
    padding: clamp(20px, 3vw, 28px); background: rgba(15, 23, 42, .5);
  }
  .ac-contact__row { display: flex; align-items: center; gap: 14px; min-height: 44px; }
  .ac-contact__row svg { width: 20px; height: 20px; color: var(--accent-bright); flex: 0 0 auto; }
  .ac-contact .label {
    font-family: var(--font-head); font-weight: 600; font-size: 12.5px;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(203, 213, 225, .75);
    display: block; margin-bottom: 2px;
  }
  html[lang="he"] .ac-contact .label { letter-spacing: .03em; }
  .ac-contact .value { color: #fff; font-weight: 600; font-size: 16.5px; }
  /* phone + email are LTR strings even in a Hebrew page */
  .ac-contact .value.ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

  .ac-meta {
    margin-top: clamp(40px, 5vw, 56px); padding-top: 24px;
    border-top: 1px solid var(--white-08);
    color: rgba(203, 213, 225, .8); font-size: 15.5px; line-height: 1.7;
  }
  .ac-meta strong { color: #fff; font-weight: 700; }

  .ac-back { margin-top: clamp(36px, 5vw, 48px); }

/* version line under the H1 of a legal document */
.ac-doc p.ac-doc__ver {
  color: rgba(203, 213, 225, .75); font-size: 14.5px; letter-spacing: .01em;
  margin: -8px 0 22px;
}

/* Data table inside a legal document (the storage table in the privacy policy).
   Wrapped in .ac-table-wrap so a narrow phone scrolls the TABLE horizontally
   instead of the whole page — the one place the site allows an x-scroll. */
.ac-table-wrap { overflow-x: auto; margin: 6px 0 18px; }
.ac-table {
  width: 100%; border-collapse: collapse; min-width: 460px;
  font-size: 16px; color: var(--white-60);
}
.ac-table th, .ac-table td {
  text-align: start; vertical-align: top; padding: 11px 14px;
  border-bottom: 1px solid var(--white-08);
}
.ac-table th {
  color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  border-bottom-color: var(--white-14);
}
html[lang="he"] .ac-table th { letter-spacing: .02em; }
.ac-table tr:last-child td { border-bottom: 0; }
.ac-table code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 14px; color: var(--accent-bright);
  background: rgba(56, 189, 248, .08); padding: 2px 6px; border-radius: 5px;
  direction: ltr; unicode-bidi: embed; display: inline-block;
}