/* Darise — "The High House". Light rises inside a glass house.
   Source: _build/assets/site.css (copied to darise.net/assets by build.py). */

/* metric-matched fallbacks: the web-font swap does not move the layout (CLS) */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 113.39%; ascent-override: 85.43%; descent-override: 22.14%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;
  /* brand */
  --mint: #2BF0B1;
  --mint-2: #19B98A;
  --mint-3: #0E6E55;
  --mint-hover: #5CF5C4;
  --graphite: #192128;
  --ink: #0B0F12;
  --paper: #0F1418;
  --chalk: #F5F7F8;
  --grey: #9BA8AF;
  --text-2: #C9D1D6;      /* secondary text on glass (keeps ≥4.5:1 over mint light) */
  --text-legal: #D5DCE0;
  --hair: rgba(255, 255, 255, .09);
  /* glass */
  --glass: rgba(25, 33, 40, .42);
  --glass-hero: rgba(14, 19, 23, .72); /* over the brightest part of the "d" */
  --glass-fallback: rgba(25, 33, 40, .88);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%);
  --edge-a: rgba(255, 255, 255, .18);
  --edge-b: rgba(43, 240, 177, .55);
  --edge-dir: to bottom right;
  --glow: 0 30px 80px -30px rgba(43, 240, 177, .35);
  --blur: 22px;
  --radius: 24px;
  --notch: 34px;
  /* motion */
  --ease-rise: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 180ms;
  --t-ui: 320ms;
  --t-reveal: 900ms;
  /* layout */
  --max: 1240px;
  --g: 40px;
  --hh: 72px;
  --safe-t: env(safe-area-inset-top, 0px);
  /* type */
  --f-display: "Montserrat", "Montserrat Fallback", "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", "Inter Fallback", "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ar: "Alexandria", system-ui, -apple-system, sans-serif;
}
html[lang="ar"] { --f-display: var(--f-ar); --f-body: var(--f-ar); --edge-dir: to bottom left; }
@media (max-width: 768px) {
  :root { --blur: 14px; --g: 20px; --hh: 60px; --notch: 28px; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); scroll-padding-top: calc(var(--hh) + var(--safe-t) + 16px); }
html.page-doc, html.page-404 { background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--chalk);
  font: 400 17px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
}
.page-doc body, .page-404 body { background: var(--paper); }
html[lang="ar"] body { line-height: 1.8; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
bdi { unicode-bidi: isolate; }

/* film grain: one static tiled PNG at 6% */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: url("grain.png") repeat;
  background-size: 128px 128px;
  opacity: .06;
}

.wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--g));
  margin-inline: auto;
  padding-left: max(var(--g), env(safe-area-inset-left, 0px));
  padding-right: max(var(--g), env(safe-area-inset-right, 0px));
}

