/* ═══════════════════════════════════════════════════════════════════
   SHPE COMBINED CSS — All 7 Pages
   Smart Home Planners & Engineers
   Pages: index · gallery · services · contact · projects · workflow · about
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
══════════════════════════════════════ */
:root {
  --bg:          #ffffff;
  --bg-alt:      #f8f5ef;
  --text:        #1a1a2e;
  --text-muted:  #6b6b8a;
  --gold:        #b8963e;
  --gold-light:  #d4af6a;
  --gold-pale:   #f5edd8;
  --navy:        #0f2c4a;
  --navy-mid:    #1a3d5c;
  --border:      #e8e4db;
  --card-bg:     #ffffff;
  --shadow:      0 4px 24px rgba(15,44,74,.08);
  --shadow-lg:   0 12px 48px rgba(15,44,74,.14);
  --radius:      16px;
  --radius-sm:   10px;
  --font:        'DM Sans', sans-serif;
  --transition:  .35s cubic-bezier(.4,0,.2,1);
  --scroll-top-bg:    var(--navy);
  --scroll-top-color: #fff;
}

body.dark-mode {
  --bg:          #0a1628;
  --bg-alt:      #0d1e34;
  --text:        #f0ede8;
  --text-muted:  #8fa8bf;
  --border:      #1e3a5a;
  --card-bg:     #0f2640;
  --shadow:      0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:   0 12px 48px rgba(0,0,0,.5);
  --scroll-top-bg:    #1a3d5c;
  --scroll-top-color: #f0ede8;
}

/* ══════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
html,body { overflow-x:hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  line-height: 1.7;
  font-size: 16px;
  transition: background var(--transition), color var(--transition);
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { border:none; cursor:pointer; font-family:var(--font); }

/* ══════════════════════════════════════
   3. SCROLL PROGRESS BAR
══════════════════════════════════════ */
#scroll-progress {
  position:fixed; top:0; left:0; height:3px;
  background:var(--gold); width:0%; z-index:9999;
  transition:width .1s linear;
}

/* ══════════════════════════════════════
   4. PRELOADER  (index + about)
══════════════════════════════════════ */
#preloader {
  position:fixed; inset:0; z-index:10000;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
}
#preloader.fade-out { opacity:0; visibility:hidden; }

.pl-inner {
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  animation:plFadeIn .7s ease forwards;
}
@keyframes plFadeIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

.pl-logo svg {
  width:90px; height:90px;
  filter:drop-shadow(0 0 18px rgba(184,150,62,.25));
}

/* SVG stroke animations */
.pl-house  { stroke-dasharray:300; stroke-dashoffset:300; animation:drawStroke 2s   ease forwards  .4s; }
.pl-roof   { stroke-dasharray: 40; stroke-dashoffset: 40; animation:drawStroke  .8s ease forwards  2s; }
.pl-door   { stroke-dasharray: 80; stroke-dashoffset: 80; animation:drawStroke  .8s ease forwards 2.5s; }
.pl-win    { stroke-dasharray: 50; stroke-dashoffset: 50; animation:drawStroke  .7s ease forwards  3s; }
.pl-check-circle {
  transform-origin:60px 20px; transform:scale(0);
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards 3.4s; opacity:0;
}
.pl-check  { stroke-dasharray:20; stroke-dashoffset:20; animation:drawStroke .5s ease forwards 3.7s; }

@keyframes drawStroke { to { stroke-dashoffset:0; } }
@keyframes popIn {
  from { transform:scale(0); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}

.pl-brand {
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  opacity:0; animation:plFadeIn .6s ease forwards .8s;
}
.pl-brand-main {
  font-family:var(--font); font-size:1.5rem; font-weight:900;
  color:var(--navy); letter-spacing:-.02em;
}
.pl-brand-sub {
  font-family:var(--font); font-size:.78rem; font-weight:600;
  color:var(--gold); letter-spacing:.12em; text-transform:uppercase;
}

.pl-bar-wrap {
  width:180px; height:3px; background:var(--border);
  border-radius:100px; overflow:hidden;
  opacity:0; animation:plFadeIn .5s ease forwards 1.2s;
}
.pl-bar {
  height:100%; width:0%; background:var(--gold); border-radius:100px;
  animation:plProgress 3.5s cubic-bezier(.4,0,.2,1) forwards 1.4s;
  box-shadow:0 0 8px rgba(184,150,62,.4);
}
@keyframes plProgress {
  0%  { width:0%; }  30% { width:40%; }
  60% { width:68%; } 85% { width:88%; } 100% { width:100%; }
}

.pl-status {
  font-family:var(--font); font-size:.75rem; font-weight:500;
  color:var(--text-muted); letter-spacing:.06em;
  opacity:0; animation:plFadeIn .5s ease forwards 1.4s;
  transition:opacity .3s ease;
}

/* ══════════════════════════════════════
   5. SHARED ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeSlideUp {
  to { opacity:1; transform:translateY(0); }
}
@keyframes kenBurns {
  from { transform:scale(1.05); }
  to   { transform:scale(1.0); }
}
@keyframes heroZoom {
  0%   { transform:scale(1)    translateX(0%)  translateY(0%); }
  50%  { transform:scale(1.07) translateX(-1%) translateY(-1%); }
  100% { transform:scale(1.12) translateX(1%)  translateY(1%); }
}
@keyframes glFadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
/* About page specific animations */
@keyframes abpg-shimmer      { to { background-position:200% center; } }
@keyframes abpg-pulse        { 0%,100%{opacity:1;} 50%{opacity:.4;} }
@keyframes abpg-float        { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes abpg-drawLine     { to { stroke-dashoffset:0; } }
@keyframes abpg-fadeIn       { to { opacity:1; } }
@keyframes abpg-marqueeScroll{
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* Reveal helpers */
.reveal {
  opacity:0; transform:translateY(40px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left {
  opacity:0; transform:translateX(-40px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-scale {
  opacity:0; transform:scale(1.05);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-scale.visible { opacity:1; transform:scale(1); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* ══════════════════════════════════════
   6. NAVBAR  (shared all pages)
══════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.4rem 3rem;
  display:flex; align-items:center; justify-content:space-between;
  background:transparent; transition:all .4s ease;
}
#navbar.scrolled {
  background:var(--bg);
  box-shadow:0 2px 20px rgba(15,44,74,.1);
  padding:1rem 3rem;
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:.85rem; }
.nav-logo-img { display:block; height:52px; width:auto; object-fit:contain; }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.25; }
.nav-logo-text strong {
  font-size:1.05rem; font-weight:800; color:#fff;
  transition:color var(--transition); letter-spacing:.01em;
}
.nav-logo-text span {
  font-size:.78rem; font-weight:400; color:rgba(255,255,255,.7);
  transition:color var(--transition);
}
#navbar.scrolled .nav-logo-text strong { color:var(--text); }
#navbar.scrolled .nav-logo-text span   { color:var(--text-muted); }

.nav-logo-monogram {
  width:52px; height:52px; background:var(--gold); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; color:#fff; letter-spacing:-.02em; flex-shrink:0;
}

/* Links */
.nav-links { display:flex; gap:2.5rem; align-items:center; }
.nav-links a {
  font-size:1rem; font-weight:700; color:rgba(255,255,255,.92);
  transition:color var(--transition); position:relative; letter-spacing:.01em;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--gold); transform:scaleX(0);
  transition:transform .3s ease; transform-origin:left;
}
.nav-links a:hover::after,
.nav-links a.active-link::after,
.nav-links a.active::after { transform:scaleX(1); }
.nav-links a:hover,
.nav-links a.active-link,
.nav-links a.active { color:var(--gold); }
#navbar.scrolled .nav-links a { color:var(--text); }

/* Actions */
.nav-actions { display:flex; gap:.75rem; align-items:center; }
.btn-dark-toggle {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition); cursor:pointer;
}
#navbar.scrolled .btn-dark-toggle {
  background:var(--bg-alt); border-color:var(--border); color:var(--text);
}
.btn-dark-toggle:hover { background:var(--gold); border-color:var(--gold); color:#fff; }

.btn-nav-cta {
  padding:.6rem 1.5rem; background:var(--gold); border-radius:8px;
  font-size:.95rem; font-weight:700; color:#fff;
  transition:all var(--transition); letter-spacing:.01em;
}
.btn-nav-cta:hover { background:var(--gold-light); transform:scale(1.03); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; padding:4px; }
.hamburger span {
  width:26px; height:2.5px; background:#fff;
  border-radius:2px; transition:all .3s ease; display:block;
}
#navbar.scrolled .hamburger span { background:var(--text); }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── Mobile overlay menu ── */
#mobile-menu {
  position:fixed; inset:0; background:var(--navy); z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .4s ease;
}
#mobile-menu.open { opacity:1; visibility:visible; }
#mobile-menu a {
  font-size:1.6rem; font-weight:800; color:#fff; margin:.85rem 0;
  transform:translateY(20px); opacity:0; transition:all .4s ease;
}
#mobile-menu.open a { transform:translateY(0); opacity:1; }
#mobile-menu.open a:nth-child(1) { transition-delay:.10s; }
#mobile-menu.open a:nth-child(2) { transition-delay:.15s; }
#mobile-menu.open a:nth-child(3) { transition-delay:.20s; }
#mobile-menu.open a:nth-child(4) { transition-delay:.25s; }
#mobile-menu.open a:nth-child(5) { transition-delay:.30s; }
#mobile-menu.open a:nth-child(6) { transition-delay:.35s; }
#mobile-menu.open a:nth-child(7) { transition-delay:.40s; }
#mobile-menu a:hover { color:var(--gold); }

/* ── Mobile bottom nav ── */
#mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
#mobile-bottom-nav .bottom-nav-inner {
  display: flex; justify-content: space-around; align-items: center;
}
.bn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: .72rem; font-weight: 500; color: var(--text-muted);
  padding: .35rem .5rem; transition: color var(--transition); text-decoration: none; height:56px;
}
.bn-item.active, .bn-item:hover { color: var(--gold); }

/* TARGET THE ACTUAL BI ICONS */
.bn-item .bi {
  font-size: 1.6rem;   /* 25px — clear and tappable */
  line-height: 1;
  display: block;
}

@media (max-width: 768px) {
  /* show the mobile bottom nav on small screens */
  #mobile-bottom-nav { display: block; }
  #mobile-bottom-nav .bottom-nav-inner { height: 56px; }
}

@media (max-width: 420px) {
  .bn-item .bi { font-size: 1.45rem; }
  .bn-item { font-size: .68rem; padding: .3rem .45rem; height:60px; }
}

/* ══════════════════════════════════════
   7. SHARED BUTTONS
══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 2.4rem; border-radius:10px;
  font-size:1rem; font-weight:700; letter-spacing:.01em;
  transition:all var(--transition); cursor:pointer;
  font-family:var(--font); border:2px solid transparent;
}
.btn-gold        { background:var(--gold); color:#fff; border-color:var(--gold); }
.btn-gold:hover  { background:var(--gold-light); border-color:var(--gold-light); transform:scale(1.03); box-shadow:0 8px 24px rgba(184,150,62,.45); }
.btn-outline-white { background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-outline-white:hover { background:rgba(255,255,255,.15); border-color:#fff; }
.btn-outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline-light:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.btn-outline { background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-outline:hover { background:var(--gold-pale); }

/* ══════════════════════════════════════
   8. SHARED SECTION COMMON
══════════════════════════════════════ */
section { padding:6rem 5vw; }
.section-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:.75rem;
}
.section-tag::before { content:''; width:24px; height:2.5px; background:var(--gold); flex-shrink:0; }
.section-title {
  font-family:var(--font);
  font-size:clamp(2rem,3.5vw,3.2rem); font-weight:900;
  letter-spacing:-.03em; color:var(--text); margin-bottom:.85rem; line-height:1.1;
}
.section-title .underline-anim {
  display:block; height:3px; background:var(--gold); border-radius:2px;
  width:0; transition:width .8s ease .3s; margin-top:8px;
}
.section-title.visible .underline-anim { width:60px; }
.section-subtitle {
  font-size:1.05rem; color:var(--text-muted); font-weight:400;
  max-width:560px; margin-bottom:3rem; line-height:1.75;
}
.container { max-width:1320px; margin:0 auto; }

/* ══════════════════════════════════════
   9. SHARED FOOTER
══════════════════════════════════════ */
footer { background:var(--bg-alt); color:var(--text); padding:5rem 5vw 2rem; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:3rem; margin-bottom:3rem;
}
.footer-logo { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.footer-logo-box {
  width:48px; height:48px; background:var(--gold); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem; color:#fff;
}
.footer-logo-text strong { display:block; font-size:1rem; font-weight:800; color:var(--text); }
.footer-logo-text span   { font-size:.75rem; color:var(--text-muted); }
.footer-about { font-size:.92rem; color:var(--text-muted); line-height:1.8; margin-bottom:1.5rem; }
.footer-social { display:flex; gap:.75rem; }
.social-ico {
  width:38px; height:38px; border-radius:8px; background:var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--text-muted); transition:all var(--transition); cursor:pointer;
}
.social-ico:hover { background:var(--gold); color:#fff; transform:translateY(-3px); }
.footer-col h4 {
  font-size:.82rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.35rem;
}
.footer-col ul li { margin-bottom:.6rem; }
.footer-col ul li a { font-size:.92rem; color:var(--text-muted); transition:color var(--transition); }
.footer-col ul li a:hover { color:var(--gold); }
.footer-contact-item { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1rem; }
.footer-contact-item .icon { color:var(--gold); font-size:1rem; flex-shrink:0; margin-top:2px; }
.footer-contact-item p { font-size:.92rem; color:var(--text-muted); }
.footer-contact-item p a,
.footer-contact-item a { color:var(--gold); font-weight:600; }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:.85rem; color:var(--text-muted); }
.footer-bottom a { color:var(--gold); font-weight:600; }

