/* ═══════════════════════════════════════════════════════════
   Delusional Machines — delusionalmachines.com

   Light, plain, messaging-led. The brand's near-black + acid lime
   survives in three places: the logo, the highlighter swipe behind
   key phrases, and the closing band — which inverts to #0A0C0F.

   Accent splits by job, because #D6FF3D on white is ~1.2:1:
     moss  #4F6216  → accent TEXT (eyebrows, links)      ~7.2:1
     acid  #D6FF3D  → FILLS only (highlighter, dark band)
   ═══════════════════════════════════════════════════════════ */

/* ── fonts ─────────────────────────────────────────────── */
/* Space Grotesk and IBM Plex Sans are variable fonts: one file covers the whole
   weight axis. They were previously declared as three static faces each,
   pointing at three files that were byte-identical (same md5) — so a visitor
   using all three weights downloaded the same bytes three times under three
   URLs, about 134KB of pure waste. One @font-face with a weight *range* gets
   genuine interpolated 500 and 600 from a single download.
   Verified rather than assumed: at 48px, "Handgloves 123" measures 8.3px wider
   at weight 600 than at 400 in Plex Sans, so the axis is real and this is not
   silently collapsing every weight to 400. */
@font-face{font-family:"Space Grotesk";src:url(../fonts/spacegrotesk-var.woff2) format("woff2");font-weight:400 600;font-display:swap;font-style:normal}
/* IBM Plex Sans + Mono: the decks embed IBM Plex Mono for the tracked labels,
   so the site now uses the same family its collateral does. */
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibmplexsans-var.woff2) format("woff2");font-weight:400 600;font-display:swap;font-style:normal}
/* Plex Mono is not variable here — 400 and 500 are genuinely different files. */
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibmplexmono-400.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibmplexmono-500.woff2) format("woff2");font-weight:500;font-display:swap;font-style:normal}

/* ── tokens ────────────────────────────────────────────── */
:root{
  --bg:#FAFAF8;            /* page ground, warm off-white */
  --bg-2:#FFFFFF;          /* band A */
  --bg-3:#F2F1EC;          /* band B */

  --tx:#16181C;            /* headlines */
  --tx-2:#4C525B;          /* body */
  --tx-3:#666C74;          /* muted, numbers — 5.3:1 on --bg-2, 4.7:1 on --bg-3 */

  --line:rgba(22,24,28,.11);
  --line-2:rgba(22,24,28,.2);
  --card:rgba(255,255,255,.66);

  --moss:#4F6216;          /* accent text */
  --moss-2:#3E4E11;        /* accent text, hover */
  --acid:#D6FF3D;          /* fills only */

  --ink:#0A0C0F;           /* the one dark band */
  --ink-tx:#F4F6F9;
  --ink-tx-2:#99A1AF;
  /* Was #5D6672, which measured 3.37:1 on --ink. That clears WCAG AA only for
     large text, and this token sets the WhatsApp number at 14px — squarely
     body size, where AA needs 4.5:1. #74808F measures 4.87:1
     and still sits clearly below --ink-tx-2 at 7.53:1, so the three-step
     hierarchy on the dark band survives. */
  --ink-tx-3:#74808F;
  --ink-line:rgba(255,255,255,.09);
  /* Hover states, tokenised so the interactive palette lives with the rest of
     it rather than as loose hex in component rules. */
  --ink-hover:#000;          /* one step past --ink, dark buttons on hover */
  --acid-hover:#E4FF6B;      /* one step past --acid, the light button */

  --d:"Space Grotesk",system-ui,sans-serif;
  --b:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --gut:clamp(20px,5vw,64px);
  --pad:clamp(84px,10vw,124px);
  --max:1280px;
  --r:14px;
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
/* Reduced motion removes travel, not feedback.
   The blanket transition-duration:.001ms this replaced also killed colour and
   opacity transitions, which are state feedback rather than motion — a hover
   that snaps with no fade reads as broken rather than calm, and the request was
   for less movement, not less responsiveness. Transitions are therefore
   restricted to the non-moving properties and kept short, while animations and
   smooth scrolling stop outright. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-property:opacity,color,background-color,border-color,fill,stroke!important;
    transition-duration:.12s!important;
    scroll-behavior:auto!important;
  }
}

body{
  background:var(--bg);color:var(--tx);
  font-family:var(--b);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
::selection{background:var(--acid);color:var(--ink)}

/* Visually hidden until focused.
   This was previously parked at left:-9999px, which is safe in LTR — content
   off the left edge is unreachable and creates no scroll — but in an RTL
   document the left side is the END direction, so the browser turned it into
   9,999px of real scrollable overflow. On a phone that forces the viewport to
   zoom out to fit a ~10,000px-wide document, which is why the Arabic page
   rendered tiny, mostly blank, and drifted sideways.
   The clip-path technique removes it from view without ever extending the
   scroll area, and behaves identically in both directions. inset-inline-start
   puts the focused chip on the correct side per direction with no override. */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--ink);color:var(--acid);z-index:200;
  font-family:var(--m);font-size:12px}