.skip {
  position: fixed; z-index: 70; top: calc(var(--safe-t) + 8px); inset-inline-start: 16px;
  padding: 10px 16px; border-radius: 999px; background: var(--mint); color: var(--ink);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------------ type */
h1, h2, h3 { font-family: var(--f-display); color: var(--chalk); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(40px, 11vw, 88px); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-weight: 700; font-size: clamp(32px, 5.2vw, 58px); line-height: 1.06; letter-spacing: -.03em; }
h3 { font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-weight: 600; letter-spacing: 0; line-height: 1.3; }
html[lang="ar"] h1 { font-size: clamp(32px, 8.4vw, 64px); }
html[lang="ar"] h2 { font-size: clamp(28px, 4.2vw, 46px); }
em.hl { font-style: normal; color: var(--mint); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12.5px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--mint); flex: none; }
.panel .eyebrow, .glass .eyebrow { color: var(--text-2); }
html[lang="ar"] .eyebrow { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--mint); color: var(--ink);
  font: 600 15.5px/1.2 var(--f-body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 32px -14px rgba(43, 240, 177, .7);
  transition: transform var(--t-micro) var(--ease-soft), background-color var(--t-ui) var(--ease-soft), box-shadow var(--t-ui) var(--ease-soft);
}
.btn:hover { background: var(--mint-hover); box-shadow: 0 16px 40px -12px rgba(43, 240, 177, .85); }
.btn:active { transform: scale(.98); }
html[lang="ar"] .btn, .nf .btn[lang="ar"] { letter-spacing: 0; }
.btn.ghost { background: rgba(255, 255, 255, .04); color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(43, 240, 177, .6); }
.btn-xl { min-height: 64px; padding: 0 30px; font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; letter-spacing: -.01em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ glass system */
.glass, .notch > .glass-bg, .site-header::before, .seg-glass, .sheet-glass {
  background: var(--sheen), var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .notch > .glass-bg, .site-header::before, .seg-glass, .sheet-glass { background: var(--sheen), var(--glass-fallback); }
}
/* performance cap: site.js swaps far-off panels to the lite version so ≤4 blur at once */
.glass-lite.glass, .glass-lite > .glass-bg { -webkit-backdrop-filter: none; backdrop-filter: none; }

.panel { position: relative; border-radius: var(--radius); }
.glass { box-shadow: var(--glow); }
/* 1px gradient border, top-start white to bottom-end mint */
.glass::before, .notch::before, .card::before, .seg-glass::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(var(--edge-dir), var(--edge-a), var(--edge-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* notched panel: shape drawn by site.js (clip-path: path() + SVG edge); rounded panel without JS */
.notch > .glass-bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.notch > .edge { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; display: none; pointer-events: none; }
.notch.notched::before { display: none; }
.notch.notched > .edge { display: block; }
.notch.notched > .glass-bg { border-radius: 0; }
.notch > .panel-body { position: relative; z-index: 2; }
.notch > .dots, .notch > .tag { z-index: 2; }
.notch::after { /* mint light pooled under the glass at the bottom-start, like the reference */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-inline-start: -8%; bottom: -14%; width: 70%; height: 60%;
  background: radial-gradient(closest-side, rgba(43, 240, 177, .30), rgba(43, 240, 177, 0));
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed; z-index: 40; inset-inline: 0; top: var(--safe-t);
  height: var(--hh); border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sheen), rgba(11, 15, 18, .78); transition: opacity var(--t-ui) var(--ease-soft); }
html.js.page-home .site-header:not(.scrolled)::before { opacity: 0; } /* transparent over the hero, glass after 24px */
.site-header::after { /* the "safe area" strip above a notch-phone header */
  content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: var(--safe-t); background: var(--ink);
}
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: 100%; }
.brand { justify-self: start; }
.hd-end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; padding-block: 8px; flex: none; }
.brand-logo { height: 26px; width: auto; }
html[dir="rtl"] .brand-logo { direction: ltr; }
.nav { display: flex; gap: 8px; }
.nav a, .sheet-nav a, .site-footer a { text-decoration: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px;
  font: 500 13px/1 "Inter", "Inter Fallback", var(--f-ar); color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); background: rgba(11, 15, 18, .62);
  transition: color var(--t-ui) var(--ease-soft), box-shadow var(--t-ui) var(--ease-soft);
}
html[lang="ar"] .nav a { font: 500 13.5px/1 var(--f-ar); }
.nav a:hover { box-shadow: inset 0 0 0 1px var(--mint); }
.nav a.active { color: var(--mint); }
.pill-cta {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  background: var(--mint); color: var(--ink); font: 600 13px/1 "Inter", "Inter Fallback", var(--f-ar); text-decoration: none; box-shadow: 0 0 0 4px rgba(7, 9, 11, .55);
  transition: background-color var(--t-ui) var(--ease-soft);
}
html[lang="ar"] .pill-cta { font: 500 13.5px/1 var(--f-ar); }
.pill-cta:hover { background: var(--mint-hover); }
.lang {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px; min-width: 44px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--chalk);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 4px rgba(7, 9, 11, .55); background: rgba(11, 15, 18, .62);
  transition: box-shadow var(--t-ui) var(--ease-soft);
}
.lang:hover { box-shadow: inset 0 0 0 1px var(--mint), 0 0 0 4px rgba(7, 9, 11, .55); }
.lang:lang(ar) { font-family: var(--f-ar); font-size: 14px; }
.lang:lang(en) { font-family: "Inter", "Inter Fallback", var(--f-ar); }
.menu-btn, .sheet-close {
  display: none; position: relative; width: 44px; height: 44px; border-radius: 999px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background: rgba(11, 15, 18, .62);
}
.menu-btn i, .sheet-close i {
  position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 2px; background: var(--chalk);
}
.menu-btn i:nth-of-type(1) { top: 17px; }
.menu-btn i:nth-of-type(2) { top: 25px; left: 18px; }
html[dir="rtl"] .menu-btn i:nth-of-type(2) { left: 13px; right: 18px; }
.sheet-close i { top: 21px; }
.sheet-close i:nth-of-type(1) { transform: rotate(45deg); }
.sheet-close i:nth-of-type(2) { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav, .pill-cta { display: none; }
  .bar { display: flex; }
  .hd-end { margin-inline-start: auto; }
  .lang { min-height: 44px; }
  .menu-btn { display: block; }
  .bar { gap: 10px; }
}

