/* =========================================================================
   SOLAR SURVEYS LTD - GLOBAL STYLES
   ========================================================================= */

/* --- CSS VARIABLES --- */
:root {
  --color-primary: #0a1628;        /* near-black navy - main background */
  --color-secondary: #111e36;      /* slightly lighter navy */
  --color-gold: #c9a84c;           /* brand gold */
  --color-gold-light: #d4b86a;     /* hover state for gold */
  --color-white: #f8f8f8;          /* warm white for body text */
  --color-white-pure: #ffffff;     /* pure white for headings */
  --color-muted: #8892a4;          /* grey for secondary text */
  --color-electric: #4a90d9;       /* electric blue for data highlights */
  --color-border: rgba(201,168,76,0.2);  /* subtle gold border */
  --color-card: #0f1a2e;           /* dark card backgrounds */
  --color-background: #0a1628;    /* alias for --color-primary */
  --color-text: #f8f8f8;          /* alias for --color-white */

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  
  --spacing-section: 8rem;
  --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Canonical responsive breakpoints. Native @media cannot read var(),
     so these are documentary. Every @media rule in this file uses one of
     these four widths. Do not introduce new breakpoints. */
  --bp-mobile: 375px;   /* small phone, below this tighten further */
  --bp-tablet: 768px;   /* tablet portrait + large phone landscape */
  --bp-laptop: 1024px;  /* laptop portrait + tablet landscape */
  --bp-desktop: 1440px; /* desktop large */
}

.sec-padding {
  padding: var(--spacing-section) 0;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-primary);
  color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-white-pure);
  line-height: 1.2;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

p {
  font-family: var(--font-body);
  font-weight: 300;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  color: var(--color-white);
}

.text-muted {
  color: var(--color-muted);
}

.mono-stat {
  font-family: var(--font-mono);
  color: var(--color-gold);
}

.electric-accent {
  color: var(--color-electric);
}

/* --- UTILITIES --- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--spacing-section) 0;
}

.text-center { text-align: center; }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: var(--transition-smooth);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201,168,76,0.3);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-white-pure);
  border: 1px solid var(--color-white-pure);
}

.btn-outline:hover {
  background-color: rgba(255,255,255,0.1);
}

/* --- NAVIGATION --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.5rem 0;
  transition: padding 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.scrolled {
  background-color: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo img {
  height: 40px;
  width: auto;
  max-width: 160px;
  display: block;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  flex-wrap: nowrap;
}

.nav-links a {
  color: var(--color-white-pure);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--color-gold);
}

/* Get a Quote CTA: never let "Get a Quote" wrap inside the button. */
.nav-cta {
  white-space: nowrap;
}

/* Compact desktop nav between laptop (1024) and desktop-large (1440):
   the full horizontal nav has 7 links + logo + CTA. At the original
   spacing those items only fit at >~1100px wide. Strip-nav now fires
   at <=1024 (Phase 10A canonical breakpoint), so this range needs a
   tighter scale to fit before strip-nav kicks in. */
@media (min-width: 1024px) and (max-width: 1440px) {
  .nav-links {
    gap: 1rem;
  }
  .nav-links a {
    font-size: 0.78rem;
    letter-spacing: 0.5px;
  }
  .nav-cta {
    font-size: 0.74rem !important;
    padding: 0.45rem 1rem !important;
  }
}

/* Dropdown styling */
.has-dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(6, 12, 24, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 168, 90, 0.25);
  border-top: 2px solid var(--color-gold);
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition-smooth);
  border-radius: 0 0 4px 4px;
  padding: 0.5rem 0 0.75rem;
  list-style: none;
  box-shadow: 0 20px 48px rgba(0,0,0,0.55);
}
.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li {
  border-bottom: 1px solid rgba(200, 168, 90, 0.08);
}
.dropdown-menu li:last-child {
  border-bottom: none;
}
.dropdown-menu li a {
  display: block;
  position: relative;
  padding: 0.7rem 1.5rem 0.7rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248,248,248,0.72);
  transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
  overflow: hidden;
}
.dropdown-menu li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gold);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.dropdown-menu li a::after {
  content: '↗';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: var(--font-mono);
}
.dropdown-menu li a:hover {
  background: rgba(200, 168, 90, 0.06);
  color: rgba(248,248,248,1);
  padding-left: 2rem;
}
.dropdown-menu li a:hover::before {
  transform: scaleY(1);
}
.dropdown-menu li a:hover::after {
  opacity: 0.6;
}

/* Dropdown section labels (Browse by Search / Our Services) */
.dropdown-section-label {
  border-bottom: none !important;
  padding: 0.85rem 1.5rem 0.4rem;
  pointer-events: none;
}
.dropdown-section-label:first-child {
  padding-top: 0.45rem;
}
.dropdown-section-label span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.7;
}
.dropdown-section-divider {
  border-bottom: none !important;
  margin: 0.4rem 1.4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0) 0%, rgba(201,168,76,0.32) 50%, rgba(201,168,76,0) 100%);
}
.dropdown-section-divider a { display: none; }
.dropdown-menu li.dropdown-section-label + li a,
.dropdown-menu li.dropdown-section-divider + li.dropdown-section-label + li a {
  font-weight: 500;
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-gold);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
  border-color: var(--color-gold);
  outline: none;
}
.mobile-menu-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(201,168,76,0.3);
}

/* --- HERO COMPONENT FROM 21ST DEV (TRANSLATED TO VANILLA) --- */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 8rem; /* space for absolute navbar */
  padding-bottom: 4rem;
}

.hero-video-wrapper {
  position: absolute;
  inset: 1rem; /* The inset-1 margin effect from Tailwind */
  z-index: 1;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

.hero-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5; /* Matches their dark opacity setting */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.4); /* 40% opacity to reveal beautiful drone footage */
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
}

.hero-label {
  display: inline-block;
  color: var(--color-gold);
  font-family: var(--font-heading);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* --- KEN BURNS HERO IMAGE --- */
.ken-burns-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.ken-burns-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform-origin: center center;
  animation: kenBurns 15s ease-in-out infinite;
  will-change: transform;
}

@keyframes kenBurns {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Gold corner accent marks */
.ken-burns-wrap::before,
.ken-burns-wrap::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--color-gold);
  border-style: solid;
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}
.ken-burns-wrap::before {
  top: 12px; left: 12px;
  border-width: 1.5px 0 0 1.5px;
}
.ken-burns-wrap::after {
  bottom: 12px; right: 12px;
  border-width: 0 1.5px 1.5px 0;
}

/* --- INFINITE SLIDER LOGOS --- */
.infinite-slider-wrapper {
  background: var(--color-primary);
  padding: 4rem 0;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trusted-by-eyebrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: rgba(201,168,76,0.5);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  margin-left: 0.4em; /* offset for exact kerning centering */
}

.slider-track {
  display: flex;
  width: max-content;
  animation: slideLeft 50s linear infinite;
  gap: 5rem;
  align-items: center;
}

.slider-track:hover {
  animation-play-state: paused;
}

.slider-track img {
  height: 48px;
  max-width: 180px;
  object-fit: contain;
  opacity: 1;
}

.slider-track img:hover {
  opacity: 1;
}

@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- SECTOR STRIP --- */
.sector-strip {
  background: var(--color-primary);
  padding: 3rem 0;
  border-top: 1px solid rgba(201,168,76,0.12);
  border-bottom: 1px solid rgba(201,168,76,0.12);
}
.sector-strip-heading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: rgba(201,168,76,0.55);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.75rem;
  font-weight: 400;
}
.sector-strip-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sector-chip {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: rgba(248,248,248,0.6);
  border: 1px solid rgba(248,248,248,0.14);
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sector-chip:hover {
  color: rgba(201,168,76,0.85);
  border-color: rgba(201,168,76,0.35);
}
@media (max-width: 768px) {
  .sector-strip-chips {
    gap: 0.5rem;
  }
  .sector-chip {
    flex: 0 0 calc(50% - 0.25rem);
    text-align: center;
  }
}

/* --- CARDS & GRIDS --- */
.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 1024px) {
  .grid-4-col {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background-color: var(--color-card);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: var(--transition-smooth);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-color: var(--color-gold);
  background: linear-gradient(145deg, rgba(15,26,46,0.95), rgba(10,22,40,0.98));
}

.card .icon {
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

/* --- PREMIUM ARCHITECTURAL UI (Anastasiia Marchenko / ARUP / WSP Style) --- */

/* -"--"- Premium Stats / Why Choose Us -"--"- */
.premium-stats {
  background: linear-gradient(rgba(10,22,40,0.88), rgba(10,22,40,0.92)),
              url('../images/global/DJI_20240909084438_0057_D.JPG') center/cover fixed;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stats-section-header {
  padding: 5rem 0 3rem;
}

.stats-section-h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin: 0.5rem 0 0;
  letter-spacing: -0.5px;
}

.stats-section-h2 em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--color-gold);
}