.skip:focus{position:fixed;inset-inline-start:12px;top:12px;
  width:auto;height:auto;margin:0;padding:12px 18px;
  overflow:visible;clip-path:none}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ═══════════ TYPE ═══════════ */
.d1,.d2,.d3{font-family:var(--d);font-weight:400;letter-spacing:-.022em;line-height:1.02;
  color:var(--tx);text-wrap:balance}
.d1{font-size:clamp(2.5rem,6.1vw,4.55rem)}
.d2{font-size:clamp(2.05rem,4.6vw,3.35rem);line-height:1.05}
.d3{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.08}

.lead{font-size:clamp(1rem,1.28vw,1.125rem);line-height:1.68;color:var(--tx-2);max-width:34em}
.lead--sm{font-size:1rem;max-width:30em}

.micro{font-family:var(--m);font-size:.6875rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tx-3);line-height:1.6}
.micro--acid{color:var(--moss)}
.micro--muted{color:var(--tx-3)}

.dot{display:inline-block;width:5px;height:5px;background:var(--moss);
  border-radius:50%;margin-right:.72em;vertical-align:.12em}

.eyebrow{font-family:var(--m);font-size:.6875rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--moss);margin-bottom:22px;display:flex;align-items:center}
.eyebrow__n{color:var(--tx-3);margin-right:1.1em}

/* the acid survives as a marker swipe under the phrase, so the text
   stays near-black and legible while the brand colour still lands */
/* highlighter: the acid sits behind the lower third of the glyphs,
   so it reads as a marker swipe rather than a detached underline */
.mark{position:relative;white-space:nowrap;color:var(--tx);
  background-image:linear-gradient(var(--acid),var(--acid));
  background-repeat:no-repeat;background-size:100% .30em;background-position:0 80%;
  padding-inline:.07em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mark--ul{background-size:100% .26em;background-position:0 82%}

.rule{border:0;height:1px;background:var(--line);margin:26px 0}
.rule--short{width:46px;height:2px;background:var(--moss);margin:20px 0}

/* ═══════════ NAV ═══════════ */
.nav{position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(250,250,248,.76);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(250,250,248,.93)}
.nav__in{max-width:var(--max);margin-inline:auto;padding:0 var(--gut);height:70px;
  display:flex;align-items:center;gap:28px}

.brand{display:flex;align-items:center;gap:11px;color:var(--tx);flex-shrink:0}
.brand__mark{width:22px;height:22px}
.brand__type{font-family:var(--d);font-weight:500;font-size:.9rem;letter-spacing:-.005em}

.nav__links{display:flex;gap:30px;margin-left:auto}
.nav__links a{font-size:.8125rem;color:var(--tx-2);transition:color .2s;position:relative}
.nav__links a:hover,.nav__links a.is-on{color:var(--tx)}
.nav__links a.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:1.5px;background:var(--tx)}

