/* Durusi, 2026 rebuild. One stylesheet for the whole site: the base and the home
   page sections first, then the subpage layer every other page is built from.
   Plain CSS, logical properties throughout, so the Arabic pages reuse this file
   with html[dir=rtl] and html[lang=ar] only. Mobile first: the plain rules are the
   small screen, and min-width queries add the wide layouts.
   Brand tokens from the Durusi Brand Book; the token name sits beside every hex. */

/* ---------- tokens ---------- */

:root{
  --tint:#F6F4F0;              /* stone, derived: a warm off-white like the reference's #F7F6F3, for light sections that must not be white or frost */
  --frost:#F2F5F7;            /* frost */
  --white:#FFFFFF;            /* ivory/white */
  --mint:#45FBB2;             /* mint/300 */
  --forest:#102718;           /* forest (mint/900) */
  --electric:#00E0E8;         /* electric/300 */
  --lilac:#CA9FFF;            /* lilac/300 */
  --magenta:#FE019A;          /* magenta/500 */
  --teal:#0C333B;             /* deep teal */
  --neutral:#B4B8BB;          /* neutral/300 */
  --ink-dark:#06171B;         /* ink-dark, derived: near-black teal */
  --teal-800:#1B4750;         /* teal-800, derived: footer gradient end */
  --muted-light:#4A5459;      /* muted-light, derived: muted text on light */
  --hair:rgba(16,39,24,.12);  /* hair: forest at 12% */
  --hair-dark:rgba(255,255,255,.14); /* hair-dark: white at 14% */
  --electric-ink:#017579;     /* electric-ink, derived: electric/300 darkened for text on light, 5.5:1 on white, 5.0:1 on frost */
  --tint:#F6F4F0;             /* tint, derived: the pale blue ground of the reference, a breath of electric on white */
  --font-en:"Overpass";       /* Overpass, the free Highway Gothic cousin of Mubadala's Interstate */
  --font-ar:"Rubik";
  --sans:var(--font-en),system-ui,sans-serif;
  --ease:cubic-bezier(.39,.24,.3,1);
  --wrap:1380px;
  --pad:22px;
  --sec:120px;
  --t2:clamp(32px,4.4vw,56px);
  --t1:clamp(34px,5.4vw,64px); /* the page-hero title, one step above a section title */
}
html.type-alt{--font-en:"Fredoka"}
html[lang=ar]{--sans:var(--font-ar),system-ui,sans-serif}
@media (min-width:1600px){:root{--wrap:1484px}}
@media (max-width:700px){:root{--sec:56px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink-dark)} /* the ground behind the page: the phone paints its edges with this, 5 Sep 2026 */
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  color:var(--forest);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-align:start;
}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--forest);outline-offset:2px;box-shadow:0 0 0 6px var(--white)} /* forest ring inside a white halo: reads on light and on dark */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;padding:10px 16px;background:var(--forest);color:var(--white);font-weight:600} /* forest on white: mint fills are retired */
.skip:focus{top:16px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding:var(--sec) 0}

/* ---------- wordmark ---------- */
.wordmark{font-family:var(--font-en),system-ui,sans-serif;font-weight:600;font-size:26px;letter-spacing:-.2px;line-height:1;display:inline-block}
.wordmark i{font-style:normal;color:var(--mint)}
.brand{display:inline-flex;align-items:center;min-height:44px}
.ft-brand .brand{margin-block:-9px} /* keeps the footer wordmark where it was */

/* ---------- section titles, two lines: light then bold ---------- */
.t2{font-size:var(--t2);line-height:1;letter-spacing:0;text-transform:uppercase}
.t2 .lt{display:block;font-weight:300}
.t2 .bd{display:block;font-weight:700}
.sec-head{display:grid;gap:32px 64px;align-items:end}
@media (min-width:900px){.sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.desc{font-weight:300;font-size:18px;line-height:1.3;max-width:70ch;color:var(--muted-light)}
.on-dark .desc{color:var(--neutral)}
.sec-head .desc + .btn-line{margin-top:28px}
@media (max-width:700px){.desc{font-size:16px}}

/* ---------- buttons: one outlined button, everywhere ----------
   The founder retired the mint fill on 4 Sep 2026. .btn-line is the button: a forest
   outline and label on a light ground, white on a dark one, and on hover it fills
   with its own outline colour. .btn is kept as an alias so older markup renders as
   the same button. The dark wrappers listed below switch it to white on their own;
   add .btn-line--light only on a dark ground that is not one of them. */
.btn,.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:48px;padding:0 28px;border-radius:0;
  border:1px solid var(--forest); /* forest #102718 */
  font-size:12px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;line-height:1;white-space:nowrap;
  color:var(--forest);background:transparent;
  transition:background-color .2s,color .2s,border-color .2s;
}
.btn-line svg{width:6px;height:10px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn:hover,.btn-line:hover{background:var(--forest);color:var(--white)}
.btn-line--light,.btn-ghost-light,
:is(.hero,.results,.on-dark,.cta-band,.quote-card--dark,.ft) :is(.btn,.btn-line){color:var(--white);border-color:var(--white)} /* ivory/white #FFFFFF */
.btn-line--light:hover,.btn-ghost-light:hover,
:is(.hero,.results,.on-dark,.cta-band,.quote-card--dark,.ft) :is(.btn,.btn-line):hover{background:var(--white);color:var(--forest)}
@media (max-width:640px){.btn-line--wide{width:100%;justify-content:center}}
[dir=rtl] .btn-line svg,[dir=rtl] .arrow svg{transform:scaleX(-1)}

/* round arrow button, used on panels and tiles */
.arrow{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .2s,border-color .2s,color .2s;
}
.arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- header ---------- */
.hd{
  position:fixed;top:0;inset-inline:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  /* The inline padding tracks the content container, so the wordmark lines up with the
     section titles below it at any width. The height puts it level with the reference. */
  padding-block:0;padding-inline:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));
  padding-top:env(safe-area-inset-top);
  height:calc(104px + env(safe-area-inset-top));color:var(--white);
  /* No transition here on purpose: leaving the solid state must be instant, or the
     frost bar fades out over the dark hero and reads as a flash on a fast scroll up. */
  transition:none;
}
html.no-js .hd{position:absolute;height:auto}
.hd-right{display:flex;align-items:center;gap:36px}
.lang{font-family:var(--font-ar),system-ui,sans-serif;font-weight:500;font-size:15px;line-height:1;display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;margin-inline:-8px}
/* The light header, for every page but the home page: the same bar, a dark wordmark
   and a dark glyph on a transparent ground, then the frost bar with its hairline once
   scrolled (.hd--solid, below, is shared). The :has() line is a safety net for a page
   that does not carry the class yet; the class is still the rule. */
/* .hd--light: the subpage header now sits on the dark hero and inherits the white default */
.hd--solid{
  background:var(--frost);color:var(--forest);
  height:64px;
  box-shadow:0 1px 0 var(--hair);
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,height .25s ease,padding .25s ease;
}
.menu-btn{display:inline-flex;align-items:center;gap:14px;height:44px;padding:0 9px;margin-inline-end:-9px}
.menu-btn .glyph{display:block;width:26px;height:14px;position:relative}
.menu-btn .glyph span{position:absolute;inset-inline:0;height:2px;background:currentColor;border-radius:1px;transition:transform .3s}
.menu-btn .glyph span:first-child{top:2px}
.menu-btn .glyph span:last-child{top:10px}
.menu-btn .word{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s}
[dir=rtl] .menu-btn .word{transform:translateX(-6px)}
@media (hover:hover) and (min-width:900px){
  .menu-btn:hover .word,.menu-btn:focus-visible .word{opacity:1;transform:none}
}
@media (max-width:700px){
  .hd{height:84px}
  .hd--solid{height:56px}
  .hd-right{gap:24px}
  .menu-btn .word{display:none}
}
.nav-nojs{display:none;gap:20px;flex-wrap:wrap;font-size:15px}
html.no-js .nav-nojs{display:flex}
html.no-js .menu-btn{display:none}