/* full-screen glass menu sheet (works with :target when JS is off) */
.sheet {
  position: fixed; inset: 0; z-index: 50; visibility: hidden; opacity: 0;
  transition: opacity var(--t-ui) var(--ease-soft), visibility 0s linear var(--t-ui);
}
.sheet.open, .sheet:target { visibility: visible; opacity: 1; transition: opacity var(--t-ui) var(--ease-soft); }
.sheet-glass { position: absolute; inset: 0; background: var(--sheen), rgba(11, 15, 18, .78); }
.sheet-in {
  position: relative; height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 28px;
  padding-top: calc(var(--safe-t) + var(--hh) + 24px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
}
.sheet-close { display: block; position: absolute; top: calc(var(--safe-t) + (var(--hh) - 44px) / 2); inset-inline-end: max(var(--g), env(safe-area-inset-right, 0px)); }
.sheet-nav { display: flex; flex-direction: column; }
.sheet-nav a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--hair);
  font: 700 28px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--chalk);
}
html[lang="ar"] .sheet-nav a { font-weight: 600; letter-spacing: 0; }
.sheet-legal { display: grid; gap: 2px; }
.sheet-legal a { display: flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; font-size: 16px; }
.sheet .btn { align-self: flex-start; }
.sheet-nav a, .sheet-legal, .sheet .btn { transform: translateY(24px); opacity: 0; transition: transform var(--t-reveal) var(--ease-rise), opacity var(--t-ui) var(--ease-soft); }
.sheet.open .sheet-nav a, .sheet:target .sheet-nav a, .sheet.open .sheet-legal, .sheet:target .sheet-legal, .sheet.open .btn, .sheet:target .btn { transform: none; opacity: 1; }
.sheet-nav a:nth-child(2) { transition-delay: 40ms; }
.sheet-nav a:nth-child(3) { transition-delay: 80ms; }
.sheet-nav a:nth-child(4) { transition-delay: 120ms; }
.sheet-nav a:nth-child(5) { transition-delay: 160ms; }
.sheet-legal { transition-delay: 200ms; }
.sheet .btn { transition-delay: 240ms; }
html.menu-open { overflow: hidden; }

/* ------------------------------------------------------------------ sections & atmosphere */
main > section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 9vw, 128px);
}
/* one continuous page background: graphite-black rising to graphite, no section steps */

.atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* soft section edges: shapes fade out instead of being cut by the section box */
main > section > .atmos {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 160px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 140px, #000 calc(100% - 160px), transparent 100%);
}
main > .hero > .atmos { /* (unused since addendum 2) */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent 100%);
}
.gridlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 78%);
}
.blob {
  position: absolute; --s: 620px; width: var(--s); height: var(--s); margin-top: calc(var(--s) / -2); margin-inline-start: calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 240, 177, .30), rgba(43, 240, 177, .10) 55%, rgba(43, 240, 177, 0));
  will-change: transform;
}
.b1 { animation: blobA 19s var(--ease-soft) infinite alternate; }
.b2 { --s: 460px; opacity: .8; animation: blobB 23s var(--ease-soft) infinite alternate; }
.b3 { --s: 380px; opacity: .7; animation: blobA 15s var(--ease-soft) infinite alternate-reverse; }
.b4 { animation: blobB 21s var(--ease-soft) infinite alternate; }
.b5 { top: 40%; inset-inline-start: 15%; opacity: .45; animation: blobA 24s var(--ease-soft) infinite alternate; }
.b6 { --s: 620px; top: 78%; inset-inline-start: 22%; opacity: .7; animation: blobB 20s var(--ease-soft) infinite alternate; }
.b8 { --s: 520px; top: 70%; inset-inline-start: 80%; opacity: .55; animation: blobA 26s var(--ease-soft) infinite alternate-reverse; }
.b7 { --s: 640px; top: 62%; inset-inline-start: 72%; opacity: .75; animation: blobA 18s var(--ease-soft) infinite alternate; }
.b9 { --s: 420px; top: 88%; inset-inline-start: 18%; opacity: .4; animation: blobB 24s var(--ease-soft) infinite alternate-reverse; }
/* Ventures + Contact: light only, never a cropped "d" (CD brief 5). Tablet values: */
@media (min-width: 769px) and (max-width: 1023px) {
  .b6 { --s: 520px; top: 70%; inset-inline-start: 20%; opacity: .7; }
  .b8 { --s: 440px; top: 52%; inset-inline-start: 82%; opacity: .5; }
  .b7 { --s: 520px; top: 66%; inset-inline-start: 70%; opacity: .7; }
  .b9 { --s: 360px; top: 90%; inset-inline-start: 20%; opacity: .4; }
}
@keyframes blobA { from { transform: translate3d(0, 40px, 0); } to { transform: translate3d(60px, -90px, 0); } }
@keyframes blobB { from { transform: translate3d(0, 50px, 0) scale(.92); } to { transform: translate3d(-70px, -70px, 0) scale(1.06); } }
[data-ambient].is-off .atmos *, [data-ambient].is-off .atmos { animation-play-state: paused !important; }

