/* ============================================================
   SMAARam Engineers Ltd — Premium Corporate v3
   Best-in-class mobile · Luxury hamburger · Fixed all issues
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap');

/* ─────────────────────────────
   TOKENS
───────────────────────────── */
:root {
  color-scheme: only light;   /* Always render in light mode — ignore OS dark preference */
  --navy:       #0B1E3D;
  --navy-mid:   #152d57;
  --navy-light: #1e3f74;
  --gold:       #E8A020;
  --gold-light: #F2BA4A;
  --gold-pale:  #FDF6E9;
  --white:      #FFFFFF;
  --cream:      #FAFAF8;
  --stone:      #F2F1EE;
  --mist:       #E8E7E3;
  --slate:      #8A8D94;
  --charcoal:   #2C2F36;
  --ink:        #111318;

  --shadow-xs:  0 1px 4px rgba(11,30,61,0.06);
  --shadow-sm:  0 2px 12px rgba(11,30,61,0.08);
  --shadow-md:  0 8px 32px rgba(11,30,61,0.12);
  --shadow-lg:  0 20px 60px rgba(11,30,61,0.16);
  --shadow-xl:  0 40px 100px rgba(11,30,61,0.22);

  --nav-h:  88px;
  --r:      4px;
  --r-lg:   10px;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t:      0.3s var(--ease);
}

/* ─────────────────────────────
   RESET
───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.7; color: var(--charcoal); background: var(--white); overflow-x: hidden; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: inherit; }

/* ─────────────────────────────
   TYPOGRAPHY
───────────────────────────── */
h1, h2, h3, h4, h5 { font-family: 'Cormorant Garamond', serif; line-height: 1.1; color: var(--navy); }
h1 { font-size: clamp(2.6rem, 5.5vw, 5.8rem); font-weight: 300; letter-spacing: -1px; }
h2 { font-size: clamp(1.9rem, 3.2vw, 3.4rem); font-weight: 300; letter-spacing: -0.5px; }
h3 { font-size: 1.5rem; font-weight: 400; }
h4 { font-size: 0.95rem; font-weight: 600; font-family: 'DM Sans', sans-serif; }
p  { line-height: 1.8; }

/* ─────────────────────────────
   LAYOUT
───────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
section { padding: 120px 0; }

/* ─────────────────────────────
   LABEL
───────────────────────────── */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'DM Mono', monospace; font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.label::before { content: ''; width: 26px; height: 1px; background: var(--gold); flex-shrink: 0; }

/* ─────────────────────────────
   BUTTONS
───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--r);
  transition: var(--t); cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 0 4px 20px rgba(11,30,61,0.25); }
.btn-navy:hover  { background: var(--navy-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(11,30,61,0.32); }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 4px 20px rgba(232,160,32,0.3); }
.btn-gold:hover  { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232,160,32,0.38); }
.btn-ghost { border: 1px solid rgba(255,255,255,0.28); color: var(--white); background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-navy { border: 1px solid var(--navy); color: var(--navy); background: transparent; }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
.btn-arrow::after { content: '→'; transition: transform var(--t); }
.btn-arrow:hover::after { transform: translateX(5px); }

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; z-index: 1000;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.navbar-line {
  position: absolute; bottom: 0; left: 56px; right: 56px;
  height: 1px; background: rgba(255,255,255,0.1);
  transition: opacity 0.4s var(--ease), background 0.4s var(--ease);
}
.navbar.scrolled .navbar-line,
.navbar.solid    .navbar-line { background: var(--mist); left: 0; right: 0; }
.navbar.scrolled,
.navbar.solid {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--mist), var(--shadow-sm);
}

/* ═══════════════════════════════════════
   DUAL LOGO — hero-only swap
   Default everywhere: logo-color.png (blue+orange, transparent)
   Homepage hero only: logo-inverse.png (white+orange, transparent)
   JS adds .logo-on-dark to <nav> only while homepage hero is in view.
═══════════════════════════════════════ */
.nav-logo {
  display: flex; align-items: center; flex-shrink: 0;
  position: relative; height: 52px; width: 140px;
}
.nav-logo-img {
  height: 52px; width: auto; object-fit: contain;
  position: absolute; top: 0; left: 0;
  transition: opacity 0.4s var(--ease);
  will-change: opacity;
}

/* Default (all pages, scrolled): color logo visible */
.nav-logo-light { opacity: 1; pointer-events: auto; }
.nav-logo-dark  { opacity: 0; pointer-events: none; }

/* Homepage hero visible: show inverse (white+orange), hide color */
.navbar.logo-on-dark .nav-logo-light { opacity: 0; pointer-events: none; }
.navbar.logo-on-dark .nav-logo-dark  { opacity: 1; pointer-events: auto; }

.nav-logo:hover .nav-logo-img { transform: scale(1.03); transition: opacity 0.45s ease, transform 0.3s var(--spring); }

/* Desktop links */
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
  font-family: 'DM Sans', sans-serif; font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); position: relative; transition: color var(--t);
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.navbar.scrolled .nav-links a, .navbar.solid .nav-links a { color: var(--slate); }
.navbar.scrolled .nav-links a:hover, .navbar.scrolled .nav-links a.active,
.navbar.solid    .nav-links a:hover, .navbar.solid    .nav-links a.active { color: var(--navy); }

/* CTA pill */
.nav-cta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 22px; background: var(--gold); color: var(--navy) !important;
  border-radius: 100px; transition: background var(--t), transform var(--t), box-shadow var(--t);
  box-shadow: 0 2px 12px rgba(232,160,32,0.3);
}
.nav-cta-pill::after { display: none !important; }
.nav-cta-pill:hover { background: var(--gold-light) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 18px rgba(232,160,32,0.4); }

/* ═══════════════════════════════════════
   LUXURY HAMBURGER BUTTON
   Premium morphing menu icon
═══════════════════════════════════════ */
.hamburger-btn {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  transition: background var(--t);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.08); }
.navbar.scrolled .hamburger-btn:hover,
.navbar.solid    .hamburger-btn:hover { background: rgba(11,30,61,0.06); }