/* ---------- menu overlay ---------- */
.menu{
  position:fixed;inset:0;z-index:70;
  background:var(--frost);color:var(--forest);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .5s ease-in-out,visibility 0s linear .5s;
  overflow:hidden;
}
.menu.is-open{transform:none;visibility:visible;transition:transform .5s ease-in-out,visibility 0s}
html.no-js .menu{display:none}
.menu::before{
  content:"";position:absolute;top:-20%;inset-inline-end:14%;
  width:160px;height:140%;pointer-events:none;
  background:linear-gradient(197deg,var(--electric),var(--lilac)); /* electric/300 to lilac/300 */
  opacity:.18;transform:skewX(-24deg);
}
[dir=rtl] .menu::before{transform:skewX(24deg)}
.menu-in{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:0 50px 48px}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:40px 0;min-height:104px}
.menu-close{width:auto;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding-inline:9px;margin-inline-end:-9px}
.menu-close .word{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s}
[dir=rtl] .menu-close .word{transform:translateX(-6px)}
@media (hover:hover) and (min-width:900px){.menu-close:hover .word,.menu-close:focus-visible .word{opacity:1;transform:none}}
@media (max-width:700px){.menu-close .word{display:none}}
.menu-close svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
.menu-list{display:flex;flex-direction:column;gap:14px;padding:16px 0 40px;max-width:var(--wrap);width:100%;margin-inline:auto}
.menu-list a{font-weight:300;font-size:clamp(30px,4.6vw,53px);line-height:1.22;color:var(--muted-light);display:inline-block;width:max-content;max-width:100%;transition:color .2s}
.menu-list a:hover{color:var(--electric-ink)}
.menu-list a[aria-current=page]{font-weight:500;color:var(--forest)}
.menu-foot{margin-top:auto;padding-top:32px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:var(--wrap);width:100%;margin-inline:auto}
.socials{display:flex;gap:12px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,background-color .2s}
.socials a:hover{border-color:var(--electric-ink);color:var(--electric-ink)}
.socials svg{width:16px;height:16px;fill:currentColor}
.socials .stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){
  .menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:6px;align-content:start}
  .menu-list a[href$="contact"]{grid-column:2} /* Contact is always the last item, bottom right (his call, 4 Sep 2026) */
  .menu-list a{width:auto}
}
@media (max-width:700px){
  .menu::before{width:14px;inset-inline-end:10%}
  .menu-in{padding:0 22px 32px}
  .menu-head{padding:20px 0;min-height:64px}
  .menu-list{gap:22px;padding:24px 0 32px}
  .menu-list a{font-size:28px}
}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;min-height:max(100svh,640px);
  background:var(--ink-dark);color:var(--white);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-wave{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-slab{
  position:absolute;inset-block:0;inset-inline-start:0;width:64%;
  background:rgba(0,0,0,.45);
  clip-path:polygon(0 0,100% 0,76% 100%,0 100%);
}
[dir=rtl] .hero-slab{clip-path:polygon(0 0,100% 0,100% 100%,24% 100%)}
.hero-in{position:static;z-index:2;padding:19vh 13vw 0;max-width:100%} /* static so .hero-mark anchors to .hero; flex items honour z-index */
.hero-head{display:block}
.hero-h{
  font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;
  max-width:12.5em; /* measured: the lead and the main line each take two lines in Fredoka */
}
@media (min-width:900px) and (max-width:1180px){.hero-mark .num{font-size:88px}}
html[lang=ar] :is(.hero-h,.panel h3,.btn-line,.btn,.kicker,.ft-h,.sp-eyebrow,.menu-btn .word){letter-spacing:0}
html[lang=ar] :is(.hero-h,.t2,.panel h3,.ways-intro h2,.sp-title,.step h3){line-height:1.25}
/* The hero title rises line by line from behind its own mask, which is what makes the
   opening read as motion rather than as a block that fades. */
.hero-h .lead,.hero-h .main{display:block;overflow:hidden;padding-block-end:.08em;margin-block-end:-.08em}
html.js .hero-h.rv{translate:none}
html.js .hero-h .lead > span,html.js .hero-h .main > span{
  display:block;translate:0 112%;transition:translate .95s cubic-bezier(.16,1,.3,1);
}
html.js .hero-h.in .lead > span{translate:none}
html.js .hero-h.in .main > span{translate:none;transition-delay:.14s}
.hero-h .lead{display:block;font-weight:300}
.hero-h .main{display:block;font-weight:700}
.hero-sub{
  margin-top:28px;
  font-weight:300;font-size:20px;line-height:1.35;max-width:34ch;
  color:rgba(255,255,255,.86);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-mark{
  position:absolute;z-index:2;bottom:7vh;inset-inline-end:6vw;
  text-align:end;line-height:1;
}
.hero-mark .num{display:block;font-weight:700;font-size:120px;color:var(--mint);letter-spacing:-3px;line-height:.9}
.hero-mark .lbl{display:block;font-weight:300;font-size:28px;margin-top:8px}
@media (min-width:900px) and (max-height:760px){
  .hero-mark .num{font-size:88px}
  .hero-in{padding-top:16vh}
}
@media (max-width:899px){
  .hero{padding:110px var(--pad) 56px}
  .hero-in{padding:0}
  .hero-sub{font-size:17px;margin-top:22px}
  .hero-actions{margin-top:28px}
  .hero-actions :is(.btn,.btn-line){flex:1 1 auto}
  .hero-mark{position:static;text-align:start;margin-top:44px}
  .hero-mark .num{font-size:64px;letter-spacing:-2px}
  .hero-mark .lbl{font-size:20px}
  .hero-slab,[dir=rtl] .hero-slab{width:100%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);background:rgba(0,0,0,.35)}
}

/* ---------- parent quote ---------- */
.quote{position:relative;overflow:hidden;background:var(--white)}
.quote::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:0;width:38%;
  background:var(--teal); /* deep teal */
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
  pointer-events:none;
}
[dir=rtl] .quote::after{clip-path:polygon(0 0,66% 0,100% 100%,0 100%)}
.quote .wrap{position:relative;z-index:1}
.kicker{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--muted-light)}
.quote blockquote .w{transition:opacity .15s linear}
.qmark{display:block;font-size:160px;line-height:.55;font-weight:700;color:var(--neutral);opacity:.25;margin-top:44px;height:70px;overflow:visible}
.quote blockquote{font-weight:300;font-size:28px;line-height:1.25;max-width:30ch;color:var(--forest);margin-top:8px}
.quote .cite{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:28px;font-style:normal}
.quote .cite .name{color:var(--electric-ink);font-weight:600;font-size:16px}
.quote .cite .role{color:var(--muted-light);font-size:14px}
.quote .btn-line{margin-top:44px}
@media (max-width:899px){
  .quote::after{display:none}
  .quote blockquote{font-size:20px}
  .qmark{font-size:120px;height:54px;margin-top:36px}
}