.btn{display:inline-flex;align-items:center;gap:.7em;font-weight:500;
  border-radius:999px;transition:transform .22s cubic-bezier(.2,.7,.3,1),background .22s,color .22s;
  white-space:nowrap}
.btn__ar{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.btn:hover .btn__ar{transform:translateX(4px)}
.btn--sm{background:var(--ink);color:var(--bg);font-size:.8125rem;padding:9px 17px}
.btn--sm:hover{background:var(--ink-hover)}
.btn--lg{background:var(--ink);color:var(--bg);font-size:.9375rem;padding:15px 26px;margin-top:34px}
.btn--lg:hover{background:var(--ink-hover);transform:translateY(-1px)}
/* on the dark closing band the button flips to the acid */
.btn--light{background:var(--acid);color:var(--ink)}
.btn--light:hover{background:var(--acid-hover)}
.btn--dark{background:var(--ink);color:var(--bg);font-size:.875rem;padding:13px 22px;margin-top:22px}
.btn--dark:hover{background:var(--ink-hover)}

.nav__burger{display:none;width:34px;height:34px;margin-left:auto;
  flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.nav__burger span{display:block;width:19px;height:1.5px;background:var(--tx);transition:.25s}
.nav__burger[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.nav__mob{display:none;flex-direction:column;padding:6px var(--gut) 22px;border-top:1px solid var(--line)}
.nav__mob a{padding:13px 0;font-size:.95rem;color:var(--tx-2);border-bottom:1px solid var(--line)}
.nav__mob a:last-child{color:var(--moss);border-bottom:0;font-weight:500}
.nav.is-open .nav__mob{display:flex}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;background:var(--bg);
  padding:calc(70px + clamp(64px,9vw,112px)) 0 clamp(76px,9vw,112px);overflow:hidden}
/* Plan grid. Domain-literal, not decoration: the product turns floor plans and
   CAD exports into renders, and the pitch decks carry the same grid. Kept at the
   edge of visibility so it registers as paper, not as a UI motif. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(22,24,28,.032) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(to bottom,rgba(22,24,28,.032) 1px,transparent 1px) 0 0/96px 96px;
  -webkit-mask-image:radial-gradient(115% 85% at 46% 0%,#000 18%,transparent 72%);
  mask-image:radial-gradient(115% 85% at 46% 0%,#000 18%,transparent 72%)}
.hero::after{content:"";position:absolute;top:-30%;right:-12%;width:58%;height:112%;z-index:0;
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(214,255,61,.19),transparent 74%)}
.hero__in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}

.badge{display:inline-flex;align-items:center;font-family:var(--m);font-size:.6875rem;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 15px;margin-bottom:30px;
  background:rgba(255,255,255,.5)}
.hero .d1{margin-bottom:26px}
.hero .lead{max-width:31em}

.hero__rail{padding-top:8px;border-left:1px solid var(--line);padding-left:clamp(24px,3vw,42px)}

/* ═══════════ Launch notice ═══════════
   Sits in normal flow at the top of the hero rather than inside the fixed
   header. The header's 70px is hard-coded into .hero's padding-top and into
   html{scroll-padding-top:88px}, so a strip that wraps to two lines on a phone
   would silently desynchronise both. In flow it costs no layout maths and
   still lands in the first screenful.
   Delete this block together with .wip in index.html once the site is done. */
.wip{position:relative;z-index:1;margin-bottom:clamp(26px,3.5vw,42px)}
.wip__in{margin:0;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:9px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);font-size:.875rem;line-height:1.62;color:var(--tx-2)}
/* The acid is a fill behind near-black type, never the type itself — 1.2:1 as
   text on this ground. Same rule as .mark elsewhere on the page. */
.wip__tag{flex-shrink:0;padding:6px 9px;border-radius:5px;background:var(--acid);
  color:var(--tx);font:400 .6875rem/1 var(--m);letter-spacing:.13em;text-transform:uppercase}
.wip__tx{flex:1 1 18em;min-width:0;text-wrap:pretty}
.wip__link{flex-shrink:0;color:var(--moss);font-weight:500;
  border-bottom:1px solid rgba(79,98,22,.32);transition:color .18s,border-color .18s}
.wip__link:hover{color:var(--moss-2);border-bottom-color:var(--moss-2)}

.pull{font-family:var(--d);font-weight:400;font-size:clamp(1.02rem,1.4vw,1.22rem);
  line-height:1.5;letter-spacing:-.01em;color:var(--tx);margin-bottom:16px;text-wrap:pretty}
.ministeps{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.ministeps li{display:flex;align-items:baseline;gap:14px;font-size:.9375rem;color:var(--tx-2)}
.ministeps .num{font-family:var(--m);font-size:.6875rem;color:var(--tx-3);letter-spacing:.06em}

/* ═══════════ BANDS ═══════════ */
.band{padding:var(--pad) 0;position:relative;background:var(--bg-2)}
.band--alt{background:var(--bg-3)}
.band+.band{border-top:1px solid var(--line)}

.head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(44px,5.5vw,72px)}
.head__note{font-size:.9375rem;line-height:1.7;color:var(--tx-2);max-width:34em;padding-bottom:6px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}

/* ── 01 the gap ── */
.split{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.split__a,.split__b{padding:clamp(26px,3.2vw,40px)}
.split__a{border-right:1px solid var(--line)}
.steps{margin-top:26px;display:flex;flex-direction:column;gap:20px}
.steps li{display:flex;gap:16px;align-items:flex-start}
.steps .pip{font-family:var(--m);font-size:.625rem;letter-spacing:.06em;color:var(--tx-3);
  width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.steps b{display:block;font-family:var(--d);font-weight:400;font-size:1.0625rem;
  color:var(--tx);letter-spacing:-.01em;margin-bottom:3px}
.steps span{display:block;font-size:.875rem;line-height:1.6;color:var(--tx-3)}
.steps--live .pip{color:var(--moss);border-color:rgba(79,98,22,.4);background:rgba(214,255,61,.22)}
.steps--live span{color:var(--tx-2)}
.steps .is-dead b{text-decoration:line-through;text-decoration-color:var(--tx-3);color:var(--tx-3)}
.split__close{font-size:.9375rem;line-height:1.65;color:var(--tx-2)}
.split__close b{color:var(--tx);font-weight:500}

/* ── 02 beliefs ── */
.beliefs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,86px);align-items:start}
.beliefs .lead--sm{margin-top:22px}
.quotebox{margin-top:30px;padding:24px 26px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-3);font-size:.9375rem;line-height:1.72;color:var(--tx-2)}
.principles{display:flex;flex-direction:column}
.principles li{display:grid;grid-template-columns:52px 1fr;padding:26px 0;
  border-bottom:1px solid var(--line)}