.hamburger-icon {
  width: 22px; height: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hamburger-icon span {
  display: block; height: 1.5px; border-radius: 2px;
  background: var(--white); transform-origin: center;
  transition: transform 0.45s var(--ease), opacity 0.3s, width 0.35s var(--ease), background var(--t);
}
.hamburger-icon span:nth-child(1) { width: 22px; }
.hamburger-icon span:nth-child(2) { width: 16px; }
.hamburger-icon span:nth-child(3) { width: 22px; }
.navbar.scrolled .hamburger-icon span,
.navbar.solid    .hamburger-icon span { background: var(--navy); }

/* Open state — morphs to elegant ✕ */
.hamburger-btn.open .hamburger-icon span:nth-child(1) {
  transform: translateY(6.25px) rotate(45deg); width: 22px;
}
.hamburger-btn.open .hamburger-icon span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.hamburger-btn.open .hamburger-icon span:nth-child(3) {
  transform: translateY(-6.25px) rotate(-45deg); width: 22px;
}

/* ═══════════════════════════════════════
   MOBILE NAVIGATION DRAWER
   Full-screen luxury overlay
═══════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; top: 0;
  background: var(--navy); z-index: 999;
  flex-direction: column; justify-content: flex-end;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  /* Clip reveal from top */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease), visibility 0.6s;
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav.open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  pointer-events: auto;
}

/* Decorative background SVG inside drawer */
.mob-nav-bg {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 55%; pointer-events: none; overflow: hidden; opacity: 0.04;
}

/* Drawer inner layout */
.mob-nav-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100%; padding: var(--nav-h) 0 0;
}

/* Logo row inside drawer — premium wordmark (no image) */
.mob-nav-brand {
  padding: 32px 32px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mob-nav-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1;
}
.mob-nav-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

/* Nav links */
.mob-nav-links {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 32px;
}
.mob-nav-links a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 7vw, 3rem); font-weight: 300;
  color: rgba(255,255,255,0.55); padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.35s, padding-left 0.35s;
  opacity: 0; transform: translateX(-20px);
  transition: color 0.35s, padding-left 0.35s, opacity 0.4s, transform 0.4s;
}
.mob-nav-links a .mob-link-num {
  font-family: 'DM Mono', monospace; font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.15em; color: var(--gold); opacity: 0; width: 24px; flex-shrink: 0;
  transition: opacity 0.3s;
}
.mob-nav-links a:hover, .mob-nav-links a.active { color: var(--white); padding-left: 8px; }
.mob-nav-links a:hover .mob-link-num, .mob-nav-links a.active .mob-link-num { opacity: 1; }
.mobile-nav.open .mob-nav-links a {
  opacity: 1; transform: translateX(0);
}
.mobile-nav.open .mob-nav-links a:nth-child(1) { transition-delay: 0.08s; }
.mobile-nav.open .mob-nav-links a:nth-child(2) { transition-delay: 0.13s; }
.mobile-nav.open .mob-nav-links a:nth-child(3) { transition-delay: 0.18s; }
.mobile-nav.open .mob-nav-links a:nth-child(4) { transition-delay: 0.23s; }
.mobile-nav.open .mob-nav-links a:nth-child(5) { transition-delay: 0.28s; }

/* Bottom contact strip */
.mob-nav-footer {
  padding: 28px 32px max(28px, env(safe-area-inset-bottom, 28px));
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s 0.35s, transform 0.4s 0.35s;
}
.mobile-nav.open .mob-nav-footer { opacity: 1; transform: none; }
.mob-nav-contact {
  display: flex; flex-direction: column; gap: 3px;
}
.mob-nav-contact span {
  font-family: 'DM Mono', monospace; font-size: 0.57rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
}
.mob-nav-contact a {
  font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.65);
  transition: color var(--t); padding: 0;
}
.mob-nav-contact a:hover { color: var(--gold); padding-left: 0; }
.mob-cta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 24px; background: var(--gold); color: var(--navy);
  border-radius: 100px; white-space: nowrap;
  transition: background var(--t), transform var(--t);
  flex-shrink: 0;
}
.mob-cta-pill:hover { background: var(--gold-light); transform: scale(1.02); }
.mob-cta-pill::after { content: '→'; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  min-height: 100vh; position: relative;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--navy);
}
.hero-bg-layer {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 30%, rgba(30,63,116,0.8) 0%, transparent 70%),
    linear-gradient(160deg, #060f22 0%, #0B1E3D 45%, #091828 100%);
}
.hero-arch { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-gold-bar {
  position: absolute; top: 0; right: 0; bottom: 0; width: 38%;
  background: linear-gradient(180deg, rgba(232,160,32,0.04) 0%, rgba(232,160,32,0.01) 100%);
  border-left: 1px solid rgba(232,160,32,0.1);
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  max-width: 1240px; margin: 0 auto; padding: 0 48px;
  padding-top: calc(var(--nav-h) + 48px); padding-bottom: 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.hero-left { padding-bottom: 0; }
.hero-kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: 'DM Mono', monospace; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 28px; animation: fadeUp 0.9s ease both;
}
.hero-kicker::before { content: ''; width: 36px; height: 1px; background: var(--gold); }
.hero h1 { color: var(--white); margin-bottom: 24px; font-weight: 300; animation: fadeUp 0.9s 0.1s ease both; }
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero-sub { font-size: 0.98rem; color: rgba(255,255,255,0.46); max-width: 440px; line-height: 1.88; margin-bottom: 40px; animation: fadeUp 0.9s 0.2s ease both; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp 0.9s 0.3s ease both; }
.hero-right { display: flex; flex-direction: column; gap: 0; justify-content: flex-end; animation: fadeUp 0.9s 0.18s ease both; }
.hero-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 18px;
  background: rgba(255,255,255,0.03); backdrop-filter: blur(10px);
}
.hero-stat { padding: 26px 18px; border-right: 1px solid rgba(255,255,255,0.07); text-align: center; }
.hero-stat:last-child { border-right: none; }
.hero-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 300; color: var(--white); line-height: 1; margin-bottom: 5px; }
.hero-stat-num em { color: var(--gold); font-style: normal; }
.hero-stat-label { font-family: 'DM Mono', monospace; font-size: 0.54rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.28); line-height: 1.5; }
.hero-svg-strip { border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }

.hero-scroll {
  position: absolute; bottom: 36px; left: 56px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-family: 'DM Mono', monospace; font-size: 0.55rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.22);
  animation: fadeIn 2s 1.2s ease both;
}
.scroll-track { width: 1px; height: 44px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.scroll-track::after {
  content: ''; position: absolute; top: -100%; left: 0; right: 0;
  height: 100%; background: linear-gradient(to bottom, transparent, var(--gold));
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine { 0%{top:-100%} 100%{top:100%} }

/* ═══════════════════════════════════════
   TRUST BAND
═══════════════════════════════════════ */
.trust-band { background: var(--ink); }
.trust-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: auto 1fr; align-items: stretch;
}
.trust-heading-col {
  padding: 44px 52px 44px 0; border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.trust-eyeline { font-family: 'DM Mono', monospace; font-size: 0.57rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.trust-heading-col h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 300; color: rgba(255,255,255,0.5); white-space: nowrap; }
.trust-logos-col { padding: 44px 0 44px 52px; display: flex; align-items: center; }
.trust-client { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border-right: 1px solid rgba(255,255,255,0.05); }
.trust-client:last-child { border-right: none; }
.trust-client-link { text-decoration: none; cursor: pointer; position: relative; transition: transform 0.2s var(--ease); }
.trust-client-link:hover { transform: translateY(-2px); }
.trust-client-link::after { content: '→ View Project'; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-family: 'DM Mono', monospace; font-size: 0.45rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); opacity: 0; white-space: nowrap; transition: opacity 0.2s ease; pointer-events: none; }
.trust-client-link:hover::after { opacity: 0.7; }
.trust-client-icon { opacity: 0.28; transition: opacity var(--t); }
.trust-client:hover .trust-client-icon { opacity: 0.65; }
.trust-client-name { font-family: 'DM Mono', monospace; font-size: 0.53rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.2); text-align: center; line-height: 1.4; transition: color var(--t); }
.trust-client:hover .trust-client-name { color: rgba(255,255,255,0.52); }

/* ═══════════════════════════════════════
   ABOUT SPLIT
═══════════════════════════════════════ */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.about-image-block { position: relative; }
.about-img-placeholder { 
  width: 100%; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 40px 80px rgba(6,15,34,0.35), 0 8px 24px rgba(6,15,34,0.2);
  filter: brightness(0.78) saturate(0.9);
}
.about-img-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,15,34,0.28) 0%,
    rgba(6,15,34,0.08) 35%,
    rgba(6,15,34,0.08) 60%,
    rgba(6,15,34,0.38) 100%
  );
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 1;
}
.about-badge {
  position: absolute; top: 32px; left: -20px;
  background: var(--gold); color: var(--navy); padding: 18px 20px;
  border-radius: var(--r); box-shadow: var(--shadow-md); z-index: 2;
}
.about-badge-num { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; line-height: 1; margin-bottom: 2px; }
.about-badge-text { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.about-text h2 { margin-bottom: 22px; }
.about-text p { color: var(--slate); font-size: 0.94rem; margin-bottom: 18px; line-height: 1.85; }
.about-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 36px; }
.pillar { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--mist); border-radius: var(--r); transition: border-color var(--t), box-shadow var(--t); }
.pillar:hover { border-color: var(--gold); box-shadow: var(--shadow-xs); }
.pillar-icon { width: 32px; height: 32px; background: var(--gold-pale); border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pillar h5 { font-size: 0.78rem; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.pillar p  { font-size: 0.73rem; color: var(--slate); line-height: 1.55; }

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--mist); border-radius: var(--r-lg); overflow: hidden; }
.svc-card { background: var(--white); padding: 42px 30px; transition: background var(--t); position: relative; overflow: hidden; }
.svc-card::before { content: attr(data-num); font-family: 'Cormorant Garamond', serif; font-size: 5.5rem; font-weight: 300; color: var(--navy); opacity: 0.04; position: absolute; top: -8px; right: 14px; line-height: 1; pointer-events: none; transition: opacity var(--t); }
.svc-card:hover { background: var(--navy); }
.svc-card:hover::before { color: var(--white); opacity: 0.06; }
.svc-icon { width: 42px; height: 42px; border: 1px solid var(--mist); border-radius: var(--r); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; transition: border-color var(--t), background var(--t), color var(--t); color: var(--navy); }
.svc-card:hover .svc-icon { border-color: rgba(232,160,32,0.3); background: rgba(232,160,32,0.1); color: var(--gold); }
.svc-card h3 { font-size: 1.1rem; font-weight: 400; margin-bottom: 12px; color: var(--navy); transition: color var(--t); }
.svc-card:hover h3 { color: var(--white); }
.svc-card p { font-size: 0.85rem; color: var(--slate); line-height: 1.75; margin-bottom: 22px; transition: color var(--t); }
.svc-card:hover p { color: rgba(255,255,255,0.42); }
.svc-link { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; transition: color var(--t), gap var(--t); }
.svc-link::after { content: '→'; }
.svc-card:hover .svc-link { color: var(--gold); gap: 14px; }