/* ---------- results band ---------- */
.results{
  color:var(--white);
  background:
    radial-gradient(60% 55% at 0% 0%,rgba(0,224,232,.12),transparent 70%),      /* electric/300 at 12% */
    radial-gradient(50% 55% at 100% 100%,rgba(202,159,255,.08),transparent 70%), /* lilac/300 at 8% */
    radial-gradient(rgba(255,255,255,.03) 1px,transparent 1.2px) 0 0/22px 22px,  /* dot grid, white at 3% */
    var(--teal); /* deep teal */
}
[dir=rtl] .results{
  background:
    radial-gradient(60% 55% at 100% 0%,rgba(0,224,232,.12),transparent 70%),
    radial-gradient(50% 55% at 0% 100%,rgba(202,159,255,.08),transparent 70%),
    radial-gradient(rgba(255,255,255,.03) 1px,transparent 1.2px) 0 0/22px 22px,
    var(--teal);
}
/* .stats is also the subpage stats strip: the plain rules are the light ground and the
   .results / .on-dark rules switch the hairlines, the labels and the first number for dark. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:88px}
.stats:first-child{margin-top:0}
.stat{padding:8px 32px}
.stat:first-child{padding-inline-start:0}
.stat + .stat{border-inline-start:1px solid var(--hair)} /* hair: forest at 12% */
.stat .num{display:block;font-weight:700;font-size:72px;line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.stat:first-child .num{color:var(--electric-ink)} /* electric-ink #017579 */
.stat .lbl{display:block;margin-top:14px;font-weight:300;font-size:16px;color:var(--muted-light)} /* muted-light #4A5459 */
:is(.results,.on-dark) .stat + .stat{border-color:var(--hair-dark)}
:is(.results,.on-dark) .stat:first-child .num{color:var(--mint)} /* mint/300 as text, the one place it survives beside the wordmark */
:is(.results,.on-dark) .stat .lbl{color:var(--neutral)} /* neutral/300 #B4B8BB */
.results .btn-line,.stats + .btn-line{margin-top:72px}
@media (max-width:899px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 0;margin-top:56px}
  .stat{padding:0 20px}
  .stat:nth-child(odd){padding-inline-start:0}
  .stat:nth-child(3){border-inline-start:0}
  .stat .num{font-size:44px;letter-spacing:-1px}
  .results .btn-line,.stats + .btn-line{margin-top:48px}
}

/* ---------- how it works ---------- */
.steps{margin-top:72px;border-top:1px solid var(--hair)}
.step{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.15fr);gap:16px 40px;
  align-items:start;padding:40px 0;border-bottom:1px solid var(--hair);
}
.step .n{font-size:14px;letter-spacing:2px;color:var(--electric-ink);font-weight:500;padding-top:10px}
.step h3{font-weight:600;font-size:28px;line-height:1.1}
.step p{font-weight:300;font-size:18px;line-height:1.35;color:var(--muted-light)}
.how .btn-line{margin-top:56px}
@media (max-width:899px){
  .steps{margin-top:44px}
  .step{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .step .n{padding-top:0}
  .step h3{font-size:22px}
  .step p{font-size:16px}
  .how .btn-line{margin-top:36px}
}

/* ---------- ways to learn ---------- */
.ways > .split-row{border-top:1px solid var(--hair)} /* the "Ways to learn" heading above it was removed 4 Sep 2026 */
.ways-intro{text-align:center;padding:0 0 64px}
.ways-intro .wrap{border-top:1px solid var(--hair);padding-top:var(--sec)}
.ways-intro h2{font-size:24px;line-height:1.1;text-transform:uppercase;letter-spacing:0}
.ways-intro h2 .lt{font-weight:300}
.ways-intro h2 .bd{font-weight:700}
.ways-intro .acc{display:block;margin-top:12px;font-size:16px;font-weight:400;color:var(--electric-ink)}
.panel{
  position:relative;display:grid;place-items:center;text-align:center;
  min-height:max(56vh,380px);padding:48px var(--pad);color:var(--white);isolation:isolate;overflow:hidden;
}
.panel-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.panel h3{font-weight:700;font-size:36px;line-height:1;text-transform:uppercase;letter-spacing:-.5px}
.panel .meta{font-weight:300;font-size:16px;color:rgba(255,255,255,.7)}
.panel .arrow{margin-top:14px}
.panel:hover .arrow,.panel:focus-visible .arrow{background:var(--electric);border-color:var(--electric);color:var(--forest)}
.panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;transition:opacity .4s}
.panel:hover::after,.panel:focus-visible::after{opacity:1}
.panel--home{background:linear-gradient(120deg,var(--teal),#0E4A56)} /* deep teal to teal-700ish */
.panel--home::after{background:radial-gradient(45% 70% at 80% 30%,rgba(0,224,232,.28),transparent 70%)} /* electric/300 glow */
.panel--online{background:linear-gradient(120deg,#1F1638,var(--teal))} /* deep plum to deep teal */
.panel--online::after{background:radial-gradient(45% 70% at 20% 70%,rgba(202,159,255,.26),transparent 70%)} /* lilac/300 glow */
.panel--exam{background:linear-gradient(120deg,#0B2A22,var(--teal))} /* deep green to deep teal */
.panel--exam::after{background:radial-gradient(45% 70% at 78% 72%,rgba(69,251,178,.22),transparent 70%)} /* mint/300 glow */
[dir=rtl] .panel--home::after{background:radial-gradient(45% 70% at 20% 30%,rgba(0,224,232,.28),transparent 70%)}
[dir=rtl] .panel--online::after{background:radial-gradient(45% 70% at 80% 70%,rgba(202,159,255,.26),transparent 70%)}
[dir=rtl] .panel--exam::after{background:radial-gradient(45% 70% at 22% 72%,rgba(69,251,178,.22),transparent 70%)}
@media (max-width:700px){
  .ways-intro{padding-bottom:40px}
  .panel{min-height:46vh}
  .panel h3{font-size:26px}
}

/* ---------- the app ---------- */
.app{background:var(--frost)}
.app-grid{display:grid;gap:56px;align-items:center}
@media (min-width:900px){.app-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}}
.phone-col{display:flex;justify-content:center}
.phone{
  /* The prototype draws its own device. The wrapper adds only a soft ellipse of
     shadow beneath it, because a rectangular shadow would give the frame away. */
  position:relative;width:300px;
}

.app-demo{display:block;position:relative;z-index:1;width:100%;aspect-ratio:414/868;border:0;background:var(--frost)} /* frost, so the frame edge cannot show against the section */
.app-list{margin-top:44px;border-top:1px solid var(--hair)}
.app-list li{padding:22px 0;border-bottom:1px solid var(--hair);font-weight:300;font-size:22px;line-height:1.25;display:flex;gap:20px;align-items:baseline}
.app-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--electric);position:relative;top:-2px}
.app .btn-line{margin-top:44px}
@media (max-width:899px){
  .phone-col{order:2}
  .app-text{order:1}
  .app-list li{font-size:18px;padding:18px 0}
}

/* ---------- One Durusi: the split ----------
   Two panels that meet on a diagonal seam. The seam is a clip-path on each panel,
   complementary to the pixel, so no sliver of the page can ever show between them.
   The photographs are not transformed, which is why this repaints cheaply. */
.split{padding:var(--sec) 0 0;overflow:hidden}
.split-head{text-align:center}
.split-head .acc{margin-top:12px}
.split-row{display:flex;margin-top:64px;height:clamp(420px,64vh,620px)}
.sp{
  position:relative;flex:1 1 0;min-width:0;display:block;overflow:hidden;isolation:isolate;
  color:var(--white);transition:flex-grow .5s ease;
}
.sp:first-child{z-index:1;clip-path:polygon(0 0,100% 0,calc(100% - 120px) 100%,0 100%)}
.sp:last-child{margin-inline-start:-120px;clip-path:polygon(119px 0,100% 0,100% 100%,-1px 100%)}
[dir=rtl] .sp:first-child{clip-path:polygon(0 0,100% 0,100% 100%,120px 100%)}
[dir=rtl] .sp:last-child{clip-path:polygon(-1px 0,calc(100% - 119px) 0,100% 100%,-1px 100%)}
.sp-bg{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.sp-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.sp:hover .sp-bg img,.sp:focus-visible .sp-bg img{transform:scale(1.05)}
.sp::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,23,27,.28),rgba(6,23,27,.82))} /* ink-dark veil */
.sp::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s ease}
.sp::after{background:linear-gradient(180deg,rgba(6,23,27,.10),rgba(6,23,27,.62))} /* ink-dark, a touch lighter than the resting veil */
.sp:hover::after,.sp:focus-visible::after{opacity:1}
.sp:hover,.sp:focus-visible{flex-grow:1.35}
.sp-in{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:48px 24px;text-align:center;
}
.sp-eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.82)}
.sp-title{font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em;max-width:12ch}
.sp-more{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:6px;opacity:0;translate:0 14px;transition:opacity .45s ease,translate .45s ease}
.sp:hover .sp-more,.sp:focus-visible .sp-more{opacity:1;translate:none}
.sp-line{font-weight:300;font-size:16px;line-height:1.35;max-width:26ch;color:rgba(255,255,255,.92)}
.sp:hover .arrow,.sp:focus-visible .arrow{background:var(--electric);border-color:var(--electric);color:var(--forest)} /* electric/300, as the panels: no mint fills */
@media (max-width:899px){
  .split-row{flex-direction:column;height:auto;margin-top:40px}
  .sp,.sp:hover,.sp:focus-visible,.sp:first-child,.sp:last-child{
    clip-path:none;margin-inline-start:0;height:46vh;min-height:300px;flex:none;
  }
  .sp-more{opacity:1;translate:none}
  .sp-title{font-size:26px}
}

