/* ============================================================
   مؤسسة فرح — Farah Foundation — Luxury Wood & Aluminum
   ============================================================ */

:root{
  --navy:        #123c57;
  --navy-deep:   #081c2b;
  --navy-light:  #1f6488;
  --gold:        #c9a463;
  --gold-light:  #e7cf9c;
  --silver:      #c7ccd2;
  --wood:        #8a5a36;
  --wood-dark:   #4a2f1d;
  --cream:       #f6f1e7;
  --cream-deep:  #efe7d6;
  --paper:       #fbf9f4;
  --ink:         #14191d;
  --ink-soft:    #4b5560;

  --font-display: 'Cairo', sans-serif;
  --font-body:    'Tajawal', sans-serif;
  --font-hero:    'El Messiri', 'Cairo', serif;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:auto;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y;
  direction:rtl;
  line-height:1.7;
}

img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
input,textarea,select{ font-family:inherit; }

.container{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 6vw;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; color:var(--navy-deep); line-height:1.15; }

/* ---------- section scaffolding ---------- */
.section{ position:relative; padding:clamp(5rem,10vw,8rem) 0; }
.section--dark{ background:var(--navy-deep); color:var(--cream); }
.section--dark h2, .section--dark h3{ color:var(--paper); }
.section--cream{ background:var(--cream); }

.section-head{ max-width:680px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-tag{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:1rem;
}
.section-tag::before{ content:""; width:1.6em; height:1px; background:var(--gold); }
.section-head h2{ font-size:clamp(2.1rem,4.2vw,3.2rem); margin-bottom:.9rem; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; max-width:620px; }
.section--dark .section-head p{ color:#aebccb; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1rem 2.1rem; border-radius:3px; font-weight:700; font-size:.95rem;
  letter-spacing:.02em; transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy-deep); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 18px 32px -12px rgba(201,164,99,.55); }
.btn-outline{
  border:1px solid rgba(255,255,255,.55); color:#fff;
  background:rgba(4,14,22,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); background:rgba(4,14,22,.55); }
.btn-outline.dark{ border:1px solid rgba(8,28,43,.3); color:var(--navy-deep); }
.btn-outline.dark:hover{ border-color:var(--navy); background:var(--navy-deep); color:#fff; }
.btn svg{ width:18px; height:18px; }

/* ============================================================
   Loader
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:999; background:var(--navy-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{ width:84px; height:84px; opacity:.95; animation:loaderPulse 1.8s ease-in-out infinite; }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); opacity:.85;} 50%{ transform:scale(1.06); opacity:1;} }
.loader-brand{ font-family:var(--font-display); color:var(--paper); letter-spacing:.3em; font-size:.78rem; text-transform:uppercase; }
#loader-bar-track{ width:220px; height:2px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; }
#loader-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); transition:width .25s ease-out; }
#loader-percent{ font-size:.75rem; color:var(--silver); letter-spacing:.1em; }

/* ============================================================
   Header / Navbar
   ============================================================ */
.site-header{
  position:fixed; top:0; right:0; left:0; z-index:120;
  padding:1.4rem 0; transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
  background:linear-gradient(180deg, rgba(3,12,19,.65) 0%, rgba(3,12,19,.35) 60%, transparent 100%);
}
.site-header nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.site-header.is-scrolled{ background:rgba(8,28,43,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding:.85rem 0; box-shadow:0 12px 30px -16px rgba(0,0,0,.5); }

.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:46px; width:auto; transition:height .4s var(--ease); }
.site-header.is-scrolled .brand img{ height:38px; }
.brand-text{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.05rem; letter-spacing:.02em; }
.brand-text span{ display:block; font-family:var(--font-body); font-weight:400; font-size:.68rem; letter-spacing:.18em; color:var(--gold-light); margin-top:.15rem; }

.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  color:#e7ecf1; font-size:.92rem; font-weight:600; position:relative; padding:.3rem 0;
}
.nav-links a::after{
  content:""; position:absolute; right:0; bottom:-2px; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }
