/* Layout: QAR dark enterprise. Floating pill nav → chrome bust in front of giant headline → stats bar → 3×2 glass grid → dotted vertical timeline → global expertise with lab visuals → QNV 2030 → Think statements → testimonials → final CTA desk → footer. */
:root{
  color-scheme:dark;
  --bg:#020605; --bg-2:#060D0C; --card:#132321; --card-line:#1E312E; --line-hover:#2A4340;
  --fg:#F2FAF8; --fg-2:#A1B4B1; --fg-3:#849996; --label:#829996;
  --brand:#4DC2B3; --brand-deep:#1A8F83; --brand-text:#5FD0C1; --on-brand:#00201B; --btn2:#172927;
  --btn-bg:#4DC2B3; --btn-fg:#00201B; --btn-hover:#7AD6CA; --num:#5FD0C1;
  --on-fg:#020605; --dim:#4F6763; --stroke:#46625D;
  --nav-bg:rgba(18,34,32,.74); --nav-line:#263D3A; --icon:#C3D6D2; --icon-bg:#1B2F2C;
  --glass:rgba(77,194,179,.05); --inset-glow:rgba(77,194,179,.07); --chip-bg:rgba(2,6,5,.65);
  --input-bg:rgba(8,16,15,.6); --placeholder:#7A908D; --ghost-fill:#0F1D1C; --ghost-stroke:#1C302D;
  --avatar-a:#203A36; --avatar-b:#10201E; --prose:#CBDAD7; --card-shadow:none; --grain:.06; --menu-bg:rgba(2,6,5,.95);
  --display:"Inter","General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:24px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --btn-bg:#0E7A6C; --btn-fg:#FFFFFF; --btn-hover:#0B6559; --num:#0E7A6C;
  --bg:#F4F7F6; --bg-2:#EBF0EE; --card:#FFFFFF; --card-line:#DCE4E1; --line-hover:#C2CECA;
  --fg:#0C1615; --fg-2:#51605C; --fg-3:#768582; --label:#7A8986;
  --brand:#4DC2B3; --brand-deep:#1A8F83; --brand-text:#0E7A6C; --on-brand:#001B17; --btn2:#FFFFFF;
  --on-fg:#FFFFFF; --dim:#A2AEAB; --stroke:#A9B6B2;
  --nav-bg:rgba(255,255,255,.8); --nav-line:#D6DFDC; --icon:#3E4C49; --icon-bg:#E6EEEB;
  --glass:rgba(77,194,179,.045); --inset-glow:rgba(77,194,179,.06); --chip-bg:rgba(255,255,255,.85);
  --input-bg:#FFFFFF; --placeholder:#9AA7A4; --ghost-fill:#E8EEEC; --ghost-stroke:#D0DAD7;
  --avatar-a:#E2EAE7; --avatar-b:#FFFFFF; --prose:#2A3533; --card-shadow:0 1px 2px rgba(12,22,21,.04),0 10px 30px -18px rgba(12,22,21,.18); --grain:.04; --menu-bg:rgba(244,247,246,.96);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.wrap{max-width:1280px;margin-inline:auto;padding-left:16px;padding-right:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px;border-radius:8px}
.label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);display:inline-block;font-weight:400}
.muted{color:var(--fg-2)}
.dim{color:var(--dim)}
.h-sec{font-size:clamp(28px,4.5vw,64px);line-height:.92;letter-spacing:-.03em}