/* ═══════════════════════════════════════
   WHY SECTION
═══════════════════════════════════════ */
.why-section { background: var(--navy); position: relative; overflow: hidden; }
.why-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 70% at 92% 50%, rgba(232,160,32,0.06) 0%, transparent 65%); }
.why-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 100px; align-items: center; position: relative; z-index: 1; }
.why-left h2 { color: var(--white); margin-bottom: 18px; }
.why-left p  { color: rgba(255,255,255,0.4); font-size: 0.94rem; line-height: 1.85; margin-bottom: 36px; }
.why-points  { display: flex; flex-direction: column; }
.why-item { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.06); transition: padding-left var(--t); }
.why-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.why-item:hover { padding-left: 8px; }
.why-num { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; color: var(--gold); opacity: 0.32; line-height: 1; transition: opacity var(--t); }
.why-item:hover .why-num { opacity: 1; }
.why-item h4 { font-size: 0.88rem; font-weight: 600; color: var(--white); margin-bottom: 6px; }
.why-item p  { font-size: 0.83rem; color: rgba(255,255,255,0.36); line-height: 1.75; }

/* ═══════════════════════════════════════
   PROJECTS
═══════════════════════════════════════ */
.projects-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 38px; }
.projects-masonry { display: grid; gap: 10px; grid-template-columns: repeat(12,1fr); grid-template-rows: 280px 240px; }
.proj-card { position: relative; overflow: hidden; border-radius: var(--r); background: var(--stone); }
.proj-card:nth-child(1) { grid-column:1/8; grid-row:1/3; }
.proj-card:nth-child(2) { grid-column:8/13; grid-row:1/2; }
.proj-card:nth-child(3) { grid-column:8/11; grid-row:2/3; }
.proj-card:nth-child(4) { grid-column:11/13; grid-row:2/3; }
.proj-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.proj-tag { position:absolute; top:14px; left:14px; font-family:'DM Mono',monospace; font-size:0.55rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); color:var(--white); border:1px solid rgba(255,255,255,0.13); padding:5px 10px; border-radius:2px; }
.proj-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(11,30,61,0.93) 0%, rgba(11,30,61,0.05) 50%, transparent 80%); display:flex; align-items:flex-end; justify-content:space-between; padding:24px; opacity:0; transition:opacity var(--t); }
.proj-card:hover .proj-overlay { opacity:1; }
.proj-info-label { font-family:'DM Mono',monospace; font-size:0.56rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:4px; }
.proj-info-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:400; color:var(--white); }
.proj-card-link { cursor: pointer; display: block; }
.proj-card-link:hover .proj-placeholder img { transform: scale(1.04); transition: transform 0.6s var(--ease); }
.proj-placeholder img { transition: transform 0.6s var(--ease); }
.proj-cta-arrow { font-family:'DM Mono',monospace; font-size:0.6rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); white-space:nowrap; align-self:flex-end; flex-shrink:0; transition:transform var(--t); }
.proj-card-link:hover .proj-cta-arrow { transform: translateX(5px); }

/* ═══════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════ */
.testimonials-section { background: var(--cream); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testi-card { background: var(--white); padding: 38px 30px; border-radius: var(--r); border: 1px solid var(--mist); transition: box-shadow var(--t), transform var(--t); }
.testi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.testi-quote { font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; color: var(--gold); opacity: 0.17; line-height: 0.6; margin-bottom: 16px; display: block; }
.testi-text { font-size: 0.92rem; color: var(--charcoal); line-height: 1.85; margin-bottom: 22px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-light)); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 0.9rem; color: var(--white); flex-shrink: 0; }
.testi-name  { font-weight: 600; font-size: 0.83rem; color: var(--navy); display: block; }
.testi-role  { font-size: 0.73rem; color: var(--slate); }
.testi-stars { color: var(--gold); font-size: 0.73rem; margin-bottom: 13px; letter-spacing: 2px; }

/* ═══════════════════════════════════════
   CTA BAND
═══════════════════════════════════════ */
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); padding: 100px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232,160,32,0.07) 0%, transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); margin-bottom: 14px; }
.cta-band p  { color: rgba(255,255,255,0.46); font-size: 1rem; margin-bottom: 34px; }
.btn-group   { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════
   FOOTER — dark background, white logo
═══════════════════════════════════════ */
footer { background: var(--ink); }
.footer-top {
  max-width: 1240px; margin: 0 auto; padding: 80px 48px 60px;
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.6fr; gap: 56px;
}
/* footer-mobile-cols: transparent wrapper on desktop, 2-col grid on mobile */
.footer-mobile-cols { display: contents; }

/* Footer is always dark (ink bg) → inverse logo, no box */
.footer-logo-wrap {
  margin-bottom: 12px;
  display: inline-block;
}
.footer-logo-img {
  height: 44px; width: auto; object-fit: contain;
  display: block; filter: none; opacity: 1;
}
/* Footer always dark → only inverse logo shown */
.footer-logo-light { display: none; }
.footer-logo-dark  { display: block; }

.footer-tagline {
  display: block; margin-bottom: 12px;
  font-family: 'DM Mono', monospace; font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.footer-brand-desc { font-size: 0.83rem; line-height: 1.8; color: rgba(255,255,255,0.28); }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45); transition: border-color var(--t), background var(--t), transform var(--t), color var(--t);
  font-size: 0.8rem; flex-shrink: 0;
}
.footer-social a svg { width: 16px; height: 16px; display: block; transition: color var(--t); }
.footer-social a:hover { border-color: var(--gold); background: rgba(232,160,32,0.12); transform: translateY(-2px); color: var(--gold); }
.footer-social a:hover { border-color: var(--gold); background: rgba(232,160,32,0.12); transform: translateY(-2px); }
.footer-social a:hover svg { fill: var(--gold); }
.footer-col h5 {
  font-family: 'DM Mono', monospace; font-size: 0.57rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 0.83rem; color: rgba(255,255,255,0.28); transition: color var(--t), padding-left var(--t); }