/* ---------- footer ---------- */
.ft{
  position:relative;isolation:isolate;overflow:hidden;
  padding:var(--sec) 0;color:var(--white);
  background:
    radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/22px 22px, /* the same dot grid as the closing band */
    linear-gradient(180deg,var(--teal) 0%,var(--teal-800) 100%); /* deep teal, continuing the closing band, into teal-800 */
  animation:heroGrid 48s linear infinite;
}
.ft::before{content:none}
[dir=rtl] .ft{background:linear-gradient(120deg,var(--teal) 10%,var(--teal-800) 85%)}
[dir=rtl] .ft::before{clip-path:polygon(100% 0,100% 200%,62.5% 0)}
.ft .wrap{position:relative;z-index:1}
.ft-top{display:grid;gap:48px 40px}
@media (min-width:1024px){.ft-top{grid-template-columns:1.3fr repeat(5,minmax(0,1fr))}} /* six columns since 4 Sep 2026: curricula and exam prep are separate */
@media (min-width:600px) and (max-width:1023px){.ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-brand{grid-column:1/-1}}
.ft-brand .tag{margin-top:20px;font-weight:300;font-size:16px;line-height:1.4;color:var(--neutral);max-width:36ch}
.ft-h{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.6);margin-bottom:22px}
.ft-col ul{display:flex;flex-direction:column;gap:20px}
.ft-col a{font-weight:300;font-size:18px;line-height:1.2;color:var(--neutral);transition:color .2s}
.ft-col a:hover{color:var(--electric)}
a[href^="tel:"]{white-space:nowrap} /* a phone number never breaks across lines */
.ft-col .small{font-size:12px;line-height:1.4;color:var(--neutral);font-weight:300}
.ft-bottom{
  margin-top:72px;padding-top:28px;border-top:1px dotted rgba(133,140,145,.5); /* #858C91 at 50% */
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;
  font-size:12px;color:var(--neutral); /* neutral/300, 6.8:1 on deep teal, 5.1:1 on teal-800 */
}
.ft-bottom .legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft-bottom a{transition:color .2s}
.ft-bottom a:hover{color:var(--electric)}
.ft-bottom .socials{margin-inline-start:auto}
.ft-bottom .socials a{border-color:var(--hair-dark);color:var(--white)}
.ft-bottom .socials a:hover{border-color:var(--electric);color:var(--electric)}
@media (max-width:599px){.ft-bottom{margin-top:48px}.ft-bottom .socials{margin-inline-start:0}}

/* ---------- WhatsApp float ---------- */
.wa{
  position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));inset-inline-end:22px;z-index:50;
  width:56px;height:56px;border-radius:50%;
  background:var(--forest);color:var(--white); /* forest ground, white glyph: the mint fill is retired */
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(6,23,27,.4);
  transition:transform .2s,opacity .3s,visibility .3s;
}
.wa svg{width:28px;height:28px;fill:currentColor}
.wa:hover{transform:translateY(-2px)}
body.menu-open .wa{opacity:0;visibility:hidden}

/* ---------- reveals ---------- */
html.js .rv{
  opacity:0;translate:0 40px;
  transition:opacity 1s ease,translate 1s ease; /* Mubadala: 1s ease, 40px rise */
  transition-delay:calc(var(--i,0) * 80ms);
}
html.js .rv.in{opacity:1;translate:none}
html.rv-fail .rv{opacity:1;translate:none;transition:none} /* the script never ran: show everything */
html.rv-fail .hero-h .lead > span,html.rv-fail .hero-h .main > span{translate:none;transition:none} /* the masked lines too */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;translate:none;transition:none;transition-delay:0s}
  html.js .hero-h .lead > span,html.js .hero-h .main > span{translate:none;transition:none}
  .menu,.menu.is-open{transition:none}
  .hd,.btn,.btn-line,.arrow,.wa,.panel::after,.sp,.sp::after,.sp-bg img,.sp-more{transition:none}
  .sp-more{opacity:1;translate:none}
  .wa:hover{transform:none}
}

/* the wordmark keeps the brand face even though the page is set in Overpass */
.wordmark{font-family:"Fredoka",var(--sans)}

/* ============================================================================
   THE SUBPAGE LAYER
   Everything a page that is not the home page needs, in the same token language.
   Mobile first: the plain rules are the small screen and the min-width queries
   add the wide layouts. Hairlines only, no shadows, no rounded corners.
   ============================================================================ */

/* ---------- section eyebrow and grounds ---------- */
.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--electric-ink)} /* electric-ink #017579 */
.on-frost{background:var(--frost)} /* frost #F2F5F7 */
.eyebrow + .t2{margin-block-start:14px}

/* ---------- page hero: the short light top of every page but the home page ----------
   Measured from the reference (4 Sep 2026): about 515px tall on desktop, less on
   mobile, no image, no paragraph. Frost to white on a soft diagonal, one thin electric
   slash at low opacity, the eyebrow, then the two line title whose lines rise from
   behind their own mask exactly like the home hero. The title markup is
   <h1 class="t2 rv"><span class="lt"><span>About</span></span> <span class="bd"><span>Durusi</span></span></h1>.
   A wave canvas or a slab left over from the old dark hero is switched off here, so a
   page that has not been converted yet still reads. */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:120px 64px; /* clears the fixed header */
  color:var(--white);
  background:
    radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/22px 22px, /* the dot grid, white at 9%, three times the closing band's */
    radial-gradient(55% 40% at 50% 0%,rgba(0,224,232,.16),transparent 70%) 0 0/100% 100% no-repeat, /* electric/300 glow under the arc */
    linear-gradient(160deg,var(--teal) 0%,var(--ink-dark) 100%); /* deep teal #0C333B to ink-dark #06171B */
  animation:heroGrid3 40s linear infinite;
  view-timeline:--page-hero block; /* the content below reads this to drift as the hero scrolls away */
}
@keyframes heroGrid{from{background-position:0 0,0 0}to{background-position:220px 110px,0 0}}
@keyframes heroGrid3{from{background-position:0 0,0 0,0 0}to{background-position:220px 110px,0 0,0 0}}
/* The arc: a half circle sitting on the top edge, electric, breathing slowly. */
.page-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-inline:0;top:-52vw;margin-inline:auto;
  width:104vw;height:104vw;max-width:1500px;max-height:1500px;border-radius:50%;
  border:1px solid rgba(0,224,232,.32); /* electric/300 */
  box-shadow:0 0 120px rgba(0,224,232,.10),inset 0 0 160px rgba(0,224,232,.08);
  animation:heroArc 9s ease-in-out infinite;
}
@keyframes heroArc{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}
/* The light: two bright points that travel round the arc, one full turn every 22s,
   so one of them crosses the visible half of the ring roughly every 11s. The ring is
   the element's 2px padding, cut out with a mask, and the conic gradient inside it
   is what rotates. Only the transform animates, so the browser composites it. */