/* 6-box grid */
.stats-grid-arch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.stat-arch {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 3rem 2.5rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: default;
}

.stat-arch:nth-child(3n)   { border-right: none; }
.stat-arch:nth-child(4),
.stat-arch:nth-child(5),
.stat-arch:nth-child(6)    { border-bottom: none; }

/* Front (default visible) */
.stat-arch-front {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.stat-arch:hover .stat-arch-front {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.text-stat {
  font-family: var(--font-heading);
  font-size: 4.5rem;
  color: var(--color-white);
  line-height: 1;
  font-weight: 300;
  margin-bottom: 0.9rem;
  letter-spacing: -2px;
}

.text-stat--sm { font-size: 3.2rem; letter-spacing: -1px; }

.stat-arch-desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  line-height: 1.65;
}

/* Gold left-sweep on hover */
.stat-arch::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 0;
  background: var(--color-gold);
  transition: height 0.4s ease;
  z-index: 5;
}
.stat-arch:hover::before { height: 100%; }

/* Hover card --" slides up */
.stat-arch-hover {
  position: absolute;
  inset: 0;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.55rem;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: linear-gradient(to top, rgba(10,22,40,0.99) 0%, rgba(15,26,46,0.97) 100%);
  border-top: 2px solid var(--color-gold);
}

.stat-arch:hover .stat-arch-hover {
  opacity: 1;
  transform: translateY(0);
}

.stat-hover-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  opacity: 0.6;
}

.stat-hover-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  margin: 0;
}

.stat-hover-body {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 1024px) {
  .stats-grid-arch { grid-template-columns: repeat(2, 1fr); }
  .stat-arch:nth-child(3n)  { border-right: 1px solid rgba(255,255,255,0.06); }
  .stat-arch:nth-child(2n)  { border-right: none; }
  .stat-arch:nth-child(5),
  .stat-arch:nth-child(6)   { border-bottom: none; }
  .stat-arch:nth-child(4)   { border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* Phase 10D round 3: stats-grid-arch was 2-col at 376-1024, but on
   tablet portrait + phone the long stat labels combined with hover
   overlay text were exceeding card height and bleeding past the
   overflow-hidden boundary. Collapse to 1-col on the full mobile
   range, tighten card sizing, and kill the hover-swap (a desktop
   interaction that sticks awkwardly on touch and causes the text
   overlap Sahir flagged). */
@media (max-width: 768px) {
  .stats-grid-arch { grid-template-columns: 1fr; }
  .stat-arch {
    border-right: none !important;
    min-height: auto;
    padding: 2rem 1.5rem;
    overflow: hidden;
  }
  .stat-arch:nth-child(n) { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .stat-arch:last-child { border-bottom: none; }
  .text-stat { font-size: 3.5rem; }
  .text-stat--sm { font-size: 2.6rem; }
  .stats-section-header { padding: 3.5rem 0 2rem; }
  /* No hover-swap on mobile. Front face stays put. */
  .stat-arch-hover { display: none !important; }
  .stat-arch:hover .stat-arch-front {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Premium Interactive List (Who We Serve) */
.premium-interactive-list { background: var(--color-background); }
.arch-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
  margin-bottom: 4rem; 
  border-bottom: 1px solid rgba(255,255,255,0.1); 
  padding-bottom: 2rem;
}
.massive-text { 
  font-family: var(--font-heading); 
  font-size: 3.5rem; 
  color: #fff; 
  line-height: 0.9; 
  margin: 0; 
  letter-spacing:-1px;
}
.arch-sub { 
  max-width: 400px; 
  color: var(--color-text); 
  font-size: 1.05rem; 
  line-height:1.6;
}

.arch-list-container { display: flex; flex-direction: column; }
.arch-list-item { 
  display: flex; 
  align-items: center; 
  padding: 1.5rem 1rem; 
  border-bottom: 1px solid rgba(255,255,255,0.1); 
  transition: all 0.5s ease; 
  cursor: pointer;
  position: relative; 
  overflow: hidden;
}
.arch-list-item::before {
  content: ""; 
  position: absolute; 
  top:0; left:0; width:100%; height:100%;
  background: var(--color-gold); 
  transform: scaleY(0); 
  transform-origin: bottom;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); 
  z-index: 0;
}
.arch-list-item:hover::before { 
  transform: scaleY(1); 
  transform-origin: top; 
}

.arch-list-num { font-family: var(--font-mono); font-size: 1rem; color: var(--color-gold); width: 10%; z-index: 1; transition: color 0.4s;}
.arch-list-title { font-family: var(--font-heading); font-size: 2.5rem; color: #fff; width: 40%; z-index: 1; transition: color 0.4s; letter-spacing:-1px;}
.arch-list-desc { font-family: var(--font-body); font-size: 0.95rem; color: var(--color-muted); width: 40%; padding-right: 2rem; z-index: 1; transition: color 0.4s; line-height: 1.6;}
.arch-list-arrow { font-size: 2rem; color: rgba(255,255,255,0.2); width: 10%; text-align: right; z-index: 1; transition: color 0.4s, transform 0.4s;}

/* --- EXTENSIVELY PREMIUM GLASSMORPHISM --- */
.svc-card, .audience-card {
  background: rgba(15, 26, 46, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 2.5rem 2rem;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.svc-card::before, .audience-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.svc-card:hover, .audience-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(201,168,76,0.3);
  background: rgba(15, 26, 46, 0.7);
}

.svc-card:hover::before, .audience-card:hover::before {
  opacity: 1;
}

/* Premium Apple-Style Learn More Link */
.audience-card-link {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
}

.audience-card-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width 0.3s ease;
}

.audience-card-link:hover {
  color: var(--color-white-pure);
  text-shadow: 0 0 12px rgba(255,255,255,0.4);
  letter-spacing: 0.12em;
}

.audience-card-link:hover::after {
  width: 100%;
  background-color: var(--color-white-pure);
}

.svc-card-icon svg, .audience-card-icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--color-gold);
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
}

.img-placeholder, .img-placeholder-lg {
  background: linear-gradient(135deg, rgba(8,16,30,0.9), rgba(15,26,46,0.7));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}

.img-placeholder::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(201,168,76,0.05), transparent 60%);
  pointer-events: none;
}

.img-placeholder svg {
  width: 48px !important;
  height: 48px !important;
  stroke: var(--color-gold) !important;
  opacity: 0.8;
  margin-bottom: 2rem;
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.2));
}

.img-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  text-transform: uppercase;
  z-index: 2;
  text-align: center;
  max-width: 80%;
}

.img-placeholder-lg {
  min-height: 400px;
}

/* --- PREMIUM INTERACTIVE UTILITIES --- */

/* 1. Mouse-Tracking Glow Background */
.premium-glow {
  position: relative;
}

.premium-glow::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), 
    rgba(201,168,76, 0.12),
    transparent 40%
  );
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.premium-glow:hover::after {
  opacity: 1;
}

/* 2. Mouse-Tracking Border Glow */
.premium-border-glow {
  position: relative;
}

.premium-border-glow::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    800px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), 
    rgba(201,168,76, 0.6),
    transparent 40%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 1;
}

.premium-border-glow:hover::before {
  opacity: 1;
}

/* 3. 3D Tilt Wrapper --" removed */

/* Ensure children stay above glow layers */
.premium-glow > *, .premium-border-glow > * {
  position: relative;
  z-index: 2;
}

/* 4. Cinematic Apple-Style Text Mask */
.apple-text-mask {
  background: linear-gradient(135deg, #ffffff 10%, var(--color-gold) 60%, #ffffff 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: apple-shine 6s linear infinite;
}
@keyframes apple-shine {
  to { background-position: 200% center; }
}

.arch-list-item:hover .arch-list-num,
.arch-list-item:hover .arch-list-title,
.arch-list-item:hover .arch-list-desc,
.arch-list-item:hover .arch-list-arrow { color: #0a1628; }
.arch-list-item:hover .arch-list-arrow { transform: translate(10px, -10px); }

/* ── SERVICES BENTO: HERO + 6 ── */
.services-bento-section { background: var(--color-secondary); }
.services-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.sb-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,76,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sb-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.55); }
.sb-hero {
  grid-column: 1 / -1;
  min-height: 400px;
}
.sb-sm { min-height: 240px; }
.sb-dark {
  background-color: rgba(255,255,255,0.04);
  background-image: none !important;
  justify-content: center;
  border: 1px solid rgba(201,168,76,0.18);
}
.sb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,14,28,0.93) 0%, rgba(5,14,28,0.45) 55%, rgba(5,14,28,0.1) 100%);
  transition: background 0.3s ease;
}
.sb-card:hover .sb-overlay {
  background: linear-gradient(to top, rgba(5,14,28,0.97) 0%, rgba(5,14,28,0.55) 60%, rgba(5,14,28,0.15) 100%);
}
.sb-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}
.sb-content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 2.5rem 2rem;
}
.sb-icon { margin-bottom: 1rem; }
.sb-eyebrow-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  border: 1px solid rgba(201,168,76,0.45);
  padding: 0.2rem 0.65rem;
  border-radius: 2px;
  margin-bottom: 0.85rem;
}
.sb-hero-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--color-white);
  margin: 0 0 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sb-hero-desc {
  font-size: 1rem;
  color: rgba(248,248,248,0.78);
  max-width: 560px;
  margin-bottom: 1.25rem;
  line-height: 1.65;
}
.sb-sm-title {
  font-size: 1.05rem;
  color: var(--color-white);
  margin: 0 0 0.45rem;
  font-weight: 600;
}
.sb-sm-desc {
  font-size: 0.85rem;
  color: rgba(248,248,248,0.68);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.sb-cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  text-transform: uppercase;
}
.sb-cta-sm {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .services-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-hero { min-height: 340px; }
}
@media (max-width: 768px) {
  .services-bento-grid { grid-template-columns: 1fr; }
  .sb-hero { min-height: 280px; }
  .sb-sm { min-height: 200px; }
}