.footer-col ul a:hover { color: var(--gold); padding-left: 4px; }
.footer-contact-item { display: flex; gap: 10px; margin-bottom: 13px; align-items: flex-start; }
.footer-contact-icon { font-size: 0.82rem; margin-top: 2px; flex-shrink: 0; opacity: 0.38; }
.footer-contact-item span, .footer-contact-item a, .footer-contact-item div { font-size: 0.82rem; color: rgba(255,255,255,0.28); line-height: 1.65; }
.footer-contact-item a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1240px; margin: 0 auto; padding: 22px 48px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; font-size: 0.75rem; color: rgba(255,255,255,0.17);
}
.footer-bottom span { color: var(--gold); }

/* ═══════════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════════ */
.page-hero { min-height: 50vh; background: var(--navy); position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 80% 40%, rgba(232,160,32,0.055) 0%, transparent 65%),
              repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(255,255,255,0.008) 80px, rgba(255,255,255,0.008) 81px);
}
.page-hero-content { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 48px; padding-top: calc(var(--nav-h) + 64px); padding-bottom: 80px; }
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero h1 em { color: var(--gold-light); font-style: italic; }
.page-hero p { font-size: 0.98rem; color: rgba(255,255,255,0.42); max-width: 540px; line-height: 1.82; }
.breadcrumb { display: flex; align-items: center; gap: 10px; margin-top: 32px; font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; }
.breadcrumb a { color: rgba(255,255,255,0.26); transition: color var(--t); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: rgba(255,255,255,0.12); }
.breadcrumb .cur { color: var(--gold); }

/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.72s ease, transform 0.72s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════
   LOADING BAR
═══════════════════════════════════════ */
#loading-bar { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--navy-light)); z-index: 9999; width: 0; transition: width 0.3s ease; pointer-events: none; }

/* ═══════════════════════════════════════
   BACK TO TOP — DESKTOP ONLY
═══════════════════════════════════════ */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px;
  width: 44px; height: 44px; background: var(--navy); color: var(--white);
  border-radius: 50%; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); z-index: 900;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t), transform var(--t), background var(--t);
  cursor: pointer; display: none;
  font-family: 'DM Mono', monospace; font-size: 0.7rem;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--navy-light); transform: translateY(-2px); }

/* ═══════════════════════════════════════
   WHATSAPP — MOBILE ONLY, PROPER BUTTON
   Uses valid WhatsApp URL, real SVG icon
═══════════════════════════════════════ */
.whatsapp-btn {
  position: fixed; bottom: 24px; right: 18px;
  display: none; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: #25D366; border-radius: 50%;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35), 0 1px 4px rgba(0,0,0,0.15);
  z-index: 900; text-decoration: none; color: var(--white);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.whatsapp-btn:active { transform: scale(0.94); }
.whatsapp-btn:hover  { transform: scale(1.06); box-shadow: 0 8px 24px rgba(37,211,102,0.45), 0 2px 6px rgba(0,0,0,0.18); }
.whatsapp-btn svg    { display: block; flex-shrink: 0; }

/* Pulse ring on mobile */
.whatsapp-btn::before {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid rgba(37,211,102,0.4);
  animation: waPulse 2.5s ease-in-out infinite;
}
@keyframes waPulse {
  0%,100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.12); }
}

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-family: 'DM Mono', monospace; font-size: 0.61rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: 7px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--mist);
  border-radius: var(--r); font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
  color: var(--charcoal); background: var(--white); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none; -webkit-appearance: none;
  /* iOS fix */
  -webkit-border-radius: var(--r);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,30,61,0.06); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ═══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════ */

/* Desktop: back-to-top ✓, WhatsApp ✗ */
@media (min-width: 1101px) {
  .back-to-top { display: flex; }
  .whatsapp-btn { display: none !important; }
}

