/* ==========================================================================
   SMART FRAME PRODUCTION — Design System
   Style: Cinematic Dark Editorial  |  Direction: RTL (Arabic first)
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted — no external requests) ---------------- */
/* Thmanyah Sans covers Arabic + tashkeel + Latin + both digit sets,
   so it is the only family the site needs. Cuts: 300/400/500/700/900. */
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyahsans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyahsans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyahsans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyahsans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyahsans-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Surfaces — light theme */
  --bg:            #FFFFFF;
  --bg-alt:        #F5F6FA;
  --surface:       #FFFFFF;
  --surface-2:     #F8F9FC;
  --surface-3:     #EEF0F7;
  /* photo/video wells stay dark on purpose — they stand in for imagery */
  --well:          #12151E;

  /* Lines */
  --line:          #E5E7EF;
  --line-strong:   #CFD3E0;

  /* Text */
  --fg:            #14161D;
  --fg-muted:      #565D6E;
  /* darkened so they still clear 4.5:1 where the card blob tints the surface */
  --fg-dim:        #5A5E6E;
  /* copy sitting on the dark wells and the indigo CTA panel */
  --fg-on-brand:   #EEF0F8;

  /* Brand — primary indigo from the SmartFrame identity */
  --brand:         #42449C;
  --brand-hi:      #4E51B8;
  --brand-grad:    linear-gradient(100deg, #41449A 0%, #473E96 16%, #56318D 62%, #5C2D8A 100%);
  /* the brand indigo doubles as the accent on white — 8.3:1 */
  --accent:        #42449C;
  --accent-bright: #32347E;   /* hover: goes darker on a light ground */
  /* softer indigo for small labels — still ≥4.5:1 on white */
  --accent-deep:   #5A5CB8;
  --accent-glow:   rgba(66, 68, 156, 0.14);
  /* light indigo, only for marks sitting on the dark wells */
  --accent-on-dark: #9A9CEB;

  /* Semantic */
  --danger:        #B12E37;
  --success:       #1B6D49;

  /* Type */
  --font-display: "Thmanyah Sans", system-ui, sans-serif;
  --font-body:    "Thmanyah Sans", system-ui, sans-serif;
  --font-latin:   "Thmanyah Sans", system-ui, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.3rem);
  --fs-xl:   clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 3.4vw + 1.1rem, 3.5rem);
  --fs-4xl:  clamp(2.625rem, 3.5vw + 1.3rem, 4.75rem);

  /* Space (8pt rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(20, 22, 29, 0.05), 0 1px 1px rgba(20, 22, 29, 0.04);
  --sh-2: 0 10px 28px -12px rgba(20, 22, 29, 0.16);
  --sh-3: 0 24px 56px -20px rgba(20, 22, 29, 0.22);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms;
  --t-mid: 260ms;
  --t-slow: 420ms;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --nav-h: 76px;

  /* Z-scale */
  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 60;
  --z-overlay: 80;
  --z-top: 100;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* Arabic needs generous leading — tashkeel and descenders collide below ~1.4 */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

/* ---------- 3. Utilities ------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--line { border-top: 1px solid var(--line); }

.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;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-4);
  z-index: var(--z-top);
  background: var(--accent);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-md);
  font-weight: 700;
  transition: inset-block-start var(--t-fast) var(--ease-out);
}
.skip-link:focus { inset-block-start: var(--space-4); }

.latin {
  font-family: var(--font-latin);
  font-feature-settings: "tnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.num { font-variant-numeric: tabular-nums; }

/* ---------- 4. Typographic blocks ---------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  background: linear-gradient(to left, var(--accent), transparent);
}

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

.section-title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
}

.section-lede {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  line-height: 1.85;
  max-width: 58ch;
}
.section-head--center .section-lede { margin-inline: auto; }

.text-accent { color: var(--accent); }

/* Painted as a background rather than an ::after so that a phrase wrapping
   onto two lines gets an underline per line, not one bar across the block.
   The bottom padding is what clears the deep Arabic descenders (ى ج ز). */
.underline-brush {
  display: inline;
  color: var(--accent);
  padding-block-end: 0.2em;
  background-image: linear-gradient(90deg,
    rgba(66, 68, 156, 0) 0%,
    rgba(66, 68, 156, 0.75) 12%,
    rgba(66, 68, 156, 0.75) 88%,
    rgba(66, 68, 156, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.085em;
  background-position: 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(0.975); }
.btn .ico { inline-size: 18px; block-size: 18px; flex: none; }

.btn--primary {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 6px 20px -8px rgba(66, 68, 156, 0.5);
}
.btn--primary:hover {
  background: #363A88;
  box-shadow: 0 10px 26px -8px rgba(66, 68, 156, 0.65);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--fg);
  background: #FFFFFF;
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(66, 68, 156, 0.06);
}

.btn--solid-dark {
  background: var(--fg);
  color: #FFFFFF;
  border-color: var(--line-strong);
}
.btn--solid-dark:hover { border-color: var(--accent); color: var(--accent); }

.btn--sm { min-block-size: 44px; padding-inline: var(--space-5); font-size: var(--fs-sm); }
.btn--block { inline-size: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--accent);
  min-block-size: 44px;
  transition: gap var(--t-mid) var(--ease-out);
}
.link-arrow .ico { inline-size: 18px; block-size: 18px; transition: transform var(--t-mid) var(--ease-out); }
.link-arrow:hover { gap: var(--space-3); }
.link-arrow:hover .ico { transform: translateX(-3px); }