/* cursor / touch light: sits behind the glass so the blur shows it */
.cursor-light {
  position: fixed; z-index: 1; top: 0; left: 0; width: 480px; height: 480px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(43, 240, 177, .12), rgba(43, 240, 177, 0));
  opacity: 0; will-change: transform; transform: translate3d(-999px, -999px, 0);
  transition: opacity 600ms var(--ease-soft);
}

/* ------------------------------------------------------------------ depth scene (home): 2D glass in front of 3D space */
.scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.L { position: absolute; inset: 0; will-change: transform; }
.L0 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .55) 66%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .55) 66%, #000 100%);
}
.floor {
  position: absolute; left: -50vw; top: 55vh; width: 200vw; height: 200vh;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 80px 80px; background-position: center top;
  transform-origin: 50% 0; transform: perspective(900px) rotateX(64deg); will-change: transform;
}
.L1 { transform: scale(.9); }
.L1 .b1 { top: 74%; inset-inline-start: 16%; }
.L1 .b2 { top: 30%; inset-inline-start: 74%; }
.L1 .b3 { top: 96%; inset-inline-start: 84%; }
.d-outline { position: absolute; top: 44vh; inset-inline-end: 7vw; height: 90vh; width: 90vh; opacity: .12; overflow: visible; } /* starts at the card tops: never behind the headline */
.gloss-pers { position: absolute; top: -8vw; inset-inline-end: -10vw; width: 46vw; perspective: 1200px; }
.gloss-rot { transform-style: preserve-3d; will-change: transform; }
.gloss { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) and (max-width: 1439px) { .gloss-pers { top: -10vw; inset-inline-end: -19vw; } }

.streak {
  position: absolute; z-index: 0; bottom: -10%; width: 1.5px; height: 42vh; border-radius: 2px;
  background: linear-gradient(to top, rgba(43, 240, 177, 0), rgba(43, 240, 177, .95) 55%, rgba(43, 240, 177, 0));
  opacity: 0; --rot: 28deg;
}
html[dir="rtl"] .streak { --rot: -28deg; }
.streaks { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 62%, #000 80%); mask-image: linear-gradient(to bottom, transparent 62%, #000 80%); }
.s1 { inset-inline-start: 40%; animation: streak 7s linear 2.2s infinite; }
.s2 { inset-inline-start: 66%; animation: streak 8s linear 5.4s infinite; height: 30vh; }
@keyframes streak {
  0% { transform: rotate(var(--rot)) translateY(20vh); opacity: 0; }
  8% { opacity: .5; }
  22% { transform: rotate(var(--rot)) translateY(-120vh); opacity: 0; }
  100% { transform: rotate(var(--rot)) translateY(-120vh); opacity: 0; }
}
html.page-home { background: #07090B; }
html.page-home body { background: transparent; }

/* ------------------------------------------------------------------ hero (first screen) */
.hero { padding-top: calc(var(--safe-t) + var(--hh) + 56px) !important; padding-bottom: clamp(56px, 7vw, 104px) !important; text-align: center; }
.hero-in { display: grid; justify-items: center; }
.hero h1, html[lang="ar"] .hero h1 { font-weight: 600; font-size: clamp(40px, 5.2vw, 80px); line-height: 1.05; letter-spacing: -.02em; }
html[lang="ar"] .hero h1 { font-size: clamp(32px, 4.7vw, 68px); line-height: 1.28; letter-spacing: 0; }
.hero .sub { margin-top: 20px; font-size: 17px; line-height: 1.6; color: #CDD5DA; max-width: 760px; text-wrap: balance; }
html[lang="ar"] .hero .sub { font-size: 16px; line-height: 1.75; }
.hcards { margin-top: 48px; width: 100%; max-width: 1120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: start; }
.hcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 280px; padding: 24px 24px 20px;
  border-radius: var(--radius); color: var(--chalk); text-decoration: none;
  transition: transform var(--t-ui) var(--ease-rise);
}
.hcard.glass { background: var(--sheen), var(--glass-hero); } /* the glossy d passes behind these: denser glass keeps text ≥4.5:1 */
.hc-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .08); color: var(--mint); }
.hc-ico svg { width: 22px; height: 22px; }
.hc-t { font: 600 17px/1.3 var(--f-display); letter-spacing: .06em; color: inherit; margin-top: 72px; }
html[lang="ar"] .hc-t { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.hc-p { font-size: 15.5px; line-height: 1.55; color: var(--text-2); min-height: 3.1em; min-height: 2lh; text-wrap: pretty; }
html[lang="ar"] .hc-p { font-size: 14.5px; line-height: 1.7; }
.hc-l { display: block; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); font: 600 11px/1.4 "Inter", "Inter Fallback", var(--f-ar); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
html[lang="ar"] .hc-l { font: 500 12.5px/1.5 var(--f-ar); letter-spacing: 0; text-transform: none; }
.hcard-mint { background: linear-gradient(150deg, #2BF0B1 0%, #19B98A 60%, #0E6E55 100%); color: var(--ink); box-shadow: var(--glow); }
html[dir="rtl"] .hcard-mint { background: linear-gradient(210deg, #2BF0B1 0%, #19B98A 60%, #0E6E55 100%); }
.hcard-mint .hc-ico { background: rgba(11, 15, 18, .14); color: var(--ink); }
.hcard-mint .hc-p, .hcard-mint .hc-l { color: var(--ink); }
.hcard-mint .hc-l { border-top-color: rgba(11, 15, 18, .24); }
@media (hover: hover) and (pointer: fine) { .hcard:hover { transform: translateY(-4px); } }
.hcard:active { transform: scale(.98); }
.car-dots { position: static; display: none; justify-content: center; gap: 8px; margin-top: 6px; }

/* intro: H1 painted at rest (LCP); sub-line, cards and the glossy "d" arrive */
@media (prefers-reduced-motion: no-preference) {
  .hero .sub { animation: fadeUp var(--t-reveal) var(--ease-rise) .2s backwards; }
  .hcard { animation: cardIn var(--t-reveal) var(--ease-rise) .35s backwards; }
  .hcard:nth-child(2) { animation-delay: .43s; }
  .hcard:nth-child(3) { animation-delay: .51s; }
  .hero h1 em.hl { animation: hlGlow 600ms var(--ease-soft) .9s both; }
  .gloss { animation: glossIn 1.4s var(--ease-rise) .1s backwards; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(32px); } }
@keyframes glossIn { from { opacity: 0; transform: translateZ(-200px); } }

/* tablet + phone: swipe carousel */
@media (max-width: 1023px) {
  html[lang="ar"] .hero h1 { font-size: clamp(36px, 5.6vw, 52px); }
  .L2 { display: none; } /* outline d: desktop only */
  .hcards {
    display: flex; justify-self: stretch; width: auto; max-width: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--g)); padding: 4px var(--g) 72px; margin-bottom: -50px; /* room for the card glow, no clipped edge */ scroll-padding-inline: var(--g); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .hcards::-webkit-scrollbar { display: none; }
  .hcard { flex: 0 0 44vw; scroll-snap-align: start; }
  .car-dots { display: flex; position: relative; z-index: 1; }
  .gloss-pers { width: 46vw; top: 300px; inset-inline-end: -12vw; } /* below the header controls, behind the carousel */
}
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--safe-t) + var(--hh) + 32px) !important; padding-bottom: 48px !important; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 44px); }
  html[lang="ar"] .hero h1 { font-size: clamp(30px, 9vw, 38px); }
  .hero h1 { text-wrap: balance; }
  .hero .sub { font-size: 16px; margin-top: 16px; }
  .hcards { margin-top: 28px; }
  .hcard { flex-basis: 82vw; min-height: 240px; }
  .hc-p { font-size: 16px; }
  .gloss-pers { width: 42vw; top: 326px; inset-inline-end: -10vw; } /* kept smaller than the H1 block so the headline stays the LCP */
}