/* ---------- floating pill nav ---------- */
.nav-shell{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);z-index:50;display:flex;justify-content:center;pointer-events:none;margin-top:24px;padding-inline:16px}
.nav{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:7px;border-radius:999px;border:1px solid var(--nav-line);background:var(--nav-bg);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);max-width:100%}
.logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--icon-bg);border:1px solid var(--nav-line);flex:none}
.logo svg{width:16px;height:16px}
.icons{display:flex;gap:2px;list-style:none;margin:0;padding:0 8px;border-inline:1px solid var(--card-line)}
.icons a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--icon);transition:color .2s,background .2s;position:relative}
.icons a:hover,.icons a.on{color:var(--fg);background:var(--icon-bg)}
.icons svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icons .tip{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);color:var(--fg-2);opacity:0;transition:.2s;pointer-events:none}
.icons a:hover .tip,.icons a:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.lang{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--icon);background:none;border:1px solid var(--nav-line);border-radius:999px;padding:7px 11px;cursor:pointer}
.lang:hover{color:var(--fg);border-color:var(--line-hover);background:var(--icon-bg)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-family:var(--body);font-size:13px;font-weight:500;padding:10px 20px;cursor:pointer;border:1px solid transparent;transition:transform .25s,background .25s,border-color .25s;white-space:nowrap}
.btn-1{background:var(--btn-bg);color:var(--btn-fg)}
.btn-1:hover{transform:translateY(-2px)}
.btn-2{background:var(--btn2);border-color:var(--line-hover);color:var(--fg)}
.btn-2:hover{border-color:var(--stroke)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.icons{display:none}}
@media (max-width:400px){.nav .btn-1{padding:9px 14px}}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:40px 0;text-align:center}
.hero-label{display:flex;justify-content:center;margin-bottom:8px}
.stage{position:relative;height:clamp(420px,64vw,720px);overflow:hidden}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:32%;background:linear-gradient(to top,var(--bg) 8%,transparent);z-index:3;pointer-events:none}
.giant{margin:0;position:absolute;inset:0 0 18% 0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:0;pointer-events:none;user-select:none}
.giant span{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,8.4vw,124px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap}
.giant span:nth-child(2){color:transparent;-webkit-text-stroke:1px var(--stroke)}
.core{position:absolute;inset:0;z-index:2;will-change:transform}
.core canvas{width:100%;height:100%;display:block}
.core-fallback{position:absolute;left:50%;top:44%;width:min(46vw,340px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 4%,#cfcfcf 12%,#5a5a5a 38%,#141414 62%,#000 72%),#000;
  box-shadow:-40px 10px 120px -20px rgba(77,194,179,.55),40px 20px 120px -20px rgba(26,143,131,.45);animation:breathe 4s ease-in-out infinite}
.webgl-on .core-fallback{display:none}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.03)}}
.halo{position:absolute;left:50%;top:48%;width:64%;height:56%;transform:translate(-50%,-50%);background:radial-gradient(closest-side at 35% 50%,rgba(77,194,179,.22),transparent),radial-gradient(closest-side at 68% 55%,rgba(26,143,131,.16),transparent);filter:blur(40px);z-index:1}
.hero-copy{position:relative;z-index:4;display:grid;justify-items:center;gap:14px;margin-top:-90px}
.tri{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg)}
.hero-copy h1{font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.hero-copy p{max-width:520px;color:var(--fg-2)}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@media (max-width:640px){.hero-copy{margin-top:-60px}}

/* ---------- stats bar ---------- */
.stats{margin-top:96px}
.stats-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.ticker{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--card-line);border-radius:var(--r);background:var(--bg-2);overflow:hidden}
.ticker div{padding:24px;display:grid;gap:10px;align-content:start;border-inline-start:1px solid var(--card-line);min-width:0}
.ticker div:first-child{border-inline-start:0}
.ticker b{color:var(--num);font-weight:600;font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.ticker small{font-size:13px;color:var(--fg-2);line-height:1.5}
@media (max-width:820px){.ticker{grid-template-columns:1fr 1fr}.ticker div:nth-child(3){border-inline-start:0}.ticker div:nth-child(n+3){border-top:1px solid var(--card-line)}}
@media (max-width:420px){.ticker{grid-template-columns:1fr}.ticker div{border-inline-start:0!important;border-top:1px solid var(--card-line)}.ticker div:first-child{border-top:0}}

/* ---------- sections ---------- */
section{padding-block:160px}
@media (max-width:760px){section{padding-block:96px}}
.band{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:end;margin-bottom:56px}
.band .hd{grid-column:1/8;display:grid;gap:18px}
.band .desc{grid-column:9/13;display:grid;gap:16px;min-width:0}
.band .desc p{color:var(--fg-2)}
@media (max-width:900px){.band .hd,.band .desc{grid-column:1/-1}}

/* reveal: transform only, content always visible */
.js .reveal{transform:translateY(28px);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .reveal.in{transform:none}

/* ---------- glass cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{position:relative;background:linear-gradient(180deg,var(--glass),transparent 45%),var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;min-height:330px;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;overflow:hidden;min-width:0}
.card:hover{transform:translateY(-4px) scale(1.02);border-color:var(--line-hover);box-shadow:inset 0 0 40px var(--inset-glow),0 24px 60px -30px rgba(77,194,179,.35)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.card .ic{width:16px;height:16px;color:var(--fg-2)}
.card .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:22px;line-height:1.05;letter-spacing:-.02em;margin-top:auto;text-transform:uppercase}
.card p{color:var(--fg-2)}
.feats{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--card-line);display:grid;gap:6px}
.feats li{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--fg-3);display:flex;gap:10px;align-items:center}
.feats li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand);flex:none}
.card::after{content:"";position:absolute;right:-30%;bottom:-60%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(77,194,179,.2),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.card:nth-child(even)::after{background:radial-gradient(closest-side,rgba(26,143,131,.2),transparent)}
.card:hover::after{opacity:1}

/* ---------- timeline ---------- */
.loop{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:48px}
.loop::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);border-left:2px dotted #2c2c2c}
.loop li{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center}
.node{grid-column:2;grid-row:1;justify-self:center;width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--line-hover);display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 0 0 10px var(--bg-2)}
.node svg{width:18px;height:18px;fill:none;stroke:var(--fg);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.loop li:nth-child(odd) .node{box-shadow:0 0 0 10px var(--bg-2),0 0 34px -4px rgba(77,194,179,.6)}
.loop li:nth-child(even) .node{box-shadow:0 0 0 10px var(--bg-2),0 0 34px -4px rgba(26,143,131,.6)}
.step{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:24px;display:grid;gap:10px;min-width:0;transition:border-color .3s}
.step:hover{border-color:var(--line-hover)}
.step h3{font-size:24px;letter-spacing:-.02em;line-height:1}
.step p{color:var(--fg-2)}
.loop li:nth-child(odd) .step{grid-column:1;grid-row:1}
.loop li:nth-child(even) .step{grid-column:3;grid-row:1}
.loop-end{display:flex;justify-content:center;margin-top:48px}
.loop-end span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--fg-3);border:1px solid var(--card-line);border-radius:999px;padding:8px 16px;display:inline-flex;gap:8px;align-items:center;background:var(--bg-2)}
.loop-end svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){
  .loop::before{left:28px;transform:none}
  .loop li{grid-template-columns:56px 1fr;gap:16px}
  .node{grid-column:1}
  .loop li:nth-child(odd) .step,.loop li:nth-child(even) .step{grid-column:2}
}