/* ---------- 6. Header / Nav ---------------------------------------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  block-size: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              backdrop-filter var(--t-mid) var(--ease-out);
  border-block-end: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-block-end-color: var(--line);
}

/* Over the shader hero the header sits on a saturated field, so its chrome
   flips to white. It flips back the moment the bar gets a white background —
   either because the page scrolled, or because the mobile drawer opened
   (body.is-locked), which also paints the bar white.

   The wordmark switches via --logo-fill rather than a CSS filter: custom
   properties inherit into the shadow tree that <use> creates, whereas filter
   on <use> content is unreliable across engines (Safari in particular), which
   left the gradient showing on the dark hero. */
/* The white wordmark is a second <use> stacked on the gradient one and
   cross-faded on the SAME 260ms curve as the header background. Swapping
   --logo-fill instead switched the colour instantly while the background was
   still fading, leaving the gradient mark at 1.9:1 over the dark hero for a
   few frames — a visible flicker on every scroll past the threshold. */
.brand__logo-white {
  --logo-fill: #FFFFFF;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .brand__logo-white { opacity: 1; }
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, 0.85); }
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
}
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__link[aria-current="page"] { color: #FFFFFF; }
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__link[aria-current="page"]::after { background: #FFFFFF; }
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__phone { color: rgba(255, 255, 255, 0.85); }
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__phone:hover { color: #FFFFFF; }
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .lang-switch,
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__toggle {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .lang-switch:hover,
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .nav__toggle:hover {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16);
}
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .btn--primary {
  background: #FFFFFF;
  color: var(--brand);
  box-shadow: 0 6px 20px -10px rgba(8, 6, 30, 0.6);
}
body.has-hero:not(.is-locked) .site-header:not(.is-scrolled) .btn--primary:hover { background: #ECEEFB; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  inline-size: 100%;
}

/* Official SmartFrame wordmark — inlined as a sprite symbol so CSS
   controls the colour. Ink ratio is 8.505:1. */
.brand {
  display: flex;
  align-items: center;
  min-block-size: 44px;
}
.brand__logo {
  inline-size: 138px;
  block-size: auto;
  aspect-ratio: 833.7 / 98.04;
  /* defaults to the identity gradient; the header overrides --logo-fill to
     solid white while the bar is transparent over the hero */
  --logo-fill: url(#sf-wordmark-grad);
  transition: opacity var(--t-fast) var(--ease-out);
}
.brand:hover .brand__logo { opacity: 0.82; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  border-radius: var(--r-full);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--fg); background: rgba(20, 22, 29, 0.05); }
.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 42px;
  min-inline-size: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.lang-switch:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: rgba(66, 68, 156, 0.05);
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-inline: var(--space-3);
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  border-radius: var(--r-full);
  transition: color var(--t-fast) var(--ease-out);
}
.nav__phone:hover { color: var(--accent); }
.nav__phone .ico { inline-size: 17px; block-size: 17px; }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 46px; block-size: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--fg);
}
.nav__toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav__toggle .ico { inline-size: 22px; block-size: 22px; }
.nav__toggle .ico--close { display: none; }
.nav__toggle[aria-expanded="true"] .ico--menu { display: none; }
.nav__toggle[aria-expanded="true"] .ico--close { display: block; }

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  /* sits under the header so the close button stays reachable */
  z-index: 50;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: calc(var(--nav-h) + var(--space-6)) clamp(1.25rem, 6vw, 2.5rem) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              visibility var(--t-mid);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mobile-menu__links { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--fg);
  min-block-size: 60px;
}
.mobile-menu__link[aria-current="page"] { color: var(--accent); }
.mobile-menu__link .idx {
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  color: var(--fg-dim);
  letter-spacing: 0.1em;
}
.mobile-menu__foot { margin-block-start: auto; display: grid; gap: var(--space-3); }

