/* ============================================================
TOKENS
============================================================ */
:root{
/* Palette derived from the Al Sada logo — sampled brand blue #0E72B8 */
--brand:#0E72B8;
--brand-600:#0A5C97;
--brand-50:#E7F2FB;
--accent:#4FA9E6;
--spark:#8FD6FF;
--navy-950:#03192C;
--navy-900:#04223B;
--navy-800:#072F4E;
--navy-700:#0B4571;
--ink:#0C1F30;
--body:#4A5A6B;
--muted:#7A8A9A;
--line:#DFE7EF;
--surface:#F4F8FB;
--shell:1200px;
--pad:clamp(20px,5vw,40px);
/* the first screen is header + hero + ticker exactly; these drive that sum */
--header-h:92px;
--ticker-h:50px;
--r-sm:9px; --r-md:16px; --r-lg:22px;
--shadow-sm:0 1px 2px rgba(9,24,45,.05), 0 4px 14px rgba(9,24,45,.05);
--shadow-md:0 4px 12px rgba(9,24,45,.06), 0 20px 44px rgba(9,24,45,.09);
--shadow-lg:0 36px 80px rgba(3,25,44,.24);
--font-d:'Sora',ui-sans-serif,system-ui,sans-serif;
--font-b:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
--ease:cubic-bezier(.22,.72,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--font-b);color:var(--body);
font-size:16px;line-height:1.65;background:#fff;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-d);color:var(--ink);margin:0;line-height:1.16;letter-spacing:-.025em;font-weight:600}
/* stops single-word orphans on the last line of a heading */
h2,h3,.section-head p{text-wrap:balance}
h1{font-size:clamp(1.9rem,3.4vw,2.55rem);letter-spacing:-.032em;font-weight:700}
h2{font-size:clamp(1.8rem,3.7vw,2.8rem);letter-spacing:-.03em}
h3{font-size:1.15rem}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.section{padding:clamp(70px,9vw,128px) 0;position:relative}
.section--surface{background:var(--surface)}
/* ============================================================
SCROLL PROGRESS
============================================================ */
.progress{
position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
background:linear-gradient(90deg,var(--brand),var(--accent),var(--spark));
transform:scaleX(0);transform-origin:0 50%;
box-shadow:0 0 12px rgba(79,169,230,.7);
}
/* ============================================================
SHARED
============================================================ */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-d);font-size:.71rem;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin-bottom:18px;
}
.eyebrow::before{
content:"";width:26px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--brand),transparent);
}
.eyebrow--light{color:var(--accent)}
.eyebrow--light::before{background:linear-gradient(90deg,var(--accent),transparent)}
.lede{font-size:1.07rem;max-width:62ch}
.section-head{max-width:680px;margin-bottom:clamp(42px,5vw,64px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{margin-top:18px}
/* buttons ------------------------------------------------ */
.btn{
position:relative;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--font-d);font-weight:600;font-size:.92rem;
padding:15px 28px;border-radius:var(--r-sm);
transition:transform .22s var(--ease), box-shadow .28s var(--ease), background .22s ease, border-color .22s ease;
white-space:nowrap;
}
/* light sweep on hover */
.btn::after{
content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
transform:skewX(-18deg);transition:left .65s var(--ease);
}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 6px 20px rgba(14,114,184,.34)}
.btn--primary:hover{background:var(--brand-600);box-shadow:0 14px 32px rgba(14,114,184,.46)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.26);color:#fff}
.btn--ghost:hover{border-color:rgba(143,214,255,.85);background:rgba(79,169,230,.12)}
.btn--outline{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn--outline:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.btn svg{width:17px;height:17px;flex:none;position:relative;z-index:1}
.btn span{position:relative;z-index:1}
/* ============================================================
CIRCUIT / ELECTRICITY SYSTEM
============================================================ */
.circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* copper: thin branch spurs, thicker buses — real boards mix gauges */
.circuit .trace{fill:none;stroke:rgba(126,196,246,.17);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.circuit .bus{stroke:rgba(126,196,246,.28);stroke-width:2}
/* ------------------------------------------------------------
SKYLINE
The reference elevations are placed as pictures, unaltered. The
travelling current runs a path traced from those same pictures,
so the spark rides the building outline without anything being
redrawn.
------------------------------------------------------------ */
/* The reference elevations themselves, unretouched. Their luminance was baked
into the alpha channel so the black ground is simply transparent - no blend
mode to depend on - and the linework sits directly on the navy. */
.circuit .twr-pic{opacity:0;animation:picIn 1.5s var(--ease) forwards}
@keyframes picIn{to{opacity:.82}}
/* ------------------------------------------------------------
The towers live in the empty band outside the content column, so they
never sit under the copy or the card. That band is measured from the
hero's own width - 50% of it, less half the shell, plus the shell's
padding - rather than 100vw, which would include the scrollbar and let
them creep under the text. Below ~1340px the band is too narrow to hold
a building without touching, so they are simply not shown.
------------------------------------------------------------ */
.sky{display:none;position:absolute;bottom:0;z-index:0;pointer-events:none}
@media (min-width:1340px){
.sky{
display:block;
width:calc(50% - var(--shell)/2 + var(--pad) - 16px);
height:86%;
}
.sky--l{left:8px}
.sky--r{right:8px}
}
/* solder pads: ring + centre, like a real via */
.circuit .pad{fill:none;stroke:rgba(143,214,255,.42);stroke-width:1.4}
.circuit .padc{fill:rgba(143,214,255,.6)}
.circuit .live{animation:padPulse 3.6s ease-in-out infinite}
@keyframes padPulse{0%,100%{opacity:.28}50%{opacity:1}}
/* Travelling current: a bright head with a softer tail streaming behind it.
The tail runs on the same clock but its dash pattern is shifted back by
(tailLen - headLen), so their leading edges always coincide — a time-based
lag would drift, since the same delay covers more path on a faster line. */
.circuit .pulse,.circuit .tail{
fill:none;stroke-linecap:round;
animation-timing-function:linear;animation-iteration-count:infinite;
}
.circuit .pulse{
stroke:#F2FBFF;stroke-width:2.2;stroke-dasharray:8 992;stroke-dashoffset:1000;
animation-name:current;
}
.circuit .tail{
stroke:var(--accent);stroke-width:7;stroke-dasharray:64 936;stroke-dashoffset:1056;
opacity:.26;animation-name:currentTail;
}
@keyframes current{to{stroke-dashoffset:0}}
@keyframes currentTail{to{stroke-dashoffset:56}}
/* a thin energised rule used between sections */
.hr-live{position:relative;height:1px;background:var(--line);overflow:hidden}
.hr-live::after{
content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
animation:sweep 4.5s linear infinite;
}
@keyframes sweep{to{left:130%}}
/* ============================================================
HEADER
============================================================ */
.header{
position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
border-bottom:1px solid var(--line);
transition:box-shadow .3s ease, background .3s ease;
}
.header.is-stuck{box-shadow:0 8px 30px rgba(9,24,45,.1);background:rgba(255,255,255,.985)}
/* The header runs wider than the 1200px content shell, which pushes the brand
further out toward the edge than the body copy sits. */
.header__in{display:flex;align-items:center;gap:22px;min-height:var(--header-h);max-width:1340px}
.brand{display:flex;align-items:center;margin-inline-end:auto}
.brand__img{height:62px;width:auto;transition:transform .3s var(--ease),filter .3s ease}
.brand:hover .brand__img{transform:scale(1.03);filter:drop-shadow(0 0 7px rgba(14,114,184,.55))}
@media(max-width:900px){.brand__img{height:52px}}
@media(max-width:520px){.brand__img{height:42px}}
/* Language switch: a two-up segmented control. Both labels stay visible so
the alternative is discoverable without reading the current language. */
.lang{display:inline-flex;flex:none;padding:3px;gap:2px;border:1px solid var(--line);border-radius:999px;background:#fff}
.lang__b{
font-family:var(--font-d);font-size:.78rem;font-weight:600;line-height:1;
padding:8px 13px;border-radius:999px;border:0;background:transparent;
color:var(--muted);cursor:pointer;transition:background .22s var(--ease),color .22s ease;
white-space:nowrap;
}
.lang__b[lang="ar"]{font-family:'Cairo',var(--font-d);font-size:.82rem}
.lang__b:hover{color:var(--ink)}
.lang__b.is-on{background:var(--brand);color:#fff}
.lang__b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:520px){.lang__b{padding:7px 10px;font-size:.72rem}}
.nav{display:flex;gap:2px;align-items:center}
.nav a{
position:relative;padding:10px 15px;border-radius:var(--r-sm);
font-size:.9rem;font-weight:500;color:var(--body);white-space:nowrap;
transition:color .2s ease;
}
.nav a::before{
content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--brand),var(--accent));
transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::before,.nav a.is-active::before{transform:scaleX(1)}
.nav a.is-active{color:var(--brand);font-weight:600}
.nav .btn{display:none}
.nav .btn::before{display:none}
.header .btn{padding:12px 22px;font-size:.87rem}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .2s ease}
.burger span+span{margin-top:4px}
.header.is-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header.is-open .burger span:nth-child(2){opacity:0}
.header.is-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1000px){
.burger{display:grid}
.header__in>.btn{display:none}
.nav{
position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
align-items:stretch;gap:0;padding:10px var(--pad) 24px;border-bottom:1px solid var(--line);
box-shadow:var(--shadow-md);
opacity:0;visibility:hidden;transform:translateY(-12px);transition:.28s var(--ease);
}
.header.is-open .nav{opacity:1;visibility:visible;transform:none}
.nav a{padding:14px 6px;border-bottom:1px solid var(--line);border-radius:0}
.nav a::before{display:none}
.nav .btn{display:inline-flex;margin-top:18px;border-bottom:0}
}
/* ============================================================
HERO
============================================================ */
/* Fills whatever is left of the first screen once the header and ticker are
accounted for, so the view ends on the moving strip. min-height, not height,
so a stacked mobile layout can still grow past it. */
.hero{
position:relative;background:var(--navy-950);color:#fff;overflow:hidden;isolation:isolate;
/* no align-content:center — the inner grid stretches to fill, so the card
can spend the spare height on a bigger photo instead of leaving it blank */
display:grid;
min-height:calc(100vh - var(--header-h) - var(--ticker-h) - 1px);
min-height:calc(100svh - var(--header-h) - var(--ticker-h) - 1px);
}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(900px 480px at 78% -6%, rgba(79,169,230,.26), transparent 64%),
radial-gradient(700px 560px at 4% 100%, rgba(11,69,113,.7), transparent 68%),
linear-gradient(168deg,var(--navy-950),var(--navy-900) 52%,#05203a);
}
.hero__glow{
position:absolute;top:8%;right:6%;width:min(46vw,560px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(79,169,230,.2),transparent 66%);
animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
/* darkens the copy side so traces never fight the headline */
.hero__scrim{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(660px 540px at 33% 50%,rgba(3,25,44,.72),rgba(3,25,44,.24) 60%,transparent 82%);
}
/* softens the seam into the ticker below */
.hero__fade{
position:absolute;left:0;right:0;bottom:0;height:140px;z-index:0;pointer-events:none;
background:linear-gradient(transparent,var(--navy-950));
}
.hero__grid{
position:absolute;inset:0;z-index:-1;opacity:.26;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}
.hero__in{
position:relative;z-index:1;
/* media column gets the larger share so the photo reads at a decent size */
display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,3.4vw,56px);align-items:stretch;
/* padding-block only — the `padding: x 0` shorthand would override the
padding-inline .shell sets, letting content hit the screen edge */
padding-block:clamp(26px,3.6vh,58px);
}
.hero h1{color:#fff}
/* Kept as one element so the gradient stays continuous and the phrase can still
wrap — hence opacity/blur only, since transforms don't apply to inline boxes. */
.hero h1 .grad{
background:linear-gradient(100deg,var(--accent),var(--spark) 55%,#fff);
-webkit-background-clip:text;background-clip:text;color:transparent;
opacity:0;animation:fadeSoft .6s var(--ease) forwards;
}
@keyframes fadeSoft{to{opacity:1}}
.hero .eyebrow{margin-bottom:14px}
.hero__sub{
margin-top:18px;font-size:clamp(.97rem,1.35vw,1.06rem);line-height:1.72;
color:rgba(255,255,255,.76);max-width:56ch;
text-align:justify;text-justify:inter-word;text-wrap:pretty;
}
/* justified text needs a rag-free column; below the two-column break the
measure gets too narrow and word spacing opens up badly */
@media(max-width:920px){.hero__sub{text-align:left}}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* a fixed 2x2 grid — flex-wrap left the rows ragged and unaligned */
.hero__pills{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
max-width:56ch;
}
@media(max-width:520px){.hero__pills{grid-template-columns:1fr}}
.pill{
display:flex;align-items:center;gap:9px;font-size:.79rem;font-weight:500;
color:rgba(255,255,255,.84);background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.12);padding:9px 15px;border-radius:100px;
transition:border-color .25s ease,background .25s ease,transform .25s var(--ease);
}
.pill:hover{border-color:rgba(143,214,255,.5);background:rgba(79,169,230,.12);transform:translateY(-2px)}
.pill svg{width:14px;height:14px;color:var(--accent);flex:none}
/* word-stagger reveal for the headline */
.w{display:inline-block;opacity:0;transform:translateY(22px);
animation:wordUp .78s var(--ease) forwards}
@keyframes wordUp{to{opacity:1;transform:none}}
/* hero card */
.hero__card{
position:relative;background:rgba(9,40,66,.76);border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-lg);padding:clamp(20px,2.4vw,27px);
box-shadow:var(--shadow-lg);overflow:hidden;
display:flex;flex-direction:column;
}
/* keeps the copy optically centred when the card is the taller column */
.hero__copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero__card::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--spark),transparent);
opacity:.8;
}
.hero__card h3{color:#fff;font-size:1.08rem}
.hero__card>p{color:rgba(255,255,255,.6);font-size:.88rem;margin-top:8px}
/* ---- rotating capability showcase ------------------------------
Photos live in img/ and are stock (Pexels Licence — see img/CREDITS.txt).
To swap in Al Sada's own project photography, overwrite the file in img/
keeping the same name, or repoint the ![]()
. Roughly 4:3, min 800x600.
------------------------------------------------------------------ */
/* Takes the card's spare height, capped so the slide stays near the photos'
native 4:3. Deliberately NOT aspect-ratio: that gives the box a definite
height, which inflates the card's min-content and pushes the ticker off
screen on short displays. max-height only ever shrinks, so it is safe. */
.showcase{margin-top:18px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.stage{
position:relative;width:100%;flex:1;
min-height:130px;max-height:min(40vh,380px);overflow:hidden;
}
.slide{
position:absolute;top:0;left:50%;width:86%;height:100%;margin:0;
border-radius:var(--r-md);overflow:hidden;
opacity:0;pointer-events:none;
transform:translateX(-50%) scale(.8);
transition:transform .65s var(--ease),opacity .55s var(--ease);
}
.slide.is-active{
opacity:1;z-index:3;transform:translateX(-50%) scale(1);pointer-events:auto;
box-shadow:0 18px 44px rgba(2,17,30,.7),0 0 0 1px rgba(143,214,255,.22);
}
.slide.is-prev {opacity:.28;z-index:2;transform:translateX(-150%) scale(.9)}
.slide.is-next {opacity:.28;z-index:2;transform:translateX(50%) scale(.9)}
.slide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* brand tint so stock photography still reads as part of the palette */
.slide::before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(158deg,rgba(14,114,184,.2),rgba(3,25,44,.4));
}
/* only the active caption is shown — peeked captions would collide with it */
.slide__cap{
position:absolute;left:0;right:0;bottom:0;padding:42px 16px 15px;z-index:2;
background:linear-gradient(transparent,rgba(2,17,30,.82) 45%,rgba(2,17,30,.96));
opacity:0;transition:opacity .4s var(--ease);
}
.slide.is-active .slide__cap{opacity:1}
.slide__cap b{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:.95rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.slide__cap b svg{width:17px;height:17px;flex:none;color:var(--spark)}
.slide__cap span{display:block;font-size:.75rem;color:rgba(255,255,255,.72);margin-top:3px}
.stage__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:4;
width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:rgba(3,25,44,.82);border:1px solid rgba(255,255,255,.22);
transition:background .22s ease,border-color .22s ease;
}
.stage__nav:hover{background:var(--brand);border-color:var(--brand)}
.stage__nav svg{width:16px;height:16px;color:#fff}
.stage__nav--prev{left:0}
.stage__nav--next{right:0}
.dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.dots button{
width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.24);
transition:background .25s ease,width .25s var(--ease);
}
.dots button.on{background:var(--spark);width:20px;border-radius:4px}
.hero__card .btn{width:100%;margin-top:16px}
.hero__note{margin-top:11px;font-size:.74rem;color:rgba(255,255,255,.46);text-align:center}
.dots{margin-top:13px}
@media(max-width:920px){
.hero__in{grid-template-columns:1fr;padding-bottom:70px}
.hero__card{order:2}
}
@media(max-width:420px){.stage{min-height:158px}.slide{width:84%}}
/* Short viewports: the hero's height comes from its content, so without these
the ticker gets pushed under the fold on a 768px laptop. Tighten type and
rhythm by height so the first screen still ends on the moving strip. */
@media(min-width:921px) and (max-height:820px){
h1{font-size:clamp(1.7rem,3.1vw,2.35rem)}
.hero__sub{margin-top:14px;font-size:.95rem}
.hero__cta{margin-top:20px}
.hero__pills{margin-top:18px;padding-top:14px;gap:8px}
.pill{padding:6px 12px;font-size:.75rem}
.hero .btn{padding:12px 22px}
}
@media(min-width:921px) and (max-height:700px){
h1{font-size:clamp(1.55rem,2.8vw,2rem)}
.hero__sub{margin-top:11px;font-size:.9rem;max-width:50ch}
.hero__cta{margin-top:16px}
.hero__pills{margin-top:14px;padding-top:11px}
.pill{padding:5px 10px;font-size:.72rem}
.hero .btn{padding:10px 18px;font-size:.85rem}
.hero__card{padding:17px}
.showcase{margin-top:13px}
.stage{min-height:clamp(118px,17vh,150px)}
}
/* ============================================================
TICKER
============================================================ */
.ticker{background:var(--navy-900);overflow:hidden;position:relative;height:var(--ticker-h)}
/* energised wire along the top and bottom edge of the strip */
.ticker__wire{position:absolute;left:0;right:0;height:1px;z-index:3;background:rgba(126,196,246,.16);overflow:hidden}
.ticker__wire--top{top:0}
.ticker__wire--bot{bottom:0}
.ticker__wire::after{
content:"";position:absolute;top:0;left:-24%;width:24%;height:100%;
background:linear-gradient(90deg,transparent,var(--spark),transparent);
box-shadow:0 0 10px rgba(143,214,255,.8);
animation:wire 6.5s linear infinite;
}
.ticker__wire--bot::after{animation-duration:8.5s;animation-delay:-3s}
@keyframes wire{to{left:124%}}
.ticker::before,.ticker::after{
content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--navy-900),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--navy-900),transparent)}
.ticker__track{display:flex;width:max-content;height:100%;animation:roll 34s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;gap:44px;padding:0 22px;height:100%}
.ticker__set span,.ticker__set a{
display:flex;align-items:center;gap:10px;white-space:nowrap;
font-family:var(--font-d);font-size:.82rem;font-weight:500;
letter-spacing:.05em;color:rgba(255,255,255,.62);text-transform:uppercase;
}
.ticker__set svg{width:15px;height:15px;flex:none;color:var(--accent)}
.ticker__set a:hover{color:#fff}
/* phone is the primary contact now the top bar is gone — lit so it reads as a CTA */
.ticker__set .tel{color:var(--spark);font-weight:600;letter-spacing:.04em}
.ticker__set .tel svg{color:var(--spark);filter:drop-shadow(0 0 6px rgba(143,214,255,.75))}
/* an address is not a label — leave its casing alone */
.ticker__set .mail{text-transform:none;letter-spacing:.01em}
@keyframes roll{to{transform:translateX(-50%)}}
/* ============================================================
STATS
============================================================ */
.stats{
position:relative;overflow:hidden;isolation:isolate;
background:linear-gradient(180deg,var(--navy-900),var(--navy-800) 58%,var(--navy-900));
}
.stats::before{
content:"";position:absolute;inset:0;z-index:0;
background:radial-gradient(720px 280px at 50% -10%,rgba(79,169,230,.16),transparent 72%);
}
.stats__in{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{position:relative;padding:48px 24px 44px;text-align:center;transition:transform .32s var(--ease)}
/* hairline dividers that fade out top and bottom instead of hard 1px rules */
.stat+.stat::before{
content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;
background:linear-gradient(180deg,transparent,rgba(126,196,246,.32),transparent);
}
.stat:hover{transform:translateY(-5px)}
.stat__ico{
width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin:0 auto 17px;
background:rgba(79,169,230,.1);border:1px solid rgba(126,196,246,.2);
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.stat:hover .stat__ico{background:rgba(79,169,230,.2);border-color:rgba(143,214,255,.5);box-shadow:0 0 24px rgba(79,169,230,.32)}
.stat__ico svg{width:21px;height:21px;color:var(--accent)}
.stat b{
display:block;font-family:var(--font-d);font-size:clamp(1.9rem,3.4vw,2.6rem);
color:#fff;font-weight:700;letter-spacing:-.035em;text-shadow:0 0 34px rgba(143,214,255,.3);
}
.stat i{font-style:normal;color:var(--accent)}
.stat__label{display:block;margin-top:10px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500}
@media(max-width:780px){
.stats__in{grid-template-columns:1fr 1fr}
.stat{padding:32px 16px}
/* on two columns the 3rd tile starts a row, so its left divider is wrong */
.stat:nth-child(odd)::before{display:none}
}
/* ============================================================
SERVICES
============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
.svc{
position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
padding:30px 28px 28px;overflow:hidden;
/* column + auto margin on the list bottom-anchors it, so the divider rules
line up across the row even though descriptions run 2 or 3 lines */
display:flex;flex-direction:column;
transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .3s ease;
}
.svc::before{
content:"";position:absolute;left:0;top:0;height:3px;width:0;
background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .45s var(--ease);
}
.svc:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:transparent}
.svc:hover::before{width:100%}
.svc__ico{
position:relative;width:52px;height:52px;border-radius:14px;background:var(--brand-50);
display:grid;place-items:center;margin-bottom:20px;
transition:transform .35s var(--ease),background .3s ease;
}
.svc:hover .svc__ico{transform:translateY(-3px) rotate(-5deg);background:var(--brand)}
.svc__ico svg{width:24px;height:24px;color:var(--brand);transition:color .3s ease}
.svc:hover .svc__ico svg{color:#fff}
.svc p{margin-top:11px;margin-bottom:18px;font-size:.92rem}
.svc ul{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:9px}
.svc li{display:flex;gap:10px;font-size:.87rem;line-height:1.45}
.svc li svg{width:15px;height:15px;color:var(--brand);flex:none;margin-top:4px}
/* ============================================================
COMPLIANCE + PROCESS
============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,74px);align-items:start}
@media(max-width:960px){.split{grid-template-columns:1fr}}
.checks{display:grid;gap:20px;margin-top:32px}
.checks li{display:flex;gap:16px}
.checks .tick{
width:30px;height:30px;border-radius:50%;background:var(--brand-50);
display:grid;place-items:center;flex:none;margin-top:1px;
transition:transform .4s var(--ease),background .3s ease;
}
.checks li:hover .tick{background:var(--brand);transform:scale(1.1)}
.checks .tick svg{width:15px;height:15px;color:var(--brand);transition:color .3s ease}
.checks li:hover .tick svg{color:#fff}
.checks b{display:block;color:var(--ink);font-family:var(--font-d);font-size:1rem;font-weight:600;margin-bottom:4px}
.checks p{font-size:.9rem}
.panel{
position:relative;overflow:hidden;
background:linear-gradient(165deg,var(--navy-800),var(--navy-950));
border-radius:var(--r-lg);padding:clamp(30px,3.4vw,42px);color:#fff;
box-shadow:var(--shadow-lg);
}
.panel__head{position:relative;z-index:1}
.panel h3{color:#fff;font-size:1.2rem}
.panel__head p{color:rgba(255,255,255,.6);font-size:.9rem;margin-top:9px}
.steps{position:relative;margin-top:30px;padding-left:46px;z-index:1}
/* the track the current runs down */
.steps__track{position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.12);border-radius:2px}
.steps__beam{
position:absolute;left:15px;top:6px;width:2px;height:0;border-radius:2px;
background:linear-gradient(180deg,var(--brand),var(--accent),var(--spark));
box-shadow:0 0 12px rgba(143,214,255,.75);
transition:height .7s var(--ease);
}
.step{position:relative;padding:0 0 26px}
.step:last-child{padding-bottom:0}
.step__n{
position:absolute;left:-46px;top:0;width:32px;height:32px;border-radius:10px;
display:grid;place-items:center;font-family:var(--font-d);font-size:.78rem;font-weight:700;
background:var(--navy-800);color:rgba(255,255,255,.4);
border:1px solid rgba(255,255,255,.16);
transition:all .45s var(--ease);
}
.step.lit .step__n{
background:rgba(79,169,230,.2);color:var(--spark);border-color:rgba(143,214,255,.6);
box-shadow:0 0 16px rgba(79,169,230,.45);
}
.step b{display:block;color:#fff;font-family:var(--font-d);font-size:.97rem;font-weight:600;margin-bottom:3px}
.step p{color:rgba(255,255,255,.58);font-size:.85rem;line-height:1.55}
/* ============================================================
SECTORS
============================================================ */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:840px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.sectors{grid-template-columns:1fr}}
.sector{
position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
border-radius:var(--r-md);padding:24px 18px 22px;text-align:center;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
}
.sector::after{
content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
background:radial-gradient(180px 120px at 50% 0%,rgba(79,169,230,.14),transparent 70%);
}
.sector:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:var(--shadow-sm)}
.sector:hover::after{opacity:1}
.sector svg{width:26px;height:26px;color:var(--brand);margin:0 auto 11px;transition:transform .35s var(--ease)}
.sector:hover svg{transform:translateY(-3px) scale(1.08)}
.sector b{display:block;font-family:var(--font-d);font-size:.95rem;color:var(--ink);font-weight:600;position:relative}
.sector span{display:block;font-size:.8rem;color:var(--muted);margin-top:5px;position:relative}
/* ============================================================
WHY
============================================================ */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
@media(max-width:880px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.why{grid-template-columns:1fr}}
.why__item{background:#fff;padding:34px 28px;transition:background .3s ease;position:relative}
.why__item::before{
content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .45s var(--ease);
}
.why__item:hover{background:var(--surface)}
.why__item:hover::before{width:100%}
.why__ico{width:44px;height:44px;border-radius:12px;background:var(--brand-50);display:grid;place-items:center;margin-bottom:16px;transition:transform .35s var(--ease)}
.why__item:hover .why__ico{transform:translateY(-3px)}
.why__ico svg{width:21px;height:21px;color:var(--brand)}
.why__item b{display:block;font-family:var(--font-d);font-size:1.02rem;color:var(--ink);font-weight:600;margin-bottom:8px}
.why__item p{font-size:.89rem}
/* ============================================================
CTA BAND
============================================================ */
/* ============================================================
CONTACT
============================================================ */
.info{display:grid;gap:2px;margin-top:32px}
.info li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.info li:last-child{border-bottom:0}
.info__ico{width:42px;height:42px;border-radius:12px;background:var(--brand-50);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.info li:hover .info__ico{transform:translateY(-2px)}
.info__ico svg{width:18px;height:18px;color:var(--brand)}
.info b{display:block;font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.info span,.info a{font-family:var(--font-d);font-size:.98rem;color:var(--ink);font-weight:500}
.info a:hover{color:var(--brand)}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-sm)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form__row{grid-template-columns:1fr}}
.field{display:block;margin-bottom:18px}
.field span{display:block;font-size:.79rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.field span i{color:var(--brand);font-style:normal}
.field input,.field select,.field textarea{
width:100%;font:inherit;font-size:.92rem;color:var(--ink);
padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field textarea{resize:vertical;min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{
outline:0;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(14,114,184,.13);
}
.form .btn{width:100%;margin-top:6px}
.form__fine{margin-top:15px;font-size:.78rem;color:var(--muted);text-align:center}
.form__ok{
display:none;margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);
background:var(--brand-50);border:1px solid rgba(14,114,184,.32);
color:var(--brand-600);font-size:.87rem;font-weight:500;
}
.form__ok.show{display:block;animation:wordUp .5s var(--ease) forwards}
/* ============================================================
FOOTER
============================================================ */
.footer{background:var(--navy-950);color:rgba(255,255,255,.6);font-size:.88rem;position:relative;overflow:hidden}
.footer__top{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-block:clamp(54px,6.5vw,80px) 50px}
@media(max-width:880px){.footer__top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:540px){.footer__top{grid-template-columns:1fr}}
/* flat PNG can't be recoloured per-element, so knock the whole lockup to white */
.footer .brand__img{height:54px;filter:brightness(0) invert(1);opacity:.92}
.footer__about{margin-top:20px;max-width:34ch;line-height:1.7;font-size:.87rem}
.footer h4{color:#fff;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.footer__list{display:grid;gap:11px}
.footer__list a{transition:color .2s ease,padding-left .25s var(--ease)}
.footer__list a:hover{color:var(--accent);padding-left:5px}
.footer__contact li{display:flex;gap:11px;margin-bottom:13px;line-height:1.5}
.footer__contact svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:4px}
.footer__contact a:hover{color:#fff}
.footer__bar{
position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);padding:24px 0;
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem;color:rgba(255,255,255,.42);
}
/* whatsapp */
.wa{
position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
background:#25D366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.42);
transition:transform .25s var(--ease);
}
.wa:hover{transform:scale(1.1) translateY(-2px)}
.wa svg{width:28px;height:28px;color:#fff}
/* ============================================================
REVEAL
============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* ============================================================
SPLASH — the logo strikes on like a neon tube
============================================================
Electrical read: circuit traces feed power in from both edges, the
current arrives, and the mark strikes with the stutter a real tube
makes before it holds. The glow is layered drop-shadows, which follow
the artwork's own alpha, so light wraps the strokes like a tube rather
than sitting behind it as a rectangle.
Art note: logo-mark-hi.png / logo-name-hi.png are 4x, de-noised and
re-crisped, and already white. The original PNGs are only 110px and
316px wide, so displaying them at splash size was upscaling ~2x — that
soft edge was why this read as flat and cheap. They now draw well under
native size and stay razor sharp.
------------------------------------------------------------ */
html.splash-on{overflow:hidden}
.splash{
position:fixed;inset:0;z-index:300;display:grid;place-items:center;
background:radial-gradient(1200px 800px at 50% 46%,#0b3a60,#062a47 46%,#03182b 100%);
}
.splash[hidden]{display:none}
/* fine grain — large dark gradients band badly without it */
.splash::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.splash::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(135% 105% at 50% 50%,transparent 44%,rgba(1,8,16,.78));
}
/* ---- supply wires ---- */
.splash__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.splash__wires .w{fill:none;stroke:rgba(126,196,246,.27);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.splash__wires .pad{fill:none;stroke:rgba(143,214,255,.4);stroke-width:1.3}
.splash__wires .padc{fill:rgba(143,214,255,.6)}
/* current runs inward and arrives just as the tube strikes */
.splash__wires .surge{
fill:none;stroke:#EAF7FF;stroke-width:2.4;stroke-linecap:round;
stroke-dasharray:70 930;stroke-dashoffset:1000;
animation:surge .62s cubic-bezier(.35,0,.2,1) forwards;
}
.splash__wires .surge.s2{animation-delay:.06s}
.splash__wires .surge.s3{animation-delay:.12s}
/* ---- neon lockup ---- */
.splash__lockup{
position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
gap:clamp(20px,3vh,34px);padding:0 24px;
}
.neon{position:relative;line-height:0;opacity:0}
.neon img{display:block;width:100%;height:auto}
/* the tube: a bright core wrapped in two glow radii */
.neon--mark{
width:clamp(110px,13.5vw,168px);
filter:drop-shadow(0 0 3px rgba(205,240,255,.8))
drop-shadow(0 0 11px rgba(79,169,230,.7))
drop-shadow(0 0 30px rgba(14,114,184,.5));
animation:strike .5s steps(1,end) .46s forwards, hum 3.4s ease-in-out 1s infinite;
}
.neon--name{
width:clamp(232px,29vw,352px);
filter:drop-shadow(0 0 2.5px rgba(210,242,255,.8))
drop-shadow(0 0 9px rgba(79,169,230,.62))
drop-shadow(0 0 24px rgba(14,114,184,.42));
animation:strike .46s steps(1,end) .82s forwards, hum 3.4s ease-in-out 1.3s infinite;
}
@keyframes surge{to{stroke-dashoffset:0}}
/* a real tube stutters before it holds — stepped, not eased */
@keyframes strike{
0%{opacity:0}
8%{opacity:.85}
14%{opacity:.06}
26%{opacity:1}
33%{opacity:.15}
44%{opacity:.9}
52%{opacity:.3}
64%{opacity:1}
100%{opacity:1}
}
/* the faint breathing a lit tube never quite loses */
@keyframes hum{0%,100%{opacity:1}50%{opacity:.93}}
/* ------------------------------------------------------------
Legibility scrims over the decorative circuits.
The footer traces run edge to edge, which put horizontal lines straight
through the link text and headings — it read as strikethrough. This
veils the traces where copy sits while leaving them visible at the edges.
------------------------------------------------------------ */
.footer::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(3,24,43,.8) 16%,rgba(3,24,43,.8) 74%,transparent);
}
/* ------------------------------------------------------------
Card presence. White cards on white sections had a flat 1px
border and nothing else, so they dissolved into the page.
A tinted, layered shadow lifts them without adding weight.
------------------------------------------------------------ */
.svc,.sector,.form{
border-color:rgba(14,114,184,.1);
box-shadow:0 1px 2px rgba(9,24,45,.04), 0 10px 28px rgba(9,24,45,.055);
}
/* ============================================================
ACCESSIBILITY + SURFACE
============================================================ */
/* keyboard users land on a skip link before the whole nav */
/* Clipped rather than parked at left:-9999px. A large negative offset is
non-scrollable overflow in LTR but SCROLLABLE overflow in RTL, which parks
the initial viewport 9999px away from the content and renders a blank page.
The clip technique is direction-agnostic. */
.skip{
position:absolute;top:0;inset-inline-start:0;z-index:400;
width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
background:var(--brand);color:#fff;
border-radius:0 0 var(--r-sm) 0;font-family:var(--font-d);font-weight:600;font-size:.9rem;
}
.skip:focus{
width:auto;height:auto;margin:0;padding:12px 20px;overflow:visible;
clip:auto;clip-path:none;
}
/* Fine grain over the whole page. Large dark gradients band visibly on real
displays, and flat vector surfaces read as sterile; this is one static,
non-interactive layer rather than per-section textures. */
.grain{
position:fixed;inset:0;z-index:250;pointer-events:none;opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){.grain{opacity:.02}}
/* ============================================================
PERFORMANCE
============================================================ */
/* Infinite animations keep burning CPU while scrolled past. JS flags each
host section as it leaves the viewport and everything inside it halts. */
.anim-paused .circuit *,
.anim-paused .hero__glow,
.anim-paused .ticker__track,
.anim-paused .ticker__wire::after,
.anim-paused .hr-live::after{animation-play-state:paused}
/* only promote what genuinely animates on the compositor */
.progress{will-change:transform}
/* ============================================================
ARABIC / RTL
Only the things that are genuinely handed need mirroring. Most of the
layout is flex and grid, which reverses on its own once dir="rtl".
============================================================ */
html[lang="ar"]{
--font-d:'Cairo',ui-sans-serif,system-ui,sans-serif;
--font-b:'Cairo',ui-sans-serif,system-ui,sans-serif;
}
/* Arabic has no capitals, so uppercase tracking is meaningless here and the
script needs a little more room to breathe vertically. */
html[lang="ar"] .eyebrow,html[lang="ar"] .stat > span,html[lang="ar"] .ticker__track{text-transform:none;letter-spacing:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{letter-spacing:0;line-height:1.35}
html[lang="ar"] body{line-height:1.85}
html[lang="ar"] .btn{letter-spacing:0}
/* The skyline is a composition, not a direction: mirroring it keeps the tower
clear of the copy when the copy swaps sides. The Burj is near enough to
symmetric that the flip does not read as wrong. */
/* Only the abstract feeder traces mirror. The towers are photographs of real
buildings sitting in the outer bands, which stay put when the columns swap -
flipping them would print the Burj backwards. */
[dir="rtl"] .circuit:not(.sky *){transform:scaleX(-1)}
[dir="rtl"] .sky .circuit{transform:none}
/* Arrow glyphs are directional and must point the way the reader travels. */
[dir="rtl"] .btn svg,[dir="rtl"] .stage__nav svg{transform:scaleX(-1)}
[dir="rtl"] .stage__nav--prev{left:auto;right:0}
[dir="rtl"] .stage__nav--next{right:auto;left:0}
[dir="rtl"] .stat+.stat::before{left:auto;right:0}
[dir="rtl"] .wa{right:auto;left:20px}
/* the credit badge rides above the WhatsApp float, so it moves with it */
[dir="rtl"] .tds{right:auto;left:calc(var(--wa-inset) + var(--wa-size)/2 - var(--tds-w)/2)}
/* badge moves to the left edge in RTL, so the wordmark unrolls to its right */
[dir="rtl"] .tds__word{right:auto;left:94px;transform:translateY(-50%) translateX(-14px)}
[dir="rtl"] .tds.is-open .tds__word,
[dir="rtl"] .tds:hover .tds__word,
[dir="rtl"] .tds:focus-within .tds__word{transform:translateY(-50%) translateX(0)}
@media(max-width:520px){[dir="rtl"] .tds__word{left:78px;right:auto}}
[dir="rtl"] .footer__list a{transition:color .2s ease,padding-right .25s var(--ease)}
[dir="rtl"] .footer__list a:hover{padding-left:0;padding-right:5px}
/* growing accent bars start at the inline edge and run inward */
[dir="rtl"] .svc::before,[dir="rtl"] .why__item::before{left:auto;right:0}
/* Process timeline: track, beam and the numbered markers all hang off the
inline start, so all four move together. */
[dir="rtl"] .steps{padding-left:0;padding-right:46px}
[dir="rtl"] .steps__track,[dir="rtl"] .steps__beam{left:auto;right:15px}
[dir="rtl"] .step__n{left:auto;right:-46px}
@media(max-width:920px){[dir="rtl"] .hero__sub{text-align:right}}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal,.w,.hero h1 .grad{opacity:1!important;transform:none!important;filter:none!important}
/* the pictures start transparent and fade in; with animations off they must
be shown outright or the skyline never appears at all */
.circuit .twr-pic{opacity:.82!important}
/* the credit badge also starts transparent and is revealed by its animation */
.tds{opacity:1!important}
.splash{display:none!important}
html.splash-on{overflow:auto}
.steps__beam{height:100%!important}
.progress{display:none}
}
/* ============================================================
INTERIOR PAGES (quote, careers)
A short navy banner instead of the full hero, so the page gets
the same brand weight without pretending to be the home screen.
============================================================ */
.pagehead{
position:relative;background:var(--navy-950);color:#fff;overflow:hidden;isolation:isolate;
padding-block:clamp(46px,7vh,76px);
}
.pagehead::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,rgba(3,24,43,.7),rgba(3,24,43,.86));
}
.pagehead__in{position:relative;z-index:1;max-width:820px}
.pagehead h1{color:#fff;font-size:clamp(1.9rem,4.2vw,3rem);margin-top:12px}
.pagehead .lede{color:rgba(255,255,255,.76);margin-top:16px;max-width:64ch}
.crumb{display:flex;align-items:center;gap:8px;font-size:.85rem;color:rgba(255,255,255,.6)}
.crumb a{color:rgba(255,255,255,.78);text-decoration:none;transition:color .2s ease}
.crumb a:hover{color:#fff}
.crumb svg{width:14px;height:14px;flex:none;opacity:.6}
[dir="rtl"] .crumb svg{transform:scaleX(-1)}
/* two-column: form beside a sticky aside */
.split{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(26px,4vw,52px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.aside{position:sticky;top:calc(var(--header-h) + 18px);display:grid;gap:14px}
@media(max-width:900px){.aside{position:static}}
.infobox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.infobox h3{font-size:1.02rem;margin-bottom:6px}
.infobox p{font-size:.9rem;line-height:1.6}
.infobox--brand{background:var(--brand-50);border-color:rgba(14,114,184,.18)}
/* numbered "what happens next" list */
/* list-style:none matters — the numbering is drawn by ::before, and without
this the native marker renders alongside it (and collides with the
badge once the list is mirrored). */
.flow{display:grid;gap:16px;margin-top:14px;counter-reset:flow;list-style:none;padding:0}
.flow li{position:relative;padding-inline-start:38px;font-size:.9rem;line-height:1.6;color:var(--body)}
.flow li::before{
counter-increment:flow;content:counter(flow);
position:absolute;inset-inline-start:0;top:-1px;width:26px;height:26px;border-radius:8px;
display:grid;place-items:center;background:var(--brand);color:#fff;
font-family:var(--font-d);font-size:.76rem;font-weight:700;
}
.flow b{display:block;color:var(--ink);font-family:var(--font-d);font-size:.93rem;margin-bottom:2px}
/* ============================================================
CAREERS
============================================================ */
.jobs{display:grid;gap:16px;margin-top:30px}
.job{
background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px 28px;
box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .3s ease;
}
.job::before{
content:"";position:absolute;inset-inline-start:0;top:0;height:100%;width:3px;
background:linear-gradient(180deg,var(--brand),var(--accent));
transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.job:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(14,114,184,.28)}
.job:hover::before{transform:scaleY(1)}
.job__head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between}
.job h3{font-size:1.12rem}
.job__meta{display:flex;flex-wrap:wrap;gap:7px}
.chip{
display:inline-flex;align-items:center;gap:6px;
background:var(--surface);border:1px solid var(--line);border-radius:999px;
padding:5px 11px;font-size:.76rem;font-weight:500;color:var(--body);white-space:nowrap;
}
.chip svg{width:13px;height:13px;opacity:.65}
.job p{margin-top:12px;font-size:.92rem;line-height:1.65}
.job ul{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}
.job li{display:flex;gap:9px;font-size:.88rem;color:var(--body);line-height:1.5}
.job li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--brand)}
.job__act{margin-top:18px}
/* speculative-application note */
.note{
margin-top:26px;padding:20px 24px;border-radius:var(--r-md);
background:var(--brand-50);border:1px solid rgba(14,114,184,.18);
font-size:.91rem;line-height:1.65;color:var(--body);
}
.note b{color:var(--ink)}
/* ============================================================
TITANIUM DIGITAL SOLUTIONS — floating credit
Stacked above the WhatsApp float and centred on it. The mark box is a
fixed size so the badge never grows; the wordmark is absolutely
positioned to its left and slides in. Nothing here animates layout, so
it cannot push the WhatsApp button or reflow the page.
No plate behind it - the artwork sits directly on the page. The drop
shadows are what separate the chrome from whatever is behind it.
============================================================ */
.tds{
/* centred on the WhatsApp button: its centre is always half its size in
from the same edge, so the badge is offset by half the difference */
--wa-size:56px; --wa-inset:20px; --tds-w:88px;
position:fixed;z-index:91;
right:calc(var(--wa-inset) + var(--wa-size)/2 - var(--tds-w)/2);
bottom:86px;
width:var(--tds-w);height:53px;
opacity:0;animation:tdsIn .5s var(--ease) .35s forwards;
transition:transform .25s var(--ease);
}
@keyframes tdsIn{to{opacity:1}}
.tds__mark{position:absolute;inset:0;display:grid;place-items:center}
.tds__mark img{width:100%;height:100%;object-fit:contain;
/* tight dark shadow reads on light sections; the faint light glow lifts the
chrome off the navy without showing on white */
filter:drop-shadow(0 1px 3px rgba(3,25,44,.5)) drop-shadow(0 0 9px rgba(214,234,255,.22))}
/* the wordmark parks just off the mark's left edge and slides home */
.tds__word{
position:absolute;top:50%;right:94px;
height:30px;pointer-events:none;
opacity:0;transform:translateY(-50%) translateX(14px);
transition:opacity .38s ease, transform .5s var(--ease);
}
.tds__word img{height:100%;width:auto;max-width:none;
/* tight dark shadow reads on light sections; the faint light glow lifts the
chrome off the navy without showing on white */
filter:drop-shadow(0 1px 3px rgba(3,25,44,.5)) drop-shadow(0 0 9px rgba(214,234,255,.22))}
/* open state — the load reveal and hover/focus share one path */
.tds.is-open .tds__word,
.tds:hover .tds__word,
.tds:focus-within .tds__word{opacity:1;transform:translateY(-50%) translateX(0)}
.tds:hover{transform:translateY(-2px)}
@media(max-width:520px){
.tds{--tds-w:72px;bottom:78px;height:43px}
.tds__word{height:24px;right:78px}
}
/* ============================================================
OWNERSHIP MODAL
Native