.page-hero::after,.cta-band::after,.ghero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-inline:0;top:-52vw;margin-inline:auto;
  width:104vw;height:104vw;max-width:1500px;max-height:1500px;border-radius:50%;
  padding:2px;box-sizing:border-box;
  background:conic-gradient(from 0deg,transparent 0 30%,rgba(0,224,232,.95) 44%,transparent 50%,transparent 80%,rgba(255,255,255,.7) 94%,transparent 100%); /* electric/300 and white */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:heroSweep 22s linear infinite;
}
@keyframes heroSweep{to{transform:rotate(360deg)}}
/* The aurora: one soft electric glow that wanders behind the title, and the specks:
   a sparse tile of bright grid points that drifts upward and twinkles. Both sit
   inside the content box, behind the words, above the arc. */
.page-hero-in::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset-inline-start:-12%;bottom:-70%;
  width:72vw;height:72vw;max-width:960px;max-height:960px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,224,232,.22),rgba(0,224,232,.07) 42%,transparent 70%); /* electric/300 */
  animation:heroAurora 16s ease-in-out infinite alternate;
}
@keyframes heroAurora{from{transform:translate(-8%,8%) scale(.9);opacity:.75}to{transform:translate(32%,-14%) scale(1.15);opacity:1}}
.page-hero-in::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-1200px -50vw -420px;
  background:
    radial-gradient(circle at 12% 18%,rgba(0,224,232,.9) 1.2px,transparent 2.2px),
    radial-gradient(circle at 68% 42%,rgba(255,255,255,.8) 1px,transparent 2px),
    radial-gradient(circle at 36% 74%,rgba(0,224,232,.75) 1.4px,transparent 2.4px),
    radial-gradient(circle at 84% 86%,rgba(255,255,255,.65) 1px,transparent 2px),
    radial-gradient(circle at 52% 6%,rgba(0,224,232,.85) 1px,transparent 2px),
    radial-gradient(circle at 92% 30%,rgba(0,224,232,.6) 1.2px,transparent 2.2px);
  background-size:420px 420px;
  animation:heroSpecks 30s linear infinite,heroTwinkle 3.2s ease-in-out infinite alternate;
}
@keyframes heroSpecks{to{transform:translateY(-420px)}}
@keyframes heroTwinkle{from{opacity:.45}to{opacity:1}}
/* As the hero scrolls away the words drift down at a third of the scroll speed and fade,
   driven by the scroll position itself. Browsers without scroll timelines just scroll. */
@supports (animation-timeline:view()){
  .page-hero-in{animation:heroLeave linear both;animation-timeline:--page-hero;animation-range:exit 0% exit 100%}
}
@keyframes heroLeave{50%{transform:translateY(75px);opacity:.85}to{transform:translateY(150px);opacity:0}}
@media (max-width:899px){
  .page-hero{min-height:360px;padding-block:104px 48px}
  .page-hero::before{top:-90vw;width:180vw;height:180vw}
}
@media (prefers-reduced-motion:reduce){.page-hero,.page-hero::before,.page-hero::after,.page-hero-in,.page-hero-in::before,.page-hero-in::after,.cta-band::after,.ghero::after{animation:none}}
.page-hero .hero-wave,.page-hero .hero-overlay{display:none}
.page-hero-in{position:relative;z-index:2;width:100%}
.page-hero .eyebrow{color:var(--electric)} /* electric/300 on the dark hero */
.page-hero .t2{margin-block-start:14px;font-size:var(--t1)}
.page-hero .t2 .lt,.page-hero .t2 .bd{overflow:hidden;padding-block-end:.08em;margin-block-end:-.08em}
.page-hero .desc{margin-block-start:22px;max-width:52ch;color:var(--neutral)} /* only a page not yet converted still carries one */
html.js .page-hero .t2.rv{translate:none}
html.js .page-hero .t2 :is(.lt,.bd) > span{display:block;translate:0 112%;transition:translate .95s cubic-bezier(.16,1,.3,1)}
html.js .page-hero .t2.in :is(.lt,.bd) > span{translate:none}
html.js .page-hero .t2.in .bd > span{transition-delay:.14s}
html.rv-fail .page-hero .t2 :is(.lt,.bd) > span{translate:none;transition:none}
@media (min-width:900px){
  .page-hero{min-height:515px;padding-block:140px 72px}
  .page-hero .t2{margin-block-start:18px}
}

/* ---------- prose: privacy, terms and support ----------
   72ch at 18px 300, and it has to read at 375px. The hairline between top-level
   sections is the h2's own border, so no extra element is needed. */
.prose{max-width:72ch;font-weight:300;font-size:18px;line-height:1.55;color:var(--forest)} /* forest #102718 */
.prose p{margin-block-start:18px}
.prose h2{margin-block-start:56px;padding-block-start:32px;border-block-start:1px solid var(--hair);font-weight:700;font-size:28px;line-height:1.2} /* hair: forest at 12% */
.prose h3{margin-block-start:32px;font-weight:600;font-size:20px;line-height:1.3}
.prose > :first-child{margin-block-start:0}
.prose > h2:first-child{padding-block-start:0;border-block-start:0}
.prose ul,.prose ol{margin-block-start:18px;display:grid;gap:10px}
.prose li{position:relative;padding-inline-start:26px}
/* the mark colour, darkened to electric-ink so an 8px dot still reads on white */
.prose ul>li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.58em;width:8px;height:8px;border-radius:50%;background:var(--electric-ink)}
.prose ol{counter-reset:prose}
.prose ol>li{counter-increment:prose}
.prose ol>li::before{content:counter(prose) ".";position:absolute;inset-inline-start:0;inset-block-start:0;font-weight:600;font-size:16px;color:var(--electric-ink)}
.prose a{color:var(--electric-ink);font-style:italic;text-decoration:none}
.prose a:hover{color:var(--forest)}
.prose strong,.prose b{font-weight:600}

/* ---------- cards: the photo card grid ----------
   One column, two from 700px, three from 1025px. A hairline over each card is
   the only separation, matching the home page's panels. */
.cards{display:grid;gap:44px 32px}
.card{display:flex;flex-direction:column;border-block-start:1px solid var(--hair);padding-block-start:20px}
.card-img{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--frost)} /* display:block so a <span> wrapper keeps the ratio outside a flex parent */
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.card:hover .card-img img,.card:focus-visible .card-img img{transform:scale(1.04)}
.card .eyebrow{margin-block-start:22px}
.card h3{margin-block-start:10px;font-weight:600;font-size:22px;line-height:1.2}
.card-foot{flex:1 1 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-block-start:12px}
.card-foot p{font-weight:300;font-size:16px;line-height:1.4;color:var(--muted-light);max-width:34ch} /* muted-light #4A5459 */
.card .arrow{flex:none;border-color:var(--hair);color:var(--forest)}
.card:hover .arrow,.card:focus-visible .arrow{background:var(--electric);border-color:var(--electric);color:var(--forest)} /* electric/300 #00E0E8 */
@media (min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- rows: the hairline list for anything enumerable ----------
   Subjects, curricula, questions. The same shape as the home page's .step rows:
   a small electric-ink number or label, a 22px title, one line under it. */
.rows{margin-block-start:44px;border-block-start:1px solid var(--hair)}
.rows + .btn-line{margin-block-start:36px}
.row{display:grid;gap:10px;padding-block:26px;border-block-end:1px solid var(--hair)}
.row .n{font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--electric-ink)}
.row h3{font-weight:600;font-size:22px;line-height:1.15}
.row p{font-weight:300;font-size:16px;line-height:1.4;color:var(--muted-light)}
.on-dark .row p{color:var(--neutral)} /* neutral/300 #B4B8BB */
@media (min-width:900px){
  .rows{margin-block-start:72px}
  .rows + .btn-line{margin-block-start:56px}
  .row{grid-template-columns:96px minmax(0,1fr) minmax(0,1.15fr);gap:16px 40px;align-items:start;padding-block:36px}
  .row .n{padding-block-start:8px}
  .row p{font-size:18px}
}