/* --- CUSTOM SERVICE TILES (WITH PHOTOS & SVGS) --- */
.classic-services { background: var(--color-secondary); }
.custom-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}
.custom-service-grid.core-grid {
  grid-template-columns: repeat(4, 1fr);
}
.custom-service-card {
  background-color: #0A1426; /* Deep navy from screenshot */
  border: 1px solid rgba(201,168,76,0.3); /* Subtle gold border */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}
.card-image-wrap {
  position: relative;
  height: 220px;
}
.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-svg-icon {
  position: absolute;
  bottom: -25px;
  left: 20px;
  background-color: #0A1426;
  padding: 10px;
  border-radius: 8px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-svg-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-gold);
  stroke-width: 1.5;
  fill: none;
}
.card-content {
  padding: 40px 20px 20px 20px; 
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card-content h3, .card-content h4 {
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 15px;
  line-height: 1.3;
}
.card-content p {
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
  margin-bottom: 25px;
  line-height: 1.6;
  flex-grow: 1;
}
.card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px 20px;
}
.read-more-btn {
  background-color: #8c7335;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}
.read-more-btn:hover {
  background-color: var(--color-gold);
}

/* --- MOBILE RESPONSIVENESS (ULTRA PREMIUM ADJUSTMENTS) --- */
@media (max-width: 1024px) {
  .arch-header { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .arch-list-item { flex-wrap: wrap; padding: 2rem 1rem; }
  .arch-list-num { width: 100%; margin-bottom: 1rem; }
  .arch-list-title { width: 100%; font-size: 2.5rem; margin-bottom: 1rem; }
  .arch-list-desc { width: 80%; }
  .arch-list-arrow { width: 20%; }
  .stats-grid-arch { flex-direction: column; }
  .stat-arch { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 2rem 0; align-items: center; text-align: center;}
  .arch-service-grid { grid-template-columns: 1fr; background: transparent; gap: 0;}
  .arch-svc-card { padding: 3rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
}

/* --- MOBILE RESPONSIVENESS --- */

/* Always show gold on any interaction --" covers mouse, touch and keyboard */
.nav-links a:hover,
.nav-links a:focus,
.nav-links a:active { color: var(--color-gold); }

/* ≤1100px: two-row strip nav — logo + CTA on top row, scrollable links below */
@media (max-width: 1024px) {
  .navbar {
    padding: 0;
  }
  .nav-container {
    flex-wrap: wrap;
    row-gap: 0;
    padding: 0.6rem 1rem;
    align-items: center;
  }
  .nav-logo {
    order: 1;
    flex: 0 0 auto;
  }
  .nav-cta {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .nav-links {
    display: flex;
    flex: 0 0 100%;
    order: 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  .nav-links a {
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 0.3rem 0.9rem;
  }
  .nav-links > li:first-child > a {
    padding-left: 0;
  }
  .nav-links .dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    min-width: 0;
  }
  .hero-section {
    padding-top: 10rem;
  }
}

/* ≤768px: additional layout adjustments */
@media (max-width: 768px) {
  .grid-2x2 { grid-template-columns: 1fr; }
  .hero-video-wrapper { inset: 0; border-radius: 0; border: none; }
}

/* Touch devices: kill dropdown hover, enable JS-toggled .open class */
@media (hover: none) {
  .has-dropdown:hover .dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  .nav-links a:active { color: var(--color-gold) !important; }
  .has-dropdown.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* ≤1100px: premium full-width dropdown panel */
@media (max-width: 1024px) {
  .has-dropdown.open .dropdown-menu {
    display: block !important;
    position: fixed !important;
    top: var(--nav-dropdown-top, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 1001 !important;
    /* Premium panel treatment */
    background: rgba(6, 12, 24, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 2px solid var(--color-gold) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
    padding: 0.5rem 0 1rem !important;
  }

  /* Separator between items */
  .has-dropdown.open .dropdown-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  .has-dropdown.open .dropdown-menu li:last-child {
    border-bottom: none !important;
  }

  /* Link typography — engineering monospace, uppercase */
  .has-dropdown.open .dropdown-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 0.9rem !important;
    padding: 0.95rem 2rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(248,248,248,0.72) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.22s ease !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Gold left-border sweep */
  .has-dropdown.open .dropdown-menu li a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: var(--color-gold) !important;
    transform: scaleY(0) !important;
    transform-origin: bottom !important;
    transition: transform 0.22s cubic-bezier(0.19,1,0.22,1) !important;
  }

  /* Arrow indicator on right */
  .has-dropdown.open .dropdown-menu li a::after {
    content: '↗' !important;
    margin-left: auto !important;
    font-size: 0.65rem !important;
    opacity: 0 !important;
    color: var(--color-gold) !important;
    transition: opacity 0.2s ease !important;
    font-family: sans-serif !important;
    font-style: normal !important;
  }

  .has-dropdown.open .dropdown-menu li a:hover,
  .has-dropdown.open .dropdown-menu li a:active {
    color: rgba(248,248,248,1) !important;
    background: rgba(201,168,76,0.06) !important;
    padding-left: 2.6rem !important;
  }
  .has-dropdown.open .dropdown-menu li a:hover::before,
  .has-dropdown.open .dropdown-menu li a:active::before {
    transform: scaleY(1) !important;
  }
  .has-dropdown.open .dropdown-menu li a:hover::after,
  .has-dropdown.open .dropdown-menu li a:active::after {
    opacity: 0.65 !important;
  }
}

/* Phase 10B: hamburger drawer below tablet. Strip-nav collapses to a closed
   drawer toggled by the hamburger. Dropdowns stack inline within the drawer
   instead of pinning to navbar-bottom as a fixed panel. */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
    order: 3;
  }
  .nav-cta {
    order: 2;
    font-size: 0.72rem !important;
    padding: 0.4rem 0.75rem !important;
    margin-right: 0.5rem;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-primary);
  }
  .nav-links.nav-open {
    display: flex;
  }
  .nav-links > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .nav-links > li:last-child {
    border-bottom: none;
  }
  .nav-links > li > a {
    display: block;
    padding: 0.95rem 1.5rem;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    white-space: normal;
  }
  .nav-links > li:first-child > a {
    padding-left: 1.5rem;
  }
  .has-dropdown.open .dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    background: rgba(255,255,255,0.02) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
    box-shadow: none !important;
    padding: 0 0 0.5rem !important;
    z-index: 1 !important;
  }
  .has-dropdown.open .dropdown-menu li a {
    padding: 0.6rem 1.5rem 0.6rem 2.5rem !important;
    font-size: 0.7rem !important;
  }
}

/* Landscape mobile --" stat-arch hover content must fit smaller card height */
@media (max-width: 1024px) and (orientation: landscape) {
  .stat-arch { min-height: 180px; }
  .stat-arch-hover { padding: 1rem 1.5rem; overflow-y: auto; justify-content: flex-start; gap: 0.35rem; }
  .stat-hover-title { font-size: 0.88rem; }
  .stat-hover-body { font-size: 0.75rem; line-height: 1.55; }
}

/* --- CHANGE 1: PREMIUM CLIENT LOGO TEXT BADGES --- */
.client-logo-text {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(201,168,76,0.03);
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.client-logo-text:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* --- CHANGE 2A: HERO STATS BAR --- */
.hero-stats-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.03); /* apple glassmorphism */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
.hero-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  gap: 0.3rem;
}
.hero-stat-num {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--color-gold);
  line-height: 1;
}
.hero-stat-text {
  font-size: 2rem;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hero-stat-divider {
  width: 1px;
  background: rgba(255,255,255,0.08);
  margin: 1rem 0;
}

/* --- HERO CREDENTIAL GLASS STRIP --- */
.hero-credential-strip {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.85rem 0;
}
.hero-credential-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.hero-credential-pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  transition: color 0.2s;
}
.hero-credential-pill:hover { color: #e0bc70; }
.hero-credential-pill svg { opacity: 0.85; flex-shrink: 0; color: var(--color-gold); }
.hero-credential-pill:hover svg { opacity: 1; }
.hero-credential-pill--gold { color: var(--color-gold); }
.hero-credential-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .hero-credential-inner { gap: 0.25rem; }
  .hero-credential-pill { padding: 0.4rem 0.75rem; font-size: 0.62rem; }
  .hero-credential-divider { display: none; }
}