body.is-locked { overflow: hidden; }
body.is-locked .float-cta { opacity: 0; pointer-events: none; }
/* the drawer needs an opaque header behind the close button */
body.is-locked .site-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- 7. Hero ------------------------------------------------------ */
/* Full-bleed shader field with the content centred on it. */
.hero {
  position: relative;
  isolation: isolate;
  /* Fills the viewport with the copy optically centred. svh rather than vh so
     mobile browser chrome does not push the buttons below the fold; the
     min- keeps it growing when the stacked layout is taller than the screen. */
  min-block-size: 88vh;
  min-block-size: 88svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  color: #FFFFFF;
  /* also the fallback if WebGL is unavailable */
  background:
    radial-gradient(120% 90% at 78% 8%, #56318D 0%, transparent 55%),
    radial-gradient(110% 100% at 12% 92%, #3A3C8E 0%, transparent 58%),
    linear-gradient(140deg, #41449A 0%, #4A3894 45%, #5C2D8A 100%);
}

.hero__shader {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.hero__shader.is-ready { opacity: 1; }

/* The ribbon field's brightest possible pixel is rgb(168,149,255) — white on
   that alone is only 2.50:1. A flat 42% scrim floors every hero text style at
   4.5:1 or better; the radial on top adds depth where the copy sits. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(75% 60% at 50% 48%, rgba(14, 12, 40, 0.24), transparent 72%),
    linear-gradient(rgba(14, 12, 40, 0.42), rgba(14, 12, 40, 0.42));
}

/* Two columns: the copy reads from the start edge, the ticker faces it from
   the end edge. Mirrors automatically in the English build. */
.hero > .container { inline-size: 100%; }

.hero__grid {
  display: grid;
  /* the copy column is wide enough for the headline to hold one line at the
     largest --fs-4xl step; the ticker takes what is left */
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
.hero__inner { text-align: start; }
.hero__ticker { min-inline-size: 0; animation: hero-in 900ms var(--ease) both 700ms; }

.hero .eyebrow { color: #EDEBFD; }
.hero .eyebrow::before { background: linear-gradient(to left, #EDEBFD, transparent); }
[dir="ltr"] .hero .eyebrow::before { background: linear-gradient(to right, #EDEBFD, transparent); }

.hero__title {
  font-size: var(--fs-4xl);
  font-weight: 900;
  line-height: 1.42;
  color: #FFFFFF;
  margin-bottom: var(--space-5);
  /* `balance` split this into two lines even when one would fit. Plain wrap
     keeps it on one line while the copy column is wide enough, and still lets
     it break safely once the layout stacks. */
  text-wrap: wrap;
}

.hero__sub {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.7rem);
  font-weight: 500;
  color: #EDEBFD;
  line-height: 1.7;
  max-inline-size: 46ch;
  margin-bottom: var(--space-4);
}

.hero__desc {
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.4rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.9;
  max-inline-size: 62ch;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* on the shader the hierarchy inverts: white is the primary */
.hero .btn--primary {
  background: #FFFFFF;
  color: var(--brand);
  box-shadow: 0 8px 26px -10px rgba(8, 6, 30, 0.6);
}
.hero .btn--primary:hover { background: #ECEEFB; box-shadow: 0 12px 32px -10px rgba(8, 6, 30, 0.7); }
.hero .btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: #FFFFFF; color: #FFFFFF; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.22);
  max-inline-size: 560px;
  margin-inline: auto;
  margin-block-start: var(--space-6);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.88);
}
/* separators are decorative, but keep them at the 3:1 non-text floor */
.hero__meta .dot { color: rgba(255, 255, 255, 0.70); }
.hero__meta a { color: #FFFFFF; font-weight: 700; transition: opacity var(--t-fast); }
.hero__meta a:hover { opacity: 0.75; }

/* Hero copy arrives in sequence: fade + rise + a short blur. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(20px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero__inner > * { animation: hero-in 900ms var(--ease) both; }
.hero__inner > .eyebrow       { animation-delay: 80ms; }
.hero__inner > .hero__title   { animation-delay: 210ms; }
.hero__inner > .hero__sub     { animation-delay: 340ms; }
.hero__inner > .hero__desc    { animation-delay: 470ms; }
.hero__inner > .hero__actions { animation-delay: 600ms; }
.hero__inner > .hero__meta    { animation-delay: 650ms; }

/* faint grid used behind the inner-page heroes */
.grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  opacity: 0.6;
}

/* ---------- 8. Logo cloud ------------------------------------------------ */
.trust {
  padding-block: var(--space-7);
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
}
.trust__label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.trust__sub {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  margin-bottom: var(--space-6);
}

/* Names wrap centred and fade up with a blur, staggered. No loop to run. */
.logo-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5) clamp(1.5rem, 4vw, 2.75rem);
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.logo-cloud__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 90px;
  min-block-size: 54px;
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg);
  text-align: center;
  transition: color var(--t-mid) var(--ease-out);
}
.logo-cloud__item:hover { color: var(--brand); }
@media (min-width: 640px) { .logo-cloud__item { min-inline-size: 110px; } }

/* Each viewBox is cropped to the ink and each mark gets its own display height
   (h = sqrt(2700 / aspect-ratio)) so a 4.6:1 wordmark and a 1:1 emblem occupy
   the same optical area. Full colour — several of these are government
   entities whose guidelines forbid recolouring. */
.logo-cloud__logo {
  display: block;
  block-size: var(--logo-h, 34px);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  transition: filter var(--t-mid) var(--ease-out),
              opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.logo-cloud__item:hover .logo-cloud__logo { transform: scale(1.05); }
@media (max-width: 680px) {
  .logo-cloud__logo { block-size: calc(var(--logo-h, 34px) * 0.8); }
}

/* ---------- 9. Cards ----------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: var(--sh-2);
  transform: translateY(-4px);
}
.card__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--r-md);
  background: rgba(66, 68, 156, 0.07);
  border: 1px solid rgba(66, 68, 156, 0.18);
  color: var(--accent);
  margin-bottom: var(--space-5);
}
.card__icon .ico { inline-size: 26px; block-size: 26px; }
.card__num {
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  /* --accent-deep drops to 3.9:1 once the blob tints the card behind it */
  color: var(--brand);
  margin-bottom: var(--space-4);
  display: block;
}
.card__title { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.card__text { color: var(--fg-muted); line-height: 1.85; font-size: var(--fs-base); }
.card--feature { padding-block: clamp(1.75rem, 3.4vw, 2.5rem); }

.svc-card { display: flex; flex-direction: column; gap: var(--space-4); }
.svc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 80% at 70% 20%, rgba(78, 81, 184, 0.42), transparent 60%),
    linear-gradient(150deg, #1B202C, #0F121A);
  display: grid;
  place-items: center;
  color: var(--accent-on-dark);
}
.svc-card__media .ico { inline-size: 40px; block-size: 40px; opacity: 0.85; }

/* ---------- 10. Stats ---------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* column count as modifiers, not inline styles */
/* minmax(0, 1fr) not 1fr: a bare 1fr floors at the column's min-content
   width, and the longer English labels push the track past the container,
   which then clips them because .stats is overflow:hidden. */
.stats--1col { grid-template-columns: minmax(0, 1fr); }
.stats--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat {
  background: var(--bg-alt);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.35;
  margin-bottom: var(--space-2);
  overflow-wrap: break-word;
}
.stat__label { font-size: var(--fs-sm); color: var(--fg-muted); }

/* ---------- 11. Testimonials --------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.quote:hover { border-color: rgba(66, 68, 156, 0.32); box-shadow: var(--sh-2); transform: translateY(-4px); }
.quote__mark { color: var(--accent); opacity: 0.5; inline-size: 30px; block-size: 30px; }
.quote__text { font-size: var(--fs-lg); line-height: 1.9; color: var(--fg); }
.quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  margin-block-start: auto;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.quote__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--fg);
  line-height: 1.5;
}
.quote__role { display: block; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.5; }
.quote__avatar {
  inline-size: 40px; block-size: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(66, 68, 156, 0.07);
  border: 1px solid rgba(66, 68, 156, 0.18);
  color: var(--accent);
}
.quote__avatar .ico { inline-size: 18px; block-size: 18px; }

/* ---------- 12. Split feature -------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
/* the story row lost its photo frame, so it runs full width */
.split--single { grid-template-columns: 1fr; }
.split--single .section-lede { max-inline-size: 70ch; }

.checklist { display: grid; gap: var(--space-3); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--fg-muted);
  line-height: 1.8;
}
.checklist .ico {
  inline-size: 20px; block-size: 20px;
  flex: none;
  color: var(--accent);
  margin-block-start: 5px;
}

/* ---------- 13. Process timeline ----------------------------------------- */
.process { display: grid; gap: var(--space-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { position: relative; padding-block-start: var(--space-6); }
.step::before {
  content: "";
  position: absolute;
  inset-block-start: 11px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--line);
}
.step::after {
  content: "";
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: 0;
  inline-size: 13px; block-size: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.step__num {
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand);
  display: block;
  margin-bottom: var(--space-2);
}
.step__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.step__text { font-size: var(--fs-base); color: var(--fg-muted); line-height: 1.8; }

/* ---------- 14. Accordion (FAQ) ------------------------------------------ */
.accordion { display: grid; gap: var(--space-3); max-inline-size: 860px; }
.acc {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out);
}
.acc:hover { border-color: var(--line-strong); }
.acc.is-open { border-color: rgba(66, 68, 156, 0.35); background: var(--surface-2); }
.acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  min-block-size: 64px;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--fg);
  line-height: 1.6;
}
.acc__btn:hover { color: var(--accent); }
.acc__icon {
  flex: none;
  inline-size: 32px; block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.acc__icon .ico { inline-size: 16px; block-size: 16px; }
.acc.is-open .acc__icon { transform: rotate(180deg); border-color: var(--accent); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--fg-muted);
  line-height: 1.9;
  max-inline-size: 72ch;
}

/* ---------- 15. Portfolio ------------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
.chip {
  min-block-size: 44px;
  padding-inline: var(--space-5);
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--t-fast) var(--ease-out);
}
.chip:hover { color: var(--fg); border-color: var(--accent-deep); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.work {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.work:hover { border-color: rgba(66, 68, 156, 0.35); box-shadow: var(--sh-2); transform: translateY(-4px); }
.work__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
}
.work__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 12, 0.9), rgba(8, 9, 12, 0.05) 60%);
}
.work__tone {
  position: absolute;
  inset: 0;
  background: var(--tone, linear-gradient(150deg, #1B202B, #0B0D12));
  transition: transform var(--t-slow) var(--ease);
}
.work:hover .work__tone { transform: scale(1.06); }
.work__cat {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 3;
  padding: 6px var(--space-3);
  border-radius: var(--r-full);
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent-on-dark);
}
.work__idx {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 3;
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
}
.work__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(154, 156, 235, 0.45);
  z-index: 1;
}
.work__glyph .ico { inline-size: 44px; block-size: 44px; }
.work__body { padding: var(--space-5); }
.work__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.work__text { font-size: var(--fs-base); color: var(--fg-muted); line-height: 1.8; }
.work.is-hidden { display: none; }
.work.is-entering { animation: pop-in 380ms var(--ease) both; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.note {
  margin-block-start: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.note .ico { inline-size: 16px; block-size: 16px; flex: none; }

/* ---------- 16. CTA band ------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(90% 140% at 88% 0%, rgba(255, 255, 255, 0.12), transparent 58%),
    radial-gradient(70% 120% at 6% 100%, rgba(0, 0, 0, 0.16), transparent 60%),
    linear-gradient(115deg, #41449A 0%, #473E96 22%, #56318D 68%, #5C2D8A 100%);
  text-align: center;
  box-shadow: var(--sh-3);
}
.cta-band__title {
  color: #FFFFFF;
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-4);
  max-inline-size: 22ch;
  margin-inline: auto;
}
.cta-band__text {
  font-size: var(--fs-lg);
  color: var(--fg-on-brand);
  max-inline-size: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: 1.9;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
/* on the indigo panel the hierarchy inverts: white is the primary */
.cta-band .btn--primary {
  background: #FFFFFF;
  color: var(--brand);
  box-shadow: 0 6px 20px -8px rgba(10, 12, 30, 0.45);
}
.cta-band .btn--primary:hover { background: #EDEFF8; box-shadow: 0 10px 26px -8px rgba(10, 12, 30, 0.55); }
.cta-band .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}
.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ---------- 17. Page hero (inner pages) ---------------------------------- */
.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem)) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  border-block-end: 1px solid var(--line);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.page-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  inline-size: 46vw; block-size: 46vw;
  max-inline-size: 620px; max-block-size: 620px;
  inset-block-start: -14%;
  inset-inline-end: -8%;
  background: radial-gradient(circle, rgba(92, 45, 138, 0.14), transparent 66%);
}
.page-hero__inner { max-inline-size: 900px; }
.page-hero__title { font-size: var(--fs-3xl); line-height: 1.2; margin-bottom: var(--space-5); }
.page-hero__lede {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  line-height: 1.9;
  max-inline-size: 66ch;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  margin-bottom: var(--space-5);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  transition: color var(--t-fast);
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .ico { inline-size: 14px; block-size: 14px; opacity: 0.6; }
.breadcrumb [aria-current] { color: var(--fg-muted); }

/* ---------- 18. Services detail ------------------------------------------ */
/* group heading that splits the services page into its two halves */
.svc-group {
  padding-block: clamp(2rem, 4vw, 3rem) var(--space-4);
  border-block-start: 2px solid var(--line);
  margin-block-start: var(--space-6);
}
.svc-group:first-of-type { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; }
.svc-group__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--brand);
  margin-bottom: var(--space-2);
}
.svc-group__sub { color: var(--fg-muted); font-size: var(--fs-lg); }