/* ---------- pricing table: hairlines, no zebra ----------
   Under 700px every row stacks and each cell shows its column name from its own
   data-label, so the head can be hidden rather than repeated. */
.pricing-table{width:100%;border-collapse:collapse;text-align:start}
.rows:has(> .pricing-table){border-block-start:0} /* no rule above the column names: his note of 5 Sep 2026 */
.pricing-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.pricing-table tr{display:block;padding-block:24px;border-block-end:1px solid var(--hair)}
.pricing-table tbody tr:first-child{border-block-start:1px solid var(--hair)}
.pricing-table td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:7px;font-weight:300;font-size:16px;line-height:1.35}
.pricing-table td::before{content:attr(data-label);flex:none;font-weight:500;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-light)}
.pricing-table td:first-child{display:block;padding-block:0 12px;font-weight:600;font-size:22px;line-height:1.2}
.pricing-table td:first-child::before{content:none}
@media (min-width:700px){
  .pricing-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .pricing-table tr{display:table-row;padding-block:0;border-block-end:0}
  .pricing-table tbody tr:first-child{border-block-start:0}
  .pricing-table th{padding-block:0 18px;padding-inline:0 32px;border:0;vertical-align:bottom;white-space:nowrap;text-align:start;font-weight:500;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-light)} /* the name sits over its column, first column starts where the level names start */
  .pricing-table td{display:table-cell;padding-block:26px;padding-inline:0 32px;border:0;border-block-end:1px solid var(--hair);font-size:17px;vertical-align:baseline}
  .pricing-table tbody tr:first-child td{border-block-start:1px solid var(--hair)} /* one rule between the names and the first row, none above the names */
  .pricing-table :is(th,td):not(:first-child){text-align:end;font-variant-numeric:tabular-nums}
  .pricing-table td:first-child{width:34%}
  .pricing-table td::before{content:none}
  .pricing-table td:first-child{display:table-cell;padding-block:26px;font-size:20px}
  .pricing-table :is(th,td):last-child{padding-inline-end:0}
}

/* ---------- closing call to action ----------
   Deep teal with the same dot grid as the results band, so it stays a separate
   block from the footer's teal rather than melting into it. */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  padding:var(--sec) 0;text-align:center;color:var(--white);
  background:
    radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/22px 22px, /* the dot grid, white at 9%, same as the hero */
    linear-gradient(180deg,var(--ink-dark) 0%,var(--teal) 100%); /* ink-dark #06171B into deep teal #0C333B, which is where the footer begins */
  animation:heroGrid 48s linear infinite;
}
.cta-band::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-inline:0;top:-52vw;margin-inline:auto;
  width:104vw;height:104vw;max-width:1500px;max-height:1500px;border-radius:50%;
  border:1px solid rgba(0,224,232,.28);box-shadow:0 0 120px rgba(0,224,232,.10); /* electric/300 */
  animation:heroArc 9s ease-in-out infinite;
}
.cta-band > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.cta-band,.cta-band::before,.ft{animation:none}}
.cta-band p{margin-block-start:16px;margin-inline:auto;max-width:48ch;font-weight:300;font-size:18px;line-height:1.35;color:var(--neutral)}
.cta-band :is(.btn,.btn-line){margin-block-start:36px}
@media (max-width:700px){.cta-band p{font-size:16px}}

/* ---------- people: name, role, photo ----------
   Built for the about page later. Nothing on the site uses it yet. */
.people{display:grid;gap:36px 32px}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--frost)}
.person .name{display:block;margin-block-start:18px;font-weight:600;font-size:20px;line-height:1.2}
.person .role{display:block;margin-block-start:6px;font-weight:300;font-size:16px;color:var(--muted-light)}
@media (min-width:600px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.people{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Arabic: undo Latin tracking, give the headings room ---------- */
html[lang=ar] :is(.eyebrow,.row .n,.pricing-table th){letter-spacing:0}
html[lang=ar] .pricing-table td::before{letter-spacing:0}
html[lang=ar] :is(.row h3,.card h3,.prose h2,.prose h3,.person .name,.pricing-table td:first-child){line-height:1.45}

/* ---------- reduced motion, the subpage layer ---------- */
@media (prefers-reduced-motion:reduce){
  .card-img img{transition:none}
  .card:hover .card-img img,.card:focus-visible .card-img img{transform:none}
}

/* A dark band using .rows: the hairlines and the small labels need the dark tokens,
   or they sit at 2.4:1 on deep teal and effectively vanish. Found on the services
   page, fixed here so the next dark section inherits it. */
.on-dark :is(.rows,.row){border-color:var(--hair-dark)}
.on-dark :is(.eyebrow,.row .n){color:var(--electric)} /* electric/300, 8.3:1 on deep teal */
.on-dark a.row h3{transition:color .2s}
.on-dark a.row:hover h3,.on-dark a.row:focus-visible h3{color:var(--electric)}
.on-dark a.row:hover .arrow,.on-dark a.row:focus-visible .arrow{background:var(--electric);border-color:var(--electric);color:var(--forest)}
@media (prefers-reduced-motion:reduce){.on-dark a.row h3{transition:none}}

/* ============================================================================
   THE MODULES (wave five, 4 Sep 2026)
   A subpage is the light hero, then a different combination of these, then the
   closing band and the footer. Pages differ by the modules they use, never by
   alternating dark bands: at most one dark section per page, where it earns it.
   Photographs are the licensed city photos in assets/img/city/ only.
   ============================================================================ */

/* ---------- intro: the block after the hero ----------
   Two line title on one side, one bold summary sentence and one paragraph on the
   other, wide margins. */
.intro-in{display:grid;gap:28px 64px}
.intro-lead{font-weight:600;font-size:clamp(22px,2.3vw,30px);line-height:1.25;max-width:28ch}
.intro-text p + p{margin-block-start:20px}
.intro-text p:not(.intro-lead){font-weight:300;font-size:18px;line-height:1.5;color:var(--muted-light);max-width:60ch} /* muted-light #4A5459 */
.intro-text .btn-line{margin-block-start:32px}
@media (min-width:900px){.intro-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.intro-text{padding-inline-end:6%}}

/* ---------- values: small icon cards over a full width photo band ----------
   The title sits on the page ground, then the band carries the photo under an
   ink veil and the white cards over it. Four cards from 1025px. */
.values-band{position:relative;isolation:isolate;margin-block-start:48px;padding-block:56px}
.values-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.values-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,23,27,.45),rgba(6,23,27,.7))} /* ink-dark veil so white text reads on the photo */
.values-grid{position:relative;z-index:2;display:grid;gap:28px}
.value{display:flex;flex-direction:column;gap:14px;padding:8px 22px 8px 22px;background:transparent;color:var(--white);border-inline-start:1px solid rgba(255,255,255,.28)} /* text straight over the photo, a hairline instead of a box */
.value-icon{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:inline-flex;align-items:center;justify-content:center;color:var(--electrick)} /* electric-ink #017579 */
.value-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.value h3{margin-block-start:6px;font-weight:600;font-size:20px;line-height:1.2}
.value p{font-weight:300;font-size:16px;line-height:1.45;color:rgba(255,255,255,.82)}
.values .btn-line{margin-block-start:44px}
@media (min-width:700px){.values-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.values-band{margin-block-start:64px;padding-block:80px}}
@media (min-width:1025px){.values-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- skew panel: text one side, a photo cut on a diagonal the other ----------
   On the tint ground. From 900px the photo is pinned to the end side and cut on a
   diagonal; the Arabic pages mirror the cut. The photo settles from 1.06 to 1 as
   it reveals. Under 900px it is a plain 16:10 photo above the text. */
.skew-panel{position:relative;isolation:isolate;overflow:hidden;background:var(--tint)} /* tint #E8F6FA */
.skew-media{position:relative;z-index:0;overflow:hidden;aspect-ratio:16/10}
.skew-media img{display:block;width:100%;height:100%;object-fit:cover}
.skew-in{position:relative;z-index:1;padding-block:56px}
.skew-text{max-width:60ch}
.skew-text .desc{margin-block-start:22px}
.years{margin-block-start:36px;border-block-start:1px solid var(--hair)}
.year{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 24px;padding-block:22px;border-block-end:1px solid var(--hair)}
.year .n{grid-row:1/3;padding-block-start:4px;font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--electric-ink)}
.year h3{font-weight:600;font-size:20px;line-height:1.2}
.year p{grid-column:2;font-weight:300;font-size:16px;line-height:1.45;color:var(--muted-light)}
html.js .skew-media.rv{translate:none}
html.js .skew-media img{transform:scale(1.06);transition:transform 1.2s var(--ease)}
html.js .skew-media.in img,html.rv-fail .skew-media img{transform:none}
@media (min-width:900px){
  .skew-media{position:absolute;inset-block:0;inset-inline-end:0;width:50%;aspect-ratio:auto;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
  [dir=rtl] .skew-media{clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
  .skew-in{padding-block:var(--sec)}
  .skew-text{width:50%;max-width:none;padding-inline-end:64px}
  .year{padding-block:26px}
}

/* ---------- quote card: a big quotation, the name, the role ----------
   On frost with an electric rule on the start side. .quote-card--dark is the one
   dark variant, deep teal, for the page that earns a dark section. */
.quote-card{position:relative;padding:44px 28px;background:var(--frost);border-inline-start:2px solid var(--electric)} /* frost #F2F5F7, electric/300 */
.quote-card blockquote{font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.25;max-width:28ch}
.quote-card blockquote::before{content:"\201C";display:block;margin-block-end:22px;font-size:96px;line-height:.5;font-weight:700;color:var(--neutral)} /* neutral/300 #B4B8BB */
.quote-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-block-start:26px}
.quote-card .name{font-weight:600;font-size:16px;color:var(--electric-ink)}
.quote-card .role{font-size:14px;color:var(--muted-light)}
.quote-card--dark{background:var(--teal);color:var(--white)} /* deep teal #0C333B */
.quote-card--dark .name{color:var(--electric)}
.quote-card--dark .role{color:var(--neutral)}
@media (min-width:900px){.quote-card{padding:64px 72px}}

/* ---------- tabs: a tab list that swaps panels ----------
   site-2026.js runs every [data-tabs]: click, arrow keys, Home and End, roving
   tabindex, and it toggles the panels' hidden attribute. With no script the
   tab buttons hide and every panel shows, stacked. */
.tab-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-block-end:1px solid var(--hair)}
.tab{flex:none;padding:14px 20px;margin-block-end:-1px;border-block-end:2px solid transparent;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:500;color:var(--muted-light);white-space:nowrap;transition:color .2s,border-color .2s}
.tab:hover{color:var(--forest)}
.tab[aria-selected=true]{color:var(--forest);border-color:var(--electric-ink)}
.tab-panel{padding-block-start:36px}
.tab-panel[hidden]{display:none}
html.no-js .tab-list{display:none}
html.no-js .tab-panel[hidden]{display:block}

