:root {
  --navy: #101d35;
  --navy-2: #172945;
  --lime: #bad63c;
  --lime-bright: #cbe84c;
  --cream: #f2efe8;
  --paper: #faf9f5;
  --ink: #152038;
  --muted: #707985;
  --line: rgba(21, 32, 56, .14);
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: "Tajawal", Arial, sans-serif; }
body.menu-open, body.lightbox-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, .brand b { font-family: "Alexandria", "Tajawal", sans-serif; }
mark { color: var(--lime); background: none; }

.page-loader { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; background: var(--navy); color: white; transition: clip-path .9s var(--ease), visibility .9s; clip-path: inset(0 0 0 0); }
.page-loader.loaded { clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader-mark { display: grid; justify-items: center; gap: 15px; }.loader-mark img { width: 78px; height: 78px; border-radius: 50%; animation: loaderFloat 1.5s ease-in-out infinite; }.loader-mark span { width: 150px; height: 2px; overflow: hidden; background: rgba(255,255,255,.15); }.loader-mark span::after { content: ""; display: block; width: 55%; height: 100%; background: var(--lime); animation: loaderLine 1s ease-in-out infinite; }.loader-mark small { font: 600 9px/1.4 "Alexandria"; letter-spacing: .24em; opacity: .55; }
.page-progress { position: fixed; z-index: 90; inset: 0 0 auto; height: 3px; pointer-events: none; }.page-progress span { display: block; width: 0; height: 100%; background: var(--lime-bright); box-shadow: 0 0 16px rgba(203,232,76,.7); }
.cursor-glow { position: fixed; z-index: 30; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle,rgba(186,214,60,.09),transparent 67%); mix-blend-mode: screen; transition: opacity .35s; }
body:hover .cursor-glow { opacity: 1; }