.principles li:first-child{padding-top:0}
.principles li:last-child{border-bottom:0}
.principles .num{grid-column:1;font-family:var(--m);font-size:.6875rem;color:var(--tx-3);
  letter-spacing:.06em;padding-top:.55em}
.principles h3{grid-column:2;font-family:var(--d);font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);
  letter-spacing:-.015em;line-height:1.15;margin-bottom:10px}
.principles p{grid-column:2;font-size:.9375rem;line-height:1.72;color:var(--tx-2);max-width:38em}

/* ── 03 timeline ── */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.2vw,30px)}
.timeline li{position:relative;padding-top:52px}
.timeline li::before{content:"";position:absolute;top:18px;left:36px;right:calc(-1 * clamp(16px,2.2vw,30px));
  height:1px;background:var(--line)}
.timeline li:last-child::before{display:none}
.tl__node{position:absolute;top:0;left:0;width:37px;height:37px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;
  font-family:var(--m);font-size:.625rem;letter-spacing:.06em;color:var(--tx-3);
  background:var(--bg-2)}
.band--alt .tl__node{background:var(--bg-3)}
.tl__node--on{border-color:var(--moss);color:var(--moss);background:var(--acid)!important}
.timeline h3{font-family:var(--d);font-weight:400;font-size:1.28rem;letter-spacing:-.015em;
  margin-bottom:9px}