/* ---------- global expertise ---------- */
.visuals{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:860px){.visuals{grid-template-columns:1fr}}
.vis{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--card-line);background:var(--bg-2);aspect-ratio:16/10;max-width:100%;min-width:0;margin:0}
.vis canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vis::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px 30px #071110;pointer-events:none}
.vis figcaption{position:absolute;inset:auto 20px 18px 20px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:12px}
.vis figcaption b{font-weight:500;font-size:16px;display:block;letter-spacing:-.01em}
.vis figcaption small{color:var(--fg-2);font-size:12px}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.quad{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.quad{grid-template-columns:1fr}}
.mini{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:24px;display:grid;gap:12px;align-content:start;transition:border-color .3s,transform .3s;min-width:0}
.mini:hover{border-color:var(--line-hover);transform:translateY(-4px)}
.mini b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.mini p{color:var(--fg-2)}

/* ---------- vision 2030 ---------- */
.vision{position:relative;border:1px solid var(--card-line);border-radius:32px;overflow:hidden;background:var(--bg-2);padding:clamp(24px,5vw,64px);display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.vision > *{min-width:0}
.vision::before{content:"2030";position:absolute;right:-.04em;top:-.2em;font-weight:700;font-size:clamp(120px,24vw,340px);letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1px var(--ghost-stroke);pointer-events:none}
.vision h2{position:relative}
.vision p{color:var(--fg-2);position:relative}
.pillars{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.pillars span{border:1px solid var(--card-line);background:var(--chip-bg);border-radius:999px;padding:10px 16px;font-size:13px;display:flex;align-items:center;gap:10px}
.pillars i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--label);letter-spacing:.14em}
@media (max-width:860px){.vision{grid-template-columns:1fr}}
@media (max-width:420px){.pillars{grid-template-columns:1fr}}

/* ---------- statements ---------- */
.statements{border-top:1px solid var(--card-line)}
.stmt{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:center;padding-block:40px;border-bottom:1px solid var(--card-line);transition:background .4s}
.stmt h3{grid-column:1/8;font-size:clamp(36px,7vw,104px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;transition:color .4s}
.stmt h3 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--stroke);transition:color .4s,-webkit-text-stroke-color .4s}
.stmt:hover h3 em{color:var(--fg);-webkit-text-stroke-color:var(--fg)}
.stmt p{grid-column:9/13;color:var(--fg-2)}
.stmt .label{grid-column:8/9}
@media (max-width:860px){.stmt h3,.stmt p,.stmt .label{grid-column:1/-1}}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:32px;min-height:300px;margin:0;min-width:0}
.quote blockquote{margin:0;font-size:clamp(20px,2.2vw,28px);line-height:1.25;letter-spacing:-.02em;font-weight:500}
.quote blockquote::before{content:"“";display:block;font-size:56px;line-height:.6;color:var(--stroke);margin-bottom:12px}
.who{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--card-line)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--avatar-a),var(--avatar-b));border:1px solid var(--line-hover);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--fg-2);flex:none}
.who b{display:block;font-weight:500}
.who small{color:var(--fg-3);font-size:12px}

/* ---------- final CTA ---------- */
.contact{position:relative;border:1px solid var(--card-line);border-radius:32px;background:radial-gradient(60% 80% at 0% 0%,rgba(77,194,179,.14),transparent 60%),radial-gradient(50% 70% at 100% 100%,rgba(26,143,131,.10),transparent 60%),var(--bg-2);padding:clamp(24px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:48px;overflow:hidden}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact > *{min-width:0}
.contact h2{margin-block:18px}
.desk{display:grid;margin-top:28px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--card-line)}
.row .val{font-size:14px;word-break:break-word;margin-top:2px}
.copy{background:none;border:1px solid var(--card-line);color:var(--fg-2);border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:6px 12px;cursor:pointer;flex:none}
.copy:hover{color:var(--fg);border-color:var(--line-hover)}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
form .full{grid-column:1/-1}
@media (max-width:520px){form{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field > label,.field .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
input,textarea{font:inherit;font-size:14px;color:var(--fg);background:var(--input-bg);border:1px solid var(--card-line);border-radius:14px;padding:12px 14px;width:100%;transition:border-color .2s}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,textarea:focus{outline:none;border-color:var(--brand)}
textarea{min-height:110px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{font-size:13px;color:var(--fg-2);border:1px solid var(--card-line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.2s}
.chips input:checked + label{background:var(--fg);color:#000;border-color:var(--fg)}
.chips input:focus-visible + label{outline:1px solid var(--fg);outline-offset:2px}
.status{grid-column:1/-1;font-size:13px;color:var(--brand-text);min-height:1.4em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--card-line);padding-block:72px 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
.foot-grid > *{min-width:0}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.foot-grid li,.foot-grid li a{color:var(--fg-2);font-size:13px;word-break:break-word}
.foot-grid li a:hover{color:var(--fg)}
.foot-brand p{color:var(--fg-2);margin-top:16px;max-width:36ch}
.foot-brand b{font-size:15px;letter-spacing:.06em}
.foot-giant{font-weight:700;font-size:clamp(64px,19vw,280px);line-height:.8;letter-spacing:-.06em;color:var(--ghost-fill);-webkit-text-stroke:1px var(--ghost-stroke);text-align:center;margin-block:72px 24px;user-select:none;white-space:nowrap;overflow:hidden}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--fg-3);font-size:12px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--card);border:1px solid var(--line-hover);border-radius:999px;padding:10px 18px;font-size:13px;color:var(--fg-2);opacity:0;transition:.3s;z-index:70;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .reveal{transform:none}}

/* ---------- multi-page additions ---------- */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

.page-hero{position:relative;padding-block:120px 72px;overflow-x:clip}
.page-hero .wrap{position:relative;z-index:1;display:grid;gap:22px}
.page-hero h1{font-size:clamp(40px,8.4vw,128px);line-height:.88;letter-spacing:-.05em;text-transform:uppercase;font-weight:700}
.page-hero h1 .o{color:transparent;-webkit-text-stroke:1px var(--stroke)}
.page-hero p{max-width:560px;color:var(--fg-2);font-size:15px}
.page-hero .glow{position:absolute;right:0;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side at 40% 50%,rgba(77,194,179,.22),transparent),radial-gradient(closest-side at 65% 60%,rgba(26,143,131,.16),transparent);filter:blur(50px);pointer-events:none;z-index:0}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--label)}
.crumbs a:hover{color:var(--fg)}
.page-hero .hero-ctas{justify-content:flex-start;margin-top:4px}
.sec-tight{padding-block:0 160px}
@media (max-width:760px){.page-hero{padding-block:72px 48px}.sec-tight{padding-block:0 96px}}