/* --- HERO LAYOUT FIX --- */
.hero-content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
}
.hero-body {
  max-width: 600px;
  margin: 0 auto 2rem auto;
  font-size: 1.15rem;
  color: rgba(248,248,248,0.85);
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}
h1 em {
  font-style: italic;
  color: var(--color-gold);
}

/* --- CHANGE 2B: SCROLL CUE --- */
.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.5rem;
  gap: 0.3rem;
  animation: scrollCuePulse 2s ease-in-out infinite;
  position: relative;
  z-index: 4;
}
.scroll-cue-line {
  width: 2px;
  height: 36px;
  background: var(--color-gold);
  border-radius: 2px;
}
.scroll-cue-icon {
  width: 22px;
  height: 22px;
  color: var(--color-gold);
  display: block;
}
@keyframes scrollCuePulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.35; transform: translateY(6px); }
}

/* --- CHANGE 3: BENTO GRID ENTERPRISE --- */
.bento-enterprise-section { background: var(--color-primary); }
.bento-section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.bento-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.bento-intro {
  color: var(--color-muted);
  max-width: 550px;
  margin: 0.75rem auto 0;
  font-size: 1.05rem;
}

/* 3-column grid: wide=2col, tall=1col/2row, small=1col/1row */
.bento-grid-enterprise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 320px 320px;
  gap: 1.5rem;
}
.bento-grid-enterprise.uniform-grid {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 480px;
}
.bento-card-ent {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-navy);
  will-change: transform;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.bento-ent-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Per-card brightness normalisation for Who We Serve bento — */
/* equalises the visual brightness of source images shot at different times of day. */
.bento-card-ent[href*="for-ppa-providers"] .bento-ent-img { filter: brightness(1.45) contrast(0.95) saturate(1.05); }
.bento-card-ent[href*="for-epcs"] .bento-ent-img { filter: brightness(1.30) contrast(0.95); }
.bento-card-ent[href*="for-solar-installers"] .bento-ent-img { filter: brightness(1.45) contrast(0.95) saturate(1.05); }

.bento-card-ent:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.bento-ent-wide { grid-column: span 2; grid-row: span 1; }
.bento-ent-tall { grid-column: span 1; grid-row: span 2; }
.bento-ent-small { grid-column: span 1; grid-row: span 1; }

.bento-ent-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,16,32,0.92) 0%, rgba(8,16,32,0.45) 55%, rgba(8,16,32,0.15) 100%);
  transition: background 0.4s ease;
}
.bento-card-ent:hover .bento-ent-overlay {
  background: linear-gradient(to top, rgba(8,16,32,0.97) 0%, rgba(8,16,32,0.65) 60%, rgba(8,16,32,0.25) 100%);
}

/* Animated gold left-border sweep on hover */
.bento-card-ent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 0;
  background: var(--color-gold);
  transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 3;
}
.bento-card-ent:hover::after { height: 100%; }

.bento-ent-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.75rem;
  z-index: 2;
}
.bento-ent-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-gold);
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}
.bento-ent-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 0.4rem;
  font-weight: 700;
}
.bento-ent-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.5;
}

/* --- CHANGE 4: HOW IT WORKS --- */
.how-it-works-section {
  background: var(--color-secondary);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hiw-header {
  text-align: center;
  margin-bottom: 4rem;
}
.hiw-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.hiw-step {
  flex: 1;
  text-align: center;
  padding: 0 2rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease var(--delay, 0s), transform 0.6s ease var(--delay, 0s);
}
.hiw-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hiw-num {
  font-family: var(--font-mono);
  font-size: 8rem;
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}
.hiw-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.hiw-desc {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}
.hiw-connector {
  flex: 0 0 80px;
  height: 2px;
  background: linear-gradient(to right, rgba(201,168,76,0), var(--color-gold), rgba(201,168,76,0));
  margin-top: 4.5rem; /* align with middle of the large numeral */
  align-self: flex-start;
}

/* --- MOBILE: Bento + Steps --- */
@media (max-width: 1024px) {
  .bento-ent-wide, .bento-ent-tall, .bento-ent-small {
    grid-column: span 1;
    grid-row: span 1;
  }
}
@media (max-width: 768px) {
  .grid-2x2 { grid-template-columns: 1fr; }
  .hero-video-wrapper { inset: 0; border-radius: 0; border: none; }
  .hero-stats-bar {
    flex-wrap: wrap;
    background: rgba(10, 22, 40, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .hero-stat-item { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .hero-stat-divider { display: none; }
  .hiw-steps { flex-direction: column; align-items: center; gap: 2rem; }
  .hiw-connector { display: none; }
  .hiw-num { font-size: 5rem; }
  .custom-service-grid { grid-template-columns: 1fr; }
  .custom-service-grid.core-grid { grid-template-columns: repeat(2, 1fr); }
  .arch-header { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .arch-list-item { flex-wrap: wrap; padding: 2rem 1rem; }
  .arch-list-num { width: 100%; margin-bottom: 1rem; }
  .arch-list-title { width: 100%; font-size: 2rem; margin-bottom: 1rem; }
  .arch-list-desc { width: 80%; }
  .arch-list-arrow { width: 20%; }
  /* stats-grid-arch responsive handled in its own block */
}

/* --------------------------------------------------------------------------------------------------------------------- WHY CHOOSE US ------------------------ */

.wcu-section {
  background: var(--color-secondary);
  padding: var(--spacing-section) 0;
  position: relative;
  overflow: hidden;
}

.wcu-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 25% 50%, rgba(201,168,76,0.04) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 85% 80%, rgba(74,144,217,0.03) 0%, transparent 65%);
  pointer-events: none;
}

/* -"--"- Orbital layout -"--"- */
.wcu-orb-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 4.5rem;
  align-items: center;
}

/* -"--"- Left: orbital stage -"--"- */
.wcu-orb-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wcu-orb-stage {
  position: relative;
  width: 420px;
  height: 420px;
  flex-shrink: 0;
}

/* Ambient glows */
.wcu-ambient {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.wcu-ambient--a {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(201,168,76,0.09) 0%, transparent 70%);
  animation: wcuPulse 3s ease-in-out infinite;
}

.wcu-ambient--b {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(74,144,217,0.05) 0%, transparent 65%);
  animation: wcuPulse 4.5s ease-in-out infinite 1.5s;
}

@keyframes wcuPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
}

/* Orbit ring */
.wcu-orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px; height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.18);
}

/* Central hub */
.wcu-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}

.wcu-hub-ping {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.28);
  transform: translate(-50%, -50%) scale(0.85);
  animation: wcuPing 2.8s ease-out infinite;
  pointer-events: none;
}

.wcu-hub-ping--1 { width: 82px;  height: 82px;  }
.wcu-hub-ping--2 { width: 112px; height: 112px; animation-delay: 1.4s; }

@keyframes wcuPing {
  0%   { transform: translate(-50%,-50%) scale(0.85); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(1.45); opacity: 0; }
}

.wcu-hub-core {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(201,168,76,0.18) 0%, rgba(10,22,40,0.9) 100%);
  border: 1.5px solid rgba(201,168,76,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(201,168,76,0.22), inset 0 0 12px rgba(201,168,76,0.06);
}

.wcu-hub-core svg { width: 38px; height: 38px; }

/* Orbital nodes (injected by JS) */
.wcu-node {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: opacity 0.35s ease;
  width: 48px;
}

.wcu-node-disc {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 1.5px solid rgba(201,168,76,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s,
              background 0.3s,
              box-shadow 0.3s;
}

.wcu-node-disc svg { width: 20px; height: 20px; }

.wcu-node:hover .wcu-node-disc {
  border-color: var(--color-gold);
  background: rgba(201,168,76,0.1);
  box-shadow: 0 0 16px rgba(201,168,76,0.28);
}

.wcu-node--active .wcu-node-disc {
  border-color: var(--color-gold);
  background: rgba(201,168,76,0.14);
  box-shadow: 0 0 28px rgba(201,168,76,0.5), 0 0 8px rgba(201,168,76,0.3);
  transform: scale(1.35);
}

.wcu-node-lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  white-space: nowrap;
  text-align: center;
  transition: color 0.3s;
}