.site-header {
  position: fixed; z-index: 50; inset: 0 0 auto; height: 92px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(22px, 5vw, 76px); color: white; direction: ltr;
  border-bottom: 1px solid rgba(255,255,255,.18); transition: height .4s var(--ease), background .4s, box-shadow .4s;
}
.site-header.is-scrolled { height: 72px; background: rgba(16,29,53,.94); backdrop-filter: blur(18px); box-shadow: 0 14px 38px rgba(4,12,27,.2); }
.brand { justify-self: start; display: flex; align-items: center; gap: 12px; }
.brand img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); transition: width .4s, height .4s, transform .4s; }
.brand:hover img { transform: rotate(-4deg) scale(1.04); }
.is-scrolled .brand img { width: 44px; height: 44px; }
.brand span { display: flex; flex-direction: column; line-height: 1.1; direction: rtl; }
.brand b { font-size: 14px; }.brand small { margin-top: 5px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; direction: ltr; }
nav { display: flex; gap: 34px; direction: rtl; font-size: 13px; font-weight: 700; }
nav a { position: relative; padding: 36px 0; transition: color .25s; }
nav a::after { content: ""; position: absolute; right: 0; bottom: 28px; width: 0; height: 2px; background: var(--lime); transition: width .35s var(--ease); }
nav a:hover, nav a.active { color: var(--lime-bright); } nav a:hover::after, nav a.active::after { width: 100%; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.language-toggle, .menu-toggle { border: 0; background: transparent; cursor: pointer; }
.language-toggle { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; font: 700 11px/1 "Alexandria"; transition: background .25s, color .25s, transform .25s; }
.language-toggle:hover { background: white; color: var(--navy); transform: translateY(-2px); }
.header-cta { min-height: 43px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.48); padding: 0 19px; border-radius: 100px; font-weight: 800; font-size: 12px; transition: background .25s, color .25s, transform .25s; }
.header-cta:hover { background: var(--lime); color: var(--navy); border-color: var(--lime); transform: translateY(-2px); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 740px; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: -4%; background-position: center 42%; background-size: cover; opacity: 0; clip-path: inset(0 0 0 100%); transform: scale(1.13); transition: opacity .2s .8s, clip-path 1.15s var(--ease), transform 6s ease; will-change: transform,clip-path; }
.hero-slide.active { z-index: 1; opacity: 1; clip-path: inset(0); transform: scale(1.025); transition: opacity .2s, clip-path 1.15s var(--ease), transform 7s ease; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(9,18,36,.08),rgba(9,18,36,.35) 42%,rgba(9,18,36,.93) 100%), linear-gradient(0deg,rgba(9,18,36,.65),transparent 46%); }
.hero-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size: 14vw 14vw; mask-image: linear-gradient(90deg,transparent,black); }
.hero-content { position: relative; z-index: 2; width: min(650px,calc(100% - 44px)); margin-inline-start: auto; margin-inline-end: clamp(22px,9vw,140px); color: white; text-align: start; padding-top: 76px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--lime-bright); font-size: 14px; font-weight: 800; }
.eyebrow::before { content: ""; width: 38px; height: 2px; background: currentColor; transform-origin: right; animation: lineGrow 1s .5s both; }
.hero-title { margin: 18px 0 23px; font-size: clamp(66px,8vw,118px); line-height: .92; letter-spacing: -.055em; font-weight: 900; }
.hero-title span { display: block; opacity: 0; transform: translateY(90px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hero-title span:nth-child(2) { color: var(--lime); transition-delay: .14s; }
body.is-ready .hero-title span { opacity: 1; transform: none; }
.hero-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s .45s, transform .7s .45s var(--ease); }
.hero-copy.hero-reveal { transition-delay: .55s; }.hero-actions.hero-reveal { transition-delay: .68s; }
body.is-ready .hero-reveal { opacity: 1; transform: none; }
.hero-copy { max-width: 530px; margin-inline-start: 0; font-size: clamp(18px,2vw,23px); line-height: 1.75; color: rgba(255,255,255,.82); }
.hero-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 28px; border: 0; border-radius: 3px; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .3s var(--ease), background .3s, box-shadow .3s; }
.button:hover { transform: translateY(-3px); }.button-primary { background: var(--lime); color: var(--navy); box-shadow: 0 12px 30px rgba(186,214,60,.16); }.button-primary:hover { background: var(--lime-bright); box-shadow: 0 18px 38px rgba(186,214,60,.25); }
.button-ghost { border: 1px solid rgba(255,255,255,.4); color: white; backdrop-filter: blur(8px); }.button-ghost:hover { background: rgba(255,255,255,.12); }
.button-dark { background: var(--navy); color: white; }.button-dark:hover { background: var(--navy-2); box-shadow: 0 16px 32px rgba(16,29,53,.2); }
.hero-stat { position: absolute; z-index: 2; inset-inline-start: clamp(22px,5vw,76px); bottom: 42px; display: flex; align-items: center; gap: 15px; color: white; opacity: 0; transform: translateY(20px); transition: .7s .9s var(--ease); }
body.is-ready .hero-stat { opacity: 1; transform: none; }.hero-stat strong { font: 700 46px/1 "Alexandria"; color: var(--lime); }.hero-stat span { font-size: 13px; font-weight: 800; line-height: 1.35; border-inline-start: 1px solid rgba(255,255,255,.3); padding-inline-start: 15px; }.hero-stat em { font-style: normal; font-size: 11px; font-weight: 400; opacity: .65; }
.scroll-cue { position: absolute; z-index: 3; bottom: 28px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; color: white; font-size: 9px; letter-spacing: .08em; opacity: .7; }.scroll-cue span { width: 1px; height: 37px; background: linear-gradient(white,transparent); animation: scrollLine 1.8s infinite; }
.hero-stack { position: absolute; z-index: 3; inset-inline-start: clamp(30px,6vw,95px); top: 50%; width: 280px; height: 330px; transform: translateY(-46%); opacity: 0; transition: opacity .8s 1s, transform .8s 1s var(--ease); }.is-ready .hero-stack { opacity: 1; transform: translateY(-50%); }.hero-stack figure { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.42); box-shadow: 0 22px 60px rgba(3,11,23,.25); }.hero-stack figure:first-child { width: 176px; height: 235px; inset: 0 auto auto 0; transform: rotate(-4deg); animation: cardFloat 5.5s ease-in-out infinite; }.hero-stack figure:nth-child(2) { width: 136px; height: 174px; inset: auto 0 0 auto; transform: rotate(5deg); animation: cardFloat 6.5s 1s ease-in-out infinite reverse; }.hero-stack img { width: 100%; height: 100%; object-fit: cover; }.experience-seal { position: absolute; z-index: 2; left: 128px; top: 150px; width: 105px; height: 105px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; padding: 15px; border-radius: 50%; background: var(--lime); color: var(--navy); box-shadow: 0 14px 35px rgba(3,11,23,.25); transform: rotate(-8deg); }.experience-seal strong { font: 800 31px/1 "Alexandria"; }.experience-seal span { font: 700 7px/1.35 "Alexandria"; letter-spacing: .08em; }
.hero-slider-nav { position: absolute; z-index: 4; inset-inline-end: clamp(24px,4vw,62px); bottom: 35px; display: flex; align-items: center; gap: 13px; direction: ltr; }.hero-slider-nav button { width: 35px; height: 35px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.45); cursor: pointer; font: 600 9px/1 "Alexandria"; transition: color .25s,transform .25s; }.hero-slider-nav button:hover,.hero-slider-nav button.active { color: white; transform: translateY(-2px); }.hero-slider-nav button.active span { padding-bottom: 5px; border-bottom: 2px solid var(--lime); }.hero-slide-progress { width: 72px; height: 1px; background: rgba(255,255,255,.22); overflow: hidden; }.hero-slide-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: left; animation: slideProgress 6s linear infinite; }
.service-marquee { height: 74px; display: flex; align-items: center; overflow: hidden; background: var(--lime); color: var(--navy); direction: ltr; }.service-marquee>div { display: flex; align-items: center; flex-shrink: 0; min-width: max-content; animation: marquee 28s linear infinite; }.service-marquee span { padding: 0 31px; font: 700 13px/1 "Alexandria"; letter-spacing: .02em; white-space: nowrap; }.service-marquee i { font-style: normal; font-size: 13px; }