/* home: explore grid */
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.explore{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.explore{grid-template-columns:1fr}}
.tile{position:relative;display:flex;flex-direction:column;gap:14px;min-height:240px;padding:24px;border-radius:var(--r);border:1px solid var(--card-line);background:linear-gradient(180deg,var(--glass),transparent 45%),var(--card);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;min-width:0}
.tile:hover{transform:translateY(-4px) scale(1.02);border-color:var(--line-hover);box-shadow:0 24px 60px -30px rgba(26,143,131,.35)}
.tile h3{font-size:clamp(24px,2.6vw,34px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;margin-top:auto}
.tile p{color:var(--fg-2)}
.tile .go{display:flex;justify-content:space-between;align-items:center}
.tile .arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-hover);display:grid;place-items:center;transition:background .3s,color .3s}
.tile .arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .arrow{background:var(--fg);color:#000}

/* CTA band */
.cta-band{border:1px solid var(--card-line);border-radius:32px;padding:clamp(24px,5vw,64px);display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;background:radial-gradient(60% 90% at 0% 0%,rgba(77,194,179,.14),transparent 60%),radial-gradient(50% 80% at 100% 100%,rgba(26,143,131,.10),transparent 60%),var(--bg-2)}
.cta-band > div{display:grid;gap:16px;min-width:0;max-width:720px}
.cta-band p{color:var(--fg-2)}

/* next page */
.next{display:grid;gap:10px;padding-block:56px;border-top:1px solid var(--card-line)}
.next a{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:clamp(32px,6vw,88px);font-weight:700;letter-spacing:-.045em;line-height:.9;text-transform:uppercase;transition:color .3s}
.next a span{color:transparent;-webkit-text-stroke:1px var(--stroke);transition:color .3s,-webkit-text-stroke-color .3s}
.next a:hover span{color:var(--fg);-webkit-text-stroke-color:var(--fg)}
.next a svg{width:clamp(28px,4vw,56px);height:clamp(28px,4vw,56px);flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* services page: anchored cards get a highlight when targeted */
.card:target{border-color:var(--stroke);box-shadow:0 0 0 1px var(--stroke),0 24px 60px -30px rgba(77,194,179,.45)}
.card .more{margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.card .more:hover{color:var(--fg)}

/* positioning statement */
.statement-xl{font-size:clamp(26px,3.6vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:500;max-width:22ch}
.statement-xl .dim{color:var(--dim)}
.two{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:end}
.two > :first-child{grid-column:1/9}
.two > :last-child{grid-column:10/13;color:var(--fg-2)}
@media (max-width:900px){.two > :first-child,.two > :last-child{grid-column:1/-1}}

/* contact page extras */
.hours{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:18px}
.hours span{border:1px solid var(--card-line);border-radius:10px;padding:8px 0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--fg-3)}
.hours span.open{color:var(--fg);border-color:var(--line-hover);background:var(--btn2)}

.page-hero h1.h1-md{font-size:clamp(22px,5.8vw,88px)}

/* logo */
.logo img{width:22px;height:auto;display:block}
.brand-row{display:flex;align-items:center;gap:14px}
.brand-row img{width:40px;height:auto;flex:none}

/* WhatsApp */
.wa{position:fixed;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:65;display:flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 16px;border-radius:999px;background:var(--wa-bg);color:var(--wa-fg);border:1px solid var(--wa-line);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);font-weight:600;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--wa-shadow);transition:transform .25s,box-shadow .25s,border-color .25s}
.wa:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 44px -14px rgba(77,194,179,.45)}
.wa:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wa svg{width:24px;height:24px;fill:currentColor;flex:none}
.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--wa-ring);animation:waPulse 2.6s ease-out infinite;pointer-events:none}
@keyframes waPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@media (max-width:640px){.wa{width:54px;padding:0;justify-content:center;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}.wa .wa-text{display:none}}
.wa-chip{color:var(--fg);border-color:var(--wa-line)}
.wa-chip:hover{color:var(--fg);background:var(--icon-bg);border-color:var(--brand)}