.svc-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-block-start: 1px solid var(--line);
}
.svc-block:first-of-type { border-block-start: 0; padding-block-start: var(--space-5); }
.svc-block__aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.svc-block__num {
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand);
  margin-bottom: var(--space-3);
  display: block;
}
.svc-block__title { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.svc-block__sub { color: var(--accent); font-size: var(--fs-lg); font-weight: 500; }

.feature-list { display: grid; gap: var(--space-3); }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  line-height: 1.7;
  transition: border-color var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out);
}
.feature-list li:hover { border-color: rgba(66, 68, 156, 0.32); background: var(--surface-2); }
.feature-list .ico { inline-size: 20px; block-size: 20px; flex: none; color: var(--accent); margin-block-start: 4px; }

/* ---------- 18b. Wedding packages ---------------------------------------- */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.pkg:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-4px); }

/* the recommended package carries a little more weight */
.pkg--featured { border-color: rgba(66, 68, 156, 0.45); box-shadow: var(--sh-2); }
/* sits in normal flow, not straddling the edge: the animated-panel treatment
   gives every card overflow:hidden, which clipped a half-outside badge */
.pkg__badge {
  align-self: flex-start;
  margin-block-end: calc(var(--space-5) * -1 + var(--space-2));
  padding: 6px var(--space-4);
  border-radius: var(--r-full);
  background: var(--brand);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px -6px rgba(66, 68, 156, 0.7);
}