.wcu-node--active .wcu-node-lbl { color: var(--color-gold); }

/* -"--"- Right: heading + card -"--"- */
.wcu-orb-right h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin: 0.65rem 0 2rem;
}

.wcu-orb-right h2 em {
  font-style: italic;
  color: var(--color-gold);
}

.wcu-orb-card {
  background: var(--color-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 2.2rem 2.4rem;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Gold corner shimmer */
.wcu-orb-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle at top right, rgba(201,168,76,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Idle state */
.wcu-card-idle p {
  font-size: 0.93rem;
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.wcu-dots {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.wcu-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
  padding: 0;
}

.wcu-dot:hover { background: rgba(201,168,76,0.4); transform: scale(1.2); }
.wcu-dot--active { background: var(--color-gold); transform: scale(1.3); }

/* Active content */
.wcu-card-content {
  animation: wcuSlideIn 0.4s ease;
}

@keyframes wcuSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wcu-card-content.wcu-cc--anim { animation: wcuSlideIn 0.4s ease; }

.wcu-cc-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--color-gold);
  opacity: 0.55;
  margin-bottom: 0.4rem;
}

.wcu-cc-num span { opacity: 0.6; }

.wcu-cc-title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
  margin: 0 0 0.7rem;
}

.wcu-cc-body {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.82;
  margin: 0 0 1.2rem;
}

.wcu-cc-stat {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.wcu-cc-val {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}

.wcu-cc-val em {
  font-style: normal;
  font-size: 1.4rem;
  opacity: 0.7;
}

.wcu-cc-lbl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.65;
}

/* -"--"- Responsive -"--"- */
@media (max-width: 1024px) {
  .wcu-orb-layout { grid-template-columns: 380px 1fr; gap: 3rem; }
  .wcu-orb-stage  { width: 360px; height: 360px; }
  .wcu-orbit-ring { width: 256px; height: 256px; margin: -128px 0 0 -128px; }
}

@media (max-width: 768px) {
  .wcu-orb-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .wcu-orb-stage  { width: 340px; height: 340px; }
  .wcu-orbit-ring { width: 242px; height: 242px; margin: -121px 0 0 -121px; }
}

@media (max-width: 375px) {
  .wcu-orb-stage  { width: 290px; height: 290px; }
  .wcu-orbit-ring { width: 206px; height: 206px; margin: -103px 0 0 -103px; }
  .wcu-orb-card   { padding: 1.6rem 1.5rem; }
  .wcu-cc-val     { font-size: 2.4rem; }
}

/* --------------------------------------------------------------------------------------------------------------------- /WHY CHOOSE US ------------------------ */

/* --- SUBTITLE COLOR (TASK 5) --- */
.subtitle {
  color: var(--color-gold) !important;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* --- FLOATING JUMPER MENU (TASK 6) --- */
.jumper-menu {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.jumper-menu.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
}

.jumper-link {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.jumper-link:hover {
  color: var(--color-white-pure);
  background: rgba(255,255,255,0.05);
}

.jumper-link.active {
  color: var(--color-primary);
  background: var(--color-gold);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(201, 168, 76, 0.35);
}

@media (max-width: 768px) {
  .jumper-menu {
    width: calc(100% - 1.5rem);
    max-width: 480px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    /* Horizontal scroll affordance: gradient fade at left and right edges
       hints that the bar is scrollable when content overflows. */
    -webkit-mask-image: linear-gradient(to right, transparent, black 0.75rem, black calc(100% - 0.75rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 0.75rem, black calc(100% - 0.75rem), transparent);
  }
  .jumper-menu::-webkit-scrollbar {
    display: none;
  }
  .jumper-link {
    padding: 0.5rem 1rem;
    flex-shrink: 0;
  }
  /* Cookie consent banner occupies the bottom strip on mobile until
     dismissed. Lift the jumper above it so it isn't hidden behind. */
  body:has(.ss-cookie-banner.is-visible) .jumper-menu {
    bottom: 11rem;
  }
}

/* --- TESTIMONIALS (TASK 7) --- */
.testimonials-section {
  background: var(--color-primary);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.05);
}

.testimonial-quote {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-white);
  line-height: 1.6;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.testimonial-quote::before {
  content: '"';
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-size: 4rem;
  color: var(--color-gold);
  opacity: 0.15;
  font-family: var(--font-display);
}

.testimonial-author {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
}

.author-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
}

.author-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

/* --- CASE STUDIES (TASK 8) --- */
.case-studies-section {
  background: var(--color-secondary);
}

.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.case-study-card {
  background: var(--color-card);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  transition: var(--transition-smooth);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
}

.case-study-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-gold);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.cs-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.cs-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.case-study-card:hover .cs-image img {
  transform: scale(1.1);
}

.cs-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cs-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  display: block;
}

.cs-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.cs-stat-box {
  background: rgba(201,168,76,0.1);
  padding: 1rem;
  border-radius: 4px;
  border-left: 3px solid var(--color-gold);
  margin-top: auto;
}

.cs-stat-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gold);
}

.cs-stat-lbl {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 1024px) {
  .case-studies-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .case-studies-grid { grid-template-columns: 1fr; }
}

/* --- CTA BAND (TASK 9) --- */
.cta-band {
  background: linear-gradient(135deg, #0A1426 0%, #111e36 100%);
  padding: 8rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
}

.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.05), transparent 70%);
  pointer-events: none;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.cta-band p {
  font-size: 1.25rem;
  color: var(--color-muted);
  max-width: 700px;
  margin: 0 auto 2.5rem auto;
}

/* --- PREMIER FOOTER (TASK 10) --- */
.modern-footer {
  background: #050b14;
  padding: 8rem 0 3rem 0;
  border-top: 1px solid rgba(251, 233, 179, 0.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 4rem;
  margin-bottom: 5rem;
}

.footer-col h3, .footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 2rem;
}

.footer-logo img {
  height: 45px;
  width: auto;
  max-width: 180px;
  display: block;
  margin-bottom: 1.5rem;
}

.footer-bio {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 1rem;
}

.footer-links a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.footer-links a:hover {
  color: var(--color-gold);
  opacity: 1;
  padding-left: 8px;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-gold);
  fill: none;
  margin-top: 5px;
}

.contact-text {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.contact-text b {
  display: block;
  color: var(--color-white-pure);
  margin-bottom: 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.footer-bottom {
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-copyright {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.footer-legal-links {
  display: flex;
  gap: 2.5rem;
}

.footer-legal-links a {
  font-size: 0.85rem;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: var(--color-gold);
}

/* -"--"- Footer Social -"--"- */
.footer-social {
  margin-top: 1.5rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-social-link:hover {
  color: var(--color-gold);
}

/* ------------------------------------------------------------------------------------------------------------------
   TESTIMONIALS REDESIGN
------------------------------------------------------------------------------------------------------------------ */

.testimonials-section {
  background: var(--color-primary);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--color-card);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: 3px solid var(--color-gold);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

.testimonial-quote {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(248,248,248,0.85);
  line-height: 1.75;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.testimonial-author {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.25rem;
}

.author-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-gold);
  margin-bottom: 0.3rem;
}

.author-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

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

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

/* ------------------------------------------------------------------------------------------------------------------
   CASE STUDIES REDESIGN
------------------------------------------------------------------------------------------------------------------ */

.case-studies-section {
  background: var(--color-secondary);
}

/* Featured case study card */
.cs-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-card);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 2rem;
  transition: var(--transition-smooth);
  position: relative;
}

.cs-featured:hover {
  border-color: var(--color-gold);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transform: translateY(-4px);
}

.cs-featured-image {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.cs-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cs-featured:hover .cs-featured-image img {
  transform: scale(1.05);
}

.cs-featured-content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.cs-featured-content::before {
  content: 'FEATURED';
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  color: var(--color-gold);
  opacity: 0.5;
}

.cs-featured-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-white-pure);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.cs-featured-body {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.cs-featured-stats {
  display: flex;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.cs-feat-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cs-feat-val {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-gold);
  line-height: 1;
}

.cs-feat-lbl {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Regular case study grid */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.case-study-card {
  background: var(--color-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  transition: var(--transition-smooth);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.case-study-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.cs-image {
  height: 190px;
  overflow: hidden;
  position: relative;
}

.cs-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.case-study-card:hover .cs-image img {
  transform: scale(1.08);
}

.cs-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cs-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
  display: block;
}

.cs-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-white-pure);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.cs-summary {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.cs-stat-box {
  background: rgba(201,168,76,0.07);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border-left: 2px solid var(--color-gold);
  margin-top: auto;
}

.cs-stat-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-gold);
  margin-bottom: 0.2rem;
}

.cs-stat-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Classified card (no image, project 7) */
.cs-classified {
  background: #050b14;
  border-color: rgba(201,168,76,0.15);
}

.cs-classified-header {
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(201,168,76,0.03) 0px,
    rgba(201,168,76,0.03) 1px,
    transparent 1px,
    transparent 20px
  );
  border-bottom: 1px solid rgba(201,168,76,0.1);
}

.cs-classified-header svg {
  width: 32px;
  height: 32px;
  color: rgba(201,168,76,0.3);
}

.cs-classified-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 4px;
  color: rgba(201,168,76,0.3);
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .cs-featured { grid-template-columns: 1fr; }
  .cs-featured-image { min-height: 240px; }
  .case-studies-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .case-studies-grid { grid-template-columns: 1fr; }
  .cs-featured-stats { gap: 1.25rem; }
}

/* ------------------------------------------------------------------------------------------------------------------
   FAQ SECTION
------------------------------------------------------------------------------------------------------------------ */

.faq-section {
  background: var(--color-primary);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

details.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

details.faq-item:first-child {
  border-top: 1px solid rgba(255,255,255,0.07);
}

summary.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white-pure);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.3s ease;
  gap: 1rem;
}