/* ---------- brand teal accents ---------- */
::selection{background:var(--brand);color:var(--on-brand)}
.icons a.on{color:var(--brand-text)}
.tri{color:var(--brand-text)}
.btn-1:hover{background:var(--btn-hover)}
.feats li::before{background:var(--brand);opacity:.8}
.tile:hover .arrow{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chips input:checked + label{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.stmt:hover h3 em,.next a:hover span{color:var(--brand-text);-webkit-text-stroke-color:var(--brand)}
.crumbs .current{color:var(--brand-text)}
.loop::before{border-left-color:rgba(77,194,179,.28)}
.card .ic,.mini .label:first-child{color:var(--brand-text)}
.pillars i{color:var(--brand-text)}
input:focus,textarea:focus{border-color:var(--brand)}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;min-width:0}
.post-card:hover{transform:translateY(-4px);border-color:var(--line-hover);box-shadow:0 24px 60px -30px rgba(77,194,179,.35)}
.post-media{display:block;position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--card-line)}
.post-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.35) contrast(1.05);transition:transform .6s,filter .6s}
.post-card:hover .post-media img{transform:scale(1.04);filter:none}
.post-ph{position:absolute;inset:0;background:
  radial-gradient(40% 60% at 30% 40%,rgba(77,194,179,.35),transparent 70%),
  radial-gradient(35% 50% at 75% 65%,rgba(26,143,131,.3),transparent 70%),
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/22px 22px,#0B1716}
.post-ph::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:40px;transform:translate(-50%,-50%);background:var(--ph-logo,none) center/contain no-repeat;opacity:.5}
.post-body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 24px;flex:1}
.post-meta{display:flex;justify-content:space-between;gap:12px}
.post-meta .label:first-child{color:var(--brand-text)}
.post-card h3{font-size:20px;line-height:1.15;letter-spacing:-.02em}
.post-card h3 a:hover{color:var(--brand-text)}
.post-card p{color:var(--fg-2)}
.post-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--card-line)}
.post-foot .arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-hover);display:grid;place-items:center;transition:.3s}
.post-foot .arrow svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.post-card:hover .post-foot .arrow{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

/* pagination (WordPress) */
.pagination{margin-top:48px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.page-numbers{min-width:40px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--card-line);display:inline-grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--fg-2)}
.page-numbers.current,.page-numbers:hover{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* single post */
.post-hero{padding-block:120px 40px}
.post-hero .wrap{display:grid;gap:22px;max-width:980px}
.post-hero h1{font-size:clamp(32px,5.4vw,72px);line-height:.95;letter-spacing:-.04em}
.post-hero .post-meta{justify-content:flex-start;gap:20px;flex-wrap:wrap}
.post-cover{max-width:1280px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.post-cover > div{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--card-line);aspect-ratio:21/9;max-width:100%}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.prose{max-width:70ch;margin-inline:auto;padding-block:72px 120px;font-size:16px;line-height:1.75;color:var(--prose)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--fg);margin-top:2em}
.prose h3{font-size:20px;color:var(--fg);margin-top:1.6em}
.prose a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--brand-text)}
.prose blockquote{margin:2em 0;padding-block:4px;padding-inline:24px 0;border-inline-start:2px solid var(--brand);font-size:clamp(20px,2vw,24px);line-height:1.35;color:var(--fg);letter-spacing:-.01em}
.prose img,.prose figure{border-radius:16px;max-width:100%;height:auto}
.prose figure{margin:2em 0}
.prose figcaption{font-size:13px;color:var(--fg-3);margin-top:8px}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--card);border:1px solid var(--card-line);border-radius:6px;padding:.1em .4em}
.prose pre{background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:18px;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--card-line);padding:10px;text-align:start}
.prose hr{border:0;border-top:1px solid var(--card-line);margin:2.5em 0}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;max-width:70ch;margin:-72px auto 0;padding-bottom:96px}
.post-tags a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--card-line);border-radius:999px;padding:6px 12px}
.post-tags a:hover{color:var(--fg);border-color:var(--line-hover)}
.alignwide{max-width:100%}.alignfull{max-width:100%}
.wp-caption{max-width:100%}
.post-card .post-media .post-ph img.ph-mark,.post-card:hover .post-media .post-ph img.ph-mark{position:absolute;left:50%;top:50%;width:44px;height:auto;transform:translate(-50%,-50%);opacity:.6;filter:none}
.post-cover .post-ph img.ph-mark{position:absolute;left:50%;top:50%;width:72px;height:auto;transform:translate(-50%,-50%);opacity:.6}