.intro,.projects,.contact,.quote { padding: clamp(84px,10vw,150px) clamp(22px,7vw,112px); }
.section-tag { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #75808f; text-transform: uppercase; }
.section-tag span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #bfc5c7; border-radius: 50%; color: var(--navy); font-family: "Alexandria"; }
.section-tag.light { color: rgba(255,255,255,.55); }.section-tag.light span { color: var(--lime); border-color: rgba(255,255,255,.3); }
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9vw; align-items: end; margin-top: 58px; }
.intro h2,.section-head h2,.projects h2,.process h2,.assurance h2,.quote h2,.contact h2 { margin: 0; font-size: clamp(42px,5vw,74px); line-height: 1.13; letter-spacing: -.04em; }
.intro-copy>p { margin: 0 0 16px; font-size: 20px; line-height: 1.9; }.intro-copy .en-copy { direction: ltr; color: #838991; font: 500 13px/1.7 "Alexandria"; letter-spacing: .01em; }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 76px; border-block: 1px solid var(--line); }
.stats-grid>div { min-height: 155px; display: flex; flex-direction: column; justify-content: center; border-inline-end: 1px solid var(--line); padding-inline: clamp(18px,3vw,42px); }.stats-grid>div:first-child { padding-inline-start: 0; }.stats-grid>div:last-child { border: 0; }
.stats-grid strong { font: 700 clamp(36px,4vw,58px)/1 "Alexandria"; color: var(--navy); }.stats-grid small { margin-top: 14px; color: var(--muted); font-weight: 700; }

.dark-section { background: var(--navy); color: white; padding: clamp(84px,9vw,130px) clamp(22px,7vw,112px); }
.services { position: relative; isolation: isolate; overflow: hidden; }
.services::before { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; inset: -250px auto auto -230px; border-radius: 50%; background: radial-gradient(circle,rgba(186,214,60,.14),transparent 67%); filter: blur(12px); }
.section-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; }.section-head h2 { margin-top: 38px; }.section-head h2 mark { color: var(--lime); }.section-head>p { max-width: 390px; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.9; }
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid rgba(255,255,255,.15); border-inline-start: 1px solid rgba(255,255,255,.15); margin-top: 68px; }
.service-grid article { position: relative; min-height: 270px; padding: 42px; border-inline-end: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); display: flex; gap: 27px; overflow: hidden; transition: background .4s var(--ease), color .4s; }
.service-grid article::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(186,214,60,.16),transparent 70%); transition: opacity .35s; }
.service-grid article:hover::before { opacity: 1; }
.service-grid article>* { position: relative; z-index: 1; }
.service-grid article::after { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; inset-inline-end: -130px; bottom: -140px; transition: transform .6s var(--ease); }.service-grid article:hover::after { transform: scale(1.45); }
.service-grid article:hover { background: var(--navy-2); }.service-grid .service-feature { background: var(--lime); color: var(--navy); }.service-grid .service-feature:hover { background: var(--lime-bright); }
.service-grid .service-feature::before { background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 70%); }
.service-grid article>i { position: absolute; inset-inline-end: 28px; top: 28px; font-style: normal; opacity: .28; transition: transform .35s, opacity .35s; }.service-grid article:hover>i { transform: translate(3px,-3px); opacity: 1; }
.service-no { font: 700 10px/1 "Alexandria"; opacity: .55; }.service-grid h3 { margin: 0 0 6px; font-size: 26px; }.service-grid small { font: 600 9px/1.4 "Alexandria"; letter-spacing: .13em; opacity: .55; }.service-grid p { max-width: 360px; margin: 28px 0 0; line-height: 1.8; font-size: 14px; opacity: .72; }

