/* ═══════════════════════════════════════════════════════════════════════════ B-Strategies — the motion and visual layer. One idea runs through every effect here: PROGRESS. Lines draw from start to end, bars fill, digits roll up to their value, the engagement rail completes node by node, images wipe open along the reading direction. That is the firm's whole pitch — a plan that actually runs — so the page moves the way a plan moves: forward, on a schedule, never bouncing. Everything that hides content before it animates is gated on the `js` class (set inline in ), and everything is switched off under prefers-reduced-motion. Direction-aware throughout: "forward" is inline-start → inline-end, so Arabic reads right to left in motion too. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --ease-out:cubic-bezier(.22,.8,.26,1); --ease-draw:cubic-bezier(.4,0,.2,1); --dir:1; } html[dir="rtl"]{--dir:-1} /* ── page transitions (Chrome/Safari; a no-op elsewhere) ──────────────────── */ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-out .28s var(--ease-out) both} ::view-transition-new(root){animation:vt-in .42s var(--ease-out) both} @keyframes vt-out{to{opacity:0;transform:translateY(-8px)}} @keyframes vt-in{from{opacity:0;transform:translateY(10px)}} /* ── loader ────────────────────────────────────────────────────────────────── */ .loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;align-content:center;gap:22px; background:var(--ink);color:#fff;transition:opacity .6s var(--ease-out),visibility 0s .6s} html:not(.js) .loader,html.seen .loader{display:none} .loader.is-done{opacity:0;visibility:hidden;pointer-events:none} .loader__mark{width:86px;height:auto} .loader__hex,.loader__bar{stroke:#fff;stroke-width:1.2;fill:none; stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s var(--ease-draw) forwards} .loader__bar{stroke:var(--teal-hi);stroke-dasharray:200;stroke-dashoffset:200;animation-delay:.35s;animation-duration:.8s} .loader__b{font-family:Georgia,'Times New Roman',serif;font-size:74px;fill:#fff;opacity:0; animation:fadeup .6s var(--ease-out) .7s forwards} .loader__word{font-family:var(--f-display);font-weight:500;font-size:.8rem;letter-spacing:.34em; opacity:0;animation:fadeup .6s var(--ease-out) .9s forwards} .loader__line{width:120px;height:1px;background:rgba(255,255,255,.18);overflow:hidden;position:relative} .loader__line::after{content:"";position:absolute;inset:0;background:var(--teal-hi);transform-origin:left; transform:scaleX(0);animation:fill 1.4s var(--ease-draw) .2s forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fill{to{transform:scaleX(1)}} @keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ── scroll progress — a thin teal rule that fills as you read ─────────────── */ .progress{position:fixed;inset-block-start:0;inset-inline-start:0;width:100%;height:2px;z-index:150; background:transparent;pointer-events:none} .progress::after{content:"";position:absolute;inset:0;background:var(--teal-hi); transform-origin:var(--origin,left);transform:scaleX(var(--p,0))} html[dir="rtl"] .progress::after{--origin:right} /* ── header: quieter once you are reading ─────────────────────────────────── */ .site__in{transition:min-height .3s var(--ease-out),padding .3s var(--ease-out)} .site.is-stuck .site__in{min-height:62px;padding-block:8px} .lockup__mark{transition:transform .5s var(--ease-out)} .lockup:hover .lockup__mark{transform:rotate(-8deg) scale(1.06)} /* ── hero ──────────────────────────────────────────────────────────────────── */ /* Ken Burns, slow and one-way — a 20-second settle, never a loop. */ .js .hero__media img{transform:scale(1.1);animation:kb 22s var(--ease-out) forwards} @keyframes kb{to{transform:scale(1)}} /* The deck's crossing lines draw themselves on, then drift, and lean toward the cursor by a few pixels (translate is separate from the drift transform). */ .hero__lines{translate:var(--mx,0) var(--my,0);transition:translate .9s var(--ease-out)} .js .hero__lines path{stroke-dasharray:2200;stroke-dashoffset:2200; animation:draw 2.6s var(--ease-draw) forwards} .js .hero__lines path:nth-child(2){animation-delay:.25s} .js .hero__lines path:nth-child(3){animation-delay:.5s} .js .hero__lines path:nth-child(4){animation-delay:.75s} .js .hero__lines path:nth-child(5){animation-delay:1s} /* Headline: each line rises out of a mask, in order. Gated on `is-ready`, which the loader sets, so the words never fight the hexagon for attention. */ .js .d1 .ln{overflow:hidden;padding-block-end:.06em;margin-block-end:-.06em} .js .ln__t{display:inline-block;transform:translateY(112%);opacity:0; transition:transform .9s var(--ease-out),opacity .5s;transition-delay:calc(.08s + var(--i) * .12s)} .js.is-ready .ln__t{transform:none;opacity:1} .js .hero__copy .eyebrow,.js .hero__sub,.js .hero__cta{opacity:0;transform:translateY(14px); transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)} .js.is-ready .hero__copy .eyebrow{opacity:1;transform:none;transition-delay:0s} .js.is-ready .hero__sub{opacity:1;transform:none;transition-delay:.55s} .js.is-ready .hero__cta{opacity:1;transform:none;transition-delay:.7s} .js .hero__copy .d1 .ln--hi::after{transform:scaleX(0);transform-origin:var(--tx-origin,left); transition:transform .8s var(--ease-draw) .75s} html[dir="rtl"] .hero__copy .d1 .ln--hi::after{--tx-origin:right} .js.is-ready .hero__copy .d1 .ln--hi::after{transform:scaleX(1)} /* The plan card: assembles after the headline, bars fill along the timeline, and a faint "today" marker keeps moving across it so it reads as live. */ .js .plan{opacity:0;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(26px); transition:opacity .8s var(--ease-out) .5s,transform .8s var(--ease-out) .5s,box-shadow .4s; transform-style:preserve-3d;position:relative;overflow:hidden} .js.is-ready .plan{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0); transition:opacity .8s var(--ease-out) .5s,transform .25s var(--ease-out),box-shadow .4s} .plan:hover{box-shadow:0 34px 80px rgba(0,0,0,.5)} .js .plan__row{animation:none;opacity:0;transform:translateY(9px); transition:opacity .55s var(--ease-out),transform .55s var(--ease-out); transition-delay:calc(.9s + var(--i) * .11s)} .js.is-ready .plan__row{opacity:1;transform:none} .js .plan__bar i{transform:scaleX(0);transform-origin:var(--bar-origin,left); transition:transform .9s var(--ease-draw);transition-delay:calc(1.2s + var(--i,0) * .11s)} html[dir="rtl"] .plan__bar i{--bar-origin:right} .js.is-ready .plan__bar i{transform:scaleX(1)} .plan__live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal); margin-inline-start:8px;vertical-align:middle;animation:pulse 2.2s ease-in-out infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(14,124,150,.45)}60%{box-shadow:0 0 0 7px rgba(14,124,150,0)}} .plan__today{position:absolute;inset-block:56px 22px;inset-inline-start:0;width:1px; background:linear-gradient(to bottom,transparent,rgba(14,124,150,.7),transparent);opacity:0; animation:today 14s linear 2.6s infinite} @keyframes today{0%{inset-inline-start:34%;opacity:0}6%{opacity:1}94%{opacity:1}100%{inset-inline-start:82%;opacity:0}} /* Scroll cue: a thin line that keeps travelling downward. */ .hero__cue{position:absolute;inset-block-end:22px;inset-inline-start:var(--gut);display:flex;align-items:center;gap:12px; color:rgba(255,255,255,.62);text-decoration:none;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em; text-transform:uppercase;opacity:0;transition:opacity .8s 1.6s,color .2s} html[lang="ar"] .hero__cue{font-family:var(--f-body);letter-spacing:0;font-size:.78rem;text-transform:none} .js.is-ready .hero__cue{opacity:1} .hero__cue:hover{color:#fff} .hero__cue-l{width:1px;height:44px;background:rgba(255,255,255,.22);position:relative;overflow:hidden} .hero__cue-l::after{content:"";position:absolute;inset-inline:0;top:-40%;height:40%;background:var(--teal-hi); animation:cue 1.9s var(--ease-draw) infinite} @keyframes cue{to{top:110%}} @media (max-width:1080px){.hero__cue{display:none}} /* ── the numbers ────────────────────────────────────────────────────────────── */ .stats{background:var(--ink-2);color:#fff;overflow:hidden;position:relative} .stats::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:var(--edge);background:var(--teal)} .stats__in{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,3vw,40px);padding-block:clamp(30px,4vw,48px)} .stat b{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,3.6vw,3.2rem); line-height:1;letter-spacing:-.03em;color:#fff} /* `>` matters: the rolling digits are also spans, inside the . */ .stat > span{display:block;margin-block-start:10px;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.17em; text-transform:uppercase;color:rgba(255,255,255,.55)} html[lang="ar"] .stat > span{font-family:var(--f-body);letter-spacing:0;font-size:.84rem;text-transform:none} /* rolling digits — each digit is a column that slides to its value */ .roll{direction:ltr;unicode-bidi:isolate;white-space:nowrap} /* digits stay LTR, but the block still aligns with its Arabic label */ html[dir="rtl"] .stat .roll{text-align:right} .roll__d{display:inline-block;height:1em;overflow:hidden;vertical-align:top} .roll__s{display:flex;flex-direction:column;transform:translateY(0); transition:transform 1.5s var(--ease-out);transition-delay:calc(var(--i,0) * .07s)} .roll__s i{display:block;height:1em;line-height:1;font-style:normal} .is-in .roll__s{transform:translateY(calc(var(--n,0) * -1em))} .roll__c{display:inline-block} /* the fourteen services, passing slowly along the bottom of the strip */ .ticker{border-block-start:1px solid rgba(255,255,255,.08);padding-block:12px; mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)} .ticker__track{display:flex;gap:0;width:max-content;animation:ticker 60s linear infinite} .ticker:hover .ticker__track{animation-play-state:paused} .ticker__track span{font-family:var(--f-display);font-weight:300;font-size:.95rem;letter-spacing:.06em; color:rgba(255,255,255,.5);padding-inline:26px;position:relative;white-space:nowrap} html[lang="ar"] .ticker__track span{font-weight:400;letter-spacing:0} .ticker__track span::before{content:"";position:absolute;inset-inline-start:-2px;top:50%;width:4px;height:4px; margin-top:-2px;background:var(--teal)} @keyframes ticker{to{transform:translateX(calc(var(--dir) * -50%))}} @media (max-width:1000px){.stats__in{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.stats__in{grid-template-columns:repeat(2,1fr)}} /* ── section arrivals ───────────────────────────────────────────────────────── */ /* Children of a [data-stagger] container arrive one after another, in reading order. Index is set by script; without it, the first child animates alone. */ .js [data-stagger] > *{opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease-out),transform .8s var(--ease-out); transition-delay:calc(var(--i,0) * 85ms)} .js [data-stagger].is-in > *{opacity:1;transform:none} /* Images wipe open along the reading direction and settle from a slight zoom. */ .js .reveal-img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-draw)} html[dir="rtl"] .js .reveal-img,.js html[dir="rtl"] .reveal-img{clip-path:inset(0 0 0 100%)} .js .reveal-img.is-in{clip-path:inset(0 0 0 0)} .js .reveal-img img{transform:scale(1.14);transition:transform 1.4s var(--ease-out)} .js .reveal-img.is-in img{transform:scale(1)} .fam:hover .fam__media.is-in img{transform:scale(1.05)} .split__media.reveal-img::after{transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease-draw) .7s} .split__media.reveal-img.is-in::after{transform:scaleY(1)} /* Parallax: the inner image slides slowly against its frame. */ /* the zoom must always exceed the largest shift, or the frame shows through */ [data-parallax] img{transform:translateY(var(--py,0)) scale(1.18);will-change:transform} .split__media{overflow:hidden} .js .split__media.reveal-img.is-in img{transform:translateY(var(--py,0)) scale(1.18)} .fam:hover .fam__media.is-in img{transform:scale(1.05)} /* The one accent, used as a duotone on hover: the photo takes the teal. */ .duotone{position:absolute;inset:0;background:var(--teal);mix-blend-mode:multiply;opacity:0; transition:opacity .5s var(--ease-out);pointer-events:none} .fam__media{position:relative} .fam:hover .duotone{opacity:.55} /* Section eyebrows: the rule draws in, the ghost word slides up a touch. */ .js .reveal .eyebrow__rule{transform:scaleX(0);transform-origin:var(--tx-origin,left); transition:transform .8s var(--ease-draw) .1s} html[dir="rtl"] .reveal .eyebrow__rule{--tx-origin:right} .js .reveal.is-in .eyebrow__rule{transform:scaleX(1)} .js .reveal .ghost{transform:translateY(24px);transition:transform 1.2s var(--ease-out),opacity 1.2s} .js .reveal.is-in .ghost{transform:none} /* Every major section carries the deck's crossing lines as true hairlines: real SVG strokes with vector-effect, so they are 1px on a phone and 1px on a 4K monitor. They live in the top trailing corner, clear of the reading column, and draw on arrival. */ .deco{position:absolute;inset-block-start:-4%;inset-inline-end:-4%;width:min(42%,560px);height:58%; pointer-events:none;overflow:visible} .deco path{fill:none;stroke:rgba(16,18,20,.13);stroke-width:1;vector-effect:non-scaling-stroke; stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 2.2s var(--ease-draw) .15s} .deco path:nth-child(2){transition-delay:.4s} .deco path:nth-child(3){transition-delay:.65s} .is-in .deco path,.reveal.is-in .deco path{stroke-dashoffset:0} .proof .deco path,.phead--photo .deco path{stroke:rgba(255,255,255,.14)} html[dir="rtl"] .deco{inset-inline-end:auto;inset-inline-start:-4%;transform:scaleX(-1)} @media (max-width:760px){.deco{display:none}} /* ── inner-page heads: the hero, in a smaller frame ────────────────────────── */ .phead--photo{position:relative;background:var(--ink);color:#fff;overflow:hidden;display:flex;align-items:flex-end; min-height:min(64svh,620px);padding-block:clamp(150px,18vh,210px) clamp(44px,5vw,64px)} .phead__media{position:absolute;inset:-10% 0} .phead__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04); transform:translateY(var(--py,0)) scale(1.1)} .js .phead__media img{animation:kb 20s var(--ease-out) forwards} .phead__scrim{position:absolute;inset:0; background: linear-gradient(to bottom,rgba(16,18,20,.7) 0%,rgba(16,18,20,.25) 35%,rgba(16,18,20,.7) 78%,rgba(16,18,20,.92) 100%), linear-gradient(to var(--scrim-dir,right),rgba(16,18,20,.9) 0%,rgba(16,18,20,.55) 40%,rgba(16,18,20,.1) 80%)} html[dir="rtl"] .phead__scrim{--scrim-dir:left} .phead__lines{position:absolute;inset:0;width:100%;height:100%;opacity:.22} .phead__lines path{fill:none;stroke:#fff;stroke-width:.8;vector-effect:non-scaling-stroke; stroke-dasharray:2200;stroke-dashoffset:2200;transition:stroke-dashoffset 2.4s var(--ease-draw)} .phead--photo.is-in .phead__lines path{stroke-dashoffset:0} .phead--photo.is-in .phead__lines path:nth-child(2){transition-delay:.3s} .phead--photo.is-in .phead__lines path:nth-child(3){transition-delay:.6s} .phead__in{position:relative} .phead--photo .d1--page{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45)} /* page titles are whole sentences — they must wrap, unlike the hero's three lines */ .d1--page .ln{white-space:normal} .d1--page .ln__t{display:inline-block;max-width:100%} .phead--photo .lede{color:rgba(255,255,255,.8)} .phead--photo .ghost{color:#fff;opacity:.07} .phead--photo .jump a{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.82)} .phead--photo .jump a:hover{border-color:var(--teal-hi);color:#fff;background:rgba(255,255,255,.08)} .js .phead--photo .lede,.js .phead--photo .jump{opacity:0;transform:translateY(12px); transition:opacity .7s var(--ease-out) .5s,transform .8s var(--ease-out) .5s} .js.is-ready .phead--photo .lede,.js.is-ready .phead--photo .jump{opacity:1;transform:none} .phead--photo + .sec{padding-block-start:var(--secY)} /* the header sits on a dark photograph on every page now, until it sticks */ .p-services .lockup__name,.p-about .lockup__name,.p-contact .lockup__name{color:#fff} .p-services .lockup__sub,.p-about .lockup__sub,.p-contact .lockup__sub{color:rgba(255,255,255,.62)} .p-services .nav a,.p-about .nav a,.p-contact .nav a{color:rgba(255,255,255,.8)} .p-services .nav a:hover,.p-about .nav a:hover,.p-contact .nav a:hover, .p-services .nav a[aria-current],.p-about .nav a[aria-current],.p-contact .nav a[aria-current]{color:#fff} .p-services .nav__lang,.p-about .nav__lang,.p-contact .nav__lang{border-color:rgba(255,255,255,.3)!important;color:#fff!important} .p-services .burger span,.p-about .burger span,.p-contact .burger span{background:#fff} .site.is-stuck .lockup__name{color:var(--ink)} .site.is-stuck .lockup__sub{color:var(--muted)} .site.is-stuck .nav a{color:var(--muted)} .site.is-stuck .nav a:hover,.site.is-stuck .nav a[aria-current]{color:var(--ink)} .site.is-stuck .nav__lang{border-color:var(--rule)!important;color:var(--blue)!important} .site.is-stuck .burger span{background:var(--ink)} @media (max-width:860px){ .p-services .nav a,.p-about .nav a,.p-contact .nav a,.site.is-stuck .nav a{color:rgba(255,255,255,.85)} .burger[aria-expanded="true"] span{background:#fff!important} } /* ── services page: each family opens on its photograph ────────────────────── */ .famband{position:relative;aspect-ratio:21/7;overflow:hidden;background:var(--ink); margin-block-end:clamp(34px,4.5vw,60px);border-inline-start:var(--edge) solid var(--teal)} .famband img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)} .famband::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(16,18,20,.7),rgba(16,18,20,0) 55%)} .famband__cap{position:absolute;inset-inline-start:clamp(16px,2vw,28px);inset-block-end:clamp(14px,1.8vw,24px); z-index:1;color:#fff;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase} html[lang="ar"] .famband__cap{font-family:var(--f-body);letter-spacing:0;font-size:.86rem;text-transform:none;font-weight:700} .svc:hover .svc__name{color:var(--teal-lo)} .svc__name{transition:color .3s} .svc .lnk{position:relative;padding-inline-end:22px} .svc .lnk::after{content:"→";position:absolute;inset-inline-end:0;top:-1px;transition:transform .3s var(--ease-out)} html[dir="rtl"] .svc .lnk::after{content:"←"} .svc .lnk:hover::after{transform:translateX(calc(var(--dir) * 5px))} @media (max-width:760px){.famband{aspect-ratio:16/9}} /* ── the nine pains: cards lift, the tag underlines itself ─────────────────── */ .pain{position:relative;transition:border-color .3s,background .3s,transform .35s var(--ease-out),box-shadow .35s} .pain:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,18,20,.09);z-index:1} .pain__tag{position:relative;display:inline-block} .pain__tag::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:-4px;height:1px;width:100%; background:var(--teal);transform:scaleX(0);transform-origin:var(--tx-origin,left);transition:transform .4s var(--ease-draw)} html[dir="rtl"] .pain__tag::after{--tx-origin:right} .pain:hover .pain__tag::after{transform:scaleX(1)} /* ── the families: list links slide, an arrow appears ──────────────────────── */ .fam__list a::after{content:"→";position:absolute;inset-inline-end:0;top:50%;transform:translate(-8px,-50%); opacity:0;color:var(--teal);transition:transform .3s var(--ease-out),opacity .3s} html[dir="rtl"] .fam__list a::after{content:"←";transform:translate(8px,-50%)} .fam__list a:hover::after{opacity:1;transform:translate(0,-50%)} /* ── the engagement rail: the line draws across, nodes light in sequence ───── */ .rail::before{transform:scaleX(0);transform-origin:var(--tx-origin,left);transition:transform 1.6s var(--ease-draw) .2s} html[dir="rtl"] .rail::before{--tx-origin:right} .rail.is-in::before{transform:scaleX(1)} .rail__node::after{transition-delay:calc(.35s + var(--i) * .3s)!important} .rail__step:hover .rail__node{box-shadow:0 0 0 6px rgba(14,124,150,.14)} .rail__node{transition:box-shadow .3s} .rail__no{display:inline-block;transition:transform .3s var(--ease-out)} .rail__step:hover .rail__no{transform:translateX(calc(var(--dir) * 4px))} /* ── buttons: a fill sweeps through in the reading direction ───────────────── */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink); transform:scaleX(0);transform-origin:var(--tx-origin,left);transition:transform .45s var(--ease-draw)} html[dir="rtl"] .btn::before{--tx-origin:right} .btn--solid:hover{background:var(--teal);transform:translateY(-2px)} .btn--solid:hover::before{transform:scaleX(1)} .btn--ghost::before{background:rgba(255,255,255,.12)} .btn--ghost:hover::before{transform:scaleX(1)} .btn--wa::before{background:var(--teal)} .btn--wa:hover{background:var(--ink)} .btn--wa:hover::before{transform:scaleX(1)} /* ── the deliverable: list rows underline on hover ─────────────────────────── */ .anatomy li{position:relative;transition:padding-inline-start .3s var(--ease-out)} .anatomy li::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:-1px;height:1px;width:0; background:var(--teal);transition:width .5s var(--ease-draw)} .anatomy li:hover{padding-inline-start:8px} .anatomy li:hover::after{width:100%} /* ── the two cities ─────────────────────────────────────────────────────────── */ .band{position:relative;min-height:min(72svh,640px);display:flex;align-items:center;overflow:hidden; background:var(--ink);color:#fff;padding-block:clamp(72px,9vw,120px)} .band__media{position:absolute;inset:-12% 0} .band__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.5; transform:translateY(var(--py,0)) scale(1.05)} .band::before{content:"";position:absolute;inset:0; background:linear-gradient(to var(--scrim-dir,right),rgba(16,18,20,.92) 0%,rgba(16,18,20,.55) 55%,rgba(16,18,20,.15) 100%)} html[dir="rtl"] .band::before{--scrim-dir:left} .band__lines{position:absolute;inset:0;width:100%;height:100%;opacity:.28} .band__lines path{fill:none;stroke:#fff;stroke-width:.8;vector-effect:non-scaling-stroke; stroke-dasharray:2200;stroke-dashoffset:2200;transition:stroke-dashoffset 2.4s var(--ease-draw)} .band.is-in .band__lines path{stroke-dashoffset:0} .band.is-in .band__lines path:nth-child(2){transition-delay:.3s} .band.is-in .band__lines path:nth-child(3){transition-delay:.6s} .band__in{position:relative} .band__h{color:#fff;max-width:none} .band__h em{font-style:normal;color:var(--teal-hi)} .band__p{margin-block-start:18px;max-width:52ch;color:rgba(255,255,255,.72);font-size:1.02rem} .band__cities{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);margin-block-start:clamp(30px,4vw,48px)} .city{border-inline-start:var(--edge) solid var(--teal);padding-inline-start:18px} .city b{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1} html[lang="ar"] .city b{font-weight:800} .city span{display:block;margin-block-start:6px;color:rgba(255,255,255,.7)} .city i{display:block;margin-block-start:8px;font-style:normal;font-family:var(--f-mono);font-size:.66rem; letter-spacing:.14em;color:var(--teal-hi)} /* ── proof: rows arrive one by one, marks pop ──────────────────────────────── */ .proof__mark{transform:scale(.6);opacity:0;transition:transform .5s var(--ease-out) .3s,opacity .5s .3s} .proof.is-in .proof__mark{transform:none;opacity:1} .proof__col ul li{transition:color .3s,padding-inline-start .3s var(--ease-out)} .proof__col--can ul li:hover{color:#fff;padding-inline-start:28px} .proof__col--wont ul li:hover{color:rgba(255,255,255,.8)} /* ── services page rows ────────────────────────────────────────────────────── */ .svc{transition:border-color .3s,background .3s,transform .35s var(--ease-out)} .svc:hover{transform:translateX(calc(var(--dir) * 4px))} .svc__items li{transition:padding-inline-start .25s var(--ease-out)} .svc:hover .svc__items li{padding-inline-start:22px} /* ── contact: maps in the brand's monochrome, colour on hover ──────────────── */ .office__map{aspect-ratio:16/8;margin-block-end:16px;overflow:hidden;position:relative;background:var(--panel); border-inline-start:var(--edge) solid var(--teal)} .office__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05); transition:filter .5s var(--ease-out)} .office:hover .office__map iframe{filter:none} /* ── footer: the name, set large, sitting behind the columns ───────────────── */ .foot{position:relative;overflow:hidden} .foot__giant{position:absolute;inset-block-end:-.22em;inset-inline-start:-.02em;font-family:var(--f-display); font-weight:500;font-size:clamp(5rem,15.5vw,15rem);letter-spacing:-.04em;line-height:1;color:#fff;opacity:.035; pointer-events:none;white-space:nowrap;user-select:none} .foot__in,.foot__bar{position:relative} .foot__col a{position:relative} .foot__col a::before{content:"";position:absolute;inset-inline-start:-14px;top:50%;width:0;height:1px; background:var(--teal);transition:width .3s var(--ease-draw)} .foot__col a:hover{padding-inline-start:0} .foot__col a:hover::before{width:8px} /* ── reduced motion: the page simply is ────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .loader{display:none} .progress{display:none} .js .hero__media img,.js .hero__lines path,.plan__today,.hero__cue-l::after,.plan__live, .ticker__track,.loader__hex,.loader__bar{animation:none!important} .js .ln__t,.js .hero__copy .eyebrow,.js .hero__sub,.js .hero__cta,.js .plan,.js .plan__row, .js [data-stagger] > *,.js .reveal .ghost{opacity:1!important;transform:none!important;transition:none!important} .js .plan__bar i,.js .hero__copy .d1 .ln--hi::after,.js .reveal .eyebrow__rule,.rail::before, .loader__line::after{transform:scaleX(1)!important;transition:none!important} .js .reveal-img{clip-path:none!important} .js .reveal-img img,[data-parallax] img,.band__media img{transform:none!important} .sec--panel::after{clip-path:none!important} .band__lines path{stroke-dashoffset:0!important} .is-in .roll__s,.roll__s{transition:none!important} ::view-transition-old(root),::view-transition-new(root){animation:none!important} }