/* ---------- hero semantics ---------- */
.hero-copy .tri{margin:0}
.hero-sub{font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.stats-head a.label{color:var(--fg-2)}
.stats-head a.label:hover{color:var(--brand-text)}
.foot-brand .tagline{margin-top:4px}
.foot-giant{font-family:"Inter",system-ui,sans-serif}
.lang{display:inline-grid;place-items:center;min-width:36px;height:34px;text-decoration:none}
.lang[lang="ar"]{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-size:15px;letter-spacing:0;padding:4px 11px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.ticker b{direction:ltr;unicode-bidi:isolate}
.skip-link{position:fixed;top:-60px;left:16px;z-index:90;background:var(--fg);color:var(--on-fg);padding:10px 16px;border-radius:999px;font-weight:600;transition:top .2s}
.skip-link:focus{top:calc(16px + env(safe-area-inset-top,0px));clip:auto;width:auto;height:auto}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--card-line)}
.faq-item{border-bottom:1px solid var(--card-line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:26px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-size:clamp(18px,2vw,24px);line-height:1.25;letter-spacing:-.02em;font-weight:500;transition:color .25s}
.faq-item summary:hover h3{color:var(--brand-text)}
.faq-item summary:focus-visible{outline:1px solid var(--fg);outline-offset:4px;border-radius:8px}
.faq-item .pm{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-hover);flex:none;position:relative;transition:background .3s,border-color .3s,color .3s}
.faq-item .pm::before,.faq-item .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq-item .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.faq-item[open] .pm{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.faq-item[open] .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-item .a{padding-bottom:26px;max-width:72ch;color:var(--fg-2);font-size:15px;line-height:1.7}

/* ---------- fact sheet ---------- */
.facts{margin:0;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--card-line)}
.fact{display:grid;grid-template-columns:minmax(110px,.45fr) 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--card-line);min-width:0}
.fact:nth-child(odd){padding-inline-end:32px}
.fact dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);padding-top:4px}
.fact dd{margin:0;color:var(--fg);font-size:15px;min-width:0;overflow-wrap:anywhere}
@media (max-width:860px){.facts{grid-template-columns:1fr}.fact:nth-child(odd){padding-inline-end:0}}

/* ---------- table of contents ---------- */
.prose .toc{border:1px solid var(--card-line);background:var(--card);border-radius:18px;padding:18px 22px;margin-bottom:2em}
.prose .toc ol{margin:10px 0 0;padding-inline-start:1.2em;display:grid;gap:6px;font-size:14px}
.prose .toc a{color:var(--fg-2);text-decoration:none}
.prose .toc a:hover{color:var(--brand-text)}
.prose h2[id]{scroll-margin-top:110px}

/* ================= Arabic / RTL ================= */
:root{--ar-display:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif;--ar-body:"IBM Plex Sans Arabic","Readex Pro",Tahoma,sans-serif}
[dir="rtl"]{--display:var(--ar-display);--body:var(--ar-body)}
[dir="rtl"] body{font-size:15px;line-height:1.85}
[dir="rtl"] :is(h1,h2,h3,.h-sec,.giant span,.page-hero h1,.post-hero h1,.stmt h3,.next a,.tile h3,.card h3,.statement-xl,.quote blockquote,.hero-sub,.faq-item summary h3,.step h3,.mini b,.post-card h3){letter-spacing:0}
[dir="rtl"] :is(.label,.tri,.feats li,.copy,.hours span,.loop-end span,.post-tags a,.icons .tip,.field > label,.field .lbl,.fact dt,.card .more){font-family:var(--ar-body);letter-spacing:0;text-transform:none}
[dir="rtl"] .label{font-size:12px}
[dir="rtl"] .tri{font-size:15px}
[dir="rtl"] .btn{font-size:14px}
[dir="rtl"] :is(.feats li,.hours span,.copy,.loop-end span,.post-tags a){font-size:12.5px}
[dir="rtl"] .fact dt{font-size:13px}
[dir="rtl"] .giant span{line-height:1.14;letter-spacing:0}
[dir="rtl"] .page-hero h1{line-height:1.12}
[dir="rtl"] .h-sec{line-height:1.15}
[dir="rtl"] .post-hero h1{line-height:1.25}
[dir="rtl"] :is(.stmt h3,.next a){line-height:1.2}
[dir="rtl"] :is(.tile h3,.card h3,.step h3){line-height:1.3}
[dir="rtl"] .statement-xl{line-height:1.4}
[dir="rtl"] .quote blockquote{line-height:1.55}
[dir="rtl"] .prose{line-height:1.95}
/* outline text: use a dim fill in Arabic (stroke shows contour overlaps in Arabic fonts) */
[dir="rtl"] :is(.giant span:nth-child(2),.page-hero h1 .o,.stmt h3 em,.next a span){-webkit-text-stroke:0;color:var(--stroke)}
[dir="rtl"] .stmt:hover h3 em,[dir="rtl"] .next a:hover span{color:var(--brand-text)}
[dir="rtl"] .vision::before{font-family:"Inter",system-ui,sans-serif}
[dir="rtl"] :is(.btn svg,.arrow svg,.next a svg){transform:scaleX(-1)}
[dir="rtl"] .ticker b{text-align:right}
[dir="rtl"] .wa{right:auto;left:calc(24px + env(safe-area-inset-left,0px))}
[dir="rtl"] .skip-link{left:auto;right:16px}
@media (max-width:760px){[dir="rtl"] .loop::before{left:auto;right:28px}}
@media (max-width:640px){[dir="rtl"] .wa{left:calc(16px + env(safe-area-inset-left,0px))}}

/* anchored targets stop below the floating menu */
.card[id],section[id],.faq-item[id]{scroll-margin-top:110px}

/* WhatsApp: round button on every screen size */
.wa,[dir="rtl"] .wa{width:58px;height:58px;padding:0;gap:0;justify-content:center;border-radius:50%}
.wa svg{width:28px;height:28px}
.wa .wa-text{display:none}
@media (max-width:640px){.wa,[dir="rtl"] .wa{width:54px;height:54px}.wa svg{width:26px;height:26px}}
/* WhatsApp: clear glass instead of green */
:root{--wa-bg:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04));--wa-fg:#F2FAF8;--wa-line:rgba(255,255,255,.2);--wa-ring:rgba(255,255,255,.32);--wa-shadow:0 14px 36px -14px rgba(0,0,0,.6)}
:root[data-theme="light"]{--wa-bg:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.45));--wa-fg:#0C1615;--wa-line:rgba(12,22,21,.14);--wa-ring:rgba(12,22,21,.2);--wa-shadow:0 14px 36px -16px rgba(12,22,21,.35)}
.mnav-foot .btn-wa{background:var(--wa-bg);color:var(--wa-fg);border:1px solid var(--wa-line)}
[dir="rtl"] .giant span{font-size:clamp(24px,7.2vw,104px)}