.projects { position: relative; isolation: isolate; overflow: hidden; }
.projects::before { content: "SUN SHADE"; position: absolute; z-index: -1; top: 3.5%; left: -2%; color: transparent; -webkit-text-stroke: 1px rgba(16,29,53,.055); font: 800 clamp(80px,15vw,240px)/1 "Alexandria"; letter-spacing: -.08em; white-space: nowrap; pointer-events: none; }
.projects-title { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.projects-title h2 { text-align: end; }.projects-title mark { color: var(--lime); }
.gallery-filters { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin: 52px 0 22px; }.gallery-filters button { padding: 9px 18px; border: 1px solid var(--line); border-radius: 100px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; font-size: 12px; transition: .25s; }.gallery-filters button:hover,.gallery-filters button.active { background: var(--navy); color: white; border-color: var(--navy); }
.gallery { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 360px; gap: 12px; direction: ltr; }
.gallery-card { position: relative; overflow: hidden; margin: 0; padding: 0; border: 0; background: #ddd; text-align: start; cursor: pointer; box-shadow: 0 18px 50px rgba(16,29,53,0); transition: opacity .35s, transform .45s var(--ease), box-shadow .45s; }.gallery-card:hover { z-index: 2; transform: translateY(-6px); box-shadow: 0 24px 55px rgba(16,29,53,.2); }.gallery-card.wide { grid-column: span 2; }.gallery-card.is-hidden { display: none; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; }.gallery-card:hover img { transform: scale(1.055); filter: saturate(1.08); }
.gallery-card>span { position: absolute; inset: auto 0 0; padding: 55px 20px 19px; color: white; background: linear-gradient(transparent,rgba(8,17,33,.86)); display: flex; flex-direction: column; direction: rtl; transform: translateY(8px); transition: transform .4s; }.gallery-card:hover>span { transform: none; }.gallery-card b { font-family: "Alexandria"; font-size: 14px; }.gallery-card small { direction: ltr; font: 500 9px/1.4 "Alexandria"; letter-spacing: .1em; opacity: .7; margin-top: 6px; }.gallery-card>i { position: absolute; z-index: 2; inset-inline-end: 18px; top: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(16,29,53,.6); color: white; font-style: normal; backdrop-filter: blur(7px); opacity: 0; transform: scale(.7); transition: .35s; }.gallery-card:hover>i { opacity: 1; transform: scale(1); }
.instagram-link { margin: 38px auto 0; width: max-content; max-width: 100%; display: flex; gap: 9px; font-weight: 800; border-bottom: 1px solid var(--navy); padding-bottom: 8px; }.instagram-link b { direction: ltr; color: #81878b; font: 600 11px/1.4 "Alexandria"; }

.process-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.process-heading h2 mark { color: var(--lime); }
.process-track { position: relative; height: 1px; margin-top: 64px; background: rgba(255,255,255,.14); }.process-progress { width: 0; height: 2px; background: var(--lime); box-shadow: 0 0 22px rgba(186,214,60,.6); transition: width 1.4s var(--ease); }.process-track.is-visible .process-progress { width: 100%; }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); }.process-grid>div { position: relative; padding: 36px 30px 12px; border-inline-end: 1px solid rgba(255,255,255,.14); }.process-grid>div:last-child { border: 0; }.process-grid>div::before { content: ""; position: absolute; top: -5px; inset-inline-start: 27px; width: 9px; height: 9px; border: 2px solid var(--lime); border-radius: 50%; background: var(--navy); }.process-grid span { color: var(--lime); font: 700 10px/1 "Alexandria"; }.process-grid h3 { font-size: 19px; margin: 42px 0 12px; }.process-grid p { color: rgba(255,255,255,.48); font-size: 13px; line-height: 1.75; }

.assurance { min-height: 760px; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }.assurance-photo { min-height: 620px; overflow: hidden; }.assurance-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }.assurance-photo:hover img { transform: scale(1.035); }.assurance-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(70px,8vw,130px); }.assurance h2 { margin-top: 40px; }.assurance-content>p { max-width: 590px; margin: 26px 0 34px; color: var(--muted); line-height: 1.9; font-size: 16px; }.assurance ul { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }.assurance li { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.assurance li span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--lime); font-size: 12px; }.assurance li b { font-size: 14px; }