/* ══════════════════════════════════════
   10. FLOAT BUTTONS & SCROLL TOP
══════════════════════════════════════ */
.float-btns {
  position:fixed; bottom:2rem; right:2rem; z-index:10002;
  display:flex; flex-direction:column; gap:.75rem;
}
.float-btn {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:var(--shadow-lg);
  transition:all var(--transition); cursor:pointer; text-decoration:none;
}
.float-wa   { background:#25d366; color:#fff; }
.float-wa:hover   { background:#128c7e; transform:scale(1.1); }
.float-call { background:var(--gold); color:#fff; }
.float-call:hover { background:var(--gold-light); transform:scale(1.1); }

#scroll-top {
  position:fixed; bottom:9rem; right:2rem; z-index:1000;
  width:46px; height:46px; background:var(--scroll-top-bg);
  border:2px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--scroll-top-color); font-size:1.2rem; cursor:pointer;
  opacity:0; pointer-events:none; box-shadow:var(--shadow-lg);
  transition:background var(--transition), color var(--transition),
             transform var(--transition), opacity .3s ease;
}
#scroll-top:hover { background:var(--gold); color:#fff; transform:translateY(-4px); }

@media (max-width: 768px) {
  .float-btns {
    bottom: calc(5rem + env(safe-area-inset-bottom));
    right: 1rem;
  }

  #scroll-top {
    bottom: calc(9rem + env(safe-area-inset-bottom));
    right: 1rem;
    z-index: 10003;
  }
}

@media (max-width: 420px) {
  .float-btns {
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    right: 0.8rem;
  }

  #scroll-top {
    bottom: calc(9.5rem + env(safe-area-inset-bottom));
    right: 0.8rem;
    z-index: 10003;
  }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE — INDEX                                                  ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── Hero ── */
#hero {
  position:relative; height:100vh; min-height:640px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.hero-slider  { position:absolute; inset:0; }
.hero-slide   { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.hero-slide.active { opacity:1; }
.hero-slide img {
  width:100%; height:100%; object-fit:cover;
  animation:kenBurns 8s ease-in-out infinite alternate;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(10,22,40,.82) 0%,rgba(10,22,40,.60) 55%,rgba(10,22,40,.35) 100%);
}
.hero-content {
  position:relative; z-index:2;
  padding:0 5vw; max-width:820px; width:100%; padding-bottom:9rem;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(184,150,62,.2); border:1px solid rgba(184,150,62,.6);
  padding:.45rem 1.2rem; border-radius:100px;
  font-size:.82rem; font-weight:700; color:var(--gold-light);
  margin-bottom:1.25rem; letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transform:translateY(20px); animation:fadeSlideUp .6s ease-out .3s forwards;
}
.hero-headline {
  font-family:var(--font);
  font-size:clamp(2.8rem,4.8vw,5rem); font-weight:900;
  line-height:1.05; letter-spacing:-.03em; color:#fff;
  margin-bottom:1.1rem; white-space:nowrap;
  opacity:0; transform:translateY(30px); animation:fadeSlideUp .7s ease-out .5s forwards;
}
.hero-headline .gold-word { color:var(--gold-light); font-style:normal; }
.hero-subline {
  font-size:1.05rem; font-weight:400; color:rgba(255,255,255,.88);
  opacity:0; transform:translateY(20px); animation:fadeSlideUp .6s ease-out .7s forwards;
  margin-bottom:2rem; max-width:520px; line-height:1.75;
}
.hero-ctas {
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; transform:translateY(20px); animation:fadeSlideUp .6s ease-out .9s forwards;
}
.hero-badges {
  display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem;
  opacity:0; transform:translateY(20px); animation:fadeSlideUp .6s ease-out 1.05s forwards;
}
.hero-badge-pill {
  display:flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:100px; padding:.35rem .9rem;
  font-size:.8rem; font-weight:600; color:rgba(255,255,255,.9);
}
.hero-dots { position:absolute; bottom:9.5rem; left:5vw; z-index:3; display:flex; gap:.5rem; }
.hero-dot {
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4);
  cursor:pointer; transition:all .3s ease;
}
.hero-dot.active { background:var(--gold); width:24px; border-radius:4px; }
.hero-stats {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  opacity:0; animation:fadeSlideUp .6s ease-out 1.1s forwards;
}
.hero-stats-inner {
  background:var(--bg); border-radius:20px 20px 0 0;
  box-shadow:0 -4px 40px rgba(15,44,74,.15);
  padding:1.6rem 2rem; display:flex; justify-content:space-around;
  flex-wrap:wrap; gap:.75rem; max-width:1100px; margin:0 auto;
}
body.dark-mode .hero-stats-inner { background:var(--card-bg); }
.hero-stat { text-align:center; }
.hero-stat-num {
  font-family:var(--font); font-size:2.2rem; font-weight:900;
  color:var(--gold); letter-spacing:-.04em; display:block;
}
.hero-stat-label {
  font-size:.78rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em;
}

/* ── Why Section ── */
#why { background:var(--bg); padding:6rem 5vw; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:1rem; }
.why-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; padding:2.2rem;
  transition:all .35s ease; position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.why-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.why-card:hover::before  { transform:scaleX(1); }