.timeline p{font-size:.875rem;line-height:1.66;color:var(--tx-2)}

/* ── 04 picker ── */
.picker{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);overflow:hidden;
  background:var(--bg-2)}
.picker__list{border-right:1px solid var(--line);background:var(--bg-3)}
.picker__list li+li{border-top:1px solid var(--line)}
.picker__list button{width:100%;display:flex;align-items:center;gap:16px;
  padding:22px clamp(20px,2.4vw,30px);font-family:var(--d);font-weight:400;
  font-size:clamp(1rem,1.35vw,1.16rem);letter-spacing:-.012em;color:var(--tx-3);
  transition:color .22s,background .22s;text-align:left}
.picker__list .num{font-family:var(--m);font-size:.6875rem;letter-spacing:.06em;
  color:var(--tx-3);transition:color .22s}
.picker__ar{margin-left:auto;opacity:0;color:var(--moss);transition:opacity .22s}
.picker__list button:hover{color:var(--tx-2)}
.picker__list button[aria-selected=true]{color:var(--tx);background:var(--bg-2)}
.picker__list button[aria-selected=true] .num{color:var(--moss)}
.picker__list button[aria-selected=true] .picker__ar{opacity:1}
.picker__panes{padding:clamp(28px,3.4vw,44px)}
.pane[hidden]{display:none}
.pane blockquote{font-family:var(--d);font-weight:400;
  font-size:clamp(1.16rem,1.85vw,1.5rem);line-height:1.4;letter-spacing:-.016em;
  color:var(--tx);margin-top:16px;text-wrap:pretty}
.pane p:last-child{font-size:.9375rem;line-height:1.72;color:var(--tx-2);max-width:36em}

/* ── 05 cards ── */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)}
.cap{grid-column:span 2;position:relative;padding:clamp(26px,2.8vw,34px);background:var(--bg-2);
  transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.7,.3,1)}
.cards .cap:nth-child(4){grid-column:2/span 2}
.cards .cap:nth-child(5){grid-column:4/span 2}
.cap:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 14px 34px -22px rgba(22,24,28,.45)}
.cap__n{position:absolute;top:clamp(26px,2.8vw,34px);right:clamp(26px,2.8vw,34px);
  font-family:var(--m);font-size:.6875rem;letter-spacing:.06em;color:var(--tx-3)}
.cap .micro{margin-bottom:12px;padding-right:2.4em}
.cap h3{font-family:var(--d);font-weight:400;font-size:1.42rem;letter-spacing:-.018em;
  margin-bottom:14px;line-height:1.15}
.cap p{font-size:.875rem;line-height:1.72;color:var(--tx-2)}
.cap__meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--m)!important;font-size:.625rem!important;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx-3)!important;line-height:1.7!important}

/* four-across variant, used by the stack */
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--4 .cap,
.cards--4 .cap:nth-child(4),
.cards--4 .cap:nth-child(5){grid-column:span 1}

/* the line a section closes on */
.closer{margin-top:clamp(36px,4.5vw,56px);max-width:52em;
  border-left:2px solid var(--acid);padding-left:20px;
  font-size:clamp(1rem,1.28vw,1.125rem);line-height:1.66;color:var(--tx-2)}
.closer b{color:var(--tx);font-weight:500}

/* three-across timeline, used by the commercials */
.timeline--3{grid-template-columns:repeat(3,1fr)}

/* ═══════════ 06 THE WORK ═══════════ */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.shot figcaption{margin-top:18px;font-size:.875rem;line-height:1.7;color:var(--tx-2);max-width:40em}
.shot figcaption b{display:block;font-family:var(--d);font-weight:500;font-size:1.05rem;
  color:var(--tx);letter-spacing:-.012em;margin-bottom:5px}