.quote { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; align-items: start; background: var(--lime); }.quote h2 { margin-top: 38px; }.quote h2 mark { color: white; }.quote-intro>p { margin-top: 24px; max-width: 470px; line-height: 1.85; color: rgba(16,29,53,.7); }.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; background: white; padding: clamp(28px,4vw,52px); box-shadow: 0 28px 70px rgba(16,29,53,.14); }.quote-form label { display: grid; gap: 9px; }.quote-form label>span { font-size: 12px; font-weight: 800; }.quote-form .full { grid-column: 1/-1; }.quote-form input,.quote-form select,.quote-form textarea { width: 100%; border: 0; border-bottom: 1px solid #cfd1ce; border-radius: 0; background: transparent; color: var(--ink); padding: 12px 2px; outline: none; transition: border-color .25s, box-shadow .25s; }.quote-form textarea { resize: vertical; }.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus { border-color: var(--navy); box-shadow: 0 2px 0 var(--navy); }.quote-form .button { width: 100%; }

.contact { display: grid; grid-template-columns: 1fr minmax(300px,390px); gap: 9vw; align-items: center; }.contact h2 { margin-top: 44px; }.contact-main>p { max-width: 600px; font-size: 17px; line-height: 1.9; color: var(--muted); }.contact-actions { display: flex; align-items: center; gap: 28px; margin-top: 32px; }.text-link { font: 700 14px/1.4 "Alexandria"; border-bottom: 1px solid #aaa; padding-bottom: 6px; direction: ltr; }.contact-card { background: white; padding: 40px; box-shadow: 0 24px 80px rgba(19,32,56,.1); border-top: 5px solid var(--lime); transition: transform .4s var(--ease), box-shadow .4s; }.contact-card:hover { transform: translateY(-7px); box-shadow: 0 35px 90px rgba(19,32,56,.15); }.contact-card>img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }.contact-card h3 { margin: 20px 0 4px; font-size: 22px; }.contact-card>p { margin: 0; color: #8c9196; direction: ltr; }.contact-card dl { margin: 34px 0 0; }.contact-card dl div { padding: 17px 0; border-top: 1px solid #eceae4; }.contact-card dt { font: 600 9px/1.4 "Alexandria"; letter-spacing: .12em; text-transform: uppercase; color: #999; direction: ltr; }.contact-card dd { margin: 7px 0 0; font-weight: 800; }.contact-card dd a[href^="tel"] { direction: ltr; display: inline-block; }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #0a1428; color: white; min-height: 160px; padding: 30px clamp(22px,7vw,112px); }.footer-brand { display: flex; align-items: center; gap: 13px; }.footer-brand img { width: 46px; height: 46px; border-radius: 50%; }.footer-brand span { display: flex; flex-direction: column; }.footer-brand small { margin-top: 5px; opacity: .48; }.footer-links { display: flex; gap: 30px; font-size: 12px; }.footer-links a { transition: color .25s; }.footer-links a:hover { color: var(--lime); }footer>p { justify-self: end; direction: ltr; font: 500 9px/1.4 "Alexandria"; opacity: .42; }
.floating-wa { position: fixed; z-index: 45; inset-inline-start: 20px; bottom: 20px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--navy); font: 800 11px/1 "Alexandria"; box-shadow: 0 10px 30px rgba(18,31,57,.25); transition: transform .3s; }.floating-wa:hover { transform: translateY(-4px) scale(1.04); }.floating-wa i { position: absolute; inset: -5px; border: 1px solid rgba(186,214,60,.55); border-radius: inherit; animation: waPulse 2.4s infinite; }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity .75s var(--ease), transform .75s var(--ease); }.reveal.is-visible { opacity: 1; transform: none; }.gallery-card.reveal.is-visible:hover { transform: translateY(-6px); }.service-grid .reveal:nth-child(2),.gallery .reveal:nth-child(2),.process-grid .reveal:nth-child(2){transition-delay:.08s}.service-grid .reveal:nth-child(3),.gallery .reveal:nth-child(3),.process-grid .reveal:nth-child(3){transition-delay:.16s}.service-grid .reveal:nth-child(4),.gallery .reveal:nth-child(4),.process-grid .reveal:nth-child(4){transition-delay:.24s}
.lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: rgba(5,12,24,.94); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }.lightbox.open { opacity: 1; visibility: visible; }.lightbox img { max-width: min(86vw,1100px); max-height: 82vh; object-fit: contain; transform: scale(.94); transition: transform .45s var(--ease); }.lightbox.open img { transform: scale(1); }.lightbox button { position: absolute; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: white; cursor: pointer; backdrop-filter: blur(8px); }.lightbox-close { top: 24px; inset-inline-end: 28px; width: 46px; height: 46px; border-radius: 50%; font-size: 27px; }.lightbox-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 21px; }.lightbox-arrow.previous { left: 24px; }.lightbox-arrow.next { right: 24px; }.lightbox-count { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.65); font: 600 10px/1.4 "Alexandria"; letter-spacing: .15em; }