.nav-cta{
  background:var(--gold); color:var(--navy-deep); padding:.65rem 1.4rem; border-radius:2px; font-weight:700; font-size:.85rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 24px -10px rgba(201,164,99,.6); }

.hamburger{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; z-index:130; -webkit-tap-highlight-color:transparent;
}
.hamburger span{ width:26px; height:2px; background:#fff; border-radius:2px; transition:transform .35s var(--ease), opacity .35s var(--ease); }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:115; background:var(--navy-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ color:#fff; font-family:var(--font-display); font-size:1.6rem; font-weight:700; }
.mobile-menu .nav-cta{ margin-top:1rem; }

/* ============================================================
   Hero — cinematic zone
   ============================================================ */
.hero-standalone{
  position:relative; height:100svh; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:transparent;
  overflow:hidden; z-index:5;
  padding-top:max(4.5rem, calc(env(safe-area-inset-top) + 3.5rem));
  padding-bottom:1.4rem;
}
.hero-standalone::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(58% 48% at 50% 40%, rgba(3,12,19,.62) 0%, rgba(3,12,19,.32) 55%, rgba(3,12,19,.08) 78%, transparent 100%);
  pointer-events:none;
}
.hero-standalone::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,12,19,.55) 0%, transparent 28%, transparent 72%, rgba(3,12,19,.6) 100%);
  pointer-events:none;
}
.hero-content{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin:auto 0; min-height:0; max-width:92vw;
}
.hero-eyebrow{
  position:relative; z-index:1;
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-light); font-weight:700; margin-bottom:clamp(.8rem,2.2vh,1.4rem);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.hero-heading{
  position:relative; z-index:1;
  font-family:var(--font-hero);
  font-size:clamp(2.2rem, 5.6vw + 2vh, 6.6rem); font-weight:700; color:#fff; letter-spacing:.005em; max-width:18ch;
  text-shadow:0 6px 30px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.55), 0 0 46px rgba(231,207,156,.22);
}
.hero-heading .word{ display:inline-block; overflow:hidden; padding-bottom:.08em; }
.hero-heading .word span{ display:inline-block; will-change:transform; }
.hero-subtitle{
  position:relative; z-index:1;
  margin-top:clamp(.8rem,2vh,1.6rem); font-size:clamp(1rem,1.5vw + .6vh,1.3rem); color:#eef3f7; max-width:42ch; font-weight:500;
  text-shadow:0 3px 16px rgba(0,0,0,.6);
}
.hero-ctas{ position:relative; z-index:1; display:flex; gap:1.1rem; margin-top:clamp(1.2rem,3.2vh,2.6rem); flex-shrink:0; }
.hero-scroll-indicator{
  position:relative; z-index:1; flex-shrink:0; margin-top:1rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; color:#eef3f7; font-size:.7rem; letter-spacing:.18em;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.hero-scroll-indicator .line{ width:1px; height:28px; background:linear-gradient(180deg,var(--gold),transparent); animation:scrollLine 2s ease-in-out infinite; }
@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;} }
@media (max-height:560px){
  .hero-scroll-indicator{ display:none; }
}
@media (max-height:420px){
  .hero-standalone{ padding-top:3.2rem; padding-bottom:.7rem; }
  .hero-eyebrow{ margin-bottom:.5rem; }
  .hero-heading{ font-size:clamp(1.6rem, 4vw + 1.4vh, 3rem); }
  .hero-subtitle{ display:none; }
  .hero-ctas{ margin-top:.8rem; }
}

/* fixed cinematic layers behind hero-scroll-container */
.canvas-wrap{
  position:fixed; inset:0; z-index:2; opacity:1; pointer-events:none;
}
#canvas{ width:100%; height:100%; display:block; }
#dark-overlay{ position:fixed; inset:0; z-index:3; background:var(--navy-deep); opacity:0; pointer-events:none; }