/* ================= theme toggle ================= */
.theme-btn{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:none;border:1px solid var(--nav-line);color:var(--icon);cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.theme-btn:hover{color:var(--fg);background:var(--icon-bg);border-color:var(--line-hover)}
.theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}
html.theming,html.theming *{transition:background-color .35s,border-color .35s,color .35s!important}

/* light theme: soft depth on surfaces */
:is(.card,.tile,.mini,.step,.post-card,.quote,.faq-list,.ticker,.contact,.vision,.cta-band,.prose .toc){box-shadow:var(--card-shadow)}
.faq-list{box-shadow:none}

/* ================= phone menu ================= */
.menu-btn{display:none;width:40px;height:40px;border-radius:50%;flex:none;place-items:center;background:var(--btn-bg);border:0;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:50%;top:50%;width:16px;height:1.6px;border-radius:2px;background:var(--btn-fg);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.menu-btn span:first-child{transform:translate(-50%,-4px)}
.menu-btn span:last-child{transform:translate(-50%,3px)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:48;background:var(--menu-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s;padding:calc(env(safe-area-inset-top,0px) + 104px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 32px) max(16px,env(safe-area-inset-left,0px))}
.mnav.open{visibility:visible;opacity:1;transition:opacity .3s}
.mnav-in{max-width:560px;margin-inline:auto;display:grid;gap:22px}
.mnav-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--card-line)}
.mnav-list a{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--card-line);font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--fg);transform:translateY(8px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s,color .2s}
.mnav.open .mnav-list a{transform:none;opacity:1}
.mnav-list li:nth-child(n){--i:0}
.mnav-list a .n{font-family:var(--mono);font-size:11px;color:var(--label);min-width:22px}
.mnav-list a svg{width:18px;height:18px;margin-inline-start:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--icon)}
.mnav-list a[aria-current="page"],.mnav-list a:hover{color:var(--brand-text)}
.mnav-foot{display:flex;flex-wrap:wrap;gap:10px}
.mnav-foot .btn{flex:1 1 auto;justify-content:center;padding:13px 20px;font-size:14px}
html.menu-open{overflow:hidden}
[dir="rtl"] .mnav-list a{letter-spacing:0;font-size:21px}
[dir="rtl"] .mnav-list a svg{transform:scaleX(-1)}

@media (max-width:860px){
  .nav-shell{padding-inline:16px;padding-inline:max(16px,env(safe-area-inset-left,0px))}
  .nav{width:100%;gap:8px}
  .menu-btn{display:inline-grid}
  .icons{display:flex;margin-inline:auto;padding:0 6px;gap:4px}
  .icons li{display:none}
  .icons li.m{display:block}
  .icons a{width:36px;height:36px}
  .icons .tip{display:none}
}
@media (max-width:350px){.icons li.m2{display:none}}
@media (max-width:300px){.icons li.m3{display:none}.nav{gap:6px}}
@media (max-width:560px){.nav .btn-1{display:none}}
@media (prefers-reduced-motion:reduce){.mnav-list a{transform:none;opacity:1}}
.mnav.open .mnav-list a{transition-delay:calc(var(--i,0) * 30ms)}
html.menu-open .wa{opacity:0;visibility:hidden;pointer-events:none}
.mnav-list a{padding-block:12px;font-size:21px}