.ba{position:relative;overflow:hidden;border-radius:10px;background:var(--bg-3);
  aspect-ratio:1/1;cursor:ew-resize;touch-action:pan-y;user-select:none;
  box-shadow:0 1px 2px rgba(22,24,28,.1),0 14px 36px -20px rgba(22,24,28,.4)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__clip{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 50% 0 0);will-change:clip-path}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  transform:translateX(-1px);will-change:left;box-shadow:0 0 0 1px rgba(22,24,28,.14)}
.ba__handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;
  box-shadow:0 2px 12px rgba(22,24,28,.3)}
.ba__handle span::before,.ba__handle span::after{content:"";position:absolute;top:50%;
  width:0;height:0;border:5px solid transparent}
.ba__handle span::before{left:8px;transform:translateY(-50%);border-right-color:var(--tx)}
.ba__handle span::after{right:8px;transform:translateY(-50%);border-left-color:var(--tx)}
.ba__tag{position:absolute;bottom:14px;font-family:var(--m);font-size:.625rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
  background:rgba(10,12,15,.76);color:#F1F1EC;backdrop-filter:blur(6px);pointer-events:none}
.ba__tag--l{left:14px}
.ba__tag--r{right:14px}
.ba:focus-visible{outline:2px solid var(--moss);outline-offset:3px}

.quad{margin-top:clamp(56px,7vw,92px)}
.quad__grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px)}
.quad__grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;
  box-shadow:0 1px 2px rgba(22,24,28,.1),0 12px 30px -20px rgba(22,24,28,.45)}
.quad__grid figcaption{margin-top:11px;font-family:var(--d);font-size:.95rem;color:var(--tx);
  letter-spacing:-.01em}
.quad__grid figcaption span{display:block;font-family:var(--b);font-size:.8125rem;
  color:var(--tx-2);letter-spacing:0;margin-top:1px}
.quad__note{margin-top:22px;font-size:.9375rem;line-height:1.7;color:var(--tx-2);max-width:44em;
  border-left:2px solid var(--acid);padding-left:16px}

.pair{margin-top:clamp(56px,7vw,92px);display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(16px,2.4vw,32px);align-items:center}
.pair img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;
  box-shadow:0 1px 2px rgba(22,24,28,.1),0 14px 32px -20px rgba(22,24,28,.45)}
.pair figcaption{margin-top:12px}
.pair__ar{font-size:1.3rem;color:var(--moss)}
.pair__note{font-size:.9375rem;line-height:1.72;color:var(--tx-2)}
.pair__note b{color:var(--tx);font-family:var(--d);font-weight:500;letter-spacing:-.01em}