/* ── TABLET ≤1100px ── */
@media (max-width: 1100px) {
  .navbar { padding: 0 32px; }
  .navbar-line { left: 32px; right: 32px; }
  .navbar.scrolled .navbar-line, .navbar.solid .navbar-line { left: 0; right: 0; }
  .nav-links { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-nav { display: flex; }

  .hero-content { grid-template-columns: 1fr; gap: 40px; padding: 0 32px; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 80px; }
  .hero-right { order: 1; }
  .hero-left { order: 0; }
  .hero-scroll, .hero-gold-bar { display: none; }
  .hero-arch { opacity: 0.6; }

  .trust-inner { grid-template-columns: 1fr; padding: 0 32px; }
  .trust-heading-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 32px 0; }
  .trust-logos-col { padding: 24px 0; flex-wrap: wrap; }
  .trust-client { flex: 0 0 33.33%; padding: 14px 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .trust-client:nth-child(n+6) { border-bottom: none; }

  .about-split { grid-template-columns: 1fr; gap: 56px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-header { flex-direction: column; align-items: flex-start; gap: 18px; }
  .why-grid { grid-template-columns: 1fr; gap: 56px; }
  .projects-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .projects-masonry { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 210px; }
  .proj-card:nth-child(1) { grid-column:1/3; grid-row:1/2; }
  .proj-card:nth-child(2) { grid-column:1/2; grid-row:2/3; }
  .proj-card:nth-child(3) { grid-column:2/3; grid-row:2/3; }
  .proj-card:nth-child(4) { display: none; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid .testi-card:last-child { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }

  .back-to-top { display: none !important; }
  .whatsapp-btn { display: flex; }
}

/* ── MOBILE ≤640px — Premium polish ── */
@media (max-width: 640px) {
  :root { --nav-h: 68px; }

  .container { padding: 0 20px; }
  section { padding: 72px 0; }

  /* Navbar */
  .navbar { padding: 0 20px; }
  .navbar-line { left: 20px; right: 20px; }
  .nav-logo { height: 44px; width: 110px; }
  .nav-logo-img { height: 44px; }

  /* Hero */
  .hero-content { padding: 0 20px; padding-top: calc(var(--nav-h) + 44px); padding-bottom: 60px; gap: 32px; }
  .hero-left { order: 0; }
  .hero-right { order: 1; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .hero-sub { font-size: 0.93rem; max-width: 100%; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stats .hero-stat { padding: 18px 8px; }
  .hero-stats .hero-stat:last-child { grid-column: auto; border-top: none; border-right: none; }
  .hero-stat-num { font-size: 1.9rem; }
  .hero-stat-label { font-size: 0.46rem; letter-spacing: 0.1em; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 16px 24px; font-size: 0.82rem; }

  /* Trust band */
  .trust-inner { padding: 0 20px; }
  /* Mobile: single horizontal scrolling row, all partners */
  .trust-logos-col {
    padding: 20px 0 24px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .trust-logos-col::-webkit-scrollbar { display: none; }
  .trust-client {
    flex: 0 0 auto;
    width: 80px;
    padding: 10px 8px;
    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: none;
  }
  .trust-client:last-child { border-right: none; }

  /* About */
  .about-image-block { display: none; }
  .about-badge { display: none; }
  .about-split { grid-template-columns: 1fr; }
  .about-pillars { display: none; }
  .about-text .btn { width: 100%; justify-content: center; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .services-header .btn { width: 100%; justify-content: center; }
  .svc-card { padding: 22px 20px; }
  .svc-card::before { font-size: 3.8rem; top: -4px; right: 10px; }
  .svc-icon { width: 34px; height: 34px; margin-bottom: 14px; }
  .svc-card h3 { font-size: 0.95rem; margin-bottom: 8px; }
  .svc-card p { font-size: 0.8rem; line-height: 1.65; margin-bottom: 14px; }

  /* Projects */
  .projects-masonry { grid-template-columns: 1fr; grid-template-rows: auto; gap: 8px; }
  .proj-card { height: 220px; }
  .proj-card:nth-child(1) { grid-column: 1; grid-row: auto; }
  .proj-card:nth-child(2) { grid-column: 1; grid-row: auto; }
  .proj-card:nth-child(3) { grid-column: 1; grid-row: auto; }
  .proj-card:nth-child(4) { display: block; grid-column: 1; grid-row: auto; }
  .proj-overlay { opacity: 1; background: linear-gradient(to top, rgba(11,30,61,0.88) 0%, transparent 65%); }
  .projects-header .btn { display: none; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr; gap: 14px; }
  .testi-grid .testi-card:last-child { display: block; }
  .testi-card { padding: 28px 22px; }

  /* CTA */
  .cta-band { padding: 68px 20px; }
  .cta-band h2 { font-size: clamp(1.7rem, 7vw, 2.6rem); }
  .cta-band .btn-group { flex-direction: column; align-items: center; }
  .cta-band .btn-group .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Footer — mobile redesign */
  .footer-top { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .footer-top > div:first-child { padding: 40px 20px 32px; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .footer-col { padding: 24px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .footer-col h5 { margin-bottom: 14px; }
  .footer-col ul { gap: 8px; }
  .footer-col ul a { font-size: 0.85rem; color: rgba(255,255,255,0.35); }
  .footer-bottom { flex-direction: column; text-align: center; gap: 4px; padding: 18px 20px; font-size: 0.7rem; }
  .footer-logo-img { height: 38px; }
  .footer-logo-wrap { padding: 6px 10px; }
  .footer-brand-desc { font-size: 0.81rem; line-height: 1.75; max-width: 100%; }
  .footer-social { gap: 10px; margin-top: 20px; }
  .footer-tagline { font-size: 0.6rem; }
  footer .footer-top,
  body > footer .footer-top { grid-template-columns: 1fr !important; }
  /* Mobile footer two-col for nav/services */
  .footer-mobile-cols { display: grid; grid-template-columns: 1fr 1fr; }
  .footer-mobile-cols .footer-col { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .footer-mobile-cols .footer-col:first-child { border-right: 1px solid rgba(255,255,255,0.07); }
  /* Contact col on mobile */
  .footer-top > .footer-col:last-child { padding: 24px 20px 32px; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }

  /* Page hero */
  .page-hero-content { padding: 0 20px; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 56px; }
  .page-hero h1 { font-size: clamp(2rem, 9vw, 3rem); }

  /* Mobile nav */
  .mobile-nav { }
  .mob-nav-links a { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .mob-nav-footer { flex-direction: column; align-items: flex-start; gap: 18px; }
  .mob-cta-pill { width: 100%; justify-content: center; }

  /* WhatsApp — bigger tap target on small screens */
  .whatsapp-btn { width: 52px; height: 52px; bottom: 20px; right: 16px; }

  /* ── Services grid on homepage — stack to single column ── */
  .services-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .services-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .services-header .btn { width: 100%; justify-content: center; }

  /* ── About section — tighten copy, hide non-essentials ── */
  .about-split > div:last-child h2 { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }

  /* ── Projects masonry — tighter, all visible, overlay always on ── */
  .projects-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .proj-info-label { font-size: 0.54rem; }
  .proj-info-title { font-size: 0.9rem; }

  /* ── Testimonials — section heading center ── */
  .testi-grid .testi-card .testi-text { font-size: 0.86rem; line-height: 1.75; }

  /* ── Team page ── */
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .team-member-name { font-size: 0.88rem; }

  /* ── Contact page improvements ── */
  .contact-split { grid-template-columns: 1fr !important; }
  .contact-info-block { padding: 32px 20px; }

  /* ── h2 global mobile tightening ── */
  h2 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
}

/* ── Very small phones ≤380px ── */
@media (max-width: 380px) {
  .hero h1 { font-size: 2rem; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stats .hero-stat:last-child { grid-column: auto; border-top: none; border-right: none; }
  .hero-stat-num { font-size: 1.6rem; }
  .hero-stat-label { font-size: 0.44rem; letter-spacing: 0.08em; }
}

/* ═══════════════════════════════════════
   MOBILE-ONLY: Service card highlight sweep
   Gold sheen sweeps across each card as it enters view
═══════════════════════════════════════ */
@media (max-width: 640px) {
  @keyframes svcSweep {
    0%   { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
  }

  .svc-card {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background var(--t);
  }
  .svc-card.svc-visible {
    opacity: 1;
    transform: none;
  }
  /* Gold sheen pseudo-element — fires once on entry */
  .svc-card.svc-sweep::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 20%,
      rgba(232,160,32,0.18) 48%,
      rgba(255,220,100,0.26) 52%,
      transparent 80%
    );
    pointer-events: none;
    z-index: 3;
    animation: svcSweep 0.72s var(--ease) forwards;
  }
  /* Stagger */
  .svc-card:nth-child(2).svc-sweep::after { animation-delay: 0.06s; }
  .svc-card:nth-child(3).svc-sweep::after { animation-delay: 0.12s; }
  .svc-card:nth-child(4).svc-sweep::after { animation-delay: 0.18s; }
  .svc-card:nth-child(5).svc-sweep::after { animation-delay: 0.24s; }
  .svc-card:nth-child(6).svc-sweep::after { animation-delay: 0.30s; }

  /* ── Why section: numbered items animate in on mobile ── */
  .why-item {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.48s var(--ease), transform 0.48s var(--ease);
  }
  .why-item.why-visible {
    opacity: 1;
    transform: none;
  }
  /* Gold pulse on the number when it lands */
  @keyframes numPulse {
    0%   { opacity: 0.32; text-shadow: none; }
    40%  { opacity: 1; text-shadow: 0 0 24px rgba(232,160,32,0.55); color: var(--gold-light); }
    100% { opacity: 1; text-shadow: none; color: var(--gold); }
  }
  .why-item.why-visible .why-num {
    animation: numPulse 0.9s var(--ease) forwards;
  }
  /* Accent line that draws in from left */
  .why-item {
    border-bottom-color: rgba(255,255,255,0.06);
    position: relative;
  }
  .why-item::before {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    height: 1px;
    width: 0;
    background: var(--gold);
    transition: width 0.55s 0.3s var(--ease);
  }
  .why-item.why-visible::before { width: 48px; }
}


/* ═══════════════════════════════════════
   DARK MODE — Samsung Internet forced dark only
   color-scheme: only light on :root prevents standard OS dark mode.
   Samsung Internet's forced-dark feature bypasses color-scheme and
   rewrites colours directly; these overrides let us regain control
   when Samsung is actively forcing inversion.
   The -webkit-theme-color-scheme: dark query is Samsung-specific.
═══════════════════════════════════════ */
@media (-webkit-theme-color-scheme: dark) {

  /* ── TOKENS ── */
  :root {
    --white:      #121418;
    --cream:      #181b22;
    --stone:      #1e2129;
    --mist:       #2a2e38;
    --slate:      #9da3b0;
    --charcoal:   #d4d8e0;
    --ink:        #0a0c10;
    --gold-pale:  #1f1a0d;

    --shadow-xs:  0 1px 4px rgba(0,0,0,0.4);
    --shadow-sm:  0 2px 12px rgba(0,0,0,0.45);
    --shadow-md:  0 8px 32px rgba(0,0,0,0.55);
    --shadow-lg:  0 20px 60px rgba(0,0,0,0.65);
  }

  /* ── BASE ── */
  body { background: var(--white); color: var(--charcoal); }

  /* ── NAVBAR ── */
  .navbar.scrolled,
  .navbar.solid {
    background: rgba(18, 20, 24, 0.97);
    box-shadow: 0 1px 0 var(--mist), var(--shadow-sm);
  }
  .navbar.scrolled .navbar-line,
  .navbar.solid    .navbar-line { background: var(--mist); }
  .navbar.scrolled .nav-links a,
  .navbar.solid    .nav-links a { color: var(--slate); }
  .navbar.scrolled .nav-links a:hover,
  .navbar.scrolled .nav-links a.active,
  .navbar.solid    .nav-links a:hover,
  .navbar.solid    .nav-links a.active { color: #f0f2f5; }
  .navbar.scrolled .hamburger-icon span,
  .navbar.solid    .hamburger-icon span { background: #e2e5ed; }
  .navbar.scrolled .hamburger-btn:hover,
  .navbar.solid    .hamburger-btn:hover { background: rgba(255,255,255,0.07); }

  /* ── HEADINGS ── */
  h1, h2, h3, h4, h5 { color: #e8ecf4; }

  /* ── ABOUT SPLIT ── */
  .about-img-placeholder { filter: brightness(0.72) saturate(0.85); }

  /* ── MISSION GRID ── */
  .mission-grid { background: var(--mist); }
  .mission-card { background: var(--stone); color: #8ab0d8; }
  .mission-card:hover { background: #252932; }
  .mission-card h3 { color: #e8ecf4; }
  .mission-card p  { color: var(--slate); }

  /* ── STATS QUARTET ── */
  .stats-quartet { background: var(--mist); }
  .sq-item { background: var(--stone); }
  .sq-num  { color: #e8ecf4; }
  .sq-label { color: var(--slate); }

  /* ── SERVICES ── */
  .services-grid { background: var(--mist); }
  .svc-card { background: var(--stone); }
  .svc-card:hover { background: var(--navy); }
  .svc-icon { border-color: var(--mist); background: transparent; color: #c8cdd8; }
  .svc-card:hover .svc-icon { color: var(--gold); }
  .svc-card h3 { color: #e8ecf4; }
  .svc-card p  { color: var(--slate); }
  .svc-link    { color: #e8ecf4; }

  /* ── TEAM ── */
  .team-card { background: var(--stone); border-color: var(--mist); }
  .team-card:hover { border-color: var(--gold); }
  .team-name  { color: #e8ecf4; }
  .team-quals .team-qual { color: var(--slate); }
  .team-contact-link {
    color: #e8ecf4; border-color: var(--mist);
  }
  .team-contact-link:hover { background: var(--navy); color: var(--white); }

  /* ── TIMELINE ── */
  .tl-content {
    background: var(--stone);
    box-shadow: var(--shadow-sm);
    border-left-color: var(--gold);
  }
  .tl-content h4 { color: #e8ecf4; }
  .tl-content p  { color: var(--slate); }
  .tl-dot { border-color: var(--white); }

  /* ── TESTIMONIALS ── */
  .testimonials-section { background: var(--cream); }
  .testi-card {
    background: var(--stone);
    border-color: var(--mist);
  }
  .testi-text { color: #c8cdd8; }
  .testi-name { color: #e8ecf4; }
  .testi-role { color: var(--slate); }

  /* ── PROJECTS GRID (projects page) ── */
  .project-item { background: var(--stone); }
  .project-body h3 { color: #edf0f7; font-weight: 400; }
  .project-body p  { color: var(--slate); }
  .gallery-btn {
    color: #e8ecf4; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04);
  }
  .gallery-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }

  /* Filter bar */
  .filter-btn {
    background: var(--stone);
    color: var(--slate);
    border-color: var(--mist);
  }
  .filter-btn:hover { background: var(--navy-mid); color: #f0f2f5; border-color: var(--navy-mid); }
  .filter-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

  /* Pillar cards on about */
  .pillar { border-color: var(--mist); background: var(--stone); }
  .pillar:hover { border-color: var(--gold); }
  .pillar h5 { color: #e8ecf4; }
  .pillar p  { color: var(--slate); }

  /* ── CONTACT & FORMS ── */
  .form-group label { color: #c8cdd8; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    background: var(--stone);
    border-color: var(--mist);
    color: #e8ecf4;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232,160,32,0.12);
  }
  .form-group input::placeholder,
  .form-group textarea::placeholder { color: #555a65; }

  /* ── CONTACT INFO CARDS (if any light surface) ── */
  .contact-info-card { background: var(--stone); border-color: var(--mist); }

  /* ── BUTTONS on light backgrounds ── */
  /* btn-outline-navy: navy on light bg → becomes visible ghost on dark bg */
  .btn-outline-navy {
    border-color: rgba(255,255,255,0.25);
    color: #e8ecf4;
  }
  .btn-outline-navy:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--gold);
    color: var(--gold);
  }
  /* btn-navy on light sections: ensure text stays white */
  .btn-navy {
    background: var(--navy-mid);
    color: #f0f2f5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  .btn-navy:hover { background: var(--navy-light); color: #ffffff; }

  /* ── Team page v30 director / staff cards ── */
  .director-card {
    background: var(--stone);
    border-color: var(--mist);
  }
  .director-card:hover { border-color: rgba(232,160,32,0.35); }
  .director-name { color: #e8ecf4; }
  .director-title { color: var(--slate); }
  .director-qual { color: #c8cdd8; }
  .action-btn {
    color: #e8ecf4;
    border-color: var(--mist);
    background: transparent;
  }
  .action-btn:hover { background: var(--navy-mid); color: #ffffff; border-color: var(--navy-mid); }
  .action-btn.gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
  .action-btn.gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

  .staff-card {
    background: var(--stone);
    border-color: var(--mist);
  }
  .staff-card:hover { border-color: rgba(232,160,32,0.25); }
  .staff-name { color: #e8ecf4; }
  .staff-body { border-top-color: var(--mist); }
  .staff-qual { color: var(--slate); }
  .staff-qual strong { color: #c8cdd8; }

  .team-chapter-line { background: linear-gradient(90deg, var(--mist) 0%, transparent 100%); }

  /* ── BACK TO TOP ── */
  .back-to-top { background: var(--navy-mid); }
  .back-to-top:hover { background: var(--navy-light); }

  /* ── FOOTER — already dark, just deepen ink ── */
  footer { background: #080a0d; }
  .footer-bottom { border-top-color: rgba(255,255,255,0.05); }

  /* ── GALLERY LIGHTBOX — already dark, just tweak ── */
  .gallery-overlay { background: rgba(4, 6, 12, 0.98); }
  .gal-filmstrip { border-top-color: rgba(255,255,255,0.05); }

  /* ── SECTIONS WITH CREAM BG ── */
  section[style*="background:var(--cream)"],
  section[style*="background: var(--cream)"] { background: var(--cream) !important; }

  /* ── HERO (homepage) — already dark ── */
  /* ── PAGE HERO (inner pages) — already navy ── */
  /* ── WHY SECTION — already navy ── */
  /* ── CTA BAND — already navy gradient ── */
  /* ── TRUST BAND — already ink ── */
  /* ── VALUES SECTION — already navy ── */
  /* ── MOBILE NAV — already navy ── */
  /* ── GALLERY OVERLAY — already very dark ── */

  /* ── SCROLLBAR — dark mode polish ── */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--stone); }
  ::-webkit-scrollbar-thumb { background: var(--mist); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--slate); }

  /* ── SVG icons — now use currentColor, just set the color ── */
  .mission-icon { color: #8ab0d8; }
  .svc-card h3 { color: #e8ecf4; }

  /* ── "About page" image brightness on dark mode ── */
  .about-img-placeholder img { filter: brightness(0.75); }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM ENHANCEMENTS — Services Focus Update
   ══════════════════════════════════════════════════════════════ */

/* 2-column service cards on home page — ensure premium sizing */
.services-grid[style*="grid-template-columns:1fr 1fr"] .svc-card {
  padding: 44px 40px 40px;
}
.services-grid[style*="grid-template-columns:1fr 1fr"] .svc-card h3 {
  font-size: 1.45rem;
  line-height: 1.3;
}
.services-grid[style*="grid-template-columns:1fr 1fr"] .svc-card p {
  font-size: 0.91rem;
  line-height: 1.85;
}

/* Premium discipline badge */
.discipline-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(232,160,32,0.1);
  border: 1px solid rgba(232,160,32,0.25);
  color: var(--gold);
  padding: 6px 14px; border-radius: 20px;
  margin-bottom: 16px;
}
.discipline-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Services hero SVG strip — update RESIDENTIAL / STEEL labels */
@media(max-width:640px) {
  .services-grid[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}