html[dir="ltr"] body { font-family: "Alexandria", Arial, sans-serif; }.en-copy { display: block; }html[dir="ltr"] .en-copy { display: none; }html[dir="ltr"] .hero-shade { background: linear-gradient(270deg,rgba(9,18,36,.08),rgba(9,18,36,.35) 42%,rgba(9,18,36,.93) 100%),linear-gradient(0deg,rgba(9,18,36,.65),transparent 46%); }html[dir="ltr"] .gallery-card>span { direction: ltr; }html[dir="ltr"] .gallery-card small { direction: ltr; }

@keyframes lineGrow { from { transform: scaleX(0); } }@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }@keyframes waPulse { 0%,100%{transform:scale(.9);opacity:.7}60%{transform:scale(1.2);opacity:0} }@keyframes loaderFloat{50%{transform:translateY(-8px) rotate(3deg)}}@keyframes loaderLine{0%{transform:translateX(-110%)}100%{transform:translateX(230%)}}@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes slideProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes marquee{to{transform:translateX(-100%)}}

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; background: rgba(10,20,40,.98); opacity: 0; visibility: hidden; transform: translateY(-20px); transition: .4s var(--ease); }.site-header nav.open { opacity: 1; visibility: visible; transform: none; }.site-header nav a { font-family: "Alexandria"; font-size: 28px; padding: 13px; }.site-header nav a::after { bottom: 8px; }.menu-toggle { display: grid; position: relative; z-index: 2; order: 3; width: 42px; height: 42px; place-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; }.menu-toggle i { display: block; width: 17px; height: 1px; background: white; transition: transform .3s; }.menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }.menu-toggle[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }.header-actions { display: none; }.hero-stack { display: none; }.intro-grid,.contact,.quote { grid-template-columns: 1fr; gap: 52px; }.service-grid { grid-template-columns: 1fr; }.gallery { grid-template-columns: repeat(2,1fr); grid-auto-rows: 320px; }.process-heading { display: block; }.process-heading h2 { margin-top: 38px; }.process-grid { grid-template-columns: repeat(2,1fr); }.assurance { grid-template-columns: 1fr; }.assurance-photo { min-height: 540px; }.assurance-content { padding: 75px clamp(22px,7vw,75px); }footer { grid-template-columns: 1fr; gap: 28px; text-align: center; }.footer-brand,.footer-links { justify-content: center; }footer>p { justify-self: center; }
}