/* ═══════════ CTA — the one dark band ═══════════ */
.cta{position:relative;padding:clamp(96px,11vw,140px) 0;overflow:hidden;
  background:var(--ink);color:var(--ink-tx);border-top:1px solid var(--line)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,var(--ink-line) 1px,transparent 1px) 0 0/78px 78px,
    linear-gradient(to bottom,var(--ink-line) 1px,transparent 1px) 0 0/78px 78px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(100% 100% at 20% 50%,#000 10%,transparent 72%);
  mask-image:radial-gradient(100% 100% at 20% 50%,#000 10%,transparent 72%)}
.cta::after{content:"";position:absolute;bottom:-40%;left:6%;width:50%;height:130%;
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(214,255,61,.11),transparent 70%)}
.cta__in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
.cta .d2{color:var(--ink-tx)}
.cta .eyebrow{color:var(--acid)}
.cta .dot{background:var(--acid)}
/* on dark the swipe would fight the text, so the accent becomes solid acid */
.cta .mark{background:none;color:var(--acid);box-shadow:inset 0 -.085em 0 var(--acid)}
.cta__rail{padding-top:10px;border-left:1px solid var(--ink-line);padding-left:clamp(24px,3vw,42px)}
.cta__rail p{font-size:.9375rem;line-height:1.72;color:var(--ink-tx-2)}
.cta__rail .rule{background:var(--ink-line)}
/* The launch notice, repeated at the decision point — the one place on the page
   where a visitor who is not ready to book still needs somewhere to go.
   Selectors are scoped under .cta__rail to outrank `.cta__rail p`, which would
   otherwise repaint this text --ink-tx-2.
   Delete this block together with .cta__wip in index.html once the site is done. */
.cta__rail .cta__wip{margin-top:clamp(26px,3vw,36px);padding:18px 20px;
  border:1px solid var(--ink-line);border-radius:var(--r);
  background:rgba(255,255,255,.035)}
/* On the dark band the acid finally works as text — 15.8:1 on --ink — so the
   swipe-behind-type rule that governs it on the light bands does not apply. */
.cta__rail .cta__wip-tag{margin:0 0 9px;color:var(--acid);
  font:400 .6875rem/1 var(--m);letter-spacing:.13em;text-transform:uppercase}
.cta__rail .cta__wip-tx{margin:0 0 14px;color:var(--ink-tx);
  font-size:.9375rem;line-height:1.68}
.cta__wip-link{display:inline-flex;align-items:center;gap:.45em;
  color:var(--acid);font-weight:500;font-size:.9375rem;
  border-bottom:1px solid rgba(214,255,61,.34);transition:border-color .18s}
.cta__wip-link:hover{border-bottom-color:var(--acid)}

/* ═══════════ FOOTER ═══════════ */
.foot{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,80px)}
.foot__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(36px,5vw,64px);padding-bottom:clamp(40px,5vw,56px)}
.foot__brand .brand{margin-bottom:26px}
.foot__brand .micro{margin-bottom:9px}
.foot__addr{font-size:.8125rem;line-height:1.75;color:var(--tx-3);margin-bottom:18px}
/* Three columns since the legal pages landed: Sections / Elsewhere / Trust &
   Legal. minmax(0,1fr) rather than 1fr so a long link cannot force the track
   wider than its share. */
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
.foot__cols .micro{margin-bottom:14px}
.foot__cols a{display:block;font-size:.875rem;color:var(--tx-2);padding:5px 0;transition:color .2s}
.foot__cols a:hover{color:var(--moss)}
.foot__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding-top:22px;padding-bottom:30px;border-top:1px solid var(--line)}
.foot__bar p{font-size:.8125rem;color:var(--tx-3)}
.foot__mail{font-size:.8125rem;color:var(--tx-2);transition:color .2s}
.foot__mail:hover{color:var(--moss)}