summary.faq-question::-webkit-details-marker { display: none; }

summary.faq-question::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--color-gold);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

details.faq-item[open] summary.faq-question::after {
  transform: rotate(45deg);
}

details.faq-item[open] summary.faq-question {
  color: var(--color-gold);
}

.faq-answer {
  padding: 0 0 1.5rem 0;
}

.faq-answer p {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.8;
  margin: 0;
}

/* -"--"- CTA band em italic gold -"--"- */
.cta-band h2 em {
  font-style: italic;
  color: var(--color-gold);
}

/* -"--"- section-headers mb helper -"--"- */
.mb-4 { margin-bottom: 2rem; }


.footer-legal-links a:hover {
  color: var(--color-gold);
}

@media (max-width: 1440px) {
  .footer-grid {
    gap: 2rem;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .footer-legal-links {
    justify-content: center;
    gap: 1.5rem;
  }
}

/* =========================================================================
   SHARED SERVICE PAGE COMPONENTS
   ========================================================================= */

/* --- Scroll Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }
.reveal-d6 { transition-delay: 0.6s; }

/* --- Image Placeholder --- */
.img-placeholder {
  background: var(--color-secondary);
  border: 2px dashed rgba(201,168,76,0.35);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
  min-height: 280px;
}
.img-placeholder svg { width: 36px; height: 36px; color: var(--color-gold); opacity: 0.5; }
.img-placeholder span { color: var(--color-gold); opacity: 0.7; }
.img-placeholder-sm { min-height: 180px; }
.img-placeholder-lg { min-height: 420px; }

/* --- Service Page Hero --- */
.svc-hero {
  padding: 10rem 0 6rem;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 65% 50%, rgba(201,168,76,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.svc-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.svc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  color: var(--color-white-pure);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}
.svc-hero h1 em { font-style: italic; color: var(--color-gold); }
.svc-hero-body {
  font-size: 1.1rem;
  color: rgba(248,248,248,0.8);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}
.svc-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- Stats Strip --- */
/* svc-stats-grid is an alias for stats-row used on some pages */
.svc-stats-strip .svc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.svc-stats-strip {
  background: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: 2.5rem 0;
}
.svc-stats-strip .stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.svc-stat {
  text-align: center;
  padding: 1rem 2rem;
  border-right: 1px solid var(--color-border);
}
.svc-stat:last-child { border-right: none; }
.svc-stat-val {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--color-gold);
  letter-spacing: -1px;
  line-height: 1;
  display: block;
}
.svc-stat-lbl {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 0.4rem;
  display: block;
}

/* --- Section with two columns --- */
.svc-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.svc-2col-center { align-items: center; }
.svc-body-text {
  font-size: 1rem;
  color: rgba(248,248,248,0.8);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

/* --- Feature Cards (bordered, gold accent) --- */
.svc-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  padding: 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.svc-card:hover {
  border-color: rgba(201,168,76,0.6);
  transform: translateY(-2px);
}
.svc-card h3, .svc-card h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-white-pure);
  margin-bottom: 0.5rem;
}
.svc-card p {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}
.svc-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

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

/* --- Process Timeline --- */
.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process-track::before {
  content: '';
  position: absolute;
  top: 2.2rem;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(to right, var(--color-gold), rgba(201,168,76,0.2));
  z-index: 0;
}
.process-step {
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
.process-step-num {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  transition: background 0.3s ease;
}
.process-step:hover .process-step-num { background: var(--color-gold); color: var(--color-primary); }
.process-step h3, .process-step h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-white-pure);
  margin-bottom: 0.6rem;
}
.process-step p {
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
}

/* --- Checklist --- */
.svc-checklist { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.svc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.9rem;
  color: rgba(248,248,248,0.8);
  line-height: 1.6;
}
.svc-checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--color-gold);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l4 4 6-6' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* --- Tech Callout (dark featured block) --- */
.tech-callout {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  padding: 3rem;
}
.tech-callout-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.tech-callout-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.tech-callout h2,
.tech-callout h3 {
  font-family: var(--font-heading);
  color: var(--color-white-pure);
  margin-bottom: 1rem;
}
.tech-callout h3 { font-size: 1.5rem; }

/* --- Testimonial Pull Quote --- */
.svc-testimonial {
  background: var(--color-secondary);
  border-left: 4px solid var(--color-gold);
  padding: 2.5rem 3rem;
  position: relative;
}
.svc-testimonial::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--color-gold);
  opacity: 0.15;
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  line-height: 1;
}
.svc-testimonial blockquote {
  font-size: 1.1rem;
  color: rgba(248,248,248,0.85);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 1.25rem;
}
.svc-testimonial cite {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* --- Three-col audience cards --- */
.audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.audience-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  padding: 2.25rem;
  transition: border-color 0.3s ease;
}
.audience-card:hover { border-color: rgba(201,168,76,0.5); }
.audience-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}
.audience-card h3, .audience-card h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-white-pure);
  margin-bottom: 0.6rem;
}
.audience-card p { font-size: 0.875rem; color: var(--color-muted); line-height: 1.7; margin: 0; }

/* --- Tool / Software badge grid --- */
.tool-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2.5rem; }
.tool-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-border);
  padding: 0.5rem 1.1rem;
  background: rgba(201,168,76,0.04);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.tool-badge:hover { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.5); }

/* Global: shimmer only on outer card border — never on nested icon containers */
.svc-card-icon::after,
.audience-card-icon::after,
.tech-callout-header::after,
.tool-badge::after { display: none !important; }

/* ── ICON CONTAINER SVG STROKE — always gold, no currentColor bleed ── */
.svc-card-icon svg,
.audience-card-icon svg { stroke: var(--color-gold); }

/* ── FAST REPORT CARD ── */
.fast-report-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  background: var(--color-card);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 16px;
  padding: 3.5rem;
  position: relative;
}
.frc-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-content: center;
}
.frc-metric {
  background: var(--color-secondary);
  border: 1px solid rgba(201,168,76,0.12);
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.frc-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  line-height: 1;
}
.frc-lbl {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(248,248,248,0.6);
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .fast-report-card { grid-template-columns: 1fr; gap: 2.5rem; padding: 2rem; }
}

/* --- Service Page Responsive --- */
@media (max-width: 1024px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .svc-2col { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-track { grid-template-columns: repeat(2,1fr); gap: 2.5rem; }
  .process-track::before { display: none; }
  .audience-grid { grid-template-columns: repeat(2,1fr); }
  .svc-stats-strip .stats-row { grid-template-columns: repeat(2,1fr); }
  .svc-stat { border-right: none; border-bottom: 1px solid var(--color-border); padding: 1.25rem; }
  .svc-stat:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
  .process-track { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .svc-testimonial { padding: 2rem 1.5rem; }
  .tech-callout { padding: 2rem 1.5rem; }
  .svc-stats-strip .stats-row { grid-template-columns: repeat(2,1fr); }
}
/* --- ULTRA PREMIUM MATERIAL SYSTEM --- */

/* Sapphire Glass Texture */
/* Sapphire Glass Material Surface */
.premium-glow, .audience-card, .svc-card {
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: var(--color-card);
}

.premium-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: url(#sapphire-grain);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* Internal 3D Depth --" removed */

/* Liquid Refracted Shimmer */
.premium-shimmer-border::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255, 0.05) 30%,
    rgba(201,168,76, 0.7) 45%,
    rgba(255,255,255, 0.1) 50%,
    transparent 60%
  );
  background-size: 300% 100%;
  animation: borderShimmer 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: 0.9;
}