@media (max-width: 640px) {
  .site-header { height: 74px; padding: 0 18px; }.brand img { width: 43px; height: 43px; }.brand small { display: none; }.hero { min-height: 700px; }.hero-content { margin-inline: 22px; padding-top: 30px; }.hero-slide { background-position: 42% center; }.hero-shade,html[dir="ltr"] .hero-shade { background: linear-gradient(0deg,rgba(9,18,36,.94),rgba(9,18,36,.26) 86%); }.hero-title { font-size: clamp(52px,17vw,72px); }.hero-stat { display: none; }.hero-slider-nav { inset-inline-end: 18px; bottom: 18px; }.hero-slider-nav button { display: none; }.hero-slide-progress { width: 85px; }.scroll-cue { display: none; }.service-marquee { height: 62px; }.service-marquee span { padding: 0 22px; font-size: 11px; }.button { flex: 1; min-width: 145px; }.intro,.projects,.contact,.quote,.dark-section { padding: 76px 22px; }.intro-grid { margin-top: 38px; }.stats-grid { margin-top: 48px; }.stats-grid>div { min-height: 125px; padding-inline: 10px; }.stats-grid strong { font-size: 27px; }.stats-grid small { font-size: 10px; }.section-head,.projects-title { display: block; }.section-head>p { margin-top: 25px; }.projects-title h2 { margin-top: 36px; text-align: start; }.service-grid { margin-top: 42px; }.service-grid article { padding: 31px 24px; min-height: 235px; }.gallery { grid-template-columns: 1fr; grid-auto-rows: 355px; }.gallery-card.wide { grid-column: span 1; }.gallery-card>i { opacity: 1; transform: scale(1); }.process-track { display: none; }.process-grid { grid-template-columns: 1fr; margin-top: 42px; }.process-grid>div { border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 30px 0; }.process-grid>div::before { display: none; }.process-grid h3 { margin-top: 22px; }.assurance-photo { min-height: 430px; }.assurance-content { padding: 70px 22px; }.quote-form { grid-template-columns: 1fr; padding: 28px 22px; }.quote-form .full { grid-column: 1; }.contact-actions { align-items: stretch; flex-direction: column; }.contact-card { padding: 30px; }.footer-links { flex-wrap: wrap; }.floating-wa { width: 50px; height: 50px; }.lightbox img { max-width: 94vw; }.lightbox-arrow { top: auto; bottom: 18px; }.lightbox-count { bottom: 36px; }.cursor-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }*,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal,.hero-title span,.hero-reveal,.hero-stat { opacity: 1 !important; transform: none !important; }
}