/* ═══════════ REVEAL ═══════════ */
[data-rv]{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .timeline,.timeline--3{grid-template-columns:repeat(2,1fr);gap:34px 30px}
  .timeline li::before{display:none}
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards .cap:nth-child(4){grid-column:auto/span 2}
  .cards .cap:nth-child(5){grid-column:2/span 2}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .cards--4 .cap,.cards--4 .cap:nth-child(4){grid-column:span 1}
  .quad__grid{grid-template-columns:repeat(2,1fr)}
  .pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .pair__note{grid-column:1/-1;margin-top:8px}
}
@media (max-width:900px){
  .nav__links{display:none}
  .nav .btn--sm{display:none}
  .nav__burger{display:flex}
  .hero__in,.beliefs,.cta__in,.head,.foot__in{grid-template-columns:1fr}
  .head{gap:20px;align-items:start}
  .hero__rail,.cta__rail{border-left:0;border-top:1px solid var(--line);
    padding-left:0;padding-top:32px;margin-top:40px}
  .cta__rail{border-top-color:var(--ink-line)}
  .split,.picker{grid-template-columns:1fr}
  .split__a{border-right:0;border-bottom:1px solid var(--line)}
  .picker__list{border-right:0;border-bottom:1px solid var(--line)}
  .proof{grid-template-columns:1fr;gap:44px}
}
@media (max-width:620px){
  .timeline,.timeline--3,.cards,.cards--4,.quad__grid{grid-template-columns:1fr}
  .cap,.cards .cap:nth-child(4),.cards .cap:nth-child(5){grid-column:1/-1}
  .pair{grid-template-columns:1fr}
  .pair__ar{display:none}
  .principles li{grid-template-columns:40px 1fr}
  /* Three footer columns do not fit a phone. 2x2 keeps the link targets wide
     enough to tap without wrapping "Founder's portfolio" onto three lines. */
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__bar{flex-direction:column;align-items:flex-start}

  /* ── phone corrections ──────────────────────────────────
     Most of this site's traffic arrives on a phone. Everything below fixes a
     defect measured under real device emulation at 320-412px, not a guess.

     The nowrap that keeps the highlighter swipe one clean band is what pushed
     the hero past the viewport — "gaps between people." is ~418px on its own at
     the minimum display size, so 118px of the headline was cut off on a 375px
     iPhone SE and 26px on a Pixel 7. body{overflow-x:hidden} hid the scrollbar
     and made it look intentional. .mark already sets box-decoration-break:clone,
     which exists precisely so the swipe survives wrapping. */
  .mark{white-space:normal}

  /* 10-11px tracked-out mono reads fine on a desktop and does not on a phone.
     These carry real content — capability lists, section labels — so the size
     goes up and the tracking comes down to buy the width back. */
  .micro,.eyebrow,.badge{font-size:.75rem;letter-spacing:.12em}
  .cap__meta{font-size:.75rem!important;letter-spacing:.07em}
  .ministeps .num,.picker__list .num,.principles .num{font-size:.75rem}
  .ba__tag{font-size:.625rem;padding:5px 9px}
}

/* Touch targets, keyed to the pointer rather than to a width. A tablet is a
   finger device at 768px exactly as much as a phone is at 390px, and the 620px
   breakpoint above would have left iPad visitors tapping 24px links. Measured
   against the 44px iOS guideline: footer links were 33px, the contact address
   20px, the burger 34px, and both brand marks 24px. */
@media (pointer:coarse){
  .brand{padding-block:10px}
  .nav__burger{width:44px;height:44px}
  .foot__cols a{padding:11px 0}
  .foot__mail{display:inline-block;padding:11px 0}
  .wip__link{display:inline-block;padding:7px 0}
  .cta__wip-link{padding:9px 0}
}

/* ═══════════ WhatsApp ═══════════
   The primary contact channel while the hello@ mailbox does not exist, and the
   channel that actually gets used in Saudi and the wider Gulf — where business
   conversations start on WhatsApp far more often than in email.

   The glyph carries the recognition, so it inherits currentColor rather than
   arriving in WhatsApp green: #25D366 against the acid #D6FF3D would be two
   saturated greens fighting inside the same band, and the mark is distinctive
   enough by shape alone. */
.wa{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap}
.wa__icon{width:1.05em;height:1.05em;flex-shrink:0;fill:currentColor}

/* Secondary action under the primary button on the dark closing band. */
.cta__wa{display:inline-flex;align-items:center;gap:.6em;margin-top:22px;
  padding:13px 22px;border:1px solid var(--ink-line);border-radius:999px;
  color:var(--ink-tx);font-size:.9375rem;font-weight:500;
  transition:border-color .2s,background .2s}
.cta__wa:hover{border-color:var(--ink-tx-2);background:rgba(255,255,255,.05)}
.cta__wa .wa__icon{width:19px;height:19px}

/* The number itself, set in mono and kept LTR even on the Arabic page — a
   phone number is read left-to-right in every locale. */
.wa__num{margin-top:10px;font-family:var(--m);font-size:.875rem;color:var(--ink-tx-3);
  direction:ltr;unicode-bidi:embed}

.foot__wa{display:inline-flex;align-items:center;gap:.5em;
  font-size:.8125rem;color:var(--tx-2);transition:color .2s}
.foot__wa:hover{color:var(--moss)}
.foot__wa .wa__icon{width:15px;height:15px}