@keyframes borderShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Enhanced Magnetic Transition */
.btn-magnetic {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* === ANSWER BLOCK PREMIUM CARD === */
.answer-block-premium {
  max-width: 860px;
  margin: 0 auto;
  background: var(--color-card);
  border: 1px solid rgba(201,168,76,0.25);
  border-top: 3px solid var(--color-gold);
  border-radius: 16px;
  padding: 3.5rem 4rem;
  position: relative;
}
.answer-block-divider {
  width: 40px;
  height: 2px;
  background: var(--color-gold);
  margin-bottom: 1.5rem;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .answer-block-premium {
    padding: 2.5rem 1.75rem;
  }
}


/* ===== BLUEPRINT ENGINEERING GRID ===== */
.blueprint-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blueprint-grid {
  position: absolute;
  top: calc(-50% + var(--grid-y, 0px));
  left: -50%;
  right: -50%;
  bottom: -50%;
  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;
  will-change: transform;
}

.blueprint-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 30px 30px;
}

/* ===== SPLIT TEXT REVEAL ===== */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.split-word span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-text.reveal-active .split-word span {
  transform: translateY(0);
}

.apple-text-mask .split-word span {
  background: linear-gradient(135deg, #ffffff 10%, var(--color-gold) 60%, #ffffff 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: apple-shine 6s linear infinite;
}

.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.15s; }
.delay-3 { transition-delay: 0.25s; }
.delay-4 { transition-delay: 0.35s; }
.delay-5 { transition-delay: 0.45s; }

/* Process step premium enhancement */
.process-step.premium-glow {
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

/* -"--"- Regional Hubs & Global Deployment -"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"--"- */
/* All animations use only transform/opacity --" GPU composited, no paint   */
.hubs-section {
  padding: 8rem 0;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(201,168,76,0.15);
}
.hubs-section::before {
  content: '';
  position: absolute;
  top: -20%; left: -8%;
  width: 60%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hubs-section::after {
  content: '';
  position: absolute;
  bottom: -20%; right: -5%;
  width: 40%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.04) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Map frame --" static box-shadow, only background-position animates */
.hubs-map-frame {
  position: relative;
  width: 100%;
  max-width: 500px;
  border-radius: 6px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(201,168,76,0.9) 0%,
    rgba(201,168,76,0.15) 20%,
    rgba(248,248,248,0.05) 40%,
    rgba(201,168,76,0.8) 55%,
    rgba(248,248,248,0.05) 70%,
    rgba(201,168,76,0.15) 85%,
    rgba(201,168,76,0.9) 100%
  );
  background-size: 400% 400%;
  animation: hubs-frame-shimmer 5s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(201,168,76,0.1), 0 0 40px rgba(201,168,76,0.15), 0 24px 64px rgba(0,0,0,0.5);
  will-change: background-position;
}
/* Only animates background-position --" no layout, no paint */
@keyframes hubs-frame-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.hubs-map-inner {
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-secondary);
  position: relative;
}

/* Corner brackets */
.hubs-map-frame .corner { position: absolute; width: 20px; height: 20px; z-index: 3; }
.hubs-map-frame .corner-tl { top: 6px; left: 6px; border-top: 1.5px solid var(--color-gold); border-left: 1.5px solid var(--color-gold); }
.hubs-map-frame .corner-tr { top: 6px; right: 6px; border-top: 1.5px solid var(--color-gold); border-right: 1.5px solid var(--color-gold); }
.hubs-map-frame .corner-bl { bottom: 6px; left: 6px; border-bottom: 1.5px solid var(--color-gold); border-left: 1.5px solid var(--color-gold); }
.hubs-map-frame .corner-br { bottom: 6px; right: 6px; border-bottom: 1.5px solid var(--color-gold); border-right: 1.5px solid var(--color-gold); }

/* Stats strip */
.hubs-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.25rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.hubs-stat-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 40%, #f5e09a 70%, #c9a84c 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: stat-shimmer 4s linear infinite;
  display: block;
  line-height: 1;
  will-change: background-position;
}
@keyframes stat-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
.hubs-stat-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: rgba(248,248,248,0.38);
  display: block;
  margin-top: 0.4rem;
}
.hubs-stat-divider { width: 1px; background: rgba(201,168,76,0.15); align-self: stretch; }

/* Hub rows */
.hub-rows { display: flex; flex-direction: column; }
.hub-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 1rem;
  margin: 0 -1rem;
  border-radius: 6px;
  position: relative;
  cursor: default;
  transition: background 0.35s ease;
  border-bottom: 1px solid rgba(201,168,76,0.08);
}
.hub-row:last-child { border-bottom: none; }
/* Left accent bar --" transform animation (GPU) */
.hub-row::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  width: 2px; height: 65%;
  background: linear-gradient(to bottom, transparent, var(--color-gold), transparent);
  border-radius: 2px;
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
  will-change: transform, opacity;
}
.hub-row:hover { background: rgba(201,168,76,0.04); }
.hub-row:hover::before { transform: translateY(-50%) scaleY(1); opacity: 1; }
/* Shimmer sweep on hover --" opacity only */
.hub-row::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(100deg, transparent 0%, rgba(201,168,76,0.06) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: opacity;
}
.hub-row:hover::after { opacity: 1; }

.hub-region {
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 148px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

/* Pulse dot --" opacity + scale (GPU composited, no paint) */
.hub-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  animation: hub-pulse 2.8s ease-in-out infinite;
  will-change: opacity, transform;
}
.hub-row:nth-child(1) .hub-dot { animation-delay: 0s; }
.hub-row:nth-child(2) .hub-dot { animation-delay: 0.56s; }
.hub-row:nth-child(3) .hub-dot { animation-delay: 1.12s; }
.hub-row:nth-child(4) .hub-dot { animation-delay: 1.68s; }
.hub-row:nth-child(5) .hub-dot { animation-delay: 2.24s; }
@keyframes hub-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.6); }
}

.hub-cities {
  color: rgba(248,248,248,0.6);
  font-size: 0.86rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* Phase 10C: hide the D3 deployment map below tablet. The right cell
   (copy + 5/48h/UK+EU stats + hub rows) carries the same coverage
   message, and the footer UK Coverage strip provides geo discovery on
   small screens. Hiding the LEFT wrapper removes the cell entirely so
   the stacked layout has no phantom gap. */
/* D3 deployment map: renders on both desktop and mobile. Mobile branch
   in the IIFE (see scripts/fix_all_maps.py setup() v2) uses tighter
   padL/padR floors so the projection has room without over-zoom. CSS
   below stacks the 2-col into single column at <=768 so map sits above
   copy, and constrains the map frame to keep aspect ratio sensible. */
@media (max-width: 768px) {
  .hubs-section {
    padding: 5rem 0;
  }
  .hubs-section .svc-2col {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
  }
  /* Map frame breathes its full mobile width but caps so the projection
     never has to render wider than the canvas can carry text labels. */
  .hubs-section .hubs-map-frame {
    max-width: 100%;
    margin: 0 auto;
  }
  /* Phase 10D: 5/48h/UK+EU flex row was overflowing on 375. Wrap and
     drop the vertical dividers so the stats reflow as a 3-up wrap. */
  .hubs-section .hubs-stats {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .hubs-section .hubs-stat-divider {
    display: none;
  }
}

/* Phase 10D: structural mobile fixes from QA pass.
   - .audience-tab-wrap inline rule on 9 service pages has fixed
     220px left column; collapse to one column below laptop so the
     panel content has room.
   - .svc-stats-grid is an alias for .stats-row but was missing from
     the responsive blocks; add it.
   - .btn / .btn-magnetic with long anchor text (e.g. "Desktop
     Structural Roof Loading Reports >") overflows narrow viewports;
     allow wrapping at mobile.
   - .float-stack (fixed Glossary / Locations side tabs) overlaps
     hero h1 right edge on phones; hide below tablet where the
     drawer + footer carry discovery instead.
   - .nav-cta tap target was ~38px high at mobile; bump padding to
     clear the 44px minimum. */
@media (max-width: 1024px) {
  .audience-tab-wrap {
    grid-template-columns: 1fr !important;
  }
  .audience-tab-panels {
    padding: 2rem 1.5rem !important;
  }
}
@media (max-width: 768px) {
  .svc-stats-strip .svc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Phase 10D round 2: !important needed because initUltraPremiumEngine
     sets inline white-space: nowrap on every .btn-magnetic, which beat
     our CSS-only fix. */
  .btn,
  .btn-magnetic {
    max-width: 100%;
    white-space: normal !important;
    word-wrap: break-word;
  }
  .float-stack {
    display: none !important;
  }
  /* Tap target: 0.825rem padding + 0.85rem line height clears 44px. */
  .nav-cta {
    padding: 0.825rem 0.9rem !important;
  }
  /* Phase 10D round 2: .svc-2col had no mobile collapse rule (only the
     .hubs-section override). Causes column-min-content blowout on many
     pages. Collapse universally on mobile. */
  .svc-2col {
    grid-template-columns: 1fr !important;
  }
  /* Phase 10D round 2: inline 1fr 1fr / repeat(2-3, 1fr) grids on 10
     pages overflow at 375 because large gaps + min-content widths
     exceed their 1fr allocation. Force them to single column on
     mobile via attribute selector. Excludes auto-fit minmax patterns
     (those are already responsive). */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 375px) {
  .svc-stats-strip .svc-stats-grid {
    grid-template-columns: 1fr;
  }
}


/* Bento grid + svc-2col + core-grid collapse below laptop breakpoint. */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
  }
  .bento-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: 250px !important;
  }
  .svc-2col {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .custom-service-grid.core-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- WHO WE SERVE BENTO — PROGRESSIVE BREAKPOINTS --- */
/* ≤1100px: 3-column grid, shorter cards */
@media (max-width: 1024px) {
  .bento-grid-enterprise.uniform-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 300px !important;
  }
  .bento-card-ent {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: 300px;
  }
}