/* ---------- card grid: the reference's case study cards ----------
   Two to four links side by side, one per row on a phone. Each is a full bleed photo
   under a soft veil at the foot, a bold typographic label at the top start (never a
   logo), the title at the bottom start, the round arrow at the bottom end. The photo
   zooms to 1.05 over about a second on hover; put .rv on each tile inside a .rv-group
   and they rise in one after another. */
.card-grid{display:grid;gap:12px}
.tile{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:4/5;color:var(--white);background:var(--teal)}
.tile img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,23,27,.12),rgba(6,23,27,.05) 35%,rgba(6,23,27,.78))} /* ink-dark veil, soft at the foot */
.tile-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:26px}
.tile-label{font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase}
.tile-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.tile-title{font-weight:700;font-size:24px;line-height:1.05;text-transform:uppercase;max-width:14ch}
.tile .arrow{flex:none}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05)}
.tile:hover .arrow,.tile:focus-visible .arrow{background:var(--electric);border-color:var(--electric);color:var(--forest)} /* electric/300 */
@media (min-width:700px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1025px){.card-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}

/* ---------- mosaic: a cluster of photos beside a short title ---------- */
.mosaic-in{display:grid;gap:40px}
.mosaic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mosaic-grid img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:var(--frost)}
.mosaic-grid img:first-child{grid-column:1/-1;aspect-ratio:16/9}
@media (min-width:900px){.mosaic-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}}