.why-card:hover          { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.why-icon  { font-size:2.4rem; margin-bottom:1.2rem; }
.why-title { font-size:1.1rem; font-weight:800; color:var(--text); margin-bottom:.6rem; }
.why-desc  { font-size:.95rem; color:var(--text-muted); line-height:1.75; }

/* ── About Section ── */
#about { background:var(--bg); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-image-wrap { position:relative; }
.about-img {
  width:100%; height:540px; object-fit:cover;
  border-radius:20px; box-shadow:var(--shadow-lg);
  transform:rotate(-2deg); transition:transform .8s ease;
}
.about-img.visible { transform:rotate(0deg); }
.about-badge {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--gold); color:#fff; padding:1.35rem 1.6rem;
  border-radius:14px; text-align:center; box-shadow:var(--shadow-lg);
}
.about-badge strong { display:block; font-size:2rem; font-weight:900; letter-spacing:-.04em; }
.about-badge span   { font-size:.8rem; font-weight:700; opacity:.9; text-transform:uppercase; letter-spacing:.05em; }
.about-content p    { color:var(--text-muted); font-size:1.05rem; line-height:1.85; margin-bottom:2rem; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.about-stat-card {
  background:var(--bg-alt); border-radius:var(--radius-sm);
  padding:1.4rem 1.6rem; border:1px solid var(--border);
  transition:all var(--transition);
}
.about-stat-card:hover { background:var(--gold); transform:translateY(-4px); }
.about-stat-card:hover .about-stat-num,
.about-stat-card:hover .about-stat-label { color:#fff; }
.about-stat-num {
  font-family:var(--font); font-size:2.1rem; font-weight:900;
  color:var(--gold); letter-spacing:-.04em; display:block;
}
.about-stat-label {
  font-size:.82rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em;
}

/* ── Services (index editorial list) ── */
#services { background:var(--bg-alt); }
.services-editorial { margin-top:1rem; border-top:1.5px solid var(--border); }
.service-row {
  display:grid; grid-template-columns:56px 1fr auto;
  align-items:center; gap:2rem; padding:1.5rem 0;
  border-bottom:1px solid var(--border); cursor:pointer; position:relative;
  transition:all .28s ease; opacity:0; transform:translateX(-20px);
}
.service-row.visible { opacity:1; transform:translateX(0); }
.service-row::before {
  content:''; position:absolute; left:0; bottom:-1px; right:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.service-row:hover::before { transform:scaleX(1); }
.service-row:hover { padding-left:1rem; }
.service-row:hover .svc-num  { color:var(--gold); }
.service-row:hover .svc-name { color:var(--gold); }
.service-row:hover .svc-arrow{ opacity:1; transform:translateX(0); }
.svc-num {
  font-family:var(--font); font-size:1.1rem; font-weight:700;
  color:var(--border); transition:color .28s ease; user-select:none; text-align:center;
}
.svc-name {
  font-size:1.05rem; font-weight:700; color:var(--text);
  margin-bottom:.2rem; transition:color .28s ease;
}
.svc-desc  { font-size:.88rem; color:var(--text-muted); }
.svc-arrow {
  font-size:1.1rem; color:var(--gold); opacity:0;
  transform:translateX(-8px); transition:all .28s ease; flex-shrink:0;
}
.services-double { display:grid; grid-template-columns:1fr 1fr; gap:0 4rem; }
.services-double .services-col { border-top:1.5px solid var(--border); }

/* ── Process (index) ── */
#process { background:var(--bg); }
.process-header { margin-bottom:3.5rem; }
.process-timeline { position:relative; }
.timeline-line {
  position:absolute; top:40px; left:10%; right:10%; height:2px; background:var(--border);
}
.timeline-line-fill { height:100%; background:var(--gold); width:0%; transition:width 1.5s ease; }
.timeline-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; position:relative; }
.timeline-step  { display:flex; flex-direction:column; align-items:center; text-align:center; }
.step-circle {
  width:82px; height:82px; border-radius:50%;
  border:2px solid var(--border); background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  margin-bottom:1.5rem; position:relative; z-index:1; transition:all .4s ease;
}
.step-circle.active  { border-color:var(--gold); background:var(--gold); }
.step-circle.active .step-num { color:#fff; }
.step-num   { font-size:.68rem; font-weight:800; color:var(--gold); display:block; }
.step-ico   { font-size:1.5rem; }
.step-title { font-size:.95rem; font-weight:800; color:var(--text); margin-bottom:.4rem; }
.step-desc  { font-size:.85rem; color:var(--text-muted); line-height:1.55; }

/* ── FAQ (index) ── */
#faq { background:var(--bg); }
.faq-list { max-width:820px; }
.faq-item { border-bottom:1px solid var(--border); overflow:hidden; }
.faq-question {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 0; cursor:pointer; gap:1rem;
  font-size:1.05rem; font-weight:700; color:var(--text);
  transition:color .25s ease;
}
.faq-question:hover { color:var(--gold); }
.faq-icon {
  width:30px; height:30px; border-radius:50%;
  background:var(--bg-alt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; transition:all .3s ease; color:var(--gold);
}
.faq-item.open .faq-icon { background:var(--gold); color:#fff; transform:rotate(45deg); }
.faq-answer {
  font-size:.98rem; color:var(--text-muted); line-height:1.8;
  max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease;
  padding-bottom:0;
}
.faq-item.open .faq-answer { max-height:300px; padding-bottom:1.25rem; }

/* ── Projects (index) ── */
#projects { background:var(--bg-alt); }
.filter-tabs { display:flex; gap:.75rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.filter-tab {
  padding:.55rem 1.4rem; border-radius:100px;
  font-size:.92rem; font-weight:700; cursor:pointer;
  border:1.5px solid var(--border); background:transparent; color:var(--text-muted);
  transition:all var(--transition);
}
.filter-tab.active,.filter-tab:hover { background:var(--gold); border-color:var(--gold); color:#fff; }
.projects-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.project-card {
  border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer;
  transition:all var(--transition); opacity:0; transform:translateY(30px);
}
.project-card.visible { opacity:1; transform:translateY(0); }
.project-card:hover   { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.project-img-wrap { overflow:hidden; height:250px; }
.project-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.project-card:hover .project-img-wrap img { transform:scale(1.1); }
.project-overlay {
  position:absolute; inset:0; background:rgba(10,22,40,.88);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.project-card:hover .project-overlay { opacity:1; }
.project-overlay h3 {
  color:#fff; font-size:1.05rem; font-weight:800; margin-bottom:1rem;
  text-align:center; padding:0 1rem;
}
.project-tag-badge {
  position:absolute; top:1rem; left:1rem;
  background:var(--gold); color:#fff; padding:.3rem .85rem;
  border-radius:100px; font-size:.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
}

/* ── Testimonials ── */
#testimonials { background:var(--bg); overflow:hidden; }
.testimonials-carousel { position:relative; margin-top:3rem; }
.carousel-track-wrap { overflow:hidden; }
.carousel-track { display:flex; gap:1.5rem; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.testimonial-card {
  min-width:calc(50% - .75rem); background:var(--bg-alt);
  border-radius:20px; padding:2.5rem; border:1px solid var(--border); box-shadow:var(--shadow);
}
.stars { color:var(--gold); font-size:1.1rem; margin-bottom:1rem; letter-spacing:.1em; }
.testimonial-text {
  font-size:1.02rem; color:var(--text); font-style:italic;
  line-height:1.85; margin-bottom:1.5rem;
}
.testimonial-author { display:flex; align-items:center; gap:1rem; }
.author-avatar {
  width:52px; height:52px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:1.3rem;
}
.author-name { font-weight:800; font-size:.95rem; color:var(--text); }
.author-loc  { font-size:.82rem; color:var(--text-muted); }
.carousel-controls {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin-top:2rem;
}
.carousel-btn {
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--border); background:transparent; color:var(--text);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--transition);
}
.carousel-btn:hover { background:var(--gold); border-color:var(--gold); color:#fff; }
.carousel-dots { display:flex; gap:.5rem; }
.c-dot {
  width:8px; height:8px; border-radius:50%; background:var(--border);
  cursor:pointer; transition:all .3s ease;
}
.c-dot.active { background:var(--gold); width:24px; border-radius:4px; }

/* ── Logo Marquee (index) ── */
#marquee { background:var(--bg-alt); padding:3rem 0; overflow:hidden; }
.marquee-label {
  text-align:center; font-size:.82rem; font-weight:800;
  color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:2rem;
}
.marquee-track-wrap { overflow:hidden; }
.marquee-track {
  display:flex; gap:2rem; width:max-content;
  animation:marqueeScroll 30s linear infinite;
}
.marquee-track:hover { animation-play-state:paused; }
.logo-pill {
  padding:.8rem 2rem; background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); white-space:nowrap;
  font-weight:700; font-size:.9rem; color:var(--text-muted);
  transition:all var(--transition); flex-shrink:0;
}
.logo-pill:hover { color:var(--gold); border-color:var(--gold); }

/* ── Contact (index) ── */
#contact { background:var(--bg); }
.contact-intro { text-align:center; margin-bottom:4rem; }
.contact-intro .section-tag { justify-content:center; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-form-wrap {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:24px; padding:2.5rem; box-shadow:var(--shadow);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label {
  display:block; font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:.95rem 1.1rem;
  border:1.5px solid var(--border); border-radius:10px;
  font-family:var(--font); font-size:1rem; color:var(--text);
  background:var(--bg); outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
  appearance:none;
}
.form-group select option { background:var(--bg); color:var(--text); }
.form-group textarea { resize:vertical; min-height:115px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,150,62,.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-muted); opacity:.6; }
.btn-submit {
  width:100%; padding:1.15rem; background:var(--gold); color:#fff;
  border-radius:10px; font-size:1.05rem; font-weight:800;
  cursor:pointer; transition:all var(--transition); border:none;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  letter-spacing:.02em; margin-top:.5rem;
}
.btn-submit:hover   { background:var(--gold-light); transform:scale(1.01); box-shadow:0 8px 24px rgba(184,150,62,.4); }
.btn-submit.success { background:#22c55e; }
.btn-submit.loading { background:var(--navy); cursor:not-allowed; }
.contact-info-side  { display:flex; flex-direction:column; gap:1.25rem; justify-content:center; }
.contact-info-item {
  display:flex; gap:1.25rem; align-items:flex-start;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:14px; padding:1.15rem 1.35rem;
}
.ci-icon {
  width:46px; height:46px; background:var(--gold-pale); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0;
}
.ci-label {
  font-size:.75rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.2rem;
}
.ci-value { font-size:.95rem; color:var(--text); line-height:1.55; }
.ci-value a { color:var(--gold); font-weight:600; }

/* Dual map layout (used index + contact page) */
.map-wrap {
  border-radius:16px; overflow:hidden; height:220px;
  border:1px solid var(--border); margin-top:.25rem;
}
.map-wrap iframe { width:100%; height:100%; border:none; }
.map-dual { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
.map-dual .map-wrap { margin-top:0; height:180px; }
.map-label {
  font-size:.72rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:.35rem;
}


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE — GALLERY                                               ║
   ╚═══════════════════════════════════════════════════════════════╝ */

#gl-hero {
  position:relative; padding:9rem 5vw 5rem;
  min-height:500px; display:flex; align-items:center; overflow:hidden;
}
#gl-hero .gl-hero-bg {
  position:absolute; inset:-8%;
  background-image:url('../img/gallery/1-20.jpg');
  background-size:cover; background-position:center;
  animation:heroZoom 20s ease-in-out infinite alternate; z-index:0;
}
#gl-hero .gl-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(110deg,rgba(9,20,38,.88) 0%,rgba(9,20,38,.65) 55%,rgba(9,20,38,.40) 100%);
  z-index:1;
}
.gl-hero-content { position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.gl-hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(184,150,62,.2); border:1px solid rgba(184,150,62,.5);
  padding:.4rem 1.1rem; border-radius:100px;
  font-size:.78rem; font-weight:700; color:var(--gold-light);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.25rem;
  opacity:0; animation:glFadeUp .6s ease forwards .2s;
}
.gl-hero-title {
  font-size:clamp(2.4rem,4.5vw,4rem); font-weight:900; color:#fff;
  line-height:1.05; letter-spacing:-.03em; margin-bottom:1rem;
  opacity:0; animation:glFadeUp .7s ease forwards .35s;
}
.gl-hero-title .gl-gold-word { color:var(--gold-light); }
.gl-hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,.85); max-width:540px;
  line-height:1.75; margin-bottom:2rem;
  opacity:0; animation:glFadeUp .6s ease forwards .5s;
}
.gl-hero-pills {
  display:flex; gap:.65rem; flex-wrap:wrap;
  opacity:0; animation:glFadeUp .6s ease forwards .65s;
}
.gl-hero-pill {
  padding:.42rem 1rem; border-radius:100px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  font-size:.82rem; font-weight:600; color:#fff;
}

/* Stats bar */
#gl-stats-bar { background:var(--bg); border-bottom:1px solid var(--border); padding:1.6rem 5vw; }
.gl-stats-inner { max-width:1320px; margin:0 auto; display:flex; justify-content:space-around; flex-wrap:wrap; gap:1rem; }
.gl-sb-stat { text-align:center; }
.gl-sb-num { font-size:2rem; font-weight:900; color:var(--gold); letter-spacing:-.04em; display:block; }
.gl-sb-label { font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }

/* Filter bar */
.gl-filter-bar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem;
}
.gl-filter-tabs { display:flex; gap:.6rem; flex-wrap:wrap; }
.gl-filter-tab {
  padding:.55rem 1.4rem; border-radius:100px;
  font-size:.9rem; font-weight:700; cursor:pointer;
  border:1.5px solid var(--border); background:transparent; color:var(--text-muted);
  transition:all var(--transition);
}
.gl-filter-tab.active,.gl-filter-tab:hover { background:var(--gold); border-color:var(--gold); color:#fff; }
.gl-layout-toggle { display:flex; gap:.4rem; }
.gl-lt-btn {
  width:38px; height:38px; border-radius:8px;
  border:1.5px solid var(--border); background:transparent; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  cursor:pointer; transition:all var(--transition);
}
.gl-lt-btn.active,.gl-lt-btn:hover { background:var(--gold); border-color:var(--gold); color:#fff; }
.gl-count-badge {
  font-size:.82rem; font-weight:700; color:var(--text-muted);
  padding:.4rem 1rem; background:var(--bg-alt); border-radius:100px; border:1px solid var(--border);
}
.gl-count-badge span { color:var(--gold); font-weight:900; }

/* Masonry grid */
#gl-grid { columns:4; column-gap:1rem; transition:all .4s ease; }
#gl-grid.cols-3 { columns:3; }
#gl-grid.cols-2 { columns:2; }
.gl-item {
  break-inside:avoid; margin-bottom:1rem; border-radius:var(--radius);
  overflow:hidden; position:relative; cursor:pointer;
  opacity:0; transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease, box-shadow var(--transition);
}
.gl-item.visible { opacity:1; transform:translateY(0); }
.gl-item:hover   { box-shadow:var(--shadow-lg); }
.gl-item img { width:100%; height:auto; display:block; transition:transform .6s ease; }
.gl-item:hover img { transform:scale(1.05); }
.gl-item-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,22,40,.92) 0%,rgba(10,22,40,.3) 50%,transparent 100%);
  opacity:0; transition:opacity .35s ease;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem;
}
.gl-item:hover .gl-item-overlay { opacity:1; }
.gl-item-cat {
  display:inline-block; font-size:.68rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:.12em;
  background:rgba(184,150,62,.2); border:1px solid rgba(184,150,62,.5);
  border-radius:100px; padding:.2rem .65rem; margin-bottom:.4rem; width:fit-content;
}
.gl-item-title { font-size:.95rem; font-weight:800; color:#fff; line-height:1.3; margin-bottom:.3rem; }
.gl-item-loc   { font-size:.78rem; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:.3rem; }
.gl-item-badge {
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-size:.65rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em;
  padding:.2rem .6rem; border-radius:100px;
}
.gl-item-badge.new      { background:#22c55e; color:#fff; }
.gl-item-badge.featured { background:var(--gold); color:#fff; }
.gl-item-zoom {
  position:absolute; top:.85rem; right:.85rem; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem;
  opacity:0; transform:scale(.8); transition:opacity .3s ease, transform .3s ease;
}
.gl-item:hover .gl-item-zoom { opacity:1; transform:scale(1); }

#gl-section { padding:5rem 5vw; background:var(--bg); }
.gl-section-inner { max-width:1320px; margin:0 auto; }

/* Lightbox */
#gl-lightbox {
  position:fixed; inset:0; z-index:10000;
  background:rgba(5,12,24,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
#gl-lightbox.open { opacity:1; visibility:visible; }
.gl-lb-inner {
  position:relative; max-width:90vw; max-height:90vh;
  display:flex; align-items:center; gap:1.5rem;
}
.gl-lb-img-wrap {
  position:relative; flex:1;
  display:flex; align-items:center; justify-content:center;
}
#gl-lb-img {
  max-width:75vw; max-height:85vh; border-radius:12px; object-fit:contain;
  box-shadow:0 32px 80px rgba(0,0,0,.6); transition:opacity .25s ease;
}
.gl-lb-info {
  position:absolute; bottom:0; left:0; right:0; padding:1.5rem;
  background:linear-gradient(to top,rgba(5,12,24,.9),transparent);
  border-radius:0 0 12px 12px;
}
.gl-lb-cat   { font-size:.7rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.25rem; }
.gl-lb-title { font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:.15rem; }
.gl-lb-loc   { font-size:.85rem; color:rgba(255,255,255,.65); }
.gl-lb-btn {
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:all var(--transition);
}
.gl-lb-btn:hover { background:var(--gold); border-color:var(--gold); }
.gl-lb-close {
  position:absolute; top:-1rem; right:-1rem;
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
  color:#fff; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--transition); z-index:2;
}
.gl-lb-close:hover { background:#ef4444; border-color:#ef4444; }
.gl-lb-counter {
  position:absolute; top:-1rem; left:0;
  font-size:.8rem; font-weight:700; color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  padding:.3rem .85rem; border-radius:100px;
}
.gl-lb-thumbs {
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem; max-width:90vw; overflow-x:auto; padding:.5rem;
  scrollbar-width:none; z-index:10001;
}
.gl-lb-thumbs::-webkit-scrollbar { display:none; }
.gl-lb-thumb {
  width:56px; height:42px; border-radius:7px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; flex-shrink:0;
  transition:border-color .25s ease, transform .25s ease;
}
.gl-lb-thumb.active { border-color:var(--gold); transform:scale(1.1); }
.gl-lb-thumb img { width:100%; height:100%; object-fit:cover; }

/* Featured strip */
#gl-featured { padding:5rem 5vw; background:var(--bg-alt); }
.gl-featured-inner { max-width:1320px; margin:0 auto; }
.gl-fs-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem; }
.gl-fs-card {
  border-radius:20px; overflow:hidden; position:relative; cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition);
}
.gl-fs-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.gl-fs-card img {
  width:100%; height:100%; object-fit:cover; min-height:260px;
  transition:transform .6s ease;
}
.gl-fs-card:hover img { transform:scale(1.05); }
.gl-fs-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,22,40,.88) 0%,transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem;
}
.gl-fs-label { font-size:.7rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.3rem; }
.gl-fs-name  { font-size:1.1rem; font-weight:800; color:#fff; line-height:1.3; }
.gl-fs-sub   { font-size:.8rem; color:rgba(255,255,255,.65); margin-top:.2rem; }
.gl-fs-right { display:flex; flex-direction:column; gap:1rem; }

/* Gallery CTA */
#gl-cta {
  background:var(--bg); padding:5rem 5vw; text-align:center;
  position:relative; overflow:hidden;
}
#gl-cta::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:40%;
  background:radial-gradient(ellipse at 50% 100%,rgba(184,150,62,.18) 0%,transparent 70%);
  pointer-events:none;
}
.gl-cta-inner    { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.gl-cta-eyebrow  { display:block; font-size:.8rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.16em; margin-bottom:.75rem; }
.gl-cta-title    { font-size:clamp(2rem,3.5vw,2.8rem); font-weight:900; color:var(--text); letter-spacing:-.03em; margin-bottom:.75rem; line-height:1.1; }
.gl-cta-title .gl-gold-word { color:var(--gold); }
.gl-cta-sub      { font-size:1.05rem; color:var(--text-muted); margin-bottom:2rem; line-height:1.7; }
.gl-cta-btns     { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE — SERVICES                                              ║
   ╚═══════════════════════════════════════════════════════════════╝ */

#svc-page-hero {
  position:relative; padding:9rem 5vw 5rem;
  min-height:540px; display:flex; align-items:center;
  overflow:hidden; background:var(--navy);
}
#svc-page-hero .svc-hero-bg-img {
  position:absolute; inset:-8%;
  background-image:url('../img/gallery/H1.jpg');
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  animation:heroZoom 20s ease-in-out infinite alternate; z-index:0;
}
#svc-page-hero .svc-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(110deg,rgba(9,20,38,.82) 0%,rgba(9,20,38,.60) 50%,rgba(9,20,38,.38) 100%);
  z-index:1;
}
.svc-page-hero-content { position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.svc-page-hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(184,150,62,.2); border:1px solid rgba(184,150,62,.5);
  padding:.4rem 1.1rem; border-radius:100px;
  font-size:.78rem; font-weight:700; color:var(--gold-light);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.25rem;
  opacity:0; animation:glFadeUp .6s ease forwards .2s;
}
.svc-page-hero-title {
  font-size:clamp(2.4rem,4.5vw,4rem); font-weight:900; color:#fff;
  line-height:1.05; letter-spacing:-.03em; margin-bottom:1rem;
  opacity:0; animation:glFadeUp .7s ease forwards .35s;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.svc-page-hero-title .svc-gold-word { color:var(--gold-light); }
.svc-page-hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,.88); max-width:560px;
  line-height:1.75; margin-bottom:2rem;
  opacity:0; animation:glFadeUp .6s ease forwards .5s;
}
.svc-page-hero-pills { display:flex; gap:.65rem; flex-wrap:wrap; opacity:0; animation:glFadeUp .6s ease forwards .65s; }
.svc-hero-pill {
  padding:.42rem 1rem; border-radius:100px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  font-size:.82rem; font-weight:600; color:#fff; backdrop-filter:blur(6px);
}

/* Filter strip */
#svc-filter-strip {
  position:sticky; top:70px; z-index:100;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:.85rem 5vw; transition:background var(--transition);
  box-shadow:0 2px 16px rgba(15,44,74,.06);
}
.svc-filter-strip-inner {
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.svc-filter-label {
  font-size:.78rem; font-weight:800; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.1em; margin-right:.5rem; white-space:nowrap;
}
.svc-ftab {
  padding:.5rem 1.25rem; border-radius:100px; border:1.5px solid var(--border);
  background:transparent; color:var(--text-muted);
  font-size:.9rem; font-weight:700; cursor:pointer;
  transition:all .25s ease; white-space:nowrap; font-family:var(--font);
  display:flex; align-items:center; gap:.4rem;
}
.svc-ftab:hover { border-color:var(--gold); color:var(--gold); }
.svc-ftab.svc-active { background:var(--gold); border-color:var(--gold); color:#fff; }
.svc-ftab-count {
  background:rgba(255,255,255,.25); border-radius:100px;
  padding:.05rem .45rem; font-size:.72rem; font-weight:800;
}
.svc-ftab:not(.svc-active) .svc-ftab-count { background:var(--bg-alt); color:var(--text-muted); }
.svc-search-wrap { margin-left:auto; }
.svc-search-box {
  display:flex; align-items:center; gap:.5rem;
  background:var(--bg-alt); border:1.5px solid var(--border);
  border-radius:100px; padding:.45rem 1rem; transition:border-color .25s ease;
}
.svc-search-box:focus-within { border-color:var(--gold); }
.svc-search-box input {
  background:none; border:none; outline:none;
  font-family:var(--font); font-size:.9rem; color:var(--text); width:180px;
}
.svc-search-box input::placeholder { color:var(--text-muted); opacity:.7; }
.svc-search-box i { color:var(--text-muted); font-size:.95rem; }

/* Services main grid */
#svc-services-main { padding:4rem 5vw 6rem; }
.svc-services-container { max-width:1320px; margin:0 auto; }
.svc-cat-heading {
  display:flex; align-items:center; gap:1rem;
  margin-bottom:2rem; margin-top:3.5rem; padding-bottom:.75rem;
  border-bottom:2px solid var(--border);
}
.svc-cat-heading:first-child  { margin-top:0; }
.svc-cat-heading-icon  { font-size:1.4rem; }
.svc-cat-heading-label { font-size:.78rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; }
.svc-cat-heading-count {
  margin-left:auto; background:var(--gold-pale); color:var(--gold);
  border-radius:100px; padding:.25rem .85rem; font-size:.8rem; font-weight:800;
}
.svc-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }

.svc-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:18px; padding:1.8rem; cursor:pointer;
  transition:all .3s ease; position:relative; overflow:hidden;
  opacity:0; transform:translateY(28px);
}
.svc-card.svc-visible { opacity:1; transform:translateY(0); }
.svc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.svc-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; }
.svc-card-icon {
  width:52px; height:52px; border-radius:13px; background:var(--gold-pale);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  flex-shrink:0; transition:background .3s ease;
}
.svc-card:hover .svc-card-icon { background:var(--gold); }
.svc-card-cat {
  font-size:.7rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:.1em; background:var(--gold-pale);
  padding:.25rem .7rem; border-radius:100px;
}
.svc-card-name {
  font-size:1.05rem; font-weight:800; color:var(--text);
  margin-bottom:.5rem; letter-spacing:-.01em; line-height:1.2;
  transition:color .3s ease;
}
.svc-card:hover .svc-card-name { color:var(--gold); }
.svc-card-desc { font-size:.9rem; color:var(--text-muted); line-height:1.65; margin-bottom:1.1rem; }
.svc-card-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.svc-tag {
  font-size:.72rem; font-weight:700; color:var(--text-muted);
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:6px; padding:.2rem .6rem; transition:all .2s ease;
}
.svc-card:hover .svc-tag { border-color:rgba(184,150,62,.3); color:var(--gold); }
.svc-card-cta {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem; border-top:1px solid var(--border);
  font-size:.87rem; font-weight:700; color:var(--gold);
}
.svc-card-cta-arrow {
  width:30px; height:30px; border-radius:8px; background:var(--gold-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:all .25s ease; color:var(--gold);
}
.svc-card:hover .svc-card-cta-arrow { background:var(--gold); color:#fff; transform:translateX(3px); }
.svc-no-results { text-align:center; padding:4rem 2rem; color:var(--text-muted); display:none; }
.svc-no-results.svc-show { display:block; }

/* Services CTA */
#svc-cta-section {
  background:var(--bg); padding:5rem 5vw; text-align:center;
  position:relative; overflow:hidden;
}
#svc-cta-section::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:40%;
  background:radial-gradient(ellipse at 50% 100%,rgba(184,150,62,.20) 0%,transparent 70%);
  pointer-events:none;
}
.svc-cta-inner   { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.svc-cta-eyebrow { display:block; font-size:.8rem; font-weight:800; color:var(--gold-light); text-transform:uppercase; letter-spacing:.16em; margin-bottom:.75rem; }
.svc-cta-title   { font-size:clamp(2rem,3.5vw,2.8rem); font-weight:900; color:var(--text); letter-spacing:-.03em; margin-bottom:.75rem; line-height:1.1; }
.svc-cta-title .svc-gold-word { color:var(--gold-light); }
.svc-cta-sub     { font-size:1.05rem; color:var(--text); margin-bottom:2rem; line-height:1.7; }
.svc-cta-btns    { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Compare table */
#svc-compare { background:var(--bg-alt); padding:5rem 5vw; }
.svc-compare-container { max-width:1100px; margin:0 auto; }
.svc-section-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:.75rem;
}
.svc-section-tag::before  { content:''; width:24px; height:2.5px; background:var(--gold); flex-shrink:0; }
.svc-section-title        { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:900; letter-spacing:-.03em; color:var(--text); margin-bottom:.75rem; line-height:1.1; }
.svc-section-subtitle     { font-size:1rem; color:var(--text-muted); max-width:520px; margin-bottom:2.5rem; line-height:1.75; }
.svc-compare-table { width:100%; border-collapse:collapse; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.svc-compare-table thead th { padding:1.1rem 1.4rem; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.svc-compare-table thead th:first-child    { background:var(--bg-alt); color:var(--text-muted); text-align:left; }
.svc-compare-table thead th.svc-col-shpe  { background:var(--gold); color:#fff; }
.svc-compare-table thead th:not(:first-child):not(.svc-col-shpe) { background:var(--card-bg); color:var(--text-muted); border-left:1px solid var(--border); }
.svc-compare-table tbody tr { border-bottom:1px solid var(--border); }
.svc-compare-table tbody tr:last-child { border-bottom:none; }
.svc-compare-table tbody tr:hover td { background:var(--gold-pale) !important; }
.svc-compare-table tbody td { padding:1rem 1.4rem; font-size:.92rem; }
.svc-compare-table tbody td:first-child  { font-weight:700; color:var(--text); background:var(--card-bg); }
.svc-compare-table tbody td.svc-col-shpe { background:rgba(184,150,62,.06); font-weight:800; color:var(--gold); text-align:center; border-left:2px solid rgba(184,150,62,.2); }
.svc-compare-table tbody td:not(:first-child):not(.svc-col-shpe) { text-align:center; color:var(--text-muted); background:var(--card-bg); border-left:1px solid var(--border); }
.svc-check { color:var(--gold); font-size:1rem; }
.svc-cross { color:#e55; font-size:1rem; }

/* Services process strip */
#svc-process-strip { background:var(--bg); padding:5rem 5vw; }
.svc-ps-container { max-width:1100px; margin:0 auto; }
.svc-process-steps {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1rem; margin-top:3rem; position:relative;
}
.svc-process-steps::before {
  content:''; position:absolute; top:36px; left:10%; right:10%;
  height:2px; background:var(--border); z-index:0;
}
.svc-ps {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative; z-index:1;
  opacity:0; transform:translateY(20px); transition:all .5s ease;
}
.svc-ps.svc-visible { opacity:1; transform:translateY(0); }
.svc-ps-circle {
  width:72px; height:72px; border-radius:50%;
  border:2px solid var(--border); background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  margin-bottom:1.25rem; transition:all .4s ease;
}
.svc-ps-circle.svc-lit { background:var(--gold); border-color:var(--gold); }
.svc-ps-circle.svc-lit .svc-ps-num { color:#fff; }
.svc-ps-num   { font-size:.62rem; font-weight:800; color:var(--gold); display:block; }
.svc-ps-ico   { font-size:1.4rem; }
.svc-ps-title { font-size:.88rem; font-weight:800; color:var(--text); margin-bottom:.3rem; }
.svc-ps-desc  { font-size:.78rem; color:var(--text-muted); line-height:1.55; }

/* Reveal helpers (services page uses svc-reveal prefix too) */
.svc-reveal { opacity:0; transform:translateY(36px); transition:opacity .6s ease, transform .6s ease; }
.svc-reveal.svc-visible { opacity:1; transform:translateY(0); }
.svc-reveal-left { opacity:0; transform:translateX(-36px); transition:opacity .6s ease, transform .6s ease; }
.svc-reveal-left.svc-visible { opacity:1; transform:translateX(0); }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE — CONTACT                                               ║
   ╚═══════════════════════════════════════════════════════════════╝ */

#contact-hero {
  position:relative; padding:9rem 5vw 5rem;
  min-height:500px; display:flex; align-items:center;
  overflow:hidden; background:var(--navy);
}
#contact-hero .contact-hero-bg {
  position:absolute; inset:-8%;
  background-image:url('../img/gallery/CLoth shop 03.jpg');
  background-size:cover; background-position:center;
  animation:heroZoom 20s ease-in-out infinite alternate; z-index:0;
}
#contact-hero .contact-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(110deg,rgba(9,20,38,.85) 0%,rgba(9,20,38,.65) 55%,rgba(9,20,38,.40) 100%);
  z-index:1;
}
.contact-hero-content { position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.contact-hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(184,150,62,.2); border:1px solid rgba(184,150,62,.5);
  padding:.4rem 1.1rem; border-radius:100px;
  font-size:.78rem; font-weight:700; color:var(--gold-light);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.25rem;
  opacity:0; animation:glFadeUp .6s ease forwards .2s;
}
.contact-hero-title {
  font-size:clamp(2.4rem,4.5vw,4rem); font-weight:900; color:#fff;
  line-height:1.05; letter-spacing:-.03em; margin-bottom:1rem;
  opacity:0; animation:glFadeUp .7s ease forwards .35s;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.contact-hero-title .contact-gold-word { color:var(--gold-light); }
.contact-hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,.88); max-width:540px;
  line-height:1.75; margin-bottom:2rem;
  opacity:0; animation:glFadeUp .6s ease forwards .5s;
}
.contact-hero-pills { display:flex; gap:.65rem; flex-wrap:wrap; opacity:0; animation:glFadeUp .6s ease forwards .65s; }
.contact-hero-pill {
  padding:.42rem 1rem; border-radius:100px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  font-size:.82rem; font-weight:600; color:#fff; backdrop-filter:blur(6px);
}

/* Quick strip */
#contact-quick-strip { background:var(--gold); padding:0; }
.cqs-inner { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.cqs-item {
  display:flex; align-items:center; gap:1rem;
  padding:1.4rem 2rem; border-right:1px solid rgba(255,255,255,.2);
  transition:background .25s ease; cursor:pointer; text-decoration:none;
}
.cqs-item:last-child { border-right:none; }
.cqs-item:hover { background:rgba(255,255,255,.12); }
.cqs-icon {
  width:46px; height:46px; background:rgba(255,255,255,.2); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  flex-shrink:0; transition:background .25s ease;
}
.cqs-item:hover .cqs-icon { background:rgba(255,255,255,.35); }
.cqs-label { font-size:.72rem; font-weight:800; color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.08em; }
.cqs-value { font-size:.95rem; font-weight:700; color:#fff; }

/* Main section */
#contact-main-section { padding:5rem 5vw 6rem; background:var(--bg); }
.contact-grid-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:start; }
.contact-left-col    { display:flex; flex-direction:column; gap:1.25rem; }

/* Location cards */
.loc-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  transition:all .3s ease;
}
.loc-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.loc-card-header {
  background:var(--gold-light); padding:1.1rem 1.4rem;
  display:flex; align-items:center; gap:.85rem;
}
.loc-badge { width:36px; height:36px; background:var(--gold); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.loc-title    { font-weight:800; font-size:.95rem; color:#fff; }
.loc-subtitle { font-size:.75rem; color:rgba(255,255,255,.65); }
.loc-card-body { padding:1.25rem 1.4rem; }
.loc-detail { display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1rem; }
.loc-detail:last-child { margin-bottom:0; }
.ld-icon {
  width:34px; height:34px; background:var(--gold-pale); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  flex-shrink:0; color:var(--gold);
}
.ld-label { font-size:.72rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.07em; }
.ld-value { font-size:.92rem; color:var(--text); line-height:1.5; }
.ld-value a { color:var(--gold); font-weight:600; }
.loc-map { height:180px; border-top:1px solid var(--border); }
.loc-map iframe { width:100%; height:100%; border:none; display:block; }

/* Channel cards */
.contact-channels { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.cc-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:14px; padding:1.15rem; display:flex; gap:.85rem;
  align-items:center; transition:all .25s ease; cursor:pointer; text-decoration:none;
}
.cc-card:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }
.cc-icon {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.cc-wa    .cc-icon { background:#dcfce7; }
.cc-call  .cc-icon { background:var(--gold-pale); }
.cc-email .cc-icon { background:#eff6ff; }
.cc-hours .cc-icon { background:var(--bg-alt); }
.cc-label { font-size:.72rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; }
.cc-value { font-size:.88rem; font-weight:700; color:var(--text); line-height:1.3; }
.cc-wa   .cc-value { color:#16a34a; }
.cc-call .cc-value { color:var(--gold); }

/* Enquiry form */
.contact-enquiry-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:24px; padding:2.8rem; box-shadow:var(--shadow);
  position:sticky; top:90px;
}
.enquiry-form-header { margin-bottom:2rem; }
.enquiry-form-header h3 { font-size:1.5rem; font-weight:900; color:var(--text); letter-spacing:-.02em; margin-bottom:.35rem; }
.enquiry-form-header p  { font-size:.92rem; color:var(--text-muted); }
.enquiry-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.enquiry-form-group { margin-bottom:1.1rem; }
.enquiry-form-group label {
  display:block; font-size:.75rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.45rem;
}
.enquiry-form-group input,
.enquiry-form-group select,
.enquiry-form-group textarea {
  width:100%; padding:.9rem 1.05rem;
  border:1.5px solid var(--border); border-radius:10px;
  font-family:var(--font); font-size:1rem; color:var(--text);
  background:var(--bg); outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
  appearance:none;
}
.enquiry-form-group select option  { background:var(--bg); color:var(--text); }
.enquiry-form-group textarea       { resize:vertical; min-height:115px; }
.enquiry-form-group input:focus,
.enquiry-form-group select:focus,
.enquiry-form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,150,62,.12); }
.enquiry-form-group input::placeholder,
.enquiry-form-group textarea::placeholder { color:var(--text-muted); opacity:.6; }
.enquiry-assurance { display:flex; gap:1.5rem; margin-top:1.1rem; flex-wrap:wrap; }
.ea-item { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text-muted); font-weight:600; }
.ea-item i { color:var(--gold); }

/* Contact process */
#contact-process { background:var(--bg-alt); padding:5rem 5vw; }
.process-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:.5rem; }
.process-card  {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:18px; padding:2rem; transition:all .3s ease;
  position:relative; overflow:hidden;
}
.process-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.process-card:hover::before { transform:scaleX(1); }
.process-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.process-icon  { font-size:2.2rem; margin-bottom:1rem; }
.process-title { font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:.5rem; }
.process-desc  { font-size:.92rem; color:var(--text-muted); line-height:1.7; }

/* Contact FAQ */
#contact-faq { background:var(--bg); padding:5rem 5vw; }
.contact-faq-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-faq-list { max-width:100%; }
.cfaq-item { border-bottom:1px solid var(--border); overflow:hidden; }
.cfaq-question {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem 0; cursor:pointer; gap:1rem;
  font-size:1rem; font-weight:700; color:var(--text); transition:color .25s ease;
}
.cfaq-question:hover { color:var(--gold); }
.cfaq-icon {
  width:30px; height:30px; border-radius:50%; background:var(--bg-alt);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; transition:all .3s ease; color:var(--gold);
}
.cfaq-item.open .cfaq-icon { background:var(--gold); color:#fff; transform:rotate(45deg); }
.cfaq-answer {
  font-size:.95rem; color:var(--text-muted); line-height:1.8;
  max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease; padding-bottom:0;
}
.cfaq-item.open .cfaq-answer { max-height:300px; padding-bottom:1.25rem; }

/* Contact FAQ side */
.contact-faq-side { background:var(--navy); border-radius:20px; padding:2.5rem; position:sticky; top:90px; text-align:center; }
.cfs-icon  { font-size:3rem; margin-bottom:1.25rem; }
.cfs-title { font-size:1.3rem; font-weight:900; color:#fff; margin-bottom:.6rem; letter-spacing:-.02em; }
.cfs-desc  { font-size:.92rem; color:rgba(255,255,255,.75); line-height:1.7; margin-bottom:2rem; }
.cfs-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 2rem; background:var(--gold); color:#fff;
  border-radius:10px; font-weight:800; font-size:1rem;
  transition:all var(--transition); margin-bottom:.85rem; cursor:pointer; text-decoration:none;
}
.cfs-btn:hover { background:var(--gold-light); transform:scale(1.02); }
.cfs-btn-outline {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 2rem; background:rgba(255,255,255,.1); color:#fff;
  border-radius:10px; font-weight:700; font-size:1rem;
  transition:all var(--transition); cursor:pointer;
  border:1px solid rgba(255,255,255,.25); text-decoration:none;
}
.cfs-btn-outline:hover { background:rgba(255,255,255,.2); }
.cfs-divider { height:1px; background:rgba(255,255,255,.12); margin:1.5rem 0; }
.cfs-hours       { font-size:.82rem; color:rgba(255,255,255,.65); text-align:center; }
.cfs-hours strong{ color:var(--gold-light); display:block; margin-bottom:.25rem; }

/* Social strip */
#contact-social-strip { background:var(--bg-alt); padding:3rem 5vw; border-top:1px solid var(--border); }
.css-inner { max-width:1320px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.css-left h3 { font-size:1.2rem; font-weight:900; color:var(--text); letter-spacing:-.02em; }
.css-left p  { font-size:.9rem; color:var(--text-muted); margin-top:.2rem; }
.css-icons   { display:flex; gap:.75rem; }
.css-icon {
  width:46px; height:46px; border-radius:10px; background:var(--card-bg);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--text-muted); cursor:pointer;
  transition:all var(--transition); text-decoration:none;
}
.css-icon:hover { background:var(--gold); color:#fff; border-color:var(--gold); transform:translateY(-3px); }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE — PROJECTS                                              ║
   ╚═══════════════════════════════════════════════════════════════╝ */

#prj-page-hero {
  position:relative; padding:9rem 5vw 5rem;
  min-height:540px; display:flex; align-items:center;
  overflow:hidden; background:var(--navy);
}
#prj-page-hero .prj-hero-bg-img {
  position:absolute; inset:-8%;
  background-image:url('../img/gallery/muruga1.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  animation:heroZoom 20s ease-in-out infinite alternate; z-index:0;
}
#prj-page-hero .prj-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(110deg,rgba(9,20,38,.82) 0%,rgba(9,20,38,.60) 50%,rgba(9,20,38,.38) 100%);
  z-index:1;
}
.prj-hero-content { position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.prj-hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(184,150,62,.2); border:1px solid rgba(184,150,62,.5);
  padding:.4rem 1.1rem; border-radius:100px;
  font-size:.78rem; font-weight:700; color:var(--gold-light);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.25rem;
  opacity:0; animation:glFadeUp .6s ease forwards .2s;
}
.prj-hero-title {
  font-size:clamp(2.4rem,4.5vw,4rem); font-weight:900; color:#fff;
  line-height:1.05; letter-spacing:-.03em; margin-bottom:1rem;
  opacity:0; animation:glFadeUp .7s ease forwards .35s;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.prj-hero-title .prj-gold { color:var(--gold-light); }
.prj-hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,.88); max-width:560px;
  line-height:1.75; margin-bottom:2rem;
  opacity:0; animation:glFadeUp .6s ease forwards .5s;
}
.prj-hero-pills { display:flex; gap:.65rem; flex-wrap:wrap; opacity:0; animation:glFadeUp .6s ease forwards .65s; }
.prj-hero-pill {
  padding:.42rem 1rem; border-radius:100px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  font-size:.82rem; font-weight:600; color:#fff; backdrop-filter:blur(6px);
}

/* Stats bar */
.prj-stats-bar   { background:var(--bg); }
.prj-stats-inner {
  max-width:1100px; margin:0 auto; padding:2rem 5vw;
  display:flex; justify-content:space-around; flex-wrap:wrap; gap:1rem;
  box-shadow:0 -4px 40px rgba(15,44,74,.08);
}
.prj-stat       { text-align:center; }
.prj-stat-num   { font-family:var(--font); font-size:2.2rem; font-weight:900; color:var(--gold); letter-spacing:-.04em; display:block; }
.prj-stat-label { font-size:.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; }

/* Filter strip */
#prj-filter-strip {
  position:sticky; top:70px; z-index:100;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:.85rem 5vw; box-shadow:0 2px 16px rgba(15,44,74,.06);
}
.prj-filter-inner { max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.prj-filter-label { font-size:.78rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; margin-right:.5rem; white-space:nowrap; }
.prj-ftab {
  padding:.5rem 1.25rem; border-radius:100px; border:1.5px solid var(--border);
  background:transparent; color:var(--text-muted); font-size:.9rem; font-weight:700;
  cursor:pointer; transition:all .25s ease; white-space:nowrap; font-family:var(--font);
  display:flex; align-items:center; gap:.4rem;
}
.prj-ftab:hover { border-color:var(--gold); color:var(--gold); }
.prj-ftab.prj-active { background:var(--gold); border-color:var(--gold); color:#fff; }
.prj-ftab-count { background:rgba(255,255,255,.25); border-radius:100px; padding:.05rem .45rem; font-size:.72rem; font-weight:800; }
.prj-ftab:not(.prj-active) .prj-ftab-count { background:var(--bg-alt); color:var(--text-muted); }

/* Projects main grid */
#prj-main { padding:4rem 5vw 6rem; }
.prj-container { max-width:1320px; margin:0 auto; }
.prj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.prj-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:20px; overflow:hidden; cursor:pointer;
  transition:all .35s ease; position:relative;
  opacity:0; transform:translateY(28px);
}
.prj-card.prj-visible { opacity:1; transform:translateY(0); }
.prj-card:hover       { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.prj-card.prj-featured { grid-column:span 2; }
.prj-img-wrap { overflow:hidden; height:260px; position:relative; }
.prj-card.prj-featured .prj-img-wrap { height:360px; }
.prj-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.prj-card:hover .prj-img-wrap img { transform:scale(1.07); }
.prj-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(9,20,38,.88) 0%,rgba(9,20,38,.2) 55%,transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; opacity:0; transition:opacity .35s ease;
}
.prj-card:hover .prj-overlay { opacity:1; }
.prj-overlay-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); color:#fff; padding:.6rem 1.3rem; border-radius:8px;
  font-size:.88rem; font-weight:700; width:fit-content; transition:background .2s ease;
}
.prj-overlay-btn:hover { background:var(--gold-light); }
.prj-badge {
  position:absolute; top:1rem; left:1rem;
  background:var(--gold); color:#fff; padding:.3rem .85rem;
  border-radius:100px; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; z-index:2;
}
.prj-badge.prj-approved { background:#22c55e; }
.prj-badge.prj-premium  { background:var(--navy); }
.prj-body { padding:1.35rem 1.5rem 1.5rem; }
.prj-cat  { font-size:.7rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.4rem; }
.prj-name {
  font-size:1.05rem; font-weight:800; color:var(--text);
  line-height:1.25; margin-bottom:.5rem; letter-spacing:-.01em; transition:color .25s ease;
}
.prj-card:hover .prj-name { color:var(--gold); }
.prj-desc { font-size:.88rem; color:var(--text-muted); line-height:1.65; margin-bottom:1rem; }
.prj-meta { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding-top:.85rem; border-top:1px solid var(--border); }
.prj-tag {
  font-size:.72rem; font-weight:700; color:var(--text-muted);
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:6px; padding:.2rem .6rem; transition:all .2s ease;
}
.prj-card:hover .prj-tag { border-color:rgba(184,150,62,.3); color:var(--gold); }
.prj-no-results { text-align:center; padding:4rem 2rem; color:var(--text-muted); display:none; }
.prj-no-results.prj-show { display:block; }

/* PDF section */
#prj-pdf-section { background:var(--bg-alt); padding:5rem 5vw; }
.prj-pdf-container { max-width:1320px; margin:0 auto; }
.prj-pdf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.prj-pdf-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:16px; padding:1.5rem; cursor:pointer;
  transition:all .3s ease; display:flex; align-items:center; gap:1.1rem;
  opacity:0; transform:translateY(20px);
}
.prj-pdf-card.prj-visible { opacity:1; transform:translateY(0); }
.prj-pdf-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.prj-pdf-icon {
  width:50px; height:50px; border-radius:12px; background:var(--gold-pale);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  flex-shrink:0; transition:background .3s ease;
}
.prj-pdf-card:hover .prj-pdf-icon { background:var(--gold); }
.prj-pdf-info { flex:1; min-width:0; }
.prj-pdf-name { font-size:.95rem; font-weight:800; color:var(--text); margin-bottom:.2rem; transition:color .25s ease; }
.prj-pdf-card:hover .prj-pdf-name { color:var(--gold); }
.prj-pdf-sub  { font-size:.8rem; color:var(--text-muted); }
.prj-pdf-arrow {
  width:28px; height:28px; border-radius:7px; background:var(--gold-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--gold); transition:all .25s ease; flex-shrink:0;
}
.prj-pdf-card:hover .prj-pdf-arrow { background:var(--gold); color:#fff; transform:translateX(3px); }

/* Portfolio grid */
#prj-portfolio { background:var(--bg); padding:5rem 5vw; }
.prj-portfolio-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:1rem; }
.prj-plan-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:18px; overflow:hidden; cursor:pointer;
  transition:all .35s ease; position:relative;
  opacity:0; transform:translateY(24px);
}
.prj-plan-card.prj-visible { opacity:1; transform:translateY(0); }
.prj-plan-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.prj-plan-img { height:180px; overflow:hidden; position:relative; }
.prj-plan-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.prj-plan-card:hover .prj-plan-img img { transform:scale(1.08); }
.prj-plan-badge { position:absolute; top:.75rem; left:.75rem; padding:.22rem .7rem; border-radius:100px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; z-index:2; }
.prj-plan-badge.approved    { background:#22c55e; color:#fff; }
.prj-plan-badge.premium     { background:var(--navy); color:#fff; }
.prj-plan-badge.scheme      { background:var(--gold); color:#fff; }
.prj-plan-badge.studio      { background:var(--navy-mid); color:#fff; }
.prj-plan-badge.villa       { background:#7c3aed; color:#fff; }
.prj-plan-badge.residential { background:var(--text-muted); color:#fff; }
.prj-plan-body { padding:1.15rem 1.25rem 1.25rem; }
.prj-plan-type { font-size:.68rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.3rem; }
.prj-plan-name { font-size:.95rem; font-weight:800; color:var(--text); margin-bottom:.4rem; line-height:1.2; transition:color .25s ease; }
.prj-plan-card:hover .prj-plan-name { color:var(--gold); }
.prj-plan-desc { font-size:.82rem; color:var(--text-muted); line-height:1.55; margin-bottom:.85rem; }
.prj-plan-tags { display:flex; gap:.4rem; flex-wrap:wrap; padding-top:.75rem; border-top:1px solid var(--border); }
.prj-plan-tag  { font-size:.68rem; font-weight:700; color:var(--text-muted); background:var(--bg-alt); border:1px solid var(--border); border-radius:5px; padding:.18rem .55rem; transition:all .2s ease; }
.prj-plan-card:hover .prj-plan-tag { border-color:rgba(184,150,62,.3); color:var(--gold); }
.prj-plan-cta  { display:flex; align-items:center; justify-content:space-between; padding-top:.85rem; margin-top:.6rem; border-top:1px solid var(--border); font-size:.82rem; font-weight:700; color:var(--gold); }
.prj-plan-arrow{ width:26px; height:26px; border-radius:7px; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-size:.8rem; transition:all .25s ease; color:var(--gold); }
.prj-plan-card:hover .prj-plan-arrow { background:var(--gold); color:#fff; transform:translateX(3px); }

/* Stats strip */
#prj-stats-strip { background:var(--navy); padding:4rem 5vw; }
.prj-stats-strip-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.prj-stat-big-num   { font-size:clamp(2.2rem,4vw,3.2rem); font-weight:900; color:var(--gold-light); letter-spacing:-.04em; display:block; margin-bottom:.35rem; }
.prj-stat-big-label { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; }

/* How it works */
#prj-how-it-works  { background:var(--bg-alt); padding:5rem 5vw; }
.prj-hiw-container { max-width:1100px; margin:0 auto; }
.prj-hiw-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.prj-hiw-step {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:18px; padding:2rem 1.5rem; text-align:center;
  transition:all .35s ease; position:relative; overflow:hidden;
  opacity:0; transform:translateY(24px);
}
.prj-hiw-step.prj-visible { opacity:1; transform:translateY(0); }
.prj-hiw-step::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.prj-hiw-step:hover::before { transform:scaleX(1); }
.prj-hiw-step:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.prj-hiw-num   { font-size:.7rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.75rem; display:block; }
.prj-hiw-icon  { font-size:2.2rem; margin-bottom:1rem; }
.prj-hiw-title { font-size:1rem; font-weight:800; color:var(--text); margin-bottom:.5rem; }
.prj-hiw-desc  { font-size:.88rem; color:var(--text-muted); line-height:1.65; }

/* Projects CTA */
#prj-cta {
  background:var(--bg); padding:5rem 5vw; text-align:center;
  position:relative; overflow:hidden;
}
#prj-cta::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:40%;
  background:radial-gradient(ellipse at 50% 100%,rgba(184,150,62,.20) 0%,transparent 70%);
  pointer-events:none;
}
.prj-cta-inner   { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.prj-cta-eyebrow { display:block; font-size:.8rem; font-weight:800; color:var(--gold-light); text-transform:uppercase; letter-spacing:.16em; margin-bottom:.75rem; }
.prj-cta-title   { font-size:clamp(2rem,3.5vw,2.8rem); font-weight:900; color:var(--text); letter-spacing:-.03em; margin-bottom:.75rem; line-height:1.1; }
.prj-cta-title .prj-gold { color:var(--gold-light); }
.prj-cta-sub     { font-size:1.05rem; color:var(--text-muted); margin-bottom:2rem; line-height:1.7; }
.prj-cta-btns    { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE — WORKFLOW                                              ║
   ╚═══════════════════════════════════════════════════════════════╝ */

#wf-hero {
  position:relative; padding:9rem 5vw 5rem;
  min-height:540px; display:flex; align-items:center;
  overflow:hidden; background:var(--navy);
}
#wf-hero .wf-hero-bg {
  position:absolute; inset:-8%;
  background-image:url('../img/gallery/K1-2.jpg');
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  animation:heroZoom 20s ease-in-out infinite alternate; z-index:0;
}
#wf-hero .wf-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(110deg,rgba(9,20,38,.85) 0%,rgba(9,20,38,.62) 50%,rgba(9,20,38,.40) 100%);
  z-index:1;
}
.wf-hero-content { position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.wf-hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(184,150,62,.2); border:1px solid rgba(184,150,62,.5);
  padding:.4rem 1.1rem; border-radius:100px;
  font-size:.78rem; font-weight:700; color:var(--gold-light);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.25rem;
  opacity:0; animation:glFadeUp .6s ease forwards .2s;
}
.wf-hero-title {
  font-size:clamp(2.4rem,4.5vw,4rem); font-weight:900; color:#fff;
  line-height:1.05; letter-spacing:-.03em; margin-bottom:1rem;
  opacity:0; animation:glFadeUp .7s ease forwards .35s;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.wf-hero-title .wf-gold-word { color:var(--gold-light); }
.wf-hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,.88); max-width:560px;
  line-height:1.75; margin-bottom:2rem;
  opacity:0; animation:glFadeUp .6s ease forwards .5s;
}
.wf-hero-pills { display:flex; gap:.65rem; flex-wrap:wrap; opacity:0; animation:glFadeUp .6s ease forwards .65s; }
.wf-hero-pill  {
  padding:.42rem 1rem; border-radius:100px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  font-size:.82rem; font-weight:600; color:#fff; backdrop-filter:blur(6px);
}

/* Tab nav */
#wf-tab-nav { position:sticky; top:70px; z-index:100; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 2px 16px rgba(15,44,74,.06); }
.wf-tab-inner {
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; overflow-x:auto; padding:0 5vw;
  scrollbar-width:none;
}
.wf-tab-inner::-webkit-scrollbar { display:none; }
.wf-tnav {
  padding:1.05rem 1.5rem; font-size:.9rem; font-weight:700; color:var(--text-muted);
  cursor:pointer; background:none; border-bottom:2.5px solid transparent;
  white-space:nowrap; transition:all .25s ease; font-family:var(--font);
  display:flex; align-items:center; gap:.45rem; flex-shrink:0;
}
.wf-tnav:hover { color:var(--gold); }
.wf-tnav.active { color:var(--gold); border-bottom-color:var(--gold); }

/* Overview */
#wf-overview { padding:5rem 5vw; background:var(--bg); }
.wf-overview-inner { max-width:1320px; margin:0 auto; }
.wf-overview-grid  { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.wf-ov-visual  { position:relative; }
.wf-ov-img     { width:100%; height:480px; object-fit:cover; border-radius:20px; box-shadow:var(--shadow-lg); }
.wf-ov-badge   {
  position:absolute; bottom:-18px; right:-18px;
  background:var(--gold); color:#fff; padding:1.2rem 1.5rem;
  border-radius:14px; text-align:center; box-shadow:var(--shadow-lg);
}
.wf-ov-badge strong { display:block; font-size:2rem; font-weight:900; letter-spacing:-.04em; }
.wf-ov-badge span   { font-size:.78rem; font-weight:700; opacity:.9; text-transform:uppercase; letter-spacing:.05em; }
.wf-ov-chips   { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem; }
.wf-ov-chip    {
  padding:.45rem 1rem; border-radius:100px;
  background:var(--gold-pale); border:1px solid rgba(184,150,62,.3);
  font-size:.82rem; font-weight:700; color:var(--gold);
}
.wf-ov-text p  { color:var(--text-muted); font-size:1rem; line-height:1.85; margin-bottom:1.5rem; }
.wf-ov-highlights { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.wf-ov-hl {
  background:var(--bg-alt); border:1px solid var(--border); border-radius:12px;
  padding:1.1rem 1.25rem; transition:all .3s ease;
}
.wf-ov-hl:hover      { border-color:var(--gold); background:var(--gold-pale); }
.wf-ov-hl-icon  { font-size:1.3rem; margin-bottom:.35rem; }
.wf-ov-hl-title { font-size:.88rem; font-weight:800; color:var(--text); margin-bottom:.2rem; }
.wf-ov-hl-sub   { font-size:.78rem; color:var(--text-muted); }

/* Steps */
#wf-steps      { padding:5rem 5vw; background:var(--bg-alt); }
.wf-steps-inner{ max-width:1100px; margin:0 auto; }
.wf-step-cards { display:flex; flex-direction:column; gap:1.5rem; margin-top:3rem; }
.wf-step-card  {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:20px; overflow:hidden;
  display:grid; grid-template-columns:90px 1fr;
  transition:all .35s ease; opacity:0; transform:translateY(24px);
}
.wf-step-card.visible { opacity:1; transform:translateY(0); }
.wf-step-card:hover   { box-shadow:var(--shadow-lg); border-color:var(--gold); }
.wf-step-num-col {
  background:var(--gold); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:2rem 0; gap:.4rem;
}
.wf-step-big-num { font-size:2.2rem; font-weight:900; color:#fff; letter-spacing:-.06em; line-height:1; }
.wf-step-big-ico { font-size:1.5rem; }
.wf-step-card-body  { padding:2rem; }
.wf-step-card-phase { font-size:.7rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.4rem; }
.wf-step-card-title { font-size:1.25rem; font-weight:900; color:var(--text); margin-bottom:.6rem; letter-spacing:-.02em; }
.wf-step-card-desc  { font-size:.95rem; color:var(--text-muted); line-height:1.75; margin-bottom:1.25rem; }
.wf-step-card-tags  { display:flex; gap:.5rem; flex-wrap:wrap; }
.wf-step-tag {
  display:flex; align-items:center; gap:.35rem;
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:8px; padding:.3rem .75rem;
  font-size:.78rem; font-weight:700; color:var(--text-muted); transition:all .2s ease;
}
.wf-step-card:hover .wf-step-tag { border-color:rgba(184,150,62,.3); color:var(--gold); }
.wf-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* Journey */
#wf-journey      { padding:5rem 5vw; background:var(--bg); overflow:hidden; }
.wf-journey-inner{ max-width:1100px; margin:0 auto; }
.wf-journey-track {
  position:relative; margin-top:3rem;
  display:flex; align-items:flex-start; overflow-x:auto; padding-bottom:1.5rem;
  scrollbar-width:none;
}
.wf-journey-track::-webkit-scrollbar { display:none; }
.wf-journey-track::before {
  content:''; position:absolute; top:36px; left:36px; right:36px; height:2px;
  background:rgba(105,105,105,.15); z-index:0;
}
.wf-jstep {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  flex:1; min-width:110px; position:relative; z-index:1;
  opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease;
}
.wf-jstep.visible { opacity:1; transform:translateY(0); }
.wf-jstep-circle {
  width:72px; height:72px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin-bottom:1rem; transition:all .3s ease; flex-shrink:0;
  border:2px solid rgba(24,23,23,.2); background:rgba(32,31,31,.07);
}
.wf-jstep-circle.lit { background:var(--gold); border-color:var(--gold); }
.wf-jstep-ico   { font-size:1.5rem; }
.wf-jstep-label { font-size:.78rem; font-weight:700; color:rgba(26,26,26,.75); line-height:1.35; padding:0 .25rem; }
.wf-jstep-arrow { position:absolute; top:34px; right:-12px; z-index:2; color:rgba(33,33,33,.3); font-size:1rem; }
.wf-jstep:last-child .wf-jstep-arrow { display:none; }

/* Authorities */
#wf-authorities { padding:5rem 5vw; background:var(--bg); }
.wf-auth-inner  { max-width:1100px; margin:0 auto; }
.wf-auth-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:1rem; }
.wf-auth-card {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:18px; padding:1.75rem; cursor:default;
  transition:all .35s ease; position:relative; overflow:hidden;
  opacity:0; transform:translateY(24px);
}
.wf-auth-card.visible { opacity:1; transform:translateY(0); }
.wf-auth-card:hover   { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.wf-auth-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.wf-auth-card:hover::before { transform:scaleX(1); }
.wf-auth-icon-wrap {
  width:56px; height:56px; border-radius:14px; background:var(--gold-pale);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin-bottom:1.1rem; transition:background .3s ease;
}
.wf-auth-card:hover .wf-auth-icon-wrap { background:var(--gold); }
.wf-auth-name   { font-size:1.1rem; font-weight:900; color:var(--text); margin-bottom:.25rem; letter-spacing:-.01em; }
.wf-auth-region { font-size:.82rem; color:var(--text-muted); margin-bottom:1rem; line-height:1.5; }
.wf-auth-time   {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--gold-pale); border:1px solid rgba(184,150,62,.3);
  border-radius:100px; padding:.3rem .85rem; font-size:.78rem; font-weight:800; color:var(--gold);
}
.wf-auth-docs          { margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border); }
.wf-auth-docs-label    { font-size:.7rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.5rem; }
.wf-auth-doc-list      { display:flex; flex-direction:column; gap:.3rem; }
.wf-auth-doc-item      { font-size:.82rem; color:var(--text-muted); display:flex; align-items:center; gap:.4rem; }
.wf-auth-doc-item::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* Documents */
#wf-documents  { padding:5rem 5vw; background:var(--bg-alt); }
.wf-docs-inner { max-width:1100px; margin:0 auto; }
.wf-docs-grid  { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1rem; }
.wf-docs-group {
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:18px; padding:1.75rem;
  opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;
}
.wf-docs-group.visible     { opacity:1; transform:translateY(0); }
.wf-docs-group-header      { display:flex; align-items:center; gap:.85rem; margin-bottom:1.35rem; }
.wf-docs-group-icon        { width:44px; height:44px; border-radius:11px; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.wf-docs-group-title       { font-size:1rem; font-weight:800; color:var(--text); }
.wf-docs-group-sub         { font-size:.78rem; color:var(--text-muted); }
.wf-doc-item               { display:flex; align-items:center; gap:.75rem; padding:.65rem 0; border-bottom:1px solid var(--border); }
.wf-doc-item:last-child    { border-bottom:none; }
.wf-doc-check { width:22px; height:22px; border-radius:6px; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--gold); flex-shrink:0; font-weight:800; }
.wf-doc-name  { font-size:.9rem; font-weight:700; color:var(--text); }
.wf-doc-note  { font-size:.78rem; color:var(--text-muted); margin-top:.1rem; }

/* Workflow FAQ */
#wf-faq       { padding:5rem 5vw; background:var(--bg); }
.wf-faq-inner { max-width:860px; margin:0 auto; }
.wf-faq-list  { margin-top:1rem; }
.wf-faq-item  { border-bottom:1px solid var(--border); overflow:hidden; }
.wf-faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 0; cursor:pointer; gap:1rem;
  font-size:1.05rem; font-weight:700; color:var(--text); transition:color .25s ease;
}
.wf-faq-q:hover { color:var(--gold); }
.wf-faq-icon { width:30px; height:30px; border-radius:50%; background:var(--bg-alt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; transition:all .3s ease; color:var(--gold); }
.wf-faq-item.open .wf-faq-icon { background:var(--gold); color:#fff; transform:rotate(45deg); }
.wf-faq-a { font-size:.98rem; color:var(--text-muted); line-height:1.8; max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease; padding-bottom:0; }
.wf-faq-item.open .wf-faq-a { max-height:400px; padding-bottom:1.25rem; }

/* Workflow CTA */
#wf-cta {
  background:var(--bg); padding:5rem 5vw; text-align:center;
  position:relative; overflow:hidden;
}
#wf-cta::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:40%;
  background:radial-gradient(ellipse at 50% 100%,rgba(184,150,62,.20) 0%,transparent 70%);
  pointer-events:none;
}
.wf-cta-inner   { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.wf-cta-eyebrow { display:block; font-size:.8rem; font-weight:800; color:var(--gold-light); text-transform:uppercase; letter-spacing:.16em; margin-bottom:.75rem; }
.wf-cta-title   { font-size:clamp(2rem,3.5vw,2.8rem); font-weight:900; color:var(--text); letter-spacing:-.03em; margin-bottom:.75rem; line-height:1.1; }
.wf-cta-title .wf-gold-word { color:var(--gold-light); }
.wf-cta-sub     { font-size:1.05rem; color:var(--text-muted); margin-bottom:2rem; line-height:1.7; }
.wf-cta-btns    { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE — ABOUT                                                 ║
   ╚═══════════════════════════════════════════════════════════════╝ */

#abpg-hero-section {
  position:relative; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
  padding-top:100px; padding-bottom:60px; isolation:isolate;
}
.abpg-hero-bg-photo {
  position:absolute; inset:-8%; z-index:0;
  background-image:url('../img/gallery/1-17.jpg');
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  animation:heroZoom 20s ease-in-out infinite alternate; pointer-events:none;
}
.abpg-hero-bg-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(10,18,40,.88) 0%,rgba(15,44,74,.75) 45%,rgba(184,150,62,.18) 100%);
}
body.dark-mode .abpg-hero-bg-photo::after {
  background:linear-gradient(120deg,rgba(5,10,22,.94) 0%,rgba(10,22,40,.85) 50%,rgba(184,150,62,.12) 100%);
}
.abpg-hero-dot-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(circle,rgba(184,150,62,.18) 1.5px,transparent 1.5px);
  background-size:36px 36px; opacity:.5;
}
.abpg-hero-diagonal {
  position:absolute; top:0; right:0; width:45%; height:100%; z-index:1;
  background:linear-gradient(135deg,transparent 0%,rgba(184,150,62,.05) 50%,transparent 100%);
  clip-path:polygon(20% 0,100% 0,100% 100%,0% 100%); pointer-events:none;
}
.abpg-hero-radial-glow {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(184,150,62,.1) 0%,transparent 70%);
}
.abpg-hero-content-wrap { position:relative; z-index:2; width:100%; padding:0 5vw; }
.abpg-hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
  width:100%; max-width:1320px; margin:0 auto;
}