/* Phase 10E: was 2-col at 768 (260px rows), but text inside cards
   overflowed at narrow phone widths. Collapse to 1-col so cards become
   full-width and grow to fit their copy. */
@media (max-width: 768px) {
  .bento-grid-enterprise.uniform-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .bento-card-ent {
    min-height: 220px;
  }
  .bento-ent-title,
  .bento-ent-desc {
    overflow-wrap: break-word;
  }
}

/* ≤480px: single column */
@media (max-width: 375px) {
  .bento-grid-enterprise.uniform-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 240px !important;
  }
  .bento-card-ent {
    min-height: 240px;
  }
}

/* --- NDA DISCLOSURE --- */
.nda-disclosure {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 3px;
  padding: 0.9rem 1.5rem;
  margin-bottom: 2.5rem;
}
.nda-disclosure-text {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(248,248,248,0.55);
  font-style: italic;
  margin: 0;
  line-height: 1.65;
}

/* ---- FAQ ACCORDION (service pages) ---- */
.faq-accordion {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card);
  transition: border-color 0.25s;
}
.faq-accordion + .faq-accordion { margin-top: 0.6rem; }
.faq-accordion:hover { border-color: rgba(201,168,76,0.4); }
.faq-accordion[open] {
  border-color: rgba(201,168,76,0.5);
  border-left: 2px solid var(--color-gold);
}
.faq-accordion summary {
  padding: 1.25rem 1.6rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--color-white-pure);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary:focus { outline: none; }
.faq-acc-icon {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-gold);
  font-size: 1rem;
  line-height: 1;
  font-family: var(--font-mono);
  font-weight: 400;
  transition: transform 0.25s, background 0.2s, border-color 0.2s;
}
.faq-accordion[open] .faq-acc-icon {
  transform: rotate(45deg);
  background: rgba(201,168,76,0.1);
  border-color: var(--color-gold);
}
.faq-acc-body {
  border-top: 1px solid var(--color-border);
  padding: 1rem 1.6rem 1.25rem;
  animation: tabFadeIn 0.18s ease;
}
.faq-acc-body p {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

/* =========================================================================
   FLOATING SIDE TABS (GLOSSARY + LOCATIONS, stacked vertically)
   ========================================================================= */
.float-stack {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 990;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.locations-float,
.glossary-float {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.locations-float-panel,
.glossary-float-panel {
  width: 0;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(6, 12, 24, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 168, 90, 0.2);
  border-top: 2px solid var(--color-gold);
  border-right: none;
  border-radius: 4px 0 0 4px;
}
.locations-float:hover .locations-float-panel,
.locations-float.open .locations-float-panel,
.glossary-float:hover .glossary-float-panel,
.glossary-float.open .glossary-float-panel {
  width: 200px;
}
.locations-float-inner,
.glossary-float-inner {
  width: 200px;
  padding: 0.5rem 0 0.75rem;
  max-height: 70vh;
  overflow-y: auto;
}
.locations-float-label,
.glossary-float-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: rgba(200, 168, 90, 0.5);
  padding: 0.6rem 1.25rem 0.4rem;
  margin: 0;
  border-bottom: 1px solid rgba(200, 168, 90, 0.12);
}
.locations-float-inner a,
.glossary-float-inner a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 168, 90, 0.06);
  transition: color 0.15s ease, padding-left 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  position: relative;
}
.locations-float-inner a::before,
.glossary-float-inner a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gold);
  transform: scaleY(0);
  transition: transform 0.15s ease;
}
.locations-float-inner a:hover,
.glossary-float-inner a:hover {
  color: rgba(248, 248, 248, 1);
  padding-left: 1.5rem;
  background: rgba(200, 168, 90, 0.05);
}
.locations-float-inner a:hover::before,
.glossary-float-inner a:hover::before {
  transform: scaleY(1);
}
.glossary-float-inner a.glossary-view-all {
  color: var(--color-gold);
  font-weight: 600;
  border-bottom: 1px solid rgba(200, 168, 90, 0.2);
}
.locations-float-tab,
.glossary-float-tab {
  background: rgba(6, 12, 24, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 168, 90, 0.35);
  border-right: none;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 0.65rem;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none;
  box-shadow: -4px 0 20px rgba(0,0,0,0.4);
}
.locations-float:hover .locations-float-tab,
.glossary-float:hover .glossary-float-tab {
  background: rgba(200, 168, 90, 0.08);
  border-color: var(--color-gold);
}

@media (max-width: 375px) {
  .locations-float-tab,
  .glossary-float-tab {
    padding: 1rem 0.55rem;
    font-size: 0.52rem;
  }
  .locations-float:hover .locations-float-panel,
  .locations-float.open .locations-float-panel,
  .glossary-float:hover .glossary-float-panel,
  .glossary-float.open .glossary-float-panel {
    width: 175px;
  }
  .locations-float-inner,
  .glossary-float-inner {
    width: 175px;
  }
}

/* =========================================================================
   FOOTER — HORIZONTAL LOCATIONS STRIP (sits below the 4-col footer-grid)
   ========================================================================= */
.footer-locations-row {
  margin-top: -2rem;
  margin-bottom: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.footer-locations-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.footer-locations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
  flex: 1;
}
.footer-locations-list li {
  margin: 0;
}
.footer-locations-list a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(248, 248, 248, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.footer-locations-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.2s ease;
}
.footer-locations-list a:hover {
  color: var(--color-gold);
}
.footer-locations-list a:hover::after {
  width: 100%;
}

@media (max-width: 1024px) {
  .footer-locations-row {
    margin-top: 0;
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .footer-locations-list {
    gap: 0.5rem 1.25rem;
  }
  .footer-locations-list a {
    font-size: 0.7rem;
  }
}

/* ============================================================
   HOVER UTILITIES (audit H-12 — replaces inline onmouseover handlers)
   !important needed to beat inline border-color set via the
   `border:` shorthand on the target elements.
   ============================================================ */
.ss-hover-border:hover {
  border-color: var(--color-gold) !important;
}
.ss-hover-card-bg:hover {
  border-color: var(--color-gold) !important;
  background: rgba(201, 168, 76, 0.06) !important;
}
.ss-hover-underline:hover {
  border-bottom-color: rgba(201, 168, 76, 0.6) !important;
}

/* ============================================================
   COOKIE CONSENT BANNER (audit H-5)
   Non-blocking floating card. No backdrop. Bottom-right on
   desktop, slim bottom strip on mobile. Page stays interactive.
   ============================================================ */
.ss-cookie-banner {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  width: min(360px, calc(100vw - 2.5rem));
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--font-body);
  color: var(--color-white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.ss-cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ss-cookie-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.ss-cookie-body {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-white);
}
.ss-cookie-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.ss-cookie-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--color-gold);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ss-cookie-btn-primary {
  background: var(--color-gold);
  color: var(--color-primary);
}
.ss-cookie-btn-primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}
.ss-cookie-btn-secondary {
  background: transparent;
  color: var(--color-gold);
}
.ss-cookie-btn-secondary:hover {
  background: rgba(201, 168, 76, 0.1);
}
.ss-cookie-link {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-muted);
}
.ss-cookie-link:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

@media (max-width: 768px) {
  .ss-cookie-banner {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
    padding: 0.9rem 1rem 0.85rem;
  }
  .ss-cookie-body {
    font-size: 0.74rem;
    line-height: 1.45;
    margin-bottom: 0.7rem;
  }
}

/* ============================================================
   PHASE 9 SEO/A11Y FOLLOW-UP RULES
   ============================================================ */

/* Form inputs at 16px+ on mobile prevents iOS auto-zoom on focus */
@media (max-width: 768px) {
  input, textarea, select, button {
    font-size: 16px;
  }
}

/* Tables get horizontal scroll instead of overflow on narrow viewports */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}