/* ═══════════════════════════════════════
   DRIVON SYSTEMS — styles.css
   ═══════════════════════════════════════ */

:root {
  --navy: #0D1B3E;
  --navy-mid: #152347;
  --navy-light: #1e3060;
  --gold: #C9A84C;
  --gold-light: #F0C040;
  --gold-dim: rgba(201,168,76,0.12);
  --white: #FFFFFF;
  --off-white: #F5F2EC;
  --gray-100: #F8F9FB;
  --gray-200: #EEF0F4;
  --gray-400: #9AA3B2;
  --gray-600: #5B6B7F;
  --text: #0D1B3E;
  --radius: 14px;
  --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}




/* ─── SCROLLBAR ─── */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--navy-light) rgba(13,27,62,0.06);
}

/* Chrome, Edge, Safari (WebKit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(13,27,62,0.06);
}

::-webkit-scrollbar-thumb {
  background: var(--navy-light);
  border-radius: 10px;
  border: 2px solid rgba(13,27,62,0.06);
  transition: background 0.25s ease;
}

::-webkit-scrollbar-thumb:hover,
html.is-scrolling ::-webkit-scrollbar-thumb {
  background: var(--gold);
}

::-webkit-scrollbar-corner {
  background: rgba(13,27,62,0.06);
}















/* ─── LCP FIX: Hero text visible by default ─── */
/* GSAP will animate these but Google sees them immediately */
.hero-h1,
.hero-sub,
.hero-eyebrow,
.about-h1,
.about-hero-sub {
  opacity: 1 !important;
}

/* Let GSAP override opacity for the animation entrance,
   but only after JS loads — so if JS is slow, content shows */
.js-loaded .hero-h1,
.js-loaded .hero-sub,
.js-loaded .hero-eyebrow,
.js-loaded .about-h1,
.js-loaded .about-hero-sub {
  opacity: 0;
}


 html, body {
  overflow-x: hidden;
  max-width: 100%;
} 


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
}

button {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}


/* ::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

::-webkit-scrollbar-thumb{
    background:var(--navy);
    border-radius:20px;
    border:2px solid white;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--gold);
} */





/* ─── SCROLLBAR ─── */

/* Firefox */
/* html {
  scrollbar-width: thin;
  scrollbar-color: var(--navy-light) rgba(13,27,62,0.06);
}

/* Chrome, Edge, Safari (WebKit) */


/*
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(13,27,62,0.06);
}

::-webkit-scrollbar-thumb {
  background: var(--navy-light);
  border-radius: 10px;
  border: 2px solid rgba(13,27,62,0.06);
  transition: background 0.25s ease;
}

::-webkit-scrollbar-thumb:hover,
html.is-scrolling ::-webkit-scrollbar-thumb {
  background: var(--gold);
}

::-webkit-scrollbar-corner {
  background: rgba(13,27,62,0.06);
} */











/* ─── FORCE CUSTOM CURSOR ON ALL INTERACTIVE ELEMENTS ─── */
@media (min-width: 1025px) {
  a, button, input, textarea, select, label, summary,
  [role="button"], [tabindex], .btn, .nav-cta, .scroll-top,
  * {
    cursor: none !important;
  }
}




/* ─── CUSTOM CURSOR ─── */
.cursor {
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; 
  /* z-index: 9999; */
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s, height 0.3s;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 40px; height: 40px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; 
  /*z-index: 9998;*/
  z-index: 999998;
  
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--transition);
  opacity: 0.6;
}
@media (max-width: 1024px) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}


/* ─── CURSOR CLICK EFFECTS ─── */
.cursor-click-ripple {
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  /* z-index: 9997; */
  z-index: 999997;
  
  transform: translate(-50%, -50%);
}

.cursor-click-particle {
  position: fixed; top: 0; left: 0;
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  /*z-index: 9997;*/
  z-index: 999997;
  
  transform: translate(-50%, -50%);
}

.cursor-click-pulse{
  position:fixed;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background:var(--gold);
  border-radius:50%;
  pointer-events:none;
  /*z-index:9997;*/
  z-index: 999997;
  
  transform:translate(-50%,-50%);
}


.cursor-click-echo {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
}


.cursor-click-halo {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .25;
  filter: blur(18px);
  pointer-events: none;
  z-index: 9996;
  transform: translate(-50%, -50%);
}





































/* ─── NAVBAR ─── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  padding: 0 4rem;
  height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  transition: background 0.4s, backdrop-filter 0.4s;
}
nav.scrolled {
  background: rgba(13,27,62,0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
}

/* .nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; opacity: 0; z-index: 10;
}

.nav-logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
} */

/* .nav-logo-icon::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: var(--navy);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
} */

/* .nav-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--white); letter-spacing: 1px;
}
.nav-logo-text span { color: var(--gold); } */

/* Desktop nav links */
.nav-links {
  display: flex; align-items: center; gap: 2.5rem;
  list-style: none; opacity: 0;
}
.nav-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none; font-size: 14px;
  font-weight: 500; letter-spacing: 0.3px;
  transition: color 0.3s; position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width 0.3s var(--transition);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  color: var(--navy) !important;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600 !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,0.3) !important;
}

/* ─── HAMBURGER ─── */
.hamburger {
  display: none; flex-direction: column;
  gap: 6px; cursor: pointer; padding: 8px;
  background: none; border: none; z-index: 1100;
}
.hamburger span {
  display: block; width: 26px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.35s var(--transition), opacity 0.3s, width 0.3s;
  transform-origin: center;
}

/* Hamburger open state — X animation */
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0; width: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ─── MOBILE MENU ─── */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px; left: 0; right: 0;
  background: rgba(13,27,62,0.98);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  z-index: 999;
  padding: 1.5rem 2rem 2rem;
  flex-direction: column; gap: 0;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.35s var(--transition), opacity 0.35s;
  pointer-events: none;

  /* Cap height and make scrollable if content overflows */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
}

.mobile-menu::-webkit-scrollbar { display: none; }


.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.mobile-menu li {
  list-style: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-menu li:last-child { border-bottom: none; }
.mobile-menu a {
  display: block; padding: 1rem 0;
  color: rgba(255,255,255,0.85);
  text-decoration: none; font-size: 16px; font-weight: 500;
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-menu a:hover { color: var(--gold); padding-left: 6px; }
.mobile-menu .mob-cta {
  margin-top: 1.2rem;
  display: inline-block;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy) !important;
  padding: 14px 28px;
  border-radius: 10px; font-weight: 600;
  text-align: center; width: 100%;
}

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-bg-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0; }
.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,168,76,0.15), transparent);
  top: -200px; right: -100px;
}
.orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -150px; left: -100px;
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201,168,76,0.08), transparent);
  top: 40%; left: 40%;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 4rem; padding-top: 120px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  position: relative; z-index: 2;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 6px 16px;
  margin-bottom: 1.5rem; opacity: 0;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.hero-eyebrow span {
  font-size: 12px; font-weight: 500;
  color: var(--gold); letter-spacing: 1px; text-transform: uppercase;
}
.hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem; opacity: 0;
}
.hero-h1 em {
  font-style: normal; color: var(--gold); position: relative;
}
.hero-h1 em::after {
  content: '';
  position: absolute; bottom: 4px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  border-radius: 2px; transform: scaleX(0); transform-origin: left;
  animation: underlineSlide 0.8s var(--transition) 1.2s forwards;
}
@keyframes underlineSlide { to { transform: scaleX(1); } }
.hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem; max-width: 480px; opacity: 0;
}
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 2.5rem; opacity: 0;
}
.hero-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px; padding: 6px 14px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  transition: all 0.3s;
}
.hero-tag:hover {
  background: var(--gold-dim);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}
.hero-actions {
  display: flex; gap: 1rem; align-items: center;
  margin-bottom: 3.5rem; opacity: 0;
}
.btn-gold {
  padding: 14px 32px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  letter-spacing: 0.3px; white-space: nowrap; text-decoration: none;
  display: inline-block;
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(201,168,76,0.35);
}
.btn-outline {
  padding: 14px 32px; background: transparent;
  color: var(--white); border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 10px; font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: all 0.3s; display: flex; align-items: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
}
.btn-outline:hover {
  border-color: rgba(201,168,76,0.5);
  color: var(--gold); background: var(--gold-dim);
}
.play-icon {
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 10px;
}
.hero-stats {
  display: flex; gap: 2rem;
  padding-block: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08); opacity: 0;
}
.hero-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: var(--white);
}
.hero-stat-num span { color: var(--gold); }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* ─── HERO RIGHT (IMPROVED) ─── */
.hero-right {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  /* Extra padding so floating badges don't clip */
  padding: 40px 48px 40px 32px;
}
.hero-visual-card {
  width: 100%; max-width: 440px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px; padding: 1.8rem;
  position: relative; backdrop-filter: blur(10px);
}
.hero-visual-card::before {
  content: '';
  position: absolute; top: -1px; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.mock-browser {
  background: rgba(255,255,255,0.05);
  border-radius: 10px; overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,0.07);
}
.mock-browser-bar {
  padding: 10px 14px; background: rgba(0,0,0,0.2);
  display: flex; align-items: center; gap: 8px;
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; }
.mock-dot:nth-child(1) { background: #FF5F57; }
.mock-dot:nth-child(2) { background: #FFBD2E; }
.mock-dot:nth-child(3) { background: #28CA41; }
.mock-url {
  margin-left: 8px; background: rgba(255,255,255,0.05);
  border-radius: 4px; padding: 3px 12px;
  font-size: 11px; color: rgba(255,255,255,0.3); flex: 1;
}
.mock-screen {
  padding: 1.5rem;
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  min-height: 160px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.mock-screen::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}
.mock-chart-bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 80px; padding: 0 10px;
  position: relative; z-index: 1;
}
.mock-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(201,168,76,0.2);
  position: relative; overflow: hidden;
}
.mock-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, var(--gold), rgba(240,192,64,0.4));
  height: 100%;
  animation: barGrow 1.5s var(--transition) forwards;
  transform-origin: bottom; transform: scaleY(0);
}
@keyframes barGrow { to { transform: scaleY(1); } }
.mock-bar:nth-child(1) { height: 45%; }
.mock-bar:nth-child(1)::after { animation-delay: 0.1s; }
.mock-bar:nth-child(2) { height: 70%; }
.mock-bar:nth-child(2)::after { animation-delay: 0.2s; }
.mock-bar:nth-child(3) { height: 55%; }
.mock-bar:nth-child(3)::after { animation-delay: 0.3s; }
.mock-bar:nth-child(4) { height: 85%; }
.mock-bar:nth-child(4)::after { animation-delay: 0.4s; }
.mock-bar:nth-child(5) { height: 65%; }
.mock-bar:nth-child(5)::after { animation-delay: 0.5s; }
.mock-bar:nth-child(6) { height: 90%; }
.mock-bar:nth-child(6)::after { animation-delay: 0.6s; }
.mock-bar:nth-child(7) { height: 75%; }
.mock-bar:nth-child(7)::after { animation-delay: 0.7s; }
.mock-label {
  font-size: 11px; color: rgba(201,168,76,0.7);
  margin-top: 8px; letter-spacing: 1px; text-transform: uppercase;
  position: relative; z-index: 1;
}
.mini-stat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.mini-stat {
  background: rgba(255,255,255,0.04);
  border-radius: 10px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.3s;
}
.mini-stat:hover { background: var(--gold-dim); border-color: rgba(201,168,76,0.2); }
.mini-stat-num {
  font-size: 22px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.mini-stat-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* Floating badges — fixed positioning + z-index so they don't clip */
.float-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(24px);
  white-space: nowrap;
  box-shadow: 0 20px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.08);
  z-index: 10;
}
.float-badge-1 {
  top: 0; right: 0;
  animation: floatBadge1 4s ease-in-out infinite;
}
.float-badge-2 {
  bottom: 10px; left: 0;
  animation: floatBadge2 4s ease-in-out infinite 0.5s;
}
@keyframes floatBadge1 {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes floatBadge2 {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}
.float-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.15);
}
.float-label { font-size: 11px; color: rgba(255,255,255,0.5); }
.float-value { font-size: 15px; font-weight: 700; color: var(--white); }

/* ─── MARQUEE (services ticker) ─── */
.marquee-section {
  background: var(--navy);
  border-top: 1px solid rgba(201,168,76,0.1);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  padding: 1.2rem 0; overflow: hidden;
}
.marquee-track {
  display: flex; gap: 3rem; width: max-content;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-item {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.35);
  font-size: 13px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap;
}
.marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.5; }

/* ─── CLIENT LOGOS MARQUEE ─── */
.logos-section {
  background: var(--off-white);
  padding: 3.5rem 0; overflow: hidden;
}
.logos-label {
  text-align: center;
  font-size: 14px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gray-400);
  margin-bottom: 4rem;
}
.logos-track-wrap { overflow: hidden; }
.logos-track {
  display: flex; align-items: center; gap: 4rem;
  width: max-content;
  animation: logoMarquee 28s linear infinite;
}
.logos-track:hover { animation-play-state: paused; }
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-item {
  display: flex; align-items: center; gap: 10px;
  opacity: 0.4; transition: opacity 0.3s;
  white-space: nowrap;
}
.logo-item:hover { opacity: 0.8; }
.logo-shape {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.logo-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700;
  color: var(--navy); letter-spacing: 0.5px;
}

/* ─── SECTION SHARED ─── */
.section-pill {
  display: inline-flex; align-items: center;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 6px 16px;
  font-size: 11px; font-weight: 600;
  color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.section-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4vw, 56px); font-weight: 700;
  line-height: 1.2; color: var(--text); margin-bottom: 1rem;
}
.section-h2 em { font-style: normal; color: var(--gold); }
.section-sub {
  font-size: 17px; color: var(--gray-600);
  max-width: 500px; line-height: 1.7; margin-bottom: 3.5rem;
}

/* ─── SERVICES ─── */
.services { padding: 8rem 4rem; background: var(--white); }
.services-inner { max-width: 1200px; margin: 0 auto; }
.services-layout {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 0 0 1px var(--gray-200);
}
.svc-card {
  padding: 2.5rem; background: var(--white);
  position: relative; transition: background 0.3s, transform 0.3s;
  cursor: pointer; border: 1px solid var(--gray-200);
}


.svc-card:hover { background: var(--navy); z-index: 2; box-shadow: 0 20px 60px rgba(13,27,62,0.15); }
.svc-number { font-size: 11px; color: var(--gold); font-weight: 600; letter-spacing: 2px; margin-bottom: 1.2rem; opacity: 0.6; transition: opacity 0.3s; }
.svc-card:hover .svc-number { opacity: 1; }
.svc-icon-wrap { width: 56px; height: 56px; background: var(--gray-100); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 1.5rem; transition: background 0.3s; }
.svc-card:hover .svc-icon-wrap { background: rgba(201,168,76,0.15); }
.svc-name { font-size: 20px; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); transition: color 0.3s; }
.svc-card:hover .svc-name { color: var(--white); }
.svc-desc { font-size: 14px; color: var(--gray-600); line-height: 1.7; transition: color 0.3s; }
.svc-card:hover .svc-desc { color: rgba(255,255,255,0.6); }
.svc-arrow { position: absolute; bottom: 2rem; right: 2rem; width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--gray-400); transition: all 0.3s; }
.svc-card:hover .svc-arrow { background: var(--gold); color: var(--navy); transform: translate(4px, -4px); }

/* ─── CASE STUDY ─── */
.case-study {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.case-study::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.case-study-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.case-study-header { margin-bottom: 3.5rem; }
.case-study-header .section-h2 { color: var(--white); }
.case-study-header .section-sub { color: rgba(255,255,255,0.5); }
.case-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  align-items: start;
}
.case-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2.5rem;
  transition: border-color 0.3s;
}
.case-card:hover { border-color: rgba(201,168,76,0.25); }
.case-client {
  display: inline-block;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 4px 14px;
  font-size: 11px; font-weight: 600; color: var(--gold);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.2rem;
}
.case-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700;
  color: var(--white); margin-bottom: 1rem; line-height: 1.3;
}
.case-problem {
  font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.5);
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255,255,255,0.1);
}
.case-what {
  font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.6);
  margin-bottom: 2rem;
}
.case-results {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.case-result-item {
  background: rgba(255,255,255,0.04);
  border-radius: 12px; padding: 1.2rem 1rem; text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.case-result-num {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--gold);
  display: block; margin-bottom: 4px;
}
.case-result-label { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.4; }
.case-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold); text-decoration: none; font-size: 13px;
  font-weight: 600; letter-spacing: 0.3px;
  transition: gap 0.3s;
}
.case-link:hover { gap: 10px; }

/* ─── WHY US ─── */
.why {
  background: var(--navy); padding: 8rem 4rem;
  position: relative; overflow: hidden;
  margin-top: -1px; /* Fixes tiny gap between sections due to border */
}
.why::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.why-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
}
.why-img {
  width: 100%; aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
  border-radius: 20px; border: 1px solid rgba(201,168,76,0.1);
  overflow: hidden; position: relative;
}
.why-img-placeholder {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&q=80') center/cover;
  opacity: 0.3;
}
.why-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,27,62,0.9) 0%, transparent 50%);
}
.why-img-stat {
  position: absolute; bottom: 2rem; left: 2rem; right: 2rem;
  background: rgba(13,27,62,0.8);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 14px; padding: 1.5rem; backdrop-filter: blur(20px);
}
.why-stat-row { display: flex; gap: 2rem; }
.why-s { flex: 1; }
.why-s-num { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--gold); }
.why-s-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.why-content .section-h2 { color: var(--white); }
.why-content .section-sub { color: rgba(255,255,255,0.5); }
.why-features { display: flex; flex-direction: column; gap: 1.5rem; }
.why-feature {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; transition: all 0.3s;
}
.why-feature:hover { background: var(--gold-dim); border-color: rgba(201,168,76,0.2); transform: translateX(8px); }
.why-feature-icon { width: 44px; height: 44px; min-width: 44px; background: var(--gold-dim); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.why-feature-body h4 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.why-feature-body p { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; }

/* ─── PROCESS ─── */
.process { padding: 8rem 4rem; background: var(--off-white); }
.process-inner { max-width: 1200px; margin: 0 auto; }
.process-header { text-align: center; margin-bottom: 5rem; }
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; position: relative;
}
.process-steps::before {
  content: '';
  position: absolute; top: 36px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.3;
}
.process-step { text-align: center; padding: 2rem 1rem; }
.process-step-num {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--navy);
  margin: 0 auto 1.5rem; position: relative; z-index: 1;
  box-shadow: 0 8px 24px rgba(201,168,76,0.25);
  transition: transform 0.3s, box-shadow 0.3s;
}
.process-step:hover .process-step-num { transform: scale(1.1); box-shadow: 0 12px 32px rgba(201,168,76,0.35); }
.process-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 0.5rem; }
.process-step p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }

/* ─── TESTIMONIALS CAROUSEL ─── */
/* ─── TESTIMONIALS CAROUSEL ─── */
.testimonials {
  padding: 8rem 4rem;
  background: var(--white);
  overflow: hidden;
}
.testimonials-inner { max-width: 1200px; margin: 0 auto; }
.testimonials-header { margin-bottom: 3rem; }

.carousel-wrap { position: relative; }

.carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Each card fills exactly 1/N of the viewport minus gaps */
.tcard {
  flex-shrink: 0;
  background: var(--white);
  border-radius: 20px;
  padding: 2rem 2rem 1.8rem;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 24px rgba(13,27,62,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
}
.tcard::before {
  content: '';
  position: absolute;
  top: 0; left: 2rem; right: 2rem; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.25);
}
.tcard:hover::before { opacity: 1; }

.tcard-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}
.tcard-stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
}
.tcard-quote {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.2;
  user-select: none;
}
.tcard-body {
  font-size: 14px;
  line-height: 1.85;
  color: var(--gray-600);
  flex: 1;
  margin-bottom: 1.8rem;
}
.tcard-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gray-200);
}
.tcard-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
  border: 2px solid rgba(201,168,76,0.15);
}
.tcard-name { font-size: 14px; font-weight: 600; color: var(--text); }
.tcard-role { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

/* ─── Carousel controls ─── */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.carousel-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--navy);
  transition: all 0.3s;
  flex-shrink: 0;
  user-select: none;
}
.carousel-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
  transform: scale(1.08);
}
.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}
.carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  padding: 0;
}
.carousel-dot.active {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
}


/* ─── CONTACT FORM ─── */
.contact-form-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.contact-form-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
}
.contact-form-left .section-h2 { color: var(--text); }
.contact-info-items { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-item {
  display: flex; gap: 1rem; align-items: flex-start;
}
.contact-info-icon {
  width: 44px; height: 44px; background: var(--gold-dim);
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
  border: 1px solid rgba(201,168,76,0.15);
}
.contact-info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-400); margin-bottom: 2px; }
.contact-info-val { font-size: 14px; font-weight: 500; color: var(--text); }

.form-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(13,27,62,0.06);
  border: 1px solid var(--gray-200);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text); margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--gray-200); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
  background: var(--gray-100); transition: border-color 0.3s, background 0.3s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold); background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-submit {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201,168,76,0.3); }

/* ─── NEWSLETTER ─── */
.newsletter {
  background: var(--navy);
  padding: 5rem 4rem;
  position: relative; overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.newsletter-inner {
  max-width: 640px; margin: 0 auto; text-align: center;
  position: relative; z-index: 1;
}
.newsletter-inner .section-h2 { color: var(--white); font-size: clamp(28px, 3.5vw, 44px); margin-bottom: 0.8rem; }
.newsletter-inner p { color: rgba(255,255,255,0.5); font-size: 15px; margin-bottom: 2rem; }
.newsletter-form {
  display: flex; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 8px 8px 8px 20px;
}
.newsletter-form input {
  flex: 1; background: none; border: none; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  color: var(--white);
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }
.newsletter-form button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform 0.2s;
  white-space: nowrap;
}
.newsletter-form button:hover { transform: scale(1.03); }
.newsletter-note { font-size: 12px; color: rgba(255,255,255,0.3); margin-top: 1rem; }

/* ─── FINAL CTA ─── */
.final-cta { padding: 8rem 4rem; background: var(--navy); position: relative; overflow: hidden; margin-top: -1px; }
.final-cta::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cta-inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta-h2 { font-family: 'Playfair Display', serif; font-size: clamp(36px, 4vw, 60px); font-weight: 700; color: var(--white); margin-bottom: 1.5rem; line-height: 1.2; }
.cta-h2 em { font-style: normal; color: var(--gold); }
.cta-sub { font-size: 17px; color: rgba(255,255,255,0.5); margin-bottom: 3rem; line-height: 1.7; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── FOOTER ─── */
footer { background: #080f20; padding: 5rem 4rem 2rem; color: rgba(255,255,255,0.4); margin-top: -1px; }
.footer-top { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 2rem; }
.footer-brand h3 { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--white); margin-bottom: 1rem; }
.footer-brand p { font-size: 13px; line-height: 1.8; max-width: 280px; }
.footer-social { display: flex; gap: 10px; margin-top: 1.5rem; }
.social-btn { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(255,255,255,0.4); text-decoration: none; transition: all 0.3s; }
.social-btn:hover { background: var(--gold-dim); border-color: rgba(201,168,76,0.2); color: var(--gold); }
.footer-col h4 { font-size: 13px; font-weight: 600; color: var(--white); letter-spacing: 0.5px; margin-bottom: 1.2rem; }
.footer-col a { display: block; color: rgba(255,255,255,0.4); text-decoration: none; font-size: 13px; margin-bottom: 0.8rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; flex-wrap: wrap; gap: 1rem; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.3s; }
.footer-bottom-links a:hover { color: var(--gold); }

/* ─── SCROLL TO TOP ─── */
.scroll-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; background: linear-gradient(135deg, #F0C040, #C9A84C); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; box-shadow: 0 8px 24px rgba(201,168,76,0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 999; color: var(--navy); font-weight: 700; }
.scroll-top.show { opacity: 1; pointer-events: all; }
.scroll-top:hover { transform: translateY(-4px); }

/* ─── REVEAL ─── */
.reveal { opacity: 0; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  nav { padding: 0 2rem; }
  .nav-links { display: none !important; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  .hero-inner { grid-template-columns: 1fr; padding: 0 2rem; padding-top: 110px; }
  .hero-right { display: none; }

  .services { padding: 5rem 2rem; }
  .services-layout { grid-template-columns: repeat(2, 1fr); }

  /* .services-layout { grid-template-columns: 1fr; } */

  .case-study { padding: 5rem 2rem; }
  .case-grid { grid-template-columns: 1fr; }

  .why { padding: 5rem 2rem; }
  .why-inner { grid-template-columns: 1fr; }
  .why-visual { display: none; }

  .process { padding: 5rem 2rem; }
  .process-steps { grid-template-columns: 1fr 1fr; }

  .testimonials { padding: 5rem 2rem; }

  .contact-form-section { padding: 5rem 2rem; }
  .contact-form-inner { grid-template-columns: 1fr; gap: 3rem; }

  .newsletter { padding: 4rem 2rem; }
  .newsletter-form { flex-direction: column; padding: 1rem; }
  .newsletter-form input { padding: 10px 0; }

  .final-cta { padding: 5rem 2rem; }
  footer { padding: 4rem 2rem 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .services-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-h1 { font-size: 42px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .btn-gold, .btn-outline { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { gap: 1rem; flex-wrap: wrap; }
  .process-steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-actions { flex-direction: column; align-items: center; }
  .form-row { grid-template-columns: 1fr; }
  .case-results { grid-template-columns: 1fr 1fr; }
  .logos-section { padding: 2.5rem 0; }
}




/* ───────────────── FORM VALIDATION ───────────────────────────── */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #e74c3c;
  background: #fff8f8;
  animation: shake 0.35s ease;
}
.form-group input.success,
.form-group select.success,
.form-group textarea.success {
  border-color: #27ae60;
  background: #f8fff9;
}
.field-error {
  display: none;
  font-size: 12px;
  color: #e74c3c;
  margin-top: 5px;
  padding-left: 2px;
  font-weight: 500;
}
.field-error.show { display: block; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* Success banner */
.form-success-banner {
  display: none;
  background: #f0fff4;
  border: 1px solid #27ae60;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-top: 1.2rem;
  margin-bottom: 1.5rem;
  font-size: 14px;
  color: #1a7a40;
  font-weight: 500;
  align-items: center;
  gap: 10px;
}
.form-success-banner.show { display: flex; }


/* ───────────────── END FORM VALIDATION ───────────────────────────── */




/* ─── FLOATING CONTACT BUTTONS ─── */
.float-contact {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Trigger */
.float-contact-trigger {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative; z-index: 2;
}
.float-contact-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(37,211,102,0.5);
}
.float-contact-trigger.open {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  box-shadow: 0 8px 24px rgba(13,27,62,0.4);
}
.float-trigger-icon {
  font-size: 22px; line-height: 1;
  transition: opacity 0.2s, transform 0.2s;
  position: absolute;
}
.float-trigger-icon--close {
  opacity: 0; transform: rotate(-90deg);
  font-size: 18px; color: var(--white);
  font-style: normal;
}
.float-contact-trigger.open .float-trigger-icon--open {
  opacity: 0; transform: rotate(90deg);
}
.float-contact-trigger.open .float-trigger-icon--close {
  opacity: 1; transform: rotate(0deg);
}

/* Options container */
/* .float-contact-options {
  display: flex;
  flex-direction: column;
  gap: 8px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94),
              visibility 0.3s;
}
.float-contact-options.open {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
} */

.float-contact-options {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.float-contact-options.open {
  display: flex;
  animation: floatOptionsIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes floatOptionsIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Individual buttons */
.float-contact-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.25s, box-shadow 0.25s;
  font-family: 'DM Sans', sans-serif;
}
.float-contact-btn:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.float-contact-btn--whatsapp {
  background: #25D366;
  color: #fff;
}
.float-contact-btn--whatsapp:hover { background: #20bc5a; color: #fff; }

.float-contact-btn--call {
  background: var(--navy);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.25);
}
.float-contact-btn--call:hover { background: var(--navy-light); color: var(--gold); }

.float-contact-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.float-contact-btn--call .float-contact-icon {
  background: rgba(201,168,76,0.15);
}
.float-contact-label { letter-spacing: 0.3px; }

/* Pulse ring on trigger to draw attention */
.float-contact-trigger::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.4);
  animation: floatPulse 2.5s ease-out infinite;
}
.float-contact-trigger.open::before { display: none; }
@keyframes floatPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* On mobile: always show options on tap, never on hover */
@media (max-width: 640px) {
  .float-contact { bottom: 1.5rem; left: 1rem; }
  .float-contact-btn { font-size: 12px; padding: 9px 14px 9px 9px; }
}



/* ─── BTN-OUTLINE ON LIGHT BACKGROUNDS ─── */
.svc-detail-section .btn-outline{
  color: var(--navy-light);
  border-color: rgba(13,27,62,0.3);
}
.svc-detail-section .btn-outline:hover {
  color: var(--gold);
  border-color: rgba(201,168,76,0.5);
  background: var(--gold-dim);
}




/* ─── SERVICES DROPDOWN ─── */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
}
.nav-dropdown-arrow {
  transition: transform 0.3s var(--transition);
  flex-shrink: 0; margin-top: 1px;
}
.nav-dropdown.open .nav-dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown panel */
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 460px;
  background: rgba(13,27,62,0.98);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--transition), transform 0.25s var(--transition);
  z-index: 1001;
  overflow: hidden;

  /* Cap height and make scrollable if content overflows */
  /* max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none; */
}

/* .nav-dropdown-menu::-webkit-scrollbar { display: none; } */

/* Small triangle pointer */
.nav-dropdown-menu::before {
  content: '';
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(13,27,62,0.98);
  border-top: 1px solid rgba(201,168,76,0.15);
  border-left: 1px solid rgba(201,168,76,0.15);
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* 2-column grid of service links */
.nav-dropdown-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; padding: 0.8rem;
}
.nav-dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s;
}
.nav-dropdown-item:hover {
  background: rgba(201,168,76,0.08);
}
.nav-dd-icon {
  font-size: 22px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 8px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s;
}
.nav-dropdown-item:hover .nav-dd-icon {
  background: rgba(201,168,76,0.12);
}
.nav-dd-body {
  display: flex; flex-direction: column; gap: 2px;
}
.nav-dd-title {
  font-size: 13px; font-weight: 600; color: var(--white);
  transition: color 0.2s;
}
.nav-dropdown-item:hover .nav-dd-title { color: var(--gold); }
.nav-dd-sub {
  font-size: 11px; color: rgba(255,255,255,0.4);
}

/* Footer link */
.nav-dropdown-footer {
  padding: 0.8rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.nav-dropdown-footer a {
  font-size: 12px; font-weight: 600;
  color: var(--gold); text-decoration: none;
  letter-spacing: 0.3px;
  transition: opacity 0.2s;
}
.nav-dropdown-footer a:hover { opacity: 0.7; }
.nav-dropdown-footer a::after { display: none !important; }

/* ─── MOBILE SERVICES ACCORDION ─── */
.mob-services-item { border-bottom: 1px solid rgba(255,255,255,0.05); }

.mob-services-trigger {
  width: 100%; background: none; border: none;
  padding: 1rem 0;
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.mob-services-arrow {
  transition: transform 0.3s var(--transition); flex-shrink: 0;
  stroke: rgba(255,255,255,0.6);
}
.mob-services-trigger.open .mob-services-arrow { transform: rotate(180deg); }
.mob-services-trigger.open { color: var(--gold); }
.mob-services-trigger.open .mob-services-arrow { stroke: var(--gold); }

.mob-services-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--transition);
  display: flex; flex-direction: column;
}
.mob-services-panel.open { max-height: 600px; margin-left: 15px; }

.mob-service-link {
  display: block; padding: 0.7rem 0 0.7rem 1rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none; font-size: 14px;
  /* border-left: 2px solid rgba(255,255,255,0.08); */
  border-bottom: 2px solid rgba(255,255,255,0.05);
  margin-bottom: 2px;
  transition: color 0.2s, border-color 0.2s, padding-left 0.2s;
}
.mob-service-link:hover,
.mob-service-link:active {
  color: var(--gold);
  border-left-color: var(--gold);
  padding-left: 1.4rem;
}
.mob-service-link--all {
  color: var(--gold); font-weight: 600;
  border-left-color: rgba(201,168,76,0.3);
  margin-top: 0.3rem; margin-bottom: 0.8rem;
}


/* ─── MOBILE SERVICES COMING SOON ─── */
.mob-services-coming-divider {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 0 0.4rem 1rem;
  margin-top: 0.4rem;
}
.mob-services-coming-divider span {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 1.5px; text-transform: uppercase;
  white-space: nowrap;
}
.mob-services-coming-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: rgba(255,255,255,0.16);
}

.mob-service-link--coming {
  display: flex; align-items: center;
  justify-content: space-between;
  opacity: 0.90;
  font-style: normal;
}
.mob-service-link--coming:hover,
.mob-service-link--coming:active {
  opacity: 1;
  color: var(--gold);
  border-left-color: var(--gold);
  padding-left: 1.4rem;
}
.mob-soon-badge {
  display: inline-block;
  background: rgba(201,168,76,0.15);
  border-radius: 4px; padding: 2px 7px;
  font-size: 9px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase; flex-shrink: 0;
}






.ind-section { padding: 6rem 4rem; background: var(--white); }
.ind-inner { max-width: 1100px; margin: 0 auto; text-align: center; }

.ind-lead {
  margin-top: 2.5rem; font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-400);
}

.ind-chip-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.9rem; margin-top: 1.5rem;
}
.ind-chip {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.4rem; border-radius: 999px;
  border: 1.5px solid var(--gray-200); background: var(--gray-100);
  font-size: 14px; font-weight: 600; color: var(--navy);
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ind-chip:hover {
  border-color: var(--gold); background: var(--gold-dim);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.ind-chip-icon { display: flex; }
.ind-chip-icon svg { width: 18px; height: 18px; stroke: var(--gold); }

.ind-note {
  margin-top: 1.8rem; font-size: 14px; color: var(--gray-400); font-style: italic;
}

.ind-more { margin-top: 1.6rem; }
.ind-more a {
  color: var(--gold); font-weight: 600; font-size: 15px;
  text-decoration: none; border-bottom: 1.5px solid transparent;
}
.ind-more a:hover { border-bottom-color: var(--gold); }

@media (max-width: 768px) {
  .ind-section { padding: 4rem 1.5rem; }
  .ind-chip { padding: 0.65rem 1.1rem; font-size: 13px; }
}






.comparison-section { padding: 8rem 4rem; background: var(--white); }
.comparison-inner { max-width: 1100px; margin: 0 auto; }
.comparison-header { text-align: center; margin-bottom: 3.5rem; }

.comparison-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden;
}
.comparison-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
}
.comparison-row:not(:last-child) { border-bottom: 1px solid var(--gray-200); }

.comparison-cell {
  padding: 1.3rem 1.4rem;
  font-size: 14px; color: var(--gray-600);
  display: flex; align-items: center;
}
.comparison-cell--label {
  font-weight: 700; color: var(--navy); font-size: 13px;
  background: var(--gray-100);
}
.comparison-row--head .comparison-cell {
  font-weight: 700; color: var(--navy); font-size: 14px;
  background: var(--gray-100);
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.comparison-cell--featured {
  background: var(--gold-dim);
  color: var(--navy); font-weight: 600;
}

.comparison-row--head .comparison-cell--featured { background: var(--navy); color: var(--white); }

.comparison-badge {
  display: inline-block; margin-left: 0.5rem;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--navy); background: var(--gold);
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}

.comparison-note {
  text-align: center; margin-top: 2rem;
  font-size: 15px; font-style: italic; color: var(--gray-400);
}

/* ─── MOBILE: rows become labeled cards, nothing hidden ─── */
@media (max-width: 900px) {
  .comparison-section { padding: 5rem 1.5rem; }

  .comparison-row--head { display: none; }

  .comparison-row {
    display: block;
    padding: 1.2rem 1.2rem 0.4rem;
  }
  .comparison-cell {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0; background: none !important;
    font-size: 13.5px; border-bottom: 1px dashed var(--gray-200);
  }
  .comparison-cell--label {
    font-size: 15px; font-weight: 700; color: var(--navy);
    border-bottom: none; padding-top: 0; padding-bottom: 0.8rem;
  }
  .comparison-cell[data-label]::before {
    content: attr(data-label);
    font-weight: 700; color: var(--gray-400);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
    margin-right: 1rem; flex-shrink: 0;
  }
  .comparison-cell--featured {
    color: var(--navy); font-weight: 700;
    border-bottom: none;
  }
  .comparison-cell--featured::before { color: var(--gold); }

  .comparison-row--head .comparison-cell--featured { background: var(--white); color: var(--navy); }
}






























/* ═══════════════════════════════════════════════════════════════════════
   ABOUT PAGE STYLES
   Page 2 of 2 - styles specific to the about page, separated for clarity
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── NAV ACTIVE STATE ─── */
.nav-active {
  color: var(--gold) !important;
}
.nav-active::after {
  width: 100% !important;
  background: var(--gold) !important;
}

/* ─── ABOUT HERO ─── */
.about-hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.about-hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.about-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.ab-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.ab-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent);
  top: -200px; right: -150px;
}
.ab-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.about-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 120px 4rem 6rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.about-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.about-h1 em { font-style: normal; color: var(--gold); }
.about-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem; max-width: 520px;
}
.about-hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
}

/* About stat grid (hero right) */
.about-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.about-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px; padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  position: relative; overflow: hidden;
}
.about-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.about-stat-card:hover {
  background: rgba(201,168,76,0.07);
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
}
.about-stat-card:hover::before { opacity: 1; }
.about-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700;
  color: var(--gold); line-height: 1;
}
.about-stat-num span { font-size: 28px; }
.about-stat-label {
  font-size: 13px; color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

/* Scroll cue */
.about-scroll-cue {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.3); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  z-index: 3;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* ─── OUR STORY ─── */
.about-story {
  padding: 8rem 4rem;
  background: var(--white);
}
.about-story-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
}
.story-image-wrap {
  position: relative;
  width: 100%; aspect-ratio: 4/5;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 32px 64px rgba(13,27,62,0.15);
}
.story-img-placeholder {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=700&q=80') center/cover;
}
.story-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,27,62,0.7) 0%, transparent 50%);
}
.story-year-badge {
  position: absolute; bottom: 1.8rem; left: 1.8rem;
  background: rgba(13,27,62,0.9);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 1rem 1.5rem;
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 2px;
}
.story-year-num {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700; color: var(--gold);
}
.story-year-label { font-size: 12px; color: rgba(255,255,255,0.5); }
.story-body {
  font-size: 16px; line-height: 1.85;
  color: var(--gray-600); margin-bottom: 1.2rem;
}
.story-highlight-row {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: 2rem;
}
.story-highlight {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem;
  background: var(--gray-100);
  border-radius: 12px;
  border-left: 3px solid var(--gold);
  transition: transform 0.3s;
}
.story-highlight:hover { transform: translateX(6px); }
.story-highlight-icon { font-size: 22px; flex-shrink: 0; }
.story-highlight strong {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--text); margin-bottom: 2px;
}
.story-highlight span { font-size: 13px; color: var(--gray-600); }

/* ─── MISSION VISION VALUES ─── */
.mvv-section {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.mvv-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.mvv-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.mvv-header { margin-bottom: 3.5rem; }
.mvv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.mvv-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2.5rem;
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.mvv-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-6px);
  background: rgba(201,168,76,0.05);
}
.mvv-card--featured {
  background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.04));
  border-color: rgba(201,168,76,0.25);
}
.mvv-icon { font-size: 36px; margin-bottom: 1.2rem; }
.mvv-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--white); margin-bottom: 1rem;
}
.mvv-body { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.55); }
.mvv-values-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.mvv-values-list li {
  font-size: 14px; color: rgba(255,255,255,0.55);
  padding-left: 1rem; position: relative;
}
.mvv-values-list li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--gold); font-size: 12px;
}
.mvv-values-list span {
  color: var(--white); font-weight: 600;
}

/* ─── IMPACT NUMBERS ─── */
.impact-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.impact-inner { max-width: 1200px; margin: 0 auto; }
.impact-header { margin-bottom: 3.5rem; }
.impact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.impact-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 20px rgba(13,27,62,0.05);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative; overflow: hidden;
}
.impact-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.impact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.2);
}
.impact-card:hover::after { transform: scaleX(1); }
.impact-icon { font-size: 32px; margin-bottom: 1rem; }
.impact-num {
  font-family: 'Playfair Display', serif;
  font-size: 52px; font-weight: 700;
  color: var(--navy); line-height: 1;
  margin-bottom: 0.8rem;
}
.impact-num span { font-size: 32px; color: var(--gold); }
.impact-label {
  font-size: 15px; font-weight: 600;
  color: var(--text); margin-bottom: 4px;
}
.impact-sub { font-size: 12px; color: var(--gray-400); line-height: 1.5; }

/* ─── TIMELINE ─── */
.timeline-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.timeline-inner { max-width: 900px; margin: 0 auto; }
.timeline-header { margin-bottom: 4rem; }
.timeline {
  position: relative;
  padding: 0;
}
.timeline::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gray-200) 5%, var(--gray-200) 95%, transparent);
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
}
.timeline-item--left .timeline-card { grid-column: 1; text-align: right; }
.timeline-item--left .timeline-dot  { grid-column: 2; }
.timeline-item--left .timeline-card + * { display: none; }
.timeline-item--right .timeline-card { grid-column: 3; }
.timeline-item--right .timeline-dot  { grid-column: 2; }

/* For left items: card is col1, dot is col2, col3 empty */
.timeline-item--left  { grid-template-areas: "card dot empty"; }
.timeline-item--right { grid-template-areas: "empty dot card"; }
.timeline-item--left  .timeline-card { grid-area: card; }
.timeline-item--left  .timeline-dot  { grid-area: dot; }
.timeline-item--right .timeline-card { grid-area: card; }
.timeline-item--right .timeline-dot  { grid-area: dot; }

.timeline-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gray-200);
  position: relative; z-index: 1;
  transition: border-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
.timeline-dot--gold {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,168,76,0.15);
}
.timeline-item:hover .timeline-dot {
  border-color: var(--gold);
  transform: scale(1.3);
}
.timeline-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.8rem;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.timeline-card:hover {
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
  transform: translateY(-4px);
}
.timeline-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.25);
}
.timeline-card--featured .timeline-year,
.timeline-card--featured .timeline-title,
.timeline-card--featured .timeline-body { color: var(--white); }
.timeline-card--featured .timeline-body { color: rgba(255,255,255,0.6); }
.timeline-year {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem;
}
.timeline-title {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.timeline-body { font-size: 13px; line-height: 1.7; color: var(--gray-600); }

/* ─── TEAM ─── */
.team-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.team-inner { max-width: 1200px; margin: 0 auto; }
.team-header { margin-bottom: 3.5rem; }
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-bottom: 3rem;
}
.team-card {
  background: var(--white);
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 20px rgba(13,27,62,0.05);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
  display: flex; flex-direction: column;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.25);
}
.team-avatar {
  height: 140px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  color: var(--gold);
  position: relative; overflow: hidden;
}
.team-avatar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(255,255,255,0.08), transparent);
}
.team-info { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
.team-name {
  font-size: 18px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.team-role {
  font-size: 12px; font-weight: 600;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 1rem;
}
.team-bio {
  font-size: 13px; line-height: 1.75;
  color: var(--gray-600); flex: 1; margin-bottom: 1.2rem;
}
.team-skills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.team-skills span {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px; padding: 4px 12px;
  font-size: 11px; font-weight: 500; color: var(--gray-600);
}

/* Hiring banner */
.team-hiring {
  background: var(--navy);
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,0.2);
  padding: 2.5rem;
}
.team-hiring-inner {
  display: flex; align-items: center; gap: 2rem;
  flex-wrap: wrap;
}
.team-hiring-icon { font-size: 40px; flex-shrink: 0; }
.team-hiring-inner h3 {
  font-size: 20px; font-weight: 700;
  color: var(--white); margin-bottom: 4px;
}
.team-hiring-inner p { font-size: 14px; color: rgba(255,255,255,0.5); }
.team-hiring-inner .btn-gold { margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* ─── CULTURE ─── */
.culture-section {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.culture-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.culture-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
.culture-left .section-h2 { color: var(--white); }
.culture-right {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.culture-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.8rem;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.culture-card:hover {
  border-color: rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.05);
  transform: translateY(-4px);
}
.culture-card-icon { font-size: 28px; margin-bottom: 0.8rem; }
.culture-card h4 {
  font-size: 15px; font-weight: 700;
  color: var(--white); margin-bottom: 0.6rem;
}
.culture-card p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.5); }

/* ─── FAQ ─── */
.faq-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-header { margin-bottom: 3rem; }
.faq-grid { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.faq-item:first-of-type { border-top: 1px solid var(--gray-200); }
.faq-question {
  width: 100%; background: none; border: none;
  padding: 1.5rem 0;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  cursor: pointer; text-align: left;
  font-family: 'DM Sans', sans-serif;
}
.faq-question span {
  font-size: 16px; font-weight: 600;
  color: var(--text); line-height: 1.4;
  transition: color 0.3s;
}
.faq-question:hover span { color: var(--gold); }
.faq-icon {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300;
  color: var(--gray-400);
  transition: all 0.35s var(--transition);
  line-height: 1;
}
.faq-item.open .faq-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: rotate(45deg);
}
.faq-item.open .faq-question span { color: var(--navy); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--transition), padding 0.3s;
}
.faq-answer.open { max-height: 400px; }
.faq-answer p {
  padding-bottom: 1.5rem;
  font-size: 15px; line-height: 1.8;
  color: var(--gray-600);
}

/* ─── ABOUT PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    padding: 120px 2rem 5rem;
    gap: 3rem;
  }
  .about-story { padding: 5rem 2rem; }
  .about-story-inner { grid-template-columns: 1fr; gap: 3rem; }
  .story-image-wrap { aspect-ratio: 16/9; }

  .mvv-section { padding: 5rem 2rem; }
  .mvv-grid { grid-template-columns: 1fr; gap: 1rem; }

  .impact-section { padding: 5rem 2rem; }
  .impact-grid { grid-template-columns: 1fr 1fr; }

  .timeline-section { padding: 5rem 2rem; }
  .timeline::before { left: 16px; transform: none; }
  .timeline-item {
    grid-template-columns: auto 1fr;
    grid-template-areas: "dot card" !important;
  }
  .timeline-item--left .timeline-card,
  .timeline-item--right .timeline-card {
    grid-area: card; text-align: left;
  }
  .timeline-item--left .timeline-dot,
  .timeline-item--right .timeline-dot { grid-area: dot; }

  .team-section { padding: 5rem 2rem; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-hiring-inner { flex-direction: column; align-items: flex-start; }
  .team-hiring-inner .btn-gold { margin-left: 0; }

  .culture-section { padding: 5rem 2rem; }
  .culture-inner { grid-template-columns: 1fr; gap: 3rem; }

  .faq-section { padding: 5rem 2rem; }
}

@media (max-width: 640px) {
  .about-h1 { font-size: 40px; }
  .about-hero-actions { flex-direction: column; }
  .about-hero-actions .btn-gold,
  .about-hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .about-stat-grid { grid-template-columns: 1fr 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .culture-right { grid-template-columns: 1fr; }
  .faq-question span { font-size: 14px; }
}




/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   SERVICES PAGE STYLES
   Page 3 - styles specific to the services page, separated for clarity
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */


   

/* ─── SERVICES PAGE HERO ─── */
.svc-page-hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.svc-hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.svc-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.svc-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.svc-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent);
  top: -200px; right: -150px;
}
.svc-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.svc-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 120px 4rem 6rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.svc-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.svc-h1 em { font-style: normal; color: var(--gold); }
.svc-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem; max-width: 520px;
}
.svc-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Service preview grid */
.svc-service-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.svc-preview-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.4rem 1rem;
  text-align: center;
  transition: all 0.3s; cursor: default;
}
.svc-preview-card:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
}
.svc-preview-card--gold {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.3);
}
.svc-preview-icon { font-size: 24px; margin-bottom: 0.5rem; }
.svc-preview-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem; }
.svc-preview-result { font-size: 13px; font-weight: 700; color: var(--gold); }

/* ─── SERVICES SUBNAV ─── */
.svc-subnav {
  position: sticky; top: 80px; z-index: 900;
  background: rgba(13,27,62,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  overflow-x: auto;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge Legacy */
}

.svc-subnav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}


.svc-subnav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 4rem;
  display: flex; gap: 0;
}
.svc-subnav-item {
  padding: 1.1rem 1.5rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none; font-size: 13px;
  font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.svc-subnav-item:hover,
.svc-subnav-item.active-svc {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ─── SERVICE DETAIL SECTIONS ─── */
.svc-detail-section { padding: 7rem 4rem; background: var(--white); }
.svc-detail-section--alt { background: var(--off-white); }
.svc-detail-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}
.svc-detail-inner--reversed { direction: rtl; }
.svc-detail-inner--reversed > * { direction: ltr; }

.svc-detail-num {
  font-family: 'Playfair Display', serif;
  font-size: 80px; font-weight: 900;
  color: var(--gray-200); line-height: 1;
  margin-bottom: -1rem;
}
.svc-detail-body p {
  font-size: 16px; line-height: 1.85;
  color: var(--gray-600); margin-bottom: 1.2rem;
}

/* .svc-detail-content p {
    margin-bottom: 1rem;
    line-height: 1.8;
} */

.svc-detail-includes {
  margin: 2rem 0;
  background: var(--gray-100);
  border-radius: 14px; padding: 1.8rem;
  border: 1px solid var(--gray-200);
}
.svc-detail-includes h4 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text); margin-bottom: 1rem;
}
.svc-detail-includes ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.svc-detail-includes li {
  font-size: 14px; color: var(--gray-600);
  padding-left: 1.4rem; position: relative;
}
.svc-detail-includes li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--gold); font-weight: 700; font-size: 12px;
}
.svc-detail-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Result card */
.svc-result-card {
  background: var(--navy);
  border-radius: 20px; padding: 2rem;
  border: 1px solid rgba(201,168,76,0.2);
  margin-bottom: 1.2rem;
}
.svc-result-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem;
}
.svc-result-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: var(--white); margin-bottom: 1.5rem; line-height: 1.4;
}
.svc-result-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem; margin-bottom: 1.5rem;
}
.svc-metric {
  background: rgba(255,255,255,0.04);
  border-radius: 10px; padding: 1rem 0.8rem; text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.svc-metric-num {
  display: block; font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 4px;
}
.svc-metric-label { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.3; }
.svc-result-quote {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,0.6); font-style: italic;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(201,168,76,0.3);
}
.svc-result-author { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 0.5rem; }

/* Pricing card */
.svc-pricing-card {
  background: var(--white);
  border-radius: 16px; padding: 1.8rem;
  border: 2px solid var(--gold);
  text-align: center;
  box-shadow: 0 8px 32px rgba(201,168,76,0.1);
}
.svc-pricing-from { font-size: 12px; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.4rem; }
.svc-pricing-price {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem;
}
.svc-pricing-price span { font-size: 16px; color: var(--gray-400); }
.svc-pricing-note { font-size: 12px; color: var(--gray-400); }

/* ─── WEB SHOWCASE ─── */
.svc-web-showcase {
  background: var(--navy);
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(201,168,76,0.15);
  margin-bottom: 1.2rem;
  position: relative;
}
.svc-web-showcase-bar {
  background: rgba(0,0,0,0.3);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: rgba(255,255,255,0.3);
}
.svc-web-showcase-bar .mock-dot { width: 10px; height: 10px; }
.svc-web-showcase-screen {
  padding: 1.5rem;
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  min-height: 220px;
}
.svc-web-mock-nav {
  height: 12px; background: rgba(255,255,255,0.08);
  border-radius: 6px; margin-bottom: 1.2rem;
}
.svc-web-mock-hero { margin-bottom: 1.5rem; }
.svc-web-mock-h1 { height: 18px; background: rgba(201,168,76,0.4); border-radius: 4px; margin-bottom: 8px; width: 70%; }
.svc-web-mock-sub { height: 10px; background: rgba(255,255,255,0.15); border-radius: 4px; margin-bottom: 12px; width: 90%; }
.svc-web-mock-btn { height: 28px; width: 100px; background: linear-gradient(135deg,#F0C040,#C9A84C); border-radius: 6px; }
.svc-web-mock-cards { display: flex; gap: 8px; }
.svc-web-mock-card { flex: 1; height: 60px; background: rgba(255,255,255,0.06); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); }
.svc-web-score-badge {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 0.8rem 1rem;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(16px);
}
.svc-web-score-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--gold) 98%, rgba(255,255,255,0.1) 0);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.svc-web-score-label { font-size: 12px; font-weight: 600; color: var(--white); }
.svc-web-score-sub { font-size: 10px; color: rgba(255,255,255,0.4); }

/* ─── PHONE / APP SHOWCASE ─── */
.svc-app-showcase { position: relative; display: flex; justify-content: center; margin-bottom: 1.2rem; padding: 1rem 2rem; }
.svc-phone-frame {
  width: 180px;
  background: linear-gradient(135deg, #1a1a2e, #0D1B3E);
  border-radius: 32px;
  border: 2px solid rgba(201,168,76,0.2);
  padding: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  position: relative; z-index: 1;
}
.svc-phone-notch {
  width: 50px; height: 8px;
  background: rgba(201,168,76,0.3);
  border-radius: 4px; margin: 0 auto 8px;
}
.svc-phone-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  border-radius: 20px; padding: 12px;
  min-height: 260px;
}
.svc-phone-app-nav { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-bottom: 12px; }
.svc-phone-app-hero { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.svc-phone-app-icon { width: 32px; height: 32px; background: linear-gradient(135deg,#F0C040,#C9A84C); border-radius: 8px; flex-shrink: 0; }
.svc-phone-app-title { flex: 1; }
.svc-phone-app-title::before { content: ''; display: block; height: 7px; background: rgba(201,168,76,0.5); border-radius: 3px; margin-bottom: 4px; }
.svc-phone-app-title::after { content: ''; display: block; height: 5px; background: rgba(255,255,255,0.15); border-radius: 3px; width: 70%; }
.svc-phone-app-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.svc-phone-list-item { height: 28px; background: rgba(255,255,255,0.06); border-radius: 6px; border-left: 3px solid rgba(201,168,76,0.4); }
.svc-phone-app-btn { height: 28px; background: linear-gradient(135deg,#F0C040,#C9A84C); border-radius: 8px; }
.svc-app-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 0.8rem 1rem;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(16px);
  font-size: 20px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.svc-app-badge-1 { top: 1rem; right: 0; }
.svc-app-badge-2 { bottom: 1rem; left: 0; }
.svc-app-badge-val { font-size: 14px; font-weight: 700; color: var(--gold); }
.svc-app-badge-lbl { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── AI CHAT SHOWCASE ─── */
.svc-ai-showcase { position: relative; margin-bottom: 1.2rem; }
.svc-chat-window {
  background: var(--white);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(13,27,62,0.12);
  border: 1px solid var(--gray-200);
}
.svc-chat-header {
  background: var(--navy);
  padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 12px;
}
.svc-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.svc-chat-name { font-size: 14px; font-weight: 600; color: var(--white); }
.svc-chat-status { font-size: 11px; color: #28CA41; }
.svc-chat-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.svc-chat-msg {
  max-width: 80%; padding: 0.7rem 1rem;
  border-radius: 12px; font-size: 13px; line-height: 1.5;
}
.svc-chat-msg--bot {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--text); align-self: flex-start;
  border-radius: 4px 12px 12px 12px;
}
.svc-chat-msg--user {
  background: var(--navy);
  color: var(--white); align-self: flex-end;
  border-radius: 12px 4px 12px 12px;
}
.svc-chat-msg--typing {
  display: flex; align-items: center; gap: 4px; padding: 0.8rem 1rem;
}
.svc-chat-msg--typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-400);
  animation: typingDot 1.2s ease-in-out infinite;
}
.svc-chat-msg--typing span:nth-child(2) { animation-delay: 0.2s; }
.svc-chat-msg--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.svc-ai-stat {
  position: absolute;
  background: var(--navy);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 0.8rem 1.2rem;
  display: flex; flex-direction: column;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.svc-ai-stat-1 { top: -0.5rem; right: -0.5rem; }
.svc-ai-stat-2 { bottom: -0.5rem; left: -0.5rem; }
.svc-ai-stat-num { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--gold); }
.svc-ai-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.4); max-width: 120px; line-height: 1.3; }

/* ─── EMAIL SHOWCASE ─── */
.svc-email-showcase { margin-bottom: 1.2rem; }
.svc-email-client {
  background: var(--white);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: 0 8px 32px rgba(13,27,62,0.08);
  display: flex;
}
.svc-email-sidebar {
  width: 120px; background: var(--gray-100);
  border-right: 1px solid var(--gray-200);
  padding: 1rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  flex-shrink: 0;
}
.svc-email-folder {
  font-size: 12px; padding: 0.5rem 0.6rem;
  border-radius: 6px; color: var(--gray-600);
  cursor: pointer; transition: background 0.2s;
}
.svc-email-folder.active-folder { background: var(--navy); color: var(--white); }
.svc-email-main { flex: 1; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.svc-email-item {
  padding: 0.7rem 0.8rem; border-radius: 8px;
  border-bottom: 1px solid var(--gray-200);
  transition: background 0.2s;
}
.svc-email-item:hover { background: var(--gray-100); }
.svc-email-item--unread { background: rgba(201,168,76,0.05); }
.svc-email-from { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.svc-email-subject { font-size: 11px; color: var(--gray-400); }
.svc-email-badge {
  margin-top: 1rem;
  background: var(--navy);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 12px;
  font-size: 24px;
}
.svc-email-badge-addr { font-size: 14px; font-weight: 700; color: var(--gold); }
.svc-email-badge-note { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── COMPARE TABLE ─── */
.svc-compare-section {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.svc-compare-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.svc-compare-inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.svc-compare-header { margin-bottom: 3rem; }
.svc-compare-table { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.svc-compare-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.svc-compare-row:last-child { border-bottom: none; }
.svc-compare-row--header { background: rgba(201,168,76,0.1); }
.svc-compare-col {
  padding: 1.1rem 1.5rem;
  font-size: 14px; color: rgba(255,255,255,0.7);
  transition: background 0.2s;
}
.svc-compare-row:hover .svc-compare-col { background: rgba(255,255,255,0.02); }
.svc-compare-col--feature { color: rgba(255,255,255,0.85); font-weight: 500; }
.svc-compare-col--drivon { color: var(--gold); font-weight: 600; text-align: center; }
.svc-compare-col--others { color: rgba(255,255,255,0.4); text-align: center; }
.svc-compare-row--header .svc-compare-col {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
}
.svc-compare-row--header .svc-compare-col--drivon { color: var(--gold); }

/* ─── SECTION DIVIDER ─── */
.svc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
  margin: 0 4rem;
}

/* ─── SERVICES PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .svc-hero-inner { grid-template-columns: 1fr; padding: 120px 2rem 5rem; gap: 3rem; }
  .svc-service-preview-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-subnav-inner { padding: 0 1rem; }
  .svc-detail-section { padding: 5rem 2rem; }
  .svc-detail-inner { grid-template-columns: 1fr; gap: 3rem; }
  .svc-detail-inner--reversed { direction: ltr; }
  .svc-divider { margin: 0 2rem; }
  .svc-compare-section { padding: 5rem 2rem; }
  .svc-compare-col { padding: 0.9rem 1rem; font-size: 13px; }
  .svc-app-showcase { padding: 1rem 0; }
  .svc-ai-stat-1, .svc-ai-stat-2 { position: static; margin-top: 0.8rem; }
  .svc-ai-showcase { display: flex; flex-direction: column; gap: 0.8rem; }
}
@media (max-width: 640px) {
  .svc-h1 { font-size: 38px; }
  .svc-hero-actions { flex-direction: column; }
  .svc-hero-actions .btn-gold,
  .svc-hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .svc-service-preview-grid { grid-template-columns: 1fr 1fr; }
  .svc-result-metrics { grid-template-columns: 1fr 1fr 1fr; }
  .svc-compare-row { grid-template-columns: 1.5fr 1fr 1fr; }
  .svc-compare-col { padding: 0.8rem 0.6rem; font-size: 12px; }
  .svc-detail-actions { flex-direction: column; }
  .svc-detail-actions .btn-gold,
  .svc-detail-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
}


/* ─── COMING SOON SERVICE STYLES ─── */

/* Services page coming soon header strip */
/* .svc-coming-soon-header {
  background: rgba(13,27,62,0.97);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1.8rem 4rem;
} */

.svc-coming-soon-header {
  background: rgba(13,27,62,0.97);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1.8rem 4rem;
  overflow: hidden; /* prevents inner content bleeding out */
  width: 100%;
  box-sizing: border-box;
}
.svc-coming-soon-header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  width: 100%;
}

.svc-coming-soon-header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.svc-coming-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap; flex-shrink: 0;
}
.svc-coming-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); opacity: 0.6;
  animation: pulse 2s ease-in-out infinite;
}
.svc-coming-soon-header-inner p {
  font-size: 13px; color: rgba(255,255,255,0.35);
  line-height: 1.6; max-width: 560px;
}

/* Coming soon section overlay tint */
.svc-detail-section--coming {
  position: relative;
}
.svc-detail-section--coming::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.008) 10px,
    rgba(255,255,255,0.008) 11px
  );
  pointer-events: none;
}

/* Number + badge row */
.svc-detail-num-coming {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 0.5rem;
}
.svc-coming-inline-badge {
  display: inline-block;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 4px 14px;
  font-size: 11px; font-weight: 700;
  color: var(--gold); letter-spacing: 1px;
  text-transform: uppercase;
}

/* Coming soon enquire card (replaces pricing card) */
.svc-coming-enquire-card {
  background: rgba(255,255,255,0.03);
  /* border: 1px dashed rgba(201,168,76,0.2); */
  border: 2px solid var(--gold);
  border-radius: 16px; padding: 1.8rem;
  text-align: center;
}
.svc-coming-enquire-badge {
  display: inline-block;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 4px 14px;
  font-size: 11px; font-weight: 700;
  color: var(--gold); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 1rem;
}
.svc-coming-enquire-card p {
  font-size: 13px; 
  /* color: rgba(255,255,255,0.45); */
  color: var(--gray-600);
  line-height: 1.7; margin-bottom: 0;
}

/* Homepage coming soon strip */

.svc-coming-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.5rem 2.5rem;
  background: rgba(13,27,62,0.03);
  border-top: 1px solid var(--gray-200);
}

.svc-coming-strip-lg {
  display: none;
}

@media (min-width: 1270px) {
  .svc-coming-strip {
    grid-column: 2 / -1;
  }

  .svc-coming-strip-lg {
    display: flex;
  }

  .svc-coming-strip-sm {
    display: none;
  }
}

.svc-coming-strip-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
}
.svc-coming-strip-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-400); letter-spacing: 2px;
  text-transform: uppercase; white-space: nowrap;
}

/* Homepage coming soon cards */
.svc-card--coming {
  background: var(--gray-100) !important;
  opacity: 0.75;
  cursor: default;
  position: relative;
}
.svc-card--coming:hover {
  background: var(--navy) !important;
  opacity: 1;
}
.svc-coming-pill {
  display: inline-block;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  color: var(--gold); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 0.8rem;
}

/* Navbar coming soon styles */
.nav-dd-coming-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 1rem 0.2rem;
}
.nav-dd-coming-divider span {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.60);
  letter-spacing: 1.5px; text-transform: uppercase;
  white-space: nowrap;
}
.nav-dd-coming-divider::before,
.nav-dd-coming-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: rgba(255,255,255,0.16);
}
.nav-dropdown-item--coming { opacity: 0.8; }
.nav-dropdown-item--coming:hover { opacity: 1; }
.nav-dd-soon {
  display: inline-block;
  background: rgba(201,168,76,0.15);
  border-radius: 4px; padding: 1px 6px;
  font-size: 10px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase; margin-left: 6px;
  vertical-align: middle;
}

@media (max-width: 1024px) {
  .svc-coming-soon-header { padding: 1.5rem 2rem; }
  .svc-coming-soon-header-inner { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}



.svc-subnav-item--coming {
  opacity: 0.85;
  display: flex; align-items: center; gap: 6px;
}
.svc-subnav-item--coming:hover,
.svc-subnav-item--coming.active-svc {
  opacity: 1;
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.svc-subnav-soon {
  display: inline-block;
  background: rgba(201,168,76,0.15);
  border-radius: 4px; padding: 1px 5px;
  font-size: 9px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.4;
}



/* ═══════════════════════════════════════════════════════════
   COMING SOON PREVIEW CARDS — Hero Section
   Styled differently from active services to show they're not available yet
   ═══════════════════════════════════════════════════════════ */

.svc-preview-card--coming {
  opacity: 0.6;
  border-color: rgba(201, 168, 76, 0.2);
  background: rgba(13, 27, 62, 0.5);
  position: relative;
  pointer-events: none; /* Optional: disable hover effects */
}

.svc-preview-card--coming:hover {
  /* Don't highlight on hover since it's not available */
  background: rgba(13, 27, 62, 0.5);
  transform: none;
}

.svc-preview-card--coming .svc-preview-icon {
  opacity: 0.5;
}

.svc-preview-result-coming {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.coming-badge {
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold);
  padding: 4px 10px;
  /* border-radius: 4px; */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* border: 1px solid rgba(201, 168, 76, 0.3); */
}

/* Optional: Add a subtle "lock" indicator if you prefer */
.svc-preview-card--coming::before {
  content: '🔒';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  opacity: 0.4;
}





















/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   CONTACT PAGE STYLES
   Page 4 - styles specific to the contact page, separated for clarity
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── CONTACT HERO ─── */
.contact-hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.contact-hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.contact-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.ct-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.ct-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent);
  top: -200px; right: -150px;
}
.ct-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.contact-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 120px 4rem 6rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.contact-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.contact-h1 em { font-style: normal; color: var(--gold); }
.contact-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem; max-width: 520px;
}

/* Trust row */
.contact-trust-row {
  display: flex; align-items: center; gap: 1.5rem;
  margin-bottom: 2.5rem; flex-wrap: wrap;
}
.contact-trust-item { text-align: center; }
.contact-trust-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: var(--gold);
}
.contact-trust-label { font-size: 11px; color: rgba(255,255,255,0.4); }
.contact-trust-divider {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.1);
}
.contact-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Direct contact cards */
.contact-hero-right {
  display: flex; flex-direction: column; gap: 1rem;
}
.ct-direct-card {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.2rem 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s;
  position: relative; overflow: hidden;
}
.ct-direct-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.05), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.ct-direct-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateX(6px);
}
.ct-direct-card:hover::before { opacity: 1; }
.ct-direct-card--wa { border-color: rgba(37,211,102,0.2); }
.ct-direct-card--wa:hover { border-color: rgba(37,211,102,0.5); }
.ct-direct-card--wa .ct-direct-icon { color: #25D366; background: rgba(37,211,102,0.1); }
.ct-direct-card--call .ct-direct-icon { color: var(--gold); }
.ct-direct-card--location { cursor: default; }
.ct-direct-card--location:hover { transform: none; }

.ct-direct-icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 12px;
  background: rgba(201,168,76,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ct-direct-body { flex: 1; }
.ct-direct-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,0.4); margin-bottom: 3px;
}
.ct-direct-val {
  font-size: 15px; font-weight: 600; color: var(--white);
  margin-bottom: 2px;
}
.ct-direct-note { font-size: 11px; color: rgba(255,255,255,0.35); }
.ct-direct-arrow {
  font-size: 18px; color: rgba(255,255,255,0.2);
  transition: color 0.3s, transform 0.3s;
}
.ct-direct-card:hover .ct-direct-arrow {
  color: var(--gold); transform: translateX(4px);
}

/* ─── BOOK A CALL ─── */
.book-call-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.book-call-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}
.book-call-steps {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-top: 2.5rem;
}
.book-step {
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.book-step-num {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700; color: var(--navy);
  box-shadow: 0 4px 12px rgba(201,168,76,0.25);
}
.book-step-body h4 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.book-step-body p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }

/* Booking card */
.book-call-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(13,27,62,0.08);
  border: 1px solid var(--gray-200);
  position: relative; overflow: hidden;
}
.book-call-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.book-call-card-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.book-call-card-icon { font-size: 32px; }
.book-call-card-title {
  font-size: 18px; font-weight: 700; color: var(--text);
}
.book-call-card-sub { font-size: 13px; color: var(--gray-400); margin-top: 2px; }

/* ─── SOCIAL ROW ─── */
.ct-social-row {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin-top: 2rem;
}
.ct-social-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  color: var(--text);
  transition: all 0.3s;
}
.ct-social-btn:hover {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy);
}
.ct-social-btn span { font-weight: 700; }

/* ─── TRUST STRIP ─── */
.ct-trust-strip {
  padding: 4rem;
  background: var(--navy);
  border-top: 1px solid rgba(201,168,76,0.1);
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.ct-trust-strip-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.ct-trust-strip-item {
  display: flex; gap: 1rem; align-items: flex-start;
}
.ct-trust-strip-icon {
  font-size: 28px; flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}
.ct-trust-strip-text strong {
  display: block; font-size: 15px;
  color: var(--white); margin-bottom: 4px;
}
.ct-trust-strip-text span {
  font-size: 13px; color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* ─── CONTACT PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .contact-hero-inner {
    grid-template-columns: 1fr;
    padding: 120px 2rem 5rem; gap: 3rem;
  }
  .book-call-section { padding: 5rem 2rem; }
  .book-call-inner { grid-template-columns: 1fr; gap: 3rem; }
  .ct-trust-strip { padding: 3rem 2rem; }
  .ct-trust-strip-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .contact-h1 { font-size: 38px; }
  .contact-hero-actions { flex-direction: column; }
  .contact-hero-actions .btn-gold,
  .contact-hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .contact-trust-row { gap: 1rem; }
  .contact-trust-divider { display: none; }
  .ct-trust-strip-inner { grid-template-columns: 1fr; }
  .ct-social-row { gap: 0.6rem; }
}


/* ═══════════════════════════════════════
   CUSTOM CALENDAR
   ═══════════════════════════════════════ */
.custom-calendar-wrap {
  position: relative;
}
.custom-calendar-wrap input {
  cursor: pointer;
  padding-right: 2.8rem;
}
.calendar-input-icon {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  line-height: 1;
}
/* Push error below the calendar trigger input */
.custom-calendar-wrap .field-error {
  position: static;
  display: none;
  margin-top: 5px;
}
.custom-calendar-wrap .field-error.show { display: block; }

/* Calendar panel */
.custom-calendar {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  background: var(--navy);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.25);
  z-index: 500;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--transition), transform 0.25s var(--transition);
}
.custom-calendar.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Header */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-month-year {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700;
  color: var(--white); letter-spacing: 0.3px;
}
.cal-nav {
  width: 32px; height: 32px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 18px; line-height: 1;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all 0.2s;
}
.cal-nav:hover {
  background: var(--gold-dim);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}
.cal-nav:disabled {
  opacity: 0.3; cursor: not-allowed;
}

/* Weekday labels */
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0.6rem 0.8rem 0.3rem;
}
.cal-weekdays span {
  text-align: center;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 0;
}
.cal-weekdays .cal-sunday { color: rgba(255,100,100,0.5); }

/* Days grid */
.cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 0.8rem 0.8rem;
  gap: 2px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  position: relative;
  border: 1px solid transparent;
}
.cal-day:hover:not(.cal-day--disabled):not(.cal-day--sunday):not(.cal-day--empty) {
  background: var(--gold-dim);
  border-color: rgba(201,168,76,0.25);
  color: var(--gold);
  transform: scale(1.1);
}
.cal-day--today {
  border-color: rgba(201,168,76,0.4);
  color: var(--gold);
  font-weight: 700;
}
.cal-day--today::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.cal-day--selected {
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  color: var(--navy) !important;
  font-weight: 700;
  border-color: transparent !important;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(201,168,76,0.3);
}
.cal-day--disabled {
  color: rgba(255,255,255,0.15);
  cursor: not-allowed;
  pointer-events: none;
}
.cal-day--sunday {
  color: rgba(255,100,100,0.4);
  cursor: pointer; /* still clickable to show warning */
}
.cal-day--sunday:hover {
  background: rgba(255,50,50,0.08);
  border-color: rgba(255,50,50,0.2);
  color: rgba(255,120,120,0.8);
  transform: none;
}
.cal-day--empty { pointer-events: none; }

/* Saturday indicator */
.cal-day--saturday {
  color: rgba(201,168,76,0.7);
}

/* Sunday message */
.cal-sunday-msg {
  display: none;
  padding: 0.7rem 1.2rem;
  background: rgba(255,50,50,0.08);
  border-top: 1px solid rgba(255,50,50,0.15);
  font-size: 12px;
  color: rgba(255,140,140,0.9);
  text-align: center;
  font-weight: 500;
}
.cal-sunday-msg.show { display: block; }
















/* ════════════════════════════════════════════════════════════════════════════════════════════════════
   PORTFOLIO PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */
 
/* ─── HERO ─── */
.pg-hero {
  background: var(--navy);
  position: relative; overflow: hidden;
  padding: 160px 4rem 0;
}
.pg-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.pg-hero-inner {
  max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1;
  padding-bottom: 4rem;
}
.pg-hero-content { max-width: 700px; margin-bottom: 3rem; }
.pg-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.pg-h1 em { font-style: normal; color: var(--gold); }
.pg-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.55); max-width: 600px;
}
 
/* Stats row */
.pg-stats-row {
  display: flex; align-items: center;
  gap: 2rem; flex-wrap: wrap;
  padding: 2rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pg-stat-item { text-align: center; }
.pg-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.pg-stat-lbl {
  display: block; font-size: 12px;
  color: rgba(255,255,255,0.4); margin-top: 4px;
}
.pg-stat-sep {
  width: 1px; height: 40px;
  background: rgba(255,255,255,0.1);
}
 
/* Confidentiality bar */
.pg-conf-bar {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1rem 4rem;
}
.pg-conf-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 1rem;
}
.pg-conf-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.pg-conf-inner p {
  font-size: 12px; line-height: 1.6;
  color: rgba(255,255,255,0.35);
}
.pg-conf-inner strong { color: rgba(255,255,255,0.55); }
 
/* ─── FILTER BAR ─── */
.pg-filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 4rem;
  position: sticky; top: 80px; z-index: 800;
}
.pg-filter-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 0; overflow-x: auto;
  scrollbar-width: none;
}
.pg-filter-inner::-webkit-scrollbar { display: none; }
.pg-filter-btn {
  padding: 1.1rem 1.5rem;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--gray-400); cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s;

  
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pg-filter-btn:hover { color: var(--navy); }
.pg-filter-btn--active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 700;
}

.pg-filter-btn:focus-visible {
  color: var(--gold);
  border-bottom-color: rgba(201,168,76,0.4);
}
 
/* ─── SERVICE TAGS ─── */
.pg-tag {
  display: inline-block;
  border-radius: 100px; padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border: 1px solid transparent;
}
.pg-tag--seo   { background: rgba(201,168,76,0.15); color: var(--gold); border-color: rgba(201,168,76,0.2); }
.pg-tag--sem   { background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.2); }
.pg-tag--web   { background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(16,185,129,0.2); }
.pg-tag--uiux  { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.2); }
.pg-tag--email { background: rgba(249,115,22,0.15); color: #fb923c; border-color: rgba(249,115,22,0.2); }
.pg-tag--branding    { background: rgba(251,113,133,0.15); color: #fb7185; border-color: rgba(251,113,133,0.2); }
.pg-tag--maintenance { background: rgba(148,163,184,0.15); color: #94a3b8; border-color: rgba(148,163,184,0.2); }
.pg-tag--apps        { background: rgba(45,212,191,0.15);  color: #2dd4bf; border-color: rgba(45,212,191,0.2); }
.pg-tag--ai          { background: rgba(129,140,248,0.15); color: #818cf8; border-color: rgba(129,140,248,0.2); }
 
/* ─── MAGAZINE GRID ─── */
.pg-grid-section {
  background: var(--gray-100);
  padding: 3rem 4rem 4rem;
}
.pg-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.2rem;
}
 
/* Right column stack */
.pg-right-stack {
  display: flex; flex-direction: column; gap: 1.2rem;
}
 
/* ─── CARD BASE ─── */
.pg-card {
  position: relative; border-radius: 20px;
  overflow: hidden; cursor: pointer;
  background: var(--navy);
}
 
/* Card sizing */
.pg-card--hero { min-height: 520px; }
/* .pg-card--stack { min-height: 246px; } */
.pg-card--stack { min-height: 310px; }
.pg-card--wide-left { min-height: 320px; }
.pg-card--cta { min-height: 320px; }
 
/* Bottom row spans full width differently */
.pg-grid > .pg-card--wide-left { grid-column: 1; }
.pg-grid > .pg-card--cta { grid-column: 2; }
 
/* ─── CARD BG ─── */
.pg-card-bg {
  position: absolute; inset: 0;
  background: var(--navy-light);
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.pg-card:hover .pg-card-bg { transform: scale(1.03); }
 
/* Gradient overlays per client */
.pg-card-bg--iclear {
  background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #152347 100%);
}
.pg-card-bg--hotel {
  background: linear-gradient(135deg, #1a1008 0%, #2d1a0a 50%, #3d2510 100%);
}
.pg-card-bg--pharma {
  background: linear-gradient(135deg, #081628 0%, #0a1f3a 50%, #0f2d4d 100%);
}
.pg-card-bg--drivon {
  background: linear-gradient(135deg, #0D1B3E 0%, #152347 50%, #1e3060 100%);
  background-image:
    linear-gradient(135deg, #0D1B3E 0%, #152347 50%, #1e3060 100%),
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}
 
/* ─── BROWSER MOCK ─── */
.pg-browser-mock {
  position: absolute;
  top: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: rgba(255,255,255,0.04);
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pg-browser-mock--sm {
  top: 1rem; left: 1rem; right: 1rem;
}
.pg-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25);
}
.pg-browser-url {
  margin-left: 6px; flex: 1;
  font-size: 10px; color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border-radius: 3px; padding: 2px 8px;
}
 
/* iClear screen */
.pg-browser-screen--iclear {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 1rem;
  min-height: 200px;
}
.pg-bs-nav {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; margin-bottom: 1rem;
}
.pg-bs-nav--light {
  background: rgba(255,255,255,0.15);
}
.pg-bs-hero { margin-bottom: 1rem; }
.pg-bs-eyebrow {
  height: 6px; width: 60%; background: rgba(201,168,76,0.3);
  border-radius: 3px; margin-bottom: 8px;
}
.pg-bs-h1 {
  height: 12px; background: rgba(255,255,255,0.6);
  border-radius: 4px; margin-bottom: 6px;
}
.pg-bs-h1--short { width: 70%; }
.pg-bs-btns { display: flex; gap: 6px; }
.pg-bs-btn-gold {
  height: 18px; width: 70px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 4px;
}
.pg-bs-btn-out {
  height: 18px; width: 60px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
}
.pg-bs-products {
  display: flex; gap: 6px;
}
.pg-bs-product {
  flex: 1; height: 50px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}
 
/* Hotel screen */
.pg-browser-screen--hotel {
  min-height: 130px;
  position: relative; overflow: hidden;
}
.pg-hotel-img {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #3d2510, #5c3818);
  opacity: 0.8;
}
.pg-hotel-gradient {
  position: relative; z-index: 1;
  padding: 1.5rem 1rem 0.5rem;
}
.pg-hotel-title-line {
  height: 10px; background: rgba(255,255,255,0.8);
  border-radius: 4px; margin-bottom: 5px; width: 70%;
}
.pg-hotel-sub-line {
  height: 7px; background: rgba(255,255,255,0.4);
  border-radius: 3px; width: 50%;
}
.pg-hotel-booking {
  position: relative; z-index: 1;
  display: flex; gap: 4px; padding: 0.5rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
}
.pg-hotel-field {
  flex: 1; height: 20px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}
.pg-hotel-book-btn {
  width: 40px; height: 20px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 4px;
}
 
/* Pharma screen */
.pg-browser-screen--pharma {
  background: linear-gradient(135deg, #081628, #0f2d4d);
  padding: 0.8rem;
  min-height: 130px;
}
.pg-pharma-content { padding: 0.5rem 0; }
.pg-pharma-badge-line {
  height: 6px; width: 50%;
  background: rgba(59,130,246,0.4);
  border-radius: 3px; margin-bottom: 7px;
}
.pg-pharma-h1 {
  height: 10px; background: rgba(255,255,255,0.6);
  border-radius: 4px; margin-bottom: 5px;
}
.pg-pharma-sub {
  height: 7px; width: 80%;
  background: rgba(255,255,255,0.25);
  border-radius: 3px; margin-bottom: 10px;
}
.pg-pharma-btn {
  height: 16px; width: 70px;
  background: rgba(59,130,246,0.5);
  border-radius: 4px;
}
 
/* Drivon mock */
.pg-drivon-mock {
  position: absolute; inset: 1.5rem;
}
.pg-drivon-topbar {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.pg-drivon-logo-hex {
  /* width: 24px; height: 24px; */
  color: #F0C040;
  font-size: 30px;
  /* background: linear-gradient(135deg, #F0C040, #C9A84C);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); */
}
.pg-drivon-topbar-links {
  display: flex; align-items: center; gap: 8px;
}
.pg-drivon-topbar-links > div {
  width: 24px; height: 5px;
  background: rgba(255,255,255,0.2); border-radius: 3px;
}
.pg-drivon-topbar-cta {
  width: 40px !important; height: 16px !important;
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  border-radius: 4px;
}
.pg-drivon-pill {
  height: 8px; width: 45%;
  background: rgba(201,168,76,0.25);
  border-radius: 4px; margin-bottom: 10px;
}
.pg-drivon-title {
  height: 16px; background: rgba(255,255,255,0.5);
  border-radius: 4px; margin-bottom: 7px;
}
.pg-drivon-title--short { width: 65%; }
.pg-drivon-sub {
  height: 8px; width: 85%;
  background: rgba(255,255,255,0.2);
  border-radius: 3px; margin-bottom: 16px;
}
.pg-drivon-btns { display: flex; gap: 8px; }
.pg-drivon-btn-g {
  height: 20px; width: 80px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 5px;
}
.pg-drivon-btn-o {
  height: 20px; width: 70px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
}
 
/* ─── RESULT BADGE ─── */
.pg-result-badge {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: rgba(13,27,62,0.9);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px; padding: 0.6rem 1rem;
  text-align: center; backdrop-filter: blur(16px);
  z-index: 5;
}
.pg-result-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.pg-result-lbl {
  display: block; font-size: 10px;
  color: rgba(255,255,255,0.5); margin-top: 2px;
  white-space: nowrap;
}
 
/* ─── CARD FOOTER (default state) ─── */
.pg-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end;
  justify-content: space-between;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 4;
  transition: opacity 0.35s;
}
.pg-card:hover .pg-card-footer { opacity: 0; pointer-events: none; }
.pg-card-footer-left { display: flex; flex-direction: column; gap: 0.6rem; }
.pg-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.pg-card-client {
  display: flex; align-items: center; gap: 10px;
}
.pg-client-icon { font-size: 20px; }
.pg-client-name {
  font-size: 16px; font-weight: 700; color: var(--white);
}
.pg-client-industry { font-size: 11px; color: rgba(255,255,255,0.5); }
.pg-card-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--white);
  text-decoration: none; flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.pg-card-arrow:hover {
  background: var(--gold);
  border-color: var(--gold); color: var(--navy);
  transform: rotate(-45deg);
}
 
/* ─── CARD OVERLAY (hover state) ─── */
.pg-card-overlay {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(13,27,62,0.92);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--transition);
}
.pg-card:hover .pg-card-overlay {
  opacity: 1; pointer-events: all;
}
.pg-card-overlay-inner {
  padding: 2rem;
  transform: translateY(12px);
  transition: transform 0.35s var(--transition);
  width: 100%;
}
.pg-card:hover .pg-card-overlay-inner { transform: translateY(0); }
.pg-overlay-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: var(--white); margin: 0.8rem 0 1.2rem;
  line-height: 1.3;
}
.pg-card--stack .pg-overlay-title { font-size: 15px; margin-bottom: 0.8rem; }
.pg-overlay-metrics {
  display: flex; gap: 1rem; margin-bottom: 1.5rem;
}
.pg-overlay-metric { text-align: center; }
.pg-overlay-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--gold);
}
.pg-card--stack .pg-overlay-num { font-size: 17px; }
.pg-overlay-lbl {
  font-size: 11px; color: rgba(255,255,255,0.4);
}
.pg-overlay-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pg-overlay-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.3);
}
 
/* ─── CTA CARD ─── */
.pg-card--cta {
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.pg-cta-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}
.pg-card--cta::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(201,168,76,0.3), transparent 60%);
  z-index: 0;
}
.pg-cta-inner {
  position: relative; z-index: 1;
  text-align: center; padding: 2.5rem 2rem;
}
.pg-cta-icon {
  font-size: 36px; color: var(--gold);
  margin-bottom: 1.2rem; display: block;
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pg-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.pg-cta-title em { font-style: normal; color: var(--gold); }
.pg-cta-body {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,0.5); margin-bottom: 1.8rem;
}
.pg-cta-btn { display: inline-block; }
.pg-cta-note {
  margin-top: 1rem; font-size: 11px;
  color: rgba(255,255,255,0.3);
}
 
/* Filter hidden state */
.pg-card--hidden {
  display: none;
}
 
/* ─── INDUSTRIES ─── */
.pg-industries {
  padding: 8rem 4rem;
  background: var(--white);
}
.pg-industries-inner { max-width: 1200px; margin: 0 auto; }
.pg-ind-header { margin-bottom: 3.5rem; }
.pg-ind-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.pg-ind-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s;
}
.pg-ind-card:hover {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-4px);
}
.pg-ind-icon { font-size: 32px; margin-bottom: 0.8rem; }
.pg-ind-name {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
  transition: color 0.3s;
}
.pg-ind-card:hover .pg-ind-name { color: var(--white); }
.pg-ind-tags {
  font-size: 12px; color: var(--gray-400);
  transition: color 0.3s;
}
.pg-ind-card:hover .pg-ind-tags { color: rgba(255,255,255,0.4); }
 
/* ─── PORTFOLIO RESPONSIVE ─── */
@media (max-width: 1024px) {
  .pg-hero { padding: 120px 2rem 0; }
  .pg-conf-bar { padding: 1rem 2rem; }
  .pg-filter-bar { padding: 0 1rem; }
  .pg-grid-section { padding: 2rem 2rem 3rem; }
  .pg-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .pg-right-stack { flex-direction: row; gap: 1.2rem; width: 100%; }
  /* .pg-card--stack { min-height: 280px; flex: 1;} */
  .pg-card--stack { min-height: 315px; flex: 1;}
  .pg-grid > .pg-card--wide-left { grid-column: 1; }
  .pg-grid > .pg-card--cta { grid-column: 1; }
  .pg-industries { padding: 5rem 2rem; }
  .pg-ind-grid { grid-template-columns: 1fr 1fr; }
  .pg-stats-row { gap: 1.5rem; }
}
@media (max-width: 640px) {
  .pg-h1 { font-size: 40px; }
  /* .pg-card--hero { min-height: 400px; } */
  .pg-card--hero { min-height: 410px; }
  .pg-right-stack { flex-direction: column; }
  /* .pg-card--stack { min-height: 240px; } */
  .pg-card--stack { min-height: 325px; }
  /* .pg-card--wide-left { min-height: 280px; } */
  .pg-card--wide-left { min-height: 340px; }
  .pg-card--cta { min-height: 280px; }
  .pg-stat-sep { display: none; }
  .pg-stats-row { gap: 1.5rem; justify-content: space-between; }
  .pg-ind-grid { grid-template-columns: 1fr; }
  .pg-overlay-title { font-size: 15px; }
}




/* ─── PORTFOLIO RESULT LINE ─── */
/* .pg-card-result-line {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.3px;
  margin-top: 6px;
  opacity: 0.9;
} */

/* Hide result line when overlay is showing */
/* .pg-card:hover .pg-card-result-line {
  opacity: 0;
  transition: opacity 0.2s;
} */

.pg-client-result {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.4;
}

/* ─── TESTIMONIAL STRIP ─── */
.pg-testimonial-strip {
  background: var(--navy);
  padding: 5rem 4rem;
  border-top: 1px solid rgba(201,168,76,0.1);
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.pg-testimonial-strip-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 3rem; align-items: start;
}
.pg-testimonial-divider {
  width: 1px;
  background: rgba(255,255,255,0.08);
  align-self: stretch;
}
.pg-testimonial-item {
  display: flex; flex-direction: column; gap: 1rem;
}
.pg-testimonial-quote {
  font-family: 'Playfair Display', serif;
  font-size: 48px; line-height: 0.8;
  color: var(--gold); opacity: 0.25;
  user-select: none;
}
.pg-testimonial-body {
  font-size: 14px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  font-style: italic;
}
.pg-testimonial-author {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pg-testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-light), var(--navy-mid));
  border: 1px solid rgba(201,168,76,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
.pg-testimonial-name {
  font-size: 13px; font-weight: 700; color: var(--white);
}
.pg-testimonial-role {
  font-size: 11px; color: rgba(255,255,255,0.35);
}
.pg-testimonial-result {
  margin-left: auto;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 4px 12px;
  font-size: 11px; font-weight: 700;
  color: var(--gold); white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .pg-testimonial-strip { padding: 4rem 2rem; }
  .pg-testimonial-strip-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pg-testimonial-divider {
    width: 100%; height: 1px;
    align-self: auto;
  }
  .pg-testimonial-result { margin-left: 0; }
}
@media (max-width: 640px) {
  .pg-testimonial-strip { padding: 3rem 1.5rem; }
}
 


/* ─── PORTFOLIO HERO TWO-COLUMN ─── */
.pg-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.pg-hero-left {
  display: flex; flex-direction: column; gap: 0;
}

/* Preview grid */
.pg-hero-right {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
}
.pg-hero-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}
.pg-hero-preview-card {
  position: relative;
  border-radius: 16px; overflow: hidden;
  min-height: 140px;
  cursor: pointer;
  transition: transform 0.4s var(--transition), box-shadow 0.4s;
  border: 1px solid rgba(255,255,255,0.08);

  
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pg-hero-preview-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
  border-color: rgba(201,168,76,0.3);
}

/* Independent float animations per card */
/* .pg-hero-preview-card--1 {
  animation: heroFloat1 5s ease-in-out infinite;
}
.pg-hero-preview-card--2 {
  animation: heroFloat2 5.5s ease-in-out infinite 0.5s;
}
.pg-hero-preview-card--3 {
  animation: heroFloat3 4.8s ease-in-out infinite 1s;
}
.pg-hero-preview-card--4 {
  animation: heroFloat4 5.2s ease-in-out infinite 0.3s;
} */

.pg-hero-preview-card--1 {
  animation: heroFloat1 5s ease-in-out infinite 0s;
}
.pg-hero-preview-card--2 {
  animation: heroFloat2 5s ease-in-out infinite 0.6s;
}
.pg-hero-preview-card--3 {
  animation: heroFloat3 5s ease-in-out infinite 1.2s;
}
.pg-hero-preview-card--4 {
  animation: heroFloat4 5s ease-in-out infinite 1.8s;
}

.pg-hero-preview-label {
  opacity: 0;
}


@keyframes heroFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes heroFloat2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes heroFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes heroFloat4 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Pause float on hover */
.pg-hero-preview-card:hover {
  animation-play-state: paused;
}

/* Backgrounds */
.pg-hero-preview-bg {
  position: absolute; inset: 0;
  transition: transform 0.4s;
}
.pg-hero-preview-card:hover .pg-hero-preview-bg {
  transform: scale(1.05);
}
.pg-hero-preview-bg--iclear {
  background: linear-gradient(135deg, #0a1628, #152347);
}
.pg-hero-preview-bg--hotel {
  background: linear-gradient(135deg, #1a1008, #3d2510);
}
.pg-hero-preview-bg--pharma {
  background: linear-gradient(135deg, #081628, #0f2d4d);
}
.pg-hero-preview-bg--drivon {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  background-image:
    linear-gradient(135deg, #0D1B3E, #1e3060),
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: auto, 20px 20px, 20px 20px;
}

/* Card content */
.pg-hero-preview-content {
  position: relative; z-index: 1;
  padding: 1.2rem;
  display: flex; flex-direction: column; gap: 4px;
  height: 100%;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);

  /* Add these */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.pg-hero-preview-icon { font-size: 20px; margin-bottom: 4px; color: var(--gold); }
.pg-hero-preview-name {
  font-size: 13px; font-weight: 700; color: var(--white);
}
.pg-hero-preview-result {
  font-size: 11px; font-weight: 600; color: var(--gold);
}

/* Label below grid */
.pg-hero-preview-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.5px;
}
.pg-hero-preview-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0.6;
  animation: pulse 2s ease-in-out infinite;
}

/* Responsive — collapse to single column on tablet/mobile */
@media (max-width: 1024px) {
  .pg-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .pg-hero-right { display: none; }
}






















/* ═══════════════════════════════════════
   CASE STUDY PAGE STYLES
   ═══════════════════════════════════════ */
 
/* ─── HERO ─── */
.cs-hero {
  background: var(--navy);
  position: relative; overflow: hidden;
  padding-top: 80px;
}
.cs-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
 
/* Breadcrumb */
/* .cs-breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.35);
  margin-bottom: 2.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  padding: 6px 14px;
}

.cs-breadcrumb a {
  color: rgba(255,255,255,0.35); text-decoration: none;
  transition: color 0.2s;
}
.cs-breadcrumb a:hover { color: var(--gold); }
.cs-breadcrumb span { color: rgba(255,255,255,0.2); } */
 
.cs-hero-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 4rem 4rem 0;
  position: relative; z-index: 2;
}
.cs-hero-content {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  padding-bottom: 4rem;
}
 
/* Client row */
.cs-client-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.2rem;
}
.cs-client-icon { font-size: 32px; }
.cs-client-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: var(--white);
}
.cs-client-meta {
  font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px;
}
.cs-client-link {
  color: var(--gold); text-decoration: none;
  transition: opacity 0.2s;
}
.cs-client-link:hover { opacity: 0.7; }
.cs-service-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
 
/* H1 */
.cs-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900; color: var(--white);
  line-height: 1.15; margin-bottom: 1.2rem;
}
.cs-h1 em { font-style: normal; color: var(--gold); }
.cs-hero-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem; max-width: 520px;
}
 
/* Hero stats */
.cs-hero-stats {
  display: flex; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2rem;
}
.cs-hero-stat { text-align: center; }
.cs-hero-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.cs-hero-stat-num span { font-size: 16px; }
.cs-hero-stat-lbl {
  display: block; font-size: 11px;
  color: rgba(255,255,255,0.4); margin-top: 4px;
}
.cs-hero-stat-sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.1); flex-shrink: 0;
}
.cs-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.cs-btn-outline {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
 
/* Hero right visual */
.cs-hero-right { position: relative; }
.cs-hero-visual { position: relative; padding: 2rem 3rem 2rem 1rem; }
 
/* Browser mock */
.cs-browser {
  background: rgba(255,255,255,0.04);
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.cs-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: rgba(0,0,0,0.25);
}
.cs-browser-url {
  flex: 1; font-size: 11px;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border-radius: 4px; padding: 3px 10px;
  margin-left: 6px;
}
.cs-browser-open {
  color: var(--gold); text-decoration: none;
  font-size: 12px; font-weight: 600;
  transition: opacity 0.2s;
}
.cs-browser-open:hover { opacity: 0.7; }
.cs-browser-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 1.5rem; min-height: 220px;
}
.cs-mock-nav {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; margin-bottom: 1.2rem;
}
.cs-mock-hero-block { margin-bottom: 1.2rem; }
.cs-mock-eyebrow {
  height: 6px; width: 55%;
  background: rgba(201,168,76,0.35);
  border-radius: 3px; margin-bottom: 8px;
}
.cs-mock-h1 {
  height: 12px; background: rgba(255,255,255,0.55);
  border-radius: 4px; margin-bottom: 6px;
}
.cs-mock-h1--short { width: 70%; }
.cs-mock-btns { display: flex; gap: 8px; margin-top: 10px; }
.cs-mock-btn-gold {
  height: 20px; width: 75px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 5px;
}
.cs-mock-btn-out {
  height: 20px; width: 65px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
}
.cs-mock-products {
  display: flex; gap: 8px;
}
.cs-mock-product {
  flex: 1; height: 60px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
}
 
/* Floating badges */
.cs-float-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.cs-float-badge--1 {
  top: 0.5rem; right: 0;
  animation: floatBadge1 4s ease-in-out infinite;
}
.cs-float-badge--2 {
  bottom: 0.5rem; left: -1rem;
  animation: floatBadge2 4s ease-in-out infinite 0.5s;
}
.cs-float-badge-icon { font-size: 20px; }
.cs-float-badge-val {
  font-size: 14px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.cs-float-badge-lbl { font-size: 11px; color: rgba(255,255,255,0.4); }
 
/* Confidentiality bar */
.cs-conf-bar {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0.9rem 4rem;
}
.cs-conf-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 0.8rem;
  font-size: 12px; color: rgba(255,255,255,0.3);
  line-height: 1.6;
}
.cs-conf-inner strong { color: rgba(255,255,255,0.5); }
 
/* ─── SECTIONS ─── */
.cs-section { padding: 7rem 4rem; }
.cs-section--light { background: var(--white); }
.cs-section--dark {
  background: var(--navy);
  position: relative; overflow: hidden;
}
.cs-section--dark::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cs-section-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
  position: relative; z-index: 1;
}
.cs-section-inner--centered {
  grid-template-columns: 1fr;
}
.cs-section-num {
  font-family: 'Playfair Display', serif;
  font-size: 80px; font-weight: 900;
  color: var(--gray-200); line-height: 1;
  margin-bottom: -1.5rem; display: flex;
}
.cs-section-num--light { color: rgba(255,255,255,0.08); }
.cs-body p{
  font-size: 16px; line-height: 1.85;
  color: var(--gray-600); margin-bottom: 1.2rem;
}
.cs-body--light p { color: rgba(255,255,255,0.6); }
 
/* Challenge cards */
.cs-challenge-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.cs-challenge-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.5rem;
  transition: all 0.3s;
}
.cs-challenge-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.cs-challenge-icon { font-size: 24px; margin-bottom: 0.8rem; }
.cs-challenge-card h4 {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 0.5rem;
}
.cs-challenge-card p { font-size: 13px; line-height: 1.7; color: var(--gray-600); }
 
/* Process timeline */
.cs-process-timeline {
  display: flex; flex-direction: column;
  gap: 0; position: relative;
}
.cs-process-timeline::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 11px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), rgba(201,168,76,0.1));
}
.cs-process-item {
  display: flex; gap: 1.5rem; align-items: flex-start;
  padding-bottom: 2.5rem; position: relative;
}
.cs-process-item:last-child { padding-bottom: 0; }
.cs-process-dot {
  width: 24px; height: 24px; min-width: 24px;
  border-radius: 50%;
  background: var(--navy-light);
  border: 2px solid rgba(201,168,76,0.3);
  position: relative; z-index: 1;
  transition: border-color 0.3s;
}
.cs-process-dot--gold {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,168,76,0.15);
}
.cs-process-item:hover .cs-process-dot {
  border-color: var(--gold);
}
.cs-process-content { flex: 1; }
.cs-process-phase {
  font-size: 11px; font-weight: 700;
  color: var(--gold); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 6px;
}
.cs-process-title {
  font-size: 16px; font-weight: 700;
  color: var(--white); margin-bottom: 0.8rem;
}
.cs-process-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.cs-process-list li {
  font-size: 13px; color: rgba(255,255,255,0.5);
  padding-left: 1.2rem; position: relative; line-height: 1.5;
}
.cs-process-list li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--gold); font-size: 11px; font-weight: 700;
}
.cs-process-item--featured .cs-process-content {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 12px; padding: 1.2rem;
}
 
/* Results grid */
.cs-results-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin-bottom: 3rem;
}
.cs-result-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.cs-result-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.cs-result-card:hover {
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.08);
}
.cs-result-card:hover::after { transform: scaleX(1); }
.cs-result-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.25);
}
.cs-result-card--featured .cs-result-num { color: var(--gold); }
.cs-result-card--featured .cs-result-label { color: var(--white); }
.cs-result-card--featured .cs-result-sub { color: rgba(255,255,255,0.4); }
.cs-result-icon { font-size: 28px; margin-bottom: 1rem; }
.cs-result-num {
  font-family: 'Playfair Display', serif;
  font-size: 40px; font-weight: 700;
  color: var(--navy); line-height: 1; margin-bottom: 0.5rem;
}
.cs-result-num span { font-size: 22px; color: var(--gold); }
.cs-result-label {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.cs-result-sub { font-size: 12px; color: var(--gray-400); line-height: 1.4; }
 
/* Chart */
.cs-chart-section {
  background: var(--navy);
  border-radius: 20px; padding: 2.5rem;
  border: 1px solid rgba(201,168,76,0.15);
}
.cs-chart-header {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; margin-bottom: 2rem;
}
.cs-chart-title {
  font-size: 15px; font-weight: 700; color: var(--white);
}
.cs-chart-note {
  font-size: 11px; color: rgba(255,255,255,0.3);
}
.cs-chart {
  display: flex; gap: 1rem; align-items: flex-end;
  height: 160px; position: relative;
}
.cs-chart-bars {
  display: flex; align-items: flex-end;
  gap: 6px; flex: 1; height: 100%;
}
.cs-chart-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(201,168,76,0.15);
  height: var(--h);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  justify-content: center;
  transition: background 0.3s;
}
.cs-chart-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(201,168,76,0.5), rgba(201,168,76,0.15));
  height: 100%;
  animation: barGrow 1.5s var(--transition) forwards;
  transform-origin: bottom; transform: scaleY(0);
}
.cs-chart-bar--gold::after {
  background: linear-gradient(to top, var(--gold), rgba(240,192,64,0.5));
}
.cs-bar-label {
  font-size: 9px; color: rgba(255,255,255,0.3);
  position: absolute; bottom: -18px;
  white-space: nowrap;
}
.cs-chart-y-labels {
  display: flex; flex-direction: column;
  justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,0.2);
  padding-bottom: 4px;
}
.cs-chart-caption {
  font-size: 12px; color: rgba(255,255,255,0.3);
  margin-top: 2rem; text-align: center;
}
 
/* ─── QUOTE SECTION ─── */
.cs-quote-section {
  background: var(--off-white);
  padding: 7rem 4rem;
}
.cs-quote-inner {
  max-width: 900px; margin: 0 auto;
  text-align: center;
}
.cs-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 80px; line-height: 0.8;
  color: var(--gold); opacity: 0.25;
  margin-bottom: 1.5rem; user-select: none;
}
.cs-quote-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700; color: var(--text);
  line-height: 1.5; font-style: normal;
  margin-bottom: 2.5rem;
}
.cs-quote-author {
  display: flex; align-items: center;
  justify-content: center; gap: 1.2rem;
  flex-wrap: wrap;
}
.cs-quote-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border: 2px solid rgba(201,168,76,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
.cs-quote-name {
  font-size: 15px; font-weight: 700; color: var(--text); text-align: left;
}
.cs-quote-role { font-size: 13px; color: var(--gray-400); text-align: left; }
.cs-quote-link {
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 600;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 100px; padding: 6px 14px;
  transition: all 0.3s; margin-left: auto;
}
.cs-quote-link:hover {
  background: var(--gold-dim);
  border-color: rgba(201,168,76,0.5);
}
 
/* ─── SERVICES DELIVERED ─── */
.cs-services-section {
  padding: 7rem 4rem;
  background: var(--white);
}
.cs-services-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 6rem; align-items: start;
}
.cs-services-grid {
  display: flex; flex-direction: column; gap: 1.2rem;
}
.cs-service-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  transition: all 0.3s;
}
.cs-service-item:hover {
  border-color: rgba(201,168,76,0.25);
  background: var(--gold-dim);
  transform: translateX(6px);
}
.cs-service-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.cs-service-name {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 3px;
}
.cs-service-desc { font-size: 13px; color: var(--gray-600); line-height: 1.5; }
 
/* ─── RELATED PROJECTS ─── */
.cs-related-section {
  padding: 7rem 4rem;
  background: var(--off-white);
}
.cs-related-inner { max-width: 1200px; margin: 0 auto; }
.cs-related-header { margin-bottom: 3rem; }
.cs-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.cs-related-card {
  position: relative; border-radius: 20px;
  overflow: hidden; min-height: 200px;
  text-decoration: none; display: block;
  transition: transform 0.35s, box-shadow 0.35s;
}
.cs-related-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.15);
}
.cs-related-bg {
  position: absolute; inset: 0;
  transition: transform 0.5s;
}
.cs-related-card:hover .cs-related-bg { transform: scale(1.05); }
.cs-related-bg--hotel {
  background: linear-gradient(135deg, #1a1008, #3d2510);
}
.cs-related-bg--pharma {
  background: linear-gradient(135deg, #081628, #0f2d4d);
}
.cs-related-bg--drivon {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  background-image:
    linear-gradient(135deg, #0D1B3E, #1e3060),
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: auto, 20px 20px, 20px 20px;
}
.cs-related-content {
  position: relative; z-index: 1;
  padding: 1.5rem;
  display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
}
.cs-related-tags { display: flex; gap: 5px; margin-bottom: 0.8rem; }
.cs-related-client {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0.5rem;
}
.cs-related-client span { font-size: 18px; }
.cs-related-name {
  font-size: 14px; font-weight: 700; color: var(--white);
}
.cs-related-industry { font-size: 11px; color: rgba(255,255,255,0.4); }
.cs-related-result {
  font-size: 12px; font-weight: 600; color: var(--gold);
}
 
/* ─── CASE STUDY RESPONSIVE ─── */
@media (max-width: 1024px) {
  .cs-hero-inner { padding: 2rem 2rem 0; }
  .cs-hero-content { grid-template-columns: 1fr; gap: 3rem; }
  .cs-hero-right { display: none; }
  .cs-conf-bar { padding: 0.9rem 2rem; }
  .cs-section { padding: 5rem 2rem; }
  .cs-section-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cs-challenge-cards { grid-template-columns: 1fr 1fr; }
  .cs-results-grid { grid-template-columns: 1fr 1fr; }
  .cs-services-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cs-related-grid { grid-template-columns: 1fr 1fr; }
  .cs-quote-section { padding: 5rem 2rem; }
  .cs-services-section { padding: 5rem 2rem; }
  .cs-related-section { padding: 5rem 2rem; }
  .cs-hero-stats { gap: 1rem; }
}
@media (max-width: 640px) {
  .cs-h1 { font-size: 30px; }
  .cs-hero-stats { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cs-hero-stat-sep { display: none; }
  .cs-challenge-cards { grid-template-columns: 1fr; }
  .cs-results-grid { grid-template-columns: 1fr; }
  .cs-related-grid { grid-template-columns: 1fr; }
  .cs-quote-text { font-size: 18px; }
  .cs-quote-link { margin-left: 0; }
  .cs-hero-actions { flex-direction: column; }
  .cs-hero-actions .btn-gold,
  .cs-hero-actions .cs-btn-outline { width: 100%; text-align: center; justify-content: center; }
}
 



























/* ════════════════════════════════════════════════════════════════════════════════════════════════════
   SERVICE INDIVIDUAL PAGE STYLES (shared)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ─── */
.sp-hero {
  background: var(--navy);
  position: relative; overflow: hidden;
  padding-top: 80px; min-height: 100vh;
  display: flex; align-items: center;
}
.sp-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.sp-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.sp-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.sp-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.1), transparent);
  top: -200px; right: -100px;
}
.sp-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.sp-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 4rem 4rem 5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.sp-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 900; color: var(--white);
  line-height: 1.15; margin-bottom: 1.2rem;
}
.sp-h1 em { font-style: normal; color: var(--gold); }
.sp-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.8rem; max-width: 520px;
}

/* Trust row */
.sp-trust-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 2rem;
}
.sp-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,0.7);
}
.sp-trust-icon { font-size: 14px; flex-shrink: 0; }

/* Hero actions */
.sp-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.sp-btn-outline {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.sp-btn-outline:hover {
  color: var(--gold) !important;
  border-color: rgba(201,168,76,0.5) !important;
}

/* Social proof */
.sp-social-proof {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; flex-wrap: wrap;
}
.sp-proof-avatars { display: flex; }
.sp-proof-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-light), var(--navy-mid));
  border: 2px solid rgba(201,168,76,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
  margin-right: -8px;
}
.sp-proof-text {
  font-size: 13px; color: rgba(255,255,255,0.6); flex: 1;
}
.sp-proof-text strong { color: var(--white); }
.sp-proof-stars { font-size: 13px; color: var(--gold); font-weight: 600; }

/* ─── SERP VISUAL ─── */
.sp-hero-right { position: relative; }
.sp-serp-card {
  background: var(--white);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}
.sp-serp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 1rem 1.2rem;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.sp-serp-logo {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #34a853);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: white;
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
.sp-serp-search {
  flex: 1; background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 100px; padding: 6px 16px;
}
.sp-serp-query { font-size: 13px; color: var(--text); }
.sp-serp-results { padding: 0.8rem; display: flex; flex-direction: column; gap: 4px; }
.sp-serp-result { padding: 0.8rem; border-radius: 8px; }
.sp-serp-result--top {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
}
.sp-serp-result--dim { opacity: 0.4; filter: blur(1px); }
.sp-serp-pos {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.sp-serp-rank {
  font-size: 11px; font-weight: 800;
  color: var(--gold); background: rgba(201,168,76,0.1);
  border-radius: 4px; padding: 2px 6px;
}
.sp-serp-badge {
  font-size: 10px; font-weight: 700;
  color: #28CA41; background: rgba(40,202,65,0.1);
  border-radius: 4px; padding: 2px 6px;
}
.sp-serp-url { font-size: 11px; color: #1a7340; margin-bottom: 2px; }
.sp-serp-title { font-size: 14px; font-weight: 600; color: #1a0dab; margin-bottom: 3px; }
.sp-serp-desc { font-size: 12px; color: var(--gray-600); line-height: 1.4; margin-bottom: 4px; }
.sp-serp-stars-row { font-size: 11px; color: var(--gold); }
.sp-serp-stars-row span { color: var(--gray-600); }
.sp-serp-title-blur { height: 12px; background: var(--gray-200); border-radius: 4px; margin-bottom: 5px; }
.sp-serp-desc-blur { height: 8px; background: var(--gray-100); border-radius: 3px; width: 80%; }

/* Floating badges */
.sp-float-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  white-space: nowrap; z-index: 5;
}
.sp-float-badge--1 {
  top: -3rem; right: -1rem;
  animation: floatBadge1 4s ease-in-out infinite;
}
.sp-float-badge--2 {
  bottom: -3rem; left: -1rem;
  animation: floatBadge2 4s ease-in-out infinite 0.5s;
}

.br-hero .sp-float-badge--2 {bottom: -3rem;}

.sp-float-icon { font-size: 20px; }
.sp-float-val {
  font-size: 14px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.sp-float-lbl { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── PROBLEM SECTION ─── */
.sp-problem {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sp-problem-inner { max-width: 1200px; margin: 0 auto; }
.sp-problem-header { margin-bottom: 3.5rem; }
.sp-problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin-bottom: 3rem;
}
.sp-problem-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.8rem;
  transition: all 0.3s;
  border-left: 3px solid transparent;
}
.sp-problem-card:hover {
  border-left-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.sp-problem-icon { font-size: 24px; margin-bottom: 0.8rem; }
.sp-problem-card h3 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.sp-problem-card p { font-size: 13px; line-height: 1.7; color: var(--gray-600); }
.sp-problem-cta {
  text-align: center;
  padding: 2rem;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  display: flex; align-items: center;
  justify-content: center; gap: 2rem; flex-wrap: wrap;
}
.sp-problem-cta p {
  font-size: 17px; font-weight: 600; color: var(--text);
}

/* ─── INCLUDES SECTION ─── */
.sp-includes {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.sp-includes::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.sp-includes-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.sp-includes-header { margin-bottom: 3.5rem; }
.sp-includes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-include-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2rem;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.sp-include-card:hover {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-6px);
}
.sp-include-num {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 900;
  color: rgba(255,255,255,0.05);
  position: absolute; top: 1rem; right: 1.5rem;
  line-height: 1;
}
.sp-include-icon { font-size: 28px; margin-bottom: 1rem; }
.sp-include-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--white); margin-bottom: 0.8rem;
}
.sp-include-card p {
  font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,0.5); margin-bottom: 1.2rem;
}
.sp-include-card ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.sp-include-card li {
  font-size: 12px; color: rgba(255,255,255,0.4);
  padding-left: 1rem; position: relative;
}
.sp-include-card li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--gold); font-size: 10px; font-weight: 700;
}

/* ─── PROOF SECTION ─── */
.sp-proof-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.sp-proof-inner { max-width: 1200px; margin: 0 auto; }
.sp-proof-header { margin-bottom: 3.5rem; }
.sp-case-preview {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}
.sp-case-client-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.sp-case-icon { font-size: 32px; }
.sp-case-client { font-size: 16px; font-weight: 700; color: var(--text); }
.sp-case-industry { font-size: 12px; color: var(--gray-400); }
.sp-case-link {
  margin-left: auto;
  color: var(--gold); text-decoration: none;
  font-size: 12px; font-weight: 600;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 100px; padding: 5px 12px;
  transition: all 0.3s;
}
.sp-case-link:hover { background: var(--gold-dim); }
.sp-case-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--text); line-height: 1.3;
  margin-bottom: 1.2rem;
}
.sp-case-title em { font-style: normal; color: var(--gold); }
.sp-case-body {
  font-size: 15px; line-height: 1.8;
  color: var(--gray-600); margin-bottom: 1rem;
}
.sp-case-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem; margin: 2rem 0 1rem;
}
.sp-case-metric {
  text-align: center;
  background: var(--gray-100);
  border-radius: 10px; padding: 1rem 0.5rem;
  border: 1px solid var(--gray-200);
}
.sp-case-metric-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--navy);
}
.sp-case-metric-lbl {
  display: block; font-size: 11px;
  color: var(--gray-400); margin-top: 3px; line-height: 1.3;
}
.sp-case-conf-note {
  font-size: 12px; color: var(--gray-400);
  padding: 8px 12px;
  background: var(--gray-100);
  border-radius: 8px; display: inline-block;
}

/* Growth chart */
.sp-growth-chart {
  background: var(--navy);
  border-radius: 16px; padding: 1.5rem;
  border: 1px solid rgba(201,168,76,0.15);
  margin-bottom: 1.5rem;
}
.sp-growth-chart-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 1.5rem;
  font-size: 13px; font-weight: 600; color: var(--white);
}
.sp-growth-chart-note { font-size: 11px; color: rgba(255,255,255,0.3); font-weight: 400; }
.sp-growth-bars {
  display: flex; align-items: flex-end;
  gap: 8px; height: 120px;
}
.sp-growth-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(201,168,76,0.15);
  height: var(--h); position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.sp-growth-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(201,168,76,0.5), rgba(201,168,76,0.15));
  height: 100%;
  animation: barGrow 1.5s var(--transition) forwards;
  transform-origin: bottom; transform: scaleY(0);
}
.sp-growth-bar--gold::after {
  background: linear-gradient(to top, var(--gold), rgba(240,192,64,0.4));
}
.sp-growth-bar span {
  font-size: 9px; color: rgba(255,255,255,0.3);
  position: absolute; bottom: -16px; white-space: nowrap;
}

/* Case quote */
.sp-case-quote {
  background: var(--off-white);
  border-radius: 16px; padding: 1.8rem;
  border-left: 3px solid var(--gold);
  position: relative;
}
.sp-case-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 40px; line-height: 0.8;
  color: var(--gold); opacity: 0.3; margin-bottom: 0.5rem;
}
.sp-case-quote p {
  font-size: 14px; line-height: 1.7;
  color: var(--gray-600); font-style: italic; margin-bottom: 0.8rem;
}
.sp-case-quote-author { font-size: 12px; font-weight: 600; color: var(--gray-400); }

/* ─── PROCESS ─── */
.sp-process {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sp-process-inner { max-width: 1200px; margin: 0 auto; }
.sp-process-header { margin-bottom: 4rem; }
.sp-process-steps {
  display: flex; align-items: flex-start;
  gap: 0; position: relative;
}
.sp-process-step {
  flex: 1; text-align: center;
  padding: 0 1rem;
}
.sp-process-step-num {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--navy);
  margin: 0 auto 1.2rem;
  box-shadow: 0 8px 24px rgba(201,168,76,0.25);
  position: relative; z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}
.sp-process-step:hover .sp-process-step-num {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(201,168,76,0.35);
}
.sp-process-step-body h3 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 0.5rem;
}
.sp-process-step-body p {
  font-size: 13px; line-height: 1.6; color: var(--gray-600);
}
.sp-process-time {
  display: inline-block; margin-top: 0.8rem;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; color: var(--gold);
}
.sp-process-connector {
  width: 40px; height: 2px; flex-shrink: 0;
  background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0.2));
  margin-top: 32px; opacity: 0.4;
}

/* ─── PRICING ─── */
.sp-pricing {
  padding: 8rem 4rem;
  background: var(--white);
}
.sp-pricing-inner { max-width: 1200px; margin: 0 auto; }
.sp-pricing-header { margin-bottom: 3.5rem; }
.sp-pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-bottom: 2rem;
  align-items: start;
}
.sp-price-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2.5rem 2rem;
  position: relative; transition: all 0.3s;
}
.sp-price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.08);
}
.sp-price-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.2);
}
.sp-price-card--featured:hover { transform: translateY(-14px); }
.sp-price-popular {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); font-size: 11px; font-weight: 700;
  padding: 4px 16px; border-radius: 100px;
  letter-spacing: 0.5px; white-space: nowrap;
}
.sp-price-plan {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.sp-price-card--featured .sp-price-plan { color: var(--white); }
.sp-price-for {
  font-size: 12px; color: var(--gray-400);
  margin-bottom: 1.5rem;
}
.sp-price-card--featured .sp-price-for { color: rgba(255,255,255,0.4); }
.sp-price-card-header { margin-bottom: 1.5rem; }
.sp-price-amount {
  display: flex; align-items: baseline;
  gap: 4px; margin-bottom: 4px; flex-wrap: wrap;
}
.sp-price-from {
  font-size: 12px; color: var(--gray-400);
}
.sp-price-card--featured .sp-price-from { color: rgba(255,255,255,0.4); }
.sp-price-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: var(--navy);
}
.sp-price-card--featured .sp-price-num { color: var(--gold); }
.sp-price-period { font-size: 13px; color: var(--gray-400); }
.sp-price-card--featured .sp-price-period { color: rgba(255,255,255,0.4); }
.sp-price-commitment {
  font-size: 11px; color: var(--gray-400);
  margin-bottom: 1.5rem;
}
.sp-price-card--featured .sp-price-commitment { color: rgba(255,255,255,0.3); }
.sp-price-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 2rem;
}
.sp-price-features li {
  font-size: 13px; color: var(--gray-600);
  padding-left: 0;
}
.sp-price-card--featured .sp-price-features li { color: rgba(255,255,255,0.65); }
.sp-price-feature--no { opacity: 0.4; }
.sp-price-cta {
  display: block; text-align: center;
  padding: 14px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  text-decoration: none; transition: all 0.3s;
}
.sp-price-cta--gold {
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy);
}
.sp-price-cta--gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.3); }
.sp-price-cta--outline {
  background: transparent;
  color: var(--gold); border: 1.5px solid var(--gold-light);
}
.sp-price-card--featured .sp-price-cta--outline {
  color: var(--white); border-color: rgba(255,255,255,0.2);
}
.sp-price-cta--outline:hover { border-color: var(--gold); color: var(--gold); }

/* Pricing note */
.sp-pricing-note {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.5rem 2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 14px; flex-wrap: wrap;
}
.sp-pricing-note p { font-size: 14px; color: var(--gray-600); flex: 1; }
.sp-pricing-note strong { color: var(--text); }
.sp-pricing-note-link {
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 700;
  white-space: nowrap; transition: opacity 0.2s;
}
.sp-pricing-note-link:hover { opacity: 0.7; }

/* ─── WHY SECTION ─── */
.sp-why {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sp-why-inner { max-width: 1200px; margin: 0 auto; }
.sp-why-header { margin-bottom: 3.5rem; }
.sp-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-why-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s;
}
.sp-why-item:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.sp-why-icon { font-size: 28px; margin-bottom: 1rem; }
.sp-why-item h4 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.sp-why-item p { font-size: 13px; line-height: 1.7; color: var(--gray-600); }

/* ─── AUDIT CTA SECTION ─── */
.sp-audit-cta {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.sp-audit-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.sp-audit-cta-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
.sp-audit-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.sp-audit-h2 em { font-style: normal; color: var(--gold); }
.sp-audit-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.55); margin-bottom: 2rem;
}
.sp-audit-includes {
  display: flex; flex-direction: column; gap: 8px;
}
.sp-audit-include {
  font-size: 14px; color: rgba(255,255,255,0.7);
  display: flex; align-items: center; gap: 8px;
}

/* Audit form card */
.sp-audit-form-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.sp-audit-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.sp-audit-form-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.sp-audit-form-card p {
  font-size: 13px; color: var(--gray-400); margin-bottom: 1.5rem;
}

/* ─── RELATED SERVICES ─── */
.sp-related-services {
  padding: 8rem 4rem;
  background: var(--white);
}
.sp-related-services-inner { max-width: 1200px; margin: 0 auto; }
.sp-related-services-header { margin-bottom: 3rem; }
.sp-related-services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-related-svc-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  text-decoration: none;
  display: block; transition: all 0.3s;
}
.sp-related-svc-card:hover {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.15);
}
.sp-related-svc-icon { font-size: 28px; margin-bottom: 1rem; }
.sp-related-svc-card h3 {
  font-size: 17px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
  transition: color 0.3s;
}
.sp-related-svc-card:hover h3 { color: var(--white); }
.sp-related-svc-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); margin-bottom: 1.2rem;
  transition: color 0.3s;
}
.sp-related-svc-card:hover p { color: rgba(255,255,255,0.5); }
.sp-related-svc-link {
  font-size: 13px; font-weight: 600;
  color: var(--gold);
}

/* ─── SERVICE PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .sp-hero-inner { grid-template-columns: 1fr; padding: 3rem 2rem 4rem; gap: 3rem; }
  .sp-hero-right { display: none; }
  .sp-problem { padding: 5rem 2rem; }
  .sp-problem-grid { grid-template-columns: 1fr 1fr; }
  .sp-includes { padding: 5rem 2rem; }
  .sp-includes-grid { grid-template-columns: 1fr 1fr; }
  .sp-proof-section { padding: 5rem 2rem; }
  .sp-case-preview { grid-template-columns: 1fr; gap: 3rem; }
  .sp-process { padding: 5rem 2rem; }
  .sp-process-steps { flex-direction: column; align-items: center; }
  .sp-process-connector { width: 2px; height: 30px; background: linear-gradient(to bottom, var(--gold), rgba(201,168,76,0.2)); margin: 0; }
  .sp-pricing { padding: 5rem 2rem; }
  /* .sp-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } */
  .sp-price-card--featured { transform: none; }
  .sp-why { padding: 5rem 2rem; }
  .sp-why-grid { grid-template-columns: 1fr 1fr; }
  .sp-audit-cta { padding: 5rem 2rem; }
  .sp-audit-cta-inner { grid-template-columns: 1fr; gap: 3rem; }
  .sp-related-services { padding: 5rem 2rem; }
  .sp-related-services-grid { grid-template-columns: 1fr; }
  .sp-case-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sp-h1 { font-size: 30px; }
  .sp-problem-grid { grid-template-columns: 1fr; }
  .sp-includes-grid { grid-template-columns: 1fr; }
  .sp-why-grid { grid-template-columns: 1fr; }
  .sp-hero-actions { flex-direction: column; }
  .sp-hero-actions .btn-gold,
  .sp-hero-actions .sp-btn-outline { width: 100%; text-align: center; justify-content: center; }
  .sp-case-metrics { grid-template-columns: 1fr 1fr; }
}


/* ═══════════════════════════════════════
   DRIVON SYSTEMS — styles.css
   ═══════════════════════════════════════ */

:root {
  --navy: #0D1B3E;
  --navy-mid: #152347;
  --navy-light: #1e3060;
  --gold: #C9A84C;
  --gold-light: #F0C040;
  --gold-dim: rgba(201,168,76,0.12);
  --white: #FFFFFF;
  --off-white: #F5F2EC;
  --gray-100: #F8F9FB;
  --gray-200: #EEF0F4;
  --gray-400: #9AA3B2;
  --gray-600: #5B6B7F;
  --text: #0D1B3E;
  --radius: 14px;
  --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
}

/* ─── CUSTOM CURSOR ─── */
.cursor {
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; 
  /* z-index: 9999; */
  z-index: 999999;
  
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s, height 0.3s;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 40px; height: 40px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; 
  /* z-index: 9998; */
  z-index: 999998;
  
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--transition);
  opacity: 0.6;
}
@media (max-width: 1024px) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}

/* ─── NAVBAR ─── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  padding: 0 4rem;
  height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  transition: background 0.4s, backdrop-filter 0.4s;
}
nav.scrolled {
  background: rgba(13,27,62,0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
/* .nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; opacity: 0; z-index: 10;
}
.nav-logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
} */
/* .nav-logo-icon::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: var(--navy);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
} */
/* .nav-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--white); letter-spacing: 1px;
}
.nav-logo-text span { color: var(--gold); } */


.nav-logo{
  display:flex;
  align-items:center;
  gap: 1.25rem;
  text-decoration:none;
  transition: opacity 0.25s;
}

.nav-logo:hover { opacity: 0.85; }

.nav-logo-icon{
  width:50px;
  height:50px;
  flex-shrink:0;
  object-fit: contain;
}

.nav-logo-wordmark{
  height: 26px;
  width:auto;
  object-fit: contain;
}

@media (max-width:768px){

  .nav-logo-wordmark{
    display:none;
  }

  .nav-logo-icon{
    width:40px;
    height:40px;
  }
}


/* Desktop nav links */
.nav-links {
  display: flex; align-items: center; gap: 2.5rem;
  list-style: none; opacity: 0;
}
.nav-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none; font-size: 14px;
  font-weight: 500; letter-spacing: 0.3px;
  transition: color 0.3s; position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width 0.3s var(--transition);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  color: var(--navy) !important;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600 !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,0.3) !important;
}

/* ─── HAMBURGER ─── */
.hamburger {
  display: none; flex-direction: column;
  gap: 6px; cursor: pointer; padding: 8px;
  background: none; border: none; z-index: 1100;
}
.hamburger span {
  display: block; width: 26px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.35s var(--transition), opacity 0.3s, width 0.3s;
  transform-origin: center;
}

/* Hamburger open state — X animation */
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0; width: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ─── MOBILE MENU ─── */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px; left: 0; right: 0;
  background: rgba(13,27,62,0.98);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  z-index: 999;
  padding: 1.5rem 2rem 2rem;
  flex-direction: column; gap: 0;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.35s var(--transition), opacity 0.35s;
  pointer-events: none;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.mobile-menu li {
  list-style: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-menu li:last-child { border-bottom: none; }
.mobile-menu a {
  display: block; padding: 1rem 0;
  color: rgba(255,255,255,0.85);
  text-decoration: none; font-size: 16px; font-weight: 500;
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-menu a:hover { color: var(--gold); padding-left: 6px; }
.mobile-menu .mob-cta {
  margin-top: 1.2rem;
  display: inline-block;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy) !important;
  padding: 14px 28px;
  border-radius: 10px; font-weight: 600;
  text-align: center; width: 100%;
}

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-bg-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0; }
.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,168,76,0.15), transparent);
  top: -200px; right: -100px;
}
.orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -150px; left: -100px;
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201,168,76,0.08), transparent);
  top: 40%; left: 40%;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 4rem; padding-top: 120px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  position: relative; z-index: 2;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 6px 16px;
  margin-bottom: 1.5rem; opacity: 0;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.hero-eyebrow span {
  font-size: 12px; font-weight: 500;
  color: var(--gold); letter-spacing: 1px; text-transform: uppercase;
}
.hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(52px, 5vw, 80px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem; opacity: 0;
}
.hero-h1 em {
  font-style: normal; color: var(--gold); position: relative;
}
.hero-h1 em::after {
  content: '';
  position: absolute; bottom: 4px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  border-radius: 2px; transform: scaleX(0); transform-origin: left;
  animation: underlineSlide 0.8s var(--transition) 1.2s forwards;
}
@keyframes underlineSlide { to { transform: scaleX(1); } }
.hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem; max-width: 480px; opacity: 0;
}
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 2.5rem; opacity: 0;
}
.hero-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px; padding: 6px 14px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  transition: all 0.3s;
}
.hero-tag:hover {
  background: var(--gold-dim);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}
.hero-actions {
  display: flex; gap: 1rem; align-items: center;
  margin-bottom: 3.5rem; opacity: 0;
}
.btn-gold {
  padding: 14px 32px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  letter-spacing: 0.3px; white-space: nowrap; text-decoration: none;
  display: inline-block;
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(201,168,76,0.35);
}
.btn-outline {
  padding: 14px 32px; background: transparent;
  color: var(--white); border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 10px; font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: all 0.3s; display: flex; align-items: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
}
.btn-outline:hover {
  border-color: rgba(201,168,76,0.5);
  color: var(--gold); background: var(--gold-dim);
}
.play-icon {
  width: 20px; height: 20px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 10px;
}
.hero-stats {
  display: flex; gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08); opacity: 0;
}
.hero-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: var(--white);
}
.hero-stat-num span { color: var(--gold); }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* ─── HERO RIGHT (IMPROVED) ─── */
.hero-right {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  /* Extra padding so floating badges don't clip */
  padding: 40px 48px 40px 32px;
}
.hero-visual-card {
  width: 100%; max-width: 440px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px; padding: 1.8rem;
  position: relative; backdrop-filter: blur(10px);
}
.hero-visual-card::before {
  content: '';
  position: absolute; top: -1px; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.mock-browser {
  background: rgba(255,255,255,0.05);
  border-radius: 10px; overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,0.07);
}
.mock-browser-bar {
  padding: 10px 14px; background: rgba(0,0,0,0.2);
  display: flex; align-items: center; gap: 8px;
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; }
.mock-dot:nth-child(1) { background: #FF5F57; }
.mock-dot:nth-child(2) { background: #FFBD2E; }
.mock-dot:nth-child(3) { background: #28CA41; }
.mock-url {
  margin-left: 8px; background: rgba(255,255,255,0.05);
  border-radius: 4px; padding: 3px 12px;
  font-size: 11px; color: rgba(255,255,255,0.3); flex: 1;
}
.mock-screen {
  padding: 1.5rem;
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  min-height: 160px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.mock-screen::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}
.mock-chart-bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 80px; padding: 0 10px;
  position: relative; z-index: 1;
}
.mock-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(201,168,76,0.2);
  position: relative; overflow: hidden;
}
.mock-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, var(--gold), rgba(240,192,64,0.4));
  height: 100%;
  animation: barGrow 1.5s var(--transition) forwards;
  transform-origin: bottom; transform: scaleY(0);
}
@keyframes barGrow { to { transform: scaleY(1); } }
.mock-bar:nth-child(1) { height: 45%; }
.mock-bar:nth-child(1)::after { animation-delay: 0.1s; }
.mock-bar:nth-child(2) { height: 70%; }
.mock-bar:nth-child(2)::after { animation-delay: 0.2s; }
.mock-bar:nth-child(3) { height: 55%; }
.mock-bar:nth-child(3)::after { animation-delay: 0.3s; }
.mock-bar:nth-child(4) { height: 85%; }
.mock-bar:nth-child(4)::after { animation-delay: 0.4s; }
.mock-bar:nth-child(5) { height: 65%; }
.mock-bar:nth-child(5)::after { animation-delay: 0.5s; }
.mock-bar:nth-child(6) { height: 90%; }
.mock-bar:nth-child(6)::after { animation-delay: 0.6s; }
.mock-bar:nth-child(7) { height: 75%; }
.mock-bar:nth-child(7)::after { animation-delay: 0.7s; }
.mock-label {
  font-size: 11px; color: rgba(201,168,76,0.7);
  margin-top: 8px; letter-spacing: 1px; text-transform: uppercase;
  position: relative; z-index: 1;
}
.mini-stat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.mini-stat {
  background: rgba(255,255,255,0.04);
  border-radius: 10px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.3s;
}
.mini-stat:hover { background: var(--gold-dim); border-color: rgba(201,168,76,0.2); }
.mini-stat-num {
  font-size: 22px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.mini-stat-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* Floating badges — fixed positioning + z-index so they don't clip */
.float-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(24px);
  white-space: nowrap;
  box-shadow: 0 20px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.08);
  z-index: 10;
}
.float-badge-1 {
  top: 0; right: 0;
  animation: floatBadge1 4s ease-in-out infinite;
}
.float-badge-2 {
  bottom: 20px; left: 0;
  animation: floatBadge2 4s ease-in-out infinite 0.5s;
}
@keyframes floatBadge1 {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes floatBadge2 {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}
.float-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.15);
}
.float-label { font-size: 11px; color: rgba(255,255,255,0.5); }
.float-value { font-size: 15px; font-weight: 700; color: var(--white); }

/* ─── MARQUEE (services ticker) ─── */
.marquee-section {
  background: var(--navy);
  border-top: 1px solid rgba(201,168,76,0.1);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  padding: 1.2rem 0; overflow: hidden;
}
.marquee-track {
  display: flex; gap: 3rem; width: max-content;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-item {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.35);
  font-size: 13px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap;
}
.marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.5; }

/* ─── CLIENT LOGOS MARQUEE ─── */
.logos-section {
  background: var(--off-white);
  padding: 3.5rem 0; overflow: hidden;
}
.logos-label {
  text-align: center;
  font-size: 14px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gray-400);
  margin-bottom: 4rem;
}
.logos-track-wrap { overflow: hidden; }
.logos-track {
  display: flex; align-items: center; gap: 4rem;
  width: max-content;
  animation: logoMarquee 28s linear infinite;
}
.logos-track:hover { animation-play-state: paused; }
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-item {
  display: flex; align-items: center; gap: 10px;
  opacity: 0.4; transition: opacity 0.3s;
  white-space: nowrap;
}
.logo-item:hover { opacity: 0.8; }
.logo-shape {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.logo-img {
  /* width: 36px;  */
  height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}


.logo-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700;
  color: var(--navy); letter-spacing: 0.5px;
}

/* ─── SECTION SHARED ─── */
.section-pill {
  display: inline-flex; align-items: center;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 6px 16px;
  font-size: 11px; font-weight: 600;
  color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.section-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4vw, 56px); font-weight: 700;
  line-height: 1.2; color: var(--text); margin-bottom: 1rem;
}
.section-h2 em { font-style: normal; color: var(--gold); }
.section-sub {
  font-size: 17px; color: var(--gray-600);
  max-width: 500px; line-height: 1.7; margin-bottom: 3.5rem;
}

/* ─── SERVICES ─── */
.services { padding: 8rem 4rem; background: var(--white); }
.services-inner { max-width: 1200px; margin: 0 auto; }
.services-layout {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 0 0 1px var(--gray-200);
}
.svc-card {
  padding: 2.5rem; background: var(--white);
  position: relative; transition: background 0.3s, transform 0.3s;
  cursor: pointer; border: 1px solid var(--gray-200);
}
.svc-card:hover { background: var(--navy); z-index: 2; box-shadow: 0 20px 60px rgba(13,27,62,0.15); }
.svc-number { font-size: 11px; color: var(--gold); font-weight: 600; letter-spacing: 2px; margin-bottom: 1.2rem; opacity: 0.6; transition: opacity 0.3s; }
.svc-card:hover .svc-number { opacity: 1; }
.svc-icon-wrap { width: 56px; height: 56px; background: var(--gray-100); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 1.5rem; transition: background 0.3s; }
.svc-card:hover .svc-icon-wrap { background: rgba(201,168,76,0.15); }
.svc-name { font-size: 20px; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); transition: color 0.3s; }
.svc-card:hover .svc-name { color: var(--white); }
.svc-desc { font-size: 14px; color: var(--gray-600); line-height: 1.7; transition: color 0.3s; }
.svc-card:hover .svc-desc { color: rgba(255,255,255,0.6); }
.svc-arrow { position: absolute; bottom: 2rem; right: 2rem; width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--gray-400); transition: all 0.3s; }
.svc-card:hover .svc-arrow { background: var(--gold); color: var(--navy); transform: translate(4px, -4px); }

/* ─── CASE STUDY ─── */
.case-study {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.case-study::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.case-study-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.case-study-header { margin-bottom: 3.5rem; }
.case-study-header .section-h2 { color: var(--white); }
.case-study-header .section-sub { color: rgba(255,255,255,0.5); }
.case-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  align-items: start;
}
.case-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2.5rem;
  transition: border-color 0.3s;
}
.case-card:hover { border-color: rgba(201,168,76,0.25); }
.case-client {
  display: inline-block;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 4px 14px;
  font-size: 11px; font-weight: 600; color: var(--gold);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.2rem;
}
.case-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700;
  color: var(--white); margin-bottom: 1rem; line-height: 1.3;
}
.case-problem {
  font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.5);
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255,255,255,0.1);
}
.case-what {
  font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.6);
  margin-bottom: 2rem;
}
.case-results {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.case-result-item {
  background: rgba(255,255,255,0.04);
  border-radius: 12px; padding: 1.2rem 1rem; text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.case-result-num {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--gold);
  display: block; margin-bottom: 4px;
}
.case-result-label { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.4; }
.case-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold); text-decoration: none; font-size: 13px;
  font-weight: 600; letter-spacing: 0.3px;
  transition: gap 0.3s;
}
.case-link:hover { gap: 10px; }

/* .case-more { text-align: center; margin-top: 3rem; } */

.case-more{
  margin-top:4rem;
  text-align:center;
}

.case-more-text{
  max-width:700px;
  margin:0 auto 1.5rem;
  color:var(--gray-600);
}


/* ─── WHY US ─── */
.why {
  background: var(--navy); padding: 8rem 4rem;
  position: relative; overflow: hidden;
}
.why::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.why-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
}
.why-img {
  width: 100%; aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
  border-radius: 20px; border: 1px solid rgba(201,168,76,0.1);
  overflow: hidden; position: relative;
}
.why-img-placeholder {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&q=80') center/cover;
  opacity: 0.3;
}
.why-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,27,62,0.9) 0%, transparent 50%);
}
.why-img-stat {
  position: absolute; bottom: 2rem; left: 2rem; right: 2rem;
  background: rgba(13,27,62,0.8);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 14px; padding: 1.5rem; backdrop-filter: blur(20px);
}
.why-stat-row { display: flex; gap: 2rem; }
.why-s { flex: 1; }
.why-s-num { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--gold); }
.why-s-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.why-content .section-h2 { color: var(--white); }
.why-content .section-sub { color: rgba(255,255,255,0.5); }
.why-features { display: flex; flex-direction: column; gap: 1.5rem; }
.why-feature {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; transition: all 0.3s;
}
.why-feature:hover { background: var(--gold-dim); border-color: rgba(201,168,76,0.2); transform: translateX(8px); }
.why-feature-icon { width: 44px; height: 44px; min-width: 44px; background: var(--gold-dim); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.why-feature-body h4 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.why-feature-body p { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; }

/* ─── PROCESS ─── */
.process { padding: 8rem 4rem; background: var(--off-white); }
.process-inner { max-width: 1200px; margin: 0 auto; }
.process-header { text-align: center; margin-bottom: 5rem; }
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; position: relative;
}
.process-steps::before {
  content: '';
  position: absolute; top: 36px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.3;
}
.process-step { text-align: center; padding: 2rem 1rem; }
.process-step-num {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--navy);
  margin: 0 auto 1.5rem; position: relative; z-index: 1;
  box-shadow: 0 8px 24px rgba(201,168,76,0.25);
  transition: transform 0.3s, box-shadow 0.3s;
}
.process-step:hover .process-step-num { transform: scale(1.1); box-shadow: 0 12px 32px rgba(201,168,76,0.35); }
.process-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 0.5rem; }
.process-step p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }

/* ─── TESTIMONIALS CAROUSEL ─── */
.testimonials {
  padding: 8rem 4rem; background: var(--white); overflow: hidden;
}
.testimonials-inner { max-width: 1200px; margin: 0 auto; }
.testimonials-header { margin-bottom: 3rem; }

.carousel-wrap { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex; gap: 2rem;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tcard {
  background: var(--gray-100); border-radius: var(--radius);
  padding: 2rem; border: 1px solid var(--gray-200);
  position: relative; transition: all 0.3s;
  min-width: calc(33.333% - 1.4rem);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .tcard { min-width: calc(100% - 0px); }
}
.tcard:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(13,27,62,0.08); border-color: rgba(201,168,76,0.2); }
.tcard-stars { color: var(--gold); font-size: 12px; margin-bottom: 0.5rem; }
.tcard-quote { font-size: 48px; line-height: 1; color: var(--gold); opacity: 0.3; font-family: 'Playfair Display', serif; margin-bottom: 1rem; }
.tcard-body { font-size: 14px; line-height: 1.8; color: var(--gray-600); margin-bottom: 1.5rem; }
.tcard-author { display: flex; align-items: center; gap: 12px; }
.tcard-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-light)); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--gold); font-family: 'Playfair Display', serif; }
.tcard-name { font-size: 14px; font-weight: 600; }
.tcard-role { font-size: 12px; color: var(--gray-400); }

/* Carousel controls */
.carousel-controls {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2rem;
}
.carousel-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; color: var(--navy);
  transition: all 0.3s; flex-shrink: 0;
}
.carousel-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gray-200); cursor: pointer;
  transition: all 0.3s;
}
.carousel-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }

/* ─── CONTACT FORM ─── */
.contact-form-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.contact-form-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
}
.contact-form-left .section-h2 { color: var(--text); }
.contact-info-items { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-item {
  display: flex; gap: 1rem; align-items: flex-start;
}
.contact-info-icon {
  width: 44px; height: 44px; background: var(--gold-dim);
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
  border: 1px solid rgba(201,168,76,0.15);
}
.contact-info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-400); margin-bottom: 2px; }
.contact-info-val { font-size: 14px; font-weight: 500; color: var(--text); }

.form-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(13,27,62,0.06);
  border: 1px solid var(--gray-200);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text); margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--gray-200); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
  background: var(--gray-100); transition: border-color 0.3s, background 0.3s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold); background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-submit {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201,168,76,0.3); }

/* ─── NEWSLETTER ─── */
.newsletter {
  background: var(--navy);
  padding: 5rem 4rem;
  position: relative; overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.newsletter-inner {
  max-width: 640px; margin: 0 auto; text-align: center;
  position: relative; z-index: 1;
}
.newsletter-inner .section-h2 { color: var(--white); font-size: clamp(28px, 3.5vw, 44px); margin-bottom: 0.8rem; }
.newsletter-inner p { color: rgba(255,255,255,0.5); font-size: 15px; margin-bottom: 2rem; }
.newsletter-form {
  display: flex; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 8px 8px 8px 20px;
}
.newsletter-form input {
  flex: 1; background: none; border: none; outline: none;
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  color: var(--white);
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }

.newsletter-form input,
.newsletter-form input:-webkit-autofill,
.newsletter-form input:-webkit-autofill:hover,
.newsletter-form input:-webkit-autofill:focus,
.newsletter-form input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--white);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: 0 0 0px 1000px transparent inset;
}

.newsletter-form button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform 0.2s;
  white-space: nowrap;
}
.newsletter-form button:hover { transform: scale(1.03); }
.newsletter-note { font-size: 12px; color: rgba(255,255,255,0.3); margin-top: 1rem; }

/* ─── FINAL CTA ─── */
.final-cta { padding: 8rem 4rem; background: var(--navy); position: relative; overflow: hidden; }
.final-cta::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cta-inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta-h2 { font-family: 'Playfair Display', serif; font-size: clamp(36px, 4vw, 60px); font-weight: 700; color: var(--white); margin-bottom: 1.5rem; line-height: 1.2; }
.cta-h2 em { font-style: normal; color: var(--gold); }
.cta-sub { font-size: 17px; color: rgba(255,255,255,0.5); margin-bottom: 3rem; line-height: 1.7; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── FOOTER ─── */
footer { background: #080f20; padding: 5rem 4rem 2rem; color: rgba(255,255,255,0.4); }
.footer-top { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 2rem; }
.footer-brand h3 { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--white); margin-bottom: 1rem; }
.footer-brand p { font-size: 13px; line-height: 1.8; max-width: 280px; }
.footer-social { display: flex; gap: 10px; margin-top: 1.5rem; }
.social-btn { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(255,255,255,0.4); text-decoration: none; transition: all 0.3s; }
.social-btn:hover { background: var(--gold-dim); border-color: rgba(201,168,76,0.2); color: var(--gold); }
.footer-col h4 { font-size: 13px; font-weight: 600; color: var(--white); letter-spacing: 0.5px; margin-bottom: 1.2rem; }
.footer-col a { display: block; color: rgba(255,255,255,0.4); text-decoration: none; font-size: 13px; margin-bottom: 0.8rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; flex-wrap: wrap; gap: 1rem; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.3s; }
.footer-bottom-links a:hover { color: var(--gold); }

/* ─── SCROLL TO TOP ─── */
.scroll-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; background: linear-gradient(135deg, #F0C040, #C9A84C); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; box-shadow: 0 8px 24px rgba(201,168,76,0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 999; color: var(--navy); font-weight: 700; }
.scroll-top.show { opacity: 1; pointer-events: all; }
.scroll-top:hover { transform: translateY(-4px); }

/* ─── REVEAL ─── */
.reveal { opacity: 0; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  nav { padding: 0 2rem; }
  .nav-links { display: none !important; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  .hero-inner { grid-template-columns: 1fr; padding: 0 2rem; padding-top: 110px; }
  .hero-right { display: none; }

  .services { padding: 5rem 2rem; }
  .services-layout { grid-template-columns: repeat(2, 1fr); }

  .case-study { padding: 5rem 2rem; }
  .case-grid { grid-template-columns: 1fr; }

  .why { padding: 5rem 2rem; }
  .why-inner { grid-template-columns: 1fr; }
  .why-visual { display: none; }

  .process { padding: 5rem 2rem; }
  .process-steps { grid-template-columns: 1fr 1fr; }

  .testimonials { padding: 5rem 2rem; }

  .contact-form-section { padding: 5rem 2rem; }
  .contact-form-inner { grid-template-columns: 1fr; gap: 3rem; }

  .newsletter { padding: 4rem 2rem; }
  .newsletter-form { flex-direction: column; padding: 1rem; }
  .newsletter-form input { padding: 10px 0; }

  .final-cta { padding: 5rem 2rem; }
  footer { padding: 4rem 2rem 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
    .services-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
  .hero-h1 { font-size: 42px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .btn-gold, .btn-outline { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { gap: 1rem; flex-wrap: wrap; }
  .process-steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-actions { flex-direction: column; align-items: center; }
  .form-row { grid-template-columns: 1fr; }
  .case-results { grid-template-columns: 1fr 1fr; }
  .logos-section { padding: 2.5rem 0; }
}



.footer-logo{
  display:inline-flex;
  align-items:center;
  margin-bottom:1rem;
  text-decoration:none;
}

.footer-logo-img{
  width:auto;
  height:52px;
  display:block;
  max-width:100%;
}

@media (max-width: 992px){

  .footer-logo-img{
    height:46px;
  }

}


@media (max-width: 768px){

  .footer-logo{
    justify-content:center;
  }

  .footer-logo-img{
    height:40px;
  }

}


.final-cta-cs {
  margin-bottom: -2px;
}



/* ═══════════════════════════════════════
   ABOUT PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── NAV ACTIVE STATE ─── */
.nav-active {
  color: var(--gold) !important;
}
.nav-active::after {
  width: 100% !important;
  background: var(--gold) !important;
}

/* ─── ABOUT HERO ─── */
.about-hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.about-hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.about-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.ab-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.ab-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent);
  top: -200px; right: -150px;
}
.ab-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.about-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 120px 4rem 6rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.about-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.about-h1 em { font-style: normal; color: var(--gold); }
.about-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem; max-width: 520px;
}
.about-hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
}

/* About stat grid (hero right) */
.about-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.about-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px; padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  position: relative; overflow: hidden;
}
.about-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.about-stat-card:hover {
  background: rgba(201,168,76,0.07);
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
}
.about-stat-card:hover::before { opacity: 1; }
.about-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700;
  color: var(--gold); line-height: 1;
}
.about-stat-num span { font-size: 28px; }
.about-stat-label {
  font-size: 13px; color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

/* Scroll cue */
.about-scroll-cue {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.3); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  z-index: 3;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* ─── OUR STORY ─── */
.about-story {
  padding: 8rem 4rem;
  background: var(--white);
}
.about-story-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
}
.story-image-wrap {
  position: relative;
  width: 100%; aspect-ratio: 4/5;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 32px 64px rgba(13,27,62,0.15);
}
.story-img-placeholder {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=700&q=80') center/cover;
}

.story-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

.story-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,27,62,0.7) 0%, transparent 50%);
}
.story-year-badge {
  position: absolute; bottom: 1.8rem; left: 1.8rem;
  background: rgba(13,27,62,0.9);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 1rem 1.5rem;
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 2px;
}
.story-year-num {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700; color: var(--gold);
}
.story-year-label { font-size: 12px; color: rgba(255,255,255,0.5); }
.story-body {
  font-size: 16px; line-height: 1.85;
  color: var(--gray-600); margin-bottom: 1.2rem;
}
.story-highlight-row {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: 2rem;
}
.story-highlight {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem;
  background: var(--gray-100);
  border-radius: 12px;
  border-left: 3px solid var(--gold);
  transition: transform 0.3s;
}
.story-highlight:hover { transform: translateX(6px); }
.story-highlight-icon { font-size: 22px; flex-shrink: 0; }
.story-highlight strong {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--text); margin-bottom: 2px;
}
.story-highlight span { font-size: 13px; color: var(--gray-600); }

/* ─── MISSION VISION VALUES ─── */
.mvv-section {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.mvv-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.mvv-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.mvv-header { margin-bottom: 3.5rem; }
.mvv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.mvv-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2.5rem;
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.mvv-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-6px);
  background: rgba(201,168,76,0.05);
}
.mvv-card--featured {
  background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.04));
  border-color: rgba(201,168,76,0.25);
}
.mvv-icon { font-size: 36px; margin-bottom: 1.2rem; }
.mvv-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--white); margin-bottom: 1rem;
}
.mvv-body { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.55); }
.mvv-values-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.mvv-values-list li {
  font-size: 14px; color: rgba(255,255,255,0.55);
  padding-left: 1rem; position: relative;
}
.mvv-values-list li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--gold); font-size: 12px;
}
.mvv-values-list span {
  color: var(--white); font-weight: 600;
}

/* ─── IMPACT NUMBERS ─── */
.impact-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.impact-inner { max-width: 1200px; margin: 0 auto; }
.impact-header { margin-bottom: 3.5rem; }
.impact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.impact-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 20px rgba(13,27,62,0.05);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative; overflow: hidden;
}
.impact-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.impact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.2);
}
.impact-card:hover::after { transform: scaleX(1); }
.impact-icon { font-size: 32px; margin-bottom: 1rem; }
.impact-num {
  font-family: 'Playfair Display', serif;
  font-size: 52px; font-weight: 700;
  color: var(--navy); line-height: 1;
  margin-bottom: 0.8rem;
}
.impact-num span { font-size: 32px; color: var(--gold); }
.impact-label {
  font-size: 15px; font-weight: 600;
  color: var(--text); margin-bottom: 4px;
}
.impact-sub { font-size: 12px; color: var(--gray-400); line-height: 1.5; }

/* ─── TIMELINE ─── */
.timeline-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.timeline-inner { max-width: 900px; margin: 0 auto; }
.timeline-header { margin-bottom: 4rem; }
.timeline {
  position: relative;
  padding: 0;
}
.timeline::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gray-200) 5%, var(--gray-200) 95%, transparent);
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
}
.timeline-item--left .timeline-card { grid-column: 1; text-align: right; }
.timeline-item--left .timeline-dot  { grid-column: 2; }
.timeline-item--left .timeline-card + * { display: none; }
.timeline-item--right .timeline-card { grid-column: 3; }
.timeline-item--right .timeline-dot  { grid-column: 2; }

/* For left items: card is col1, dot is col2, col3 empty */
.timeline-item--left  { grid-template-areas: "card dot empty"; }
.timeline-item--right { grid-template-areas: "empty dot card"; }
.timeline-item--left  .timeline-card { grid-area: card; }
.timeline-item--left  .timeline-dot  { grid-area: dot; }
.timeline-item--right .timeline-card { grid-area: card; }
.timeline-item--right .timeline-dot  { grid-area: dot; }

.timeline-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gray-200);
  position: relative; z-index: 1;
  transition: border-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
.timeline-dot--gold {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,168,76,0.15);
}
.timeline-item:hover .timeline-dot {
  border-color: var(--gold);
  transform: scale(1.3);
}
.timeline-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.8rem;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.timeline-card:hover {
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
  transform: translateY(-4px);
}
.timeline-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.25);
}
.timeline-card--featured .timeline-year,
.timeline-card--featured .timeline-title,
.timeline-card--featured .timeline-body { color: var(--white); }
.timeline-card--featured .timeline-body { color: rgba(255,255,255,0.6); }
.timeline-year {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem;
}
.timeline-title {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.timeline-body { font-size: 13px; line-height: 1.7; color: var(--gray-600); }

/* ─── TEAM ─── */
.team-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.team-inner { max-width: 1200px; margin: 0 auto; }
.team-header { margin-bottom: 3.5rem; }
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-bottom: 3rem;
}
.team-card {
  background: var(--white);
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 20px rgba(13,27,62,0.05);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
  display: flex; flex-direction: column;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.25);
}
.team-avatar {
  /* height: 140px; */
  height: 240px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  color: var(--gold);
  position: relative; overflow: hidden;
}
.team-avatar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(255,255,255,0.08), transparent);
}
.team-info { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
.team-name {
  font-size: 18px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.team-role {
  font-size: 12px; font-weight: 600;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 1rem;
}
.team-bio {
  font-size: 13px; line-height: 1.75;
  color: var(--gray-600); flex: 1; margin-bottom: 1.2rem;
}
.team-skills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.team-skills span {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px; padding: 4px 12px;
  font-size: 11px; font-weight: 500; color: var(--gray-600);
}




/* ── Photo support ── */
.team-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
}
.team-card:hover .team-avatar-img {
  transform: scale(1.06);
}
.team-avatar:not(.team-avatar--gradient) {
  background: var(--gray-100);
}

/* ── Experience badge ── */
.team-experience-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(13,27,62,0.85);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* ── Quote overlay, reveals on hover ── */
.team-quote-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem;
  background: linear-gradient(160deg, rgba(13,27,62,0.94), rgba(30,48,96,0.9));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 3;
}
.team-card:hover .team-quote-overlay {
  opacity: 1;
  transform: translateY(0);
}
.team-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  color: var(--gold);
  line-height: 0.6;
  margin-bottom: 8px;
  display: block;
}
.team-quote-overlay p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  /* color: var(--gold-light); */
  font-style: italic;
}

/* ── Socials row ── */
.team-socials {
  display: flex;
  gap: 8px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.team-socials a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  transition: background 0.25s, color 0.25s;
}
.team-socials a:hover {
  background: var(--gold);
  color: #fff;
}

/* ── Stagger the scroll-reveal per card ── */
.team-card.reveal {
  transition-delay: var(--reveal-delay, 0ms);
}






/* Hiring banner */
.team-hiring {
  background: var(--navy);
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,0.2);
  padding: 2.5rem;
}
.team-hiring-inner {
  display: flex; align-items: center; gap: 2rem;
  flex-wrap: wrap;
}
.team-hiring-icon { font-size: 40px; flex-shrink: 0; }
.team-hiring-inner h3 {
  font-size: 20px; font-weight: 700;
  color: var(--white); margin-bottom: 4px;
}
.team-hiring-inner p { font-size: 14px; color: rgba(255,255,255,0.5); }
.team-hiring-inner .btn-gold { margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* ─── CULTURE ─── */
.culture-section {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.culture-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.culture-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
.culture-left .section-h2 { color: var(--white); }
.culture-right {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.culture-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.8rem;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.culture-card:hover {
  border-color: rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.05);
  transform: translateY(-4px);
}
.culture-card-icon { font-size: 28px; margin-bottom: 0.8rem; }
.culture-card h4 {
  font-size: 15px; font-weight: 700;
  color: var(--white); margin-bottom: 0.6rem;
}
.culture-card p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.5); }

/* ─── FAQ ─── */
.faq-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-header { margin-bottom: 3rem; }
.faq-grid { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.faq-item:first-of-type { border-top: 1px solid var(--gray-200); }
.faq-question {
  width: 100%; background: none; border: none;
  padding: 1.5rem 0;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  cursor: pointer; text-align: left;
  font-family: 'DM Sans', sans-serif;
}
.faq-question span {
  font-size: 16px; font-weight: 600;
  color: var(--text); line-height: 1.4;
  transition: color 0.3s;
}
.faq-question:hover span { color: var(--gold); }
.faq-icon {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300;
  color: var(--gray-400);
  transition: all 0.35s var(--transition);
  line-height: 1;
}
.faq-item.open .faq-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: rotate(45deg);
}
.faq-item.open .faq-question span { color: var(--navy); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--transition), padding 0.3s;
}
.faq-answer.open { max-height: 400px; }
.faq-answer p {
  padding-bottom: 1.5rem;
  font-size: 15px; line-height: 1.8;
  color: var(--gray-600);
}

/* ─── ABOUT PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    padding: 120px 2rem 5rem;
    gap: 3rem;
  }
  .about-story { padding: 5rem 2rem; }
  .about-story-inner { grid-template-columns: 1fr; gap: 3rem; }
  .story-image-wrap { aspect-ratio: 16/9; }

  .mvv-section { padding: 5rem 2rem; }
  .mvv-grid { grid-template-columns: 1fr; gap: 1rem; }

  .impact-section { padding: 5rem 2rem; }
  .impact-grid { grid-template-columns: 1fr 1fr; }

  .timeline-section { padding: 5rem 2rem; }
  .timeline::before { left: 16px; transform: none; }
  .timeline-item {
    grid-template-columns: auto 1fr;
    grid-template-areas: "dot card" !important;
  }
  .timeline-item--left .timeline-card,
  .timeline-item--right .timeline-card {
    grid-area: card; text-align: left;
  }
  .timeline-item--left .timeline-dot,
  .timeline-item--right .timeline-dot { grid-area: dot; }

  .team-section { padding: 5rem 2rem; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-hiring-inner { flex-direction: column; align-items: flex-start; }
  .team-hiring-inner .btn-gold { margin-left: 0; }

  .culture-section { padding: 5rem 2rem; }
  .culture-inner { grid-template-columns: 1fr; gap: 3rem; }

  .faq-section { padding: 5rem 2rem; }
}

@media (max-width: 768px) {
  .story-image-wrap { aspect-ratio: 4/5; }
}


@media (max-width: 640px) {
  .about-h1 { font-size: 40px; }
  .about-hero-actions { flex-direction: column; }
  .about-hero-actions .btn-gold,
  .about-hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .about-stat-grid { grid-template-columns: 1fr 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .culture-right { grid-template-columns: 1fr; }
  .faq-question span { font-size: 14px; }
}

/* ═══════════════════════════════════════
   SERVICES PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── SERVICES PAGE HERO ─── */
.svc-page-hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.svc-hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.svc-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.svc-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.svc-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent);
  top: -200px; right: -150px;
}
.svc-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.svc-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 120px 4rem 6rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.svc-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.svc-h1 em { font-style: normal; color: var(--gold); }
.svc-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2.5rem; max-width: 520px;
}
.svc-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Service preview grid */
.svc-service-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.svc-preview-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.4rem 1rem;
  text-align: center;
  transition: all 0.3s; cursor: default;
}
.svc-preview-card:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
}
.svc-preview-card--gold {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.3);
}
.svc-preview-icon { font-size: 24px; margin-bottom: 0.5rem; }
.svc-preview-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem; }
.svc-preview-result { font-size: 13px; font-weight: 700; color: var(--gold); }

/* ─── SERVICES SUBNAV ─── */
.svc-subnav {
  position: sticky; top: 80px; z-index: 900;
  background: rgba(13,27,62,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  overflow-x: auto;
}
.svc-subnav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 4rem;
  display: flex; gap: 0;
}
.svc-subnav-item {
  padding: 1.1rem 1.5rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none; font-size: 13px;
  font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.svc-subnav-item:hover,
.svc-subnav-item.active-svc {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ─── SERVICE DETAIL SECTIONS ─── */
.svc-detail-section { padding: 7rem 4rem; background: var(--white); }
.svc-detail-section--alt { background: var(--off-white); }
.svc-detail-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}
.svc-detail-inner--reversed { direction: rtl; }
.svc-detail-inner--reversed > * { direction: ltr; }

.svc-detail-num {
  font-family: 'Playfair Display', serif;
  font-size: 80px; font-weight: 900;
  color: var(--gray-200); line-height: 1;
  margin-bottom: -1rem;
}
.svc-detail-body {
  font-size: 16px; line-height: 1.85;
  color: var(--gray-600); margin-bottom: 1.2rem;
}
.svc-detail-includes {
  margin: 2rem 0;
  background: var(--gray-100);
  border-radius: 14px; padding: 1.8rem;
  border: 1px solid var(--gray-200);
}
.svc-detail-includes h4 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text); margin-bottom: 1rem;
}
.svc-detail-includes ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.svc-detail-includes li {
  font-size: 14px; color: var(--gray-600);
  padding-left: 1.4rem; position: relative;
}
.svc-detail-includes li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--gold); font-weight: 700; font-size: 12px;
}
.svc-detail-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Result card */
.svc-result-card {
  background: var(--navy);
  border-radius: 20px; padding: 2rem;
  border: 1px solid rgba(201,168,76,0.2);
  margin-bottom: 1.2rem;
}
.svc-result-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem;
}
.svc-result-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: var(--white); margin-bottom: 1.5rem; line-height: 1.4;
}
.svc-result-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem; margin-bottom: 1.5rem;
}
.svc-metric {
  background: rgba(255,255,255,0.04);
  border-radius: 10px; padding: 1rem 0.8rem; text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.svc-metric-num {
  display: block; font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 4px;
}
.svc-metric-label { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.3; }
.svc-result-quote {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,0.6); font-style: italic;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(201,168,76,0.3);
}
.svc-result-author { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 0.5rem; }

/* Pricing card */
.svc-pricing-card {
  background: var(--white);
  border-radius: 16px; padding: 1.8rem;
  border: 2px solid var(--gold);
  text-align: center;
  box-shadow: 0 8px 32px rgba(201,168,76,0.1);
}
.svc-pricing-from { font-size: 12px; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.4rem; }
.svc-pricing-price {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem;
}
.svc-pricing-price span { font-size: 16px; color: var(--gray-400); }
.svc-pricing-note { font-size: 12px; color: var(--gray-400); }

/* ─── WEB SHOWCASE ─── */
.svc-web-showcase {
  background: var(--navy);
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(201,168,76,0.15);
  margin-bottom: 1.2rem;
  position: relative;
}
.svc-web-showcase-bar {
  background: rgba(0,0,0,0.3);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: rgba(255,255,255,0.3);
}
.svc-web-showcase-bar .mock-dot { width: 10px; height: 10px; }
.svc-web-showcase-screen {
  padding: 1.5rem;
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  min-height: 220px;
}
.svc-web-mock-nav {
  height: 12px; background: rgba(255,255,255,0.08);
  border-radius: 6px; margin-bottom: 1.2rem;
}
.svc-web-mock-hero { margin-bottom: 1.5rem; }
.svc-web-mock-h1 { height: 18px; background: rgba(201,168,76,0.4); border-radius: 4px; margin-bottom: 8px; width: 70%; }
.svc-web-mock-sub { height: 10px; background: rgba(255,255,255,0.15); border-radius: 4px; margin-bottom: 12px; width: 90%; }
.svc-web-mock-btn { height: 28px; width: 100px; background: linear-gradient(135deg,#F0C040,#C9A84C); border-radius: 6px; }
.svc-web-mock-cards { display: flex; gap: 8px; }
.svc-web-mock-card { flex: 1; height: 60px; background: rgba(255,255,255,0.06); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); }
.svc-web-score-badge {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 0.8rem 1rem;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(16px);
}
.svc-web-score-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--gold) 98%, rgba(255,255,255,0.1) 0);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.svc-web-score-label { font-size: 12px; font-weight: 600; color: var(--white); }
.svc-web-score-sub { font-size: 10px; color: rgba(255,255,255,0.4); }

/* ─── PHONE / APP SHOWCASE ─── */
.svc-app-showcase { position: relative; display: flex; justify-content: center; margin-bottom: 1.2rem; padding: 1rem 2rem; }
.svc-phone-frame {
  width: 180px;
  background: linear-gradient(135deg, #1a1a2e, #0D1B3E);
  border-radius: 32px;
  border: 2px solid rgba(201,168,76,0.2);
  padding: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  position: relative; z-index: 1;
}
.svc-phone-notch {
  width: 50px; height: 8px;
  background: rgba(201,168,76,0.3);
  border-radius: 4px; margin: 0 auto 8px;
}
.svc-phone-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  border-radius: 20px; padding: 12px;
  min-height: 260px;
}
.svc-phone-app-nav { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-bottom: 12px; }
.svc-phone-app-hero { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.svc-phone-app-icon { width: 32px; height: 32px; background: linear-gradient(135deg,#F0C040,#C9A84C); border-radius: 8px; flex-shrink: 0; }
.svc-phone-app-title { flex: 1; }
.svc-phone-app-title::before { content: ''; display: block; height: 7px; background: rgba(201,168,76,0.5); border-radius: 3px; margin-bottom: 4px; }
.svc-phone-app-title::after { content: ''; display: block; height: 5px; background: rgba(255,255,255,0.15); border-radius: 3px; width: 70%; }
.svc-phone-app-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.svc-phone-list-item { height: 28px; background: rgba(255,255,255,0.06); border-radius: 6px; border-left: 3px solid rgba(201,168,76,0.4); }
.svc-phone-app-btn { height: 28px; background: linear-gradient(135deg,#F0C040,#C9A84C); border-radius: 8px; }
.svc-app-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 0.8rem 1rem;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(16px);
  font-size: 20px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.svc-app-badge-1 { top: 1rem; right: 0; }
.svc-app-badge-2 { bottom: 1rem; left: 0; }
.svc-app-badge-val { font-size: 14px; font-weight: 700; color: var(--gold); }
.svc-app-badge-lbl { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── AI CHAT SHOWCASE ─── */
.svc-ai-showcase { position: relative; margin-bottom: 1.2rem; }
.svc-chat-window {
  background: var(--white);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(13,27,62,0.12);
  border: 1px solid var(--gray-200);
}
.svc-chat-header {
  background: var(--navy);
  padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 12px;
}
.svc-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.svc-chat-name { font-size: 14px; font-weight: 600; color: var(--white); }
.svc-chat-status { font-size: 11px; color: #28CA41; }
.svc-chat-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.svc-chat-msg {
  max-width: 80%; padding: 0.7rem 1rem;
  border-radius: 12px; font-size: 13px; line-height: 1.5;
}
.svc-chat-msg--bot {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--text); align-self: flex-start;
  border-radius: 4px 12px 12px 12px;
}
.svc-chat-msg--user {
  background: var(--navy);
  color: var(--white); align-self: flex-end;
  border-radius: 12px 4px 12px 12px;
}
.svc-chat-msg--typing {
  display: flex; align-items: center; gap: 4px; padding: 0.8rem 1rem;
}
.svc-chat-msg--typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-400);
  animation: typingDot 1.2s ease-in-out infinite;
}
.svc-chat-msg--typing span:nth-child(2) { animation-delay: 0.2s; }
.svc-chat-msg--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.svc-ai-stat {
  position: absolute;
  background: var(--navy);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 0.8rem 1.2rem;
  display: flex; flex-direction: column;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.svc-ai-stat-1 { top: -0.5rem; right: -0.5rem; }
.svc-ai-stat-2 { bottom: -0.5rem; left: -0.5rem; }
.svc-ai-stat-num { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--gold); }
.svc-ai-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.4); max-width: 120px; line-height: 1.3; }

/* ─── EMAIL SHOWCASE ─── */
.svc-email-showcase { margin-bottom: 1.2rem; }
.svc-email-client {
  background: var(--white);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: 0 8px 32px rgba(13,27,62,0.08);
  display: flex;
}
.svc-email-sidebar {
  width: 120px; background: var(--gray-100);
  border-right: 1px solid var(--gray-200);
  padding: 1rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  flex-shrink: 0;
}
.svc-email-folder {
  font-size: 12px; padding: 0.5rem 0.6rem;
  border-radius: 6px; color: var(--gray-600);
  cursor: pointer; transition: background 0.2s;
}
.svc-email-folder.active-folder { background: var(--navy); color: var(--white); }
.svc-email-main { flex: 1; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.svc-email-item {
  padding: 0.7rem 0.8rem; border-radius: 8px;
  border-bottom: 1px solid var(--gray-200);
  transition: background 0.2s;
}
.svc-email-item:hover { background: var(--gray-100); }
.svc-email-item--unread { background: rgba(201,168,76,0.05); }
.svc-email-from { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.svc-email-subject { font-size: 11px; color: var(--gray-400); }
.svc-email-badge {
  margin-top: 1rem;
  background: var(--navy);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 12px;
  font-size: 24px;
}
.svc-email-badge-addr { font-size: 14px; font-weight: 700; color: var(--gold); }
.svc-email-badge-note { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── COMPARE TABLE ─── */
.svc-compare-section {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.svc-compare-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.svc-compare-inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.svc-compare-header { margin-bottom: 3rem; }
.svc-compare-table { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.svc-compare-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.svc-compare-row:last-child { border-bottom: none; }
.svc-compare-row--header { background: rgba(201,168,76,0.1); }
.svc-compare-col {
  padding: 1.1rem 1.5rem;
  font-size: 14px; color: rgba(255,255,255,0.7);
  transition: background 0.2s;
}
.svc-compare-row:hover .svc-compare-col { background: rgba(255,255,255,0.02); }
.svc-compare-col--feature { color: rgba(255,255,255,0.85); font-weight: 500; }
.svc-compare-col--drivon { color: var(--gold); font-weight: 600; text-align: center; }
.svc-compare-col--others { color: rgba(255,255,255,0.4); text-align: center; }
.svc-compare-row--header .svc-compare-col {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
}
.svc-compare-row--header .svc-compare-col--drivon { color: var(--gold); }

/* ─── SECTION DIVIDER ─── */
.svc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
  margin: 0 4rem;
}

/* ─── SERVICES PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .svc-hero-inner { grid-template-columns: 1fr; padding: 120px 2rem 5rem; gap: 3rem; }
  .svc-service-preview-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-subnav-inner { padding: 0 1rem; }
  .svc-detail-section { padding: 5rem 2rem; }
  .svc-detail-inner { grid-template-columns: 1fr; gap: 3rem; }
  .svc-detail-inner--reversed { direction: ltr; }
  .svc-divider { margin: 0 2rem; }
  .svc-compare-section { padding: 5rem 2rem; }
  .svc-compare-col { padding: 0.9rem 1rem; font-size: 13px; }
  .svc-app-showcase { padding: 1rem 0; }
  .svc-ai-stat-1, .svc-ai-stat-2 { position: static; margin-top: 0.8rem; }
  .svc-ai-showcase { display: flex; flex-direction: column; gap: 0.8rem; }
}
@media (max-width: 640px) {
  .svc-h1 { font-size: 38px; }
  .svc-hero-actions { flex-direction: column; }
  .svc-hero-actions .btn-gold,
  .svc-hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .svc-service-preview-grid { grid-template-columns: 1fr 1fr; }
  .svc-result-metrics { grid-template-columns: 1fr 1fr 1fr; }
  .svc-compare-row { grid-template-columns: 1.5fr 1fr 1fr; }
  .svc-compare-col { padding: 0.8rem 0.6rem; font-size: 12px; }
  .svc-detail-actions { flex-direction: column; }
  .svc-detail-actions .btn-gold,
  .svc-detail-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
}

/* ═══════════════════════════════════════
   CONTACT PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── CONTACT HERO ─── */
.contact-hero {
  min-height: 100vh;
  background: var(--navy);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.contact-hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.contact-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.ct-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.ct-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent);
  top: -200px; right: -150px;
}
.ct-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.contact-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 120px 4rem 6rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.contact-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.contact-h1 em { font-style: normal; color: var(--gold); }
.contact-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem; max-width: 520px;
}

/* Trust row */
.contact-trust-row {
  display: flex; align-items: center; gap: 1.5rem;
  margin-bottom: 2.5rem; flex-wrap: wrap;
}
.contact-trust-item { text-align: center; }
.contact-trust-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: var(--gold);
}
.contact-trust-label { font-size: 11px; color: rgba(255,255,255,0.4); }
.contact-trust-divider {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.1);
}
.contact-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Direct contact cards */
.contact-hero-right {
  display: flex; flex-direction: column; gap: 1rem;
}
.ct-direct-card {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.2rem 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s;
  position: relative; overflow: hidden;
}
.ct-direct-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.05), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.ct-direct-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateX(6px);
}
.ct-direct-card:hover::before { opacity: 1; }
.ct-direct-card--wa { border-color: rgba(37,211,102,0.2); }
.ct-direct-card--wa:hover { border-color: rgba(37,211,102,0.5); }
.ct-direct-card--wa .ct-direct-icon { color: #25D366; background: rgba(37,211,102,0.1); }
.ct-direct-card--call .ct-direct-icon { color: var(--gold); }
.ct-direct-card--location { cursor: default; }
.ct-direct-card--location:hover { transform: none; }

.ct-direct-icon {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 12px;
  background: rgba(201,168,76,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ct-direct-body { flex: 1; }
.ct-direct-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,0.4); margin-bottom: 3px;
}
.ct-direct-val {
  font-size: 15px; font-weight: 600; color: var(--white);
  margin-bottom: 2px;
}
.ct-direct-note { font-size: 11px; color: rgba(255,255,255,0.35); }
.ct-direct-arrow {
  font-size: 18px; color: rgba(255,255,255,0.2);
  transition: color 0.3s, transform 0.3s;
}
.ct-direct-card:hover .ct-direct-arrow {
  color: var(--gold); transform: translateX(4px);
}

/* ─── BOOK A CALL ─── */
.book-call-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.book-call-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}
.book-call-steps {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-top: 2.5rem;
}
.book-step {
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.book-step-num {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 14px; font-weight: 700; color: var(--navy);
  box-shadow: 0 4px 12px rgba(201,168,76,0.25);
}
.book-step-body h4 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.book-step-body p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }

/* Booking card */
.book-call-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(13,27,62,0.08);
  border: 1px solid var(--gray-200);
  position: relative; overflow: hidden;
}
.book-call-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.book-call-card-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.book-call-card-icon { font-size: 32px; }
.book-call-card-title {
  font-size: 18px; font-weight: 700; color: var(--text);
}
.book-call-card-sub { font-size: 13px; color: var(--gray-400); margin-top: 2px; }

/* ─── SOCIAL ROW ─── */
.ct-social-row {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin-top: 2rem;
}
.ct-social-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  color: var(--text);
  transition: all 0.3s;
}
.ct-social-btn:hover {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy);
}
.ct-social-btn span { font-weight: 700; }

/* ─── TRUST STRIP ─── */
.ct-trust-strip {
  padding: 4rem;
  background: var(--navy);
  border-top: 1px solid rgba(201,168,76,0.1);
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.ct-trust-strip-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.ct-trust-strip-item {
  display: flex; gap: 1rem; align-items: flex-start;
}
.ct-trust-strip-icon {
  font-size: 28px; flex-shrink: 0;
  margin-top: 2px;
}
.ct-trust-strip-text strong {
  display: block; font-size: 15px;
  color: var(--white); margin-bottom: 4px;
}
.ct-trust-strip-text span {
  font-size: 13px; color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* ─── CONTACT PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .contact-hero-inner {
    grid-template-columns: 1fr;
    padding: 120px 2rem 5rem; gap: 3rem;
  }
  .book-call-section { padding: 5rem 2rem; }
  .book-call-inner { grid-template-columns: 1fr; gap: 3rem; }
  .ct-trust-strip { padding: 3rem 2rem; }
  .ct-trust-strip-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .contact-h1 { font-size: 38px; }
  .contact-hero-actions { flex-direction: column; }
  .contact-hero-actions .btn-gold,
  .contact-hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .contact-trust-row { gap: 1rem; }
  .contact-trust-divider { display: none; }
  .ct-trust-strip-inner { grid-template-columns: 1fr; }
  .ct-social-row { gap: 0.6rem; }
}

/* ═══════════════════════════════════════
   PORTFOLIO PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── HERO ─── */
.pg-hero {
  background: var(--navy);
  position: relative; overflow: hidden;
  padding: 160px 4rem 0;
}
.pg-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.pg-hero-inner {
  max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1;
  padding-bottom: 4rem;
}
.pg-hero-content { max-width: 700px; margin-bottom: 3rem; }
.pg-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 900; color: var(--white);
  line-height: 1.1; margin-bottom: 1.5rem;
}
.pg-h1 em { font-style: normal; color: var(--gold); }
.pg-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.55); max-width: 600px;
}

/* Stats row */
.pg-stats-row {
  display: flex; align-items: center;
  gap: 2rem; flex-wrap: wrap;
  padding: 2rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pg-stat-item { text-align: center; }
.pg-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.pg-stat-lbl {
  display: block; font-size: 12px;
  color: rgba(255,255,255,0.4); margin-top: 4px;
}
.pg-stat-sep {
  width: 1px; height: 40px;
  background: rgba(255,255,255,0.1);
}

/* Confidentiality bar */
.pg-conf-bar {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1rem 4rem;
}
.pg-conf-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 1rem;
}
.pg-conf-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.pg-conf-inner p {
  font-size: 12px; line-height: 1.6;
  color: rgba(255,255,255,0.35);
}
.pg-conf-inner strong { color: rgba(255,255,255,0.55); }

/* ─── FILTER BAR ─── */
.pg-filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 4rem;
  position: sticky; top: 80px; z-index: 800;
}
.pg-filter-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 0; overflow-x: auto;
  scrollbar-width: none;
}
.pg-filter-inner::-webkit-scrollbar { display: none; }
.pg-filter-btn {
  padding: 1.1rem 1.5rem;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--gray-400); cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s;
}
.pg-filter-btn:hover { color: var(--navy); }
.pg-filter-btn--active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 700;
}

/* ─── SERVICE TAGS ─── */
.pg-tag {
  display: inline-block;
  border-radius: 100px; padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border: 1px solid transparent;
}
.pg-tag--seo   { background: rgba(201,168,76,0.15); color: var(--gold); border-color: rgba(201,168,76,0.2); }
.pg-tag--sem   { background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.2); }
.pg-tag--web   { background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(16,185,129,0.2); }
.pg-tag--uiux  { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.2); }
.pg-tag--email { background: rgba(249,115,22,0.15); color: #fb923c; border-color: rgba(249,115,22,0.2); }

/* ─── MAGAZINE GRID ─── */
.pg-grid-section {
  background: var(--gray-100);
  padding: 3rem 4rem 4rem;
}
.pg-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.2rem;
}

/* Right column stack */
.pg-right-stack {
  display: flex; flex-direction: column; gap: 1.2rem;
}

/* ─── CARD BASE ─── */
.pg-card {
  position: relative; border-radius: 20px;
  overflow: hidden; cursor: pointer;
  background: var(--navy);
}

/* Card sizing */
.pg-card--hero { min-height: 520px; }
/* .pg-card--stack { min-height: 246px; } */
.pg-card--stack { min-height: 310px; }
.pg-card--wide-left { min-height: 320px; }
.pg-card--cta { min-height: 320px; }

/* Bottom row spans full width differently */
.pg-grid > .pg-card--wide-left { grid-column: 1; }
.pg-grid > .pg-card--cta { grid-column: 2; }

/* ─── CARD BG ─── */
.pg-card-bg {
  position: absolute; inset: 0;
  background: var(--navy-light);
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.pg-card:hover .pg-card-bg { transform: scale(1.03); }

/* Gradient overlays per client */
.pg-card-bg--iclear {
  background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #152347 100%);
}
.pg-card-bg--hotel {
  background: linear-gradient(135deg, #1a1008 0%, #2d1a0a 50%, #3d2510 100%);
}
.pg-card-bg--pharma {
  background: linear-gradient(135deg, #081628 0%, #0a1f3a 50%, #0f2d4d 100%);
}
.pg-card-bg--drivon {
  background: linear-gradient(135deg, #0D1B3E 0%, #152347 50%, #1e3060 100%);
  background-image:
    linear-gradient(135deg, #0D1B3E 0%, #152347 50%, #1e3060 100%),
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}

/* ─── BROWSER MOCK ─── */
.pg-browser-mock {
  position: absolute;
  top: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: rgba(255,255,255,0.04);
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pg-browser-mock--sm {
  top: 1rem; left: 1rem; right: 1rem;
}
.pg-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25);
}
.pg-browser-url {
  margin-left: 6px; flex: 1;
  font-size: 10px; color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border-radius: 3px; padding: 2px 8px;
}

/* iClear screen */
.pg-browser-screen--iclear {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 1rem;
  min-height: 200px;
}
.pg-bs-nav {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; margin-bottom: 1rem;
}
.pg-bs-nav--light {
  background: rgba(255,255,255,0.15);
}
.pg-bs-hero { margin-bottom: 1rem; }
.pg-bs-eyebrow {
  height: 6px; width: 60%; background: rgba(201,168,76,0.3);
  border-radius: 3px; margin-bottom: 8px;
}
.pg-bs-h1 {
  height: 12px; background: rgba(255,255,255,0.6);
  border-radius: 4px; margin-bottom: 6px;
}
.pg-bs-h1--short { width: 70%; }
.pg-bs-btns { display: flex; gap: 6px; }
.pg-bs-btn-gold {
  height: 18px; width: 70px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 4px;
}
.pg-bs-btn-out {
  height: 18px; width: 60px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
}
.pg-bs-products {
  display: flex; gap: 6px;
}
.pg-bs-product {
  flex: 1; height: 50px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Hotel screen */
.pg-browser-screen--hotel {
  min-height: 130px;
  position: relative; overflow: hidden;
}
.pg-hotel-img {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #3d2510, #5c3818);
  opacity: 0.8;
}
.pg-hotel-gradient {
  position: relative; z-index: 1;
  padding: 1.5rem 1rem 0.5rem;
}
.pg-hotel-title-line {
  height: 10px; background: rgba(255,255,255,0.8);
  border-radius: 4px; margin-bottom: 5px; width: 70%;
}
.pg-hotel-sub-line {
  height: 7px; background: rgba(255,255,255,0.4);
  border-radius: 3px; width: 50%;
}
.pg-hotel-booking {
  position: relative; z-index: 1;
  display: flex; gap: 4px; padding: 0.5rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
}
.pg-hotel-field {
  flex: 1; height: 20px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}
.pg-hotel-book-btn {
  width: 40px; height: 20px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 4px;
}

/* Pharma screen */
.pg-browser-screen--pharma {
  background: linear-gradient(135deg, #081628, #0f2d4d);
  padding: 0.8rem;
  min-height: 130px;
}
.pg-pharma-content { padding: 0.5rem 0; }
.pg-pharma-badge-line {
  height: 6px; width: 50%;
  background: rgba(59,130,246,0.4);
  border-radius: 3px; margin-bottom: 7px;
}
.pg-pharma-h1 {
  height: 10px; background: rgba(255,255,255,0.6);
  border-radius: 4px; margin-bottom: 5px;
}
.pg-pharma-sub {
  height: 7px; width: 80%;
  background: rgba(255,255,255,0.25);
  border-radius: 3px; margin-bottom: 10px;
}
.pg-pharma-btn {
  height: 16px; width: 70px;
  background: rgba(59,130,246,0.5);
  border-radius: 4px;
}

/* Drivon mock */
.pg-drivon-mock {
  position: absolute; inset: 1.5rem;
}
.pg-drivon-topbar {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.pg-drivon-logo-hex {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.pg-drivon-topbar-links {
  display: flex; align-items: center; gap: 8px;
}
.pg-drivon-topbar-links > div {
  width: 24px; height: 5px;
  background: rgba(255,255,255,0.2); border-radius: 3px;
}
.pg-drivon-topbar-cta {
  width: 40px !important; height: 16px !important;
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  border-radius: 4px;
}
.pg-drivon-pill {
  height: 8px; width: 45%;
  background: rgba(201,168,76,0.25);
  border-radius: 4px; margin-bottom: 10px;
}
.pg-drivon-title {
  height: 16px; background: rgba(255,255,255,0.5);
  border-radius: 4px; margin-bottom: 7px;
}
.pg-drivon-title--short { width: 65%; }
.pg-drivon-sub {
  height: 8px; width: 85%;
  background: rgba(255,255,255,0.2);
  border-radius: 3px; margin-bottom: 16px;
}
.pg-drivon-btns { display: flex; gap: 8px; }
.pg-drivon-btn-g {
  height: 20px; width: 80px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 5px;
}
.pg-drivon-btn-o {
  height: 20px; width: 70px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
}

/* ─── RESULT BADGE ─── */
.pg-result-badge {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: rgba(13,27,62,0.9);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px; padding: 0.6rem 1rem;
  text-align: center; backdrop-filter: blur(16px);
  z-index: 5;
}
.pg-result-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.pg-result-lbl {
  display: block; font-size: 10px;
  color: rgba(255,255,255,0.5); margin-top: 2px;
  white-space: nowrap;
}

/* ─── CARD FOOTER (default state) ─── */
.pg-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end;
  justify-content: space-between;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 4;
  transition: opacity 0.35s;
}
.pg-card:hover .pg-card-footer { opacity: 0; pointer-events: none; }
.pg-card-footer-left { display: flex; flex-direction: column; gap: 0.6rem; }
.pg-card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pg-card-client {
  display: flex; align-items: center; gap: 10px;
}
.pg-client-icon { font-size: 20px; }
.pg-client-name {
  font-size: 15px; font-weight: 700; color: var(--white);
}
.pg-client-industry { font-size: 11px; color: rgba(255,255,255,0.5); }
.pg-card-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--white);
  text-decoration: none; flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.pg-card-arrow:hover {
  background: var(--gold);
  border-color: var(--gold); color: var(--navy);
  transform: rotate(-45deg);
}

/* ─── CARD OVERLAY (hover state) ─── */
.pg-card-overlay {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(13,27,62,0.92);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--transition);
}
.pg-card:hover .pg-card-overlay {
  opacity: 1; pointer-events: all;
}
.pg-card-overlay-inner {
  padding: 2rem;
  transform: translateY(12px);
  transition: transform 0.35s var(--transition);
  width: 100%;
}
.pg-card:hover .pg-card-overlay-inner { transform: translateY(0); }
.pg-overlay-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700;
  color: var(--white); margin: 0.8rem 0 1.2rem;
  line-height: 1.3;
}
.pg-card--stack .pg-overlay-title { font-size: 15px; margin-bottom: 0.8rem; }
.pg-overlay-metrics {
  display: flex; gap: 1rem; margin-bottom: 1.5rem;
}
.pg-overlay-metric { text-align: center; }
.pg-overlay-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--gold);
}
.pg-card--stack .pg-overlay-num { font-size: 17px; }
.pg-overlay-lbl {
  font-size: 11px; color: rgba(255,255,255,0.4);
}
.pg-overlay-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pg-overlay-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.3);
}

/* ─── CTA CARD ─── */
.pg-card--cta {
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.pg-cta-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}
.pg-card--cta::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(201,168,76,0.3), transparent 60%);
  z-index: 0;
}
.pg-cta-inner {
  position: relative; z-index: 1;
  text-align: center; padding: 2.5rem 2rem;
}
.pg-cta-icon {
  font-size: 36px; color: var(--gold);
  margin-bottom: 1.2rem; display: block;
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pg-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.pg-cta-title em { font-style: normal; color: var(--gold); }
.pg-cta-body {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,0.5); margin-bottom: 1.8rem;
}
.pg-cta-btn { display: inline-block; }
.pg-cta-note {
  margin-top: 1rem; font-size: 11px;
  color: rgba(255,255,255,0.3);
}

/* Filter hidden state */
.pg-card--hidden {
  display: none;
}

/* ─── INDUSTRIES ─── */
.pg-industries {
  padding: 8rem 4rem;
  background: var(--white);
}
.pg-industries-inner { max-width: 1200px; margin: 0 auto; }
.pg-ind-header { margin-bottom: 3.5rem; }
.pg-ind-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.pg-ind-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s;
}
.pg-ind-card:hover {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-4px);
}
.pg-ind-icon { font-size: 32px; margin-bottom: 0.8rem; }
.pg-ind-name {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
  transition: color 0.3s;
}
.pg-ind-card:hover .pg-ind-name { color: var(--white); }
.pg-ind-tags {
  font-size: 12px; color: var(--gray-400);
  transition: color 0.3s;
}
.pg-ind-card:hover .pg-ind-tags { color: rgba(255,255,255,0.4); }

/* ─── PORTFOLIO RESPONSIVE ─── */
@media (max-width: 1024px) {
  .pg-hero { padding: 120px 2rem 0; }
  .pg-conf-bar { padding: 1rem 2rem; }
  .pg-filter-bar { padding: 0 1rem; }
  .pg-grid-section { padding: 2rem 2rem 3rem; }
  .pg-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .pg-right-stack { flex-direction: row; gap: 1.2rem; }
  /* .pg-card--stack { min-height: 280px; } */
  .pg-card--stack { min-height: 310px; }
  .pg-grid > .pg-card--wide-left { grid-column: 1; }
  .pg-grid > .pg-card--cta { grid-column: 1; }
  .pg-industries { padding: 5rem 2rem; }
  .pg-ind-grid { grid-template-columns: 1fr 1fr; }
  .pg-stats-row { gap: 1.5rem; }
}
@media (max-width: 640px) {
  .pg-h1 { font-size: 40px; }
  .pg-card--hero { min-height: 400px; }
  .pg-right-stack { flex-direction: column; }
  /* .pg-card--stack { min-height: 240px; } */
  .pg-card--stack { min-height: 325px; }
  .pg-card--wide-left { min-height: 280px; }
  .pg-card--cta { min-height: 280px; }
  .pg-stat-sep { display: none; }
  .pg-stats-row { gap: 1.5rem; justify-content: space-between; }
  .pg-ind-grid { grid-template-columns: 1fr; }
  .pg-overlay-title { font-size: 15px; }
}

/* ═══════════════════════════════════════
   CASE STUDY PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── HERO ─── */
.cs-hero {
  background: var(--navy);
  position: relative; overflow: hidden;
  padding-top: 80px;
}
.cs-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}

/* Breadcrumb */
.cs-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.35);
  margin-bottom: 2.5rem;
}
.cs-breadcrumb a {
  color: rgba(255,255,255,0.35); text-decoration: none;
  transition: color 0.2s;
}
.cs-breadcrumb a:hover { color: var(--gold); }
.cs-breadcrumb span { color: rgba(255,255,255,0.2); }

.cs-hero-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 3rem 4rem 0;
  position: relative; z-index: 2;
}
.cs-hero-content {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  padding-bottom: 4rem;
}

/* Client row */
.cs-client-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.2rem;
}
.cs-client-icon { font-size: 32px; }
.cs-client-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: var(--white);
}
.cs-client-meta {
  font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px;
}
.cs-client-link {
  color: var(--gold); text-decoration: none;
  transition: opacity 0.2s;
}
.cs-client-link:hover { opacity: 0.7; }
.cs-service-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* H1 */
.cs-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900; color: var(--white);
  line-height: 1.15; margin-bottom: 1.2rem;
}
.cs-h1 em { font-style: normal; color: var(--gold); }
.cs-hero-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem; max-width: 520px;
}

/* Hero stats */
.cs-hero-stats {
  display: flex; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2rem;
}
.cs-hero-stat { text-align: center; }
.cs-hero-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.cs-hero-stat-num span { font-size: 16px; }
.cs-hero-stat-lbl {
  display: block; font-size: 11px;
  color: rgba(255,255,255,0.4); margin-top: 4px;
}
.cs-hero-stat-sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.1); flex-shrink: 0;
}
.cs-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.cs-btn-outline {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Hero right visual */
.cs-hero-right { position: relative; }
.cs-hero-visual { position: relative; padding: 2rem 3rem 2rem 1rem; }

/* Browser mock */
.cs-browser {
  background: rgba(255,255,255,0.04);
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.cs-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: rgba(0,0,0,0.25);
}
.cs-browser-url {
  flex: 1; font-size: 11px;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border-radius: 4px; padding: 3px 10px;
  margin-left: 6px;
}
.cs-browser-open {
  color: var(--gold); text-decoration: none;
  font-size: 12px; font-weight: 600;
  transition: opacity 0.2s;
}
.cs-browser-open:hover { opacity: 0.7; }
.cs-browser-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 1.5rem; min-height: 220px;
}
.cs-mock-nav {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; margin-bottom: 1.2rem;
}
.cs-mock-hero-block { margin-bottom: 1.2rem; }
.cs-mock-eyebrow {
  height: 6px; width: 55%;
  background: rgba(201,168,76,0.35);
  border-radius: 3px; margin-bottom: 8px;
}
.cs-mock-h1 {
  height: 12px; background: rgba(255,255,255,0.55);
  border-radius: 4px; margin-bottom: 6px;
}
.cs-mock-h1--short { width: 70%; }
.cs-mock-btns { display: flex; gap: 8px; margin-top: 10px; }
.cs-mock-btn-gold {
  height: 20px; width: 75px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 5px;
}
.cs-mock-btn-out {
  height: 20px; width: 65px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
}
.cs-mock-products {
  display: flex; gap: 8px;
}
.cs-mock-product {
  flex: 1; height: 60px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
}

/* Floating badges */
.cs-float-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.cs-float-badge--1 {
  top: 0.5rem; right: 0;
  animation: floatBadge1 4s ease-in-out infinite;
}
.cs-float-badge--2 {
  bottom: 0.5rem; left: -1rem;
  animation: floatBadge2 4s ease-in-out infinite 0.5s;
}
.cs-float-badge-icon { font-size: 20px; }
.cs-float-badge-val {
  font-size: 14px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.cs-float-badge-lbl { font-size: 11px; color: rgba(255,255,255,0.4); }

/* Confidentiality bar */
.cs-conf-bar {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0.9rem 4rem;
}
.cs-conf-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 0.8rem;
  font-size: 12px; color: rgba(255,255,255,0.3);
  line-height: 1.6;
}
.cs-conf-inner strong { color: rgba(255,255,255,0.5); }

/* ─── SECTIONS ─── */
.cs-section { padding: 7rem 4rem; }
.cs-section--light { background: var(--white); }
.cs-section--dark {
  background: var(--navy);
  position: relative; overflow: hidden;
}
.cs-section--dark::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cs-section-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
  position: relative; z-index: 1;
}
.cs-section-inner--centered {
  grid-template-columns: 1fr;
}
.cs-section-num {
  font-family: 'Playfair Display', serif;
  font-size: 80px; font-weight: 900;
  color: var(--gray-200); line-height: 1;
  margin-bottom: -1.5rem; display: flex;
}
.cs-section-num--light { color: rgba(255,255,255,0.08); }
.cs-body {
  font-size: 16px; line-height: 1.85;
  color: var(--gray-600); margin-bottom: 1.2rem;
}
.cs-body--light { color: rgba(255,255,255,0.6); }

/* Challenge cards */
.cs-challenge-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.cs-challenge-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.5rem;
  transition: all 0.3s;
}
.cs-challenge-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.cs-challenge-icon { font-size: 24px; margin-bottom: 0.8rem; }
.cs-challenge-card h4 {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 0.5rem;
}
.cs-challenge-card p { font-size: 13px; line-height: 1.7; color: var(--gray-600); }

/* Process timeline */
.cs-process-timeline {
  display: flex; flex-direction: column;
  gap: 0; position: relative;
}
.cs-process-timeline::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 11px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), rgba(201,168,76,0.1));
}
.cs-process-item {
  display: flex; gap: 1.5rem; align-items: flex-start;
  padding-bottom: 2.5rem; position: relative;
}
.cs-process-item:last-child { padding-bottom: 0; }
.cs-process-dot {
  width: 24px; height: 24px; min-width: 24px;
  border-radius: 50%;
  background: var(--navy-light);
  border: 2px solid rgba(201,168,76,0.3);
  position: relative; z-index: 1;
  transition: border-color 0.3s;
}
.cs-process-dot--gold {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,168,76,0.15);
}
.cs-process-item:hover .cs-process-dot {
  border-color: var(--gold);
}
.cs-process-content { flex: 1; }
.cs-process-phase {
  font-size: 11px; font-weight: 700;
  color: var(--gold); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 6px;
}
.cs-process-title {
  font-size: 16px; font-weight: 700;
  color: var(--white); margin-bottom: 0.8rem;
}
.cs-process-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.cs-process-list li {
  font-size: 13px; color: rgba(255,255,255,0.5);
  padding-left: 1.2rem; position: relative; line-height: 1.5;
}
.cs-process-list li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--gold); font-size: 11px; font-weight: 700;
}
.cs-process-item--featured .cs-process-content {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 12px; padding: 1.2rem;
}

/* Results grid */
.cs-results-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin-bottom: 3rem;
}
.cs-result-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.cs-result-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.cs-result-card:hover {
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.08);
}
.cs-result-card:hover::after { transform: scaleX(1); }
.cs-result-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.25);
}
.cs-result-card--featured .cs-result-num { color: var(--gold); }
.cs-result-card--featured .cs-result-label { color: var(--white); }
.cs-result-card--featured .cs-result-sub { color: rgba(255,255,255,0.4); }
.cs-result-icon { font-size: 28px; margin-bottom: 1rem; }
.cs-result-num {
  font-family: 'Playfair Display', serif;
  font-size: 40px; font-weight: 700;
  color: var(--navy); line-height: 1; margin-bottom: 0.5rem;
}
.cs-result-num span { font-size: 22px; color: var(--gold); }
.cs-result-label {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.cs-result-sub { font-size: 12px; color: var(--gray-400); line-height: 1.4; }

/* Chart */
.cs-chart-section {
  background: var(--navy);
  border-radius: 20px; padding: 2.5rem;
  border: 1px solid rgba(201,168,76,0.15);
}
.cs-chart-header {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; margin-bottom: 2rem;
}
.cs-chart-title {
  font-size: 15px; font-weight: 700; color: var(--white);
}
.cs-chart-note {
  font-size: 11px; color: rgba(255,255,255,0.3);
}
.cs-chart {
  display: flex; gap: 1rem; align-items: flex-end;
  height: 160px; position: relative;
}
.cs-chart-bars {
  display: flex; align-items: flex-end;
  gap: 6px; flex: 1;
  height: 100%;
}
.cs-chart-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(201,168,76,0.15);
  height: var(--h);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  justify-content: center;
  transition: background 0.3s;
}
.cs-chart-bar::after {
  content: '';
  border-radius: 4px 4px 0 0;
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(201,168,76,0.5), rgba(201,168,76,0.15));
  height: 100%;
  animation: barGrow 1.5s var(--transition) forwards;
  transform-origin: bottom; transform: scaleY(0);
}
.cs-chart-bar--gold::after {
  background: linear-gradient(to top, var(--gold), rgba(240,192,64,0.5));
}
.cs-bar-label {
  font-size: 12px; color: rgba(255,255,255,0.8);
  position: absolute; bottom: 2px;
  white-space: nowrap;
  z-index: 9;
}
.cs-chart-y-labels {
  display: flex; flex-direction: column;
  justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,0.2);
  padding-bottom: 4px;
}
.cs-chart-caption {
  font-size: 12px; color: rgba(255,255,255,0.3);
  margin-top: 2rem; text-align: center;
}

/* ─── QUOTE SECTION ─── */
.cs-quote-section {
  background: var(--off-white);
  padding: 7rem 4rem;
}
.cs-quote-inner {
  max-width: 900px; margin: 0 auto;
  text-align: center;
}
.cs-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 80px; line-height: 0.8;
  color: var(--gold); opacity: 0.25;
  margin-bottom: 1.5rem; user-select: none;
}
.cs-quote-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700; color: var(--text);
  line-height: 1.5; font-style: normal;
  margin-bottom: 2.5rem;
}
.cs-quote-author {
  display: flex; align-items: center;
  justify-content: center; gap: 1.2rem;
  flex-wrap: wrap;
}
.cs-quote-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border: 2px solid rgba(201,168,76,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
.cs-quote-name {
  font-size: 15px; font-weight: 700; color: var(--text); text-align: left;
}
.cs-quote-role { font-size: 13px; color: var(--gray-400); text-align: left; }
.cs-quote-link {
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 600;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 100px; padding: 6px 14px;
  transition: all 0.3s; margin-left: auto;
}
.cs-quote-link:hover {
  background: var(--gold-dim);
  border-color: rgba(201,168,76,0.5);
}

/* ─── SERVICES DELIVERED ─── */
.cs-services-section {
  padding: 7rem 4rem;
  background: var(--white);
}
.cs-services-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 6rem; align-items: start;
}
.cs-services-grid {
  display: flex; flex-direction: column; gap: 1.2rem;
}
.cs-service-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  transition: all 0.3s;
}
.cs-service-item:hover {
  border-color: rgba(201,168,76,0.25);
  background: var(--gold-dim);
  transform: translateX(6px);
}
.cs-service-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.cs-service-name {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 3px;
}
.cs-service-desc { font-size: 13px; color: var(--gray-600); line-height: 1.5; }

/* ─── RELATED PROJECTS ─── */
.cs-related-section {
  padding: 7rem 4rem;
  background: var(--off-white);
}
.cs-related-inner { max-width: 1200px; margin: 0 auto; }
.cs-related-header { margin-bottom: 3rem; }
.cs-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.cs-related-card {
  position: relative; border-radius: 20px;
  overflow: hidden; min-height: 230px;
  text-decoration: none; display: block;
  transition: transform 0.35s, box-shadow 0.35s;
}
.cs-related-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.15);
}
.cs-related-bg {
  position: absolute; inset: 0;
  transition: transform 0.5s;
}
.cs-related-card:hover .cs-related-bg { transform: scale(1.05); }
.cs-related-bg--hotel {
  background: linear-gradient(135deg, #1a1008, #3d2510);
}
.cs-related-bg--pharma {
  background: linear-gradient(135deg, #081628, #0f2d4d);
}
.cs-related-bg--drivon {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  background-image:
    linear-gradient(135deg, #0D1B3E, #1e3060),
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: auto, 20px 20px, 20px 20px;
}
.cs-related-content {
  position: relative; z-index: 1;
  padding: 1.5rem;
  display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
}
.cs-related-tags { display: flex; gap: 5px; margin-bottom: 0.8rem; }
.cs-related-client {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0.5rem;
}
.cs-related-client span { font-size: 18px; }
.cs-related-name {
  font-size: 14px; font-weight: 700; color: var(--white);
}
.cs-related-industry { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 5px; }
.cs-related-result {
  font-size: 12px; font-weight: 600; color: var(--gold);
}

/* ─── CASE STUDY RESPONSIVE ─── */
@media (max-width: 1024px) {
  .cs-hero-inner { padding: 2rem 2rem 0; }
  .cs-hero-content { grid-template-columns: 1fr; gap: 3rem; }
  .cs-hero-right { display: none; }
  .cs-conf-bar { padding: 0.9rem 2rem; }
  .cs-section { padding: 5rem 2rem; }
  .cs-section-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cs-challenge-cards { grid-template-columns: 1fr 1fr; }
  .cs-results-grid { grid-template-columns: 1fr 1fr; }
  .cs-services-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cs-related-grid { grid-template-columns: 1fr 1fr; }
  .cs-quote-section { padding: 5rem 2rem; }
  .cs-services-section { padding: 5rem 2rem; }
  .cs-related-section { padding: 5rem 2rem; }
  .cs-hero-stats { gap: 1rem; }
}
@media (max-width: 640px) {
  .cs-h1 { font-size: 30px; }
  .cs-hero-stats { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cs-hero-stat-sep { display: none; }
  .cs-challenge-cards { grid-template-columns: 1fr; }
  .cs-results-grid { grid-template-columns: 1fr; }
  .cs-related-grid { grid-template-columns: 1fr; }
  .cs-quote-text { font-size: 18px; }
  .cs-quote-link { margin-left: 0; }
  .cs-hero-actions { flex-direction: column; }
  .cs-hero-actions .btn-gold,
  .cs-hero-actions .cs-btn-outline { width: 100%; text-align: center; justify-content: center; }
}

/* ═══════════════════════════════════════
   SERVICE INDIVIDUAL PAGE STYLES (shared)
   ═══════════════════════════════════════ */

/* ─── HERO ─── */
.sp-hero {
  background: var(--navy);
  position: relative; overflow: hidden;
  padding-top: 80px; min-height: 100vh;
  display: flex; align-items: center;
}
.sp-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.sp-hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.sp-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.sp-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.1), transparent);
  top: -200px; right: -100px;
}
.sp-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,48,96,0.8), transparent);
  bottom: -100px; left: -100px;
}
.sp-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 4rem 4rem 5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  position: relative; z-index: 2;
}
.sp-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 900; color: var(--white);
  line-height: 1.15; margin-bottom: 1.2rem;
}
.sp-h1 em { font-style: normal; color: var(--gold); }
.sp-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.8rem; max-width: 520px;
}

/* Trust row */
.sp-trust-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 2rem;
}
.sp-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,0.7);
}
.sp-trust-icon { font-size: 14px; flex-shrink: 0; }

/* Hero actions */
.sp-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.sp-btn-outline {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.sp-btn-outline:hover {
  color: var(--gold) !important;
  border-color: rgba(201,168,76,0.5) !important;
}

/* Social proof */
.sp-social-proof {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; flex-wrap: wrap;
}
.sp-proof-avatars { display: flex; }
.sp-proof-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-light), var(--navy-mid));
  border: 2px solid rgba(201,168,76,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
  margin-right: -8px;
}
.sp-proof-text {
  font-size: 13px; color: rgba(255,255,255,0.6); flex: 1;
}
.sp-proof-text strong { color: var(--white); }
.sp-proof-stars { font-size: 13px; color: var(--gold); font-weight: 600; }

/* ─── SERP VISUAL ─── */
.sp-hero-right { position: relative; }
.sp-serp-card {
  background: var(--white);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}
.sp-serp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 1rem 1.2rem;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.sp-serp-logo {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #34a853);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: white;
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
.sp-serp-search {
  flex: 1; background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 100px; padding: 6px 16px;
}
.sp-serp-query { font-size: 13px; color: var(--text); }
.sp-serp-results { padding: 0.8rem; display: flex; flex-direction: column; gap: 4px; }
.sp-serp-result { padding: 0.8rem; border-radius: 8px; }
.sp-serp-result--top {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
}
.sp-serp-result--dim { opacity: 0.4; filter: blur(1px); }
.sp-serp-pos {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.sp-serp-rank {
  font-size: 11px; font-weight: 800;
  color: var(--gold); background: rgba(201,168,76,0.1);
  border-radius: 4px; padding: 2px 6px;
}
.sp-serp-badge {
  font-size: 10px; font-weight: 700;
  color: #28CA41; background: rgba(40,202,65,0.1);
  border-radius: 4px; padding: 2px 6px;
}
.sp-serp-url { font-size: 11px; color: #1a7340; margin-bottom: 2px; }
.sp-serp-title { font-size: 14px; font-weight: 600; color: #1a0dab; margin-bottom: 3px; }
.sp-serp-desc { font-size: 12px; color: var(--gray-600); line-height: 1.4; margin-bottom: 4px; }
.sp-serp-stars-row { font-size: 11px; color: var(--gold); }
.sp-serp-stars-row span { color: var(--gray-600); }
.sp-serp-title-blur { height: 12px; background: var(--gray-200); border-radius: 4px; margin-bottom: 5px; }
.sp-serp-desc-blur { height: 8px; background: var(--gray-100); border-radius: 3px; width: 80%; }

/* Floating badges */
.sp-float-badge {
  position: absolute;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  white-space: nowrap; z-index: 5;
}
.sp-float-badge--1 {
  top: -3rem; right: -1rem;
  animation: floatBadge1 4s ease-in-out infinite;
}
.sp-float-badge--2 {
  bottom: -3rem; left: -1rem;
  animation: floatBadge2 4s ease-in-out infinite 0.5s;
}
.sp-float-icon { font-size: 20px; }
.sp-float-val {
  font-size: 14px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif;
}
.sp-float-lbl { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── PROBLEM SECTION ─── */
.sp-problem {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sp-problem-inner { max-width: 1200px; margin: 0 auto; }
.sp-problem-header { margin-bottom: 3.5rem; }
.sp-problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; margin-bottom: 3rem;
}
.sp-problem-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.8rem;
  transition: all 0.3s;
  border-left: 3px solid transparent;
}
.sp-problem-card:hover {
  border-left-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.sp-problem-icon { font-size: 24px; margin-bottom: 0.8rem; }
.sp-problem-card h3 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.sp-problem-card p { font-size: 13px; line-height: 1.7; color: var(--gray-600); }
.sp-problem-cta {
  text-align: center;
  padding: 2rem;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  display: flex; align-items: center;
  justify-content: center; gap: 2rem; flex-wrap: wrap;
}
.sp-problem-cta p {
  font-size: 17px; font-weight: 600; color: var(--text);
}

/* ─── INCLUDES SECTION ─── */
.sp-includes {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.sp-includes::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.sp-includes-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.sp-includes-header { margin-bottom: 3.5rem; }
.sp-includes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-include-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2rem;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.sp-include-card:hover {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-6px);
}
.sp-include-num {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 900;
  color: rgba(255,255,255,0.05);
  position: absolute; top: 1rem; right: 1.5rem;
  line-height: 1;
}
.sp-include-icon { font-size: 28px; margin-bottom: 1rem; }
.sp-include-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--white); margin-bottom: 0.8rem;
}
.sp-include-card p {
  font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,0.5); margin-bottom: 1.2rem;
}
.sp-include-card ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.sp-include-card li {
  font-size: 12px; color: rgba(255,255,255,0.4);
  padding-left: 1rem; position: relative;
}
.sp-include-card li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--gold); font-size: 10px; font-weight: 700;
}

/* ─── PROOF SECTION ─── */
.sp-proof-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.sp-proof-inner { max-width: 1200px; margin: 0 auto; }
.sp-proof-header { margin-bottom: 3.5rem; }
.sp-case-preview {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}
.sp-case-client-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.sp-case-icon { font-size: 32px; }
.sp-case-client { font-size: 16px; font-weight: 700; color: var(--text); }
.sp-case-industry { font-size: 12px; color: var(--gray-400); }
.sp-case-link {
  margin-left: auto;
  color: var(--gold); text-decoration: none;
  font-size: 12px; font-weight: 600;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 100px; padding: 5px 12px;
  transition: all 0.3s;
}
.sp-case-link:hover { background: var(--gold-dim); }
.sp-case-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--text); line-height: 1.3;
  margin-bottom: 1.2rem;
}
.sp-case-title em { font-style: normal; color: var(--gold); }
.sp-case-body {
  font-size: 15px; line-height: 1.8;
  color: var(--gray-600); margin-bottom: 1rem;
}
.sp-case-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem; margin: 2rem 0 1rem;
}
.sp-case-metric {
  text-align: center;
  background: var(--gray-100);
  border-radius: 10px; padding: 1rem 0.5rem;
  border: 1px solid var(--gray-200);
}
.sp-case-metric-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--navy);
}
.sp-case-metric-lbl {
  display: block; font-size: 11px;
  color: var(--gray-400); margin-top: 3px; line-height: 1.3;
}
.sp-case-conf-note {
  font-size: 12px; color: var(--gray-400);
  padding: 8px 12px;
  background: var(--gray-100);
  border-radius: 8px; display: inline-block;
}

/* Growth chart */
.sp-growth-chart {
  background: var(--navy);
  border-radius: 16px; padding: 1.5rem;
  border: 1px solid rgba(201,168,76,0.15);
  margin-bottom: 1.5rem;
}
.sp-growth-chart-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 1.5rem;
  font-size: 13px; font-weight: 600; color: var(--white);
}
.sp-growth-chart-note { font-size: 11px; color: rgba(255,255,255,0.3); font-weight: 400; }
.sp-growth-bars {
  display: flex; align-items: flex-end;
  gap: 8px; height: 120px;
}
.sp-growth-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(201,168,76,0.15);
  height: var(--h); position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.sp-growth-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(201,168,76,0.5), rgba(201,168,76,0.15));
  height: 100%;
  animation: barGrow 1.5s var(--transition) forwards;
  transform-origin: bottom; transform: scaleY(0);
}
.sp-growth-bar--gold::after {
  background: linear-gradient(to top, var(--gold), rgba(240,192,64,0.4));
}
.sp-growth-bar span {
  font-size: 9px; color: rgba(255,255,255,0.3);
  position: absolute; bottom: -16px; white-space: nowrap;
}

/* Case quote */
.sp-case-quote {
  background: var(--off-white);
  border-radius: 16px; padding: 1.8rem;
  border-left: 3px solid var(--gold);
  position: relative;
}
.sp-case-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 40px; line-height: 0.8;
  color: var(--gold); opacity: 0.3; margin-bottom: 0.5rem;
}
.sp-case-quote p {
  font-size: 14px; line-height: 1.7;
  color: var(--gray-600); font-style: italic; margin-bottom: 0.8rem;
}
.sp-case-quote-author { font-size: 12px; font-weight: 600; color: var(--gray-400); }

/* ─── PROCESS ─── */
.sp-process {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sp-process-inner { max-width: 1200px; margin: 0 auto; }
.sp-process-header { margin-bottom: 4rem; }
.sp-process-steps {
  display: flex; align-items: flex-start;
  gap: 0; position: relative;
}
.sp-process-step {
  flex: 1; text-align: center;
  padding: 0 1rem;
}
.sp-process-step-num {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--navy);
  margin: 0 auto 1.2rem;
  box-shadow: 0 8px 24px rgba(201,168,76,0.25);
  position: relative; z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}
.sp-process-step:hover .sp-process-step-num {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(201,168,76,0.35);
}
.sp-process-step-body h3 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 0.5rem;
}
.sp-process-step-body p {
  font-size: 13px; line-height: 1.6; color: var(--gray-600);
}
.sp-process-time {
  display: inline-block; margin-top: 0.8rem;
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; color: var(--gold);
}
.sp-process-connector {
  width: 40px; height: 2px; flex-shrink: 0;
  background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0.2));
  margin-top: 32px; opacity: 0.4;
}

/* ─── PRICING ─── */
.sp-pricing {
  padding: 8rem 4rem;
  background: var(--white);
}
.sp-pricing-inner { max-width: 1200px; margin: 0 auto; }
.sp-pricing-header { margin-bottom: 3.5rem; }
.sp-pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-bottom: 2rem;
  align-items: start;
}
.sp-price-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2.5rem 2rem;
  position: relative; transition: all 0.3s;
}
.sp-price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.08);
}
.sp-price-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.2);
}
.sp-price-card--featured:hover { transform: translateY(-14px); }
.sp-price-popular {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); font-size: 11px; font-weight: 700;
  padding: 4px 16px; border-radius: 100px;
  letter-spacing: 0.5px; white-space: nowrap;
}
.sp-price-plan {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.sp-price-card--featured .sp-price-plan { color: var(--white); }
.sp-price-for {
  font-size: 12px; color: var(--gray-400);
  margin-bottom: 1.5rem;
}
.sp-price-card--featured .sp-price-for { color: rgba(255,255,255,0.4); }
.sp-price-card-header { margin-bottom: 1.5rem; }
.sp-price-amount {
  display: flex; align-items: baseline;
  gap: 4px; margin-bottom: 4px; flex-wrap: wrap;
}
.sp-price-from {
  font-size: 12px; color: var(--gray-400);
}
.sp-price-card--featured .sp-price-from { color: rgba(255,255,255,0.4); }
.sp-price-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: var(--navy);
}
.sp-price-card--featured .sp-price-num { color: var(--gold); }
.sp-price-period { font-size: 13px; color: var(--gray-400); }
.sp-price-card--featured .sp-price-period { color: rgba(255,255,255,0.4); }
.sp-price-commitment {
  font-size: 11px; color: var(--gray-400);
  margin-bottom: 1.5rem;
}
.sp-price-card--featured .sp-price-commitment { color: rgba(255,255,255,0.3); }
.sp-price-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 2rem;
}
.sp-price-features li {
  font-size: 13px; color: var(--gray-600);
  padding-left: 0;
}
.sp-price-card--featured .sp-price-features li { color: rgba(255,255,255,0.65); }
.sp-price-feature--no { opacity: 0.4; }
.sp-price-cta {
  display: block; text-align: center;
  padding: 14px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  text-decoration: none; transition: all 0.3s;
}
.sp-price-cta--gold {
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy);
}
.sp-price-cta--gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.3); }
.sp-price-cta--outline {
  background: transparent;
  color: var(--gray-400); border: 1.5px solid var(--gray-200);
}
.sp-price-card--featured .sp-price-cta--outline {
  color: var(--white); border-color: rgba(255,255,255,0.2);
}
.sp-price-cta--outline:hover { border-color: var(--gold); color: var(--gold); }

/* Pricing note */
.sp-pricing-note {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.5rem 2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 14px; flex-wrap: wrap;
}
.sp-pricing-note p { font-size: 14px; color: var(--gray-600); flex: 1; }
.sp-pricing-note strong { color: var(--text); }
.sp-pricing-note-link {
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 700;
  white-space: nowrap; transition: opacity 0.2s;
}
.sp-pricing-note-link:hover { opacity: 0.7; }

/* ─── WHY SECTION ─── */
.sp-why {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sp-why-inner { max-width: 1200px; margin: 0 auto; }
.sp-why-header { margin-bottom: 3.5rem; }
.sp-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-why-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s;
}
.sp-why-item:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.sp-why-icon { font-size: 28px; margin-bottom: 1rem; }
.sp-why-item h4 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.sp-why-item p { font-size: 13px; line-height: 1.7; color: var(--gray-600); }

/* ─── AUDIT CTA SECTION ─── */
.sp-audit-cta {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.sp-audit-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.sp-audit-cta-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
.sp-audit-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.sp-audit-h2 em { font-style: normal; color: var(--gold); }
.sp-audit-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.55); margin-bottom: 2rem;
}
.sp-audit-includes {
  display: flex; flex-direction: column; gap: 8px;
}
.sp-audit-include {
  font-size: 14px; color: rgba(255,255,255,0.7);
  display: flex; align-items: center; gap: 8px;
}

/* Audit form card */
.sp-audit-form-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.sp-audit-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.sp-audit-form-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.sp-audit-form-card p {
  font-size: 13px; color: var(--gray-400); margin-bottom: 1.5rem;
}

/* ─── RELATED SERVICES ─── */
.sp-related-services {
  padding: 8rem 4rem;
  background: var(--white);
}
.sp-related-services-inner { max-width: 1200px; margin: 0 auto; }
.sp-related-services-header { margin-bottom: 3rem; }
.sp-related-services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-related-svc-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  text-decoration: none;
  display: block; transition: all 0.3s;
}
.sp-related-svc-card:hover {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.15);
}
.sp-related-svc-icon { font-size: 28px; margin-bottom: 1rem; }
.sp-related-svc-card h3 {
  font-size: 17px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
  transition: color 0.3s;
}
.sp-related-svc-card:hover h3 { color: var(--white); }
.sp-related-svc-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); margin-bottom: 1.2rem;
  transition: color 0.3s;
}
.sp-related-svc-card:hover p { color: rgba(255,255,255,0.5); }
.sp-related-svc-link {
  font-size: 13px; font-weight: 600;
  color: var(--gold);
}

/* ─── SERVICE PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .sp-hero-inner { grid-template-columns: 1fr; padding: 3rem 2rem 4rem; gap: 3rem; }
  .sp-hero-right { display: none; }
  .sp-problem { padding: 5rem 2rem; }
  .sp-problem-grid { grid-template-columns: 1fr 1fr; }
  .sp-includes { padding: 5rem 2rem; }
  .sp-includes-grid { grid-template-columns: 1fr 1fr; }
  .sp-proof-section { padding: 5rem 2rem; }
  .sp-case-preview { grid-template-columns: 1fr; gap: 3rem; }
  .sp-process { padding: 5rem 2rem; }
  .sp-process-steps { flex-direction: column; align-items: center; }
  .sp-process-connector { width: 2px; height: 30px; background: linear-gradient(to bottom, var(--gold), rgba(201,168,76,0.2)); margin: 0; }
  .sp-pricing { padding: 5rem 2rem; }
  /* .sp-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } */
  .sp-pricing-grid { grid-template-columns: 1fr 1fr; margin-left: auto; margin-right: auto; }
  .sp-price-card--featured { transform: none; }
  .sp-why { padding: 5rem 2rem; }
  .sp-why-grid { grid-template-columns: 1fr 1fr; }
  .sp-audit-cta { padding: 5rem 2rem; }
  .sp-audit-cta-inner { grid-template-columns: 1fr; gap: 3rem; }
  .sp-related-services { padding: 5rem 2rem; }
  .sp-related-services-grid { grid-template-columns: 1fr 1fr; }
  .sp-case-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sp-h1 { font-size: 30px; }
  .sp-problem-grid { grid-template-columns: 1fr; }
  .sp-includes-grid { grid-template-columns: 1fr; }
  .sp-why-grid { grid-template-columns: 1fr; }
  .sp-hero-actions { flex-direction: column; }
  .sp-hero-actions .btn-gold,
  .sp-hero-actions .sp-btn-outline { width: 100%; text-align: center; justify-content: center; }
  .sp-case-metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .sp-related-services-grid { grid-template-columns: 1fr; }
  .sp-pricing-grid { grid-template-columns: 1fr; }
}



/* ═══════════════════════════════════════
   SEM / GOOGLE ADS PAGE SPECIFIC STYLES
   ═══════════════════════════════════════ */

/* ─── ROAS VISUAL CARD ─── */
.sem-roas-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 1.8rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.sem-roas-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sem-roas-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sem-roas-title {
  font-size: 13px; font-weight: 700; color: var(--white); flex: 1;
}
.sem-roas-period { font-size: 11px; color: rgba(255,255,255,0.3); }

.sem-roas-metrics {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; justify-content: space-between;
}
.sem-roas-metric { text-align: center; }
.sem-roas-metric-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.sem-roas-metric-val {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--white);
}
.sem-roas-metric-val--gold { color: var(--gold); }
.sem-roas-metric--gold .sem-roas-metric-val { color: var(--gold); }
.sem-roas-arrow { font-size: 18px; color: rgba(255,255,255,0.2); }

.sem-roas-display {
  text-align: center; padding: 1.2rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 14px; margin-bottom: 1.5rem;
}
.sem-roas-num {
  font-family: 'Playfair Display', serif;
  font-size: 52px; font-weight: 900; color: var(--gold); line-height: 1;
}
.sem-roas-num span { font-size: 28px; }
.sem-roas-lbl { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 4px; }

.sem-roas-bars { display: flex; flex-direction: column; gap: 10px; }
.sem-roas-bar-wrap {
  display: flex; align-items: center; gap: 10px;
}
.sem-roas-bar-label {
  font-size: 11px; color: rgba(255,255,255,0.4);
  width: 80px; flex-shrink: 0; text-align: right;
}
.sem-roas-bar {
  flex: 1; height: 8px;
  background: rgba(255,255,255,0.06); border-radius: 4px;
  overflow: hidden;
}
.sem-roas-bar-fill {
  height: 100%; width: var(--w);
  background: linear-gradient(90deg, var(--gold), rgba(240,192,64,0.6));
  border-radius: 4px;
  animation: barGrowH 1.2s var(--transition) forwards;
  transform-origin: left; transform: scaleX(0);
}
.sem-roas-bar-fill--good {
  background: linear-gradient(90deg, #28CA41, rgba(40,202,65,0.5));
}
@keyframes barGrowH { to { transform: scaleX(1); } }
.sem-roas-bar-val {
  font-size: 12px; font-weight: 700; color: var(--gold);
  width: 36px; flex-shrink: 0;
}
.sem-roas-bar-val--good { color: #28CA41; }

/* ─── COMPARISON CARD ─── */
.sem-comparison-card {
  background: var(--navy);
  border-radius: 16px; padding: 1.8rem;
  border: 1px solid rgba(201,168,76,0.15);
  margin-bottom: 1.5rem;
}
.sem-comparison-header {
  font-size: 14px; font-weight: 700; color: var(--white);
  margin-bottom: 1.5rem;
}
.sem-comparison-bars { display: flex; flex-direction: column; gap: 1rem; }
.sem-comp-item { display: flex; align-items: center; gap: 1rem; }
.sem-comp-label {
  font-size: 12px; color: rgba(255,255,255,0.5);
  width: 90px; flex-shrink: 0;
}
.sem-comp-bar-wrap { flex: 1; }
.sem-comp-bar {
  height: 36px; border-radius: 8px;
  width: var(--w); display: flex; align-items: center;
  padding: 0 12px; position: relative;
  overflow: hidden;
  animation: barGrowH 1.2s var(--transition) forwards;
  transform-origin: left; transform: scaleX(0);
}
.sem-comp-bar--before {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}
.sem-comp-bar--after {
  background: linear-gradient(90deg, rgba(201,168,76,0.3), rgba(201,168,76,0.1));
  border: 1px solid rgba(201,168,76,0.3);
}
.sem-comp-bar span {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700;
  color: var(--white); position: relative; z-index: 1;
}
.sem-comp-bar--after span { color: var(--gold); }
.sem-comparison-note {
  font-size: 12px; color: rgba(255,255,255,0.4);
  text-align: center; margin-top: 1rem;
}

/* ─── CAMPAIGN TYPES SECTION ─── */
.sem-campaign-types {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sem-campaign-inner { max-width: 1200px; margin: 0 auto; }
.sem-campaign-header { margin-bottom: 3.5rem; }
.sem-campaign-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.sem-campaign-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s;
}
.sem-campaign-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.sem-campaign-icon { font-size: 28px; margin-bottom: 1rem; }
.sem-campaign-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.sem-campaign-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); margin-bottom: 1rem;
}
.sem-campaign-best-for {
  font-size: 11px; font-weight: 600;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px; padding: 6px 10px;
}

/* ─── SEM RESPONSIVE ─── */
@media (max-width: 1024px) {
  .sem-campaign-types { padding: 5rem 2rem; }
  .sem-campaign-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sem-campaign-grid { grid-template-columns: 1fr; }
  .sem-roas-metrics { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════
   WEB DEVELOPMENT PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── HERO WEBSITE PREVIEW ─── */
.web-preview-wrap {
  position: relative;
  padding: 1rem 2rem 1rem 0;
}
.web-desktop-preview {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.web-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: rgba(0,0,0,0.25);
}
.web-browser-url {
  flex: 1; font-size: 11px;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border-radius: 4px; padding: 3px 10px; margin-left: 6px;
}
.web-browser-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 1.2rem; min-height: 200px;
}
.web-mock-nav {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 1.5rem;
}
.web-mock-logo {
  width: 60px; height: 8px;
  background: linear-gradient(90deg, #F0C040, #C9A84C);
  border-radius: 4px;
}
.web-mock-nav-links {
  display: flex; align-items: center; gap: 8px;
}
.web-mock-nav-links > div {
  width: 24px; height: 6px;
  background: rgba(255,255,255,0.2); border-radius: 3px;
}
.web-mock-nav-cta {
  width: 48px !important; height: 16px !important;
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  border-radius: 4px;
}
.web-mock-hero-content { margin-bottom: 1.2rem; }
.web-mock-eyebrow {
  height: 6px; width: 40%;
  background: rgba(201,168,76,0.35);
  border-radius: 3px; margin-bottom: 8px;
}
.web-mock-h1 {
  height: 12px; background: rgba(255,255,255,0.5);
  border-radius: 4px; margin-bottom: 6px;
}
.web-mock-h1--short { width: 70%; }
.web-mock-sub {
  height: 7px; width: 85%;
  background: rgba(255,255,255,0.2);
  border-radius: 3px; margin-bottom: 12px;
}
.web-mock-actions { display: flex; gap: 8px; }
.web-mock-btn-gold {
  height: 18px; width: 70px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 4px;
}
.web-mock-btn-out {
  height: 18px; width: 60px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
}
.web-mock-cards-row { display: flex; gap: 8px; }
.web-mock-card {
  flex: 1; height: 50px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
}

/* Mobile preview */
.web-mobile-preview {
  position: absolute; bottom: -1rem; right: -0.5rem;
  width: 100px;
  background: linear-gradient(135deg, #1a1a2e, #0D1B3E);
  border-radius: 16px;
  border: 2px solid rgba(201,168,76,0.2);
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.web-mobile-notch {
  width: 30px; height: 5px;
  background: rgba(201,168,76,0.3);
  border-radius: 3px; margin: 0 auto 6px;
}
.web-mobile-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  border-radius: 8px; padding: 8px; min-height: 140px;
}
.web-mob-nav {
  height: 5px; background: rgba(255,255,255,0.1);
  border-radius: 3px; margin-bottom: 10px;
}
.web-mob-hero { margin-bottom: 8px; }
.web-mob-h1 {
  height: 7px; background: rgba(255,255,255,0.4);
  border-radius: 3px; margin-bottom: 4px;
}
.web-mob-h1--short { width: 70%; }
.web-mob-btn {
  height: 12px; width: 60px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 3px; margin-top: 8px;
}
.web-mob-cards { display: flex; flex-direction: column; gap: 4px; }
.web-mob-card {
  height: 24px; background: rgba(255,255,255,0.06);
  border-radius: 4px;
}

/* PageSpeed badge */
.web-score-badge {
  position: absolute; top: 0; right: 0;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 5;
}
.web-score-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(#28CA41 98%, rgba(255,255,255,0.1) 0);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #28CA41;
  font-family: 'Playfair Display', serif;
}
.web-score-label { font-size: 12px; font-weight: 600; color: var(--white); }
.web-score-sub { font-size: 10px; color: rgba(255,255,255,0.4); }

/* ─── TECH STACK SECTION ─── */
.web-tech-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.web-tech-inner { max-width: 1200px; margin: 0 auto; }
.web-tech-header { margin-bottom: 3.5rem; }
.web-tech-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.web-tech-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s;
}
.web-tech-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.web-tech-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
}
.web-tech-card--featured h3 { color: var(--white); }
.web-tech-card--featured p { color: rgba(255,255,255,0.55); }
.web-tech-card--featured .web-tech-best-for {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.2);
  color: var(--gold);
}
.web-tech-card--featured .web-tech-examples { color: rgba(255,255,255,0.3); }
.web-tech-icon { font-size: 28px; margin-bottom: 1rem; }
.web-tech-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.web-tech-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); margin-bottom: 1rem;
}
.web-tech-best-for {
  font-size: 11px; color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px; padding: 6px 10px;
  margin-bottom: 0.5rem;
}
.web-tech-examples {
  font-size: 11px; color: var(--gray-400); font-style: italic;
}

/* ─── WEBSITE TYPES SECTION ─── */
.web-types-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.web-types-inner { max-width: 1200px; margin: 0 auto; }
.web-types-header { margin-bottom: 3.5rem; }
.web-types-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.web-type-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s; display: flex;
  flex-direction: column; gap: 0.8rem;
}
.web-type-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.web-type-card--dark {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
}
.web-type-card--dark h3 { color: var(--white); }
.web-type-card--dark p { color: rgba(255,255,255,0.55); }
.web-type-icon { font-size: 28px; }
.web-type-card h3 {
  font-size: 16px; font-weight: 700; color: var(--text);
}
.web-type-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); flex: 1;
}
.web-type-meta {
  display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.web-type-card--dark .web-type-meta {
  border-top-color: rgba(255,255,255,0.08);
}
.web-type-time {
  font-size: 12px; color: var(--gray-400);
}
.web-type-card--dark .web-type-time { color: rgba(255,255,255,0.4); }
.web-type-price {
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.web-type-price--gold { color: var(--gold); }
.web-type-cta {
  display: inline-block; margin-top: 0.5rem;
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: gap 0.3s;
}
.web-type-cta:hover { opacity: 0.8; }

/* ─── PORTFOLIO PREVIEW ─── */
.web-portfolio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.web-port-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; overflow: hidden;
  transition: all 0.35s;
  display: flex; flex-direction: column;
}
.web-port-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.2);
}
.web-port-card-top { flex-shrink: 0; }
.web-port-browser {
  background: rgba(13,27,62,0.97);
  overflow: hidden;
}
.web-port-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; background: rgba(0,0,0,0.2);
  font-size: 11px; color: rgba(255,255,255,0.3);
}
.web-port-visit {
  margin-left: auto; color: var(--gold);
  text-decoration: none; font-size: 11px; font-weight: 600;
}

/* Hotel screen */
.web-port-screen--hotel {
  min-height: 120px; position: relative; overflow: hidden;
}
.web-port-hotel-img {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1008, #3d2510);
}
.web-port-hotel-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 4px; padding: 8px;
  background: rgba(0,0,0,0.5);
}
.web-port-hotel-field {
  flex: 1; height: 16px;
  background: rgba(255,255,255,0.15); border-radius: 3px;
}
.web-port-hotel-btn {
  width: 32px; height: 16px;
  background: linear-gradient(135deg, #F0C040, #C9A84C); border-radius: 3px;
}

/* Pharma screen */
.web-port-screen--pharma {
  background: linear-gradient(135deg, #081628, #0f2d4d);
  padding: 0.8rem; min-height: 120px;
}
.web-port-pharma-nav {
  height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 3px; margin-bottom: 10px;
}
.web-port-pharma-badge {
  height: 5px; width: 40%;
  background: rgba(59,130,246,0.4);
  border-radius: 3px; margin-bottom: 6px;
}
.web-port-pharma-h1 {
  height: 9px; background: rgba(255,255,255,0.5);
  border-radius: 3px; margin-bottom: 5px;
}
.web-port-pharma-sub {
  height: 6px; width: 75%;
  background: rgba(255,255,255,0.2);
  border-radius: 3px; margin-bottom: 8px;
}
.web-port-pharma-btn {
  height: 14px; width: 55px;
  background: rgba(59,130,246,0.5); border-radius: 3px;
}

/* Drivon screen */
.web-port-screen--drivon {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 0.8rem; min-height: 120px;
  background-image:
    linear-gradient(135deg, #0D1B3E, #1e3060),
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: auto, 15px 15px, 15px 15px;
}
.web-port-drivon-nav {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.web-port-drivon-logo {
  width: 20px; height: 20px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.web-port-drivon-links { display: flex; align-items: center; gap: 5px; }
.web-port-drivon-links > div {
  width: 16px; height: 4px;
  background: rgba(255,255,255,0.2); border-radius: 2px;
}
.web-port-drivon-cta {
  width: 28px !important; height: 10px !important;
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  border-radius: 3px;
}
.web-port-drivon-h1 {
  height: 8px; background: rgba(255,255,255,0.5);
  border-radius: 3px; margin-bottom: 5px;
}
.web-port-drivon-h1--short { width: 65%; }
.web-port-drivon-actions { display: flex; gap: 5px; margin-top: 8px; }
.web-port-drivon-btn-g {
  height: 12px; width: 45px;
  background: linear-gradient(135deg, #F0C040, #C9A84C); border-radius: 3px;
}
.web-port-drivon-btn-o {
  height: 12px; width: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
}
.web-port-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.web-port-title {
  font-size: 17px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.web-port-desc {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); flex: 1; margin-bottom: 1rem;
}
.web-port-meta {
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 1rem; font-size: 12px; color: var(--gray-400);
}
.web-port-link {
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: opacity 0.2s;
}
.web-port-link:hover { opacity: 0.7; }

/* ─── ADD-ONS SECTION ─── */
.web-addons-section {
  padding: 6rem 4rem;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
.web-addons-inner { max-width: 1200px; margin: 0 auto; }
.web-addons-header { margin-bottom: 3rem; }
.web-addons-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--gray-200);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--gray-200);
}
.web-addon-item {
  display: flex; align-items: flex-start;
  gap: 1rem; padding: 1.8rem;
  background: var(--white);
  transition: background 0.3s;
}
.web-addon-item:hover { background: var(--gray-100); }
.web-addon-item--cta {
  background: var(--navy);
  flex-direction: column; gap: 0.8rem;
}
.web-addon-item--cta:hover { background: var(--navy-light); }
.web-addon-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.web-addon-body { flex: 1; }
.web-addon-name {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.web-addon-item--cta .web-addon-name { color: var(--white); }
.web-addon-desc {
  font-size: 12px; line-height: 1.6; color: var(--gray-600);
}
.web-addon-item--cta .web-addon-desc { color: rgba(255,255,255,0.5); }
.web-addon-price {
  font-size: 14px; font-weight: 700;
  color: var(--navy); white-space: nowrap; flex-shrink: 0;
  /* align-self: center; */
}
.web-addon-price span {
  font-size: 11px; font-weight: 400; color: var(--gray-400);
}
.web-addon-cta-btn {
  display: inline-block; margin-top: auto;
  padding: 10px 18px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.web-addon-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201,168,76,0.3);
}

/* ─── WEB PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .web-tech-section { padding: 5rem 2rem; }
  .web-tech-grid { grid-template-columns: 1fr 1fr; }
  .web-types-section { padding: 5rem 2rem; }
  .web-types-grid { grid-template-columns: 1fr 1fr; }
  .web-portfolio-grid { grid-template-columns: 1fr; }
  .web-addons-section { padding: 4rem 2rem; }
  .web-addons-grid { grid-template-columns: 1fr 1fr; }
  .web-mobile-preview { display: none; }
}
@media (max-width: 640px) {
  .web-tech-grid { grid-template-columns: 1fr; }
  .web-types-grid { grid-template-columns: 1fr; }
  .web-addons-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   ERROR PAGES (500 + 404 shared styles)
   ═══════════════════════════════════════ */

.error-page {
  min-height: 100vh;
  background: var(--navy);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding-top: 80px;
}
.error-page-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.error-page-inner {
  max-width: 900px; margin: 0 auto;
  padding: 4rem;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  position: relative; z-index: 1; gap: 2.5rem;
}

/* Visual */
.error-visual { position: relative; }
.error-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(100px, 18vw, 200px);
  font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
.error-num::after {
  content: attr(data-num);
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.15;
}
.error-icon-row {
  display: flex; justify-content: center;
  gap: 1rem; margin-top: -1rem;
  font-size: 32px;
}
.error-icon { display: inline-block; }
.error-icon--spin {
  animation: spin 3s linear infinite;
}
.error-icon--spin-slow {
  animation: spin 5s linear infinite reverse;
}

/* Content */
.error-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.error-h1 em { font-style: normal; color: var(--gold); }
.error-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6); max-width: 580px;
  margin: 0 auto 2rem;
}
.error-actions {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.error-btn-outline {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Quick links */
.error-quick-links p {
  font-size: 13px; color: rgba(255,255,255,0.35);
  margin-bottom: 0.8rem;
}
.error-links-row {
  display: flex; gap: 1.5rem;
  justify-content: center; flex-wrap: wrap;
}
.error-links-row a {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-decoration: none; transition: color 0.2s;
}
.error-links-row a:hover { color: var(--gold); }

/* Status note */
.error-status-note {
  display: flex; align-items: flex-start;
  gap: 0.8rem; padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; max-width: 500px;
  margin-top: 1rem;
}
.error-status-note span { font-size: 18px; flex-shrink: 0; }
.error-status-note p {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.4); text-align: left;
}

@media (max-width: 640px) {
  .error-page-inner { padding: 2rem; }
  .error-actions { flex-direction: column; align-items: center; }
  .error-actions .btn-gold,
  .error-actions .error-btn-outline { width: 100%; text-align: center; justify-content: center; }
}

/* ═══════════════════════════════════════
   FREE AUDIT SECTION
   Replaces newsletter section sitewide
   ═══════════════════════════════════════ */

.free-audit-section {
  padding: 7rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.free-audit-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.free-audit-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}

/* Left — copy */
.free-audit-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 6px 16px;
  font-size: 12px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 1.2rem;
}
.free-audit-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.free-audit-h2 em { font-style: normal; color: var(--gold); }
.free-audit-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2rem; max-width: 480px;
}

/* What's included list */
.free-audit-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 2rem;
}
.free-audit-list-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,0.75);
}
.free-audit-list-item::before {
  content: '✓';
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--gold);
  flex-shrink: 0;
}

/* Trust signals row below the list */
.free-audit-trust {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.free-audit-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.35);
}
.free-audit-trust-icon { font-size: 14px; }

/* Right — form card */
.free-audit-form-wrap {
  background: var(--white);
  border-radius: 24px; padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.free-audit-form-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.free-audit-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.free-audit-form-sub {
  font-size: 13px; color: var(--gray-400);
  margin-bottom: 1.8rem;
}

/* Compact two-column form layout */
.free-audit-form-wrap .form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.free-audit-form-wrap .form-group {
  margin-bottom: 0.8rem;
}
.free-audit-form-wrap .form-group label {
  font-size: 12px;
}
.free-audit-form-wrap .form-group input,
.free-audit-form-wrap .form-group select {
  padding: 10px 12px;
  font-size: 13px;
}

/* Audit type selector — toggle pills */
.audit-type-row {
  display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap;
}
.audit-type-btn {
  flex: 1; min-width: 120px;
  padding: 8px 12px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--gray-400);
  cursor: pointer; text-align: center;
  transition: all 0.25s;
}
.audit-type-btn.active,
.audit-type-btn:hover {
  background: var(--navy);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}
.audit-type-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 6px;
  display: block;
}

/* Result promise strip at bottom of form */
.free-audit-promise {
  display: flex; align-items: center; gap: 8px;
  margin-top: 1rem; padding: 0.8rem;
  background: var(--gray-100); border-radius: 8px;
}
.free-audit-promise span { font-size: 16px; flex-shrink: 0; }
.free-audit-promise p {
  font-size: 12px; color: var(--gray-600); line-height: 1.4;
}
.free-audit-promise strong { color: var(--text); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .free-audit-section { padding: 5rem 2rem; }
  .free-audit-inner { grid-template-columns: 1fr; gap: 3rem; }
  .free-audit-sub { max-width: 100%; }
}
@media (max-width: 640px) {
  .free-audit-h2 { font-size: 28px; }
  .free-audit-form-wrap { padding: 1.8rem; }
  .free-audit-form-wrap .form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   PORTFOLIO — MORE WORK SECTION
   ═══════════════════════════════════════ */

.pg-more-work {
  padding: 6rem 4rem;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
.pg-more-work-inner { max-width: 1200px; margin: 0 auto; }
.pg-more-work-header { margin-bottom: 2rem; }

/* Filter bar */
.pg-more-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.pg-more-filter-btn {
  padding: 7px 16px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--gray-400); cursor: pointer;
  transition: all 0.25s; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pg-more-filter-btn:hover,
.pg-more-filter-btn--active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
}
.pg-more-filter-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Grid */
.pg-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* Card */
.pg-more-card {
  position: relative; border-radius: 16px;
  overflow: hidden; min-height: 280px;
  background: var(--navy);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pg-more-card-link {
  display: block; height: 100%;
  position: absolute; inset: 0;
  text-decoration: none;
}
.pg-more-card-bg {
  position: absolute; inset: 0;
  transition: transform 0.5s var(--transition);
}
.pg-more-card:hover .pg-more-card-bg { transform: scale(1.04); }

/* Result badge */
.pg-more-result-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(13,27,62,0.9);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 10px; padding: 6px 10px;
  text-align: center; backdrop-filter: blur(12px);
  z-index: 4;
}
.pg-more-result-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.pg-more-result-lbl {
  display: block; font-size: 9px;
  color: rgba(255,255,255,0.45); margin-top: 2px;
  white-space: nowrap;
}

/* Default footer */
.pg-more-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end;
  justify-content: space-between;
  padding: 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  z-index: 4; transition: opacity 0.3s;
}
.pg-more-card:hover .pg-more-card-footer { opacity: 0; pointer-events: none; }
.pg-more-card-footer-left { display: flex; flex-direction: column; gap: 5px; }
.pg-more-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-more-client {
  display: flex; align-items: center; gap: 8px;
}
.pg-more-client-icon { font-size: 16px; }
.pg-more-client-name {
  font-size: 13px; font-weight: 700; color: var(--white);
}
.pg-more-client-industry { font-size: 10px; color: rgba(255,255,255,0.45); }
.pg-more-result-line {
  font-size: 11px; font-weight: 600;
  color: var(--gold); margin-top: 2px;
}
.pg-more-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--white); flex-shrink: 0;
  transition: all 0.3s;
}
.pg-more-card:hover .pg-more-arrow {
  background: var(--gold); border-color: var(--gold);
  color: var(--navy); transform: rotate(-45deg);
}

/* Hover overlay */
.pg-more-overlay {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(13,27,62,0.92);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--transition);
}
.pg-more-card:hover .pg-more-overlay {
  opacity: 1; pointer-events: all;
}
.pg-more-overlay-inner {
  padding: 1.5rem; width: 100%;
  transform: translateY(10px);
  transition: transform 0.3s var(--transition);
}
.pg-more-card:hover .pg-more-overlay-inner { transform: translateY(0); }
.pg-more-overlay-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700;
  color: var(--white); margin: 0.6rem 0 1rem;
  line-height: 1.3;
}
.pg-more-overlay-metrics {
  display: flex; gap: 1rem; margin-bottom: 1rem;
}
.pg-more-overlay-metric { text-align: center; }
.pg-more-overlay-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--gold);
}
.pg-more-overlay-lbl {
  font-size: 10px; color: rgba(255,255,255,0.4);
}
.pg-more-overlay-cta {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border-radius: 6px;
  font-size: 12px; font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pg-more-overlay-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(201,168,76,0.3);
}

/* Responsive */
@media (max-width: 1024px) {
  .pg-more-work { padding: 4rem 2rem; }
  .pg-more-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pg-more-grid { grid-template-columns: 1fr; }
  .pg-more-card { min-height: 240px; }
}

/* ═══════════════════════════════════════
   MAINTENANCE SERVICE PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── HERO DASHBOARD VISUAL ─── */
.maint-dashboard {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 1.8rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
}
.maint-dashboard-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.maint-dashboard-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--white);
}
.maint-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #28CA41;
  box-shadow: 0 0 0 3px rgba(40,202,65,0.2);
  animation: pulse 2s ease-in-out infinite;
}
.maint-dashboard-sub {
  font-size: 11px; color: rgba(255,255,255,0.3);
}

/* Metrics row */
.maint-metrics-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0.8rem; margin-bottom: 1.5rem;
}
.maint-metric {
  text-align: center; padding: 1rem 0.5rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.maint-metric--green { border-color: rgba(40,202,65,0.2); }
.maint-metric--gold  { border-color: rgba(201,168,76,0.2); }
.maint-metric-val {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--white); line-height: 1;
}
.maint-metric--green .maint-metric-val { color: #28CA41; }
.maint-metric--gold  .maint-metric-val { color: var(--gold); }
.maint-metric-lbl {
  font-size: 11px; color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

/* Status checks */
.maint-checks {
  display: flex; flex-direction: column;
  gap: 8px; margin-bottom: 1.5rem;
}
.maint-check {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.maint-check--pass { border-left: 3px solid #28CA41; }
.maint-check--warn { border-left: 3px solid #e67e22; }
.maint-check-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(40,202,65,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #28CA41;
  flex-shrink: 0;
}
.maint-check-icon--warn {
  background: rgba(230,126,34,0.15);
  color: #e67e22;
}
.maint-check-label {
  font-size: 12px; color: rgba(255,255,255,0.7);
  flex: 1;
}
.maint-check-status {
  font-size: 11px; color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.maint-check-status--warn { color: #e67e22; }

/* Uptime bar */
.maint-uptime-bar-section { margin-top: 0.5rem; }
.maint-uptime-label {
  font-size: 11px; color: rgba(255,255,255,0.3);
  margin-bottom: 6px;
}
.maint-uptime-bars {
  display: flex; gap: 2px; height: 24px;
  flex-wrap: nowrap; overflow: hidden;
}
.maint-uptime-bar {
  flex: 1; min-width: 3px;
  border-radius: 2px;
}
.maint-uptime-bar--up   { background: #28CA41; opacity: 0.8; }
.maint-uptime-bar--down { background: #e74c3c; }
.maint-uptime-legend {
  display: flex; gap: 1rem; margin-top: 6px;
}
.maint-uptime-legend-item {
  font-size: 10px; color: rgba(255,255,255,0.3);
}
.maint-uptime-legend-item--up   { color: #28CA41; }
.maint-uptime-legend-item--down { color: #e74c3c; }

/* ─── FREE INCLUSIONS SECTION ─── */
.svc-free-includes {
  padding: 8rem 4rem;
  background: var(--off-white);
  position: relative; overflow: hidden;
}
.svc-free-includes-inner {
  max-width: 1200px; margin: 0 auto;
}
.svc-free-includes-header { margin-bottom: 3.5rem; }

.svc-free-includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* Free card */
.svc-free-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.svc-free-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.svc-free-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.08);
}
.svc-free-card:hover::before { transform: scaleX(1); }

/* Featured card */
.svc-free-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.25);
}
.svc-free-card--featured h3 { color: var(--white); }
.svc-free-card--featured p  { color: rgba(255,255,255,0.55); }
.svc-free-card--featured::before {
  background: linear-gradient(90deg, var(--gold), #F0C040);
}

/* CTA card */
.svc-free-card--cta {
  background: var(--navy);
  border-color: rgba(201,168,76,0.3);
  align-items: center; justify-content: center;
  text-align: center;
}
.svc-free-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.svc-free-cta-icon {
  font-size: 32px; color: var(--gold);
  animation: spin 8s linear infinite;
}
.svc-free-card--cta h3 { color: var(--white); font-size: 18px; }
.svc-free-card--cta p { color: rgba(255,255,255,0.5); font-size: 13px; }
.svc-free-total {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700; color: var(--gold);
  line-height: 1;
}

/* Card top row */
.svc-free-card-top {
  display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem;
}
.svc-free-icon { font-size: 28px; }
.svc-free-value-badge {
  font-size: 11px; font-weight: 700;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 3px 10px;
  white-space: nowrap;
}
.svc-free-value-badge--gold {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
}
.svc-free-card--featured .svc-free-value-badge {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
}

.svc-free-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--text);
}
.svc-free-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); flex: 1;
}

/* Card footer */
.svc-free-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.svc-free-card--featured .svc-free-card-footer {
  border-top-color: rgba(255,255,255,0.08);
}
.svc-free-available {
  font-size: 12px; font-weight: 600; color: var(--gray-400);
}
.svc-free-available--gold { color: var(--gold); }

/* ─── MAINTENANCE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .svc-free-includes { padding: 5rem 2rem; }
  .svc-free-includes-grid { grid-template-columns: 1fr 1fr; }
  .maint-metrics-row { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px) {
  .svc-free-includes-grid { grid-template-columns: 1fr; }
  .maint-metrics-row { grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
  .maint-metric-val { font-size: 18px; }
}

/* ═══════════════════════════════════════
   BLOG LISTING + SEARCH RESULTS PAGE
   ═══════════════════════════════════════ */

/* ─── HERO ─── */
.blog-hero {
  background: var(--navy);
  position: relative; overflow: hidden;
  padding: 140px 4rem 5rem;
}
.blog-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.blog-hero-inner {
  max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 2.0rem;
}
.blog-hero-content { max-width: 700px; }
.blog-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900; color: var(--white);
  line-height: 1.15; margin-bottom: 1rem;
}
.blog-h1 em { font-style: normal; color: var(--gold); }
.blog-hero-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6); max-width: 580px;
}
.blog-hero-sub strong { color: var(--white); }

/* Search bar */
.blog-search-wrap { max-width: 680px; }
.blog-search-form {
  display: flex; gap: 0.8rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 6px 6px 6px 1.2rem;
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.blog-search-form:focus-within {
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.08);
}
.blog-search-input-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  position: relative;
}
.blog-search-icon { font-size: 16px; flex-shrink: 0; }
.blog-search-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; color: var(--white);
  padding: 8px 0;
}
.blog-search-input::placeholder { color: rgba(255,255,255,0.35); }
/* .blog-search-clear {
  color: rgba(255,255,255,0.4); text-decoration: none;
  font-size: 13px; padding: 4px 8px;
  border-radius: 4px; transition: color 0.2s;
  flex-shrink: 0;
}
.blog-search-clear:hover { color: var(--white); } */
.blog-search-btn {
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border: none;
  padding: 10px 22px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.blog-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201,168,76,0.3);
}

/* Popular search tags */
.blog-search-tags {
  display: flex; align-items: center;
  gap: 8px; margin-top: 1rem; flex-wrap: wrap;
}
.blog-search-tags-label {
  font-size: 12px; color: rgba(255,255,255,0.35);
}
.blog-search-tag {
  display: inline-block; padding: 4px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.2s;
}
.blog-search-tag:hover {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.25);
  color: var(--gold);
}

/* ─── FEATURED POSTS ─── */
.blog-featured {
  padding: 5rem 4rem;
  background: var(--off-white);
  border-bottom: 1px solid var(--gray-200);
}
.blog-featured-inner { max-width: 1200px; margin: 0 auto; }
.blog-featured-header { margin-bottom: 2rem; }
.blog-featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.2rem;
  min-height: 360px;
}
.blog-feat-card {
  border-radius: 16px; overflow: hidden;
  position: relative; cursor: pointer;
  min-height: 280px;
  transition: transform 0.35s, box-shadow 0.35s;
}
.blog-feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.15);
}
.blog-feat-card--hero { min-height: 360px; }
.blog-feat-card-link {
  display: block; height: 100%;
  position: absolute; inset: 0;
  text-decoration: none;
}
.blog-feat-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s;
}
.blog-feat-card:hover .blog-feat-img { transform: scale(1.05); }
.blog-feat-img--placeholder {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: auto, 40px 40px;
}
.blog-feat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  display: flex; align-items: flex-end;
}
.blog-feat-content { padding: 1.5rem; }
.blog-cat-pill {
  display: inline-block; padding: 3px 10px;
  background: rgba(201,168,76,0.2);
  /* border: 1px solid rgba(201,168,76,0.3); */
  border: none;
  border-radius: 100px;
  font-size: 10px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 0.6rem;
}
.blog-feat-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--white);
  line-height: 1.3; margin-bottom: 0.5rem;
}
.blog-feat-card--hero .blog-feat-title { font-size: 24px; }
.blog-feat-excerpt {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.65); margin-bottom: 0.8rem;
}
.blog-feat-meta {
  display: flex; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,0.4);
}

/* ─── MAIN CONTENT LAYOUT ─── */
.blog-main {
  padding: 4rem 4rem 6rem;
  background: var(--white);
}
.blog-main-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 340px;
  gap: 4rem; align-items: start;
}

/* ─── FILTER INDICATOR ─── */
.blog-filter-indicator {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 10px; margin-bottom: 1.5rem;
  flex-wrap: wrap; gap: 0.5rem;
}
.blog-filter-label {
  font-size: 14px; color: var(--gray-600);
}
.blog-filter-label strong { color: var(--text); }
.blog-filter-clear {
  font-size: 12px; font-weight: 600;
  color: var(--gold); text-decoration: none;
  transition: opacity 0.2s;
}
.blog-filter-clear:hover { opacity: 0.7; }

/* ─── CATEGORY FILTER BAR ─── */
.blog-cat-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.blog-cat-btn {
  padding: 6px 16px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--gray-400); text-decoration: none;
  transition: all 0.25s; white-space: nowrap;
}
.blog-cat-btn:hover,
.blog-cat-btn--active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
}

/* ─── POSTS GRID ─── */
.blog-posts-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.blog-post-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; overflow: hidden;
  transition: all 0.35s; display: flex;
  flex-direction: column;
}
.blog-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.08);
  border-color: rgba(201,168,76,0.2);
}
.blog-post-card-link {
  display: flex; flex-direction: column;
  height: 100%; text-decoration: none;
}
.blog-post-img-wrap {
  position: relative; overflow: hidden;
  height: 180px; flex-shrink: 0;
}
.blog-post-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.5s;
}
.blog-post-card:hover .blog-post-img { transform: scale(1.05); }
.blog-post-img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  display: flex; align-items: center; justify-content: center;
}
.blog-post-img--placeholder span {
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase; letter-spacing: 1px;
}
.blog-post-cat {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(13,27,62,0.85);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.blog-post-content {
  padding: 1.5rem; flex: 1;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.blog-post-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700;
  color: var(--text); line-height: 1.4;
  transition: color 0.2s;
}
.blog-post-card:hover .blog-post-title { color: var(--navy); }
.blog-post-excerpt {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); flex: 1;
}
.blog-post-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
  margin-top: auto;
}
.blog-post-meta {
  display: flex; flex-direction: column; gap: 2px;
}
.blog-post-read-time {
  font-size: 11px; font-weight: 600; color: var(--gold);
}
.blog-post-date { font-size: 11px; color: var(--gray-400); }
.blog-post-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--gray-400);
  transition: all 0.3s; flex-shrink: 0;
}
.blog-post-card:hover .blog-post-arrow {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: rotate(-45deg);
}

/* ─── PAGINATION ─── */
.blog-pagination {
  display: flex; align-items: center;
  justify-content: center; gap: 0.8rem;
  margin-top: 3rem; flex-wrap: wrap;
}
.blog-page-btn {
  padding: 10px 20px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none;
  transition: all 0.2s;
}
.blog-page-btn:hover {
  background: var(--navy); color: var(--gold);
  border-color: var(--navy);
}
.blog-page-numbers { display: flex; gap: 6px; }
.blog-page-num {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  color: var(--gray-400); text-decoration: none;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  transition: all 0.2s;
}
.blog-page-num:hover { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.blog-page-num--active {
  background: var(--navy); color: var(--gold);
  border-color: var(--navy); pointer-events: none;
}

/* ─── EMPTY STATE ─── */
.blog-empty-state {
  text-align: center; padding: 4rem 2rem;
  grid-column: 1 / -1;
}
.blog-empty-icon { font-size: 48px; margin-bottom: 1rem; }
.blog-empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700;
  color: var(--text); margin-bottom: 0.8rem;
}
.blog-empty-sub {
  font-size: 15px; line-height: 1.7;
  color: var(--gray-600); max-width: 440px;
  margin: 0 auto 2rem;
}
.blog-empty-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.blog-empty-suggestions { margin-top: 2.5rem; }
.blog-empty-suggestions p {
  font-size: 13px; color: var(--gray-400); margin-bottom: 0.8rem;
}
.blog-empty-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ─── SIDEBAR ─── */
.blog-sidebar {
  display: flex; flex-direction: column; gap: 1.5rem;
  position: sticky; top: 160px;
}
.blog-sidebar-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.5rem;
}
/* About card */
.blog-sidebar-about {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
  text-align: center;
}
.blog-sidebar-about-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.8rem;
}
.blog-sidebar-logo {
  font-size: 32px; color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
}
.blog-sidebar-about h3 {
  font-size: 16px; font-weight: 700; color: var(--white);
}
.blog-sidebar-about p {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.5);
}
.blog-sidebar-cta {
  display: inline-block; padding: 8px 18px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border-radius: 8px;
  font-size: 13px; font-weight: 700;
  text-decoration: none; transition: transform 0.2s;
}
.blog-sidebar-cta:hover { transform: translateY(-2px); }

/* CTA card */
.blog-sidebar-card--cta {
  background: var(--off-white);
  border-color: rgba(201,168,76,0.2);
  text-align: center;
}
.blog-sidebar-cta-icon { font-size: 28px; margin-bottom: 0.5rem; }
.blog-sidebar-card--cta h4 {
  font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 0.5rem;
}
.blog-sidebar-card--cta p {
  font-size: 13px; line-height: 1.6; color: var(--gray-600);
}

/* Sidebar titles */
.blog-sidebar-title {
  font-size: 13px; font-weight: 700;
  color: var(--text); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 1rem;
}

/* Sidebar search */
.blog-sidebar-search {
  display: flex; gap: 6px;
}
.blog-sidebar-search-input {
  flex: 1; padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px; outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; color: var(--text);
  transition: border-color 0.2s;
}
.blog-sidebar-search-input:focus { border-color: rgba(201,168,76,0.4); }
.blog-sidebar-search-btn {
  padding: 8px 14px;
  background: var(--navy); color: var(--gold);
  border: none; border-radius: 8px;
  font-size: 14px; cursor: pointer;
  transition: background 0.2s;
}
.blog-sidebar-search-btn:hover { background: var(--navy-light); }

/* Sidebar categories */
.blog-sidebar-cats { display: flex; flex-direction: column; gap: 4px; }
.blog-sidebar-cat {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 8px 12px; border-radius: 8px;
  text-decoration: none;
  font-size: 13px; color: var(--gray-600);
  transition: all 0.2s;
}
.blog-sidebar-cat:hover { background: var(--white); color: var(--navy); }
.blog-sidebar-cat--active {
  background: var(--navy); color: var(--gold); font-weight: 600;
}
.blog-sidebar-cat-count {
  font-size: 11px; color: var(--gray-400);
  background: var(--white); border-radius: 100px;
  padding: 2px 8px;
}
.blog-sidebar-cat--active .blog-sidebar-cat-count {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);
}

/* Sidebar tags */
.blog-sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-sidebar-tag {
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-size: 11px; font-weight: 500;
  color: var(--gray-600); text-decoration: none;
  transition: all 0.2s;
}
.blog-sidebar-tag:hover {
  background: var(--navy); color: var(--gold);
  border-color: var(--navy);
}
.blog-sidebar-tag--active {
  background: var(--navy); color: var(--gold);
  border-color: var(--navy);
}

/* Sidebar services */
.blog-sidebar-services { display: flex; flex-direction: column; gap: 4px; }
.blog-sidebar-service {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; color: var(--gray-600);
  text-decoration: none; transition: all 0.2s;
}
.blog-sidebar-service:hover {
  background: var(--white); color: var(--navy);
}
.blog-sidebar-service span { font-size: 16px; }

/* ─── BLOG RESPONSIVE ─── */
@media (max-width: 1024px) {
  .blog-hero { padding: 120px 2rem 4rem; }
  .blog-featured { padding: 4rem 2rem; }
  .blog-featured-grid { grid-template-columns: 1fr 1fr; min-height: auto; }
  .blog-feat-card--hero { grid-column: 1 / -1; min-height: 280px; }
  .blog-main { padding: 3rem 2rem 5rem; }
  .blog-main-inner { grid-template-columns: 1fr; gap: 3rem; }
  .blog-sidebar { position: static; }
  .blog-posts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .blog-h1 { font-size: 34px; }
  .blog-search-form { flex-direction: column; padding: 1rem; }
  .blog-search-btn { width: 100%; }
  .blog-featured-grid { grid-template-columns: 1fr; }
  .blog-feat-card--hero { grid-column: 1; }
  .blog-posts-grid { grid-template-columns: 1fr; }
  .blog-pagination { gap: 0.5rem; }
  .blog-empty-actions { flex-direction: column; align-items: center; }
}

/* ═══════════════════════════════════════
   UNSUBSCRIBE PAGE STYLES
   ═══════════════════════════════════════ */

.unsub-page { min-height: 100vh; }

/* ─── HERO ─── */
.unsub-hero {
  background: var(--navy);
  min-height: 100vh;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding-top: 80px;
}
.unsub-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.unsub-hero-inner {
  max-width: 1100px; margin: 0 auto; width: 100%;
  padding: 4rem 4rem 5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
  position: relative; z-index: 2;
}

/* ─── LOGO ─── */
.unsub-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 2.5rem;
  text-decoration: none;
}
.unsub-logo-hex {
  font-size: 28px; color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 900; line-height: 1;
}
.unsub-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 900; color: var(--white);
}
.unsub-logo-text span { color: var(--gold); }

/* ─── STATES ─── */
.unsub-state { transition: opacity 0.4s, transform 0.4s; }
.unsub-state--hidden {
  display: none;
  opacity: 0; transform: translateY(20px);
}
.unsub-state--visible {
  display: block;
  opacity: 1; transform: translateY(0);
}

/* ─── H1 + SUB ─── */
.unsub-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 900; color: var(--white);
  line-height: 1.15; margin-bottom: 1.2rem;
}
.unsub-h1 em { font-style: normal; color: var(--gold); }
.unsub-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem; max-width: 460px;
}

/* ─── WHAT YOU GET ─── */
.unsub-what-you-get {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.3rem;
}
.unsub-what-title {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 1rem;
}
.unsub-what-items { display: flex; flex-direction: column; gap: 8px; }
.unsub-what-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.55);
}
.unsub-what-icon { font-size: 15px; flex-shrink: 0; }

/* ─── SUCCESS / PAUSE STATES ─── */
.unsub-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(40,202,65,0.15);
  border: 2px solid rgba(40,202,65,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #28CA41;
  margin-bottom: 1.5rem;
  animation: successPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.unsub-success-icon--pause {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}
@keyframes successPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.unsub-success-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.unsub-resubscribe-btn {
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}
.unsub-success-note {
  font-size: 12px; color: rgba(255,255,255,0.35);
}

/* ─── FORM CARD ─── */
.unsub-form-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  position: relative; overflow: hidden;
}
.unsub-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.unsub-form-header { margin-bottom: 1.8rem; }
.unsub-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--text);
}
.unsub-form-sub { font-size: 13px; color: var(--gray-400); margin-top: 3px; }
.unsub-optional { font-size: 11px; color: var(--gray-400); font-weight: 400; }

/* ─── REASON SELECTOR ─── */
.unsub-reasons {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 0.5rem;
}
.unsub-reason-option { cursor: pointer; }
.unsub-reason-option input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.unsub-reason-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 12px; font-weight: 500;
  color: var(--gray-600);
  transition: all 0.2s; cursor: pointer;
  height: 100%;
}
.unsub-reason-option:hover .unsub-reason-card {
  border-color: rgba(201,168,76,0.3);
  background: var(--gold-dim);
  color: var(--text);
}
.unsub-reason-option input:checked + .unsub-reason-card {
  background: var(--navy);
  border-color: rgba(201,168,76,0.4);
  color: var(--white);
}
.unsub-reason-icon { font-size: 16px; flex-shrink: 0; }
.unsub-reason-text { line-height: 1.3; }

/* ─── COMMENT FIELD ─── */
.unsub-comment-wrap {
  max-height: 0; overflow: hidden;
  opacity: 0; transition: max-height 0.4s var(--transition), opacity 0.3s;
}
.unsub-comment-wrap.unsub-comment-visible {
  max-height: 150px; opacity: 1;
}

/* ─── ACTION BUTTONS ─── */
.unsub-actions {
  display: flex; flex-direction: column;
  gap: 0.8rem; margin-top: 1.5rem;
}
.unsub-btn-main {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: var(--white); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all 0.3s;
}
.unsub-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(231,76,60,0.3);
}
.unsub-btn-main:disabled {
  opacity: 0.6; cursor: not-allowed; transform: none;
}
.unsub-divider {
  display: flex; align-items: center; gap: 1rem;
  color: var(--gray-400); font-size: 12px;
}
.unsub-divider::before,
.unsub-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--gray-200);
}
.unsub-btn-pause {
  width: 100%; padding: 12px;
  background: transparent;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--gray-400); cursor: pointer;
  transition: all 0.3s;
}
.unsub-btn-pause:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
}

/* ─── REASSURANCE STRIP ─── */
.unsub-reassurance {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}
.unsub-reassurance-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--gray-400);
}

/* ─── STAY CARD ─── */
.unsub-stay-card {
  margin-top: 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.2rem;
  transition: opacity 0.4s;
}
.unsub-stay-card.hidden { opacity: 0; pointer-events: none; }
.unsub-stay-inner {
  display: flex; gap: 12px; align-items: flex-start;
}
.unsub-stay-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.unsub-stay-title {
  font-size: 13px; font-weight: 700;
  color: var(--white); margin-bottom: 4px;
}
.unsub-stay-body { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.6; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .unsub-hero-inner {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 4rem; gap: 3rem;
  }
  .unsub-sub { max-width: 100%; }
  .unsub-success-actions { flex-direction: column; }
}
@media (max-width: 640px) {
  .unsub-h1 { font-size: 32px; }
  .unsub-reasons { grid-template-columns: 1fr; }
  .unsub-form-card { padding: 1.8rem; }
}

/* ═══════════════════════════════════════
   SEO PAGE ADDITIONS
   More proof, free inclusions, onboarding
   ═══════════════════════════════════════ */

/* ─── MORE PROOF SECTION ─── */
.sp-more-proof {
  padding: 6rem 4rem;
  background: var(--off-white);
  border-top: 1px solid var(--gray-200);
}
.sp-more-proof-inner { max-width: 1200px; margin: 0 auto; }
.sp-more-proof-header { margin-bottom: 3rem; }
.sp-more-proof-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.sp-more-proof-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.sp-more-proof-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.sp-more-proof-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.08);
  border-color: rgba(201,168,76,0.2);
}
.sp-more-proof-card:hover::before { transform: scaleX(1); }

.sp-more-proof-card-top {
  display: flex;
  /* align-items: center;  */
  flex-direction: column;
  gap: 12px;
}
.sp-more-proof-icon { font-size: 28px; flex-shrink: 0; }
.sp-more-proof-client {
  font-size: 15px; font-weight: 700; color: var(--text);
}
.sp-more-proof-industry { font-size: 12px; color: var(--gray-400); }
.sp-more-proof-service-tag {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 700;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 3px 10px;
  white-space: nowrap;
}
.sp-more-proof-result {
  display: flex; flex-direction: column; gap: 3px;
  padding: 1rem;
  background: var(--gray-100);
  border-radius: 12px;
}
.sp-more-proof-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 900; color: var(--navy);
  line-height: 1;
}
.sp-more-proof-lbl { font-size: 12px; color: var(--gray-400); }
.sp-more-proof-quote {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); font-style: italic; flex: 1;
}
.sp-more-proof-stars {
  font-size: 14px; color: var(--gold); letter-spacing: 1px;
}

/* ─── FREE INCLUDES LIGHT VARIANT ─── */
/* The maintenance page uses dark navy background.
   This variant is for service pages with white bg */
.svc-free-includes--light {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
.svc-free-includes--light .section-h2 { color: var(--text); }
.svc-free-includes--light .section-sub { color: var(--gray-600); }

.svc-free-card--light {
  background: var(--gray-100);
  border-color: var(--gray-200);
}
.svc-free-card--light h3 { color: var(--text); }
.svc-free-card--light p  { color: var(--gray-600); }
.svc-free-card--light .svc-free-card-footer {
  border-top-color: var(--gray-200);
}
.svc-free-card--light:hover {
  background: var(--white);
}
.svc-free-card--light.svc-free-card--cta {
  background: var(--navy);
}
.svc-free-card--light.svc-free-card--cta p { color: rgba(255,255,255,0.5); }
.svc-free-total--dark { color: var(--gold); }

/* ─── ONBOARDING FORM SECTION ─── */
.sp-onboarding {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.sp-onboarding::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.sp-onboarding-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
  position: relative; z-index: 1;
}
.sp-onboarding-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.sp-onboarding-h2 em { font-style: normal; color: var(--gold); }
.sp-onboarding-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2rem;
}
.sp-onboarding-what-happens {
  display: flex; flex-direction: column; gap: 14px;
}
.sp-onboarding-step {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: rgba(255,255,255,0.7);
}
.sp-onboarding-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--gold);
  flex-shrink: 0;
}

/* Form card */
.sp-onboarding-form-card {
  background: var(--white);
  border-radius: 24px; padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.sp-onboarding-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.sp-onboarding-form-header { margin-bottom: 1.8rem; }
.sp-onboarding-form-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
}
.sp-onboarding-form-header p {
  font-size: 13px; color: var(--gray-400);
}
.onboard-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .sp-more-proof { padding: 4rem 2rem; }
  .sp-more-proof-grid { grid-template-columns: 1fr 1fr; }
  .sp-onboarding { padding: 5rem 2rem; }
  .sp-onboarding-inner { grid-template-columns: 1fr; gap: 3rem; }
  .onboard-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sp-onboarding-form-card { padding: 1.8rem; }
}

@media (max-width: 768px) {
  .sp-more-proof-grid { grid-template-columns: 1fr; }
}

































































/* ════════════════════════════════════════════════════════════════════════════════════════════════════
   SEM / GOOGLE ADS PAGE SPECIFIC STYLES
   ════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── ROAS VISUAL CARD ─── */
.sem-roas-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 1.8rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.sem-roas-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sem-roas-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sem-roas-title {
  font-size: 13px; font-weight: 700; color: var(--white); flex: 1;
}
.sem-roas-period { font-size: 11px; color: rgba(255,255,255,0.3); }

.sem-roas-metrics {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; justify-content: space-between;
}
.sem-roas-metric { text-align: center; }
.sem-roas-metric-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.sem-roas-metric-val {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--white);
}
.sem-roas-metric-val--gold { color: var(--gold); }
.sem-roas-metric--gold .sem-roas-metric-val { color: var(--gold); }
.sem-roas-arrow { font-size: 18px; color: rgba(255,255,255,0.2); }

.sem-roas-display {
  text-align: center; padding: 1.2rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 14px; margin-bottom: 1.5rem;
}
.sem-roas-num {
  font-family: 'Playfair Display', serif;
  font-size: 52px; font-weight: 900; color: var(--gold); line-height: 1;
}
.sem-roas-num span { font-size: 28px; }
.sem-roas-lbl { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 4px; }

.sem-roas-bars { display: flex; flex-direction: column; gap: 10px; }
.sem-roas-bar-wrap {
  display: flex; align-items: center; gap: 10px;
}
.sem-roas-bar-label {
  font-size: 11px; color: rgba(255,255,255,0.4);
  width: 80px; flex-shrink: 0; text-align: right;
}
.sem-roas-bar {
  flex: 1; height: 8px;
  background: rgba(255,255,255,0.06); border-radius: 4px;
  overflow: hidden;
}
.sem-roas-bar-fill {
  height: 100%; width: var(--w);
  background: linear-gradient(90deg, var(--gold), rgba(240,192,64,0.6));
  border-radius: 4px;
  animation: barGrowH 1.2s var(--transition) forwards;
  transform-origin: left; transform: scaleX(0);
}
.sem-roas-bar-fill--good {
  background: linear-gradient(90deg, #28CA41, rgba(40,202,65,0.5));
}
@keyframes barGrowH { to { transform: scaleX(1); } }
.sem-roas-bar-val {
  font-size: 12px; font-weight: 700; color: var(--gold);
  width: 36px; flex-shrink: 0;
}
.sem-roas-bar-val--good { color: #28CA41; }

/* ─── COMPARISON CARD ─── */
.sem-comparison-card {
  background: var(--navy);
  border-radius: 16px; padding: 1.8rem;
  border: 1px solid rgba(201,168,76,0.15);
  margin-bottom: 1.5rem;
}
.sem-comparison-header {
  font-size: 14px; font-weight: 700; color: var(--white);
  margin-bottom: 1.5rem;
}
.sem-comparison-bars { display: flex; flex-direction: column; gap: 1rem; }
.sem-comp-item { display: flex; align-items: center; gap: 1rem; }
.sem-comp-label {
  font-size: 12px; color: rgba(255,255,255,0.5);
  width: 90px; flex-shrink: 0;
}
.sem-comp-bar-wrap { flex: 1; }
.sem-comp-bar {
  height: 36px; border-radius: 8px;
  width: var(--w); display: flex; align-items: center;
  padding: 0 12px; position: relative;
  overflow: hidden;
  animation: barGrowH 1.2s var(--transition) forwards;
  transform-origin: left; transform: scaleX(0);
}
.sem-comp-bar--before {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}
.sem-comp-bar--after {
  background: linear-gradient(90deg, rgba(201,168,76,0.3), rgba(201,168,76,0.1));
  border: 1px solid rgba(201,168,76,0.3);
}
.sem-comp-bar span {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700;
  color: var(--white); position: relative; z-index: 1;
}
.sem-comp-bar--after span { color: var(--gold); }
.sem-comparison-note {
  font-size: 12px; color: rgba(255,255,255,0.4);
  text-align: center; margin-top: 1rem;
}

/* ─── CAMPAIGN TYPES SECTION ─── */
.sem-campaign-types {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.sem-campaign-inner { max-width: 1200px; margin: 0 auto; }
.sem-campaign-header { margin-bottom: 3.5rem; }
.sem-campaign-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.sem-campaign-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s;
}
.sem-campaign-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.sem-campaign-icon { font-size: 28px; margin-bottom: 1rem; }
.sem-campaign-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.sem-campaign-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); margin-bottom: 1rem;
}
.sem-campaign-best-for {
  font-size: 11px; font-weight: 600;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px; padding: 6px 10px;
}

/* ─── SEM RESPONSIVE ─── */
@media (max-width: 1024px) {
  .sem-campaign-types { padding: 5rem 2rem; }
  .sem-campaign-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sem-campaign-grid { grid-template-columns: 1fr; }
  .sem-roas-metrics { flex-wrap: wrap; }
}




































/* ═══════════════════════════════════════
   WEB DEVELOPMENT PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── HERO WEBSITE PREVIEW ─── */
.web-preview-wrap {
  position: relative;
  padding: 1rem 2rem 1rem 0;
}
.web-desktop-preview {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.web-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: rgba(0,0,0,0.25);
}
.web-browser-url {
  flex: 1; font-size: 11px;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border-radius: 4px; padding: 3px 10px; margin-left: 6px;
}
.web-browser-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 1.2rem; min-height: 200px;
}
.web-mock-nav {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 1.5rem;
}
.web-mock-logo {
  width: 60px; height: 8px;
  background: linear-gradient(90deg, #F0C040, #C9A84C);
  border-radius: 4px;
}
.web-mock-nav-links {
  display: flex; align-items: center; gap: 8px;
}
.web-mock-nav-links > div {
  width: 24px; height: 6px;
  background: rgba(255,255,255,0.2); border-radius: 3px;
}
.web-mock-nav-cta {
  width: 48px !important; height: 16px !important;
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  border-radius: 4px;
}
.web-mock-hero-content { margin-bottom: 1.2rem; }
.web-mock-eyebrow {
  height: 6px; width: 40%;
  background: rgba(201,168,76,0.35);
  border-radius: 3px; margin-bottom: 8px;
}
.web-mock-h1 {
  height: 12px; background: rgba(255,255,255,0.5);
  border-radius: 4px; margin-bottom: 6px;
}
.web-mock-h1--short { width: 70%; }
.web-mock-sub {
  height: 7px; width: 85%;
  background: rgba(255,255,255,0.2);
  border-radius: 3px; margin-bottom: 12px;
}
.web-mock-actions { display: flex; gap: 8px; }
.web-mock-btn-gold {
  height: 18px; width: 70px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 4px;
}
.web-mock-btn-out {
  height: 18px; width: 60px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
}
.web-mock-cards-row { display: flex; gap: 8px; }
.web-mock-card {
  flex: 1; height: 50px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
}

/* Mobile preview */
.web-mobile-preview {
  position: absolute; bottom: -1rem; right: -0.5rem;
  width: 100px;
  background: linear-gradient(135deg, #1a1a2e, #0D1B3E);
  border-radius: 16px;
  border: 2px solid rgba(201,168,76,0.2);
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.web-mobile-notch {
  width: 30px; height: 5px;
  background: rgba(201,168,76,0.3);
  border-radius: 3px; margin: 0 auto 6px;
}
.web-mobile-screen {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  border-radius: 8px; padding: 8px; min-height: 140px;
}
.web-mob-nav {
  height: 5px; background: rgba(255,255,255,0.1);
  border-radius: 3px; margin-bottom: 10px;
}
.web-mob-hero { margin-bottom: 8px; }
.web-mob-h1 {
  height: 7px; background: rgba(255,255,255,0.4);
  border-radius: 3px; margin-bottom: 4px;
}
.web-mob-h1--short { width: 70%; }
.web-mob-btn {
  height: 12px; width: 60px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  border-radius: 3px; margin-top: 8px;
}
.web-mob-cards { display: flex; flex-direction: column; gap: 4px; }
.web-mob-card {
  height: 24px; background: rgba(255,255,255,0.06);
  border-radius: 4px;
}

/* PageSpeed badge */
.web-score-badge {
  position: absolute; top: 0; right: 0;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 5;
}
.web-score-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(#28CA41 98%, rgba(255,255,255,0.1) 0);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #28CA41;
  font-family: 'Playfair Display', serif;
}
.web-score-label { font-size: 12px; font-weight: 600; color: var(--white); }
.web-score-sub { font-size: 10px; color: rgba(255,255,255,0.4); }

/* ─── TECH STACK SECTION ─── */
.web-tech-section {
  padding: 8rem 4rem;
  background: var(--white);
}
.web-tech-inner { max-width: 1200px; margin: 0 auto; }
.web-tech-header { margin-bottom: 3.5rem; }
.web-tech-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.web-tech-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s;
}
.web-tech-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.web-tech-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
}
.web-tech-card--featured h3 { color: var(--white); }
.web-tech-card--featured p { color: rgba(255,255,255,0.55); }
.web-tech-card--featured .web-tech-best-for {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.2);
  color: var(--gold);
}
.web-tech-card--featured .web-tech-examples { color: rgba(255,255,255,0.3); }
.web-tech-icon { font-size: 28px; margin-bottom: 1rem; }
.web-tech-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.web-tech-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); margin-bottom: 1rem;
}
.web-tech-best-for {
  font-size: 11px; color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px; padding: 6px 10px;
  margin-bottom: 0.5rem;
}
.web-tech-examples {
  font-size: 11px; color: var(--gray-400); font-style: italic;
}

/* ─── WEBSITE TYPES SECTION ─── */
.web-types-section {
  padding: 8rem 4rem;
  background: var(--off-white);
}
.web-types-inner { max-width: 1200px; margin: 0 auto; }
.web-types-header { margin-bottom: 3.5rem; }
.web-types-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.web-type-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 2rem;
  transition: all 0.3s; display: flex;
  flex-direction: column; gap: 0.8rem;
}
.web-type-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,62,0.08);
}
.web-type-card--dark {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
}
.web-type-card--dark h3 { color: var(--white); }
.web-type-card--dark p { color: rgba(255,255,255,0.55); }
.web-type-icon { font-size: 28px; }
.web-type-card h3 {
  font-size: 16px; font-weight: 700; color: var(--text);
}
.web-type-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); flex: 1;
}
.web-type-meta {
  display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.web-type-card--dark .web-type-meta {
  border-top-color: rgba(255,255,255,0.08);
}
.web-type-time {
  font-size: 12px; color: var(--gray-400);
}
.web-type-card--dark .web-type-time { color: rgba(255,255,255,0.4); }
.web-type-price {
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.web-type-price--gold { color: var(--gold); }
.web-type-cta {
  display: inline-block; margin-top: 0.5rem;
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: gap 0.3s;
}
.web-type-cta:hover { opacity: 0.8; }

/* ─── PORTFOLIO PREVIEW ─── */
.web-portfolio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.web-port-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; overflow: hidden;
  transition: all 0.35s;
  display: flex; flex-direction: column;
}
.web-port-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.2);
}
.web-port-card-top { flex-shrink: 0; }
.web-port-browser {
  background: rgba(13,27,62,0.97);
  overflow: hidden;
}
.web-port-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; background: rgba(0,0,0,0.2);
  font-size: 11px; color: rgba(255,255,255,0.3);
}
.web-port-visit {
  margin-left: auto; color: var(--gold);
  text-decoration: none; font-size: 11px; font-weight: 600;
}

/* Hotel screen */
.web-port-screen--hotel {
  min-height: 120px; position: relative; overflow: hidden;
}
.web-port-hotel-img {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1008, #3d2510);
}
.web-port-hotel-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 4px; padding: 8px;
  background: rgba(0,0,0,0.5);
}
.web-port-hotel-field {
  flex: 1; height: 16px;
  background: rgba(255,255,255,0.15); border-radius: 3px;
}
.web-port-hotel-btn {
  width: 32px; height: 16px;
  background: linear-gradient(135deg, #F0C040, #C9A84C); border-radius: 3px;
}

/* Pharma screen */
.web-port-screen--pharma {
  background: linear-gradient(135deg, #081628, #0f2d4d);
  padding: 0.8rem; min-height: 120px;
}
.web-port-pharma-nav {
  height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 3px; margin-bottom: 10px;
}
.web-port-pharma-badge {
  height: 5px; width: 40%;
  background: rgba(59,130,246,0.4);
  border-radius: 3px; margin-bottom: 6px;
}
.web-port-pharma-h1 {
  height: 9px; background: rgba(255,255,255,0.5);
  border-radius: 3px; margin-bottom: 5px;
}
.web-port-pharma-sub {
  height: 6px; width: 75%;
  background: rgba(255,255,255,0.2);
  border-radius: 3px; margin-bottom: 8px;
}
.web-port-pharma-btn {
  height: 14px; width: 55px;
  background: rgba(59,130,246,0.5); border-radius: 3px;
}

/* Drivon screen */
.web-port-screen--drivon {
  background: linear-gradient(135deg, #0D1B3E, #1e3060);
  padding: 0.8rem; min-height: 120px;
  background-image:
    linear-gradient(135deg, #0D1B3E, #1e3060),
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: auto, 15px 15px, 15px 15px;
}
.web-port-drivon-nav {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.web-port-drivon-logo {
  width: 20px; height: 20px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.web-port-drivon-links { display: flex; align-items: center; gap: 5px; }
.web-port-drivon-links > div {
  width: 16px; height: 4px;
  background: rgba(255,255,255,0.2); border-radius: 2px;
}
.web-port-drivon-cta {
  width: 28px !important; height: 10px !important;
  background: linear-gradient(135deg, #F0C040, #C9A84C) !important;
  border-radius: 3px;
}
.web-port-drivon-h1 {
  height: 8px; background: rgba(255,255,255,0.5);
  border-radius: 3px; margin-bottom: 5px;
}
.web-port-drivon-h1--short { width: 65%; }
.web-port-drivon-actions { display: flex; gap: 5px; margin-top: 8px; }
.web-port-drivon-btn-g {
  height: 12px; width: 45px;
  background: linear-gradient(135deg, #F0C040, #C9A84C); border-radius: 3px;
}
.web-port-drivon-btn-o {
  height: 12px; width: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
}
.web-port-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.web-port-title {
  font-size: 17px; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem;
}
.web-port-desc {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); flex: 1; margin-bottom: 1rem;
}
.web-port-meta {
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 1rem; font-size: 12px; color: var(--gray-400);
}
.web-port-link {
  color: var(--gold); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: opacity 0.2s;
}
.web-port-link:hover { opacity: 0.7; }

/* ─── ADD-ONS SECTION ─── */
.web-addons-section {
  padding: 6rem 4rem;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
.web-addons-inner { max-width: 1200px; margin: 0 auto; }
.web-addons-header { margin-bottom: 3rem; }
.web-addons-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--gray-200);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--gray-200);
}
.web-addon-item {
  display: flex; align-items: flex-start;
  flex-direction: column;
  gap: 1rem; padding: 1.8rem;
  background: var(--white);
  transition: background 0.3s;
}
.web-addon-item:hover { background: var(--gray-100); }
.web-addon-item--cta {
  background: var(--navy);
  flex-direction: column; gap: 0.8rem;
}
.web-addon-item--cta:hover { background: var(--navy-light); }
.web-addon-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.web-addon-body { flex: 1; }
.web-addon-name {
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 4px; margin-top: 20px;
}
.web-addon-item--cta .web-addon-name { color: var(--white); }
.web-addon-desc {
  font-size: 12px; line-height: 1.6; color: var(--gray-600);
}
.web-addon-item--cta .web-addon-desc { color: rgba(255,255,255,0.5); }
.web-addon-price {
  font-size: 14px; font-weight: 700;
  color: var(--navy); white-space: nowrap; flex-shrink: 0;
  /* align-self: center; */
}
.web-addon-price span {
  font-size: 11px; font-weight: 400; color: var(--gray-400);
}
.web-addon-cta-btn {
  display: inline-block; margin-top: auto;
  padding: 10px 18px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.web-addon-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201,168,76,0.3);
}

/* ─── WEB PAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .web-tech-section { padding: 5rem 2rem; }
  .web-tech-grid { grid-template-columns: 1fr 1fr; }
  .web-types-section { padding: 5rem 2rem; }
  .web-types-grid { grid-template-columns: 1fr 1fr; }
  .web-portfolio-grid { grid-template-columns: 1fr; }
  .web-addons-section { padding: 4rem 2rem; }
  .web-addons-grid { grid-template-columns: 1fr 1fr; }
  .web-mobile-preview { display: none; }
}
@media (max-width: 640px) {
  .web-tech-grid { grid-template-columns: 1fr; }
  .web-types-grid { grid-template-columns: 1fr; }
  .web-addons-grid { grid-template-columns: 1fr; }
}



















































/* ════════════════════════════════════════════════════════════════════════════════════════════
   MAINTENANCE SERVICE PAGE STYLES
   ════════════════════════════════════════════════════════════════════════════════════════════ */
 
/* ─── HERO DASHBOARD VISUAL ─── */
.maint-dashboard {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 1.8rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
}
.maint-dashboard-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.maint-dashboard-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--white);
}
.maint-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #28CA41;
  box-shadow: 0 0 0 3px rgba(40,202,65,0.2);
  animation: pulse 2s ease-in-out infinite;
}
.maint-dashboard-sub {
  font-size: 11px; color: rgba(255,255,255,0.3);
}
 
/* Metrics row */
.maint-metrics-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0.8rem; margin-bottom: 1.5rem;
}
.maint-metric {
  text-align: center; padding: 1rem 0.5rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.maint-metric--green { border-color: rgba(40,202,65,0.2); }
.maint-metric--gold  { border-color: rgba(201,168,76,0.2); }
.maint-metric-val {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--white); line-height: 1;
}
.maint-metric--green .maint-metric-val { color: #28CA41; }
.maint-metric--gold  .maint-metric-val { color: var(--gold); }
.maint-metric-lbl {
  font-size: 11px; color: rgba(255,255,255,0.4);
  margin-top: 4px;
}
 
/* Status checks */
.maint-checks {
  display: flex; flex-direction: column;
  gap: 8px; margin-bottom: 1.5rem;
}
.maint-check {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.maint-check--pass { border-left: 3px solid #28CA41; }
.maint-check--warn { border-left: 3px solid #e67e22; }
.maint-check-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(40,202,65,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #28CA41;
  flex-shrink: 0;
}
.maint-check-icon--warn {
  background: rgba(230,126,34,0.15);
  color: #e67e22;
}
.maint-check-label {
  font-size: 12px; color: rgba(255,255,255,0.7);
  flex: 1;
}
.maint-check-status {
  font-size: 11px; color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.maint-check-status--warn { color: #e67e22; }
 
/* Uptime bar */
.maint-uptime-bar-section { margin-top: 0.5rem; }
.maint-uptime-label {
  font-size: 11px; color: rgba(255,255,255,0.3);
  margin-bottom: 6px;
}
.maint-uptime-bars {
  display: flex; gap: 2px; height: 24px;
  flex-wrap: nowrap; overflow: hidden;
}
.maint-uptime-bar {
  flex: 1; min-width: 3px;
  border-radius: 2px;
}
.maint-uptime-bar--up   { background: #28CA41; opacity: 0.8; }
.maint-uptime-bar--down { background: #e74c3c; }
.maint-uptime-legend {
  display: flex; gap: 1rem; margin-top: 6px;
}
.maint-uptime-legend-item {
  font-size: 10px; color: rgba(255,255,255,0.3);
}
.maint-uptime-legend-item--up   { color: #28CA41; }
.maint-uptime-legend-item--down { color: #e74c3c; }
 
/* ─── FREE INCLUSIONS SECTION ─── */
.svc-free-includes {
  padding: 8rem 4rem;
  background: var(--off-white);
  position: relative; overflow: hidden;
}
.svc-free-includes-inner {
  max-width: 1200px; margin: 0 auto;
}
.svc-free-includes-header { margin-bottom: 3.5rem; }
 
.svc-free-includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
 
/* Free card */
.svc-free-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.svc-free-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.svc-free-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.08);
}
.svc-free-card:hover::before { transform: scaleX(1); }
 
/* Featured card */
.svc-free-card--featured {
  background: var(--navy);
  border-color: rgba(201,168,76,0.25);
}
.svc-free-card--featured h3 { color: var(--white); }
.svc-free-card--featured p  { color: rgba(255,255,255,0.55); }
.svc-free-card--featured::before {
  background: linear-gradient(90deg, var(--gold), #F0C040);
}
 
/* CTA card */
.svc-free-card--cta {
  background: var(--navy);
  border-color: rgba(201,168,76,0.3);
  align-items: center; justify-content: center;
  text-align: center;
}
.svc-free-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.svc-free-cta-icon {
  font-size: 32px; color: var(--gold);
  animation: spin 8s linear infinite;
}
.svc-free-card--cta h3 { color: var(--white); font-size: 18px; }
.svc-free-card--cta p { color: rgba(255,255,255,0.5); font-size: 13px; }
.svc-free-total {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
 
/* Card top row */
.svc-free-card-top {
  display: flex; align-items: center;
  justify-content: space-between; gap: 0.5rem;
}
.svc-free-icon { font-size: 28px; }
.svc-free-value-badge {
  font-size: 11px; font-weight: 700;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 3px 10px;
  white-space: nowrap;
}
.svc-free-value-badge--gold {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
}
.svc-free-card--featured .svc-free-value-badge {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
}
 
.svc-free-card h3 {
  font-size: 16px; font-weight: 700;
  color: var(--text);
}

.svc-free-card--featured h3, .svc-free-card--cta h3 {
  color: var(--white);
}

.svc-free-card p {
  font-size: 13px; line-height: 1.7;
  color: var(--gray-600); flex: 1;
}

.svc-free-card--cta p {color: var(--gray-400);}
 
/* Card footer */
.svc-free-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.svc-free-card--featured .svc-free-card-footer {
  border-top-color: rgba(255,255,255,0.08);
}
.svc-free-available {
  font-size: 12px; font-weight: 600; color: var(--gray-400);
}
.svc-free-available--gold { color: var(--gold); }
 
/* ─── MAINTENANCE RESPONSIVE ─── */
@media (max-width: 1024px) {
  .svc-free-includes { padding: 5rem 2rem; }
  .svc-free-includes-grid { grid-template-columns: 1fr 1fr; }
  .maint-metrics-row { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px) {
  .svc-free-includes-grid { grid-template-columns: 1fr; }
  .maint-metrics-row { grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
  .maint-metric-val { font-size: 18px; }
}
 



/* ─── MAINTENANCE PROOF SECTION ─── */
.maint-clients-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.maint-clients-card-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--gray-600);
  margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.maint-clients-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #28CA41;
  box-shadow: 0 0 0 3px rgba(40,202,65,0.2);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.maint-clients-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 1.2rem;
}
.maint-client-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
}
.maint-client-icon { font-size: 18px; flex-shrink: 0; }
.maint-client-body { flex: 1; }
.maint-client-name {
  font-size: 13px; font-weight: 600; color: var(--gray-600);
}
.maint-client-plan {
  font-size: 11px; color: var(--gray-400);
}
.maint-client-status {
  font-size: 11px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.maint-client-status--live { color: #28CA41; }

/* Uptime bar */
.maint-clients-uptime {
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.maint-clients-uptime-label {
  font-size: 11px; color: var(--gray-400);
  margin-bottom: 6px;
}
.maint-clients-uptime-bar {
  height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden; margin-bottom: 4px;
}
.maint-clients-uptime-fill {
  height: 100%; width: 99.9%;
  background: linear-gradient(90deg, #28CA41, rgba(40,202,65,0.6));
  border-radius: 3px;
  animation: barGrowH 1.5s var(--transition) forwards;
  transform-origin: left; transform: scaleX(0);
}
.maint-clients-uptime-val {
  font-size: 12px; font-weight: 700; color: #28CA41;
  text-align: right;
}
































































/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   BRANDING & IDENTITY SERVICE PAGE — styles.css additions
   Append this block to the bottom of styles.css
   All classes prefixed br- to avoid collisions
   ════════════════════════════════════════════════════════════════════════════════════════════════ */


/* ─── HERO — Identity Preview Mockup ─── */
.br-identity-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Logo Card */
.br-logo-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(10px);
}
.br-logo-card-label,
.br-palette-label,
.br-type-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

/* Main logo layout */
.br-logo-showcase {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.br-logo-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.br-logo-mark {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.br-logo-mark-inner {
  width: 22px;
  height: 22px;
  background: var(--navy);
  border-radius: 5px;
  transform: rotate(45deg);
}
.br-logo-wordmark {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.br-logo-name {
  width: 110px;
  height: 10px;
  background: rgba(255,255,255,0.7);
  border-radius: 5px;
}
.br-logo-tagline {
  width: 75px;
  height: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: 5px;
}

/* Logo variants */
.br-logo-variants {
  display: flex;
  gap: 0.6rem;
}
.br-logo-var {
  flex: 1;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.br-logo-var--dark  { background: var(--navy); }
.br-logo-var--light { background: rgba(255,255,255,0.9); }
.br-logo-var--icon  {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  justify-content: center;
}
.br-logo-var-mark {
  width: 16px;
  height: 16px;
  background: var(--gold);
  border-radius: 4px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.br-logo-var-mark--light { background: var(--navy); }
.br-logo-var-text {
  width: 40px;
  height: 6px;
  background: rgba(255,255,255,0.6);
  border-radius: 3px;
}
.br-logo-var-text--light { background: rgba(13,27,62,0.5); }
.br-logo-var-icon {
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.3);
  border-radius: 5px;
  transform: rotate(45deg);
}

/* Palette Card */
.br-palette-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.br-palette-swatches {
  display: flex;
  gap: 0.5rem;
}
.br-swatch {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 0 4px 4px;
}
.br-swatch-name {
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}

/* Typography Card */
.br-type-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.br-type-display {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.br-type-name {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
}


/* ─── COMPARE — Before / After ─── */
.br-showcase-section {
  position: relative;
  margin-top: -1px;
  padding: 100px 0;
  background: var(--navy);
}

.br-showcase-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(201, 168, 76, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.br-showcase-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.br-showcase-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.br-showcase-header .section-h2 { color: var(--white); }
.br-showcase-header .section-sub { color: rgba(255,255,255,0.55); max-width: 560px; margin: 0 auto; }

.br-compare-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
.br-compare-side { display: flex; flex-direction: column; gap: 1rem; }
.br-compare-tag {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: fit-content;
}
.br-compare-tag--before {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.1);
}
.br-compare-tag--after {
  background: rgba(201,168,76,0.15);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.3);
}

.br-compare-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.br-compare-card--after {
  background: rgba(255,255,255,0.07);
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.1), 0 20px 60px rgba(0,0,0,0.3);
}

/* Before card internals */
.br-before-logo-box {
  background: rgba(255,255,255,0.08);
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
}
.br-before-meta { display: flex; flex-direction: column; gap: 0.4rem; }
.br-before-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.br-before-line--name { width: 60%; }
.br-before-line--tag  { width: 40%; }

.br-before-colours {
  display: flex;
  gap: 0.4rem;
}
.br-before-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.br-pain-item, .br-win-item {
  font-size: 0.8rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
}
.br-win-item { color: rgba(255,255,255,0.85); }

/* After card internals */
.br-after-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.br-after-mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 9px;
  transform: rotate(0deg);
  flex-shrink: 0;
}
.br-after-wordmark { display: flex; flex-direction: column; gap: 4px; }
.br-after-name {
  width: 90px;
  height: 9px;
  background: rgba(255,255,255,0.75);
  border-radius: 4px;
}
.br-after-tagline {
  width: 60px;
  height: 5px;
  background: var(--gold);
  opacity: 0.6;
  border-radius: 4px;
}

.br-after-palette {
  display: flex;
  gap: 0.4rem;
}
.br-after-swatch {
  flex: 1;
  height: 28px;
  border-radius: 6px;
}

.br-after-type { display: flex; flex-direction: column; gap: 0.3rem; }
.br-after-type-h {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.br-after-type-b {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
}

/* Arrow divider */
.br-compare-arrow {
  font-size: 2rem;
  color: var(--gold);
  font-weight: 300;
  opacity: 0.6;
  text-align: center;
}

@media (max-width: 768px) {
  .br-compare-wrap {
    grid-template-columns: 1fr;
  }
  .br-compare-arrow {
    transform: rotate(90deg);
    font-size: 1.5rem;
  }
}


/* ─── BRAND ELEMENTS DEEP DIVE ─── */
.br-elements-section {
  padding: 100px 0;
  background: var(--gray-100);
}
.br-elements-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.br-elements-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.br-elements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.br-element-item {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--transition), box-shadow 0.3s var(--transition);
}
.br-element-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(13,27,62,0.1);
}

/* Visual panels */
.br-element-visual {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.br-element-visual--mark   { background: linear-gradient(135deg, var(--navy), var(--navy-light)); }
.br-element-visual--colour { background: var(--off-white); }
.br-element-visual--type   { background: var(--navy); }
.br-element-visual--voice  { background: linear-gradient(135deg, var(--navy-mid), var(--navy-light)); }

/* Mark demo */
.br-mark-demo {
  position: relative;
  width: 80px;
  height: 80px;
}
.br-mark-shape {
  position: absolute;
  border-radius: 6px;
}
.br-mark-shape--1 {
  width: 40px; height: 40px;
  background: var(--gold);
  top: 0; left: 20px;
  transform: rotate(45deg);
  animation: brSpin1 6s ease-in-out infinite;
}
.br-mark-shape--2 {
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.25);
  bottom: 0; left: 0;
  transform: rotate(20deg);
  animation: brSpin2 8s ease-in-out infinite;
}
.br-mark-shape--3 {
  width: 16px; height: 16px;
  background: rgba(201,168,76,0.4);
  bottom: 8px; right: 0;
  transform: rotate(-15deg);
  animation: brSpin3 5s ease-in-out infinite;
}
@keyframes brSpin1 { 0%,100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(50deg) scale(1.08); } }
@keyframes brSpin2 { 0%,100% { transform: rotate(20deg);  } 50% { transform: rotate(30deg);  } }
@keyframes brSpin3 { 0%,100% { transform: rotate(-15deg); } 50% { transform: rotate(-25deg); } }

/* Colour demo */
.br-colour-demo {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  height: 80px;
}
.br-colour-block {
  border-radius: 8px;
  width: 44px;
}
.br-colour-block--primary   { background: #0D1B3E; height: 100%; }
.br-colour-block--secondary { background: #C9A84C; height: 80%; }
.br-colour-block--accent    { background: #1e3060; height: 65%; }
.br-colour-block--neutral   { background: #9AA3B2; height: 50%; }

/* Type demo */
.br-type-demo {
  text-align: center;
  padding: 0 2rem;
}
.br-type-demo-h {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.br-type-demo-b {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* Voice demo */
.br-voice-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.br-voice-bubble {
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 16px 16px 16px 4px;
  padding: 0.85rem 1.25rem;
  max-width: 280px;
}
.br-voice-bubble span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
}
.br-voice-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* Element body */
.br-element-body {
  padding: 1.5rem;
}
.br-element-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.br-element-body p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--gray-600);
}

@media (max-width: 768px) {
  .br-elements-grid { grid-template-columns: 1fr; }
  .br-element-visual { height: 140px; }
}


/* ─── HERO MOCKUP RESPONSIVE ─── */
@media (max-width: 900px) {
  .br-identity-preview { max-width: 100%; }
  .br-logo-card, .br-palette-card, .br-type-card { padding: 1rem; }
}


/* ─── BRANDING PAGE — PROOF SYSTEM CARD ─── */
.br-proof-system-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem;
  margin-bottom: 1.5rem;
}
.br-proof-system-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 1.5rem;
}
.br-proof-logo-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.br-proof-mark {
  font-size: 36px; color: var(--navy);
  font-family: 'Playfair Display', serif;
  font-weight: 900; line-height: 1;
}
.br-proof-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 900; color: var(--navy);
  line-height: 1;
}
.br-proof-brand-name span { color: var(--gold); }
.br-proof-brand-tag {
  font-size: 11px; color: var(--gray-400); margin-top: 4px;
}
.br-proof-palette-row {
  display: flex; gap: 8px; margin-bottom: 1.5rem;
}
.br-proof-swatch {
  flex: 1; height: 52px; border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.br-proof-swatch--light { border: 1px solid var(--gray-200); }
.br-proof-swatch span {
  font-size: 9px; color: rgba(255,255,255,0.7);
  font-weight: 500;
}
.br-proof-type-row {
  display: flex; gap: 1rem; align-items: stretch;
}
.br-proof-type-item { flex: 1; }
.br-proof-type-divider {
  width: 1px; background: var(--gray-200); flex-shrink: 0;
}
.br-proof-type-name {
  font-size: 10px; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.br-proof-type-role {
  font-size: 10px; color: var(--gray-400); margin-top: 6px;
}






























/* ═══════════════════════════════════════════════════════════════
   UI/UX DESIGN SERVICE PAGE — styles.css additions
   Append this block to the bottom of styles.css
   All new classes prefixed ux- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─── HERO — Screen Mockup ─── */
.ux-screen-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Browser frame */
.ux-browser-frame {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.ux-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ux-browser-dots {
  display: flex;
  gap: 5px;
}
.ux-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.ux-dot--red   { background: #FF5F57; }
.ux-dot--amber { background: #FEBC2E; }
.ux-dot--green { background: #28C840; }
.ux-browser-url {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
  flex: 1;
  text-align: center;
}

/* Browser screen content */
.ux-browser-screen {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Mock nav */
.ux-mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ux-mock-logo {
  width: 60px;
  height: 8px;
  background: var(--gold);
  opacity: 0.7;
  border-radius: 4px;
}
.ux-mock-nav-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.ux-mock-link {
  width: 28px;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
.ux-mock-cta-btn {
  width: 40px;
  height: 16px;
  background: var(--gold);
  opacity: 0.8;
  border-radius: 6px;
}

/* Mock hero */
.ux-mock-hero {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0;
}
.ux-mock-h1 {
  width: 85%;
  height: 10px;
  background: rgba(255,255,255,0.7);
  border-radius: 5px;
}
.ux-mock-h1--short { width: 60%; background: rgba(255,255,255,0.5); }
.ux-mock-sub {
  width: 90%;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
.ux-mock-sub--short { width: 70%; }
.ux-mock-btns {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.ux-mock-btn-primary {
  width: 70px;
  height: 18px;
  background: var(--gold);
  opacity: 0.85;
  border-radius: 8px;
}
.ux-mock-btn-outline {
  width: 55px;
  height: 18px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 8px;
}

/* Mock cards */
.ux-mock-cards {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.ux-mock-card {
  flex: 1;
  height: 42px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}
.ux-mock-card--featured {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
  transform: scaleY(1.08);
  transform-origin: bottom;
}

/* Mobile frame */
.ux-mobile-frame {
  position: absolute;
  bottom: -20px;
  right: -30px;
  width: 100px;
  background: rgba(13,27,62,0.95);
  border: 1.5px solid rgba(201,168,76,0.3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.ux-mobile-notch {
  width: 32px;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 0 0 5px 5px;
  margin: 0 auto;
}
.ux-mobile-screen {
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ux-mob-hero-img {
  width: 100%;
  height: 32px;
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(30,48,96,0.4));
  border-radius: 6px;
}
.ux-mob-heading {
  width: 80%;
  height: 6px;
  background: rgba(255,255,255,0.65);
  border-radius: 3px;
}
.ux-mob-sub {
  width: 90%;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
}
.ux-mob-sub--short { width: 65%; }
.ux-mob-btn {
  width: 70%;
  height: 14px;
  background: var(--gold);
  opacity: 0.8;
  border-radius: 6px;
  margin-top: 2px;
}
.ux-mob-cards {
  display: flex;
  gap: 3px;
}
.ux-mob-card {
  flex: 1;
  height: 22px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
}

/* Annotation callouts */
.ux-annotation {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.ux-annotation--1 { top: 38px; left: -80px; }
.ux-annotation--2 { top: 100px; left: -80px; }
.ux-annotation-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.2);
}
.ux-annotation-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .ux-annotation { display: none; }
  .ux-mobile-frame { right: -10px; width: 80px; }
}


/* ─── PRINCIPLES SECTION ─── */
.ux-principles-section {
  position: relative;
  padding: 100px 0;
  background: var(--navy);
  margin-top: -1px;
}

.ux-principles-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(201, 168, 76, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.ux-principles-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ux-principles-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.ux-principles-header .section-h2 { color: var(--white); }
.ux-principles-header .section-sub {
  color: rgba(255,255,255,0.5);
  max-width: 600px;
  margin: 0.75rem auto 0;
}

.ux-principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.ux-principle-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.3s var(--transition), transform 0.3s var(--transition);
}
.ux-principle-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-3px);
}

.ux-principle-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  opacity: 0.7;
  line-height: 1;
}

.ux-principle-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.ux-principle-body p {
  font-size: 0.87rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
}

.ux-principle-stat {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ux-principle-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.1;
}
.ux-principle-stat-lbl {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .ux-principles-grid { grid-template-columns: 1fr; }
}


/* ─── WHAT WE DESIGN FOR ─── */
.ux-types-section {
  padding: 100px 0;
  background: var(--gray-100);
}
.ux-types-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ux-types-header {
  text-align: center;
  margin-bottom: 3rem;
}

.ux-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ux-type-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.3s var(--transition), box-shadow 0.3s var(--transition), border-color 0.3s;
}
.ux-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.3);
}

.ux-type-icon {
  font-size: 2rem;
  line-height: 1;
}
.ux-type-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.ux-type-card p {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--gray-600);
  flex: 1;
}
.ux-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.ux-type-tags span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.2);
}

@media (max-width: 1024px) {
  .ux-types-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ux-types-grid { grid-template-columns: 1fr; }
}

/* ─── UI/UX PAGE — PROOF FLOW CARD ─── */
.ux-proof-flow-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem;
  margin-bottom: 1.5rem;
}
.ux-proof-flow-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 1.5rem;
}
.ux-proof-flow-compare {
  display: flex; align-items: flex-start;
  gap: 1rem;
}
.ux-proof-flow-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ux-proof-flow-col-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px; padding: 4px 10px;
  border-radius: 100px; text-align: center;
}
.ux-proof-flow-col-title--bad {
  background: rgba(231,76,60,0.1); color: #e74c3c;
}
.ux-proof-flow-col-title--good {
  background: rgba(40,202,65,0.1); color: #28CA41;
}
.ux-proof-step {
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  text-align: center;
}
.ux-proof-step--bad {
  background: rgba(231,76,60,0.06);
  border: 1px solid rgba(231,76,60,0.15);
  color: #c0392b;
}
.ux-proof-step--good {
  background: rgba(40,202,65,0.06);
  border: 1px solid rgba(40,202,65,0.2);
  color: #1a9e30;
}
.ux-proof-arrow-down {
  text-align: center; font-size: 12px;
  color: var(--gray-400); line-height: 1;
}
.ux-proof-count {
  font-size: 11px; font-weight: 700;
  text-align: center; margin-top: 6px;
  padding: 6px; border-radius: 8px;
}
.ux-proof-count--bad {
  background: rgba(231,76,60,0.08); color: #e74c3c;
}
.ux-proof-count--good {
  background: rgba(40,202,65,0.08); color: #28CA41;
}
.ux-proof-vs {
  font-size: 13px; font-weight: 700;
  color: var(--gray-400); align-self: center;
  padding: 0 0.5rem; flex-shrink: 0;
}































/* ═══════════════════════════════════════════════════════════════
   PROFESSIONAL EMAIL SERVICE PAGE — styles.css additions
   Append this block to the bottom of styles.css
   All new classes prefixed em- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─── HERO — Inbox Mockup Card ─── */
.em-inbox-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* Platform tabs */
.em-platform-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.em-platform-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  cursor: default;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  flex: 1;
}
.em-platform-tab--active {
  color: var(--white);
  border-bottom-color: var(--gold);
}
.em-platform-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}
.em-platform-icon--google { background: #4285F4; color: white; }
.em-platform-icon--ms     { background: #0078D4; color: white; }

/* Inbox header */
.em-inbox-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.em-inbox-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  flex: 1;
}
.em-inbox-search-icon { font-size: 0.7rem; opacity: 0.5; }
.em-inbox-search-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
.em-inbox-address {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.em-inbox-addr-label {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}
.em-inbox-addr-val {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
}

/* Email list */
.em-inbox-list {
  display: flex;
  flex-direction: column;
}
.em-inbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.em-inbox-item:last-child { border-bottom: none; }
.em-inbox-item--unread { background: rgba(255,255,255,0.04); }
.em-inbox-item:hover { background: rgba(255,255,255,0.06); }

.em-inbox-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.em-inbox-avatar--a { background: #1a73e8; color: white; }
.em-inbox-avatar--b { background: #0f9d58; color: white; }
.em-inbox-avatar--c { background: #C9A84C; color: var(--navy); }
.em-inbox-avatar--d { background: #ea4335; color: white; }

.em-inbox-body { flex: 1; min-width: 0; }
.em-inbox-from {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.em-inbox-item:not(.em-inbox-item--unread) .em-inbox-from {
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.em-inbox-subject {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.em-inbox-time {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.em-inbox-item--unread .em-inbox-time { color: var(--gold); font-weight: 600; }

/* Compose strip */
.em-compose-strip {
  padding: 0.6rem 1rem;
  background: rgba(201,168,76,0.08);
  border-top: 1px solid rgba(201,168,76,0.15);
}
.em-compose-from {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.em-compose-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}
.em-compose-val {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
}
.em-compose-verified {
  font-size: 0.6rem;
  font-weight: 700;
  color: #0f9d58;
  background: rgba(15,157,88,0.12);
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: 0.04em;
}


/* ─── PROOF SECTION — Client Roster Card ─── */
/* (sp-proof-section, sp-case-preview, sp-case-metrics etc
    are already defined in styles.css from seo.html —
    we only need the new em-proof-* classes below) */

.em-proof-clients-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.em-proof-clients-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.em-proof-client-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.em-proof-client-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.em-proof-client-item:last-child { border-bottom: none; padding-bottom: 0; }

.em-proof-client-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.em-proof-client-body { flex: 1; }
.em-proof-client-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 2px;
}
.em-proof-client-industry {
  font-size: 0.72rem;
  color: var(--gray-400);
  margin-bottom: 4px;
}
.em-proof-client-detail {
  font-size: 0.68rem;
  color: var(--gray-400);
  line-height: 1.4;
}
.em-proof-client-check {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Common items strip */
.em-proof-common {
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.em-proof-common-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.em-proof-common-items {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.em-proof-common-item {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 500;
}


/* ─── PLATFORM COMPARISON SECTION ─── */
.em-platform-section {
  padding: 100px 0;
  background: var(--navy);
}
.em-platform-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.em-platform-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.em-platform-header .section-h2 { color: var(--white); }
.em-platform-header .section-sub {
  color: rgba(255,255,255,0.5);
  max-width: 580px;
  margin: 0.75rem auto 0;
}

.em-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.em-platform-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  transition: transform 0.3s var(--transition), border-color 0.3s;
}
.em-platform-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,168,76,0.25);
}
.em-platform-card--featured {
  border-color: rgba(201,168,76,0.3);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.1), 0 20px 60px rgba(0,0,0,0.3);
}

.em-platform-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  white-space: nowrap;
}

.em-platform-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.em-platform-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0.25rem;
}
.em-platform-logo--google { background: #4285F4; }
.em-platform-logo--ms     { background: #0078D4; }
.em-platform-logo--zoho   { background: #C8202F; }

.em-platform-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}
.em-platform-tagline {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}

.em-platform-price {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}
.em-platform-price strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
}
.em-platform-price span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  display: block;
}
.em-platform-note {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
  line-height: 1.4;
}

.em-platform-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 1rem;
}
.em-platform-features li {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
  padding-left: 0.25rem;
}
.em-platform-features li:has(✗) { color: rgba(255,255,255,0.3); }

.em-platform-best {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  padding: 0.75rem 0.85rem;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border-left: 2px solid var(--gold);
}
.em-platform-best span {
  font-weight: 700;
  color: var(--gold);
}

.em-platform-note {
  margin-top: 2.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.em-platform-note > span { font-size: 1.3rem; flex-shrink: 0; }
.em-platform-note p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  flex: 1;
}

@media (max-width: 1024px) {
  .em-compare-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .em-compare-grid { max-width: 100%; }
}

/* ─── HERO INBOX RESPONSIVE ─── */
@media (max-width: 900px) {
  .em-inbox-card { max-width: 100%; }
  .em-inbox-addr-val { font-size: 0.6rem; }
}
@media (max-width: 600px) {
  .em-inbox-address { display: none; }
}





























/* ═══════════════════════════════════════════════════════════════
   ANDROID APPS SERVICE PAGE — styles.css additions
   Append this block to the bottom of styles.css
   All new classes prefixed ap- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─── HERO — Phone App Mockup ─── */
.ap-phone-wrap {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* Phone frame */
.ap-phone-frame {
  background: var(--navy);
  border: 2px solid rgba(201,168,76,0.25);
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
}
.ap-phone-notch {
  width: 90px;
  height: 22px;
  background: rgba(0,0,0,0.8);
  border-radius: 0 0 18px 18px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.ap-phone-screen {
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

/* Status bar */
.ap-app-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px 2px;
}
.ap-statusbar-time {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.ap-statusbar-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ap-icon-bar {
  width: 14px;
  height: 7px;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
}
.ap-icon-bar--signal {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.ap-icon-bar--battery {
  width: 18px;
  height: 9px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 2px;
  position: relative;
  background: transparent;
}
.ap-icon-bar--battery::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 65%;
  height: calc(100% - 4px);
  background: #28C840;
  border-radius: 1px;
}

/* Nav bar */
.ap-app-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ap-navbar-back {
  font-size: 0.9rem;
  color: var(--gold);
  width: 20px;
}
.ap-navbar-title {
  width: 80px;
  height: 8px;
  background: rgba(255,255,255,0.6);
  border-radius: 4px;
}
.ap-navbar-action {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}

/* Hero card */
.ap-app-hero-card {
  margin: 10px 12px;
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(30,48,96,0.6));
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ap-hero-card-label {
  width: 60px;
  height: 6px;
  background: rgba(255,255,255,0.4);
  border-radius: 3px;
}
.ap-hero-card-amount {
  width: 100px;
  height: 14px;
  background: rgba(255,255,255,0.8);
  border-radius: 6px;
}
.ap-hero-card-sub {
  width: 70px;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
}
.ap-hero-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.ap-hero-card-btn {
  flex: 1;
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
}
.ap-hero-card-btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border: none;
}

/* Section label */
.ap-app-section-label {
  width: 80px;
  height: 7px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  margin: 8px 14px 4px;
}

/* App list */
.ap-app-list {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  gap: 2px;
  flex: 1;
}
.ap-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ap-list-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}
.ap-list-icon--green  { background: rgba(40,200,64,0.25);  border: 1px solid rgba(40,200,64,0.3); }
.ap-list-icon--blue   { background: rgba(66,133,244,0.25); border: 1px solid rgba(66,133,244,0.3); }
.ap-list-icon--gold   { background: rgba(201,168,76,0.2);  border: 1px solid rgba(201,168,76,0.3); }
.ap-list-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ap-list-title {
  width: 70%;
  height: 6px;
  background: rgba(255,255,255,0.55);
  border-radius: 3px;
}
.ap-list-sub {
  width: 50%;
  height: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
.ap-list-amount {
  width: 36px;
  height: 7px;
  border-radius: 3px;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.ap-list-amount--green { background: rgba(40,200,64,0.5); }
.ap-list-amount--gold  { background: rgba(201,168,76,0.5); }

/* Bottom navigation */
.ap-app-bottomnav {
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 6px 4px;
  margin-top: auto;
}
.ap-bottomnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0.35;
}
.ap-bottomnav-item--active { opacity: 1; }
.ap-bottomnav-icon {
  font-size: 1rem;
  color: var(--gold);
  line-height: 1;
}
.ap-bottomnav-label {
  width: 24px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
}
.ap-bottomnav-item--active .ap-bottomnav-label {
  background: var(--gold);
}

/* M-Pesa & Play Store badges */
.ap-mpesa-badge,
.ap-store-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  padding: 0.45rem 0.85rem 0.45rem 0.55rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.ap-mpesa-badge { left: -50px; top: 80px; border-color: rgba(40,200,64,0.3); }
.ap-store-badge { right: -45px; top: 180px; }

.ap-mpesa-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00A550;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
}
.ap-store-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00C853, #1565C0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: white;
  flex-shrink: 0;
}
.ap-mpesa-title, .ap-store-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}
.ap-mpesa-sub, .ap-store-sub {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.45);
}
.ap-mpesa-check {
  font-size: 0.7rem;
  color: #00C853;
  font-weight: 700;
  margin-left: 2px;
}

@media (max-width: 900px) {
  .ap-mpesa-badge { left: -30px; }
  .ap-store-badge { right: -30px; }
}
@media (max-width: 600px) {
  .ap-mpesa-badge, .ap-store-badge { display: none; }
  .ap-phone-wrap { max-width: 220px; }
}


/* ─── BUILT FOR KENYA SECTION ─── */
.ap-kenya-section {
  position: relative;
  padding: 100px 0;
  background: var(--navy);
  margin-top: -1px;
}

.ap-kenya-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(201, 168, 76, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.ap-kenya-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ap-kenya-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.ap-kenya-header .section-h2 { color: var(--white); }
.ap-kenya-header .section-sub { color: rgba(255,255,255,0.5); max-width: 580px; margin: 0.75rem auto 0; }

.ap-kenya-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.ap-kenya-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.3s, transform 0.3s var(--transition);
}
.ap-kenya-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-3px);
}
.ap-kenya-card-icon { font-size: 2rem; line-height: 1; }
.ap-kenya-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}
.ap-kenya-card p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  flex: 1;
}
.ap-kenya-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto;
}
.ap-kenya-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.ap-kenya-stat-lbl {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
}

@media (max-width: 768px) { .ap-kenya-grid { grid-template-columns: 1fr; } }


/* ─── APP TYPES SECTION ─── */
.ap-types-section {
  padding: 100px 0;
  background: var(--gray-100);
}
.ap-types-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ap-types-header { text-align: center; margin-bottom: 3rem; }

.ap-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ap-type-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.3s var(--transition), box-shadow 0.3s, border-color 0.3s;
}
.ap-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.3);
}
.ap-type-icon { font-size: 2rem; line-height: 1; }
.ap-type-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.ap-type-card p  { font-size: 0.83rem; line-height: 1.6; color: var(--gray-600); flex: 1; }
.ap-type-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ap-type-tags span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 50px;
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.2);
}

@media (max-width: 1024px) { .ap-types-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ap-types-grid { grid-template-columns: 1fr; } }


/* ─── TECH STACK SECTION ─── */
.ap-tech-section {
  padding: 100px 0;
  background: var(--navy);
}
.ap-tech-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ap-tech-header { text-align: center; margin-bottom: 3.5rem; }
.ap-tech-header .section-h2 { color: var(--white); }
.ap-tech-header .section-sub { color: rgba(255,255,255,0.5); max-width: 540px; margin: 0.75rem auto 0; }

.ap-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ap-tech-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  transition: border-color 0.3s, transform 0.3s var(--transition);
}
.ap-tech-card:hover {
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-3px);
}
.ap-tech-card--featured {
  border-color: rgba(201,168,76,0.3);
  background: rgba(255,255,255,0.07);
}

.ap-tech-badge {
  position: absolute;
  top: -10px;
  left: 1.5rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
}

.ap-tech-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
}
.ap-tech-logo--kotlin  { background: linear-gradient(135deg, #7F52FF, #C811E1); }
.ap-tech-logo--flutter { background: linear-gradient(135deg, #02569B, #13B9FD); }
.ap-tech-logo--django  { background: #092E20; border: 1px solid rgba(255,255,255,0.15); }
.ap-tech-logo--firebase { font-size: 1.3rem; background: transparent; }

.ap-tech-card h3 { font-size: 0.92rem; font-weight: 700; color: var(--white); }
.ap-tech-card p  { font-size: 0.81rem; line-height: 1.6; color: rgba(255,255,255,0.5); flex: 1; }
.ap-tech-best-for {
  font-size: 0.7rem;
  color: var(--gold);
  line-height: 1.4;
  padding: 0.6rem 0.75rem;
  background: rgba(201,168,76,0.06);
  border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0;
}

@media (max-width: 1024px) { .ap-tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ap-tech-grid { grid-template-columns: 1fr; } }

/* Textarea in CTA form */
.sp-audit-form-card textarea {
  width: 100%;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
}


.sp-audit-form-card textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.sp-audit-form-card textarea::placeholder { color: rgba(255,255,255,0.3); }


/* ─── ANDROID APPS PAGE — PROOF STACK CARD ─── */
.ap-proof-stack-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem;
  margin-bottom: 1.5rem;
}
.ap-proof-stack-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 1.5rem;
}
.ap-proof-stack-items {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 1.5rem;
}
.ap-proof-stack-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}
.ap-proof-stack-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.ap-proof-stack-icon--kotlin  { background: #7f52ff; color: #fff; }
.ap-proof-stack-icon--mpesa   { background: #28CA41; color: #fff; }
.ap-proof-stack-icon--django  { background: #0D1B3E; color: var(--gold); }
.ap-proof-stack-icon--gps     { background: rgba(201,168,76,0.15); font-size: 16px; }
.ap-proof-stack-icon--offline { background: rgba(13,27,62,0.08); font-size: 16px; }
.ap-proof-stack-body { flex: 1; }
.ap-proof-stack-name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.ap-proof-stack-detail { font-size: 11px; color: var(--gray-400); }
.ap-proof-stack-check {
  font-size: 12px; font-weight: 700; color: #28CA41;
  flex-shrink: 0;
}
.ap-proof-devices {
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.ap-proof-devices-label {
  font-size: 11px; color: var(--gray-400);
  margin-bottom: 8px;
}
.ap-proof-devices-list {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ap-proof-devices-list span {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  border-radius: 100px;
}



































/* ═══════════════════════════════════════════════════════════════
   AI SOLUTIONS SERVICE PAGE — styles.css additions
   Append to bottom of styles.css
   All new classes prefixed ai- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─── HERO — Chat Window Mockup ─── */
.ai-chat-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.ai-chat-window {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}

/* Chat header */
.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ai-chat-avatar {
  position: relative;
  flex-shrink: 0;
}
.ai-chat-avatar-inner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.ai-chat-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  background: #28C840;
  border-radius: 50%;
  border: 2px solid rgba(13,27,62,0.9);
  animation: aiPulse 2s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.2); opacity: 0.7; }
}
.ai-chat-meta { flex: 1; }
.ai-chat-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.ai-chat-online {
  font-size: 0.65rem;
  color: #28C840;
  font-weight: 500;
}
.ai-chat-wa-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Chat body */
.ai-chat-body {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 220px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: none;
}
.ai-chat-body::-webkit-scrollbar { display: none; }

.ai-chat-date {
  text-align: center;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

/* Messages */
.ai-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 78%;
}
.ai-msg--bot  { align-self: flex-start; }
.ai-msg--user { align-self: flex-end; }

.ai-msg-bubble {
  padding: 0.5rem 0.85rem;
  border-radius: 16px;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 500;
}
.ai-msg--bot .ai-msg-bubble {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-radius: 4px 16px 16px 16px;
}
.ai-msg--user .ai-msg-bubble {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  font-weight: 600;
  border-radius: 16px 4px 16px 16px;
}
.ai-msg-time {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  padding: 0 4px;
}
.ai-msg--user .ai-msg-time { text-align: right; }

/* Typing indicator */
.ai-msg-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.6rem 0.85rem;
  min-width: 52px;
}
.ai-msg-typing span {
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  display: block;
  animation: aiTypingDot 1.2s ease-in-out infinite;
}
.ai-msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-msg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

/* Chat input bar */
.ai-chat-input-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ai-chat-input-field {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
}
.ai-chat-send-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Floating automation nodes */
.ai-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(13,27,62,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  padding: 0.35rem 0.75rem 0.35rem 0.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  pointer-events: none;
}
.ai-node--1 { top: 30px; left: -70px; border-color: rgba(201,168,76,0.2); }
.ai-node--2 { bottom: 80px; left: -60px; border-color: rgba(66,133,244,0.25); }
.ai-node--3 { bottom: 130px; right: -65px; border-color: rgba(40,200,64,0.2); }
.ai-node-icon { font-size: 0.85rem; }
.ai-node-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

@media (max-width: 900px) {
  .ai-node { display: none; }
  .ai-chat-wrap { max-width: 100%; }
}


/* ─── USE CASES SECTION ─── */
.ai-usecases-section {
  padding: 100px 0;
  background: var(--navy);
  position: relative;
  margin-top: -1px;
}

.ai-usecases-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(201, 168, 76, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}


.ai-usecases-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.ai-usecases-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.ai-usecases-header .section-h2 { color: var(--white); }
.ai-usecases-header .section-sub { color: rgba(255,255,255,0.5); max-width: 560px; margin: 0.75rem auto 0; }

.ai-usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ai-usecase-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.3s, transform 0.3s var(--transition);
}
.ai-usecase-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
}

.ai-usecase-industry {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}
.ai-usecase-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.ai-usecase-card p {
  font-size: 0.84rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  flex: 1;
}

.ai-usecase-result {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto;
}
.ai-usecase-result-icon {
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-usecase-result span:last-child {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

@media (max-width: 1024px) { .ai-usecases-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ai-usecases-grid { grid-template-columns: 1fr; } }

/* Textarea for audit form */
/* .sp-audit-form-card textarea {
  width: 100%;
  background: var(--input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--input-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: var(--white);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
}
.sp-audit-form-card textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.sp-audit-form-card textarea::placeholder { color: rgba(255,255,255,0.3); } */


/* ─── AI PAGE — PROOF STACK CARD ─── */
.ai-proof-stack-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2rem;
  margin-bottom: 1.5rem;
}
.ai-proof-stack-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 1.5rem;
}
.ai-proof-stack-items {
  display: flex; flex-direction: column;
  gap: 10px; margin-bottom: 1.5rem;
}
.ai-proof-stack-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}
.ai-proof-stack-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ai-proof-stack-icon--wa     { background: rgba(37,211,102,0.15); }
.ai-proof-stack-icon--n8n    { background: rgba(240,192,64,0.15); }
.ai-proof-stack-icon--dash   { background: rgba(52,152,219,0.12); }
.ai-proof-stack-icon--web    { background: rgba(13,27,62,0.08); }
.ai-proof-stack-icon--follow { background: rgba(155,89,182,0.1); }
.ai-proof-stack-body { flex: 1; }
.ai-proof-stack-name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.ai-proof-stack-detail { font-size: 11px; color: var(--gray-400); }
.ai-proof-stack-status {
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ai-proof-stack-status--live { color: #28CA41; }

.ai-proof-result-strip {
  display: flex; gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.ai-proof-result-item { flex: 1; text-align: center; }
.ai-proof-result-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--navy);
  line-height: 1;
}
.ai-proof-result-lbl {
  font-size: 10px; color: var(--gray-400); margin-top: 4px;
}


































































/* ═══════════════════════════════════════════════════════════════
   BLOG PAGE — styles.css additions
   Append to bottom of styles.css
   All classes prefixed blog- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   SHARED INNER WIDTH
   ───────────────────────────────────────────── */
.blog-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}


/* ─────────────────────────────────────────────
   IMAGE FALLBACK SYSTEM
   Emoji placeholder shown while/if image missing.
   onload="this.previousElementSibling.style.display='none'"
   hides the fallback the moment the real image loads.
   onerror="this.style.display='none'" hides the broken img tag.
   ───────────────────────────────────────────── */
.blog-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  z-index: 0;
  opacity: 0.6;
}
/* Real image sits above fallback in z-order */
.blog-card-img img,
.blog-featured-img img {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────
   CATEGORY BADGES — overlaid on images
   ───────────────────────────────────────────── */
.blog-cat-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* pointer-events: none; */
  transition: transform .25s ease, filter .25s ease,;
}

.blog-cat-badge:hover {
  transform: translateY(-.5px) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,0.3) !important;
}

.blog-cat-badge--seo      { background: rgba(52,152,219,0.9);  color: #fff; }
.blog-cat-badge--web      { background: rgba(155,89,182,0.9);  color: #fff; }
.blog-cat-badge--marketing{ background: rgba(230,126,34,0.9);  color: #fff; }
.blog-cat-badge--business { background: rgba(39,174,96,0.9);   color: #fff; }
.blog-cat-badge--case     { background: rgba(201,168,76,0.95); color: var(--navy); }




/* ─────────────────────────────────────────────
   BLOG HERO — lean, no clutter
   ───────────────────────────────────────────── */
.blog-hero {
  position: relative;
  padding: 140px 2rem 80px;
  background: var(--navy);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.blog-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}
.blog-hero .hero-eyebrow {
  justify-content: center;
  margin-bottom: 1.25rem;
}
.blog-hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.blog-hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.blog-hero-sub {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────
   STICKY FILTER TOOLBAR
   Matches svc-subnav pattern from services.html
   Sticks under the main navbar (nav is ~72px)
   ───────────────────────────────────────────── */
.blog-toolbar {
  position: sticky;
  /* top: 72px;               height of the main navbar */
  top: 80px;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 2px 12px rgba(13,27,62,0.06);
  transition: box-shadow 0.3s;
}
.blog-toolbar.scrolled {
  box-shadow: 0 4px 20px rgba(13,27,62,0.1);
}
.blog-toolbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  overflow: hidden;
}

/* Search */
.blog-toolbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-right: 1rem;
  color: var(--gray-400);
}
.blog-toolbar-search svg { flex-shrink: 0; }
#blogSearchInput {
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  background: transparent;
  /* width: 160px; */
  width: 230px;
  transition: width 0.3s;
  font-family: inherit;
}
#blogSearchInput::placeholder { color: var(--gray-400); }
#blogSearchInput:focus { width: 220px; }
.blog-search-clear {
  border: none;
  background: var(--gray-200);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.blog-search-clear:hover { background: var(--gray-300); }

/* Separator */
.blog-toolbar-sep {
  width: 1px;
  height: 24px;
  background: var(--gray-200);
  flex-shrink: 0;
  margin: 0 0.75rem;
}

/* Category pills — scrollable container */
.blog-toolbar-cats {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  padding: 0 0.25rem;
}
.blog-toolbar-cats::-webkit-scrollbar { display: none; }

.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: transparent;
  /* border: 1px solid var(--gray-200); */
  border: none;
  border-radius: 50px;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  outline: none;
}
.blog-cat-pill:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--navy);
}
.blog-cat-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.blog-cat-pill.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 700;
}

/* Count */
.blog-toolbar-count {
  flex-shrink: 0;
  padding-left: 0.75rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--gray-200);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-400);
  white-space: nowrap;
}
#blogResultCount { color: var(--navy); }


/* ─────────────────────────────────────────────
   SECTION LABEL (shared)
   ───────────────────────────────────────────── */
.blog-section-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 50px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}


/* ─────────────────────────────────────────────
   FEATURED POST
   ───────────────────────────────────────────── */
.blog-featured {
  padding: 80px 0;
  background: var(--gray-100);
}
.blog-featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  text-decoration: none;
  transition: transform 0.35s var(--transition), box-shadow 0.35s var(--transition), border-color 0.3s;
  box-shadow: 0 4px 20px rgba(13,27,62,0.05);
}
.blog-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(13,27,62,0.11);
  border-color: rgba(201,168,76,0.4);
}
.blog-featured-img {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: var(--navy);
}
.blog-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--transition);
}
.blog-featured-card:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(13,27,62,0.5) 100%);
  z-index: 2;
  pointer-events: none;
}
.blog-featured-content {
  padding: 2.75rem;
  display: flex;
  flex-direction: column;
}
.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.blog-featured-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 1rem;
  transition: color 0.25s;
}
.blog-featured-card:hover .blog-featured-title { color: var(--gold); }
.blog-featured-excerpt {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: 1.75rem;
}
.blog-featured-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 1.5rem;
}
.blog-feat-stat { display: flex; flex-direction: column; gap: 3px; }
.blog-feat-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.blog-feat-stat-lbl {
  font-size: 11px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.blog-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  margin-top: auto;
  transition: gap 0.25s;
}
.blog-featured-card:hover .blog-featured-cta { gap: 13px; }
.blog-featured-cta svg { transition: transform 0.25s; }
.blog-featured-card:hover .blog-featured-cta svg { transform: translateX(4px); }


/* ─────────────────────────────────────────────
   ARTICLES GRID
   ───────────────────────────────────────────── */
.blog-grid-section {
  padding: 80px 0;
  background: var(--white);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 3.5rem;  /* space before pagination */
}
.blog-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: transform 0.3s var(--transition), box-shadow 0.3s, border-color 0.25s;
}
.blog-card.hidden { display: none !important; }
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 44px rgba(13,27,62,0.09);
  border-color: rgba(201,168,76,0.35);
}
.blog-card-link { text-decoration: none; display: block; }
.blog-card-img {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--navy);
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--transition);
}
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(13,27,62,0.4) 100%);
  z-index: 2;
  pointer-events: none;
}
.blog-card-content { padding: 1.4rem; }
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.blog-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 0.6rem;
  transition: color 0.25s;
}
.blog-card:hover .blog-card-title { color: var(--gold); }
.blog-card-excerpt {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 1rem;
}
.blog-card-footer {
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold);
  transition: letter-spacing 0.25s;
}
.blog-card:hover .blog-card-footer { letter-spacing: 0.02em; }

/* Empty state */
.blog-empty { display: none; text-align: center; padding: 4rem 2rem; }
.blog-empty.show { display: block; }
.blog-empty-icon { font-size: 3.5rem; opacity: 0.25; margin-bottom: 1rem; }
.blog-empty h3 { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; }
.blog-empty p  { color: var(--gray-500); font-size: 14.5px; margin-bottom: 1.5rem; }



/* ─── PAGINATION — sits directly below grid, never floats ─── */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
}

.blog-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.blog-page-btn:hover {
  background: rgba(201,168,76,0.07);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.blog-page-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.blog-page-numbers { display: flex; align-items: center; gap: 6px; }
.blog-page-num {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.blog-page-num:hover {
  background: rgba(201,168,76,0.07);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.blog-page-num.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 700;
  cursor: default;
  transform: none;
}


/* ─────────────────────────────────────────────
   NEWSLETTER — two columns
   ───────────────────────────────────────────── */
/* .blog-newsletter {
  padding: 100px 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.blog-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.blog-newsletter-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.blog-newsletter-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
  margin: 0.75rem 0;
}
.blog-newsletter-h2 em { font-style: normal; color: var(--gold); }
.blog-newsletter-sub {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.5rem;
}
.blog-newsletter-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
} */

/* Right — reuses shared form-group, form-submit, field-error, form-success-banner */
/* .blog-newsletter-right form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.blog-newsletter-disclaimer {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-top: 0.25rem;
} */


/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-img { min-height: 240px; }
  .blog-featured-content { padding: 2rem; }
  .blog-newsletter-inner { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
  .blog-hero { padding: 110px 1.25rem 60px; }
  /* .blog-toolbar { top: 60px; } */
  .blog-toolbar-inner { padding: 0 1rem; }
  #blogSearchInput { width: 100px; }
  #blogSearchInput:focus { width: 130px; }
  .blog-toolbar-count { display: none; }
  .blog-featured, .blog-grid-section, .blog-newsletter { padding: 60px 0; }
  .blog-section-inner { padding: 0 1.25rem; }
  .blog-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .blog-featured-stats { grid-template-columns: 1fr 1fr; }
  .blog-pagination { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .blog-toolbar-sep { display: none; }
  .blog-toolbar-search { padding-right: 0.5rem; }
  #blogSearchInput { width: 80px; }
  #blogSearchInput:focus { width: 110px; }
}


#blogGridWrap {
  transition: opacity 0.15s ease;
}
#blogGridWrap.blog-grid-loading {
  opacity: 0.4;
  pointer-events: none;
}


.blog-toolbar-count {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.75rem 0 2rem;
  padding: 0 0.25rem;
}

.blog-toolbar-count::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold, #C9A84C);
  flex-shrink: 0;
}

#blogResultCount {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy, #1a1a1a);
  opacity: 0.7;
}



































/* ═══════════════════════════════════════════════════════════════
   BLOG ARTICLE PAGE — styles.css additions
   Append to bottom of styles.css
   ═══════════════════════════════════════════════════════════════ */


/* ─── READING PROGRESS BAR ─── */
.article-reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(201,168,76,0.15);
  z-index: 10001;
  pointer-events: none;
}
.article-reading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  width: 0%;
  transition: width 0.1s linear;
}


/* ─── BREADCRUMB ─── */
.article-breadcrumb {
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  padding: 0.65rem 0;
}
.article-breadcrumb-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  color: var(--gray-400);
  font-weight: 500;
  flex-wrap: wrap;
}
.article-breadcrumb-inner a {
  color: var(--gray-500);
  text-decoration: none;
  transition: color 0.2s;
}
.article-breadcrumb-inner a:hover { color: var(--gold); }
.article-breadcrumb-inner span[aria-current] {
  color: var(--navy);
  font-weight: 600;
}


/* ─── ARTICLE HEADER ─── */
.article-header {
  background: var(--navy);
  padding: 130px 2rem 48px;
  position: relative;
  overflow: hidden;
}
.article-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.article-header-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.article-header-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.article-header-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  flex-wrap: wrap;
}
.article-meta-dot { color: rgba(255,255,255,0.2); }

.article-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.article-subtitle {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
}
.article-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  /* border-top: 1px solid rgba(255,255,255,0.08); */
}
.article-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.article-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}
.article-author-name  { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.article-author-role  { font-size: 0.7rem;  color: rgba(255,255,255,0.4); margin-top: 1px; }

/* Share buttons row (inside header) */
.article-share-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.article-share-label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  margin-right: 2px;
}
.article-share-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
.article-share-btn:hover { transform: translateY(-2px); opacity: 0.85; }
.article-share-btn--twitter  { background: #000;     color: #fff; }
.article-share-btn--linkedin { background: #0077B5; color: #fff; }
.article-share-btn--whatsapp { background: #25D366; color: #fff; }
.article-share-btn--copy     { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }


/* ─── HERO IMAGE ─── */
.article-hero-img-wrap {
  background: var(--navy);
  padding: 0 2rem 0;
  margin-top: -1px;
}

.article-hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.article-hero-img-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  height: 380px;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(135deg, var(--navy-light), #1a2a5e);
}
.article-hero-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  opacity: 0.3;
  z-index: 0;
}
.article-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}


/* ─── TWO-COLUMN BODY LAYOUT ─── */
/*
  Structure:
  .article-body-wrap (white bg, full width)
    .article-body-inner (max-width grid container)
      .article-content  (left — scrolls)
      .article-sidebar  (right — sticky)

  The sticky social share icons sit INSIDE .article-content
  as a narrow column — no floats, no negative margins.
*/
.article-body-wrap {
  background: var(--white);
  padding: 0 0 80px;
}
.article-body-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  /* 44px for share icons | content | sidebar */
  grid-template-columns: 44px 1fr 300px;
  gap: 0 2.5rem;
  align-items: start;
}

/* ─── STICKY SHARE — first column ─── */
.article-share-sticky {
  position: sticky;
  top: 100px;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.article-share-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.article-share-icon:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.article-share-icon--twitter  { background: #000;     color: #fff; }
.article-share-icon--linkedin { background: #0077B5; color: #fff; }
.article-share-icon--whatsapp { background: #25D366; color: #fff; }
.article-share-icon--copy {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}
.article-share-icon--bookmark {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}
.article-share-icon--bookmark.bookmarked {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.article-share-divider {
  width: 24px;
  height: 1px;
  background: var(--gray-200);
  margin: 2px 0;
}


/* ─── ARTICLE CONTENT (centre column) ─── */
.article-content {
  padding-top: 48px;
  min-width: 0;
}

/* Scroll offset for sticky nav */
[id] { scroll-margin-top: 100px; }

.article-section { margin-bottom: 2.25rem; }

.article-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(201,168,76,0.25);
}
.article-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.25rem 0 0.5rem;
}
.article-section p,
.article-content > p {
  font-size: 15.5px;
  /* line-height: 1.85; */
  line-height: 2.05;
  color: #374151;
  margin-bottom: 1rem;
}
.article-section p:last-child { margin-bottom: 0; }

/* Lead */
.article-lead {
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: var(--navy) !important;
  font-weight: 500;
  border-left: 3px solid var(--gold);
  padding-left: 1.1rem;
  margin-bottom: 1.75rem !important;
}


/* ─── CALLOUT BOXES ─── */
.article-callout {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.35rem;
  border-radius: 10px;
  margin: 1.25rem 0;
  border: 1px solid transparent;
}
.article-callout--tip     { background: rgba(201,168,76,0.07); border-color: rgba(201,168,76,0.2); }
.article-callout--warning { background: rgba(231,76,60,0.06);  border-color: rgba(231,76,60,0.18); }
.article-callout--info    { background: rgba(52,152,219,0.07); border-color: rgba(52,152,219,0.2); }
.article-callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.article-callout-body { flex: 1; min-width: 0; }
.article-callout-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.article-callout p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #4b5563 !important;
  margin-bottom: 0 !important;
}


/* ─── STAT BLOCK ─── */
.article-stat-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 1.5rem 0;
}
.article-stat {
  background: var(--navy);
  border-radius: 12px;
  padding: 1.1rem;
  text-align: center;
}
.article-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.article-stat-lbl {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}


/* ─── INLINE CTA (mid-article) ─── */
.article-inline-cta {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 2rem 0;
}
.article-inline-cta-icon { font-size: 1.75rem; flex-shrink: 0; margin-top: 2px; }
.article-inline-cta-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.article-inline-cta-body p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 0.85rem !important;
}


/* ─── KEY TAKEAWAYS ─── */
.article-takeaways {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem;
  margin: 2rem 0;
}
.article-takeaways-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.article-takeaways-header h3 { font-size: 0.95rem; font-weight: 800; color: var(--navy); }
.article-takeaways ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.article-takeaways li {
  padding-left: 1.4rem;
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}
.article-takeaways li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: 800;
  font-size: 0.8rem;
}


/* ─── BOTTOM ARTICLE CTA ─── */
.article-bottom-cta {
  margin: 2.5rem 0 1.75rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border: 1px solid rgba(201,168,76,0.2);
  overflow: hidden;
}
.article-bottom-cta-inner {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.article-bottom-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
}
.article-bottom-cta-title em { font-style: normal; color: var(--gold); }
.article-bottom-cta-sub {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 520px;
}
.article-bottom-cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}


/* ─── TAGS ─── */
.article-tags {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 1.75rem;
}
.article-tags-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 4px;
}
.article-tag {
  padding: 4px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.article-tag:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.05); }


/* ─── AUTHOR BIO ─── */
.article-author-bio {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--gray-100);
  border-radius: 14px;
  margin-bottom: 2rem;
}
.article-author-bio-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--navy);
  flex-shrink: 0;
}
.article-author-bio-name { font-size: 0.9rem; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.article-author-bio-role { font-size: 0.7rem; color: var(--gray-400); margin-bottom: 0.55rem; }
.article-author-bio-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 0.65rem;
}
.article-author-bio-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}
.article-author-bio-link:hover { text-decoration: underline; }


/* ─── ARTICLE NAV ─── */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}
.article-nav-btn {
  padding: 1.1rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.article-nav-btn:hover {
  border-color: rgba(201,168,76,0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13,27,62,0.07);
}
.article-nav-btn--next { text-align: right; }
.article-nav-dir {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.article-nav-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}


/* ─── SIDEBAR (right column) ─── */
.article-sidebar {
  position: sticky;
  top: 90px;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.article-sidebar::-webkit-scrollbar { width: 3px; }
.article-sidebar::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

.sidebar-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.1rem;
}
.sidebar-card-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy);
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--gray-200);
}

/* ToC */
.toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-item {
  display: block;
  padding: 0.4rem 0.7rem;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray-500);
  text-decoration: none;
  border-radius: 7px;
  border-left: 2px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s, padding-left 0.2s;
  line-height: 1.4;
}
.toc-item:hover { color: var(--navy); background: var(--gray-100); }
.toc-item--active {
  color: var(--gold) !important;
  background: rgba(201,168,76,0.07) !important;
  border-left-color: var(--gold) !important;
  font-weight: 700 !important;
  padding-left: 0.9rem;
}
.toc-progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--gray-200);
}
.toc-progress-track {
  flex: 1;
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
}
.toc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  width: 0%;
  transition: width 0.25s ease;
  border-radius: 2px;
}
.toc-progress-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gray-400);
  white-space: nowrap;
  min-width: 48px;
}

/* Sidebar CTA */
.sidebar-cta {
  background: var(--navy);
  border-color: rgba(201,168,76,0.2);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sidebar-cta-icon { font-size: 1.6rem; }
.sidebar-cta-title { font-size: 0.9rem; font-weight: 800; color: var(--white); }
.sidebar-cta-body { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.sidebar-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.sidebar-cta-trust span { font-size: 10.5px; color: rgba(255,255,255,0.35); font-weight: 500; }

/* Sidebar Newsletter */
.sidebar-newsletter { display: flex; flex-direction: column; gap: 0.55rem; }
.sidebar-newsletter-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy);
}
.sidebar-newsletter-body { font-size: 12.5px; line-height: 1.55; color: var(--gray-600); }
.sidebar-newsletter-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color: var(--navy);
  transition: border-color 0.2s;
}
.sidebar-newsletter-input:focus { border-color: var(--gold); }
.sidebar-newsletter-input::placeholder { color: var(--gray-400); }
.sidebar-newsletter-btn {
  width: 100%;
  padding: 9px;
  background: var(--gold);
  border: none;
  margin-top: 1rem;
  border-radius: 8px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s, transform 0.2s;
}
.sidebar-newsletter-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.sidebar-newsletter-note { font-size: 11px; color: var(--gray-400); text-align: center; }

/* Sidebar related */
.sidebar-related-list { display: flex; flex-direction: column; gap: 0.75rem; }
.sidebar-related-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-100);
}
.sidebar-related-item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-related-item:hover .sidebar-related-title { color: var(--gold); }
.sidebar-related-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 4px;
  width: fit-content;
}
.sidebar-related-cat--seo      { background: rgba(52,152,219,0.1);  color: #3498db; }
.sidebar-related-cat--business { background: rgba(46,204,113,0.1);  color: #27ae60; }
.sidebar-related-cat--web      { background: rgba(155,89,182,0.1);  color: #9b59b6; }
.sidebar-related-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  transition: color 0.2s;
}
.sidebar-related-read { font-size: 11px; color: var(--gray-400); }


/* ─── MORE ARTICLES ─── */
.article-more {
  padding: 70px 0;
  background: var(--gray-100);
}
.article-more-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
.article-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.article-more-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 800;
  color: var(--navy);
}
.article-more-all {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}
.article-more-all:hover { text-decoration: underline; }

.article-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.article-more-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s var(--transition), box-shadow 0.3s, border-color 0.25s;
}
.article-more-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(13,27,62,0.09);
  border-color: rgba(201,168,76,0.3);
}
.article-more-img {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--navy);
}
.article-more-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 0.5s var(--transition);
}
.article-more-card:hover .article-more-img img { transform: scale(1.06); }
.article-more-content { padding: 1.1rem; }
.article-more-meta {
  display: flex;
  gap: 7px;
  font-size: 11.5px;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.article-more-content h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 0.4rem;
  transition: color 0.2s;
}
.article-more-card:hover h3 { color: var(--gold); }
.article-more-content p { font-size: 12.5px; line-height: 1.6; color: var(--gray-600); }


/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  /* On tablet: drop the sticky share column, two-col content + sidebar */
  .article-body-inner {
    grid-template-columns: 1fr 280px;
    gap: 0 2rem;
  }
  .article-share-sticky { display: none; }
}

@media (max-width: 900px) {
  /* Single column — sidebar goes below content */
  .article-body-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .article-share-sticky { display: none; }
  .article-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-top: 0;
  }
  .article-more-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .article-header { padding: 105px 1.25rem 30px; }
  .article-hero-img-wrap { padding: 0 1.25rem; }
  .article-hero-img-inner { height: 220px; }
  .article-body-inner { padding: 0 1.25rem; }
  .article-content { padding-top: 28px; }
  .article-stat-block { grid-template-columns: 1fr; gap: 0.65rem; }
  .article-nav { grid-template-columns: 1fr; }
  .article-author-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .article-more-inner { padding: 0 1.25rem; }
  .article-more-grid { grid-template-columns: 1fr; }
  .article-more { padding: 50px 0; }
  .article-bottom-cta-actions { flex-direction: column; }
  .article-bottom-cta-actions a { width: 100%; text-align: center; }
  .article-inline-cta { flex-direction: column; }
}

@media (max-width: 480px) {
  .article-author-bio { flex-direction: column; }
  .article-callout { flex-direction: column; gap: 0.5rem; }
}






































/* ═══════════════════════════════════════════════════════════════
   CAREERS PAGE — styles.css additions
   Append to bottom of styles.css
   All classes prefixed careers- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─── SHARED INNER WIDTH ─── */
.careers-section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}


/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.careers-hero {
  position: relative;
  padding: 150px 2rem 100px;
  background: var(--navy);
  overflow: hidden;
}
.careers-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.careers-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
.careers-hero-content { display: flex; flex-direction: column; gap: 1.5rem; }
.careers-hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.careers-hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.careers-hero-sub {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  max-width: 520px;
}
.careers-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Culture card */
.careers-hero-right { position: relative; }
.careers-culture-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.careers-culture-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.careers-avatar-row {
  display: flex;
}
.careers-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--white);
  margin-left: -8px;
  flex-shrink: 0;
}
.careers-avatar:first-child { margin-left: 0; }
.careers-avatar--more {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 0.65rem;
}
.careers-culture-team-label strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
}
.careers-culture-team-label span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
}

/* Perks list */
.careers-culture-perks {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.1rem;
}
.careers-perk {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.careers-perk-icon { font-size: 1.2rem; flex-shrink: 0; }
.careers-perk-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
}
.careers-perk-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}

/* Culture quote */
.careers-culture-quote {
  background: rgba(201,168,76,0.08);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem;
  position: relative;
}
.careers-culture-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: var(--gold);
  opacity: 0.4;
  line-height: 0.5;
  margin-bottom: 0.5rem;
}
.careers-culture-quote p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  font-style: italic;
}
.careers-culture-quote span {
  font-size: 0.7rem;
  color: var(--gold);
  font-weight: 600;
  display: block;
  margin-top: 0.5rem;
}

@media (max-width: 1024px) {
  .careers-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .careers-hero { padding: 130px 2rem 80px; }
}


/* ─────────────────────────────────────────────
   WHY DRIVON
   ───────────────────────────────────────────── */
.careers-why { padding: 100px 0; background: var(--white); }
.careers-why-header { text-align: center; margin-bottom: 3.5rem; }
.careers-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.careers-why-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.3s var(--transition), border-color 0.3s, box-shadow 0.3s;
}
.careers-why-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,168,76,0.3);
  box-shadow: 0 16px 44px rgba(13,27,62,0.08);
}
.careers-why-icon { font-size: 2rem; }
.careers-why-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); }
.careers-why-card p  { font-size: 0.86rem; line-height: 1.65; color: var(--gray-600); }

@media (max-width: 1024px) { .careers-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .careers-why-grid { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────
   BENEFITS
   ───────────────────────────────────────────── */
.careers-benefits { padding: 100px 0; background: var(--navy); }
.careers-benefits-header { text-align: center; margin-bottom: 3.5rem; }
.careers-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.careers-benefit-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  transition: border-color 0.3s, transform 0.3s var(--transition);
}
.careers-benefit-item:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-3px);
}
.careers-benefit-icon { font-size: 1.75rem; margin-bottom: 0.75rem; display: block; }
.careers-benefit-item h4 { font-size: 0.9rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; }
.careers-benefit-item p  { font-size: 0.8rem; line-height: 1.6; color: rgba(255,255,255,0.45); }

@media (max-width: 1024px) { .careers-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .careers-benefits-grid { grid-template-columns: 1fr 1fr; } }


/* ─────────────────────────────────────────────
   OPEN ROLES
   ───────────────────────────────────────────── */
.careers-roles { padding: 100px 0; background: var(--white); }
.careers-roles-header { text-align: center; margin-bottom: 3rem; }

/* Department filter */
.careers-dept-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 10px;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.careers-dept-btn {
  padding: 9px 20px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  color: var(--gray-600);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  outline: none;
}
.careers-dept-btn:hover {
  background: var(--white);
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-2px);
}
.careers-dept-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* Role count */
.careers-roles-count {
  text-align: center;
  font-size: 13.5px;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 2.5rem;
}
#cRoleNum { font-weight: 800; color: var(--gold); }

/* Department group */
.careers-dept-group { margin-bottom: 2.5rem; }
.careers-dept-group.hidden { display: none !important; }
.careers-dept-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}
.careers-dept-count {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  padding: 2px 10px;
  color: var(--gray-500);
}

/* Job card */
.careers-job-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: start;
  padding: 1.75rem 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: transform 0.3s var(--transition), box-shadow 0.3s, border-color 0.25s;
  position: relative;
  overflow: hidden;
}
.careers-job-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.25s;
}
.careers-job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(13,27,62,0.09);
  border-color: rgba(201,168,76,0.35);
}
.careers-job-card:hover::before { background: var(--gold); }
.careers-job-card.hidden { display: none !important; }

.careers-job-left { display: flex; flex-direction: column; gap: 0.6rem; }
.careers-job-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  width: fit-content;
}
.careers-job-tag--new { background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid rgba(201,168,76,0.25); }
.careers-job-tag--urgent { background: rgba(231,76,60,0.1); color: #e74c3c; border: 1px solid rgba(231,76,60,0.2); }

.careers-job-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  transition: color 0.25s;
}
.careers-job-card:hover .careers-job-title { color: var(--gold); }
.careers-job-excerpt {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--gray-600);
}

.careers-job-right { display: flex; flex-direction: column; gap: 1rem; }
.careers-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.careers-job-meta span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 4px 10px;
  border-radius: 6px;
}
.careers-job-salary {
  color: var(--navy) !important;
  background: rgba(201,168,76,0.08) !important;
  font-weight: 700 !important;
}
.careers-job-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.careers-job-skills span {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}
.careers-job-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
  transition: gap 0.25s;
}
.careers-job-card:hover .careers-job-cta { gap: 10px; }
.careers-job-cta svg { transition: transform 0.25s; }
.careers-job-card:hover .careers-job-cta svg { transform: translateX(3px); }

/* Empty state */
.careers-empty { display: none; text-align: center; padding: 4rem 2rem; }
.careers-empty.show { display: block; }
.careers-empty-icon { font-size: 3.5rem; opacity: 0.2; margin-bottom: 1rem; }
.careers-empty h3 { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; }
.careers-empty p  { color: var(--gray-500); font-size: 14.5px; }

@media (max-width: 900px) {
  .careers-job-card { grid-template-columns: 1fr; gap: 1.25rem; }
}


/* ─────────────────────────────────────────────
   PROCESS STEPS — reuses sp-process pattern
   ───────────────────────────────────────────── */
.careers-process { padding: 100px 0; background: var(--navy); }
.careers-process-header { text-align: center; margin-bottom: 3.5rem; }
.careers-process-header .section-h2 { color: var(--white); }
.careers-process-header .section-sub { color: rgba(255,255,255,0.5); margin-inline: auto; }

.careers-roles .section-sub { margin-inline: auto; }
.careers-why .section-sub { margin-inline: auto; }

.careers-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
}
.careers-process-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.careers-process-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.careers-process-body {
  flex: 1;
  padding-bottom: 1.5rem;
}
.careers-process-body h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; }
.careers-process-body p  { font-size: 0.86rem; line-height: 1.65; color: rgba(255,255,255,0.5); }
.careers-process-time {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
}
.careers-process-connector {
  width: 1px;
  min-height: 28px;
  background: rgba(255,255,255,0.1);
  margin-left: 21px;  /* aligns with centre of num circle */
}


/* ─────────────────────────────────────────────
   SPECULATIVE APPLICATION
   ───────────────────────────────────────────── */
.careers-speculative { padding: 100px 0; background: var(--gray-100); }
.careers-speculative-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.careers-speculative-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  margin: 0.75rem 0 1rem;
}
.careers-speculative-h2 em { font-style: normal; color: var(--gold); }
.careers-speculative-sub {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}
.careers-speculative-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.careers-spec-area {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  padding: 6px 0;
}

.careers-spec-form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 4px 24px rgba(13,27,62,0.05);
}
.careers-spec-form-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.careers-spec-form-card > p {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 1.5rem;
}
.careers-spec-form-card .form-group label { color: var(--navy); }
.careers-spec-form-card input,
.careers-spec-form-card select,
.careers-spec-form-card textarea {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--navy);
}
.careers-spec-form-card input::placeholder,
.careers-spec-form-card textarea::placeholder { color: var(--gray-400); }
.careers-spec-form-card input:focus,
.careers-spec-form-card select:focus,
.careers-spec-form-card textarea:focus {
  border-color: var(--gold);
  background: var(--white);
}
.careers-spec-form-card select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
  border: 1px solid var(--gray-200);
  transition: border-color 0.2s;
}
.careers-spec-form-card textarea {
  width: 100%;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  border: 1px solid var(--gray-200);
  outline: none;
  transition: border-color 0.2s;
}
.form-label-hint { font-size: 0.78rem; color: var(--gray-400); font-weight: 400; }
.careers-spec-form-card .form-submit { background: var(--navy); color: var(--gold); }
.careers-spec-form-card .form-submit:hover { background: var(--gold); color: var(--navy); }

@media (max-width: 1024px) {
  .careers-speculative-inner { grid-template-columns: 1fr; gap: 3rem; }
}


/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .careers-why, .careers-roles, .careers-process,
  .careers-speculative, .careers-benefits { padding: 60px 0; }
  .careers-section-inner { padding: 0 1.25rem; }
  .careers-speculative-areas { grid-template-columns: 1fr; }
  .careers-dept-filter { justify-content: space-evenly; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .careers-dept-filter::-webkit-scrollbar { display: none; }
  .careers-dept-btn { flex-shrink: 0; }
}


.career-form-success-banner{
  display:none;text-align:center;padding:2rem 1rem;
}

.career-form-success-banner div{
  font-size:3rem;margin-bottom:1rem;
}

.career-form-success-banner h3 {
  color:var(--gold);margin-bottom:0.5rem;
}

.career-form-success-banner p{
  color:rgba(--gray-600);font-size:0.95rem;line-height:1.6;
}











































/* ═══════════════════════════════════════════════════════════════
   JOB DETAIL PAGE — styles.css additions
   Append to bottom of styles.css
   All classes prefixed job- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   BREADCRUMB
   ───────────────────────────────────────────── */
.job-breadcrumb {
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  padding: 0.75rem 0;
}
.job-breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 500;
  flex-wrap: wrap;
}
.job-breadcrumb-inner a {
  color: var(--gray-500);
  text-decoration: none;
  transition: color 0.2s;
}
.job-breadcrumb-inner a:hover { color: var(--gold); }
.job-breadcrumb-inner span:last-child { color: var(--navy); font-weight: 600; }


/* ─────────────────────────────────────────────
   JOB HEADER — full width navy
   ───────────────────────────────────────────── */
.job-header {
  position: relative;
  background: var(--navy);
  padding: 130px 2rem 60px;
  overflow: hidden;
}
.job-header-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.job-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 2;
}
.job-header-left { display: flex; flex-direction: column; gap: 1.25rem; }

.job-dept-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 50px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: fit-content;
}

.job-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.job-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.job-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.job-meta-pill-icon { font-size: 13px; }
.job-meta-pill--salary {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.25);
  color: var(--gold);
}

.job-header-excerpt {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  max-width: 580px;
}

/* Mobile apply button — hidden on desktop */
.job-mobile-apply-btn {
  display: none;
  width: fit-content;
}

/* Right — stats card */
.job-stats-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.job-stat {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.job-stat-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.job-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 2px;
}
.job-stat-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
}
.job-stat-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0.25rem 0;
}
.job-apply-note {
  text-align: center;
  font-size: 11.5px;
  color: rgba(255,255,255,0.35);
  margin-top: 0.5rem;
}

@media (max-width: 1024px) {
  .job-header-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .job-header-right { display: none; }
  .job-mobile-apply-btn { display: inline-flex; }
}


/* ─────────────────────────────────────────────
   MAIN TWO-COLUMN LAYOUT
   ───────────────────────────────────────────── */
.job-main {
  background: var(--white);
  padding: 60px 0 100px;
}
.job-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: start;
}

/* ─── LEFT — Description ─── */
.job-description {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.job-section {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.job-section:last-of-type { border-bottom: none; }
.job-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.job-section p {
  font-size: 15px;
  line-height: 1.8;
  /* color: var(--gray-700); */
  margin-bottom: 1rem;
}
.job-section p:last-child { margin-bottom: 0; }

.job-subsection-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin: 1.5rem 0 0.75rem;
}

.job-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.job-list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gray-700);
}
.job-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
}
.job-list--must li::before { content: '✓'; color: #27ae60; }
.job-list--nice li::before { content: '◦'; color: var(--gray-400); font-size: 1.2rem; top: -2px; }

/* Offer grid */
.job-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}
.job-offer-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  transition: border-color 0.25s, transform 0.25s;
}
.job-offer-item:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-2px);
}
.job-offer-icon { font-size: 1.35rem; flex-shrink: 0; }
.job-offer-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}
.job-offer-sub {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.4;
}

/* Team card */
.job-team-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.job-team-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.85;
  line-height: 0.6;
  margin-bottom: 0.75rem;
}
.job-team-quote {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.8);
  font-style: italic;
  margin-bottom: 1.25rem;
}
.job-team-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.job-team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}
.job-team-name { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.job-team-role { font-size: 0.72rem; color: rgba(255,255,255,0.45); }

/* Process steps — compact */
.job-section--process { background: var(--gray-100); border-radius: var(--radius); padding: 1.75rem; border: none; margin-bottom: 2.5rem; }
.job-section--process .job-section-title { font-size: 1.05rem; margin-bottom: 1.1rem; padding-bottom: 0.5rem; }
.job-process-steps { display: flex; flex-direction: column; gap: 0.75rem; }
.job-process-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.5;
}
.job-process-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Back link */
.job-back-link {
  padding-top: 1rem;
}
.job-back-link a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  transition: letter-spacing 0.2s;
}
.job-back-link a:hover { letter-spacing: 0.02em; }

@media (max-width: 640px) {
  .job-offer-grid { grid-template-columns: 1fr; }
}


/* ─── RIGHT — Sticky form ─── */
.job-apply-aside {
  position: sticky;
  top: 90px; /* below navbar */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.job-apply-aside::-webkit-scrollbar { width: 4px; }
.job-apply-aside::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

.job-apply-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 4px 32px rgba(13,27,62,0.08);
  overflow: hidden;
}

.job-apply-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.job-apply-card-icon {
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.job-apply-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
}
.job-apply-card-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
}

/* Progress bar */
.job-apply-progress {
  height: 3px;
  background: var(--gray-200);
}
.job-apply-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  width: 33.33%;
  transition: width 0.4s ease;
}

/* Form area */
.job-apply-card form { padding: 1.5rem; }
.job-form-step-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gray-400);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}

/* File upload */
.job-file-upload {
  position: relative;
  border: 1.5px dashed var(--gray-300);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.job-file-upload:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.03);
}
.job-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.job-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 1.25rem;
  text-align: center;
  pointer-events: none;
}
.job-file-icon { font-size: 1.5rem; }
.job-file-label span:nth-child(2) {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.job-file-formats { font-size: 11px; color: var(--gray-400); }
.job-file-upload.has-file {
  border-color: #27ae60;
  background: rgba(39,174,96,0.04);
}
.job-file-upload.has-file .job-file-icon::after { content: '✓'; }

/* Word count */
.job-wordcount {
  text-align: right;
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 4px;
  font-weight: 500;
}
.job-wordcount.warn { color: #e67e22; }
.job-wordcount.over { color: #e74c3c; }

/* Multi-step navigation */
.job-form-nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.job-form-back {
  padding: 14px 18px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  color: var(--gray-600);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.job-form-back:hover {
  background: var(--white);
  border-color: var(--navy);
  color: var(--navy);
}

/* Success state */
.job-apply-success {
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.job-apply-success-icon { font-size: 3rem; }
.job-apply-success h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}
.job-apply-success p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-600);
}

/* Trust signals */
.job-apply-trust {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.5rem;
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
}
.job-apply-trust-item {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

@media (max-width: 1100px) {
  .job-main-inner { grid-template-columns: 1fr; }
  .job-apply-aside {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}


/* ─────────────────────────────────────────────
   RELATED ROLES
   ───────────────────────────────────────────── */
.job-related { padding: 80px 0; background: var(--gray-100); }
.job-related-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.job-related-header { text-align: center; margin-bottom: 3rem; }
.job-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.job-related-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 1.75rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.3s var(--transition), box-shadow 0.3s, border-color 0.25s;
}
.job-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(13,27,62,0.09);
  border-color: rgba(201,168,76,0.35);
}
.job-related-dept {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-400);
}
.job-related-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  transition: color 0.25s;
}
.job-related-card:hover h3 { color: var(--gold); }
.job-related-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--gray-600);
  flex: 1;
}
.job-related-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.job-related-meta span {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-500);
}
.job-related-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin-top: 0.25rem;
  transition: letter-spacing 0.2s;
}
.job-related-card:hover .job-related-cta { letter-spacing: 0.02em; }

@media (max-width: 900px) { .job-related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .job-related-grid { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────
   FORM — 4-STEP SPECIFIC ADDITIONS
   ───────────────────────────────────────────── */

/* Step label with numbered badge */
.job-form-step-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gray-200);
}
.job-step-num-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.job-step-of {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray-400);
}

/* Required asterisk */
.req { color: #e74c3c; font-size: 0.8em; }

/* Subsection divider labels */
.job-form-subsection {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 0.85rem;
}

/* Helper text */
.job-form-helper {
  font-size: 12.5px;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 0.85rem;
  margin-top: -0.25rem;
}

/* File upload — updated design */
.job-file-upload {
  border: 1.5px dashed var(--gray-300);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.job-file-upload:hover,
.job-file-upload:focus-within {
  border-color: var(--gold);
  background: rgba(201,168,76,0.03);
}
.job-file-upload.has-file {
  border-color: #27ae60;
  background: rgba(39,174,96,0.04);
}
.job-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.job-file-label-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  pointer-events: none;
}
.job-file-ico { font-size: 1.5rem; flex-shrink: 0; }
.job-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.job-file-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}
.job-file-upload.has-file .job-file-name { color: #27ae60; }

/* Checkbox — custom styled */
.job-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.job-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.job-checkbox-custom {
  width: 20px;
  height: 20px;
  /* border: 2px solid var(--gray-300); */
  border: 2px solid var(--navy);
  border-radius: 5px;
  background: var(--white);
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-checkbox-label input:checked + .job-checkbox-custom {
  background: var(--navy);
  border-color: var(--navy);
}
.job-checkbox-label input:checked + .job-checkbox-custom::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.job-checkbox-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gray-600);
}

/* Success note */
.job-apply-success-note {
  font-size: 12.5px;
  color: var(--gray-400);
  font-style: italic;
}

/* Select elements inside the form card */
.job-apply-card select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--navy);
  background: var(--white);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.job-apply-card select:focus { border-color: var(--gold); }

/* Textarea inside the form card */
.job-apply-card textarea {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  min-height: 100px;
}
.job-apply-card textarea:focus { border-color: var(--gold); }
.job-apply-card textarea::placeholder { color: var(--gray-400); }

@media (max-width: 768px) {
  .job-header { padding: 100px 1.25rem 40px; }
  .job-main { padding: 40px 0 60px; }
  .job-main-inner { padding: 0 1.25rem; }
  .job-related { padding: 60px 0; }
  .job-related-inner { padding: 0 1.25rem; }
}













































/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES — styles.css additions
   Shared by privacy_policy.html, terms.html, cookies.html
   Append to bottom of styles.css
   All classes prefixed legal- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.legal-hero {
  position: relative;
  background: var(--navy);
  padding: 130px 2rem 70px;
  overflow: hidden;
  text-align: center;
}
.legal-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.legal-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.legal-hero-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.legal-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.legal-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.legal-hero-sub {
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 600px;
}
.legal-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  padding: 0.75rem 1.25rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px;
}
.legal-hero-meta strong { color: rgba(255,255,255,0.75); font-weight: 700; }
.legal-meta-sep { color: rgba(255,255,255,0.2); }

/* Cross-policy nav pills */
.legal-policy-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}
.legal-policy-nav-label {
  font-size: 12.5px;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
}
.legal-policy-link {
  padding: 6px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.legal-policy-link:hover {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}


/* ─────────────────────────────────────────────
   BODY — two column: sticky ToC + content
   ───────────────────────────────────────────── */
.legal-body {
  background: var(--white);
  padding: 60px 0 100px;
}
.legal-body-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 4rem;
  align-items: start;
}


/* ─── STICKY TOC ─── */
.legal-toc {
  position: sticky;
  top: 90px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.legal-toc::-webkit-scrollbar { width: 3px; }
.legal-toc::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

.legal-toc-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 0.25rem;
}
.legal-toc-item {
  display: block;
  padding: 0.38rem 0.65rem;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray-500);
  text-decoration: none;
  border-radius: 7px;
  border-left: 2px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s, padding-left 0.2s;
  line-height: 1.35;
}
.legal-toc-item:hover {
  color: var(--navy);
  background: rgba(13,27,62,0.05);
}
.legal-toc-item--active {
  color: var(--gold) !important;
  background: rgba(201,168,76,0.08) !important;
  border-left-color: var(--gold) !important;
  font-weight: 700 !important;
  padding-left: 0.9rem;
}
.legal-toc-cta {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-toc-cta p {
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}


/* ─── LEGAL CONTENT ─── */
.legal-content { min-width: 0; }

.legal-section {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-200);
  /* Offset for sticky nav on anchor links */
  scroll-margin-top: 100px;
}
.legal-section:last-of-type { border-bottom: none; }

.legal-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid rgba(201,168,76,0.3);
  display: inline-block;
}
.legal-section h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.35rem 0 0.5rem;
}
.legal-section p {
  font-size: 15px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 0.85rem;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.legal-section a:hover { text-decoration: underline; }

/* Scroll anchor on all section ids */
.legal-section[id] { scroll-margin-top: 100px; }

/* Lists */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.legal-list li {
  padding-left: 1.4rem;
  position: relative;
  font-size: 14.5px;
  line-height: 1.65;
  color: #374151;
}
.legal-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
}
.legal-list a { color: var(--gold); font-weight: 600; text-decoration: none; }
.legal-list a:hover { text-decoration: underline; }

/* Info box (who we are data) */
.legal-info-box {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1.25rem;
}
.legal-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 13.5px;
  gap: 1rem;
}
.legal-info-row:last-child { border-bottom: none; }
.legal-info-row span { color: var(--gray-500); font-weight: 500; }
.legal-info-row strong { color: var(--navy); font-weight: 700; text-align: right; }
.legal-info-row a { color: var(--gold); font-weight: 600; text-decoration: none; }
.legal-info-row a:hover { text-decoration: underline; }

/* Legal basis grid */
.legal-basis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 1rem 0;
}
.legal-basis-card {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.2s, transform 0.2s;
}
.legal-basis-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-2px);
}
.legal-basis-icon { font-size: 1.3rem; }
.legal-basis-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--navy);
}
.legal-basis-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gray-600);
}

/* Third-party processors */
.legal-processors {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  margin: 1rem 0;
}
.legal-processor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 13.5px;
  gap: 1rem;
}
.legal-processor:last-child { border-bottom: none; }
.legal-processor span { color: var(--navy); font-weight: 600; }
.legal-processor a {
  font-size: 12.5px;
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.legal-processor a:hover { text-decoration: underline; }

/* Rights grid */
.legal-rights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
  margin: 1rem 0;
}
.legal-right-item {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 0.2s, transform 0.2s;
}
.legal-right-item:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-2px);
}
.legal-right-icon { font-size: 1.2rem; }
.legal-right-label { font-size: 0.82rem; font-weight: 800; color: var(--navy); }
.legal-right-desc  { font-size: 12px; line-height: 1.5; color: var(--gray-600); }

/* Contact block */
.legal-contact-block {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0;
}
.legal-contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 14px;
}
.legal-contact-row:last-child { border-bottom: none; }
.legal-contact-row > span:first-child {
  color: var(--gray-500);
  font-weight: 600;
  min-width: 100px;
  flex-shrink: 0;
}
.legal-contact-row a { color: var(--gold); font-weight: 600; text-decoration: none; }
.legal-contact-row a:hover { text-decoration: underline; }

/* Notice box */
.legal-notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  background: rgba(52,152,219,0.06);
  border: 1px solid rgba(52,152,219,0.2);
  border-radius: 10px;
  margin: 1.25rem 0;
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
}
.legal-notice > span { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.legal-notice p { margin: 0; font-size: 14px; line-height: 1.65; color: #374151; }

/* Other policies footer */
.legal-other-policies {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
}
.legal-other-policies-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  margin-bottom: 1rem;
}
.legal-other-policies-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.legal-other-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.legal-other-link:hover {
  border-color: rgba(201,168,76,0.35);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(13,27,62,0.06);
}
.legal-other-link-icon { font-size: 1.4rem; flex-shrink: 0; }
.legal-other-link > div { flex: 1; }
.legal-other-link-title { font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.legal-other-link-sub   { font-size: 0.75rem; color: var(--gray-500); margin-top: 1px; }
.legal-other-link > span { font-size: 1.1rem; color: var(--gold); font-weight: 700; flex-shrink: 0; }


/* ─── COOKIE-SPECIFIC ELEMENTS ─── */

/* Cookie category cards */
.legal-cookie-categories {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1rem 0;
}
.legal-cookie-cat {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.legal-cookie-cat--essential { border-left: 3px solid #27ae60; }
.legal-cookie-cat--analytics { border-left: 3px solid #3498db; }
.legal-cookie-cat--functional { border-left: 3px solid #9b59b6; }
.legal-cookie-cat--marketing  { border-left: 3px solid #e67e22; }

.legal-cookie-cat-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.legal-cookie-cat-icon { font-size: 1.5rem; flex-shrink: 0; }
.legal-cookie-cat-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.legal-cookie-cat-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 50px;
  background: rgba(39,174,96,0.1);
  color: #27ae60;
  letter-spacing: 0.04em;
}
.legal-cookie-cat-badge--optional {
  background: rgba(230,126,34,0.1);
  color: #e67e22;
}
.legal-cookie-cat p {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}

/* Cookie table */
.legal-cookie-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  margin: 1rem 0;
}
.legal-cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.legal-cookie-table th {
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 1rem;
  text-align: left;
  white-space: nowrap;
}
.legal-cookie-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  color: #374151;
  vertical-align: top;
  line-height: 1.5;
}
.legal-cookie-table tr:last-child td { border-bottom: none; }
.legal-cookie-table tr:nth-child(even) td { background: var(--gray-100); }
.legal-cookie-table code {
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  background: rgba(13,27,62,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--navy);
  white-space: nowrap;
}

.legal-cookie-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  white-space: nowrap;
}
.legal-cookie-tag--essential { background: rgba(39,174,96,0.1);  color: #27ae60; }
.legal-cookie-tag--analytics { background: rgba(52,152,219,0.1); color: #3498db; }
.legal-cookie-tag--functional { background: rgba(155,89,182,0.1); color: #9b59b6; }
.legal-cookie-tag--marketing  { background: rgba(230,126,34,0.1); color: #e67e22; }


/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .legal-body-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .legal-toc {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .legal-toc nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .legal-toc-item {
    padding: 5px 12px;
    border-left: none;
    border: 1px solid var(--gray-200);
    border-radius: 50px;
    font-size: 12px;
  }
  .legal-toc-item--active {
    padding-left: 12px !important;
    border-color: var(--gold) !important;
    background: rgba(201,168,76,0.08) !important;
  }
  .legal-rights-grid { grid-template-columns: 1fr 1fr; }
  .legal-basis-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .legal-hero { padding: 100px 1.25rem 50px; }
  .legal-body { padding: 40px 0 60px; }
  .legal-body-inner { padding: 0 1.25rem; }
  .legal-rights-grid { grid-template-columns: 1fr; }
  .legal-basis-grid  { grid-template-columns: 1fr; }
  .legal-hero-meta { flex-direction: column; gap: 0.35rem; border-radius: 12px; }
  .legal-cookie-table { font-size: 12px; }
  .legal-cookie-table th, .legal-cookie-table td { padding: 0.6rem 0.75rem; }
}

























































/* ═══════════════════════════════════════════════════════════════
   404 PAGE — styles.css additions
   Append to bottom of styles.css
   All classes prefixed notfound- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */

.notfound-page {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  align-items: center;
}

/* ─── HERO SECTION ─── */
.notfound-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 2rem 80px;
  overflow: hidden;
}
.notfound-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.notfound-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}


/* ─── LEFT — Error message ─── */
.notfound-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 404 number */
.notfound-code {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.notfound-digit {
  font-family: 'Playfair Display', serif;
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1;
}
/* The animated zero */
.notfound-zero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(75px, 11vw, 130px);
  height: clamp(75px, 11vw, 130px);
  border-radius: 50%;
  border: 4px solid var(--gold);
  position: relative;
  animation: notfoundSpin 8s linear infinite;
  flex-shrink: 0;
}
.notfound-zero-inner {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: var(--gold);
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes notfoundSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Title */
.notfound-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.notfound-title em {
  font-style: normal;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.notfound-sub {
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 480px;
}

/* Search bar */
.notfound-search-box {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.notfound-search-box:focus-within {
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.1);
}
.notfound-search-icon {
  padding: 0 0 0 1rem;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.notfound-search-input {
  flex: 1;
  padding: 14px 12px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 14.5px;
  font-family: inherit;
}
.notfound-search-input::placeholder { color: rgba(255,255,255,0.3); }
.notfound-search-btn {
  padding: 0 1.25rem;
  height: 100%;
  min-height: 50px;
  background: var(--gold);
  border: none;
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.notfound-search-btn:hover { opacity: 0.88; }

/* Actions */
.notfound-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}


/* ─── RIGHT — Navigation cards ─── */
.notfound-right {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.notfound-nav-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
}
.notfound-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Nav cards */
.notfound-nav-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
}
.notfound-nav-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.25s;
}
.notfound-nav-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(201,168,76,0.25);
  transform: translateX(4px);
}
.notfound-nav-card:hover::before { background: var(--gold); }
.notfound-nav-card--gold {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.25);
}
.notfound-nav-card--gold:hover {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.4);
}

.notfound-nav-card-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.notfound-nav-card-body { flex: 1; min-width: 0; }
.notfound-nav-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  transition: color 0.2s;
}
.notfound-nav-card:hover .notfound-nav-card-title { color: var(--gold); }
.notfound-nav-card-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notfound-nav-card-arrow {
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.notfound-nav-card:hover .notfound-nav-card-arrow { transform: translateX(3px); }

/* Helpful note */
.notfound-helpful {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.4);
}
.notfound-helpful > span { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.notfound-helpful a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.notfound-helpful a:hover { text-decoration: underline; }


/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .notfound-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .notfound-hero { min-height: auto; padding: 140px 2rem 80px; }
  .notfound-sub { max-width: 100%; }
}

@media (max-width: 768px) {
  .notfound-hero { padding: 120px 1.25rem 60px; }
  .notfound-nav-grid { grid-template-columns: 1fr; }
  .notfound-digit { font-size: clamp(60px, 15vw, 90px); }
  .notfound-zero {
    width: clamp(55px, 13vw, 84px);
    height: clamp(55px, 13vw, 84px);
  }
  .notfound-actions { flex-direction: column; }
  .notfound-actions .btn-gold,
  .notfound-actions .btn-outline { text-align: center; }
}

@media (max-width: 480px) {
  .notfound-nav-grid { gap: 0.5rem; }
}













































/* ═══════════════════════════════════════════════════════════════
   THANK YOU PAGE — styles.css additions
   Append to bottom of styles.css
   All classes prefixed thankyou- to avoid collisions
   ═══════════════════════════════════════════════════════════════ */

.thankyou-page {
  min-height: 100vh;
  background: var(--navy);
}

/* ─── HERO SECTION ─── */
.thankyou-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 150px 2rem 80px;
  overflow: hidden;
}
.thankyou-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.thankyou-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 2;
}


/* ─── CHECK ANIMATION ─── */
.thankyou-check-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.thankyou-check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--gold);
  animation: tyRingExpand 0.5s ease-out forwards;
  transform-origin: center;
}
@keyframes tyRingExpand {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.thankyou-check-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  color: var(--gold);
  font-weight: 900;
  animation: tyCheckPop 0.4s ease-out 0.4s both;
}
@keyframes tyCheckPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}


/* ─── LEFT COLUMN ─── */
.thankyou-left {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.thankyou-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.thankyou-title em {
  font-style: normal;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.thankyou-sub {
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 500px;
}

/* Next steps */
.thankyou-next { display: flex; flex-direction: column; gap: 0; }
.thankyou-next-title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.thankyou-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1.35rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.thankyou-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.thankyou-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.thankyou-step-body h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.3rem;
}
.thankyou-step-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.5rem;
}
.thankyou-step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.75;
}
.thankyou-step-time-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  animation: tyDotPulse 2s ease-in-out infinite;
}
@keyframes tyDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* WhatsApp CTA button */
.thankyou-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }
.thankyou-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 13px 22px;
  background: #25D366;
  border-radius: 12px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  font-family: inherit;
}
.thankyou-wa-btn:hover { opacity: 0.88; transform: translateY(-2px); }


/* ─── RIGHT COLUMN ─── */
.thankyou-right { display: flex; flex-direction: column; gap: 1.25rem; }

/* Confirmation card */
.thankyou-confirm-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.thankyou-confirm-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.35rem;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.thankyou-confirm-icon {
  font-size: 1.3rem;
  width: 38px;
  height: 38px;
  background: rgba(201,168,76,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.thankyou-confirm-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
}
.thankyou-confirm-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  margin-top: 1px;
}
.thankyou-confirm-body {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}
.thankyou-confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
}
.thankyou-confirm-row:last-child { border-bottom: none; }
.thankyou-confirm-row span { color: rgba(255,255,255,0.4); font-weight: 500; }
.thankyou-confirm-row strong { color: var(--white); font-weight: 700; text-align: right; }
.thankyou-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #27ae60 !important;
}
.thankyou-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27ae60;
  animation: tyDotPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.thankyou-confirm-note {
  padding: 0.75rem 1.35rem;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  line-height: 1.5;
}
.thankyou-confirm-note a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.thankyou-confirm-note a:hover { text-decoration: underline; }

/* Reading list */
.thankyou-reading {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.thankyou-reading-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
}
.thankyou-reading-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.thankyou-reading-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  transition: background 0.2s;
}
.thankyou-reading-item:hover { background: rgba(255,255,255,0.06); }
.thankyou-reading-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.thankyou-reading-cat--seo  { background: rgba(52,152,219,0.15); color: #60b4e8; }
.thankyou-reading-cat--case { background: rgba(201,168,76,0.15); color: var(--gold); }
.thankyou-reading-body { flex: 1; min-width: 0; }
.thankyou-reading-title-text {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  line-height: 1.35;
  transition: color 0.2s;
}
.thankyou-reading-item:hover .thankyou-reading-title-text { color: var(--white); }
.thankyou-reading-read { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 2px; }
.thankyou-reading-arrow {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.thankyou-reading-item:hover .thankyou-reading-arrow { transform: translateX(3px); }

/* Social follow */
.thankyou-social {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.thankyou-social-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
}
.thankyou-social-links { display: flex; gap: 0.65rem; }
.thankyou-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.thankyou-social-btn:hover { opacity: 0.85; transform: translateY(-2px); }
.thankyou-social-btn--twitter  { background: #000; color: #fff; }
.thankyou-social-btn--linkedin { background: #0077B5; color: #fff; }


/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .thankyou-inner { grid-template-columns: 1fr; gap: 3rem; }
  .thankyou-hero { min-height: auto; padding: 140px 2rem 80px; }
  .thankyou-sub { max-width: 100%; }
}
@media (max-width: 768px) {
  .thankyou-hero { padding: 120px 1.25rem 60px; }
  .thankyou-actions { flex-direction: column; }
  .thankyou-wa-btn { width: 100%; justify-content: center; }
  .thankyou-social-links { flex-direction: column; }
  .thankyou-social-btn { justify-content: center; }
}





























































/* ═══════════════════════════════════════
   ERROR PAGES (500 + 404 shared styles)
   ═══════════════════════════════════════ */

   
/* ─── ERROR PAGES — navbar always solid ─── */
.error-page-body #navbar {
  background: rgba(13,27,62,0.98);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

 
.error-page {
  min-height: 100vh;
  background: var(--navy);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding-top: 80px;
}
.error-page-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.error-page-inner {
  max-width: 900px; margin: 0 auto;
  padding: 4rem;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  position: relative; z-index: 1; gap: 2.5rem;
}
 
/* Visual */
.error-visual { position: relative; }
.error-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(100px, 18vw, 200px);
  font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
.error-num::after {
  content: attr(data-num);
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.15;
}
.error-icon-row {
  display: flex; justify-content: center;
  gap: 1rem; margin-top: -1rem;
  font-size: 32px;
}
.error-icon { display: inline-block; }
.error-icon--spin {
  animation: spin 3s linear infinite;
}
.error-icon--spin-slow {
  animation: spin 5s linear infinite reverse;
}
 
/* Content */
.error-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.error-h1 em { font-style: normal; color: var(--gold); }
.error-sub {
  font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,0.6); max-width: 580px;
  margin: 0 auto 2rem;
}
.error-actions {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.error-btn-outline {
  color: var(--white) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
 
/* Quick links */
.error-quick-links p {
  font-size: 13px; color: rgba(255,255,255,0.35);
  margin-bottom: 0.8rem;
}
.error-links-row {
  display: flex; gap: 1.5rem;
  justify-content: center; flex-wrap: wrap;
}
.error-links-row a {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-decoration: none; transition: color 0.2s;
}
.error-links-row a:hover { color: var(--gold); }
 
/* Status note */
.error-status-note {
  display: flex; align-items: flex-start;
  gap: 0.8rem; padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; max-width: 500px;
  margin-top: 1rem;
}
.error-status-note span { font-size: 18px; flex-shrink: 0; }
.error-status-note p {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.4); text-align: left;
}
 
@media (max-width: 640px) {
  .error-page-inner { padding: 2rem; }
  .error-actions { flex-direction: column; align-items: center; }
  .error-actions .btn-gold,
  .error-actions .error-btn-outline { width: 100%; text-align: center; justify-content: center; }
}










/* ═══════════════════════════════════════
   FREE AUDIT SECTION
   Replaces newsletter section sitewide
   ═══════════════════════════════════════ */
 
.free-audit-section {
  padding: 7rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.free-audit-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.free-audit-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
 
/* Left — copy */
.free-audit-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 6px 16px;
  font-size: 12px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 1.2rem;
}
.free-audit-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.free-audit-h2 em { font-style: normal; color: var(--gold); }
.free-audit-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2rem; max-width: 480px;
}
 
/* What's included list */
.free-audit-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 2rem;
}
.free-audit-list-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,0.75);
}
.free-audit-list-item::before {
  content: '✓';
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--gold);
  flex-shrink: 0;
}
 
/* Trust signals row below the list */
.free-audit-trust {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.free-audit-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.35);
}
.free-audit-trust-icon { font-size: 14px; }
 
/* Right — form card */
.free-audit-form-wrap {
  background: var(--white);
  border-radius: 24px; padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.free-audit-form-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.free-audit-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.free-audit-form-sub {
  font-size: 13px; color: var(--gray-400);
  margin-bottom: 1.8rem;
}
 
/* Compact two-column form layout */
.free-audit-form-wrap .form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.free-audit-form-wrap .form-group {
  margin-bottom: 0.8rem;
}
.free-audit-form-wrap .form-group label {
  font-size: 12px;
}
.free-audit-form-wrap .form-group input,
.free-audit-form-wrap .form-group select {
  padding: 10px 12px;
  font-size: 13px;
}
 
/* Audit type selector — toggle pills */
.audit-type-row {
  display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap;
}
.audit-type-btn {
  flex: 1; min-width: 120px;
  padding: 8px 12px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--gray-400);
  cursor: pointer; text-align: center;
  transition: all 0.25s;
}
.audit-type-btn.active,
.audit-type-btn:hover {
  background: var(--navy);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}
.audit-type-label {
  font-size: 11px; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 6px;
  display: block;
}
 
/* Result promise strip at bottom of form */
.free-audit-promise {
  display: flex; align-items: center; gap: 8px;
  margin-top: 1rem; padding: 0.8rem;
  background: var(--gray-100); border-radius: 8px;
}
.free-audit-promise span { font-size: 16px; flex-shrink: 0; }
.free-audit-promise p {
  font-size: 12px; color: var(--gray-600); line-height: 1.4;
}
.free-audit-promise strong { color: var(--text); }
 
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .free-audit-section { padding: 5rem 2rem; }
  .free-audit-inner { grid-template-columns: 1fr; gap: 3rem; }
  .free-audit-sub { max-width: 100%; }
}
@media (max-width: 640px) {
  .free-audit-h2 { font-size: 28px; }
  .free-audit-form-wrap { padding: 1.8rem; }
  .free-audit-form-wrap .form-row { grid-template-columns: 1fr; }
}















/* ═══════════════════════════════════════
   PORTFOLIO — MORE WORK SECTION
   ═══════════════════════════════════════ */
 
.pg-more-work {
  padding: 6rem 4rem;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
.pg-more-work-inner { max-width: 1200px; margin: 0 auto; }
.pg-more-work-header { margin-bottom: 2rem; }
 
/* Filter bar */
.pg-more-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.pg-more-filter-btn {
  padding: 7px 16px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--gray-400); cursor: pointer;
  transition: all 0.25s; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pg-more-filter-btn:hover,
.pg-more-filter-btn--active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
}
.pg-more-filter-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
 
/* Grid */
.pg-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
 
/* Card */
.pg-more-card {
  position: relative; border-radius: 16px;
  overflow: hidden; min-height: 280px;
  background: var(--navy);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pg-more-card-link {
  display: block; height: 100%;
  position: absolute; inset: 0;
  text-decoration: none;
}
.pg-more-card-bg {
  position: absolute; inset: 0;
  transition: transform 0.5s var(--transition);
}
.pg-more-card:hover .pg-more-card-bg { transform: scale(1.04); }
 
/* Result badge */
.pg-more-result-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(13,27,62,0.9);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 10px; padding: 6px 10px;
  text-align: center; backdrop-filter: blur(12px);
  z-index: 4;
}
.pg-more-result-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.pg-more-result-lbl {
  display: block; font-size: 9px;
  color: rgba(255,255,255,0.45); margin-top: 2px;
  white-space: nowrap;
}
 
/* Default footer */
.pg-more-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end;
  justify-content: space-between;
  padding: 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  z-index: 4; transition: opacity 0.3s;
}
.pg-more-card:hover .pg-more-card-footer { opacity: 0; pointer-events: none; }
.pg-more-card-footer-left { display: flex; flex-direction: column; gap: 5px; }
.pg-more-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-more-client {
  display: flex; align-items: center; gap: 8px;
}
.pg-more-client-icon { font-size: 16px; }
.pg-more-client-name {
  font-size: 13px; font-weight: 700; color: var(--white);
}
.pg-more-client-industry { font-size: 10px; color: rgba(255,255,255,0.45); }
.pg-more-result-line {
  font-size: 11px; font-weight: 600;
  color: var(--gold); margin-top: 2px;
}
.pg-more-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--white); flex-shrink: 0;
  transition: all 0.3s;
}
.pg-more-card:hover .pg-more-arrow {
  background: var(--gold); border-color: var(--gold);
  color: var(--navy); transform: rotate(-45deg);
}
 
/* Hover overlay */
.pg-more-overlay {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(13,27,62,0.92);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--transition);
}
.pg-more-card:hover .pg-more-overlay {
  opacity: 1; pointer-events: all;
}
.pg-more-overlay-inner {
  padding: 1.5rem; width: 100%;
  transform: translateY(10px);
  transition: transform 0.3s var(--transition);
}
.pg-more-card:hover .pg-more-overlay-inner { transform: translateY(0); }
.pg-more-overlay-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700;
  color: var(--white); margin: 0.6rem 0 1rem;
  line-height: 1.3;
}
.pg-more-overlay-metrics {
  display: flex; gap: 1rem; margin-bottom: 1rem;
}
.pg-more-overlay-metric { text-align: center; }
.pg-more-overlay-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--gold);
}
.pg-more-overlay-lbl {
  font-size: 10px; color: rgba(255,255,255,0.4);
}
.pg-more-overlay-cta {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy); border-radius: 6px;
  font-size: 12px; font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pg-more-overlay-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(201,168,76,0.3);
}
 
/* Responsive */
@media (max-width: 1024px) {
  .pg-more-work { padding: 4rem 2rem; }
  .pg-more-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pg-more-grid { grid-template-columns: 1fr; }
  .pg-more-card { min-height: 240px; }
}
 
















































/* ═══════════════════════════════════════
   UNSUBSCRIBE PAGE STYLES
   ═══════════════════════════════════════ */

.unsub-page { min-height: 100vh; }

/* ─── HERO ─── */
.unsub-hero {
  background: var(--navy);
  min-height: 100vh;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding-top: 80px;
}
.unsub-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.unsub-hero-inner {
  max-width: 1100px; margin: 0 auto; width: 100%;
  padding: 4rem 4rem 5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
  position: relative; z-index: 2;
}

/* ─── LOGO ─── */
.unsub-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 2.5rem;
  text-decoration: none;
}
.unsub-logo-hex {
  font-size: 28px; color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 900; line-height: 1;
}
.unsub-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 900; color: var(--white);
}
.unsub-logo-text span { color: var(--gold); }

/* ─── STATES ─── */
.unsub-state { transition: opacity 0.4s, transform 0.4s; }
.unsub-state--hidden {
  display: none;
  opacity: 0; transform: translateY(20px);
}
.unsub-state--visible {
  display: block;
  opacity: 1; transform: translateY(0);
}

/* ─── H1 + SUB ─── */
.unsub-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 900; color: var(--white);
  line-height: 1.15; margin-bottom: 1.2rem;
}
.unsub-h1 em { font-style: normal; color: var(--gold); }
.unsub-sub {
  font-size: 16px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2rem; max-width: 460px;
}

/* ─── WHAT YOU GET ─── */
.unsub-what-you-get {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.3rem;
}
.unsub-what-title {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 1rem;
}
.unsub-what-items { display: flex; flex-direction: column; gap: 8px; }
.unsub-what-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.55);
}
.unsub-what-icon { font-size: 15px; flex-shrink: 0; }

/* ─── SUCCESS / PAUSE STATES ─── */
.unsub-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(40,202,65,0.15);
  border: 2px solid rgba(40,202,65,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #28CA41;
  margin-bottom: 1.5rem;
  animation: successPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.unsub-success-icon--pause {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
  color: var(--gold);
}
@keyframes successPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.unsub-success-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.unsub-resubscribe-btn {
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}
.unsub-success-note {
  font-size: 12px; color: rgba(255,255,255,0.35);
}

/* ─── FORM CARD ─── */
.unsub-form-card {
  background: var(--white);
  border-radius: 20px; padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  position: relative; overflow: hidden;
}
.unsub-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.unsub-form-header { margin-bottom: 1.8rem; }
.unsub-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700; color: var(--text);
}
.unsub-form-sub { font-size: 13px; color: var(--gray-400); margin-top: 3px; }
.unsub-optional { font-size: 11px; color: var(--gray-400); font-weight: 400; }

/* ─── REASON SELECTOR ─── */
.unsub-reasons {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 0.5rem;
}
.unsub-reason-option { cursor: pointer; }
.unsub-reason-option input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.unsub-reason-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 12px; font-weight: 500;
  color: var(--gray-600);
  transition: all 0.2s; cursor: pointer;
  height: 100%;
}
.unsub-reason-option:hover .unsub-reason-card {
  border-color: rgba(201,168,76,0.3);
  background: var(--gold-dim);
  color: var(--text);
}
.unsub-reason-option input:checked + .unsub-reason-card {
  background: var(--navy);
  border-color: rgba(201,168,76,0.4);
  color: var(--white);
}
.unsub-reason-icon { font-size: 16px; flex-shrink: 0; }
.unsub-reason-text { line-height: 1.3; }

/* ─── COMMENT FIELD ─── */
.unsub-comment-wrap {
  max-height: 0; overflow: hidden;
  opacity: 0; transition: max-height 0.4s var(--transition), opacity 0.3s;
}
.unsub-comment-wrap.unsub-comment-visible {
  max-height: 150px; opacity: 1;
}

/* ─── ACTION BUTTONS ─── */
.unsub-actions {
  display: flex; flex-direction: column;
  gap: 0.8rem; margin-top: 1.5rem;
}
.unsub-btn-main {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: var(--white); border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all 0.3s;
}
.unsub-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(231,76,60,0.3);
}
.unsub-btn-main:disabled {
  opacity: 0.6; cursor: not-allowed; transform: none;
}
.unsub-divider {
  display: flex; align-items: center; gap: 1rem;
  color: var(--gray-400); font-size: 12px;
}
.unsub-divider::before,
.unsub-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--gray-200);
}
.unsub-btn-pause {
  width: 100%; padding: 12px;
  background: transparent;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--gray-400); cursor: pointer;
  transition: all 0.3s;
}
.unsub-btn-pause:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
}

/* ─── REASSURANCE STRIP ─── */
.unsub-reassurance {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}
.unsub-reassurance-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--gray-400);
}

/* ─── STAY CARD ─── */
.unsub-stay-card {
  margin-top: 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.2rem;
  transition: opacity 0.4s;
}
.unsub-stay-card.hidden { opacity: 0; pointer-events: none; }
.unsub-stay-inner {
  display: flex; gap: 12px; align-items: flex-start;
}
.unsub-stay-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.unsub-stay-title {
  font-size: 13px; font-weight: 700;
  color: var(--white); margin-bottom: 4px;
}
.unsub-stay-body { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.6; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .unsub-hero-inner {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 4rem; gap: 3rem;
  }
  .unsub-sub { max-width: 100%; }
  .unsub-success-actions { flex-direction: column; }
}
@media (max-width: 640px) {
  .unsub-h1 { font-size: 32px; }
  .unsub-reasons { grid-template-columns: 1fr; }
  .unsub-form-card { padding: 1.8rem; }
}



























/*.hp-field-wrap {*/
/*  position: absolute;*/
/*  left: -9999px;*/
/*  top: -9999px;*/
/*  width: 1px;*/
/*  height: 1px;*/
/*  overflow: hidden;*/
/*}*/



.hp-field-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


















































/* ═══════════════════════════════════════════════════════════════════════
   INDUSTRIES HUB + INDUSTRY DETAIL — additions to styles.css
   Reuses existing tokens (--navy, --gold, etc.) and existing components
   (.svc-page-hero, .sp-* service-page pattern, .pg-ind-* cards) wherever
   possible. Only genuinely new layout gets new classes below.
   Append this whole block to the end of styles.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── BREADCRUMB (industry detail page) ─── */
.ind-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,0.35);
  margin-bottom: 1.8rem;
}
.ind-breadcrumb a {
  color: rgba(255,255,255,0.45); text-decoration: none;
  transition: color 0.2s;
}
.ind-breadcrumb a:hover { color: var(--gold); }
.ind-breadcrumb span.ind-crumb-sep { color: rgba(255,255,255,0.2); }
.ind-breadcrumb span.ind-crumb-current { color: var(--gold); font-weight: 600; }

/* ─── HUB — INDUSTRY GRID CARDS ─── */
.ind-grid-section {
  padding: 6rem 4rem 8rem;
  background: var(--off-white);
}
.ind-grid-inner { max-width: 1200px; margin: 0 auto; }
.ind-grid-header { margin-bottom: 3.5rem; }
.ind-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ind-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 2.2rem;
  text-decoration: none; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform 0.35s var(--transition), box-shadow 0.35s, border-color 0.35s;
}
.ind-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--transition);
}
.ind-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.25);
}
.ind-card:hover::before { transform: scaleX(1); }
.ind-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.ind-card-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
  transition: background 0.3s;
}
.ind-card:hover .ind-card-icon { background: var(--navy); }
.ind-card-stat {
  text-align: right;
}
.ind-card-stat-num {
  display: block; font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: var(--gold);
}
.ind-card-stat-lbl { font-size: 10px; color: var(--gray-400); white-space: nowrap; }
.ind-card-name {
  font-size: 19px; font-weight: 700; color: var(--text);
  margin-bottom: 0.6rem;
}
.ind-card-desc {
  font-size: 13.5px; line-height: 1.7; color: var(--gray-600);
  flex: 1; margin-bottom: 1.3rem;
}
.ind-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 1.3rem; }
.ind-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.2rem; border-top: 1px solid var(--gray-200);
}
.ind-card-cta {
  font-size: 13px; font-weight: 700; color: var(--gold);
}
.ind-card-arrow-mini {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--gray-400);
  transition: all 0.3s;
}
.ind-card:hover .ind-card-arrow-mini {
  background: var(--gold); color: var(--navy); transform: translateX(3px);
}

/* ─── HUB — WHY INDUSTRY-SPECIFIC (comparison) ─── */
.ind-why-section {
  padding: 8rem 4rem;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.ind-why-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ind-why-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.ind-why-header { margin-bottom: 3.5rem; max-width: 640px; }
.ind-why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.ind-why-col {
  border-radius: 20px; padding: 2.2rem;
  border: 1px solid rgba(255,255,255,0.08);
}
.ind-why-col--bad {
  background: rgba(255,255,255,0.02);
}
.ind-why-col--good {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.25);
}
.ind-why-col-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.ind-why-col--bad .ind-why-col-label { color: rgba(255,255,255,0.4); }
.ind-why-col--good .ind-why-col-label { color: var(--gold); }
.ind-why-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.ind-why-list li {
  font-size: 14px; line-height: 1.6; padding-left: 1.6rem; position: relative;
}
.ind-why-col--bad li { color: rgba(255,255,255,0.5); }
.ind-why-col--good li { color: rgba(255,255,255,0.85); }
.ind-why-col--bad li::before {
  content: '✕'; position: absolute; left: 0; color: rgba(255,90,90,0.6); font-weight: 700;
}
.ind-why-col--good li::before {
  content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700;
}

/* ─── DETAIL PAGE — SNAPSHOT VISUAL (hero right) ─── */
.ind-snapshot-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.ind-snapshot-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1.5rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ind-snapshot-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.ind-snapshot-title { font-size: 14px; font-weight: 700; color: var(--white); }
.ind-snapshot-sub { font-size: 11px; color: rgba(255,255,255,0.4); }
.ind-snapshot-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1.5rem;
}
.ind-snapshot-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 1.2rem 1rem; text-align: center;
}
.ind-snapshot-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--gold); line-height: 1;
}
.ind-snapshot-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 6px; line-height: 1.3; }
.ind-snapshot-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ind-snapshot-list li {
  font-size: 12.5px; color: rgba(255,255,255,0.65);
  padding-left: 1.3rem; position: relative; line-height: 1.5;
}
.ind-snapshot-list li::before {
  content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: 11px; font-weight: 700;
}

/* Make .pg-ind-card work as a clickable link (reused for "related industries") */
.pg-ind-card[href] { text-decoration: none; display: block; cursor: pointer; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .ind-grid-section { padding: 4rem 2rem 5rem; }
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .ind-why-section { padding: 5rem 2rem; }
  .ind-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ind-grid { grid-template-columns: 1fr; }
  .ind-snapshot-stats { grid-template-columns: 1fr 1fr; }
}


.indusrtries-final-cta{
  margin-bottom: -1px;
}







































/* ═══════════════════════════════════════
   TESTIMONIALS PAGE
   ═══════════════════════════════════════ */
.tst-hero { padding-bottom: 3rem; }

.tst-btn-outline{
  background-color: var(--navy);
}

/* .tst-filter-bar {
  display: flex; justify-content: center; gap: 8px;
  flex-wrap: wrap; padding: 0 4rem 4rem;
  max-width: 1200px; margin: 0 auto;
}

.tst-filter-btn {
  padding: 8px 18px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--gray-400); cursor: pointer;
  transition: all 0.25s;
}

.tst-filter-btn:hover,
.tst-filter-btn--active {
  background: var(--navy); border-color: var(--navy); color: var(--gold);
} */


/* ═══════════════════════════════════════
   TESTIMONIALS — STICKY FILTER SUBNAV
   ═══════════════════════════════════════ */
.tst-subnav {
  position: sticky; top: 80px; z-index: 900;
  background: rgba(13,27,62,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tst-subnav::-webkit-scrollbar { display: none; }

.tst-subnav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 4rem;
  display: flex; gap: 0;
}
.tst-subnav-item {
  padding: 1.1rem 1.5rem;
  background: none; border: none;
  color: rgba(255,255,255,0.5);
  font-family: 'DM Sans', sans-serif;
  text-decoration: none; font-size: 13px;
  font-weight: 500; white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.tst-subnav-item:hover,
.tst-subnav-item.active-tst {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.tst-count {
  text-align: left;
  font-size: 15px; font-weight: 500;
  color: var(--gray-400);
  padding: 1.5rem 4rem 1.5rem;
  background: var(--off-white);
}
.tst-count strong { color: var(--gold); font-weight: 700; }

@media (max-width: 1024px) {
  .tst-subnav-inner { padding: 0 1rem; }
  .tst-count { padding: 1.5rem 2rem 0; }
}



.tst-load-more-wrap {
  text-align: center;
  margin-top: 3rem;
}




.tst-grid-section { padding: 0 4rem 8rem; background: var(--off-white); }
.tst-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.tst-card {
  background: var(--white); border-radius: 20px;
  padding: 2rem; border: 1px solid var(--gray-200);
  box-shadow: 0 4px 24px rgba(13,27,62,0.05);
  display: flex; flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.tst-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13,27,62,0.1);
  border-color: rgba(201,168,76,0.25);
}
.tst-card-top { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.tst-stars { color: var(--gold); font-size: 13px; }
.tst-quote-mark {
  font-family: 'Playfair Display', serif; font-size: 44px;
  line-height: 0.7; color: var(--gold); opacity: 0.25;
}
.tst-body { font-size: 14px; line-height: 1.8; color: var(--gray-600); flex: 1; margin-bottom: 1.5rem; }
.tst-result-badge {
  display: inline-block; margin-bottom: 1rem;
  background: var(--gold-dim); border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px; padding: 4px 12px;
  font-size: 11px; font-weight: 700; color: var(--gold); width: fit-content;
}
.tst-author { display: flex; align-items: center; gap: 12px; padding-top: 1.2rem; border-top: 1px solid var(--gray-200); }
.tst-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--gold);
  font-family: 'Playfair Display', serif; flex-shrink: 0;
  border: 2px solid rgba(201,168,76,0.15);
}
.tst-name { font-size: 14px; font-weight: 600; color: var(--text); }
.tst-role { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.tst-case-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 0.8rem; color: var(--gold); text-decoration: none;
  font-size: 12px; font-weight: 600;
}
.tst-empty { text-align: center; padding: 4rem 2rem; grid-column: 1 / -1; }

@media (max-width: 1024px) {
  /* .tst-filter-bar { padding: 0 2rem 3rem; } */
  .tst-grid-section { padding: 0 2rem 5rem; }
  .tst-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tst-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   FAQ HUB PAGE
   ═══════════════════════════════════════ */
.fh-featured-section { padding: 3rem 4rem 5rem; background: var(--white); }
.fh-featured-inner { max-width: 900px; margin: 0 auto; }

/* .fh-cat-nav {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 0 4rem 4rem; max-width: 1000px; margin: 0 auto;
} */

/* .fh-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 100px; text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--gray-600);
  transition: all 0.25s;
}


.fh-cat-btn:hover { background: var(--navy); color: var(--gold); border-color: var(--navy); } */














/* ═══════════════════════════════════════
   FAQ HUB — STICKY CATEGORY SUBNAV
   (mirrors .svc-subnav pattern)
   ═══════════════════════════════════════ */
   
.fh-subnav {
  position: sticky; top: 80px; z-index: 900;
  background: rgba(13,27,62,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fh-subnav::-webkit-scrollbar { display: none; }

.fh-subnav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 4rem;
  display: flex; gap: 0;
}
.fh-subnav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 1.1rem 1.5rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none; font-size: 13px;
  font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.fh-subnav-item:hover,
.fh-subnav-item.active-fh {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

@media (max-width: 1024px) {
  .fh-subnav-inner { padding: 0 1rem; }
}


.fh-category-section { padding: 0 4rem 5rem; background: var(--white); scroll-margin-top: 100px; }
.fh-category-inner { max-width: 900px; margin: 0 auto; }
.fh-category-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1.5rem;
}
.fh-category-icon { font-size: 24px; }
.fh-category-title { font-size: 22px; font-weight: 700; font-family: 'Playfair Display', serif; color: var(--text); }

@media (max-width: 1024px) {
  .fh-featured-section, 
  /* .fh-cat-nav,  */
  .fh-category-section { padding-left: 2rem; padding-right: 2rem; }
}


























/* ═══════════════════════════════════════
   COOKIE CONSENT BANNER
   ═══════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10002;
  background: rgba(13, 27, 62, 0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  padding: 1.5rem 2rem;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.45s;
}

.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.cookie-banner-body {
  flex: 1;
  min-width: 240px;
}

.cookie-banner-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.cookie-banner-text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-text a:hover {
  opacity: 0.8;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
  border: none;
}

.cookie-btn--reject {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}

.cookie-btn--reject:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.cookie-btn--accept {
  background: linear-gradient(135deg, #F0C040, #C9A84C);
  color: var(--navy);
}

.cookie-btn--accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.3);
}

#cookiePreferencesLink {
  cursor: pointer;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .cookie-banner {
    padding: 1.25rem 1.25rem;
  }
  .cookie-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
    text-align: center;
  }
}


































/* ═══════════════════════════════════════
   BLOG BODY — CONTENT CONSTRAINTS
   Prevents CKEditor-inserted media from
   overflowing the article column, and
   forces one consistent font regardless
   of what font an editor picked in the
   toolbar.
   ═══════════════════════════════════════ */

/* ─── Force one unified reading font ─── */
.article-ckeditor-body,
.article-ckeditor-body * {
  font-family: 'DM Sans', sans-serif !important;
}

.article-ckeditor-body {
  margin-bottom: 4.5rem;
}

/* Keep headings visually distinct with the serif display font,
   consistent with the rest of the site's heading style */
.article-ckeditor-body h1,
.article-ckeditor-body h2,
.article-ckeditor-body h3,
.article-ckeditor-body h4 {
  font-family: 'Playfair Display', serif !important;
}

/* ─── Never let embedded content exceed the column width ─── */
.article-ckeditor-body img,
.article-ckeditor-body video,
.article-ckeditor-body iframe,
.article-ckeditor-body embed,
.article-ckeditor-body object {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 1.5rem auto;
  border-radius: 10px;
}

/* Iframes (YouTube embeds etc.) often carry fixed width/height
   attributes — this keeps the aspect ratio intact while still
   respecting max-width above */
.article-ckeditor-body iframe {
  aspect-ratio: 16 / 9;
  width: 100% !important;
  height: auto !important;
}

/* Figures (CKEditor wraps some images in <figure>) */
.article-ckeditor-body figure {
  max-width: 100%;
  margin: 1.5rem auto;
}
.article-ckeditor-body figure img {
  margin: 0;
}
.article-ckeditor-body figcaption {
  font-size: 12.5px;
  color: var(--gray-400);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ─── Tables — scroll instead of overflow ─── */
.article-ckeditor-body table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 14px;
}
.article-ckeditor-body table td,
.article-ckeditor-body table th {
  border: 1px solid var(--gray-200);
  padding: 0.6rem 0.9rem;
  text-align: left;
}
.article-ckeditor-body table th {
  background: var(--gray-100);
  font-weight: 700;
}

/* ─── Code blocks — wrap instead of overflow ─── */
.article-ckeditor-body pre,
.article-ckeditor-body code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}











/* ═══════════════════════════════════════
   BLOG BODY — EDITORIAL TYPOGRAPHY
   Full styling pass for CKEditor-generated
   content: spacing, line-height, lists,
   blockquotes, links, emphasis, dividers.
   ═══════════════════════════════════════ */

/* ─── Base reading rhythm ─── */
.article-ckeditor-body {
  font-size: 16.5px;
  line-height: 1.9;
  color: #33415c;
}

.article-ckeditor-body p {
  margin-bottom: 1.5rem;
}
.article-ckeditor-body p:last-child { margin-bottom: 0; }

/* ─── Headings — generous top spacing so sections breathe ─── */
.article-ckeditor-body h2 {
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
  margin: 3rem 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid rgba(201,168,76,0.25);
}
.article-ckeditor-body h2:first-child { margin-top: 0; }

.article-ckeditor-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 2.25rem 0 0.85rem;
}

.article-ckeditor-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.75rem 0 0.65rem;
}

/* ─── Lists ─── */
.article-ckeditor-body ul,
.article-ckeditor-body ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.article-ckeditor-body li {
  line-height: 1.75;
  padding-left: 0.3rem;
}
.article-ckeditor-body ul li::marker {
  color: var(--gold);
}
.article-ckeditor-body ol li::marker {
  color: var(--gold);
  font-weight: 700;
}
/* Nested lists get tighter spacing */
.article-ckeditor-body li ul,
.article-ckeditor-body li ol {
  margin: 0.5rem 0 0;
  gap: 0.4rem;
}

/* To-do lists (CKEditor todoList plugin) */
.article-ckeditor-body .todo-list {
  list-style: none;
  padding-left: 0;
}
.article-ckeditor-body .todo-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-left: 0;
}

/* ─── Links ─── */
.article-ckeditor-body a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(201,168,76,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s, color 0.2s;
}
.article-ckeditor-body a:hover {
  text-decoration-color: var(--gold);
  color: #b8933f;
}

/* ─── Emphasis ─── */
.article-ckeditor-body strong,
.article-ckeditor-body b {
  color: var(--navy);
  font-weight: 700;
}
.article-ckeditor-body em,
.article-ckeditor-body i {
  font-style: italic;
}
.article-ckeditor-body mark {
  background: rgba(201,168,76,0.18);
  padding: 1px 4px;
  border-radius: 3px;
  color: inherit;
}

/* ─── Blockquote (default, not the article-pull-quote style) ─── */
.article-ckeditor-body blockquote {
  margin: 2rem 0;
  padding: 1.1rem 1.5rem;
  border-left: 3px solid var(--gold);
  background: var(--gray-100);
  border-radius: 0 10px 10px 0;
  font-size: 16px;
  font-style: italic;
  color: #4b5563;
  line-height: 1.75;
}
.article-ckeditor-body blockquote p:last-child { margin-bottom: 0; }

/* Pull Quote style (from CKEditor Style dropdown → "Pull Quote") */
.article-ckeditor-body .article-pull-quote {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  text-align: center;
  border: none;
  background: none;
  padding: 0 2rem;
  margin: 2.75rem 0;
}
.article-ckeditor-body .article-pull-quote::before {
  content: '"';
  display: block;
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.5;
  line-height: 0.5;
  margin-bottom: 0.6rem;
}

/* ─── Callouts (from CKEditor Style dropdown) — refine existing rule ─── */
.article-callout {
  line-height: 1.7;
}

/* ─── Horizontal rule ─── */
.article-ckeditor-body hr {
  border: none;
  height: 1px;
  background: var(--gray-200);
  margin: 2.75rem 0;
}

/* ─── Subscript / superscript ─── */
.article-ckeditor-body sub,
.article-ckeditor-body sup {
  font-size: 0.75em;
}

/* ─── Small screens — tighten rhythm slightly ─── */
@media (max-width: 640px) {
  .article-ckeditor-body {
    font-size: 15.5px;
    line-height: 1.8;
  }
  .article-ckeditor-body h2 { margin: 2.25rem 0 0.9rem; }
  .article-ckeditor-body h3 { margin: 1.75rem 0 0.65rem; }
  .article-ckeditor-body blockquote { padding: 0.9rem 1.15rem; font-size: 15px; }
}






/* ─── NUMBERED STEPS BLOCK (CKEditor Style: "Numbered Steps") ─── */
.article-steps {
  counter-reset: article-step;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article-steps > p {
  counter-increment: article-step;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 0 !important;
}
.article-steps > p:last-child { border-bottom: none; }
.article-steps > p::before {
  content: counter(article-step);
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}






/* ─── COMPARISON BLOCK ─── */
.article-ckeditor-body .article-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.75rem 0;
}
.article-ckeditor-body .article-compare > p:first-child {
  background: #fdf5f5;
}
.article-ckeditor-body .article-compare > p:last-child {
  background: #f4faf5;
}
.article-ckeditor-body .article-compare > p {
  padding: 1.2rem;
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.7;
}
.article-ckeditor-body .article-compare > p:first-child::before {
  content: '✕ Common Mistake';
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c0392b;
  margin-bottom: 0.5rem;
}
.article-ckeditor-body .article-compare > p:last-child::before {
  content: '✓ Better Approach';
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #27ae60;
  margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
  .article-ckeditor-body .article-compare { grid-template-columns: 1fr; }
}








/* ─── EXPERT QUOTE BLOCK ─── */
.article-ckeditor-body .article-quote-box {
  background: var(--gray-100);
  border-radius: 12px;
  padding: 1.4rem;
  margin: 1.75rem 0;
  border-left: 3px solid var(--gold);
}
.article-ckeditor-body .article-quote-box p {
  font-style: italic;
  font-size: 15px;
  margin-bottom: 0.5rem !important;
}
.article-ckeditor-body .article-quote-box p:last-child {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0 !important;
}









.article-ckeditor-body .article-keyterm {
  background: rgba(201,168,76,0.15);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--navy);
}









.article-ckeditor-body .article-definition {
  background: var(--navy);
  border-radius: 12px;
  padding: 1.4rem;
  margin: 1.75rem 0;
}
.article-ckeditor-body .article-definition p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 0 !important;
}
.article-ckeditor-body .article-definition p strong {
  color: var(--gold);
}