.marquee-wrap{
  position:fixed; top:50%; right:0; left:0; z-index:4; transform:translateY(-50%);
  overflow:hidden; opacity:0; pointer-events:none; white-space:nowrap;
}
.marquee-text{
  display:inline-block; font-family:var(--font-display); font-weight:800; color:rgba(255,255,255,.08);
  font-size:13vw; letter-spacing:.01em; -webkit-text-stroke:1px rgba(255,255,255,.22);
}

#hero-scroll-container{ position:relative; height:420vh; z-index:4; }
.hero-scroll-section{
  position:fixed; right:0; left:0; top:50%; transform:translateY(-50%); z-index:5;
  padding:0 6vw; display:flex; justify-content:center; text-align:center; pointer-events:none;
}
.hero-scroll-section .inner{ max-width:600px; margin:0 auto; }

.section-label{
  display:block; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light);
  font-weight:700; margin-bottom:1.1rem;
}
.hero-scroll-section .section-heading{
  font-size:clamp(2rem,4.4vw,3.4rem); color:#fff; margin-bottom:1rem; white-space:pre-line;
}
.hero-scroll-section .section-body{ color:var(--silver); font-size:1.05rem; max-width:36ch; }

/* ============================================================
   Floating WhatsApp
   ============================================================ */
.float-whatsapp{
  position:fixed; bottom:1.8rem; left:1.8rem; z-index:90;
  width:60px; height:60px; border-radius:50%; background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  animation:wa-pulse 2.6s ease-in-out infinite;
}
.float-whatsapp svg{ width:30px; height:30px; fill:#fff; }
.float-whatsapp:hover{ transform:scale(1.08); }
@keyframes wa-pulse{ 0%,100%{ box-shadow:0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.45);} 50%{ box-shadow:0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 14px rgba(37,211,102,0);} }

/* ============================================================
   About
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:5vw; align-items:center; }
.about-media{ position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/5; }
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,28,43,.65) 100%);
}
.about-stat{
  position:absolute; right:1.6rem; bottom:1.6rem; z-index:2;
  background:rgba(8,28,43,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(201,164,99,.4);
  padding:1.1rem 1.6rem; border-radius:3px; text-align:center;
}
.about-stat .num{ font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:var(--gold-light); }
.about-stat .num::after{ content:"+"; }
.about-stat .label{ font-size:.74rem; color:var(--silver); letter-spacing:.05em; margin-top:.2rem; }
.about-text p{ font-size:1.08rem; color:var(--ink-soft); margin-bottom:1.6rem; }
.about-points{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.6rem; }
.about-points li{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--navy-deep); font-size:.92rem; }
.about-points svg{ width:18px; height:18px; flex-shrink:0; color:var(--gold); }

/* ============================================================
   Services / category cards
   ============================================================ */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.service-card{
  background:var(--paper); border:1px solid rgba(18,60,87,.08); border-radius:4px; padding:2.1rem 1.7rem;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
  position:relative; overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease);
  background:linear-gradient(160deg, rgba(18,60,87,.04), rgba(201,164,99,.08));
}
.service-card:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 26px 44px -28px rgba(18,60,87,.35); }
.service-card:hover::before{ opacity:1; }
.service-icon{
  width:52px; height:52px; border-radius:50%; background:var(--cream-deep); display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem; transition:background .4s, transform .5s var(--ease); position:relative; z-index:1;
}
.service-icon svg{ width:26px; height:26px; color:var(--navy); transition:color .4s; }
.service-card:hover .service-icon{ background:var(--navy-deep); transform:rotate(-6deg); }
.service-card:hover .service-icon svg{ color:var(--gold-light); }
.service-card h3{ font-size:1.12rem; margin-bottom:.6rem; position:relative; z-index:1; }
.service-card p{ font-size:.9rem; color:var(--ink-soft); position:relative; z-index:1; }

/* ============================================================
   Catalogue
   ============================================================ */
