/* ═══════════════════════════════════════════
RESET & VARIABLES
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body.nav-open{overflow:hidden}
:root{
/* ── Brand Colors ── */
--purple:#461642;
--purple-light:#763272;
--purple-dark:#2e0e2b;
--purple-50:#fdf6fd;
--purple-200:#f3daf4;
--gold:#d4884a;
--gold-hover:#c47a3a;
--gold-dark:#b86a2e;
--gold-bright:#f3c58a; /* warranty-seal accent */
--gold-deep:#b5773e; /* warranty-seal accent */
--gold-warm:#e8b275; /* warranty-seal sparkle */
--gold-shimmer:#f5c97e; /* hero-title gradient */
--red-live:#ef4444;
--red-error:#ef4444;
--green-success:#22c55e;
/* ── Foreground Pure ── */
/* Note: --white is a legacy alias for the dark bg (brand naming).
Use --text-on-dark for actual #fff foreground text/icons. */
--text-on-dark:#fff;
--black-pure:#000;
/* ── Semantic Background Colors ── */
--bg-primary:#0e040d;
--bg-secondary:#160b15;
--bg-elevated:rgba(255,255,255,.04);
--bg-section-alt:#130a12;
--white:#0e040d; /* legacy alias - dark theme bg */
--bg-dark:#0e040d;
/* ── Text Colors ── */
--text-main:#f0eaef;
--text-sub:#b8adb7;
--text-muted:rgba(255,255,255,.55);
/* ── Border Colors ── */
--border-light:#e5e5e5;
--border:rgba(255,255,255,.08);
--border-subtle:rgba(255,255,255,.04);
--border-interactive:rgba(255,255,255,.12);
/* ── Spacing Scale (8px base) ── */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:80px;
/* ── Typography Scale ── */
--text-xs:clamp(12px, 1vw, 14px);
--text-sm:clamp(14px, 1.2vw, 16px);
--text-base:clamp(15px, 1.4vw, 18px);
--text-lg:clamp(18px, 2vw, 22px);
--text-xl:clamp(22px, 2.5vw, 28px);
--text-2xl:clamp(24px, 3vw, 36px);
--text-3xl:clamp(32px, 5vw, 56px);
--text-4xl:clamp(36px, 5.5vw, 64px);
/* ── Border Radius ── */
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--radius-xl:12px;
--radius-full:999px;
/* ── Layout ── */
--content-max:1200px;
--content-pad:16px; /* mobile edge safety */
/* ── Button Tokens ── */
--btn-h-sm:36px;
--btn-h-md:44px; /* WCAG 2.5.5 touch target */
--btn-h-lg:52px;
--btn-px-sm:16px;
--btn-px-md:22px;
--btn-px-lg:30px;
--btn-fs-sm:13px;
--btn-fs-md:14px;
--btn-fs-lg:15px;
--btn-weight:600;
--btn-gap:8px;
--btn-radius:var(--radius-full);
--btn-ring:0 0 0 2px var(--gold);
--btn-shadow-primary:0 4px 16px rgba(212,136,74,.28);
--btn-shadow-primary-hover:0 8px 24px rgba(212,136,74,.4);
/* ── Shadows (Elevation) ── */
--shadow-sm:0 1px 3px rgba(0,0,0,.12);
--shadow-md:0 4px 16px rgba(0,0,0,.2);
--shadow-lg:0 8px 32px rgba(0,0,0,.3);
--shadow-xl:0 16px 48px rgba(0,0,0,.4);
--shadow-glow-gold:0 8px 24px rgba(228,147,93,.3);
--shadow-glow-purple:0 8px 24px rgba(70,22,66,.3);
/* ── Motion ── */
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-bounce:cubic-bezier(.4,0,.2,1);
--duration-fast:150ms;
--duration-normal:250ms;
--duration-slow:400ms;
--duration-enter:500ms;
/* ── Font ── */
--font:'IBM Plex Sans Arabic',sans-serif;
}
/* ── Mobile edge safety: all inner containers get 16px horizontal padding below content-max ── */
.stats-v2-inner,.process-inner,.features-inner,.materials-inner,.live-install-inner,.factory-intro-inner,
.cert-inner,.reality-inner,.maps-header,.branches-grid,.footer-inner,
.contact-inner,.kitchens-header,.kitchens-grid-wrap,
.testimonials-header,.testimonials-footer{padding-inline:var(--content-pad)}
@media(min-width:1232px){
.stats-v2-inner,.process-inner,.features-inner,.materials-inner,.live-install-inner,.factory-intro-inner,
.cert-inner,.reality-inner,.maps-header,.branches-grid,.footer-inner,
.contact-inner,.kitchens-header,.kitchens-grid-wrap,
.testimonials-header,.testimonials-footer{padding-inline:0}
}
/* ══════════════════════════════════════════
BUTTON SYSTEM - Primary / Secondary / Tertiary
Hierarchy: ONE primary per section. Secondary for alt actions.
Tertiary for low-priority utility or external links.
══════════════════════════════════════════ */
.btn{
--_bg:transparent;
--_fg:var(--text-main);
--_border:transparent;
--_bg-hover:transparent;
--_border-hover:transparent;
--_fg-hover:var(--text-main);
--_shadow:none;
--_shadow-hover:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--btn-gap);
height:var(--btn-h-md);
padding:0 var(--btn-px-md);
background:var(--_bg);
color:var(--_fg);
border:1px solid var(--_border);
border-radius:var(--btn-radius);
font-family:var(--font);
font-weight:var(--btn-weight);
font-size:var(--btn-fs-md);
line-height:1;
letter-spacing:0;
text-decoration:none;
cursor:pointer;
white-space:nowrap;
box-shadow:var(--_shadow);
transition:background var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.btn:hover{
background:var(--_bg-hover);
border-color:var(--_border-hover);
color:var(--_fg-hover);
box-shadow:var(--_shadow-hover);
transform:translateY(-1px);
}
.btn:active{transform:translateY(0);transition-duration:var(--duration-fast)}
.btn:focus-visible{outline:none;box-shadow:var(--_shadow),var(--btn-ring);outline-offset:0}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;transform:none!important;box-shadow:var(--_shadow)!important}
.btn svg{width:1.15em;height:1.15em;flex-shrink:0;transition:transform var(--duration-normal) var(--ease-out)}
.btn:hover svg{transform:translateX(-3px)} /* RTL: arrow moves toward direction of reading */
/* ── Variants ── */
.btn--primary{
--_bg:linear-gradient(135deg,var(--gold),var(--gold-dark));
--_fg:var(--text-on-dark);
--_bg-hover:linear-gradient(135deg,var(--gold-hover),var(--gold-dark));
--_fg-hover:var(--text-on-dark);
--_shadow:var(--btn-shadow-primary);
--_shadow-hover:var(--btn-shadow-primary-hover);
}
.btn--secondary{
--_bg:rgba(237,172,110,.08);
--_fg:var(--gold);
--_border:rgba(237,172,110,.35);
--_bg-hover:rgba(237,172,110,.14);
--_fg-hover:var(--gold);
--_border-hover:var(--gold);
}
.btn--tertiary{
--_bg:transparent;
--_fg:var(--text-main);
--_border:rgba(255,255,255,.15);
--_bg-hover:rgba(255,255,255,.06);
--_fg-hover:var(--gold);
--_border-hover:rgba(237,172,110,.35);
}
/* ── Sizes ── */
.btn--sm{height:var(--btn-h-sm);padding:0 var(--btn-px-sm);font-size:var(--btn-fs-sm)}
.btn--lg{height:var(--btn-h-lg);padding:0 var(--btn-px-lg);font-size:var(--btn-fs-lg)}
/* ── Modifiers ── */
.btn--block{width:100%}
.btn--no-arrow:hover svg{transform:none}
/* ── Loading state ── */
.btn.is-loading{color:transparent;pointer-events:none;position:relative}
.btn.is-loading::after{
content:"";
position:absolute;
inset:0;
margin:auto;
width:18px;height:18px;
border:2px solid var(--text-on-dark);
border-top-color:transparent;
border-radius:50%;
animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}
/* ── Button group ── */
.btn-group{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(max-width:540px){
.btn-group--stack-mobile{flex-direction:column;align-items:stretch}
.btn-group--stack-mobile .btn{width:100%}
}
/* ── Announcement Bar ── */
/* ── Navigation - Glass Morphism ── */
/* ── Hero Section - Refined Overlay ── */
/* ── Stats Strip - Elevated ── */
/* ── Partners - Bigger & Cleaner ── */
/* ── Features - Premium Cards ── */
/* ── Process Steps - Refined ── */
/* ── Vid-Hero / Tracking - Balanced Overlay ── */
/* ── Materials Section - Card Refinement ── */
/* ── Factory Section - Elevated Cards ── */
/* ── Certificates Section - Premium Cards ── */
/* ── Gallery Section - Polished ── */
/* ── Testimonials Section - Premium Layout ── */
/* ── Maps Section ── */
/* ── Contact Section - Premium Form ── */
/* ── Footer - Clean & Refined ── */
/* ── Floating FABs - Polished ── */
/* ── Light Mode Section Title Decorations ── */
/* ── Light Mode Smooth Transitions ── */
/* Theme toggle button */
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font);background:var(--white);color:var(--text-main);overflow-x:clip;line-height:1.6;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(212,136,74,.3);color:var(--text-on-dark)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{border:none;cursor:pointer;font-family:var(--font)}
/* ── Focus States (Accessibility) ── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--radius-sm)}
/* ── Cursor pointer on interactive elements ── */
a[href],.btn,.process-card,.cladding-color-card,.test-card,.branch-pair,.cert-card,.kitchen-item,.partner-logo,.footer-social a,.scroll-top,.wa-fab,.reality-video-play,.mat-item,.lightbox-close{cursor:pointer}
/* ═══════════════════════════════════════════
SCROLL ANIMATIONS - Professional system
═══════════════════════════════════════════ */
/* Base: all animated elements start hidden */
[data-animate]{opacity:0;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-animate].in-view{opacity:1;transform:translate(0,0) scale(1)}
/* Fade up */
[data-animate="fade-up"]{transform:translateY(48px)}
/* Fade from start (right in RTL) */
[data-animate="fade-start"]{transform:translateX(48px)}
/* Fade from end (left in RTL) */
[data-animate="fade-end"]{transform:translateX(-48px)}
/* Scale up */
[data-animate="scale-up"]{transform:scale(.92);transform-origin:center}
/* Clip reveal from bottom */
[data-animate="clip-up"]{clip-path:inset(100% 0 0 0);transform:none;transition:clip-path .9s cubic-bezier(.22,1,.36,1),opacity .6s ease}
[data-animate="clip-up"].in-view{clip-path:inset(0 0 0 0)}
/* Blur in */
[data-animate="blur-in"]{filter:blur(12px);transform:translateY(20px);transition:opacity .8s ease,transform .8s ease,filter .8s ease}
[data-animate="blur-in"].in-view{filter:blur(0)}
/* Stagger delays via CSS custom property */
[data-delay="1"]{transition-delay:.1s}
[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}
[data-delay="4"]{transition-delay:.4s}
[data-delay="5"]{transition-delay:.5s}
[data-delay="6"]{transition-delay:.6s}
/* ═══════════════════════════════════════════
1. ANNOUNCEMENT BAR
═══════════════════════════════════════════ */
.announce{position:fixed;top:0;left:0;right:0;z-index:60;height:44px;background:var(--purple);display:flex;align-items:center;overflow:hidden;transition:transform .35s ease,opacity .35s ease}
.announce.hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
/* Marquee - force LTR for animation consistency */
.marquee-wrap{width:100%;overflow:hidden;direction:ltr}
.marquee-track{display:flex;align-items:center;gap:80px;width:max-content;animation:marquee 30s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:14px;color:var(--text-on-dark);font-weight:400;direction:rtl}
.marquee-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - 40px))}}
/* ═══════════════════════════════════════════
2. NAVIGATION
═══════════════════════════════════════════ */
.nav{position:fixed;top:44px;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px var(--space-5);background:rgba(14,4,13,.65);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.06);transition:top .3s ease,background .3s,padding .3s}
.nav.no-announce{top:0}
@media(min-width:1024px){.nav{padding:16px 64px}}
.nav-logo img{width:auto;height:44px;object-fit:contain}
@media(min-width:1024px){.nav-logo img{width:auto;height:52px}}
.footer-logo{width:auto;height:40px;object-fit:contain}
@media(min-width:1024px){.footer-logo{height:48px}}
/* Hamburger button - mobile only */
@media(min-width:1024px){.nav-hamburger{display:none}}
/* Nav links - mobile slide-down, desktop inline */
@media(min-width:1024px){.nav-links{position:static;height:auto;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;flex-direction:row;gap:40px;flex:1;justify-content:center;opacity:1;pointer-events:auto}}
@media(min-width:1024px){.nav-links a{font-size:16px;color:rgba(255,255,255,.75)}}
/* Mobile close button inside nav */
@media(min-width:1024px){.nav-close-mobile{display:none}}
/* ═══════════════════════════════════════════
3. HERO - Inspired by premium reference
═══════════════════════════════════════════ */
.hero{position:relative;min-height:calc(100svh - 44px);margin-top:44px;display:flex;align-items:center;overflow:hidden}
/* RTL: text over full-width background image */
.hero-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;padding:120px var(--content-pad) 60px;position:relative;z-index:3;width:100%;max-width:var(--content-max);margin:0 auto}
@media(min-width:1024px){.hero-text{padding-block:0 0;padding-inline:0;gap:28px}}
.hero-text-inner{max-width:720px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
/* Hero entrance animations - staggered */
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);font-size:12px;font-weight:400;color:rgba(255,255,255,.6);opacity:0;animation:heroFadeUp .7s .3s cubic-bezier(.22,1,.36,1) forwards}
.hero-title{text-align:right;opacity:0;animation:heroFadeUp .7s .5s cubic-bezier(.22,1,.36,1) forwards}
.hero-title .line1{display:block;font-weight:400;color:rgba(255,255,255,.8);font-size:clamp(20px,3vw,28px);line-height:1.4}
.hero-title .line2{display:block;font-weight:700;font-size:clamp(42px,7.5vw,80px);line-height:normal;margin-top:8px}
.hero-cta-wrap{margin-top:20px;opacity:0;animation:heroFadeUp .7s 1.1s cubic-bezier(.22,1,.36,1) forwards}
@media(min-width:1024px){.hero-cta-wrap{margin-top:32px}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
/* Hero image - full background, softer overlay */
.hero-img{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-img-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(14,4,13,.98) 0%,rgba(14,4,13,.82) 40%,rgba(14,4,13,.6) 70%,rgba(14,4,13,.7) 100%)}
@media(min-width:1024px){.hero-img-overlay{background:radial-gradient(ellipse 70% 70% at 100% 100%,rgba(14,4,13,.92) 0%,rgba(14,4,13,.6) 40%,transparent 70%),linear-gradient(to right,rgba(14,4,13,1) 0%,rgba(14,4,13,.98) 20%,rgba(14,4,13,.9) 45%,rgba(14,4,13,.55) 80%,rgba(14,4,13,.4) 100%),linear-gradient(to top,rgba(14,4,13,.85) 0%,transparent 35%),linear-gradient(to bottom,rgba(14,4,13,.7) 0%,transparent 25%)}}
/* ═══════════════════════════════════════════
4. STATS STRIP
═══════════════════════════════════════════ */
.stats{background:var(--purple);border-top:1px solid rgba(255,255,255,.06)}
@media(min-width:640px){.stats-inner{gap:0}}
@media(min-width:1024px){.stat-item{padding:0 56px}}
.stat-value{font-weight:700;color:var(--text-on-dark);font-size:clamp(24px,3vw,40px);font-variant-numeric:tabular-nums;direction:ltr}
.stat-label{font-weight:400;color:rgba(255,255,255,.75);font-size:clamp(12px,1.2vw,14px);white-space:nowrap}
@media(min-width:640px){.stat-sep{display:block}}
/* ═══════════════════════════════════════════
4.5 STATS V2 - Cards over background image
═══════════════════════════════════════════ */
.stats-v2{position:relative;padding:64px 0;overflow:hidden;background:var(--bg-primary) url('images/img_2.jpeg') center/cover no-repeat}
@media(min-width:1024px){.stats-v2{padding:80px 0}}
.stats-v2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stats-v2-overlay{position:absolute;inset:0;background:rgba(14,4,13,.82)}
.stats-v2-inner{position:relative;z-index:2;max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:40px;align-items:center}
.stats-v2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;justify-items:center}
@media(min-width:600px){.stats-v2-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.stats-v2-grid{grid-template-columns:repeat(5,1fr);gap:16px}}
.stats-v2-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:24px 16px;background:none;border:none;transition:all .3s}
.stats-v2-card:hover{transform:translateY(-1px)}
.stats-v2-num{font-weight:800;color:var(--gold);font-size:clamp(32px,5vw,44px);line-height:1.1}
.stats-v2-label{font-weight:500;color:rgba(255,255,255,.7);font-size:clamp(13px,1.5vw,15px)}
/* Light mode */
/* ═══════════════════════════════════════════
5. PARTNERS GRID (2 rows)
═══════════════════════════════════════════ */
.partners{padding:56px 0;background:var(--white);overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:28px}
@media(min-width:1024px){.partners{padding:72px 0}}
.partners-title{font-weight:400;color:var(--text-sub);font-size:18px;padding-inline:var(--content-pad)}
@media(min-width:1232px){.partners-title{padding-inline:0}}
.partners-marquee{width:100%;overflow:hidden}
/* Marquee. Removed will-change: it was forcing a GPU layer the
browser would have promoted anyway, and on lower-end mobile GPUs
the layer can compete with other compositor work. The transform
alone is enough to hint the optimization. */
.partners-grid{display:flex;gap:0;width:max-content;animation:partnersScroll 30s linear infinite}
.partners-grid:hover{animation-play-state:paused}
@media(min-width:768px){.partners-grid{animation-duration:35s}}
@media(min-width:1024px){.partners-grid{animation-duration:40s}}
@keyframes partnersScroll{0%{transform:translateX(0)}100%{transform:translateX(50%)}}
/* Reserve a stable cell width regardless of content state. Previously
when an SVG was still loading, the empty placeholder collapsed to
~0px, so the marquee's total width grew/shrunk as SVGs arrived and
the keyframe's 50% translation no longer matched - causing visible
stop-and-jump. min-width keeps every cell predictable from the
first frame. */
.partner-cell{display:flex;align-items:center;justify-content:center;padding:22px 32px;flex-shrink:0;min-width:184px}
.partner-logo{
height:46px;
width:auto;
max-width:120px;
object-fit:contain;
opacity:.45;
filter:brightness(0) invert(1);
transition:opacity .4s,transform .3s;
}
/* SVG logos are inlined as
so they stay as vectors at render time. fill="currentColor" inside the SVG
takes its color from the span, giving us white-on-dark without filter
rasterization. No CSS filter needed -> stays crisp at any DPR.
Explicit width:120px keeps the placeholder span the same size as a
loaded SVG so the marquee never reflows when SVGs arrive late. */
.partner-logo--svg{
display:inline-flex;
align-items:center;
justify-content:center;
width:120px;
height:46px;
color:var(--text-on-dark);
filter:none;
}
.partner-logo--svg svg{
max-height:100%;
max-width:100%;
width:auto;
height:auto;
display:block;
}
@media(min-width:768px){
.partner-cell{min-width:204px}
.partner-logo{height:52px}
.partner-logo--svg{height:52px}
}
@media(min-width:1024px){
.partner-cell{min-width:220px}
.partner-logo{height:58px}
.partner-logo--svg{height:58px}
}
.partner-logo:hover{opacity:.8;transform:scale(1.1)}
/* ═══════════════════════════════════════════
6. FEATURES
═══════════════════════════════════════════ */
@media(min-width:1024px){.features{padding:80px 0}}
.section-header{text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}
.section-title{font-weight:700;color:var(--text-on-dark);font-size:var(--text-2xl)}
.section-subtitle{font-weight:400;color:var(--text-sub);font-size:var(--text-sm);line-height:1.7;max-width:560px;margin-inline:auto}
@media(min-width:768px){.features-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
/* ═══════════════════════════════════════════
7. PROCESS STEPS
═══════════════════════════════════════════ */
.process{background:var(--white);padding:80px 0;position:relative;overflow:hidden}
.process::before{content:'';position:absolute;top:-5%;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(70,22,66,.08) 0%,transparent 70%);pointer-events:none}
@media(min-width:1024px){.process{padding:100px 0}}
.process-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:48px}
.section-eyebrow{display:block;text-align:center;font-size:var(--text-xs);font-weight:600;color:var(--gold);margin-bottom:16px}
.process-cards{display:grid;grid-template-columns:1fr;gap:20px;width:100%}
@media(min-width:600px){.process-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.process-cards{grid-template-columns:repeat(4,1fr);gap:24px}}
.process-card{position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:32px 24px;display:flex;flex-direction:column;gap:16px;transition:all .4s var(--ease-out);overflow:hidden;backdrop-filter:blur(12px)}
.process-card:hover{border-color:rgba(237,172,110,.15);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.process-card-num{position:absolute;top:16px;left:20px;font-size:48px;font-weight:800;color:rgba(255,255,255,.04);line-height:1;pointer-events:none}
.process-card-icon{width:52px;height:52px;border-radius:var(--radius-md);background:rgba(237,172,110,.1);border:1px solid rgba(237,172,110,.15);display:flex;align-items:center;justify-content:center}
.process-card-icon svg{width:24px;height:24px;stroke:var(--gold)}
.process-card-title{font-weight:600;font-size:17px;color:var(--text-on-dark);margin:0}
.process-card-desc{font-weight:400;color:var(--text-sub);font-size:var(--text-xs);line-height:1.7;margin:0}
.process-card-text{display:flex;flex-direction:column;gap:6px}
/* Video preview */
@media(min-width:1024px){.play-btn{width:80px;height:80px}}
/* ═══════════════════════════════════════════
8. TESTIMONIALS
═══════════════════════════════════════════ */
.testimonials{background:var(--white);padding:96px 0;overflow:hidden}
@media(min-width:1024px){.testimonials{padding:120px 0}}
.testimonials-header{text-align:center;margin-bottom:48px}
.testimonials-footer{text-align:center;padding-block:24px 0}
.test-marquee{display:flex;flex-direction:column;gap:16px}
.test-marquee-row{display:flex;gap:16px;width:max-content}
.test-marquee-rtl{transform:translateX(0);animation:marqueeRTL 80s linear infinite}
.test-marquee-row:hover{animation-play-state:paused}
@keyframes marqueeRTL{0%{transform:translateX(0)}100%{transform:translateX(33.333%)}}
.test-card{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);backdrop-filter:blur(8px);transition:border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal)}
.test-card:hover{border-color:rgba(255,255,255,.15);box-shadow:0 8px 32px rgba(0,0,0,.2)}
@media(min-width:768px){.test-card{width:380px;padding:28px}}
.test-rating{display:flex;gap:2px}
.test-rating svg{width:16px;height:16px}
.test-quote{font-weight:400;color:rgba(255,255,255,.8);font-size:14px;line-height:1.8;text-align:right}
.test-author{display:flex;align-items:center;gap:10px;margin-top:auto}
.test-avatar{width:36px;height:36px;border-radius:50%;background:rgba(237,172,110,.15);border:1px solid rgba(237,172,110,.2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;color:var(--gold);flex-shrink:0}
.test-name{font-weight:500;color:rgba(255,255,255,.7);font-size:13px}
/* ═══════════════════════════════════════════
9. CONTACT FORM
═══════════════════════════════════════════ */
.contact{position:relative;overflow:hidden}
.contact-bg{position:absolute;inset:0;background:var(--white)}
.contact-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:40px;padding-block:72px;max-width:var(--content-max);margin:0 auto}
@media(min-width:1024px){.contact-inner{flex-direction:row;align-items:flex-start;gap:56px;padding-block:88px}}
.contact-info{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
@media(min-width:1024px){.contact-info{flex:1;align-items:flex-start;text-align:right;position:sticky;top:120px}}
.contact-header{text-align:center;align-items:center}
@media(min-width:1024px){.contact-header{text-align:right;align-items:flex-start}}
@media(min-width:1024px){.contact-header .section-title{text-align:right}}
.contact-checks{display:flex;flex-direction:column;gap:14px}
/* Mobile: shrink-to-fit + auto margins so the stack centers as one block,
with all icons aligned on the right edge (RTL). Desktop keeps the
original layout where the stack uses the column's full width. */
@media(max-width:1023px){.contact-checks{width:fit-content;margin-inline:auto}}
.contact-check{display:flex;align-items:center;gap:12px;justify-content:flex-start}
.contact-check-icon{width:24px;height:24px;border-radius:50%;background:rgba(228,147,93,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-check-icon svg{width:14px;height:14px;color:var(--gold)}
.contact-check span{font-weight:400;color:rgba(255,255,255,.9);font-size:clamp(14px,1.3vw,16px)}
.form-card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);backdrop-filter:blur(12px);box-shadow:none;width:100%;max-width:560px}
.form-card[hidden]{display:none}
.form-card button[type=submit]{margin-top:var(--space-3)}
@media(min-width:1024px){.form-card{padding:var(--space-6);flex:1;max-width:520px}}
.form-row{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:560px){.form-row{grid-template-columns:1fr 1fr}}
@media(min-width:720px){.form-row:has(>.form-field:nth-child(3)){grid-template-columns:1fr 1fr 1fr}}
.form-row .form-field{margin-top:0}
.form-field{position:relative;margin-top:12px}
.form-field:first-child{margin-top:0}
.form-field input,.form-field textarea{width:100%;padding:20px var(--space-4) var(--space-2);background:rgba(255,255,255,.08);border:1px solid var(--border-interactive);border-radius:var(--radius-md);color:var(--text-on-dark);font-family:var(--font);font-size:var(--text-sm);outline:none;transition:all var(--duration-fast)}
.form-field input::placeholder,.form-field textarea::placeholder{color:transparent}
.form-field input:hover,.form-field textarea:hover{background:rgba(255,255,255,.11)}
.form-field input:focus,.form-field textarea:focus{border-color:rgba(228,147,93,.5);box-shadow:0 0 0 3px rgba(228,147,93,.12)}
/* RTL: label anchored to inline-start (right) */
.form-field label{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);font-size:14px;color:rgba(255,255,255,.55);pointer-events:none;transition:all .2s}
.form-field textarea~label{top:20px;transform:none}
.form-field input:focus~label,.form-field input:not(:placeholder-shown)~label{top:8px;transform:none;font-size:11px;color:rgba(228,147,93,.75)}
.form-field textarea:focus~label,.form-field textarea:not(:placeholder-shown)~label{top:6px;font-size:11px;color:rgba(228,147,93,.75)}
.form-field textarea{resize:none;min-height:80px}
.form-note{font-weight:400;color:rgba(255,255,255,.5);font-size:12px;text-align:center;margin-top:8px}
/* ═══════════════════════════════════════════
10. FOOTER
═══════════════════════════════════════════ */
.footer{background:var(--bg-primary);padding:48px 0 24px}
@media(min-width:1024px){.footer{padding:64px 0 32px}}
.footer-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:40px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;text-align:center}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr);text-align:right}}
.footer-col{display:flex;flex-direction:column;align-items:center;gap:16px}
@media(min-width:768px){.footer-col{align-items:flex-start}}
.footer-col-title{font-weight:600;color:var(--text-on-dark);font-size:13px}
.footer-brand-text{font-weight:400;color:rgba(255,255,255,.6);font-size:14px}
/* RTL: border on inline-start (right) */
.footer-links{display:flex;flex-direction:column;gap:10px;border-inline-start:2px solid rgba(228,147,93,.4);padding-inline-start:16px}
@media(max-width:767px){.footer-links{border:none;padding:0;align-items:center}}
.footer-links a{font-weight:400;color:rgba(255,255,255,.65);font-size:14px;transition:color .2s}
.footer-links a:hover{color:var(--text-on-dark)}
.footer-contact-item{display:flex;align-items:center;gap:8px;justify-content:center}
@media(min-width:768px){.footer-contact-item{justify-content:flex-start}}
.footer-contact-item svg{width:14px;height:14px;color:rgba(255,255,255,.5);flex-shrink:0}
.footer-contact-item span,.footer-contact-item a{font-weight:400;color:rgba(255,255,255,.75);font-size:14px}
.footer-contact-item a:hover{color:var(--text-on-dark)}
.footer-address{font-weight:400;color:rgba(255,255,255,.55);font-size:12px;line-height:1.6;max-width:280px}
.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom p{font-weight:400;color:rgba(255,255,255,.4);font-size:11px;text-align:center}
/* ═══════════════════════════════════════════
11. WHATSAPP FAB
═══════════════════════════════════════════ */
/* RTL: FAB on physical left (standard for Saudi sites) */
.wa-fab{position:fixed;bottom:24px;right:24px;left:auto;z-index:60;display:flex;align-items:center;background:var(--purple);border-radius:var(--radius-full);box-shadow:0 4px 24px rgba(70,22,66,.45);overflow:hidden;transition:all .3s;opacity:0;transform:translateY(60px);direction:ltr}
.wa-fab.show{opacity:1;transform:translateY(0)}
.wa-fab::before{content:'';position:absolute;inset:0;border-radius:var(--radius-full);background:var(--purple-light);animation:waPulse 2.8s infinite ease-in-out;pointer-events:none}
@keyframes waPulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.5);opacity:0}}
.wa-fab-icon{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-fab-icon svg{width:24px;height:24px;color:var(--text-on-dark)}
/* RTL: text expands to the right of icon in LTR container */
.wa-fab-text{max-width:0;overflow:hidden;white-space:nowrap;font-weight:500;color:var(--text-on-dark);font-size:14px;padding-right:0;transition:max-width .6s cubic-bezier(.4,0,.2,1),padding .6s;direction:rtl}
.wa-fab:hover .wa-fab-text{max-width:200px;padding-right:20px;transition:max-width .4s cubic-bezier(.4,0,.2,1),padding .4s}
.wa-fab:not(:hover) .wa-fab-text{transition-delay:1.5s}
/* ═══════ VIDEO/TRACKING HERO SECTION ═══════ */
@keyframes vid-pulse-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.4);opacity:0}}
@media(min-width:1024px){.vid-play-float{width:110px;height:110px}}
@media(min-width:1024px){.vid-play-float svg{width:40px;height:40px}}
/* ═══════ PROMISE ENHANCEMENTS ═══════ */
/* ═══ Cert Strip (merged into Promises) ═══ */
/* Removed: legacy .warranty-compact-* block (replaced by .warranty-section below)
and .warranty-seal-col (mobile design moved the seal into .warranty-mobile-visual). */
/* ═══════ WARRANTY SECTION (stamp card) ═══════ */
.warranty-section{padding:60px 16px;background:var(--white)}
@media(min-width:1024px){.warranty-section{padding:80px 24px}}
.warranty-card{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:0;padding:0;border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(255,255,255,.035) 0%,rgba(212,136,74,.045) 100%);border:1px solid rgba(212,136,74,.18);box-shadow:0 20px 50px -20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden}
.warranty-card::before{content:'';position:absolute;inset:-1px;background:radial-gradient(circle at 0% 50%,rgba(212,136,74,.1) 0%,transparent 40%);pointer-events:none;z-index:1}
@media(min-width:768px){.warranty-card{grid-template-columns:3.2fr 1.8fr;align-items:stretch}}
.warranty-side{display:none}
/* Mobile-only warranty visual: full-bleed video at top of card */
.warranty-mobile-visual{display:block;position:relative;z-index:2;margin:0;padding:0}
.warranty-mobile-seal{display:none}
.warranty-mobile-vid{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:rgba(0,0,0,.3);border-radius:0}
@media(min-width:768px){.warranty-mobile-visual{display:none}}
@media(min-width:768px){.warranty-side{display:block;position:relative;z-index:2;overflow:hidden;align-self:stretch;background:rgba(255,255,255,.04);border-inline-start:1px solid rgba(212,136,74,.2);border-top-right-radius:0;border-bottom-right-radius:0;cursor:pointer}}
.warranty-side-img,.warranty-side-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-top-right-radius:0;border-bottom-right-radius:0}
.warranty-side-vid{opacity:0;transition:opacity .5s ease}
.warranty-side-vid--visible{opacity:1}
.warranty-side.playing .warranty-side-vid{opacity:1}
/* -- Stamp / Seal -- */
.warranty-seal{position:relative;width:clamp(140px,18vw,180px);aspect-ratio:1;flex-shrink:0;transform:rotate(-6deg);transition:transform .6s var(--ease-out);filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(212,136,74,.15))}
.warranty-card:hover .warranty-seal{transform:rotate(-3deg) scale(1.02)}
.warranty-seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:warrantySpin 28s linear infinite}
@keyframes warrantySpin{to{transform:rotate(360deg)}}
.warranty-seal-text{fill:url(#sealGold);text-transform:uppercase}
.warranty-seal-text--top{letter-spacing:3.2px}
.warranty-seal-text--bot{letter-spacing:4px}
.warranty-seal-core{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(212,136,74,.22) 0%,rgba(212,136,74,.08) 55%,rgba(14,4,13,.6) 100%);border:1.5px solid rgba(212,136,74,.5);box-shadow:inset 0 2px 12px rgba(212,136,74,.2),inset 0 -2px 10px rgba(0,0,0,.35)}
.warranty-seal-num{font-size:clamp(32px,4.5vw,44px);font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 8px rgba(212,136,74,.35)}
.warranty-seal-unit{font-size:11px;font-weight:700;color:var(--gold-bright);letter-spacing:0;margin-top:1px}
.warranty-seal-hairline{width:22px;height:1px;background:linear-gradient(90deg,rgba(212,136,74,0),rgba(212,136,74,.7),rgba(212,136,74,0));margin:5px 0}
.warranty-seal-tag{font-size:8.5px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:0}
.warranty-seal-sparkle{position:absolute;color:var(--gold-warm);font-size:9px;opacity:.65}
.warranty-seal-sparkle--l{top:50%;inset-inline-start:5px;transform:translateY(-50%)}
.warranty-seal-sparkle--r{top:50%;inset-inline-end:5px;transform:translateY(-50%)}
/* -- Copy -- */
.warranty-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;min-width:0;padding:24px 20px;justify-content:center}
@media(min-width:768px){.warranty-copy{align-items:flex-start;text-align:start;padding:28px 32px}}
.warranty-copy-eyebrow{display:inline-block;font-size:11px;font-weight:600;color:var(--gold);padding:5px 12px;border:1px solid rgba(212,136,74,.35);border-radius:var(--radius-full);background:rgba(212,136,74,.06)}
.warranty-copy-title{font-size:clamp(20px,2.8vw,28px);font-weight:700;color:var(--text-on-dark);margin:0;line-height:1.25;letter-spacing:0}
.warranty-copy-body{font-size:14px;line-height:1.75;color:rgba(255,255,255,.72);margin:0;max-width:56ch}
@media (prefers-reduced-motion: reduce){.warranty-seal-ring{animation:none}}
/* ═══════ CATALOG / COMPANY PROFILE SECTION ═══════ */
.catalog-section{padding:80px 16px;background:var(--white);position:relative;overflow:hidden}
.catalog-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(212,136,74,.08) 0%,transparent 55%);pointer-events:none}
.catalog-inner{max-width:var(--content-max);margin:0 auto;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px}
.catalog-inner--split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;text-align:start}
@media(min-width:960px){.catalog-inner--split{grid-template-columns:1fr 1fr;gap:56px}}
.catalog-body{display:flex;flex-direction:column;gap:28px;text-align:start;align-items:flex-start}
@media(max-width:959px){.catalog-body{text-align:center;align-items:center}.catalog-head{align-items:center}}
.catalog-head{display:flex;flex-direction:column;gap:12px}
.catalog-bignum{display:flex;align-items:baseline;gap:10px;margin:8px 0 4px;line-height:1}
.catalog-bignum-value{font-size:clamp(56px,8vw,96px);font-weight:800;color:var(--gold);letter-spacing:-3px;line-height:.9;background:linear-gradient(180deg,var(--gold) 0%,rgba(212,136,74,.55) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 80px rgba(212,136,74,.25)}
.catalog-bignum-label{font-size:clamp(18px,2.5vw,24px);font-weight:500;color:rgba(255,255,255,.55)}
.catalog-desc{font-size:15px;line-height:1.8;color:rgba(255,255,255,.6);margin:0}
.catalog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
@media(max-width:560px){.catalog-cards{grid-template-columns:1fr}}
.catalog-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px;border-radius:var(--radius-lg);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:all .35s var(--ease-out)}
.catalog-card:hover{border-color:rgba(212,136,74,.25);background:rgba(255,255,255,.05);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.catalog-card svg{width:26px;height:26px;color:var(--gold);flex-shrink:0}
.catalog-card-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.88);line-height:1.4}
.catalog-cta{margin-top:4px}
/* — Catalog cover mockup — */
.catalog-visual{display:flex;align-items:center;justify-content:center;width:100%;perspective:1600px}
.catalog-cover-link{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none;color:inherit;cursor:pointer;border-radius:10px;outline-offset:4px}
.catalog-cover-link:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.catalog-cover{position:relative;width:100%;max-width:340px;aspect-ratio:5/7;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#1c0f1a 0%,#140910 55%,#0b050a 100%);padding:36px 30px 28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px -20px rgba(0,0,0,.75),0 14px 30px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(212,136,74,.16);transform:rotateY(-7deg) rotateX(2deg);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.catalog-cover:hover{transform:rotateY(-2deg) rotateX(0) translateY(-4px);box-shadow:0 44px 80px -22px rgba(0,0,0,.85),0 22px 44px -14px rgba(212,136,74,.18),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(212,136,74,.32)}
.catalog-cover-pattern{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");background-size:88px 100px;opacity:.55;pointer-events:none;mix-blend-mode:screen}
.catalog-cover-spine{position:absolute;top:0;bottom:0;inset-inline-start:0;width:8px;background:linear-gradient(180deg,rgba(212,136,74,0) 0%,rgba(212,136,74,.7) 18%,rgba(212,136,74,.9) 50%,rgba(212,136,74,.7) 82%,rgba(212,136,74,0) 100%);box-shadow:2px 0 12px rgba(212,136,74,.35);pointer-events:none}
.catalog-cover-shine{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 0%,rgba(212,136,74,.18) 0%,rgba(212,136,74,0) 55%),radial-gradient(ellipse at 20% 100%,rgba(212,136,74,.08) 0%,rgba(212,136,74,0) 50%);pointer-events:none}
.catalog-cover-top{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.catalog-cover-logo{width:auto;height:42px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.catalog-cover-eyebrow{font-size:11px;font-weight:600;color:var(--gold);letter-spacing:0;padding:5px 12px;border:1px solid rgba(212,136,74,.4);border-radius:2px;background:rgba(212,136,74,.05)}
.catalog-cover-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 4px}
.catalog-cover-title{font-size:clamp(30px,3.6vw,40px);font-weight:700;color:var(--text-on-dark);margin:0;line-height:1.15;letter-spacing:0;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.catalog-cover-divider{width:48px;height:2px;background:linear-gradient(90deg,rgba(212,136,74,0),var(--gold) 50%,rgba(212,136,74,0));border-radius:2px}
.catalog-cover-sub{font-size:clamp(14px,1.6vw,17px);font-weight:500;color:rgba(255,255,255,.78);margin:0;letter-spacing:0}
.catalog-cover-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid rgba(212,136,74,.18)}
.catalog-cover-edition{font-size:11px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:0}
.catalog-cover-year{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:2.5px;direction:ltr}
/* ═══════ SERVICE / MAINTENANCE CTA ═══════ */
.service-cta{padding:60px 16px;background:var(--white)}
@media(min-width:1024px){.service-cta{padding:80px 24px}}
.service-cta-inner{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:768px){.service-cta-inner{grid-template-columns:1fr 1fr;gap:48px}}
.service-cta-media{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:1/1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
@media(min-width:768px){.service-cta-media{aspect-ratio:4/3}}
.service-cta-media img{width:100%;height:100%;object-fit:cover;display:block}
.service-cta-content{display:flex;flex-direction:column;gap:16px;text-align:start}
.service-cta-content .section-eyebrow{text-align:start;margin-bottom:0}
.service-cta-content .section-title{text-align:start;margin:0}
.service-cta-desc{color:rgba(255,255,255,.65);font-size:15px;line-height:1.7;margin:0}
.service-cta-content .btn-group{margin-top:8px}
@media(max-width:767px){.service-cta-content{text-align:center;align-items:center}.service-cta-content .section-eyebrow,.service-cta-content .section-title{text-align:center}}
/* ═══════ MATERIALS/TECH SECTION ═══════ */
.materials{position:relative;background:var(--white);padding:80px 0;overflow:hidden}
.materials::before{content:'';position:absolute;top:10%;right:-15%;width:400px;height:400px;background:radial-gradient(circle,rgba(212,136,74,.06) 0%,transparent 70%);pointer-events:none}
.materials::after{content:'';position:absolute;bottom:5%;left:-10%;width:350px;height:350px;background:radial-gradient(circle,rgba(70,22,66,.08) 0%,transparent 70%);pointer-events:none}
@media(min-width:1024px){.materials{padding:100px 0}}
.materials-inner{position:relative;z-index:2;max-width:var(--content-max);margin:0 auto}
/* ── Cladding Color Showcase ── */
.cladding-colors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;width:100%}
@media(min-width:768px){.cladding-colors{grid-template-columns:repeat(4,1fr);gap:20px}}
.cladding-color-card{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:all .4s var(--ease-out);cursor:pointer;backdrop-filter:blur(8px)}
.cladding-color-card:hover{border-color:rgba(212,136,74,.2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.cladding-color-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1a1018;display:flex;align-items:center;justify-content:center;cursor:zoom-in;touch-action:pan-y;-webkit-user-select:none;user-select:none}
@media(max-width:767px){.cladding-color-img{aspect-ratio:4/5}}
.cladding-color-img .cladding-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.08) contrast(1.08) saturate(0.95);transition:transform .5s var(--ease-out),filter .4s,opacity .4s var(--ease-out);opacity:0;pointer-events:none}
.cladding-color-img .cladding-slide.is-active{opacity:1;pointer-events:auto}
.cladding-color-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,60,120,.07) 0%,transparent 40%,rgba(0,0,0,.1) 100%);mix-blend-mode:color;pointer-events:none;border-radius:inherit}
.cladding-color-card:hover .cladding-color-img .cladding-slide.is-active{transform:scale(1.04);filter:brightness(1.12) contrast(1.10) saturate(0.95)}
.cladding-zoom-hint{position:absolute;top:10px;inset-inline-end:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.55);color:var(--text-on-dark);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease-out);pointer-events:none;z-index:2}
.cladding-color-card:hover .cladding-zoom-hint{opacity:1}
.cladding-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-full);background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3}
.cladding-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s var(--ease-out);position:relative}
/* Invisible 44x44 tap area for WCAG 2.5.5 (target size). The visible
dot is 8x8; this extends the clickable area to ~44x44 without
changing the visual. */
.cladding-dot::before{content:'';position:absolute;inset:-18px;border-radius:50%}
.cladding-dot:hover{background:rgba(212,136,74,.7);transform:scale(1.2)}
.cladding-dot.is-active{background:var(--gold);width:22px;border-radius:4px}
.cladding-dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cladding-color-info{padding:16px;text-align:center;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.03)}
.cladding-color-name{font-weight:600;font-size:15px;color:var(--text-on-dark)}
.cladding-color-eng{font-size:12px;color:var(--gold);font-weight:500;text-transform:uppercase}
.mat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:48px;background:rgba(255,255,255,.06);border-radius:var(--radius-xl);overflow:hidden}
@media(min-width:768px){.mat-grid{grid-template-columns:repeat(3,1fr)}}
.mat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 20px;background:var(--white);transition:background var(--duration-normal) var(--ease-out)}
.mat-item:hover{background:rgba(255,255,255,.04)}
.mat-stat{font-weight:800;color:var(--gold);font-size:clamp(28px,4vw,38px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px;direction:ltr}
.mat-label{font-weight:600;color:var(--text-on-dark);font-size:15px}
.mat-desc{font-weight:400;color:rgba(255,255,255,.45);font-size:13px;line-height:1.6;max-width:200px}
/* ═══════ CERTIFICATES / TRUST SECTION ═══════ */
@media(min-width:1024px){.certificates{padding:100px 0}}
.cert-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:56px;position:relative;z-index:2}
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%}
@media(min-width:768px){.cert-grid{grid-template-columns:repeat(4,1fr);gap:28px}}
/* ── Cert Logos Grid (like partners) ── */
.cert-logos-grid{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:0}
@media(min-width:600px){.cert-logos-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.cert-logos-grid{grid-template-columns:repeat(6,1fr)}}
.cert-logo-cell{display:flex;align-items:center;justify-content:center;padding:24px 16px;border-bottom:1px solid rgba(255,255,255,.06);border-inline-start:1px solid rgba(255,255,255,.06);transition:background .3s}
.cert-logo-cell:hover{background:rgba(255,255,255,.03)}
.cert-logo-cell:nth-child(3n+1){border-inline-start:none}
@media(min-width:600px){.cert-logo-cell:nth-child(3n+1){border-inline-start:1px solid rgba(255,255,255,.06)}.cert-logo-cell:nth-child(4n+1){border-inline-start:none}}
@media(min-width:900px){.cert-logo-cell:nth-child(4n+1){border-inline-start:1px solid rgba(255,255,255,.06)}.cert-logo-cell:nth-child(6n+1){border-inline-start:none}}
.cert-logo{height:46px;width:auto;max-width:90%;object-fit:contain;opacity:.7;background:var(--text-on-dark);border-radius:var(--radius-sm);padding:6px;transition:opacity .4s,transform .3s}
@media(min-width:768px){.cert-logo{height:52px}}
@media(min-width:1024px){.cert-logo{height:58px}}
.cert-logo:hover{opacity:1;transform:scale(1.1)}
/* Legora-inspired: tall cards, text top, icon bottom */
.certs-section{background:var(--bg-dark);padding:64px 0;position:relative;overflow:hidden}
@media(min-width:1024px){.certs-section{padding:80px 0}}
.certs-section .section-title{text-align:center;margin:0 auto}
.cert-card{background:var(--bg-elevated);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:32px 24px 28px;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;transition:all var(--duration-slow) var(--ease-bounce);position:relative;overflow:hidden;backdrop-filter:blur(8px)}
@media(min-width:768px){.cert-card{min-height:320px}}
.cert-card:hover{border-color:rgba(255,255,255,.12);transform:translateY(-1px);box-shadow:var(--shadow-md);background:rgba(255,255,255,.05)}
/* Removed: .cert-card-top/bottom, .cert-icon, .cert-name, .cert-org,
.cert-badge - replaced by the simpler .cert-logo-cell layout used now. */
/* ═══════ REALITY SECTION (dual video + CTA) ═══════ */
.reality-section{background:var(--white);padding:80px 0;overflow:hidden}
@media(min-width:1024px){.reality-section{padding:100px 0}}
.reality-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:32px;align-items:center;text-align:center}
@media(min-width:1024px){.reality-inner{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr auto auto 1fr;gap:24px 56px;text-align:right}.reality-text{grid-column:2;grid-row:2}.reality-cta-wrap{grid-column:2;grid-row:3;justify-self:start}.reality-videos{grid-column:1;grid-row:1/5}}
.reality-cta-wrap{display:flex;justify-content:center}
@media(min-width:1024px){.reality-cta-wrap{justify-content:flex-start}}
/* Videos grid */
.reality-videos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:768px){.reality-videos{gap:20px}}
.reality-video-card{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--black-pure);aspect-ratio:9/16}
.reality-video-card video{width:100%;height:100%;object-fit:cover;display:block}
.reality-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(70,22,66,.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;border:1.5px solid rgba(255,255,255,.2)}
.reality-video-play:hover{background:var(--purple);transform:translate(-50%,-50%) scale(1.1)}
.reality-video-play svg{width:22px;height:22px;margin-right:-2px}
/* Stagger: second video lower */
.reality-video-second{margin-top:40px}
@media(min-width:768px){.reality-video-second{margin-top:60px}}
/* Text side */
.reality-text{display:flex;flex-direction:column;gap:20px}
@media(min-width:1024px){.reality-text{padding-right:16px}}
.reality-text .section-title{text-align:right}
.reality-desc{font-weight:400;color:var(--text-sub);font-size:var(--text-base);line-height:1.8;text-align:right}
/* ═══════ GOOGLE REVIEW LINK ═══════ */
/* ═══════ SCROLL TO TOP ═══════ */
.scroll-top{position:fixed;bottom:24px;left:24px;right:auto;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;z-index:900;opacity:0;transform:translateY(20px);transition:all var(--duration-normal) var(--ease-out);cursor:pointer;border:1px solid rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(8px)}
.scroll-top.show{opacity:1;transform:translateY(0)}
.scroll-top:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);transform:translateY(-1px)}
.scroll-top svg{width:22px;height:22px}
/* ═══════ MAPS / BRANCHES SECTION ═══════ */
.maps-section{background:var(--white);padding:80px 0;position:relative;overflow:hidden}
@media(min-width:1024px){.maps-section{padding:100px 0}}
.maps-header{text-align:center;margin-bottom:40px}
.maps-header .section-eyebrow{margin-bottom:8px}
.maps-header .section-subtitle{margin-top:8px}
.maps-title{color:var(--text-on-dark)}
.branches-grid{max-width:var(--content-max);margin:0 auto}
.branch-pair{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
.branch-pair .branch-info-card{order:1}
.branch-pair .branch-map-card{order:2}
@media(min-width:900px){.branch-pair{grid-template-columns:1.25fr 1fr;gap:20px}.branch-pair .branch-map-card{order:1}.branch-pair .branch-info-card{order:2}}
.branch-map-card,.branch-info-card{background:var(--bg-elevated);border:1px solid rgba(237,172,110,.3);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}
.branch-map-card{min-height:260px;display:flex}
.branch-map-card iframe{display:block;width:100%;height:100%;min-height:260px;border:0}
.branch-info-card{padding:24px 22px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
@media(min-width:900px){.branch-info-card{padding:28px 26px}.branch-map-card,.branch-map-card iframe{min-height:320px}}
.branch-identity{display:flex;flex-direction:column;gap:6px}
.branch-pair:hover .branch-map-card,.branch-pair:hover .branch-info-card{border-color:var(--gold)}
.branch-badge{display:inline-block;width:fit-content;padding:4px 12px;background:rgba(237,172,110,.12);color:var(--gold);font-size:11px;font-weight:600;border-radius:var(--radius-full)}
.branch-city{font-size:20px;font-weight:700;color:var(--text-main);margin:0}
.branch-address{font-size:13px;color:var(--text-sub);line-height:1.6;margin:0}
.branch-info-card .btn-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
/* Coming Soon - compact inline */
.branches-coming{text-align:center;margin-top:32px;max-width:var(--content-max);margin-left:auto;margin-right:auto}
.branches-coming-label{display:block;font-size:13px;color:var(--text-sub);margin-bottom:14px;font-weight:500}
.branches-coming-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.branches-coming-city{padding:6px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full);font-size:13px;color:rgba(255,255,255,.4);font-weight:500}
/* ═══════════════════════════════════════════
ANIMATION LAYER - Motion Design System
═══════════════════════════════════════════ */
/* ── 1. Hero Gold Text Shimmer (signature moment) ── */
.hero-title .line2{position:relative;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-shimmer) 40%,var(--gold) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:heroFadeUp .7s .5s cubic-bezier(.22,1,.36,1) forwards,goldShimmer 4s 2s ease-in-out infinite;padding-bottom:.15em}
@keyframes goldShimmer{0%{background-position:100% 0}50%{background-position:-100% 0}100%{background-position:100% 0}}
/* ── 3. Nav Scroll Shrink ── */
.nav{transition:top .3s ease,background .3s,padding .3s,box-shadow .3s}
.nav.scrolled{background:rgba(14,4,13,.88);box-shadow:0 4px 24px rgba(0,0,0,.3);backdrop-filter:blur(32px) saturate(1.4);-webkit-backdrop-filter:blur(32px) saturate(1.4)}
.nav.scrolled .nav-logo img{height:38px;transition:height .3s var(--ease-out)}
@media(min-width:1024px){.nav.scrolled .nav-logo img{height:44px}}
/* ── 4. Enhanced Card Hover - Glow Border ── */
.process-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,transparent 30%,rgba(212,136,74,.12) 50%,transparent 70%);opacity:0;transition:opacity .5s var(--ease-out);z-index:-1;pointer-events:none}
.process-card:hover::before{opacity:1}
.cladding-color-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,transparent 30%,rgba(212,136,74,.1) 50%,transparent 70%);opacity:0;transition:opacity .5s var(--ease-out);z-index:0;pointer-events:none}
.cladding-color-card:hover::before{opacity:1}
/* ── 5. Stats Counter Entrance ── */
.stats-v2-card{transition:all .3s,opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.stats-v2-num{display:inline-block;transition:transform .3s var(--ease-out)}
.stats-v2-card:hover .stats-v2-num{transform:scale(1.03)}
/* ── 6. Gallery Item Stagger on Reveal ── */
.kitchen-item{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.kitchen-item.kitchen-visible{opacity:1;transform:translateY(0)}
.kitchen-item:nth-child(1){transition-delay:0s}
.kitchen-item:nth-child(2){transition-delay:.06s}
.kitchen-item:nth-child(3){transition-delay:.12s}
.kitchen-item:nth-child(4){transition-delay:.18s}
.kitchen-item:nth-child(5){transition-delay:.24s}
.kitchen-item:nth-child(6){transition-delay:.3s}
.kitchen-item:nth-child(7){transition-delay:.36s}
.kitchen-item:nth-child(8){transition-delay:.42s}
/* ── 7. Lightbox Cinematic Open ── */
.lightbox{transition:opacity .35s cubic-bezier(.22,1,.36,1),backdrop-filter .4s}
.lightbox img{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s}
.lightbox:not(.active) img{transform:scale(.85);opacity:0}
.lightbox.active img{transform:scale(1);opacity:1}
.lightbox-close{transition:all .25s var(--ease-out);opacity:0;transform:rotate(-90deg) scale(.8)}
.lightbox.active .lightbox-close{opacity:1;transform:rotate(0) scale(1);transition-delay:.2s}
.lightbox-close:hover{background:rgba(255,255,255,.15);transform:rotate(0)}
/* ── 8. Primary button glow pulse (ambient) ── */
.btn--primary{position:relative;overflow:visible}
.btn--primary::after{content:'';position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,var(--gold),var(--gold-dark));opacity:0;z-index:-1;filter:blur(12px);transition:opacity .4s var(--ease-out)}
.btn--primary:hover::after{opacity:.25}
.btn--primary:disabled::after,.btn--primary[aria-disabled="true"]::after{display:none}
/* ── 9. Section Title Underline Draw ── */
.section-header .section-title,.kitchens-header .section-title,.testimonials-header .section-title,.maps-header .section-title{position:relative;display:inline-block}
.section-header .section-title::after,.kitchens-header .section-title::after,.testimonials-header .section-title::after,.maps-header .section-title::after{content:'';position:absolute;bottom:-.12em;left:50%;transform:translateX(-50%);width:0;height:2px;background:linear-gradient(90deg,rgba(212,136,74,.1),var(--gold),rgba(212,136,74,.1));border-radius:2px;transition:width .8s cubic-bezier(.22,1,.36,1)}
.in-view .section-title::after{width:48px}
/* ── 11. Material Stats Hover ── */
.mat-stat{transition:transform .3s var(--ease-out),color .3s}
.mat-item:hover .mat-stat{transform:scale(1.03)}
/* ── 12. Social Button Hover Lift ── */
.footer-social a{transition:all .3s var(--ease-out)}
.footer-social a:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
/* ── 13. Branch Card Entrance ── */
.branch-pair{transition:all .4s var(--ease-out)}
.branch-pair:hover .branch-map-card,.branch-pair:hover .branch-info-card{box-shadow:0 8px 20px rgba(0,0,0,.15)}
/* ── 14. Cert Logo Hover ── */
.cert-logo{transition:opacity .4s,transform .4s var(--ease-out),filter .4s}
.cert-logo:hover{opacity:1;transform:scale(1.05);filter:none}
/* ── 15. Scroll-to-Top Hover Rotate ── */
.scroll-top{transition:all .3s var(--ease-out)}
.scroll-top:hover{transform:translateY(-1px);background:rgba(255,255,255,.14);box-shadow:none}
.scroll-top:hover svg{animation:none}
/* ── 16. Testimonial Card Hover Lift ── */
.test-card{transition:border-color .3s var(--ease-out),box-shadow .3s,transform .3s var(--ease-out)}
.test-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.15);border-color:rgba(255,255,255,.12)}
/* ── 17. WhatsApp FAB Entrance ── */
.wa-fab{transition:all .4s cubic-bezier(.22,1,.36,1)}
.wa-fab.show{animation:fabBounceIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes fabBounceIn{0%{opacity:0;transform:translateY(40px) scale(.8)}60%{transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
[data-animate]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
.marquee-track,.partners-grid,.test-marquee-row{animation:none!important}
.wa-fab::before,.wa-fab.show{animation:none!important}
.live-chip,.live-chip-dot,.live-dot,.pulse-dot::after{animation:none!important}
.hero-title .line2{animation:none!important;background-size:100% 100%!important}
.kitchen-item{opacity:1!important;transform:none!important;transition:none!important}
.hero-chips{opacity:1!important}
.section-title::after{width:60%!important;transition:none!important}
}
/* ═══════════════════════════════════════════
ACTIVE NAV LINK
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
7.95 LIVE INSTALLATIONS
═══════════════════════════════════════════ */
.live-install{padding:80px 0;background:var(--white)}
@media(min-width:1024px){.live-install{padding:100px 0}}
.live-install-inner{max-width:var(--content-max);margin:0 auto}
.live-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(220,38,38,.1);color:var(--red-live);font-size:13px;font-weight:600;padding:6px 16px;border-radius:100px;margin-bottom:16px;border:1px solid rgba(220,38,38,.15)}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.live-hero{margin-top:32px}
.live-hero-visual{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:16/9}
.live-hero-visual img{width:100%;height:100%;object-fit:cover}
.video-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(14,4,13,.6);z-index:1}
.video-loader-spin{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:vSpin .7s linear infinite}
@keyframes vSpin{to{transform:rotate(360deg)}}
.video-loader[hidden]{display:none}
/* ═══════ FACTORY INTRO SECTION ═══════ */
.factory-intro{background:var(--bg-primary);padding:72px 0}
@media(min-width:1024px){.factory-intro{padding:100px 0}}
.factory-intro-inner{max-width:var(--content-max);margin:0 auto}
.factory-intro-video{position:relative;margin-top:32px;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:16/9;box-shadow:0 20px 60px rgba(0,0,0,.4);background:#0a0308}
.factory-intro-video video{width:100%;height:100%;object-fit:cover;display:block}
.factory-intro-video .video-loader{background:rgba(10,3,8,.85)}
.live-chip{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-full);background:rgba(220,38,38,.85);backdrop-filter:blur(8px);color:var(--text-on-dark);font-weight:700;font-size:10px;z-index:2;animation:liveGlow 2s ease-in-out infinite}
.live-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--text-on-dark);animation:liveChipPulse 1.4s ease-in-out infinite}
@keyframes liveChipPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes liveGlow{0%,100%{box-shadow:0 0 12px rgba(220,38,38,.4)}50%{box-shadow:0 0 24px rgba(220,38,38,.7)}}
/* ═══════════════════════════════════════════
7.96 COMPLETED PROJECTS
═══════════════════════════════════════════ */
/* ═══════ KITCHENS GALLERY ═══════ */
.kitchens-gallery{padding:88px 0;background:var(--white);overflow:hidden}
@media(min-width:1024px){.kitchens-gallery{padding:112px 0}}
.kitchens-header{max-width:var(--content-max);margin:0 auto 40px;text-align:center}
.kitchen-item{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer}
.kitchen-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.kitchen-item:hover img{transform:scale(1.04)}
.kitchen-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(14,4,13,.3),transparent);pointer-events:none;opacity:0;transition:opacity .4s}
.kitchen-item:hover::after{opacity:1}
/* ═══════ KITCHEN LIGHTBOX ═══════ */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lightbox.active{opacity:1;pointer-events:all}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-md);transform:scale(.9);transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.lightbox.active img{transform:scale(1)}
.lightbox-close{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:var(--text-on-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:0;z-index:2}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-close svg{width:24px;height:24px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:var(--text-on-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:0;z-index:2;opacity:0}
.lightbox.active .lightbox-nav{opacity:1;transition-delay:.2s}
.lightbox-nav:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.05)}
.lightbox-nav[hidden]{display:none}
.lightbox-nav svg{width:24px;height:24px}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
html[dir="rtl"] .lightbox-prev,body[dir="rtl"] .lightbox-prev{left:auto;right:24px}
html[dir="rtl"] .lightbox-next,body[dir="rtl"] .lightbox-next{right:auto;left:24px}
@media(max-width:640px){.lightbox-nav{width:44px;height:44px}.lightbox-prev{left:12px}.lightbox-next{right:12px}html[dir="rtl"] .lightbox-prev,body[dir="rtl"] .lightbox-prev{right:12px;left:auto}html[dir="rtl"] .lightbox-next,body[dir="rtl"] .lightbox-next{left:12px;right:auto}}
.lightbox-dots{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:10px;padding:8px 14px;border-radius:var(--radius-full);background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2;opacity:0;transition:opacity .25s .2s}
.lightbox.active .lightbox-dots:not([hidden]){opacity:1}
.lightbox-dots[hidden]{display:none}
.lightbox-dots button{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s var(--ease-out)}
.lightbox-dots button.is-active{background:var(--gold);width:22px;border-radius:4px}
.lightbox-dots button:hover{background:rgba(212,136,74,.7)}
/* ═══════ FOOTER SOCIAL ICONS ═══════ */
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-social a{width:40px;height:40px;border-radius:var(--radius-md);background:rgba(255,255,255,.06);border:1px solid var(--border-interactive);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all var(--duration-normal) var(--ease-out);text-decoration:none}
.footer-social a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--text-on-dark);transform:translateY(-2px)}
.footer-social a svg{width:18px;height:18px}
/* ═══════════════════════════════════════════
MOBILE UX IMPROVEMENTS
═══════════════════════════════════════════ */
/* Announcement bar: smaller on mobile */
@media(max-width:767px){
.announce{height:36px}
.marquee-item{font-size:12px;gap:8px}
.marquee-track{gap:40px}
.nav{top:36px}
.hero{margin-top:36px;min-height:calc(100svh - 36px)}
}
/* Auto-hide announcement on scroll */
.announce.scrolled{transform:translateY(-100%);opacity:0;pointer-events:none}
/* Nav: more compact on mobile */
@media(max-width:767px){
.nav{padding:8px 16px}
.nav-logo img{height:40px}
}
/* WhatsApp FAB: safe area so it doesn't overlap footer content */
@media(max-width:767px){
.wa-fab{bottom:16px;right:16px}
.wa-fab-icon{width:48px;height:48px}
.wa-fab-icon svg{width:22px;height:22px}
.footer{padding-bottom:80px}
}
/* Form: better touch targets on mobile */
@media(max-width:767px){
.form-field input,.form-field textarea{padding:18px 14px 8px;font-size:16px}
.form-field label{font-size:13px}
.contact-inner{padding-block:64px}
}
/* Scroll-top: don't overlap WhatsApp FAB */
@media(max-width:767px){
.scroll-top{bottom:16px;left:16px;width:42px;height:42px}
.scroll-top svg{width:18px;height:18px}
}
/* Light mode removed */
/* ═══════ PULSE DOT (green availability) ═══════ */
.pulse-dot{width:10px;height:10px;background:var(--green-success);border-radius:50%;display:inline-block;position:relative;flex-shrink:0}
.pulse-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(34,197,94,.4);animation:pulse-ring 1.5s ease-out infinite}
@keyframes pulse-ring{0%{transform:scale(1);opacity:1}100%{transform:scale(2.2);opacity:0}}
/* ═══════ HERO WARRANTY BADGES ═══════ */
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0;align-items:stretch;opacity:0;animation:heroFadeUp .7s .75s cubic-bezier(.22,1,.36,1) forwards}
.hero-warranty{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:rgba(237,172,110,.1);border:1px solid rgba(237,172,110,.25);border-radius:var(--radius-full);color:var(--gold);font-size:13px;font-weight:400}
.hero-warranty svg{width:18px;height:18px;flex-shrink:0}
.hero-warranty strong{font-weight:700}
/* Hero trust chips - small & minimal */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;opacity:0;animation:heroFadeUp .7s .95s cubic-bezier(.22,1,.36,1) forwards}
.hero-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:rgba(14,4,13,.55);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-full);color:var(--text-on-dark);font-size:12px;font-weight:400;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[hidden]{display:none!important}
.hero-chip svg{color:var(--gold);stroke:var(--gold)}
/* Promise card (legacy - kept for rollback) */
.hero-promise-card{display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(99,179,165,.12);border:1px solid rgba(99,179,165,.3);border-radius:var(--radius-md);backdrop-filter:blur(8px)}
.hero-promise-icon svg{width:24px;height:24px;flex-shrink:0}
.hero-promise-text{display:flex;flex-direction:column;gap:1px}
.hero-promise-line1{font-size:13px;font-weight:600;color:var(--text-on-dark)}
.hero-promise-line2{font-size:11px;color:rgba(255,255,255,.5);font-weight:400}
/* Warranty seal badge (PNG) in warranty section */
.warranty-seal-badge{display:block;width:clamp(180px,22vw,240px);height:auto;transform:rotate(-6deg);transition:transform .55s var(--ease-out),filter .55s var(--ease-out);filter:drop-shadow(0 12px 28px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(212,136,74,.2))}
.warranty-card:hover .warranty-seal-badge{transform:rotate(-3deg) scale(1.03);filter:drop-shadow(0 16px 36px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(212,136,74,.32))}
/* ═══════ HERO CTA CALL STYLE ═══════ */
/* ═══════ KITCHENS BENTO GRID ═══════ */
.kitchens-grid-wrap{max-width:var(--content-max);margin:0 auto}
.kitchens-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:12px}
@media(min-width:600px){.kitchens-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:14px}}
@media(min-width:900px){.kitchens-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;gap:16px}}
/* Bento layout: alternating large/small cells */
.kitchen-item:nth-child(1){grid-column:span 1;grid-row:span 2}
.kitchen-item:nth-child(4){grid-column:span 1;grid-row:span 2}
@media(min-width:600px){
.kitchen-item:nth-child(1){grid-column:span 2;grid-row:span 2}
.kitchen-item:nth-child(4){grid-column:span 1;grid-row:span 1}
.kitchen-item:nth-child(7){grid-column:span 2;grid-row:span 1}
}
.kitchen-item--hidden{display:none}
.kitchens-cta-wrap{text-align:center;margin-top:32px;padding:0 24px}
/* ═══════ SKIP LINK (Accessibility) ═══════ */
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);padding:12px 24px;background:var(--gold);color:var(--text-on-dark);font-weight:600;font-size:14px;border-radius:0 0 var(--radius-md) var(--radius-md);z-index:100;transition:top .2s}
.skip-link:focus{top:0}
/* ═══════ FORM VALIDATION STATES ═══════ */
.form-field--error{border-color:rgba(239,68,68,.6)!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}
.form-error{display:block;font-size:12px;color:var(--red-error);margin-top:4px;min-height:0;transition:all .2s}
.form-success{display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);border-radius:var(--radius-md);color:var(--green-success);font-size:14px;font-weight:500;margin-top:12px;animation:fadeInUp .4s ease}
.form-success[hidden]{display:none}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ═════════════════════════════════════════════
CUSTOMER SERVICE PAGE (/ar/maintenance-request)
═════════════════════════════════════════════ */
.cs-hero{padding:120px var(--content-pad) 40px;text-align:center;background:linear-gradient(180deg,var(--purple-dark) 0%,var(--white) 100%)}
@media(min-width:1024px){.cs-hero{padding:160px var(--content-pad) 56px}}
.cs-hero-inner{margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center}
.cs-hero-title{font-size:var(--text-3xl)}
.cs-forms{padding:40px var(--content-pad) 80px;background:var(--white)}
@media(min-width:1024px){.cs-forms{padding:56px var(--content-pad) 120px}}
.cs-forms-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
/* ── Tabs ── */
.form-tabs{display:flex;gap:6px;padding:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full);flex-wrap:wrap;backdrop-filter:blur(8px)}
.form-tab{flex:1;min-width:90px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border:none;background:transparent;color:var(--text-sub);font-family:var(--font);font-size:13px;font-weight:500;border-radius:var(--radius-full);cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast);white-space:nowrap}
.form-tab svg{width:16px;height:16px;flex-shrink:0}
.form-tab:hover:not(.is-active){color:var(--text-on-dark)}
.form-tab.is-active{background:var(--purple);color:var(--text-on-dark)}
.form-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:540px){.form-tab{font-size:12px;padding:10px 8px;min-width:0}.form-tab svg{width:14px;height:14px}}
/* ── CS form cards ── */
.cs-form-card{max-width:100%}
.cs-form-head{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.cs-form-title{font-size:var(--text-lg);font-weight:600;color:var(--text-on-dark);margin:0}
.cs-form-note{font-size:12px;color:var(--text-muted);margin:0}
.cs-form{display:flex;flex-direction:column;gap:12px}
.cs-form .btn{margin-top:12px}
/* ── File upload field ── */
.file-field{position:relative;margin-top:12px}
.file-field input[type=file]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.file-field label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;background:rgba(255,255,255,.05);border:1.5px dashed rgba(255,255,255,.15);border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast);text-align:center}
.file-field label:hover{background:rgba(255,255,255,.08);border-color:rgba(228,147,93,.4)}
.file-field svg{width:24px;height:24px;stroke:var(--gold);flex-shrink:0}
.file-field-label{font-size:13px;font-weight:500;color:var(--text-on-dark);display:block}
.file-field-hint{font-size:11px;color:var(--text-muted);display:block}
.file-field-name{font-size:11px;color:var(--gold);word-break:break-all;display:none}
.file-field.has-file label{border-style:solid;border-color:rgba(228,147,93,.5);background:rgba(228,147,93,.06)}
.file-field.has-file .file-field-hint{display:none}
.file-field.has-file .file-field-name{display:block}
.file-field.has-error label{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.06)}
.file-field:focus-within label{border-color:rgba(228,147,93,.5);box-shadow:0 0 0 3px rgba(228,147,93,.12)}
/* ── File upload: progress bar ── */
.file-progress{display:none;width:100%;margin-top:6px;padding:0 4px}
.file-progress-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.file-progress-fill{height:100%;width:0;border-radius:2px;background:var(--gold);transition:width .2s ease}
.file-progress-text{font-size:10px;color:var(--text-muted);margin-top:3px;text-align:center}
.file-field.is-uploading .file-progress{display:block}
.file-field.is-uploading label{pointer-events:none;opacity:.7}
/* ── File upload: delete button ── */
.file-delete{display:none;position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:var(--red-error);cursor:pointer;align-items:center;justify-content:center;transition:background var(--duration-fast);z-index:2;padding:0}
/* Invisible 44x44 tap area extension for WCAG 2.5.5. The visible
button stays at 26x26; this just makes it easier to tap on mobile. */
.file-delete::before{content:'';position:absolute;inset:-9px;border-radius:50%}
.file-delete:hover{background:rgba(239,68,68,.25)}
.file-delete svg{width:14px;height:14px;stroke:currentColor;fill:none}
.file-field.has-file .file-delete{display:flex}
.file-field.is-uploading .file-delete{display:none}
/* ── Submit button loading spinner ── */
.btn .btn-spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--text-on-dark);border-radius:50%;animation:btnSpin .6s linear infinite}
.btn.is-loading .btn-spinner{display:inline-block}
.btn.is-loading svg:not(.btn-spinner){display:none}
@keyframes btnSpin{to{transform:rotate(360deg)}}
/* ── Success state ── */
.cs-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 24px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.25);border-radius:var(--radius-xl);backdrop-filter:blur(12px);animation:fadeInUp .5s ease}
.cs-success[hidden]{display:none}
.cs-success-icon{width:64px;height:64px;border-radius:50%;background:rgba(34,197,94,.15);border:1.5px solid rgba(34,197,94,.4);display:flex;align-items:center;justify-content:center;color:var(--green-success)}
.cs-success-icon svg{width:32px;height:32px}
.cs-success-title{font-size:var(--text-xl);font-weight:700;color:var(--text-on-dark);margin:0}
.cs-success-desc{font-size:var(--text-sm);color:var(--text-sub);line-height:1.7;margin:0;max-width:440px}
.cs-ticket{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 28px;background:rgba(237,172,110,.08);border:1px dashed rgba(237,172,110,.4);border-radius:var(--radius-md);margin:4px 0}
.cs-ticket-label{font-size:11px;color:var(--text-muted);letter-spacing:0}
.cs-ticket-number{font-size:18px;font-weight:700;color:var(--gold);font-family:'Courier New',monospace;letter-spacing:1px;direction:ltr}
.cs-success-note{font-size:12px;color:var(--text-muted);margin:0}
/* ── CS contact strip ── */
.cs-contact{padding:56px var(--content-pad);background:var(--purple-dark);border-top:1px solid rgba(255,255,255,.06)}
.cs-contact-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.cs-contact-grid{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:720px}
@media(min-width:640px){.cs-contact-grid{grid-template-columns:repeat(3,1fr)}}
.cs-contact-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);color:var(--text-on-dark);text-decoration:none;transition:background var(--duration-fast),border-color var(--duration-fast)}
.cs-contact-card:hover{background:rgba(255,255,255,.07);border-color:rgba(228,147,93,.3)}
.cs-contact-card svg{width:24px;height:24px;color:var(--gold);stroke:var(--gold)}
.cs-contact-label{font-size:12px;color:var(--text-muted)}
.cs-contact-value{font-size:14px;font-weight:500;color:var(--text-on-dark)}
/* ═══════ MAPS CTA BUTTON ═══════ */