.pkg__head { display: flex; align-items: center; gap: var(--space-3); }
.pkg__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--r-md);
  background: rgba(66, 68, 156, 0.07);
  border: 1px solid rgba(66, 68, 156, 0.18);
  color: var(--accent);
}
.pkg__icon .ico { inline-size: 22px; block-size: 22px; }
.pkg__name { font-size: var(--fs-xl); margin: 0; }

.pkg__body { display: grid; gap: var(--space-4); }
.pkg__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}
.pkg__list { display: grid; gap: var(--space-2); }
.pkg__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-base);
  color: var(--fg-muted);
  line-height: 1.7;
}
.pkg__list .ico { inline-size: 17px; block-size: 17px; flex: none; color: var(--accent); margin-block-start: 5px; }

.pkg__meta {
  display: grid;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  margin: 0;
}
.pkg__meta > div { display: grid; gap: 2px; }
.pkg__meta dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.pkg__meta dd { margin: 0; font-size: var(--fs-sm); color: var(--fg); line-height: 1.7; }

.pkg__for {
  margin-block-start: auto;
  padding: var(--space-4);
  border-radius: var(--r-md);
  background: var(--surface-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.8;
}
.pkg__for strong { color: var(--fg); font-weight: 700; }

/* ---------- Add-ons ------------------------------------------------------ */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.addon {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  color: var(--fg);
  line-height: 1.7;
  transition: border-color var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out);
}
.addon:hover { border-color: rgba(66, 68, 156, 0.32); background: var(--surface-2); }
.addon__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 38px; block-size: 38px;
  border-radius: var(--r-sm);
  background: rgba(66, 68, 156, 0.07);
  color: var(--accent);
}
.addon__icon .ico { inline-size: 19px; block-size: 19px; }