/* ---------- case list: image one side, text the other, alternating ---------- */
.case-list{display:grid;gap:56px}
.case{display:grid;gap:24px;align-items:center}
.case-img{overflow:hidden;aspect-ratio:16/10;background:var(--frost)}
.case-img img{display:block;width:100%;height:100%;object-fit:cover}
.case h3{margin-block-start:12px;font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.case h3 + p{margin-block-start:14px;font-weight:300;font-size:18px;line-height:1.45;color:var(--muted-light);max-width:48ch}
.case .btn-line{margin-block-start:26px}
@media (min-width:900px){
  .case-list{gap:88px}
  .case{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .case:nth-child(even) .case-img{order:2}
}

/* ---------- Arabic: undo Latin tracking, give the headings room ---------- */
html[lang=ar] :is(.tab,.tile-label,.year .n){letter-spacing:0}
html[lang=ar] :is(.intro-lead,.value h3,.year h3,.case h3,.tile-title){line-height:1.45}

/* ---------- reduced motion, the modules ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .page-hero .t2 :is(.lt,.bd) > span{translate:none;transition:none}
  html.js .skew-media img{transform:none;transition:none}
  .tile img,.tile .arrow,.tab,.value-icon{transition:none}
  .tile:hover img,.tile:focus-visible img{transform:none}
}

/* ---------- promoted from page-scoped blocks, 4 Sep 2026 ----------
   The blog card treatment, the tab and case-list gaps, and the contact quote card,
   moved here from the pages that first needed them so nothing drifts. ---------- */
.blog-grid{margin-block-start:56px}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
.blog-grid + .btn-line{margin-block-start:44px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.blog-grid{margin-block-start:56px}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
.blog-grid + .btn-line{margin-block-start:44px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.blog-grid{margin-block-start:56px}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.blog-grid{margin-block-start:56px}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.sec-head + .card-grid{margin-block-start:44px}
.card-grid + .btn-line{margin-block-start:36px}
@media (min-width:900px){.sec-head + .card-grid{margin-block-start:72px}.card-grid + .btn-line{margin-block-start:56px}}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.sec-head + .card-grid{margin-block-start:44px}
.card-grid + .btn-line{margin-block-start:36px}
@media (min-width:900px){.sec-head + .card-grid{margin-block-start:72px}.card-grid + .btn-line{margin-block-start:56px}}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.sec-head + .card-grid{margin-block-start:44px}
.card-grid + .btn-line{margin-block-start:36px}
@media (min-width:900px){.sec-head + .card-grid{margin-block-start:72px}.card-grid + .btn-line{margin-block-start:56px}}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.sec-head + .card-grid{margin-block-start:44px}
.card-grid + .btn-line{margin-block-start:36px}
@media (min-width:900px){.sec-head + .card-grid{margin-block-start:72px}.card-grid + .btn-line{margin-block-start:56px}}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.sec-head + .card-grid{margin-block-start:44px}
.card-grid + .btn-line{margin-block-start:36px}
@media (min-width:900px){.sec-head + .card-grid{margin-block-start:72px}.card-grid + .btn-line{margin-block-start:56px}}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.sec-head + .card-grid{margin-block-start:44px}
.card-grid + .btn-line{margin-block-start:36px}
@media (min-width:900px){.sec-head + .card-grid{margin-block-start:72px}.card-grid + .btn-line{margin-block-start:56px}}
.blog-grid .tile{aspect-ratio:1/1}
.blog-grid .tile img{transition:transform .5s ease}
.blog-grid .tile::before{background:linear-gradient(180deg,rgba(6,23,27,.16),rgba(6,23,27,.04) 35%,rgba(6,23,27,.7))} 
.blog-grid .tile::after{content:"";position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,rgba(0,224,232,0) 30%,rgba(0,224,232,.6));transition:opacity .5s ease} 
.blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:1}
.blog-grid .tile-title{font-weight:300;font-size:clamp(26px,2.6vw,32px);line-height:1.15;text-transform:none;max-width:18ch}
html[lang=ar] .blog-grid .tile-title{line-height:1.4}
.blog-grid .tile .arrow{width:50px;height:50px}
.blog-grid .tile .arrow svg{width:20px;height:20px}
@media (min-width:700px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .blog-grid .tile{aspect-ratio:690/373}
}
@media (min-width:1025px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} /* three side by side, his call of 4 Sep 2026 */
  .blog-grid .tile{aspect-ratio:4/3}
  .blog-grid .tile-title{font-size:clamp(22px,1.9vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .tile img,.blog-grid .tile::after{transition:none}
  .blog-grid .tile:hover::after,.blog-grid .tile:focus-visible::after{opacity:0}
}

.sec-head + .tabs{margin-block-start:72px}
.tab-panel .prose + .btn-line{margin-block-start:32px}
@media (max-width:899px){.sec-head + .tabs{margin-block-start:44px}}

.sec-head + .tabs{margin-block-start:72px}
.tab-panel .prose + .btn-line{margin-block-start:32px}
@media (max-width:899px){.sec-head + .tabs{margin-block-start:44px}}

.sec-head + .case-list{margin-block-start:72px}
@media (max-width:899px){.sec-head + .case-list{margin-block-start:44px}}

.sec-head + .case-list{margin-block-start:72px}
@media (max-width:899px){.sec-head + .case-list{margin-block-start:44px}}

.ct-layout .quote-card{background:var(--white)}

.case-text .rows{margin-block-start:28px}
.case-text .prose{margin-block-start:24px}

@media (min-width:900px){.case-text .row p{grid-column:2 / -1}}

.case-text .rows{margin-block-start:28px}
.case-text .prose{margin-block-start:24px}

@media (min-width:900px){.case-text .row p{grid-column:2 / -1}}
.on-tint{background:var(--tint)}

/* Three panels in the split treatment: the middle one is cut on both sides. */
.split-row--three .sp{z-index:0}
.split-row--three .sp:first-child{z-index:2;clip-path:polygon(0 0,100% 0,calc(100% - 120px) 100%,0 100%)}
.split-row--three .sp:nth-child(2){z-index:1;margin-inline-start:-120px;clip-path:polygon(119px 0,100% 0,calc(100% - 120px) 100%,-1px 100%)}
.split-row--three .sp:last-child{margin-inline-start:-120px;clip-path:polygon(119px 0,100% 0,100% 100%,-1px 100%)}
[dir=rtl] .split-row--three .sp:first-child{clip-path:polygon(0 0,100% 0,100% 100%,120px 100%)}
[dir=rtl] .split-row--three .sp:nth-child(2){clip-path:polygon(-1px 0,calc(100% - 119px) 0,100% 100%,120px 100%)}
[dir=rtl] .split-row--three .sp:last-child{clip-path:polygon(-1px 0,calc(100% - 119px) 0,100% 100%,-1px 100%)}
.split-row--three .sp:hover,.split-row--three .sp:focus-visible{flex-grow:1.6}
.split-row--three .sp-title{font-size:clamp(22px,2.2vw,32px)}
@media (max-width:899px){.split-row--three .sp,.split-row--three .sp:nth-child(2){clip-path:none;margin-inline-start:0}}
/* Links inside running text are italic, never underlined: his ruling, the underline read as machine-made. */
:is(.intro,.rows,.row,.case-text,.quote-card,.tab-panel,.sec-head) a:not(.btn-line):not(.arrow){color:var(--electric-ink);font-style:italic;text-decoration:none}

/* The careers hero: the globe over the same dark drifting grid the other subpages open on. */
.ghero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--white);
  background:
    radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/22px 22px,
    linear-gradient(160deg,var(--teal) 0%,var(--ink-dark) 100%);
  animation:heroGrid 48s linear infinite;
}
.ghero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-inline:0;top:-52vw;margin-inline:auto;
  width:104vw;height:104vw;max-width:1500px;max-height:1500px;border-radius:50%;
  border:1px solid rgba(0,224,232,.32);box-shadow:0 0 120px rgba(0,224,232,.10);
  animation:heroArc 9s ease-in-out infinite;
}
.ghero > *{position:relative;z-index:1}
.ghero .eyebrow,.ghero .ghero-eyebrow{color:var(--electric)}
.ghero h1,.ghero .t2{color:var(--white)}
.ghero .desc,.ghero p{color:var(--neutral)}
.ghero .btn-line{color:var(--white);border-color:rgba(255,255,255,.55)}
.ghero-still,.ghero-stage canvas{mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.ghero,.ghero::before{animation:none}}

/* ---------- the founders: the full portrait, never cropped, beside the story (4 Sep 2026) ----------
   His photo with his twin brother sits whole at its own proportions; nothing is cut. From 900px
   it stays in view while the story scrolls beside it. Until the file arrives the slot is stone. */
.founders{background:var(--tint)} /* warm stone #F6F4F0 */
.founders-in{display:grid;gap:48px}
.founders-photo{margin:0;max-width:520px}
.founders-photo .ph{display:block;overflow:hidden;background:var(--hair)}
.founders-photo .ph--empty{aspect-ratio:2/3}
.founders-photo img{display:block;width:100%;height:auto}
html.js .founders-photo.rv img{transform:scale(1.04);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
html.js .founders-photo.rv.in img{transform:none}
.founders-photo figcaption{margin-block-start:14px;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--electric-ink)} /* electric/ink */
html[lang=ar] .founders-photo figcaption{letter-spacing:0}
.founders-text{max-width:60ch}
.founders-text .lead{margin-block-start:22px;font-weight:600;font-size:22px;line-height:1.3;color:var(--forest)} /* forest #102718 */
.founders-text .story p{margin-block-start:18px;font-weight:300;font-size:18px;line-height:1.5;color:var(--muted-light)}
.founders-text .years{margin-block-start:40px}
@media (min-width:900px){
  .founders-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
  .founders-photo{position:sticky;top:120px}
}
@media (prefers-reduced-motion:reduce){html.js .founders-photo.rv img{transform:none;transition:none}}

/* ---------- rows that are links (the three ways to learn on services, 4 Sep 2026) ---------- */
.rows > a.row:not(.btn-line):not(.arrow){color:inherit;font-style:normal;text-decoration:none}
.rows > a.row h3{transition:color .2s}
.rows > a.row:hover h3,.rows > a.row:focus-visible h3{color:var(--electric-ink)} /* electric/ink */

/* While a photo is still arriving the slot is ink, not grey (his note of 4 Sep 2026). */
.sp-bg,.case-img,.tile,.values-band{background:var(--ink-dark)}