/* ================= social buttons ================= */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.social-label{display:block;margin-top:26px}
.social-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--line-hover);background:var(--icon-bg);color:var(--icon);transition:color .2s,background .2s,border-color .2s,transform .2s}
a.social-btn:hover,a.social-btn:focus-visible{color:var(--on-brand);background:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.social-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mnav-in > .social{justify-content:center;margin-top:0}

/* ================= hero without the 3D robot: headline in normal flow ================= */
.stage{height:auto;overflow:visible;padding-block:clamp(56px,8vw,112px) clamp(32px,4vw,60px)}
.stage::after{display:none}
.stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:linear-gradient(var(--card-line) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--card-line) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask:radial-gradient(60% 70% at 50% 50%,#000,transparent);mask:radial-gradient(60% 70% at 50% 50%,#000,transparent)}
.halo{top:50%;width:80%;height:100%;z-index:1}
.giant{position:relative;inset:auto;z-index:2;pointer-events:auto;user-select:text}
.hero-copy{margin-top:0}

/* ================= hero visual: interactive line figure (hero-figure.js) ================= */
.hero-visual{position:relative;z-index:2;margin:56px 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--card-line);background:var(--card);aspect-ratio:2400/1050;max-width:100%;box-shadow:0 40px 120px -48px rgba(77,194,179,.45)}
.hero-visual::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.hero-visual figcaption{position:absolute;z-index:1;inset:auto 20px 16px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hero-visual figcaption .label{color:var(--label)}
/* the figure is drawn larger than the panel so its plinth fills it; its own margins fall outside */
.hero-figure{position:absolute;left:50%;top:50%;height:150%;aspect-ratio:5/4;transform:translate(-50%,-56%);opacity:0;transition:opacity .6s ease}
.hero-visual.on .hero-figure{opacity:1}
/* Hairline palette from the brand: plates take the panel colour so they hide what is behind them */
:root{--hairline-plate:var(--card);--hairline-hi:#5FD0C1;--hairline-edge:#8FA5A1;--hairline-mid:#3A534F;--hairline-lo:#1E312E;--hairline-stroke:1}
:root[data-theme="light"]{--hairline-hi:#0E7A6C;--hairline-edge:#6E817D;--hairline-mid:#B5C4C0;--hairline-lo:#E1E8E6}
.stats{margin-top:72px}
@media (max-width:640px){.hero-visual{aspect-ratio:4/3;margin-top:40px}.hero-figure{height:122%}.hero-visual figcaption .label:last-child{display:none}.stats{margin-top:56px}}

/* ================= stats: quiet numerals, units in the brand colour, a short teal tick ================= */
.ticker{text-align:start}
.ticker div{position:relative;padding:30px 24px 24px;gap:12px;justify-items:start}
.ticker div::before{content:"";position:absolute;inset-inline-start:24px;top:0;width:24px;height:2px;border-radius:0 0 2px 2px;background:var(--brand)}
.ticker b{display:flex;align-items:flex-start;color:var(--fg);font-weight:300;font-size:clamp(40px,4.2vw,60px);letter-spacing:-.05em;line-height:1}
.ticker b i{font-style:normal;color:var(--brand-text);font-weight:400;font-size:.44em;letter-spacing:0;line-height:1;margin:.16em .1em 0}
.ticker small{color:var(--fg-3);font-size:13px;line-height:1.55;max-width:28ch}
@media (max-width:420px){
  .ticker{grid-template-columns:1fr 1fr}
  .ticker div{padding:24px 16px 18px}
  .ticker div:nth-child(2){border-top:0}
  .ticker div:nth-child(even){border-inline-start:1px solid var(--card-line)!important}
  .ticker div::before{inset-inline-start:16px}
  .ticker small{font-size:12px}
}

/* ================= wider top bar on desktop (more room between the menu icons) ================= */
@media (min-width:861px){.nav{gap:16px;padding:8px}.icons{gap:10px;padding:0 14px}}
@media (min-width:1100px){.nav{gap:18px;padding:10px}.icons{gap:12px;padding:0 16px}.icons a{width:42px;height:42px}.icons svg{width:18px;height:18px}.logo{width:44px;height:44px}.logo img{width:26px}.theme-btn{width:42px;height:42px}.nav .btn-1{padding:14px 26px;font-size:15px}}

/* ================= "Book Consultation" in the top bar: #4F6763 (owner choice), light text ================= */
.nav .btn-1{background:#4F6763;color:#F2FAF8}
.nav .btn-1:hover{background:#5B756F;color:#FFFFFF}
/* blog: topic art on cards (one drawing per category, light and dark) and the topic links */
.topic-art{position:absolute;inset:0}
.post-media .topic-art img{position:absolute;inset:0;filter:none}
.post-card:hover .post-media .topic-art img{filter:none}
.topic-art img.lt{display:none}
:root[data-theme="light"] .topic-art img.dk{display:none}:root[data-theme="light"] .topic-art img.lt{display:block}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.topics a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--card-line);border-radius:999px;background:var(--card);color:var(--fg-2);font-size:14px;font-weight:500;transition:border-color .2s,color .2s}
.topics a:hover{border-color:var(--line-hover);color:var(--fg)}
.topics a[aria-current]{background:var(--fg);border-color:var(--fg);color:var(--on-fg)}
.topics span{font-family:var(--mono);font-size:11px;opacity:.65}
@media (max-width:600px){.topics{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 2px;scrollbar-width:none}.topics::-webkit-scrollbar{display:none}.topics a{flex:none}}
/* transparent circle that follows the mouse (app.js; mouse and trackpad only) */
.cursor-ring{position:fixed;left:0;top:0;width:38px;height:38px;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;
  border:1px solid rgba(95,208,193,.55);background:rgba(77,194,179,.06);
  transition:opacity .25s,width .25s,height .25s,background .25s,border-color .25s}
.cursor-ring.on{opacity:1}
.cursor-ring.big{width:62px;height:62px;background:rgba(77,194,179,.12);border-color:rgba(95,208,193,.8)}
.cursor-ring.press{width:30px;height:30px}
:root[data-theme="light"] .cursor-ring{border-color:rgba(14,122,108,.5);background:rgba(14,122,108,.06)}
:root[data-theme="light"] .cursor-ring.big{border-color:rgba(14,122,108,.75);background:rgba(14,122,108,.1)}
@media (hover:none),(pointer:coarse){.cursor-ring{display:none}}
/* desktop: the bar spans the same width as the page content, with the icons spread evenly */
@media (min-width:1100px){.nav{width:min(100%,1248px)}.icons{flex:1;justify-content:space-between;padding:0 28px}}
/* Services page: links to the articles on each service */
.card .guides{display:grid;gap:10px;margin-top:4px;padding-top:16px;border-top:1px solid var(--card-line)}
.card .guides ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.card .guides a{color:var(--fg-2);font-size:14px;line-height:1.4;text-decoration:underline;text-decoration-color:var(--card-line);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.card .guides a:hover{color:var(--fg);text-decoration-color:var(--brand)}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}