/* ---------- Good-to-know grid -------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.info-item { display: flex; align-items: flex-start; gap: var(--space-4); }
.info-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--r-md);
  background: rgba(66, 68, 156, 0.07);
  border: 1px solid rgba(66, 68, 156, 0.18);
  color: var(--accent);
}
.info-item__icon .ico { inline-size: 21px; block-size: 21px; }
.info-item__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.info-item__text { color: var(--fg-muted); line-height: 1.8; font-size: var(--fs-base); }

/* ---------- 19. Contact -------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  box-shadow: var(--sh-1);
}

.field { margin-bottom: var(--space-5); }
.field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
  margin-bottom: var(--space-2);
}
.field__req { color: var(--accent); margin-inline-start: 2px; }
.field__hint { display: block; font-size: var(--fs-xs); color: var(--fg-dim); margin-block-start: var(--space-2); line-height: 1.6; }

.input, .textarea {
  inline-size: 100%;
  min-block-size: 52px;
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast);
}
.textarea { min-block-size: 140px; resize: vertical; line-height: 1.8; padding-block: var(--space-4); }
.input::placeholder, .textarea::placeholder { color: var(--fg-dim); }
.input:hover, .textarea:hover { border-color: #A9AFC2; }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(66, 68, 156, 0.14);
  background: var(--surface);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(194, 50, 60, 0.12);
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--danger);
  line-height: 1.6;
}
.field__error .ico { inline-size: 16px; block-size: 16px; flex: none; }
.field.has-error .field__error { display: flex; }

.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  margin-bottom: var(--space-5);
  line-height: 1.7;
}
.form-status.is-visible { display: flex; }
.form-status--success {
  background: rgba(30, 122, 82, 0.07);
  border: 1px solid rgba(30, 122, 82, 0.32);
  color: var(--success);
}
.form-status--error {
  background: rgba(194, 50, 60, 0.06);
  border: 1px solid rgba(194, 50, 60, 0.3);
  color: var(--danger);
}
.form-status .ico { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 3px; }
.form-status strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); }

.contact-cards { display: grid; gap: var(--space-3); }
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
  min-block-size: 44px;
}
a.contact-card:hover { border-color: rgba(66, 68, 156, 0.4); background: var(--surface-2); transform: translateY(-2px); }
.contact-card__icon {
  flex: none;
  inline-size: 44px; block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(66, 68, 156, 0.07);
  border: 1px solid rgba(66, 68, 156, 0.18);
  color: var(--accent);
}
.contact-card__icon .ico { inline-size: 21px; block-size: 21px; }
/* label above value, not inline beside it */
.contact-card > span:last-child { display: flex; flex-direction: column; min-inline-size: 0; }
.contact-card__label { display: block; font-size: var(--fs-sm); color: var(--fg-dim); margin-bottom: 2px; }
.contact-card__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--fg);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.contact-card__value.latin { font-family: var(--font-latin); letter-spacing: 0.02em; }

/* ---------- 20. Footer --------------------------------------------------- */
.site-footer {
  border-block-start: 1px solid var(--line);
  background: var(--bg-alt);
  /* extra bottom room so the floating button never covers the last row */
  padding-block: var(--space-8) calc(var(--space-5) + 72px);
  margin-block-start: var(--section-y);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block-end: var(--space-7);
  border-block-end: 1px solid var(--line);
}
.site-footer .brand__logo { inline-size: 158px; }
.footer__about { color: var(--fg-muted); font-size: var(--fs-base); line-height: 1.85; max-inline-size: 42ch; margin-block-start: var(--space-4); }
.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer__list { display: grid; gap: var(--space-1); }
.footer__list a, .footer__list span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  color: var(--fg-muted);
  font-size: var(--fs-base);
  transition: color var(--t-fast);
}
.footer__list a:hover { color: var(--accent); }

/* Language switch. Sits under the company blurb; the header carries the same
   link, but the footer copy is the one people reach after reading the page. */
.footer__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding: 10px var(--space-4);
  min-block-size: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.footer__lang .ico { inline-size: 17px; block-size: 17px; opacity: 0.75; }
.footer__lang:hover {
  color: #FFFFFF;
  background: var(--brand);
  border-color: var(--brand);
}
.footer__lang:hover .ico { opacity: 1; }
.footer__lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Social row — brand glyphs are filled paths, unlike the 1.6px stroke icons
   used everywhere else, so they need their own sizing to look the same weight. */
.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  list-style: none;
  padding: 0;
}
.footer__social a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg-muted);
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.footer__social .ico { inline-size: 19px; block-size: 19px; opacity: 1; }
.footer__social a:hover {
  color: #FFFFFF;
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}
.footer__social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer__list .ico { inline-size: 16px; block-size: 16px; opacity: 0.7; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--fg-dim);
}