.catalogue-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:1rem;
}
.cat-tile{
  position:relative; border-radius:3px; overflow:hidden;
  grid-column:span 1; grid-row:span 1; transition:transform .5s var(--ease);
}
.cat-tile:hover{ transform:translateY(-4px); }
.cat-tile[data-full]{ cursor:pointer; }
.cat-tile.span-2{ grid-column:span 2; }
.cat-tile.span-row2{ grid-row:span 2; }
.cat-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.cat-tile.texture{ display:flex; align-items:flex-end; }
.cat-tile.texture.tone-wood{ background:linear-gradient(155deg,#6b4226,#3d2515); }
.cat-tile.texture.tone-alu{ background:linear-gradient(155deg,#3a4750,#1b2429); }
.cat-tile.texture.tone-navy{ background:linear-gradient(155deg,var(--navy),var(--navy-deep)); }
.cat-tile::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(8,28,43,.85) 100%);
  z-index:1;
}
.cat-tile:hover img{ transform:scale(1.08); }
.cat-tile-label{
  position:relative; z-index:2; padding:1.2rem 1.4rem; color:#fff; width:100%;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.cat-tile-label h4{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; }
.cat-tile-label span{ font-size:.7rem; color:var(--gold-light); letter-spacing:.1em; }

/* ============================================================
   Why us
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem 1.4rem; }
.why-card{ text-align:center; padding:1.6rem 1rem; }
.why-icon{
  width:64px; height:64px; margin:0 auto 1.2rem; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; transition:border-color .4s, background .4s;
}
.why-card:hover .why-icon{ border-color:var(--gold); background:rgba(201,164,99,.08); }
.why-icon svg{ width:28px; height:28px; color:var(--gold-light); }
.why-card h3{ color:#fff; font-size:1.02rem; margin-bottom:.5rem; }
.why-card p{ color:#9fb1c0; font-size:.86rem; }

/* ============================================================
   Process
   ============================================================ */
.process-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.4rem; }
.process-step{ position:relative; padding-top:2rem; border-top:1px solid rgba(18,60,87,.15); }
.process-num{ font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--gold); margin-bottom:1rem; display:block; }
.process-step h3{ font-size:1.02rem; margin-bottom:.5rem; }
.process-step p{ font-size:.86rem; color:var(--ink-soft); }

/* ============================================================
   Gallery + lightbox
   ============================================================ */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:.9rem;
}
.gallery-item{ position:relative; overflow:hidden; border-radius:3px; cursor:pointer; }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item::after{ content:""; position:absolute; inset:0; background:rgba(8,28,43,0); transition:background .4s; }
.gallery-item:hover::after{ background:rgba(8,28,43,.18); }
.gallery-caption{
  position:absolute; right:1rem; bottom:1rem; z-index:2; color:#fff; font-size:.82rem; font-weight:700;
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:translateY(0); }

/* lightbox modal */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(8,28,43,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:4vw;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal-close{
  position:absolute; top:1.6rem; left:1.6rem; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .3s, transform .3s;
}
.modal-close:hover{ background:rgba(255,255,255,.18); transform:rotate(90deg); }
.modal-close svg{ width:20px; height:20px; }

.lightbox-box{ max-width:880px; width:100%; text-align:center; }
.lightbox-box img{ width:100%; max-height:70vh; object-fit:contain; border-radius:4px; }
.lightbox-box .cap{ margin-top:1.2rem; color:var(--gold-light); font-family:var(--font-display); font-weight:700; font-size:1.1rem; }

.inquiry-box{
  background:var(--paper); border-radius:6px; max-width:480px; width:100%; padding:2.6rem 2.2rem; position:relative;
}
.inquiry-box .modal-close{ position:absolute; top:1.1rem; left:1.1rem; background:rgba(18,60,87,.08); color:var(--navy-deep); }
.inquiry-box .modal-close:hover{ background:rgba(18,60,87,.16); }
.inquiry-box h3{ font-size:1.5rem; margin-bottom:.5rem; }
.inquiry-box > p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.6rem; }

/* ============================================================
   Forms
   ============================================================ */