/* ------------------------------------------------------------------ section heads */
.section-head { display: grid; gap: 20px; max-width: 780px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head > p:last-child:not(.eyebrow) { font-size: 18px; color: var(--grey); max-width: 60ch; }

/* ------------------------------------------------------------------ what we do */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 300px;
  padding: 30px 28px 26px; border-radius: var(--radius);
  background: var(--sheen), var(--glass);
  transition: transform var(--t-ui) var(--ease-rise);
}
.card::after { /* brighter border on hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(var(--edge-dir), rgba(255, 255, 255, .45), rgba(43, 240, 177, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--t-ui) var(--ease-soft);
}
.card .spec {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%);
  transition: opacity var(--t-ui) var(--ease-soft);
}
.ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--mint);
}
.ico svg { width: 24px; height: 24px; }
.card h3 { position: relative; }
.card p { font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
html[lang="ar"] .card p { font-size: 15px; line-height: 1.75; }
.card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .card:hover::after { opacity: 1; }
  .card:hover .spec { opacity: 1; }
}
/* the one mint-gradient highlight card */
.hl-card { background: linear-gradient(150deg, #2BF0B1 0%, #19B98A 60%, #0E6E55 100%); color: var(--ink); box-shadow: var(--glow); }
html[dir="rtl"] .hl-card { background: linear-gradient(210deg, #2BF0B1 0%, #19B98A 60%, #0E6E55 100%); }
.hl-card::before { display: none; }
.hl-card .spec { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%); }
.hl-card > * { position: relative; z-index: 2; }
.hl-card h3, .hl-card p { color: var(--ink); }
.hl-card .ico { background: rgba(11, 15, 18, .14); box-shadow: inset 0 0 0 1px rgba(11, 15, 18, .18); color: var(--ink); }
.hl-card { isolation: isolate; }
.hl-card > .spec { position: absolute; z-index: 0; }
.hl-card::after { opacity: 0; }

/* ------------------------------------------------------------------ values (addendum 3): type + hairlines, no glass */
.values-wrap { position: relative; }
main > .values-s { overflow-x: hidden; overflow-x: clip; overflow-y: visible; } /* the glow fades past the section edge instead of being cut by it; never sideways */
.values-wrap .blob.b4 { --s: 420px; top: calc(85% + 110px); inset-inline-start: 72%; opacity: .5; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); background: radial-gradient(closest-side, rgba(43, 240, 177, .55), rgba(43, 240, 177, .16) 60%, rgba(43, 240, 177, 0)); }
.values { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.value { padding: 40px 40px 8px; border-inline-start: 1px solid var(--hair); }
.value:first-child { border-inline-start: 0; padding-inline-start: 0; }
.value .num { display: block; font: 600 14px/1 var(--f-display); color: var(--mint); font-variant-numeric: tabular-nums; letter-spacing: .06em; margin-bottom: 32px; }
.value h3 { font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--chalk); margin-bottom: 12px; }
.value p { font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 34ch; text-wrap: pretty; }
html[lang="ar"] .values-s h2 { line-height: 1.3; }
html[lang="ar"] .value h3 { font-size: 24px; font-weight: 600; line-height: 1.4; }
html[lang="ar"] .value p { font-size: 16px; line-height: 1.8; }

/* ------------------------------------------------------------------ ventures */
.ventures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.venture { --notch: 40px; min-height: 250px; padding: calc(var(--notch) + 34px) 30px 32px; }
.venture .panel-body { display: grid; gap: 12px; }
.venture h3 { font-size: 24px; }
html[lang="ar"] .venture h3 { font-family: "Montserrat", "Montserrat Fallback", var(--f-ar); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.venture p { font-size: 16px; color: var(--text-2); line-height: 1.6; }
.tag {
  position: absolute; top: calc((var(--notch) - 28px) / 2 + 2px); inset-inline-end: 22px;
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mint);
  background: rgba(11, 15, 18, .6); box-shadow: inset 0 0 0 1px rgba(43, 240, 177, .4);
}
html[lang="ar"] .tag { font-size: 12.5px; letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------------ contact */

.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(36px, 5vw, 64px); align-items: end; }
.contact-main { display: grid; gap: 22px; justify-items: start; }
.contact-main > p:not(.eyebrow) { font-size: 18px; color: var(--text-2); max-width: 52ch; }
.contact .btn-xl { margin-top: 10px; }
.facts { display: grid; gap: 26px; margin: 0; }
.facts dt { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
html[lang="ar"] .facts dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.facts dd { font-size: 16px; color: var(--chalk); line-height: 1.6; }
.facts dd a { color: var(--chalk); text-decoration: underline; text-decoration-color: rgba(43, 240, 177, .6); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color var(--t-ui) var(--ease-soft); }
html[lang="ar"] .facts dd a { text-underline-offset: .55em; }
.facts dd a:hover { color: var(--mint); }
.section-head > p:not(.eyebrow), .contact-main > p:not(.eyebrow), .doc p, .doc li { text-wrap: pretty; } /* no one-word last lines */

/* ------------------------------------------------------------------ footer */
.site-footer {
  position: relative; z-index: 2; background: var(--graphite); border-top: 1px solid var(--hair);
  padding: 72px 0 calc(32px + env(safe-area-inset-bottom, 0px)); font-size: 15px; color: var(--grey);
}
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.f-brand p { margin-top: 18px; max-width: 36ch; line-height: 1.6; }
.site-footer .brand-logo { height: 28px; }
.f-h { font: 600 12.5px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; }
html[lang="ar"] .f-h { letter-spacing: 0; text-transform: none; font-size: 13px; }
.site-footer ul { display: grid; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; color: #C9D1D6; transition: color var(--t-ui) var(--ease-soft); }
.site-footer li a:hover { color: var(--mint); }
.legal-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 13.5px; }

/* ------------------------------------------------------------------ legal & support */
.doc-glow {
  position: absolute; top: 0; inset-inline-end: 0; width: min(760px, 100%); height: 640px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side at 80% 18%, rgba(43, 240, 177, .16), rgba(43, 240, 177, 0));
}
html[dir="rtl"] .doc-glow { background: radial-gradient(closest-side at 20% 18%, rgba(43, 240, 177, .16), rgba(43, 240, 177, 0)); }
.doc {
  position: relative; z-index: 2;
  padding-top: calc(var(--safe-t) + var(--hh) + 32px);
  padding-bottom: clamp(72px, 10vw, 128px);
  padding-left: max(var(--g), env(safe-area-inset-left, 0px));
  padding-right: max(var(--g), env(safe-area-inset-right, 0px));
  color: var(--text-legal);
}
.col { max-width: 68ch; margin-inline: auto; }
html[lang="ar"] .col { max-width: 62ch; }
.doc-head { padding-top: 24px; margin-bottom: 28px; }
.doc h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.08; }
html[lang="ar"] .doc h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.3; }
.meta { margin-top: 14px; font-size: 14px; color: var(--grey); }
.doc p, .doc li { font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
html[lang="ar"] .doc p, html[lang="ar"] .doc li { font-size: 16px; line-height: 1.85; }
.doc .intro { font-size: 19px; color: var(--chalk); margin-bottom: 8px; }
.doc section { margin-top: 52px; }
.doc section > * + * { margin-top: 14px; }
.doc h2 { display: flex; align-items: baseline; gap: 14px; font-size: 22px; line-height: 1.35; letter-spacing: -.01em; font-weight: 700; color: var(--chalk); }
.doc h2 .num { flex: none; font: 600 14px/1 var(--f-display); color: var(--mint); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
html[lang="ar"] .doc h2 { font-size: 21px; font-weight: 600; letter-spacing: 0; }
.doc ul { display: grid; gap: 8px; }
.doc li { position: relative; padding-inline-start: 22px; }
.doc li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.doc .col a:not(.btn) { color: var(--mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc b { color: var(--chalk); font-weight: 600; }
.support-panel { margin-top: 48px !important; padding: 34px 32px 36px; }
.support-panel .cta { margin-top: 26px !important; }
.support-panel .btn { white-space: normal; }

/* sticky glass segmented control for legal tabs */
.seg { position: sticky; z-index: 20; top: calc(var(--safe-t) + var(--hh) + 10px); width: fit-content; max-width: 100%; margin: 8px auto 24px; border-radius: 999px; }
.seg-glass { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }
.seg-in {
  position: relative; z-index: 2; display: flex; gap: 4px; padding: 5px; border-radius: inherit;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.seg-in::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
  .seg-in { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  html[dir="rtl"] .seg-in { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
  .seg.at-end .seg-in, html[dir="rtl"] .seg.at-end .seg-in { -webkit-mask-image: none; mask-image: none; }
}
.seg a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; scroll-snap-align: start;
  font-size: 14.5px; font-weight: 500; color: #C9D1D6; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-ui) var(--ease-soft), color var(--t-ui) var(--ease-soft);
}
.seg a:hover { color: var(--chalk); background: rgba(255, 255, 255, .06); }
.seg a.on { background: var(--mint); color: var(--ink); font-weight: 600; }

/* 404 */
.nf .col { padding-top: 10vh; display: grid; gap: 18px; justify-items: center; text-align: center; }
.nf .actions { justify-content: center; }
.nf .intro[lang="ar"] { font-family: var(--f-ar); line-height: 1.8; }
.nf .actions { margin-top: 12px; }
.nf .btn[lang="ar"] { font-family: var(--f-ar); }

/* title rise on long-form pages (CSS only; body text never animates) */
@media (prefers-reduced-motion: no-preference) {
  [data-rise] { animation: riseIn var(--t-reveal) var(--ease-rise) .1s backwards; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(32px); } }

/* ------------------------------------------------------------------ reveals (only after html.js) */
.js:not(.rv-off) [data-rv] { opacity: 0; transform: translateY(32px); transition: opacity var(--t-reveal) var(--ease-rise), transform var(--t-reveal) var(--ease-rise); }
.js [data-rv].in { opacity: 1; transform: none; }
.js [data-rv].done { transition: transform var(--t-ui) var(--ease-rise); }
/* notched panels: rise the frame, fade the layers (opacity on the wrapper would switch off the blur) */
.js:not(.rv-off) .notch[data-rv] { opacity: 1; }
.js:not(.rv-off) .notch[data-rv] > *, .js:not(.rv-off) .notch[data-rv]::after { opacity: 0; transition: opacity var(--t-reveal) var(--ease-rise); transition-delay: inherit; }
.js .notch[data-rv].in > *, .js .notch[data-rv].in::after { opacity: 1; }

/* headline lines rise from a mask; the mint phrase arrives last with one glow pulse */
.js:not(.rv-off) [data-split]:not([data-split="hero"]):not(.split):not(.in) { opacity: 0; }
[data-split] .ln { display: block; overflow: hidden; padding: .12em .04em .18em; margin: -.12em -.04em -.18em; }
html[lang="ar"] [data-split] .ln { padding-top: .22em; margin-top: -.22em; padding-bottom: .26em; margin-bottom: -.26em; }
[data-split] .ln-in { display: block; transform: translateY(118%); transition: transform var(--t-reveal) var(--ease-rise); }
[data-split].in .ln-in, .rv-off [data-split] .ln-in { transform: none; }
.split em.hl { opacity: 0; transition: opacity 600ms var(--ease-soft); transition-delay: var(--hl-delay, 0ms); }
.split.in em.hl, .rv-off .split em.hl { opacity: 1; }
.split.in em.hl { animation: hlGlow 600ms var(--ease-soft) var(--hl-delay, 0ms) both; }
@keyframes hlGlow {
  0% { text-shadow: 0 0 0 rgba(43, 240, 177, 0); }
  50% { text-shadow: 0 0 28px rgba(43, 240, 177, .75); }
  100% { text-shadow: 0 0 0 rgba(43, 240, 177, 0); }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .grid, .ventures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: 1fr; border-top: 0; }
  .value, .value:first-child { display: grid; grid-template-columns: minmax(0, 38%) 1fr; grid-template-rows: auto 1fr; column-gap: 32px; align-content: start; padding: 28px 0; border-inline-start: 0; border-top: 1px solid var(--hair); }
  .value .num, .value h3 { grid-column: 1; }
  .value .num { margin-bottom: 12px; }
  .value p { grid-column: 2; grid-row: 1 / span 2; max-width: 52ch; }
  .values-wrap .blob.b4 { top: calc(100% + 60px); inset-inline-start: 18%; } /* under the title column, never under body copy */
}
@media (max-width: 768px) {
  body { font-size: 16px; }
  .lead { font-size: 16.5px; }
  .actions .btn { flex: 1 1 auto; }
  .values-wrap .blob.b4 { --s: 340px; }
  .b2, .b3, .b5, .s2, .b8, .b9 { display: none; } /* phones: hero, values + one static light per glass section, 1 streak */
  .blob { --s: 440px; }
  .b2 { --s: 340px; }
  .b6 { --s: 380px; top: 80%; inset-inline-start: 30%; opacity: .3; } /* brief: 72% / .45 — tuned so card body stays >= 7:1 at the brightest pixel */
  .b7 { --s: 360px; top: 78%; inset-inline-start: 70%; opacity: .45; }
  .streak { animation-iteration-count: 1 !important; }
  .grid, .ventures { grid-template-columns: 1fr; gap: 16px; }
  .card { min-height: 0; padding: 26px 22px 22px; }
  .values { border-top: 1px solid var(--hair); }
  .value, .value:first-child { display: block; padding: 24px 0 22px; }
  .value:first-child { border-top: 0; } /* the list's own top hairline, no double line */
  .value .num { margin-bottom: 12px; }
  .value h3 { font-size: 22px; }
  html[lang="ar"] .value h3 { font-size: 21px; }
  .value p { font-size: 16.5px; }
  .venture { --notch: 36px; min-height: 0; padding: calc(var(--notch) + 24px) 22px 26px; }
  .section-head > p:last-child:not(.eyebrow), .contact-main > p:not(.eyebrow) { font-size: 16.5px; }
  .contact { grid-template-columns: 1fr; padding: 32px 22px; }
  .btn-xl { width: 100%; padding: 0 20px; font-size: 19px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .f-brand { grid-column: 1 / -1; }
  .doc p, .doc li { font-size: 17px; }
  .doc .intro { font-size: 18px; }
  .support-panel { padding: 26px 22px 28px; }
  .seg { margin-inline: 0; }
}
@media (max-width: 480px) {
  .hero + .values-s { padding-top: 32px; }
}
@media (max-width: 768px) { .b6, .b7 { animation: none; } }
@media (max-width: 400px) {
  .site-footer .cols { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ reduced motion: everything visible, no loops */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js [data-rv], .js [data-split], .js [data-split] .ln-in, .js .notch[data-rv] > * { opacity: 1 !important; transform: none !important; }
  .split em.hl { opacity: 1 !important; }
  .streak, .cursor-light { display: none; }
  [data-rv], .sheet, .sheet * { transition: opacity 200ms linear !important; }
  .card { transition: none; }
}

@media (max-width: 599px) { html:not([lang="ar"]) .hero h1 .hbr { display: none; } } /* AR keeps the break: «يستحق أن يبقى.» stays whole on line 2 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .L1 .b1 { opacity: .55; } } /* static scene: same settled glow as Fix A */
@media (prefers-reduced-motion: reduce) { .scene { position: absolute; height: 100vh; } } /* static scene scrolls away with the hero, so the glossy d never sits behind later copy */

/* carousel dots (addendum 2) */
.car-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background-color var(--t-ui) var(--ease-soft), transform var(--t-ui) var(--ease-rise); }
.car-dots i.on { background: var(--mint); transform: scale(1.25); box-shadow: 0 0 10px rgba(43, 240, 177, .6); }