/* ============================ FONTS ============================ */ @font-face { font-family: 'Estedad'; src: url('./estedad.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================ TOKENS ============================ */ :root{ --wine:#36000c; --wine-deep:#36000c; --cream:#ffffff; --bone:#f5f5f5; --sand:#f5f5f5; --taupe:#82766b; --ink:#4f4f4f; --ink-soft:#82766b; --acc:#82766b; --off:#f5f5f5; --line:rgba(79,79,79,.16); --f-display:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Roboto,'Helvetica Neue',Arial,sans-serif; --f-body:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Roboto,'Helvetica Neue',Arial,sans-serif; --ease:cubic-bezier(.22,1,.36,1); --maxw:1280px; --pad: clamp(20px, 5vw, 80px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} html.lenis, html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-scrolling iframe{pointer-events:none} body{background:var(--cream);color:var(--ink);font-family:var(--f-body);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit} ::selection{background:var(--wine);color:var(--cream)} .latin{font-family:var(--f-display)!important;font-weight:300;direction:ltr;unicode-bidi:isolate;letter-spacing:.18em} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .eyebrow{font-family:var(--f-body);font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--wine);display:inline-flex;align-items:center;gap:.7em} html[lang="ar"] .eyebrow{text-transform:none;letter-spacing:.04em;font-size:.95rem} .eyebrow::before{content:"";width:34px;height:1px;background:var(--taupe);opacity:.7} .fold{height:1px;border-top:1px dashed var(--taupe);opacity:.45} /* ===================== ATMOSPHERE OVERLAYS ===================== */ .grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;mix-blend-mode:multiply;transform:translateZ(0);will-change:transform; background-image:url("data:image/svg+xml;utf8,")} .cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--acc);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9500;transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s;mix-blend-mode:multiply;opacity:0} .cursor.dot{width:7px;height:7px;background:var(--acc);border-color:transparent} @media (hover:none),(pointer:coarse){.cursor{display:none}} /* ============================ 3D INTRO ============================ */ #intro{position:fixed;inset:0;z-index:9800;overflow:hidden; background: radial-gradient(100% 62% at 50% 104%, #5c0a1a 0%, #36000c 30%, rgba(54,0,12,0) 66%), linear-gradient(180deg, #140004 0%, #240008 22%, #36000c 52%, #300009 72%, #240007 88%, #1a0005 100%)} #introCanvas{position:absolute;inset:0} #introCanvas canvas{display:block;width:100%!important;height:100%!important} .intro-ui{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;color:var(--cream);pointer-events:none;padding:24px} #introCard{max-width:820px;will-change:transform,opacity} #introCard .kicker{font-family:var(--f-display);font-size:clamp(4rem,14vw,9.5rem);letter-spacing:.2em;padding-inline-start:.2em;line-height:1;text-shadow:0 4px 40px rgba(0,0,0,.35)} #introCard .sub{margin-top:1.1rem;letter-spacing:.42em;text-transform:uppercase;font-size:.72rem;color:var(--off)} #introCard .line{font-family:var(--f-display);font-size:clamp(1.55rem,4vw,3rem);line-height:1.3;text-shadow:0 3px 30px rgba(0,0,0,.4)} .enter-btn{pointer-events:auto;display:none;margin-top:36px;border:1px solid var(--off);color:var(--cream);padding:15px 32px;border-radius:999px;letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;transition:.4s var(--ease)} .enter-btn:hover{background:var(--off);color:var(--wine-deep);letter-spacing:.3em} .tap-hint{position:absolute;bottom:54px;left:0;width:100%;text-align:center;color:var(--bone);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;z-index:2;opacity:.85;transition:opacity .4s} .tap-hint .chev{display:block;margin:12px auto 0;width:10px;height:10px;border-right:1px solid var(--off);border-bottom:1px solid var(--off);transform:rotate(45deg);animation:bob 1.8s var(--ease) infinite} @keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}} .intro-skip{position:absolute;top:24px;right:28px;z-index:3;pointer-events:auto;color:var(--bone);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.65;transition:.3s} .intro-skip:hover{opacity:1;color:#eeeeee} .intro-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:3} .intro-dots i{width:6px;height:6px;border-radius:50%;background:rgba(244,239,231,.28);transition:.4s var(--ease)} .intro-dots i.on{background:var(--off);width:20px;border-radius:3px} .intro-flash{position:fixed;inset:0;z-index:10000;background:var(--cream);opacity:0;pointer-events:none} html.intro-active,html.intro-active body{overflow:hidden;height:100%} .intro-lang{position:absolute;top:22px;left:26px;z-index:3;pointer-events:auto;border:1px solid rgba(217,217,217,.5);color:var(--bone);font-size:.66rem;letter-spacing:.16em;padding:6px 13px;border-radius:999px;display:flex;align-items:center;gap:7px;transition:.3s var(--ease)} .intro-lang:hover{border-color:var(--off);color:var(--off)} .intro-lang b{color:var(--off)} html[lang="ar"] .intro-lang{letter-spacing:0;font-size:.82rem} html[lang="ar"] #introCard .line{font-family:var(--f-display);direction:rtl;line-height:1.5} html[lang="ar"] #introCard .sub{font-family:var(--f-display);direction:rtl;letter-spacing:.06em;text-transform:none;font-size:.98rem} html[lang="ar"] .tap-hint{text-transform:none;letter-spacing:.08em;font-size:.78rem} html[lang="ar"] .tap-hint{letter-spacing:.04em;font-size:.82rem} html[lang="ar"] .enter-btn{text-transform:none;letter-spacing:.06em} html[lang="ar"] .intro-skip{letter-spacing:0;font-size:.82rem} /* opacity:1 is explicit so #site always has a value to transition back TO — without it, removing .intro-active in the same tick as .gate-running (the no-GSAP fallback) strands the element at 0 and the page renders blank */ #site{transition:opacity .9s var(--ease);opacity:1} html.intro-active #site{opacity:0;pointer-events:none} /* during the gate the clip does the reveal — the .9s crossfade would fight it */ html.gate-running #site{opacity:1;pointer-events:none;transition:none} /* ---- intro palette (onboarding screen only) — brand tokens ---- */ #intro{ --b-burgundy:#36000c; --b-silver:#d9d9d9; --b-taupe:#9a9a9a; --b-charcoal:#6b6b6b; --b-off:#F5F5F5; --b-black:#000; /* silver tints derived from #d9d9d9 */ --b-lift:#e4e4e4; /* d9d9d9 → off-white 35% */ --b-glow:#eeeeee; /* d9d9d9 → off-white 62% */ --b-burgundy-deep:#1a0005; } .intro-ui{color:var(--b-off)} #introCard .sub{color:var(--b-silver)} /* silver is light, so the label only stays legible as dark wine on the filled state and as bright silver on the near-transparent resting state */ .enter-btn{ border:1px solid rgba(217,217,217,.85);color:#fff; background:rgba(20,0,4,.55); text-shadow:0 1px 12px rgba(26,0,5,.75); } .enter-btn:hover{ color:#36000c;text-shadow:none; background:var(--b-silver);border-color:var(--b-silver); } .tap-hint{color:rgba(245,245,245,.82)} .tap-hint .chev{border-right-color:var(--b-lift);border-bottom-color:var(--b-lift)} .intro-skip{color:rgba(245,245,245,.72)} .intro-skip:hover{color:var(--b-glow)} .intro-dots i{background:rgba(245,245,245,.26)} .intro-dots i.on{background:var(--b-silver)} /* the flash is no longer a flat wash — it is the cream bloom that rides the leading edge of the opening aperture. Same id/element, so the no-GSAP and skipIntro() paths (which only set opacity:0) keep working untouched. */ .intro-flash{ background:radial-gradient(58% 46% at 50% 56%, rgba(243,241,237,.95) 0%, rgba(236,230,220,.72) 38%, rgba(214,204,190,.28) 66%, rgba(214,204,190,0) 100%); transform-origin:50% 56%; } /* promoted only while the gate is actually animating it */ html.gate-running .intro-flash{will-change:opacity,transform} /* ===================== GATE — arch portal transition ===================== */ /* sits above .intro-flash (10000) so the drawn arch stays over the bloom */ .gate-layer{position:fixed;inset:0;z-index:10001;pointer-events:none;opacity:0;visibility:hidden} .gate-layer.on{visibility:visible} /* the drawn arch — path is byte-identical to .hero .archline, which is what sells the handoff when the hero's own archline fades up underneath it */ .gate-arch{ position:absolute;left:50%;top:50%; width:min(78vw,520px); transform:translate(-50%,-50%) scale(1); transform-origin:50% 50%; overflow:visible; will-change:transform,opacity; } .gate-arch path{ fill:none;stroke:var(--off);stroke-width:1.15;stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(217,217,217,.55)); } /* non-scaling-stroke is applied ONLY for the scale-up, never during the draw. Engines disagree on which coordinate space the dash pattern lives in under this vector-effect (the SVG WG issue is still open): Chrome lays dashes out in SCREEN space, WebKit/Gecko in USER space. getTotalLength() always answers in user units, so with the effect on, one dash length cannot be correct everywhere — compensating for Chrome (x1.3) overshoots in Safari, and the arch there finishes drawing early and then sits idle. The effect is only needed while the arch scales to full bleed, which happens AFTER the draw completes; during the draw the arch is pinned at scale 1, where it changes nothing. So drop it until the scale tween and the dash is unambiguously in user units in every engine. */ .gate-arch.gate-scaling path{vector-effect:non-scaling-stroke} /* The light that runs along each half as it draws. Same path, same dash trick — a short lit segment chased along the stroke, so the arch reads as being *inscribed* by a moving point rather than simply appearing. */ /* must out-specify `.gate-arch path` above, which would otherwise repaint the light head in the same silver hairline as the arch itself */ .gate-arch path.gate-comet{ fill:none;stroke:#ffffff;stroke-width:3.4;stroke-linecap:round; /* vector-effect deliberately omitted here too — same dash-space reason as above. The comet is gone by the time the scale-up starts, so it never needs the effect at all. */ /* three stacked shadows: a tight core, a warm mid, and a wide silver haze. A hairline of white on a near-black ground reads as nothing without them — the glow is what makes it look like light rather than a thicker line. */ filter:drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 14px rgba(255,255,255,.95)) drop-shadow(0 0 34px rgba(217,217,217,.75)); opacity:0; } html.gate-low .gate-arch path.gate-comet{filter:none} /* Keystone: the flare where the two halves meet. Small and brief — it marks the moment the arch closes, which is the one instant worth punctuating. */ .gate-key{ position:absolute;left:50%;top:50%; width:min(20vw,132px);aspect-ratio:1/1; transform:translate(-50%,-50%) scale(.3); transform-origin:50% 50%; opacity:0;pointer-events:none; background:radial-gradient(closest-side, rgba(245,245,245,.95) 0%, rgba(238,238,238,.55) 30%, rgba(217,217,217,.22) 55%, rgba(217,217,217,0) 100%); will-change:transform,opacity; } html.gate-low .gate-key{display:none} /* Light spilling under the threshold once the arch completes: a wide, shallow pool at the base that the aperture then opens through. */ .gate-sill{ position:absolute;left:50%;top:50%; width:min(96vw,760px);height:min(30vw,190px); transform:translate(-50%,-50%) scaleY(.6); transform-origin:50% 50%; opacity:0; background:radial-gradient(58% 100% at 50% 100%, rgba(245,245,245,.5) 0%, rgba(217,217,217,.24) 30%, rgba(217,217,217,0) 72%); will-change:transform,opacity; } html.gate-low .gate-sill{display:none} /* apex flare — opacity/transform only, no backdrop-filter */ .gate-glow{ position:absolute;left:50%;top:50%; width:min(78vw,520px);aspect-ratio:1/1; transform:translate(-50%,-50%) scale(.9); transform-origin:50% 50%; opacity:0; background:radial-gradient(closest-side, rgba(238,238,238,.85) 0%, rgba(217,217,217,.35) 42%, rgba(217,217,217,0) 100%); will-change:transform,opacity; } /* #site is NEVER clipped. A referenced clip-path on a ~7700px-tall element forces the browser to re-rasterise the mask across that whole element every frame — ~69 frames of it — which is what stalled the end of the transition and left the page sluggish afterwards. Instead the aperture is a hole in a viewport-sized cover that sits ON TOP of the page: one screen's worth of pixels, and #site just sits there untouched. */ /* The cover replaces the intro at the swap, so it wears the intro's own wine backdrop — not a cream slab. The scene appears to stay put while the arch opens a hole through it onto the page, which is the read the transition had before the cover existed. */ #gateCover{ position:fixed;inset:0;z-index:10000;pointer-events:none; background: radial-gradient(100% 62% at 50% 104%, #5c0a1a 0%, #36000c 30%, rgba(54,0,12,0) 66%), linear-gradient(180deg, #140004 0%, #240008 22%, #36000c 52%, #300009 72%, #240007 88%, #1a0005 100%); visibility:hidden; will-change:clip-path; } #gateCover.on{visibility:visible} /* scoped to the gate: a permanent will-change on a full-viewport image keeps a promoted layer alive for the whole session and taxes every later repaint */ html.gate-running #heroBg{will-change:transform} #nav.gate-hold{transform:translateY(-110%);opacity:0} /* mobile / low-power: drop the two costliest effects so the clip gets the frame */ @media(max-width:560px){ .gate-arch,.gate-glow{width:min(88vw,420px)} .gate-arch path{filter:none} } html.gate-low .gate-arch path{filter:none} html.gate-low .gate-glow{display:none} @media(prefers-reduced-motion:reduce){ .gate-layer,#gateCover{display:none} } .intro-lang{ color:rgba(245,245,245,.88); border-color:rgba(217,217,217,.50); background:rgba(54,0,12,.42); backdrop-filter:blur(6px); } .intro-lang:hover{border-color:var(--b-lift);color:var(--b-glow)} .intro-lang b{color:var(--b-lift)} /* atmospheric gradient scrim over the 3D canvas — ties UI text to the scene */ #intro::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(120% 70% at 50% 4%, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 44%, rgba(0,0,0,0) 74%), radial-gradient(85% 48% at 46% 92%, rgba(217,217,217,.10) 0%, rgba(217,217,217,0) 72%), linear-gradient(180deg, rgba(26,0,5,.30) 0%, rgba(54,0,12,.06) 32%, rgba(0,0,0,0) 62%); } /* vignette keeps the wine corners rich */ #intro::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(115% 88% at 50% 52%, rgba(0,0,0,0) 52%, rgba(20,0,4,.48) 100%); } /* ============================ NAV ============================ */ .nav{position:fixed;top:0;left:0;width:100%;z-index:8000;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);transition:transform .5s var(--ease),background .5s var(--ease),padding .5s var(--ease),border-color .5s;border-bottom:1px solid transparent} .nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:12px} .nav.hidden{transform:translateY(-110%)} .nav .brand{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.2em;padding-inline-start:.2em;color:var(--ink)} .nav .brand span{color:var(--wine)} .nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)} .nav-links a{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;position:relative;padding:4px 0;color:var(--ink-soft);transition:color .3s} html[lang="ar"] .nav-links a{text-transform:none;letter-spacing:0;font-size:.95rem} .nav-links a::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:0;height:1px;background:var(--acc);transition:width .35s var(--ease)} .nav-links a:hover{color:var(--wine)} .nav-links a:hover::after{width:100%} .lang-toggle{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.72rem;letter-spacing:.12em;display:flex;align-items:center;gap:8px;color:var(--ink);transition:border-color .3s,color .3s} .lang-toggle:hover{border-color:var(--acc);color:var(--wine)} .lang-toggle b{color:var(--wine)} .menu-btn{display:none} .menu-btn{display:none;background:none;border:0;cursor:pointer}body.menu-open{overflow:hidden}@media(max-width:860px){.lang-toggle{margin-inline-start:auto;margin-inline-end:10px}.menu-btn{display:flex;flex-direction:column;gap:5px;padding:6px;z-index:9001}.menu-btn span{width:24px;height:1.5px;background:var(--cream);transition:transform .3s,opacity .3s,background .5s}.nav.scrolled .menu-btn span{background:var(--cream)}.nav.scrolled.over-dark .menu-btn span{background:var(--ink)}body.menu-open .menu-btn span{background:var(--cream)}body.menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}body.menu-open .menu-btn span:nth-child(2){opacity:0}body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}.nav-links{position:fixed;top:0;inset-inline:0;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:rgba(36,0,10,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateY(-100%);transition:transform .5s var(--ease);z-index:9000}.nav-links.open{transform:translateY(0)}.nav-links a{color:var(--cream)!important;font-size:1.5rem;letter-spacing:.04em}.nav-links a::after{display:none}.nav-links a:hover{color:var(--off)!important}body.menu-open .lang-toggle{color:var(--cream);border-color:rgba(243,241,237,.5);z-index:9001}body.menu-open .lang-toggle b{color:var(--off)}} /* ============================ HERO ============================ */ .hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center} .hero .bg{position:absolute;inset:-8% 0;z-index:0} .hero .bg .ph,.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero .scrim{position:absolute;inset:0;z-index:1;background:rgba(54,0,12,.48)} .hero .vign{display:none} .hero-inner{position:relative;z-index:3;color:var(--cream);padding:120px var(--pad) 90px;max-width:920px} .hero .archline{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(78vw,520px);z-index:2;opacity:.55} .hero .archline path{stroke:var(--off);stroke-width:1;fill:none} .hero .h-eyebrow{color:#f5f5f5;margin-bottom:26px;justify-content:center;text-shadow:0 1px 6px rgba(20,0,6,.55),0 6px 26px rgba(20,0,6,.45)} .hero .h-eyebrow::before{background:var(--off)} .hero h1{font-family:var(--f-display);font-weight:400;line-height:.95;font-size:clamp(4.6rem,17vw,12rem);letter-spacing:.16em;padding-inline-start:.16em;color:var(--cream)} .hero .sub{margin-top:22px;font-size:clamp(.78rem,1.9vw,1.05rem);letter-spacing:.34em;text-transform:uppercase;color:var(--bone);font-weight:400} html[lang="ar"] .hero .sub{text-transform:none;letter-spacing:.02em;font-family:var(--f-display);font-size:clamp(1.1rem,3.6vw,1.7rem)} .hero .tag{margin-top:30px;font-size:clamp(1rem,2.4vw,1.3rem);color:#ffffff;opacity:.98;font-weight:400;letter-spacing:.06em;text-shadow:0 1px 8px rgba(20,0,6,.6),0 8px 30px rgba(20,0,6,.4)} html[lang="ar"] .hero .tag{letter-spacing:0} .hero .lede{margin-top:22px;font-size:clamp(.95rem,1.9vw,1.12rem);color:var(--off);opacity:.94;max-width:56ch;margin-inline:auto;line-height:1.9;text-shadow:0 1px 6px rgba(20,0,6,.5)} .hero-actions{margin-top:42px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* arch-revealed media — THE signature */ .arch{clip-path:url(#archClip);-webkit-clip-path:url(#archClip)} .media{position:relative;overflow:hidden;background:var(--bone)} .media .ph{position:absolute;inset:0;background:var(--bone)} .media .ph::after{content:"";position:absolute;inset:0;opacity:.5;background-size:64px;background-image:url("data:image/svg+xml;utf8,")} .media .ph .phlabel{position:absolute;inset-inline-start:0;inset-block-end:0;width:100%;padding:18px 20px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wine)} html[lang="ar"] .media .ph .phlabel{text-transform:none;letter-spacing:0} .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} /* promoted on hover only: a standing will-change keeps a GPU layer per image alive for the whole session, which taxes every scroll and repaint */ .media:hover img{will-change:transform} /* ============================ SECTIONS ============================ */ section{position:relative} .sec-pad{padding-block:clamp(80px,12vw,170px)} .shead{max-width:760px;margin-bottom:clamp(40px,6vw,80px)} .shead h2{font-family:var(--f-display);font-weight:400;line-height:1.04;font-size:clamp(2.3rem,5.6vw,4.6rem);color:var(--ink);margin-top:18px;letter-spacing:.01em} .shead h2 em{color:var(--wine);font-style:normal} .shead p{margin-top:20px;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-soft);max-width:60ch} .vision{background:var(--cream)} .vision .big{font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,4.6vw,3.7rem);line-height:1.28;color:var(--ink);max-width:18ch} .vision .big .hl{color:var(--wine)} .vision-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,90px);align-items:center} @media(min-width:900px){.vision-grid{grid-template-columns:1.1fr .9fr}} .vision .v-media{aspect-ratio:4/5;width:100%} .vision .v-media img,.vision .v-media .ph{transform:scale(1.06)} .pillars{background:var(--bone)} .pillar-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,56px)} @media(min-width:820px){.pillar-grid{grid-template-columns:repeat(3,1fr)}} .pillar{position:relative} .pillar .p-media{aspect-ratio:3/4;width:100%;margin-bottom:26px} .pillar .p-no{font-family:var(--f-display);font-size:.85rem;letter-spacing:.3em;color:var(--acc)} .pillar .p-verb{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:14px} html[lang="ar"] .pillar .p-verb{text-transform:none;letter-spacing:0;font-size:1.05rem;font-family:var(--f-display);color:var(--wine)} .pillar h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--ink);margin-top:6px} .pillar p{margin-top:12px;color:var(--ink-soft);font-size:.98rem;max-width:34ch} .projects{background:#f5f5f5} .proj-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px)} @media(min-width:680px){.proj-grid{grid-template-columns:repeat(2,1fr)}} .project{cursor:pointer} .project .p-media{aspect-ratio:4/5;width:100%} .project:hover .p-media img,.project:hover .p-media .ph{transform:scale(1.07)} .project .p-meta{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:22px;border-top:1px solid var(--line);padding-top:16px} .project .p-title{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink);transition:color .3s} .project:hover .p-title{color:var(--wine)} .project .p-loc{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)} html[lang="ar"] .project .p-loc{text-transform:none;letter-spacing:0;font-size:.9rem} .project .p-type{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-top:4px} html[lang="ar"] .project .p-type{text-transform:none;letter-spacing:0;font-size:.9rem} .heritage{background:var(--wine-deep);color:var(--cream);overflow:hidden;position:relative} .heritage .mash-bg{position:absolute;inset:0;opacity:.07;background-size:140px} .heritage .h-inner{position:relative;z-index:2;max-width:900px} .heritage .eyebrow{color:var(--off)}.heritage .eyebrow::before{background:var(--off)} .heritage h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);line-height:1.1;margin-top:20px;color:var(--cream)} .heritage h2 em{color:var(--off);font-style:normal} .heritage p{margin-top:24px;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--bone);max-width:58ch;opacity:.9} .stats{background:var(--wine-deep);color:var(--cream);position:relative;z-index:2} .stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 20px;border-top:1px dashed rgba(245,245,245,.35);padding-top:54px} @media(min-width:760px){.stat-grid{grid-template-columns:repeat(4,1fr)}} .stat .num{font-family:var(--f-display);font-size:clamp(2.6rem,6vw,4.4rem);color:var(--off);line-height:1} .stat .lbl{margin-top:12px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)} html[lang="ar"] .stat .lbl{text-transform:none;letter-spacing:0;font-size:.95rem} .services{background:var(--cream)} .svc-list{border-top:1px solid var(--line)} .svc{display:flex;align-items:center;gap:24px;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);position:relative;transition:padding-inline-start .4s var(--ease)} .svc:hover{padding-inline-start:18px} .svc .s-no{font-family:var(--f-display);font-size:.8rem;color:var(--acc);width:42px;flex:none} .svc .s-name{flex:1} .svc .s-en{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,2.6vw,2rem);color:var(--ink);transition:color .35s} .svc .s-ar{font-size:.95rem;color:var(--ink-soft);margin-top:2px;font-family:var(--f-body);direction:rtl;text-align:start} html[lang="ar"] .svc .s-en{order:2;font-size:.95rem;color:var(--ink-soft);font-family:var(--f-body);direction:ltr} html[lang="ar"] .svc .s-ar{order:1;font-family:var(--f-display);font-size:clamp(1.3rem,2.6vw,2rem);color:var(--ink)} .svc .s-arrow{color:var(--acc);opacity:0;transform:translateX(-8px);transition:.35s var(--ease);font-size:1.2rem} html[dir="rtl"] .svc .s-arrow{transform:scaleX(-1) translateX(-8px)} .svc:hover .s-en{color:var(--wine)} .svc:hover .s-arrow{opacity:1;transform:translateX(0)} html[dir="rtl"] .svc:hover .s-arrow{transform:scaleX(-1) translateX(0)} .unified{background:var(--wine);color:var(--cream);text-align:center} .unified .u-mark{font-family:var(--f-display);font-size:clamp(1.4rem,4vw,2.4rem);letter-spacing:.3em;color:var(--off);padding-inline-start:.3em} .unified h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.3;margin-top:30px;max-width:20ch;margin-inline:auto;color:var(--cream)} .contact{background:var(--cream)} .contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px)} @media(min-width:880px){.contact-grid{grid-template-columns:1.2fr .8fr}} .contact h2{font-family:var(--f-display);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.95;color:var(--ink)} .contact h2 em{color:var(--wine);font-style:normal} .contact .lead{margin-top:24px;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--ink-soft);max-width:30ch} .contact-meta{display:flex;flex-direction:column;gap:26px;align-self:center} .cm-item .cm-lbl{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)} html[lang="ar"] .cm-item .cm-lbl{text-transform:none;letter-spacing:0;font-size:.9rem} .cm-item .cm-val{font-family:var(--f-display);font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink);margin-top:6px;transition:color .3s} .cm-item a.cm-val:hover{color:var(--wine)} footer{background:var(--wine-deep);color:var(--bone);padding:40px var(--pad)} .foot-in{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center} footer .f-mark{font-family:var(--f-display);letter-spacing:.2em;color:var(--cream);font-size:1.1rem;padding-inline-start:.2em} footer .f-note{font-size:.74rem;letter-spacing:.06em;color:var(--taupe)} /* ===================== REVEAL (JS-gated) ===================== */ .js .reveal{opacity:0;transform:translateY(38px)} .js .reveal-mask .media,.js .reveal-mask.media{clip-path:inset(100% 0 0 0)} .js .stagger>*{opacity:0;transform:translateY(30px)} /* the gate aperture reveals #site BEFORE the hero tween runs, so the hero content has to start hidden. GSAP's inline opacity takes over before .gate-running drops, so there is no flash at the handoff. */ .js.intro-active .hero-inner>*,.js.gate-running .hero-inner>*{opacity:0} @media(prefers-reduced-motion:reduce){ .js.intro-active .hero-inner>*,.js.gate-running .hero-inner>*{opacity:1} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} .js .reveal,.js .stagger>*{opacity:1;transform:none} .hero .cta .arrow{animation:none} } /* ===================== PDF-CONTENT SECTIONS ===================== */ /* brand logos */ .brand-logo{height:21px;width:auto;display:block;transition:height .4s var(--ease)} .nav.scrolled .brand-logo{height:19px} .brand-dark{display:none} /* light logo by default (hero + wine bar); the off-white bar swaps it below */ .nav .brand-light{display:block} .nav .brand-dark{display:none} /* light text over the hero and on the wine bar; dark text on the off-white bar */ .nav-links a{color:var(--cream)} .nav-links a:hover{color:var(--off)} .nav.scrolled .nav-links a{color:var(--bone)} .nav.scrolled .nav-links a:hover{color:var(--off)} .nav .brand{color:var(--cream)} .nav .brand span{color:var(--off)} .lang-toggle{color:var(--cream);border-color:rgba(243,241,237,.45)} .lang-toggle b{color:var(--off)} .lang-toggle:hover{color:#fff;border-color:var(--off)} .nav.scrolled .lang-toggle{color:var(--cream);border-color:rgba(243,241,237,.34)} .nav.scrolled .lang-toggle b{color:var(--off)} .nav.scrolled .lang-toggle:hover{color:#fff;border-color:var(--off)} /* ---- context-aware bar: wine over light sections, off-white over dark ---- */ .nav.scrolled{background:rgba(36,0,10,.90);border-color:rgba(245,245,245,.22)} /* over the dark sections (Philosophy, CTA, footer) the bar returns to the original off-white treatment, so it reads as a light bar on dark ground */ .nav.scrolled.over-dark{background:rgba(244,239,231,.88);border-color:var(--line)} .nav.scrolled.over-dark .nav-links a{color:var(--ink-soft)} .nav.scrolled.over-dark .nav-links a:hover{color:var(--wine)} .nav.scrolled.over-dark .brand{color:var(--ink)} .nav.scrolled.over-dark .brand span{color:var(--wine)} .nav.scrolled.over-dark .brand-light{display:none} .nav.scrolled.over-dark .brand-dark{display:block} .nav.scrolled.over-dark .lang-toggle{color:var(--ink);border-color:var(--line)} .nav.scrolled.over-dark .lang-toggle b{color:var(--wine)} .nav.scrolled.over-dark .lang-toggle:hover{color:var(--wine);border-color:var(--acc)} .hero-logo{width:min(60vw,430px);height:auto;display:block;margin:0 auto;} .foot-logo{height:24px;width:auto} .cta-logo{height:30px;width:auto;display:block;margin:0 auto;opacity:.96} .intro-logo{display:block;margin:0 auto;width:min(66vw,480px);height:auto; } /* last station: the wordmark shares the card with a line + the enter button */ .intro-logo.gate-mark{width:min(46vw,320px);margin-bottom:clamp(18px,3vw,30px)} .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .vid-wrap{cursor:pointer} .vid-tap{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:72px;height:72px;border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(36,0,10,.55);color:var(--cream);border:1px solid var(--off);backdrop-filter:blur(6px);transition:transform .3s var(--ease),background .3s} html[dir="rtl"] .vid-tap{transform:translate(50%,-50%)} .vid-tap:hover{background:rgba(54,0,12,.75);transform:translate(-50%,-50%) scale(1.06)} html[dir="rtl"] .vid-tap:hover{transform:translate(50%,-50%) scale(1.06)} .vid-tap svg{margin-inline-start:3px} .vid-blocked .vid-tap{display:flex} .vid-playing .vid-tap{display:none!important} .card-media{position:relative;overflow:hidden;border-radius:16px;background:var(--bone)} .card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .card-media:hover img{will-change:transform} .card-media .cm-cap{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:40px 20px 18px;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(20,0,6,.86))} .card-media .cm-cap .t{font-family:var(--f-display);font-weight:500;font-size:1.08rem;line-height:1.3} .card-media .cm-cap .s{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--off);margin-bottom:7px} html[lang="ar"] .card-media .cm-cap .s{text-transform:none;letter-spacing:0;font-size:.84rem} /* About */ .about{background:var(--cream)} .about-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,84px);align-items:center} @media(min-width:900px){.about-grid{grid-template-columns:1.05fr .95fr}} .about .lead-line{font-family:var(--f-display);font-weight:500;font-size:clamp(1.35rem,2.5vw,1.95rem);color:var(--wine);line-height:1.45} .about p.body{margin-top:18px;color:var(--ink-soft);font-size:1.04rem;line-height:1.95;max-width:56ch} .about .subh{margin-top:30px;font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,2vw,1.45rem);color:var(--ink)} .about .a-media{aspect-ratio:4/5;width:100%} /* Experience (maroon band) */ .exp{background:var(--wine-deep);color:var(--bone);overflow:hidden;position:relative} .exp .mash-bg{position:absolute;inset:0;opacity:.06;background-size:150px} .exp-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,80px);align-items:center} @media(min-width:900px){.exp-grid{grid-template-columns:1fr 1fr}} .exp .e-media{aspect-ratio:4/5;width:100%} .exp .eyebrow{color:var(--off)}.exp .eyebrow::before{background:var(--off)} .exp h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.28;color:var(--cream);margin-top:16px} .exp p{margin-top:18px;color:var(--bone);opacity:.92;font-size:1.04rem;line-height:1.95;max-width:54ch} /* Services */ .services{background:var(--cream)} .svc-group+.svc-group{margin-top:clamp(52px,8vw,104px)} .svc-ghead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:30px;border-bottom:1px solid var(--line);padding-bottom:18px} .svc-ghead h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.4rem);color:var(--ink)} .svc-ghead .en{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);opacity:.85} html[lang="ar"] .svc-ghead .en{text-transform:none;letter-spacing:0;font-size:.9rem} .svc-cards{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:640px){.svc-cards{grid-template-columns:1fr 1fr}} @media(min-width:1040px){.svc-cards{grid-template-columns:repeat(4,1fr)}} .svccard{border:1px solid transparent;border-radius:14px;padding:22px 20px 24px;background:rgba(54,0,12,.04);transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)} .svccard:hover{background:rgba(54,0,12,.07);transform:translateY(-3px);box-shadow:0 14px 30px -24px rgba(79,79,79,.5)} .svccard .en{font-family:var(--f-display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);font-weight:500} html[lang="ar"] .svccard .en{letter-spacing:0;font-size:.8rem;direction:ltr;text-align:start;unicode-bidi:isolate} .svccard h4{font-family:var(--f-display);font-weight:500;font-size:1.1rem;color:var(--ink);margin-top:9px;line-height:1.35} .svccard p{margin-top:10px;font-size:.9rem;color:var(--ink);line-height:1.72} .addnote{margin-top:30px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-soft);font-size:.95rem} .addnote .pill{border:1px dashed var(--acc);color:var(--acc);border-radius:999px;padding:6px 15px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase} html[lang="ar"] .addnote .pill{letter-spacing:0;text-transform:none;font-size:.86rem} /* Sectors */ .sectors{background:#f5f5f5} .sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(min-width:560px){.sector-grid{grid-template-columns:repeat(3,1fr);gap:16px}} @media(min-width:1000px){.sector-grid{grid-template-columns:repeat(3,1fr)}} .sector-grid .card-media{aspect-ratio:3/4}@media(max-width:560px){.sector-grid .cm-cap{padding:24px 8px 9px}.sector-grid .cm-cap .t{font-size:.74rem;line-height:1.18}.sector-grid .cm-cap .s{font-size:.5rem;letter-spacing:.1em;margin-bottom:3px}}html[lang="ar"] .sector-grid .cm-cap .s{font-size:.62rem} .scard:hover .card-media img{transform:scale(1.06)} /* Gallery */ .gallery{background:var(--cream)} .gal-grid{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:600px){.gal-grid{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.gal-grid{grid-template-columns:repeat(3,1fr)}} .gal-grid .card-media{aspect-ratio:4/5} .gcard:hover .card-media img{transform:scale(1.06)} /* CTA band */ .cta-band{background:var(--wine);color:var(--cream);text-align:center} .cta-band h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,4.4vw,3rem);color:var(--cream)} .cta-band p{margin-top:16px;color:var(--bone);opacity:.9;font-size:1.05rem;max-width:48ch;margin-inline:auto} .cta-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 26px;font-size:.8rem;letter-spacing:.14em;border:1px solid var(--off);color:var(--cream);transition:.35s var(--ease)} html[lang="ar"] .btn{letter-spacing:0;font-size:.98rem} .btn:hover{background:var(--off);color:var(--wine-deep)} .btn.solid{background:var(--off);color:var(--wine-deep)} .btn.solid:hover{background:var(--cream);border-color:var(--cream)} /* Contact additions */ .contact .map{margin-top:30px;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7;background:var(--sand)} .contact .map iframe{width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.02)} .cm-item .cm-val.addr{font-family:var(--f-body);font-size:1.02rem;line-height:1.7} .cm-phones{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .cm-phones .cm-val{margin-top:0} /* header CTA */ .nav-links a.nav-cta{border:1px solid rgba(245,245,245,.55);border-radius:999px;padding:7px 16px;transition:.3s var(--ease)} .nav-links a.nav-cta::after{display:none} .nav-links a.nav-cta:hover{background:var(--off);color:var(--wine)!important} .nav.scrolled.over-dark .nav-links a.nav-cta{border-color:var(--wine);color:var(--wine)} .nav.scrolled.over-dark .nav-links a.nav-cta:hover{background:var(--wine);color:#fff!important} /* Brand Foundation labels */ .exp p b{color:var(--off);font-weight:500} /* Services accordion — four practices first, services revealed on demand */ .svc-group .svc-ghead{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none} .svc-ghead .g-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:999px;background:rgba(54,0,12,.08);color:var(--wine);font-family:var(--f-display);font-size:.78rem;letter-spacing:.06em;line-height:1;padding:0 8px;flex:none;align-self:center;transition:background-color .35s var(--ease),color .35s var(--ease)} .svc-group.open .svc-ghead .g-no{background:var(--wine);color:#fff} .svc-group.open .svc-ghead{border-bottom:1px solid rgba(54,0,12,.35)} .svc-ghead .chev{width:11px;height:11px;border-inline-end:1.5px solid var(--wine);border-block-end:1.5px solid var(--wine);transform:rotate(45deg);transition:transform .4s var(--ease);margin-inline-start:auto;flex:none;margin-bottom:4px} .svc-group.open .svc-ghead .chev{transform:rotate(-135deg)} .svc-body{display:none} .svc-group.open .svc-body{display:block} @media(min-width:1040px){.svc-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}} .legal-note{margin-top:20px;font-size:.86rem;color:var(--ink-soft);border-inline-start:2px solid var(--taupe);padding-inline-start:14px;line-height:1.8;max-width:72ch} /* Engagement model */ .engage{background:var(--bone)} .model-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px} @media(min-width:820px){.model-grid{grid-template-columns:repeat(3,1fr)}} .model{position:relative;overflow:hidden;border:1px solid transparent;border-radius:14px;padding:26px 24px;background:#fff;transition:background-color .4s var(--ease),box-shadow .4s var(--ease)} .model:hover{box-shadow:0 14px 30px -24px rgba(79,79,79,.5)} .model .m-no{display:inline-block;font-size:.68rem;letter-spacing:.24em;color:var(--wine);text-transform:uppercase;border-radius:999px;padding:5px 13px;border:1px solid rgba(54,0,12,.28)} html[lang="ar"] .model .m-no{letter-spacing:0;text-transform:none;font-size:.84rem;direction:ltr;unicode-bidi:isolate} .model h4{font-family:var(--f-display);font-weight:500;font-size:1.15rem;color:var(--ink);margin-top:14px} .model p{margin-top:8px;font-size:.92rem;color:var(--ink);line-height:1.78} /* card 1 — the single focal point; cards 2 and 3 stay quiet by design */ .model:nth-child(3n+1){background:var(--wine)} .model:nth-child(3n+1) .m-no{color:var(--off);background:transparent;border-color:rgba(245,245,245,.45)} .model:nth-child(3n+1) h4{color:#fff} .model:nth-child(3n+1) p{color:var(--off);opacity:.9} .flow{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);font-size:clamp(.88rem,1.5vw,1rem);color:var(--wine);display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;line-height:1.6} .flow .f-stage{display:inline-block;border-radius:999px;padding:7px 17px;background:#fff;border:1px solid var(--taupe);color:var(--ink)} .flow .f-stage:nth-of-type(odd){background:var(--wine);border-color:var(--wine);color:#fff} .flow .f-arrow{color:var(--taupe)} /* Process */ .process{background:var(--wine)} .process .eyebrow{color:var(--bone)} .process .eyebrow::before{background:var(--off)} .process .shead h2{color:#fff} .process .shead h2 em{color:var(--taupe)} .step-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 18px} @media(min-width:620px){.step-grid{grid-template-columns:repeat(4,1fr)}} @media(min-width:1000px){.step-grid{grid-template-columns:repeat(7,1fr)}} .step{border-top:1px solid rgba(245,245,245,.25);padding-top:18px} .step .st-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:999px;background:var(--bone);color:var(--wine);font-family:var(--f-display);font-size:.78rem;letter-spacing:.06em;padding:0 8px} .step h4{margin-top:10px;font-family:var(--f-display);font-weight:500;font-size:1.02rem;color:#fff;line-height:1.4} .step .st-sub{margin-top:3px;font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:rgba(245,245,245,.62)} /* Selected projects meta */ .projects-sec{background:var(--cream)} .villa-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 20px;font-size:.88rem;color:var(--ink-soft)} .villa-meta b{color:var(--wine);font-weight:500} /* video arches: SVG clip-path blanks