.form-grid{ display:grid; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.82rem; font-weight:700; color:var(--navy-deep); }
.section--dark .field label{ color:var(--silver); }
.field input, .field select, .field textarea{
  background:rgba(18,60,87,.04); border:1px solid rgba(18,60,87,.16); border-radius:3px; padding:.85rem 1rem;
  font-size:.95rem; color:var(--ink); transition:border-color .3s, background .3s;
}
.section--dark .field input, .section--dark .field select, .section--dark .field textarea{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:110px; }
.form-submit{ width:100%; margin-top:.4rem; }

/* ============================================================
   Contact section
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:start; }
.contact-info-list{ display:grid; gap:1.4rem; margin-top:2rem; }
.contact-info-item{ display:flex; align-items:center; gap:1rem; }
.contact-info-item .ic{
  width:50px; height:50px; border-radius:50%; background:rgba(201,164,99,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-item .ic svg{ width:22px; height:22px; color:var(--gold); }
.contact-info-item .t{ font-size:.78rem; color:#9fb1c0; }
.contact-info-item .v{ font-size:1rem; font-weight:700; color:#fff; }
.contact-ctas{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.contact-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:2.2rem; }

/* toast */
#toast{
  position:fixed; bottom:2rem; right:50%; transform:translate(50%,20px); z-index:300;
  opacity:0; visibility:hidden; pointer-events:none;
  background:var(--navy-deep); color:#fff; border:1px solid rgba(201,164,99,.4);
  padding:1rem 1.6rem; border-radius:4px; font-size:.92rem; font-weight:700; display:flex; align-items:center; gap:.6rem;
  transition:transform .4s var(--ease), opacity .35s var(--ease), visibility .35s var(--ease);
}
#toast svg{ width:18px; height:18px; color:var(--gold-light); flex-shrink:0; }
#toast.is-visible{ transform:translate(50%,0); opacity:1; visibility:visible; pointer-events:auto; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--navy-deep); color:var(--silver); padding:5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.footer-brand img{ height:42px; }
.footer-brand-text{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.1rem; }
.footer-col p{ font-size:.9rem; color:#9fb1c0; max-width:30ch; }
.footer-col h4{ color:#fff; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; font-family:var(--font-display); }
.footer-col ul{ display:grid; gap:.7rem; }
.footer-col a{ font-size:.9rem; color:#aebccb; transition:color .3s; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-slogan{ display:flex; align-items:center; justify-content:space-between; padding-top:2rem; flex-wrap:wrap; gap:1rem; }
.footer-slogan p{ font-family:var(--font-display); font-weight:700; color:var(--gold-light); font-size:1.05rem; }
.footer-copy{ font-size:.8rem; color:#75879a; }

/* ============================================================
   GSAP reveal initial states
   ============================================================ */
[data-animation]{ will-change:transform,opacity; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .catalogue-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(1,1fr); gap:1.6rem; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:3rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2.4rem; }
}

@media (max-width:768px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .about-points{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .section{ padding:3.6rem 0; }
  #hero-scroll-container{ height:340vh; }
  .hero-scroll-section .inner{ max-width:88vw; margin:0 auto; }
  .hero-scroll-section .section-body{ display:none; }
  .marquee-text{ font-size:20vw; }
}

@media (max-width:640px){
  .hero-ctas{ flex-direction:column; width:100%; max-width:300px; }
  .hero-ctas .btn{ width:100%; }
  .services-grid, .why-grid, .catalogue-grid, .gallery-grid{ grid-template-columns:1fr 1fr; }
  .cat-tile.span-2{ grid-column:span 2; }
  .gallery-item.wide{ grid-column:span 2; }
}

@media (max-width:480px){
  .services-grid, .why-grid{ grid-template-columns:1fr; }
  .float-whatsapp{ width:52px; height:52px; bottom:1.2rem; left:1.2rem; }
  .float-whatsapp svg{ width:26px; height:26px; }
  .container{ padding:0 5.5vw; }
}