/* Floating WhatsApp action */
.float-cta {
  position: fixed;
  inset-block-end: max(20px, env(safe-area-inset-bottom));
  inset-inline-start: 20px;
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 52px;
  padding-inline: var(--space-5);
  border-radius: var(--r-full);
  /* WhatsApp brand green. Its own white-on-green lockup measures 1.98:1, which
     fails even the 3:1 graphics floor, so the label and glyph use the deep
     green from the same palette instead — 6.17:1 and still unmistakably
     WhatsApp. */
  background: #25D366;
  color: #0A3D2C;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: 0 10px 28px -8px rgba(6, 94, 52, 0.45);
  transition: transform var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.float-cta:hover {
  background: #1EBE5A;
  box-shadow: 0 14px 34px -8px rgba(6, 94, 52, 0.55);
  transform: translateY(-2px);
}
.float-cta:focus-visible { outline-color: #0A3D2C; }
.float-cta .ico { inline-size: 20px; block-size: 20px; }

/* ---------- 21. Scroll reveal -------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Softer, slower entrance used by the logo cloud */
[data-reveal="blur"] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(12px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="blur"].is-visible { opacity: 1; transform: none; filter: blur(0); }

/* ---------- 22. Responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
}

@media (max-width: 940px) {
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: inline-flex; }
  .split, .contact-layout, .svc-block { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .svc-block__aside { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  :root { --nav-h: 68px; }
  /* the quote CTA lives in the drawer and the hero on small screens */
  .nav__actions > .btn { display: none; }
  .grid--3, .grid--2, .work-grid, .stats, .stats--2col,
  .pkg-grid, .addon-grid, .info-grid { grid-template-columns: 1fr; }
  .stats { border-radius: var(--r-lg); }
  .hero__actions .btn { inline-size: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band__actions .btn { inline-size: 100%; }
  .float-cta { inset-inline-start: 16px; padding-inline: var(--space-4); }
  .acc__btn { font-size: var(--fs-base); padding: var(--space-4); }
}

@media (max-width: 380px) {
  .brand__logo { inline-size: 116px; }
  }

/* ---------- 23. Motion / print preferences ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 25. Gradient blob cards --------------------------------------
   Two layers per panel, both pure CSS so there is no per-frame JavaScript:

   ::before  a soft brand-coloured blob drifting inside the card. Animated
             with transform only, so the compositor handles it — this is the
             motion you actually see, and it stays cheap on a page with 20+.
   ::after   a conic gradient rotated behind a two-layer alpha mask
             (mask-composite: exclude) leaving a 1.5px glowing border. The
             angle is a registered custom property, so CSS can animate it.

   Both only run while the panel is on screen (.is-beaming, set from
   main.js by one IntersectionObserver), and both stop under
   prefers-reduced-motion, which leaves the border statically lit.
   -------------------------------------------------------------------------- */
@property --beam-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

[data-beam] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* the drifting blob — a defined circle, not a wash, so it actually reads
   through the white card surface */
[data-beam]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: 80%;
  aspect-ratio: 1 / 1;
  top: -20%;
  left: -14%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  /* Capped at 0.20: measured against every text colour that can sit inside a
     panel. Stronger than this and --fg-dim / --danger / --success drop under
     4.5:1. The drama lives on the border instead, where no text sits. */
  background: radial-gradient(circle,
    rgba(66, 68, 156, 0.20) 0%,
    rgba(66, 68, 156, 0.18) 28%,
    rgba(92, 45, 138, 0.15) 52%,
    rgba(92, 45, 138, 0.06) 68%,
    transparent 80%);
  filter: blur(16px);
  transition: opacity 700ms var(--ease-out), filter var(--t-slow) var(--ease-out);
}

/* the glowing border */
[data-beam]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
  /* a long bright comet so the border reads as lit, not as a hairline */
  /* The whole ring is tinted so the border always reads as brand-coloured;
     two brighter comets travel around it. */
  background: conic-gradient(from var(--beam-a, 0deg),
    rgba(66, 68, 156, 0.38) 0deg,
    rgba(66, 68, 156, 0.62) 34deg,
    rgba(74, 60, 150, 0.92) 62deg,
    #6A6CD0 80deg,
    #B9A6F2 88deg,
    rgba(92, 45, 138, 0.7) 108deg,
    rgba(92, 45, 138, 0.38) 150deg,
    rgba(92, 45, 138, 0.38) 190deg,
    rgba(92, 45, 138, 0.66) 236deg,
    rgba(92, 45, 138, 0.92) 258deg,
    #8B54C8 268deg,
    #D9C6F8 274deg,
    rgba(66, 68, 156, 0.66) 296deg,
    rgba(66, 68, 156, 0.38) 340deg,
    rgba(66, 68, 156, 0.38) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
}

/* lit and moving only while the panel is in view */
[data-beam].is-beaming::before {
  opacity: 1;
  animation: blob-drift 15s ease-in-out infinite alternate;
}
[data-beam].is-beaming::after {
  opacity: 1;
  animation: beam-spin 9s linear infinite;
}

/* de-synchronise neighbouring panels */
[data-beam]:nth-of-type(3n+1)::before { animation-duration: 17s; animation-delay: -3s; }
[data-beam]:nth-of-type(3n+2)::before { animation-duration: 13s; animation-delay: -8s; }
[data-beam]:nth-of-type(3n+1)::after  { animation-delay: -2s; }
[data-beam]:nth-of-type(3n+2)::after  { animation-delay: -5.5s; }

/* hover: the blob swells and sharpens, the border brightens */
[data-beam]:hover::before,
[data-beam]:focus-within::before { filter: blur(13px) saturate(1.2); }
[data-beam]:hover::after,
[data-beam]:focus-within::after { filter: brightness(1.3) saturate(1.2); }
/* hover bloom sits outside the panel, so it never touches text contrast */
[data-beam]:hover,
[data-beam]:focus-within { box-shadow: 0 12px 34px -14px rgba(66, 68, 156, 0.55); }

@keyframes blob-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(40%, 28%, 0) scale(1.18); }
  66%  { transform: translate3d(14%, 54%, 0) scale(0.92); }
  100% { transform: translate3d(48%, 10%, 0) scale(1.12); }
}
@keyframes beam-spin { to { --beam-a: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  [data-beam].is-beaming::before,
  [data-beam].is-beaming::after { animation: none; }
  [data-beam].is-beaming::after { --beam-a: 40deg; }
}

/* Windows high-contrast mode paints its own borders */
@media (forced-colors: active) {
  [data-beam]::before,
  [data-beam]::after { display: none; }
}

/* ---------- 24. LTR (English) -------------------------------------------
   Everything else already uses logical properties; these are the handful of
   rules that are genuinely direction-aware, plus Latin type tuning. */
[dir="ltr"] .eyebrow::before {
  background: linear-gradient(to right, var(--accent), transparent);
}
[dir="ltr"] .nav__link[aria-current="page"]::after { transform: translateX(-50%); }
/* In LTR the arrow sits to the left of the list, so it has to point the other
   way; the glyph itself points left. */
[dir="ltr"] .ticker__arrow { transform: scaleX(-1); }
[dir="ltr"] .ticker__item > span { transform-origin: left center; }
[dir="ltr"] .link-arrow:hover .ico { transform: translateX(3px); }

/* Latin sets much tighter than Arabic — the generous leading Arabic needs
   would look slack here. */
[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h4 {
  line-height: 1.22;
  letter-spacing: -0.015em;
}
[dir="ltr"] .hero__title { line-height: 1.16; letter-spacing: -0.025em; }
[dir="ltr"] .page-hero__title { line-height: 1.12; }
[dir="ltr"] .cta-band__title { line-height: 1.15; }
[dir="ltr"] .acc__btn { line-height: 1.35; }
[dir="ltr"] body { line-height: 1.65; }
[dir="ltr"] .hero__desc,
[dir="ltr"] .section-lede,
[dir="ltr"] .page-hero__lede { line-height: 1.7; }
[dir="ltr"] .card__text,
[dir="ltr"] .work__text,
[dir="ltr"] .step__text,
[dir="ltr"] .acc__body,
[dir="ltr"] .footer__about { line-height: 1.7; }
[dir="ltr"] .quote__text { line-height: 1.65; }

/* --------------------------------------------------------------------------
   26 · SERVICES TICKER
   A column of service phrases sliding past a fixed arrow. The phrases live in
   the HTML, not in JS, so each language file carries its own copy and the list
   still reads with JS disabled.
   -------------------------------------------------------------------------- */
.ticker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ticker__arrow {
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  color: var(--brand);
}
.ticker__arrow svg { inline-size: 100%; block-size: 100%; fill: currentColor; }

.ticker__mask {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  /* JS sets the exact pixel height once the webfont has loaded, but until then
     the mask would size to all 27 rows and the section would flash ~1700px
     tall. This mirrors the row box — line-height plus vertical padding — so
     the reserved space is already right on the first paint. */
  block-size: calc(5 * (1.35 * var(--fs-xl) + 26px));
  /* the phrases cannot wrap — a variable row height would slide the active
     one off the arrow — so instead the type tracks the column width */
  container-type: inline-size;
  container-name: ticker;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.55) 18%, #000 42%,
    #000 58%, rgba(0,0,0,0.55) 82%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.55) 18%, #000 42%,
    #000 58%, rgba(0,0,0,0.55) 82%, transparent 100%);
}

.ticker__track {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  will-change: transform;
}

.ticker__item {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1.35;
  color: var(--fg-muted);
  white-space: nowrap;
  /* fallback above; browsers with container queries scale to fit instead */
  padding: 13px 4px;
  opacity: 0.68;
  transition: opacity var(--t-slow) var(--ease-out),
              color var(--t-slow) var(--ease-out);
}
/* The zoom is on an inner span, not the row. A transform on the row itself
   would make getBoundingClientRect report the scaled box, and JS measures that
   box to size the window and position the track — a 0.95 factor there puts the
   active phrase exactly half a row below the arrow. */
.ticker__item > span {
  display: block;
  transform: scale(0.95);
  transform-origin: right center;
  transition: transform var(--t-slow) var(--ease-out);
}
.ticker__item.is-active > span { transform: scale(1); }

@container ticker (min-width: 0px) {
  .ticker__item { font-size: clamp(1rem, 6.7cqi, 1.85rem); }
  .ticker__mask { block-size: calc(5 * (1.35 * clamp(1rem, 6.7cqi, 1.85rem) + 26px)); }
}

.ticker__item--featured { color: var(--accent-deep); }
.ticker__item.is-active {
  color: var(--fg);
  opacity: 1;
}
.ticker__item--featured.is-active { color: var(--brand); }

@media (max-width: 760px) {
  .ticker__item { padding: 10px 4px; }
  .ticker__mask { block-size: calc(5 * (1.35 * var(--fs-lg) + 20px)); }
  @container ticker (min-width: 0px) {
    .ticker__mask { block-size: calc(5 * (1.35 * clamp(1rem, 6.7cqi, 1.85rem) + 20px)); }
  }
}

/* On the shader the whole palette inverts. The brightest pixel the ribbon
   field can produce is rgb(168,149,255); under the flat 42% hero scrim that
   leaves rgb(103,91,165) behind the ticker column, where white measures only
   5.79:1 and a dimmed phrase far less. A soft local wash — invisible as a
   shape, it just deepens the field there — buys the headroom back. Values
   below are measured against the worst-case pixel, not estimated:
     active white 8.39:1 · idle white 4.71:1 · featured active 5.19:1 ·
     featured idle 3.22:1 · arrow 8.39:1. */
.hero__ticker { position: relative; }
.hero__ticker::before {
  content: "";
  position: absolute;
  inset: -22% -16%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 52% at 50% 50%,
    rgba(14, 12, 40, 0.42) 0%, rgba(14, 12, 40, 0.28) 45%, transparent 76%);
}
.hero .ticker__arrow { color: #FFFFFF; }
.hero .ticker__item { color: #FFFFFF; opacity: 0.66; }
.hero .ticker__item.is-active { color: #FFFFFF; opacity: 1; }
.hero .ticker__item--featured { color: #CFC4FF; }
.hero .ticker__item--featured.is-active { color: #CFC4FF; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__ticker::before { inset: -14% -10%; }
}

@media (prefers-reduced-motion: reduce) {
  /* JS parks the list on the featured phrase and never ticks; kill the
     leftover zoom so nothing looks half-animated. */
  .ticker__item > span { transform: none; }
}

@media print {
  .site-header, .float-cta, .mobile-menu, .hero__bg, .grid-lines { display: none !important; }
  body { background: #fff; color: #000; }
}