.abpg-hero-badge-pill {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(184,150,62,.15); border:1px solid rgba(184,150,62,.5);
  border-radius:50px; padding:6px 18px 6px 10px; margin-bottom:28px;
  font-size:13px; font-weight:600; letter-spacing:1px; color:var(--gold-light);
  opacity:0; transform:translateY(20px); animation:glFadeUp .8s ease .2s forwards;
}
.abpg-hero-badge-dot { width:7px; height:7px; background:var(--gold); border-radius:50%; animation:abpg-pulse 2s infinite; }

.abpg-hero-main-title {
  font-family:var(--font); font-size:clamp(42px,6vw,88px); font-weight:900;
  line-height:1.02; letter-spacing:-.04em; margin-bottom:28px; color:#fff;
  opacity:0; transform:translateY(30px); animation:glFadeUp .8s ease .35s forwards;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.abpg-hero-main-title em {
  display:block; font-style:normal;
  background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:abpg-shimmer 4s linear infinite;
}
.abpg-hero-description {
  font-size:1.05rem; line-height:1.9; color:rgba(240,237,232,.85); max-width:480px; margin-bottom:40px;
  opacity:0; transform:translateY(20px); animation:glFadeUp .7s ease .5s forwards;
}
.abpg-hero-cta-row {
  display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; transform:translateY(20px); animation:glFadeUp .7s ease .65s forwards;
}

/* Blueprint card (right column) */
.abpg-hero-visual-col {
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  opacity:0; animation:glFadeUp 1s ease .5s forwards;
}
.abpg-hero-card-wrap { position:relative; width:100%; max-width:480px; }
.abpg-hero-blueprint-card {
  width:100%; background:rgba(255,255,255,.06);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(184,150,62,.3); border-radius:20px; padding:32px;
  position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(184,150,62,.1);
}
.abpg-hero-blueprint-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:abpg-shimmer 3s linear infinite; background-size:200% auto;
}
.abpg-hero-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.abpg-hero-card-header span { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-light); font-weight:600; }
.abpg-hero-bp-dots { display:flex; gap:6px; }
.abpg-hero-bp-dot  { width:8px; height:8px; border-radius:50%; }
.abpg-hero-bp-dot:nth-child(1){ background:#FF5F57; }
.abpg-hero-bp-dot:nth-child(2){ background:#FEBC2E; }
.abpg-hero-bp-dot:nth-child(3){ background:#28C840; }
.abpg-hero-floor-plan { width:100%; aspect-ratio:4/3; position:relative; }
.abpg-fp-line   { stroke-dasharray:1000; stroke-dashoffset:1000; animation:abpg-drawLine 2.5s ease forwards; }
.abpg-fp-line-2 { animation-delay:.3s; }
.abpg-fp-line-3 { animation-delay:.6s; }
.abpg-fp-line-4 { animation-delay:.9s; }
.abpg-fp-line-5 { animation-delay:1.2s; }
.abpg-fp-line-6 { animation-delay:1.5s; }
.abpg-fp-line-7 { animation-delay:1.8s; }
.abpg-fp-fill   { opacity:0; animation:abpg-fadeIn .5s 2.2s ease forwards; }
.abpg-hero-bp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
.abpg-hero-bp-stat  {
  background:rgba(184,150,62,.12); border:1px solid rgba(184,150,62,.25);
  border-radius:10px; padding:12px; text-align:center;
}
.abpg-stat-num { font-family:var(--font); font-size:22px; font-weight:800; color:var(--gold-light); line-height:1; letter-spacing:-.03em; }
.abpg-stat-lbl { font-size:10px; letter-spacing:1px; color:rgba(240,237,232,.6); margin-top:4px; text-transform:uppercase; }
.abpg-hero-floating-badge {
  position:absolute; background:rgba(15,38,64,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(184,150,62,.35); border-radius:12px; padding:8px 14px;
  font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.3); color:#fff;
}
.abpg-hero-floating-badge-top    { top:-16px; right:-16px; animation:abpg-float 4s ease-in-out infinite; }
.abpg-hero-floating-badge-bottom { bottom:-14px; left:-14px; animation:abpg-float 5s ease-in-out infinite 1s; }
.abpg-hero-fb-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* Stats marquee */
.abpg-mq-section {
  padding:50px 0; background:var(--bg-alt);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden;
}
.abpg-mq-track { display:flex; animation:abpg-marqueeScroll 30s linear infinite; }
.abpg-mq-track:hover { animation-play-state:paused; }
.abpg-mq-item { flex-shrink:0; display:flex; align-items:center; gap:20px; padding:0 40px; border-right:1px solid var(--border); }
.abpg-mq-num  { font-family:var(--font); font-size:44px; font-weight:900; color:var(--gold); line-height:1; letter-spacing:-.04em; }
.abpg-mq-lbl  { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); max-width:80px; line-height:1.5; }
.abpg-mq-divider { flex-shrink:0; padding:0 40px; font-size:24px; color:var(--gold); opacity:.35; border-right:1px solid var(--border); display:flex; align-items:center; }

/* Story section */
#abpg-story-section { padding:120px 5vw; background:var(--bg-alt); }
.abpg-story-grid  { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start; }
.abpg-story-left  { position:sticky; top:120px; }
.abpg-story-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.abpg-story-eyebrow-line { width:40px; height:1px; background:var(--gold); display:inline-block; }
.abpg-story-big-num {
  font-family:var(--font); font-size:clamp(80px,14vw,160px); font-weight:900;
  line-height:.85; color:transparent; -webkit-text-stroke:1px rgba(184,150,62,.2);
  margin-bottom:-16px; display:block; letter-spacing:-6px;
}
.abpg-story-headline { font-family:var(--font); font-size:clamp(28px,4vw,48px); font-weight:900; line-height:1.1; margin-bottom:20px; letter-spacing:-.03em; }
.abpg-story-headline em { font-style:normal; color:var(--gold); }
.abpg-story-body  { font-size:1rem; line-height:1.85; color:var(--text-muted); margin-bottom:16px; }
.abpg-story-quote { margin-top:32px; padding:24px 28px; background:var(--bg); border-left:3px solid var(--gold); border-radius:0 12px 12px 0; box-shadow:var(--shadow); }
.abpg-story-quote p    { font-size:1.05rem; font-style:italic; line-height:1.6; color:var(--text); }
.abpg-story-quote cite { display:block; margin-top:12px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-style:normal; font-weight:700; }

/* Timeline */
.abpg-tl-wrap    { position:relative; }
.abpg-tl-item    { display:grid; grid-template-columns:auto 1fr; gap:0 1.5rem; margin-bottom:2.5rem; position:relative; }
.abpg-tl-node    { display:flex; flex-direction:column; align-items:center; padding-top:4px; }
.abpg-tl-circle  {
  width:52px; height:52px; border-radius:50%; background:var(--bg);
  border:2px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; position:relative; z-index:1; transition:all .4s ease; flex-shrink:0; box-shadow:var(--shadow);
}
.abpg-tl-item:hover .abpg-tl-circle { border-color:var(--gold); background:var(--gold); }
.abpg-tl-connector { width:1px; height:calc(100% + 10px); flex:1; margin-top:4px; min-height:40px; background:linear-gradient(180deg,var(--gold),var(--border)); }
.abpg-tl-year    { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-top:8px; text-align:center; }
.abpg-tl-card    {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.6rem; box-shadow:var(--shadow); transition:all .35s ease;
  position:relative; overflow:hidden;
}
.abpg-tl-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.abpg-tl-item:hover .abpg-tl-card::before { transform:scaleX(1); }
.abpg-tl-item:hover .abpg-tl-card { transform:translateX(4px); box-shadow:var(--shadow-lg); }
.abpg-tl-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.abpg-tl-title    { font-size:1rem; font-weight:800; color:var(--text); }
.abpg-tl-duration { font-size:.78rem; color:var(--text-muted); }
.abpg-tl-desc     { font-size:.9rem; color:var(--text-muted); line-height:1.7; }

/* Founder */
#abpg-founder-section { padding:120px 5vw; background:var(--bg); }
.abpg-fdr-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; margin-top:60px; }
.abpg-fdr-visual { position:relative; justify-self:end; }
.abpg-fdr-portrait-wrap   { position:relative; display:inline-block; width:100%; max-width:420px; }
.abpg-fdr-corner          { position:absolute; width:44px; height:44px; border-color:var(--gold); border-style:solid; z-index:3; }
.abpg-fdr-corner.tl { top:-14px; left:-14px; border-width:4px 0 0 4px; border-radius:6px 0 0 0; }
.abpg-fdr-corner.tr { top:-14px; right:-14px; border-width:4px 4px 0 0; border-radius:0 6px 0 0; }
.abpg-fdr-corner.bl { bottom:-14px; left:-14px; border-width:0 0 4px 4px; border-radius:0 0 0 6px; }
.abpg-fdr-corner.br { bottom:-14px; right:-14px; border-width:0 4px 4px 0; border-radius:0 0 6px 0; }
.abpg-fdr-portrait {
  width:100%; max-width:420px; aspect-ratio:4/5; border-radius:20px;
  border:1px solid var(--border); overflow:hidden; position:relative; box-shadow:var(--shadow-lg);
}
.abpg-fdr-portrait img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.abpg-fdr-portrait-label {
  position:absolute; bottom:20px; left:20px; right:20px;
  background:rgba(10,22,40,.88); backdrop-filter:blur(12px);
  border:1px solid rgba(184,150,62,.3); border-radius:12px; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.abpg-fdr-name  { font-family:var(--font); font-size:1.1rem; font-weight:800; color:#fff; }
.abpg-fdr-role  { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-top:2px; }
.abpg-fdr-badge { background:var(--gold); color:#fff; border-radius:8px; padding:6px 12px; font-size:11px; font-weight:800; text-align:center; line-height:1.3; }
.abpg-fdr-credentials { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; margin-bottom:32px; }
.abpg-fdr-cred-tag {
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:50px;
  font-size:.85rem; font-weight:600; color:var(--text-muted); transition:all var(--transition);
}
.abpg-fdr-cred-tag:hover { border-color:var(--gold); color:var(--gold); }
.abpg-fdr-cred-tag span  { color:var(--gold); }
.abpg-fdr-bio       { font-size:.97rem; line-height:1.85; color:var(--text-muted); margin-bottom:14px; }
.abpg-fdr-signature { margin-top:32px; font-family:var(--font); font-size:2.2rem; font-style:italic; font-weight:300; color:var(--gold); opacity:.8; letter-spacing:2px; }

/* Values */
#abpg-values-section { padding:120px 5vw; background:var(--bg-alt); }
.abpg-val-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-top:60px; background:var(--border); border-radius:var(--radius); overflow:hidden;
}
.abpg-val-card { background:var(--card-bg); padding:48px 36px; transition:var(--transition); position:relative; overflow:hidden; }
.abpg-val-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--gold-pale),transparent);
  opacity:0; transition:opacity .5s ease;
}
.abpg-val-card:hover { background:var(--bg-alt); }
.abpg-val-card:hover::before { opacity:1; }
.abpg-val-num {
  font-family:var(--font); font-size:72px; font-weight:900; color:transparent;
  -webkit-text-stroke:1px rgba(184,150,62,.2); line-height:1; margin-bottom:20px;
  transition:var(--transition); letter-spacing:-.05em;
}
.abpg-val-card:hover .abpg-val-num { -webkit-text-stroke-color:rgba(184,150,62,.5); }
.abpg-val-icon  { font-size:32px; margin-bottom:16px; display:block; }
.abpg-val-title { font-family:var(--font); font-size:1.4rem; font-weight:800; margin-bottom:14px; letter-spacing:-.02em; }
.abpg-val-desc  { font-size:.92rem; color:var(--text-muted); line-height:1.8; }
.abpg-val-line  { width:0; height:3px; background:var(--gold); margin-top:20px; transition:width .5s ease; border-radius:2px; }
.abpg-val-card:hover .abpg-val-line { width:40px; }

/* Coverage */
#abpg-coverage-section { padding:120px 5vw; background:var(--bg); }
.abpg-cov-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:48px; }
.abpg-cov-map {
  background:var(--card-bg); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; position:relative; aspect-ratio:4/3; box-shadow:var(--shadow);
}
.abpg-cov-auth-block      { margin-bottom:40px; }
.abpg-cov-auth-label {
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  font-weight:800; margin-bottom:14px; padding-bottom:8px;
  border-bottom:1px solid rgba(184,150,62,.2);
}
.abpg-cov-districts-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.abpg-cov-district-item {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:default; transition:all var(--transition);
}
.abpg-cov-district-item:hover { border-color:var(--gold); transform:translateX(4px); }
.abpg-cov-district-dot  { width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; box-shadow:0 0 8px rgba(184,150,62,.5); }
.abpg-cov-district-name { font-size:13px; font-weight:600; color:var(--text); }
.abpg-cov-zone-tag      { color:var(--text-muted); font-size:11px; font-weight:400; }

/* Approvals */
#abpg-approvals-section { padding:100px 5vw; background:var(--bg); }
.abpg-apr-cert-grid { display:flex; flex-wrap:wrap; gap:16px; margin-top:48px; justify-content:center; }
.abpg-apr-cert-card {
  background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
  padding:24px 28px; display:flex; align-items:center; gap:16px;
  transition:all var(--transition); cursor:default; min-width:220px; box-shadow:var(--shadow);
}
.abpg-apr-cert-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.abpg-apr-cert-icon { width:48px; height:48px; background:var(--gold-pale); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.abpg-apr-cert-name { font-size:14px; font-weight:800; margin-bottom:3px; color:var(--text); }
.abpg-apr-cert-desc { font-size:12px; color:var(--text-muted); }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — TABLET  (≤ 1200px)                             ║
   ╚═══════════════════════════════════════════════════════════════╝ */
@media (max-width:1200px) {
  /* Index */
  .projects-grid            { grid-template-columns:repeat(2,1fr); }
  .services-double          { grid-template-columns:1fr; }
  .services-double .services-col { border-top:none; }
  .services-double .services-col:first-child { border-top:1.5px solid var(--border); }
  .why-grid                 { grid-template-columns:1fr 1fr; }
  .footer-grid              { grid-template-columns:1fr 1fr; gap:2rem; }
  /* Gallery */
  #gl-grid                  { columns:3; }
  #gl-grid.cols-2           { columns:2; }
  .gl-fs-grid               { grid-template-columns:1fr 1fr; }
  .gl-fs-right              { flex-direction:row; }
  /* Services */
  .svc-services-grid        { grid-template-columns:repeat(2,1fr); }
  /* Projects */
  .prj-grid                 { grid-template-columns:repeat(2,1fr); }
  .prj-card.prj-featured    { grid-column:span 2; }
  .prj-portfolio-grid       { grid-template-columns:repeat(3,1fr); }
  .prj-hiw-grid             { grid-template-columns:repeat(2,1fr); }
  .prj-stats-strip-inner    { grid-template-columns:repeat(2,1fr); }
  .prj-pdf-grid             { grid-template-columns:repeat(2,1fr); }
  /* About */
  .abpg-val-grid            { grid-template-columns:1fr 1fr; }
  .abpg-cov-districts-grid  { grid-template-columns:repeat(2,1fr); }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — SMALL TABLET  (≤ 1024px)                       ║
   ╚═══════════════════════════════════════════════════════════════╝ */
@media (max-width:1024px) {
  /* Index */
  .about-grid               { grid-template-columns:1fr; gap:3rem; }
  .about-img                { height:380px; }
  .contact-grid             { grid-template-columns:1fr; gap:3rem; }
  .timeline-steps           { grid-template-columns:1fr; gap:1.5rem; }
  .timeline-line            { display:none; }
  .timeline-step            { flex-direction:row; text-align:left; align-items:flex-start; gap:1.5rem; }
  .step-circle              { flex-shrink:0; }
  .testimonial-card         { min-width:100%; }
  #navbar, #navbar.scrolled { padding-left:1.5rem; padding-right:1.5rem; }
  /* Gallery */
  .gl-fs-grid               { grid-template-columns:1fr; }
  .gl-fs-right              { flex-direction:row; }
  /* Services */
  .svc-process-steps        { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .svc-process-steps::before{ display:none; }
  .svc-compare-table        { font-size:.85rem; }
  /* Contact */
  .contact-grid-layout      { grid-template-columns:1fr; gap:3rem; }
  .contact-enquiry-card     { position:static; }
  .contact-faq-layout       { grid-template-columns:1fr; gap:2.5rem; }
  .contact-faq-side         { position:static; }
  .cqs-inner                { grid-template-columns:1fr 1fr; }
  .cqs-item:nth-child(2)    { border-right:none; }
  .cqs-item:nth-child(3)    { border-top:1px solid rgba(255,255,255,.2); }
  .cqs-item:nth-child(4)    { border-top:1px solid rgba(255,255,255,.2); border-right:none; }
  .process-grid             { grid-template-columns:1fr 1fr; }
  /* Workflow */
  .wf-overview-grid         { grid-template-columns:1fr; gap:3rem; }
  .wf-ov-img                { height:340px; }
  .wf-auth-grid             { grid-template-columns:repeat(2,1fr); }
  .wf-docs-grid             { grid-template-columns:1fr; }
  .wf-ov-highlights         { grid-template-columns:1fr; }
  /* About */
  .abpg-hero-grid           { grid-template-columns:1fr; gap:3rem; }
  .abpg-story-grid          { grid-template-columns:1fr; gap:3rem; }
  .abpg-story-left          { position:static; }
  .abpg-fdr-grid            { grid-template-columns:1fr; gap:3rem; }
  .abpg-cov-intro-grid      { grid-template-columns:1fr; gap:3rem; }
  /* Projects */
  .prj-hiw-grid             { grid-template-columns:repeat(2,1fr); }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — MOBILE  (≤ 768px)                              ║
   ╚═══════════════════════════════════════════════════════════════╝ */
@media (max-width:768px) {
  /* Nav */
  .nav-links, .btn-nav-cta  { display:none; }
  .hamburger                { display:flex; }
  #mobile-bottom-nav        { display:block; }
  #navbar                   { padding:1.2rem 1.5rem; }
  #navbar.scrolled          { padding:.9rem 1.5rem; }

  /* Globals */
  section                   { padding:4rem 5vw; }
   .float-btns {
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    right: 1rem;
    z-index: 10002;
  }
  #scroll-top {
    bottom: calc(12rem + env(safe-area-inset-bottom));
    right: 1rem;
    width: 42px;
    height: 42px;
    z-index: 10003;
  }

  .footer-grid              { grid-template-columns:1fr 1fr; gap:2rem; }

  /* Index hero */
  #hero                     { min-height:100svh; align-items:flex-start; justify-content:flex-start; padding-top:100px; }
  .hero-content             { padding:0 1.25rem; padding-bottom:12rem; max-width:100%; }
  .hero-headline            { font-size:2.4rem; line-height:1.08; white-space:normal; }
  .hero-subline             { font-size:1rem; }
  .hero-tag                 { font-size:.74rem; padding:.38rem .9rem; }
  .btn                      { padding:.8rem 1.6rem; font-size:.95rem; }
  .hero-ctas                { gap:.75rem; }
  .hero-dots                { bottom:11rem; left:1.25rem; }
  .hero-stats-inner         { display:grid; grid-template-columns:1fr 1fr; gap:1rem .5rem; padding:1.35rem 1.5rem; border-radius:16px 16px 0 0; }
  .hero-stat-num            { font-size:1.7rem; }
  .hero-stat-label          { font-size:.66rem; }

  /* Index sections */
  .why-grid                 { grid-template-columns:1fr; }
  .about-stats              { grid-template-columns:1fr 1fr; }
  .service-row              { grid-template-columns:36px 1fr auto; gap:.75rem; }
  .contact-form-wrap        { padding:1.5rem; }
  .contact-grid             { gap:2rem; }
  .form-row                 { grid-template-columns:1fr; }
  .map-dual                 { grid-template-columns:1fr; }
  .map-dual .map-wrap       { height:160px; }
  .testimonial-card         { min-width:100%; }

  /* Gallery */
  #gl-grid,
  #gl-grid.cols-2,
  #gl-grid.cols-3           { columns:2; }
  .gl-filter-bar            { flex-direction:column; align-items:flex-start; }
  #gl-lb-img                { max-width:92vw; max-height:70vh; }
  .gl-lb-btn                { width:42px; height:42px; font-size:1.1rem; }
  .gl-lb-thumbs             { display:none; }
  .gl-lb-inner              { gap:.75rem; }

  /* Services */
  #svc-filter-strip         { top:58px; }
  .svc-services-grid        { grid-template-columns:1fr; }
  .svc-process-steps        { grid-template-columns:1fr; }
  .svc-compare-table thead th,
  .svc-compare-table tbody td { padding:.75rem .85rem; }
  .svc-search-wrap          { width:100%; }
  .svc-search-box, .svc-search-box input { width:100%; }

  /* Contact */
  .cqs-inner                { grid-template-columns:1fr 1fr; }
  .contact-channels         { grid-template-columns:1fr 1fr; }
  .enquiry-form-row         { grid-template-columns:1fr; }
  .contact-enquiry-card     { padding:1.75rem; }
  .process-grid             { grid-template-columns:1fr; }
  .css-inner                { justify-content:center; text-align:center; }

  /* Projects */
  #prj-filter-strip         { top:58px; }
  .prj-grid                 { grid-template-columns:1fr; }
  .prj-card.prj-featured    { grid-column:span 1; }
  .prj-portfolio-grid       { grid-template-columns:repeat(2,1fr); }
  .prj-pdf-grid             { grid-template-columns:1fr; }
  .prj-hiw-grid             { grid-template-columns:1fr; }
  .prj-stats-strip-inner    { grid-template-columns:repeat(2,1fr); }

  /* Workflow */
  #wf-tab-nav               { top:58px; }
  .wf-step-card             { grid-template-columns:70px 1fr; }
  .wf-step-big-num          { font-size:1.6rem; }
  .wf-auth-grid             { grid-template-columns:1fr; }

  /* About */
  #abpg-hero-section        { padding-top:100px; }
  .abpg-hero-visual-col     { display:none; }
  .abpg-hero-main-title     { font-size:clamp(36px,8vw,60px); }
  .abpg-hero-badge-pill     { font-size:11px; }
  .abpg-hero-floating-badge-top,
  .abpg-hero-floating-badge-bottom { display:none; }
  .abpg-val-grid            { grid-template-columns:1fr; }
  .abpg-cov-districts-grid  { grid-template-columns:1fr 1fr; }
  .abpg-apr-cert-grid       { gap:12px; }
  .abpg-apr-cert-card       { min-width:160px; padding:18px 20px; }
  #abpg-story-section,
  #abpg-founder-section,
  #abpg-values-section,
  #abpg-coverage-section,
  #abpg-approvals-section   { padding:60px 5vw; }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — SMALL MOBILE  (≤ 480px)                        ║
   ╚═══════════════════════════════════════════════════════════════╝ */
@media (max-width:480px) {
  .footer-grid              { grid-template-columns:1fr; }
  .about-stats              { grid-template-columns:1fr 1fr; }
  .hero-headline            { font-size:2rem; }
  .service-row              { grid-template-columns:36px 1fr auto; gap:.75rem; }
  .contact-channels         { grid-template-columns:1fr; }
  /* Gallery */
  #gl-grid, #gl-grid.cols-2, #gl-grid.cols-3 { columns:1; }
  .gl-cta-btns              { flex-direction:column; align-items:center; }
  /* Contact */
  .cqs-inner                { grid-template-columns:1fr; }
  .cqs-item                 { border-right:none; border-bottom:1px solid rgba(255,255,255,.15); }
  .cqs-item:last-child      { border-bottom:none; }
  /* Services */
  .svc-cta-btns             { flex-direction:column; align-items:center; }
  /* Projects */
  .prj-portfolio-grid       { grid-template-columns:1fr; }
  .prj-stats-strip-inner    { grid-template-columns:1fr 1fr; }
  .prj-cta-btns             { flex-direction:column; align-items:center; }
  /* Workflow */
  .wf-cta-btns              { flex-direction:column; align-items:center; }
  .wf-jstep                 { min-width:90px; }
  .wf-jstep-circle          { width:58px; height:58px; }
  /* About */
  .abpg-hero-cta-row        { flex-direction:column; }
  .abpg-cov-districts-grid  { grid-template-columns:1fr 1fr; }


  .float-btns {
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
    right: 0.8rem;
    z-index: 10002;
  }
  #scroll-top {
    bottom: calc(12.5rem + env(safe-area-inset-bottom));
    right: 0.8rem;
    width: 42px;
    height: 42px;
    z-index: 10003;
  }
}