/* SolusAds Design System - main.css */
/* Version: 1.0.0 */

/* =========================================================
   FONT FACE DECLARATIONS
   ========================================================= */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Serif Display';
  src: url('/assets/fonts/dm-serif/DMSerifDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   CSS CUSTOM PROPERTIES
   ========================================================= */
:root {
  /* Brand Colors */
  --color-brand-red:        #D72323;
  --color-brand-red-dark:   #B01C1C;
  --color-brand-red-light:  #FDF0F0;
  --color-brand-white:      #FFFFFF;

  /* UI Surfaces */
  --color-surface-0:        #FFFFFF;
  --color-surface-1:        #f9f9f9;
  --color-surface-2:        #fdfcf8;
  --color-surface-3:        #f5f5f5;

  /* Text */
  --color-text-primary:     #1A1A1A;
  --color-text-secondary:   #555555;
  --color-text-muted:       #909090;
  --color-text-red:         #D72323;

  /* Borders */
  --color-border:           #E2E0DA;
  --color-border-strong:    #C8C5BC;

  /* Hero Overlay */
  --color-hero-overlay:     rgba(15, 15, 15, 0.58);

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;
  --space-12:  240px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-enter:  700ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 16px 40px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.12);

  /* Typography */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* =========================================================
   SKIP LINK (Accessibility)
   ========================================================= */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-5);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-brand-red);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

/* =========================================================
   TYPOGRAPHY SCALE
   ========================================================= */
.display-xl {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 5.5vw, 5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.display-l {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  font-weight: 600;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}

.body-l {
  font-size: 1.125rem;
  line-height: 1.7;
}

.body {
  font-size: 1rem;
  line-height: 1.7;
}

.caption, .meta {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.serif {
  font-family: var(--font-serif);
}

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

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

@media (max-width: 1280px) {
  .container { padding: 0 48px; }
}

@media (max-width: 1024px) {
  .container { padding: 0 40px; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
}

.container--narrow {
  max-width: 960px;
}

.container--wide {
  max-width: 1600px;
}

/* Grid */
.grid {
  display: grid;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

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

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }

/* Section padding */
.section {
  padding: var(--space-10) 0;
}

.section--sm {
  padding: var(--space-8) 0;
}

.section--lg {
  padding: var(--space-11) 0;
}

@media (max-width: 768px) {
  .section { padding: var(--space-8) 0; }
  .section--sm { padding: var(--space-7) 0; }
  .section--lg { padding: var(--space-9) 0; }
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background var(--transition-slow), box-shadow var(--transition-slow);
}

.site-header.is-transparent {
  background: transparent;
}

.site-header.is-opaque {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 var(--color-border), 0 2px 12px rgba(0,0,0,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-8);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo__mark {
  width: 36px;
  height: 36px;
  background: var(--color-brand-red);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo__mark svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.nav-logo__text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1;
}

.site-header.is-transparent .nav-logo__text {
  color: #fff;
}

/* Primary Nav */
.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  /* Full row height so .nav-item--mega can stretch to the header's bottom
     edge. Links stay centred via align-items above. */
  align-self: stretch;
  justify-content: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-brand-red);
  background: var(--color-brand-red-light);
}

.site-header.is-transparent .nav-link {
  color: rgba(255,255,255,0.9);
}

.site-header.is-transparent .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.nav-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.nav-item:hover .nav-link svg {
  transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-3);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  pointer-events: none;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

/* =========================================================
   SERVICES MEGA MENU
   ========================================================= */
/* The Services item is the only one whose panel spans the full content
   width, so it opts out of being the positioning context and stretches to
   the full row height. Stretching matters: it removes the dead zone between
   the link and the panel that used to close the menu mid-travel. */
.nav-item--mega {
  position: static;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Transparent wrapper. Its top padding is the hover bridge, and because it
   is a child of .nav-item the hover state survives the crossing. */
.nav-dropdown--mega {
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  padding: 10px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform: translateY(-10px);
  transform-origin: top center;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 260ms;
}

.nav-item:hover .nav-dropdown--mega,
.nav-item:focus-within .nav-dropdown--mega {
  transform: translateY(0);
}

/* The visible panel */
.nav-mega {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.45);
}

/* ── Dark promo rail ─────────────────────────────────────── */
.nav-mega__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: #0C0D0F;
}

.nav-mega__aside-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 90% 70% at 20% 0%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 20% 0%, #000 10%, transparent 78%);
}

.nav-mega__aside-bloom {
  position: absolute;
  z-index: 0;
  left: -30%;
  bottom: -40%;
  width: 300px;
  height: 300px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(215, 35, 35, 0.28) 0%, transparent 68%);
}

.nav-mega__aside > *:not(.nav-mega__aside-grid):not(.nav-mega__aside-bloom) {
  position: relative;
  z-index: 2;
}

.nav-mega__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF5A5A;
}

.nav-mega__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D72323;
  box-shadow: 0 0 10px rgba(215, 35, 35, 0.9);
}

.nav-mega__headline {
  margin: 0 0 18px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.nav-mega__stats {
  display: flex;
  gap: 22px;
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav-mega__stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.nav-mega__stat-label {
  display: block;
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

.nav-mega__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background 220ms ease, border-color 220ms ease;
}

.nav-mega__cta:hover {
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
}

.nav-mega__cta svg {
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-mega__cta:hover svg {
  transform: translateX(4px);
}

/* ── Service grid ────────────────────────────────────────── */
.nav-mega__main {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 0;
  background: var(--color-surface-0);
}

.nav-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.nav-mega__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 200ms ease;
}

.nav-mega__item:hover,
.nav-mega__item:focus-visible {
  background: var(--svc-tint, rgba(215, 35, 35, 0.08));
  outline: none;
}

.nav-mega__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--svc, var(--color-brand-red));
}

.nav-mega__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--svc-tint, rgba(215, 35, 35, 0.10));
  color: var(--svc, var(--color-brand-red));
  transition: background 220ms ease, color 220ms ease;
}

.nav-mega__item:hover .nav-mega__icon {
  background: var(--svc, var(--color-brand-red));
  color: #fff;
}

.nav-mega__icon svg {
  width: 17px;
  height: 17px;
}

.nav-mega__text {
  min-width: 0;
  padding-top: 1px;
}

.nav-mega__title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--color-text);
  transition: color 200ms ease;
}

.nav-mega__item:hover .nav-mega__title {
  color: var(--svc, var(--color-brand-red));
}

.nav-mega__tagline {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ── Footer bar ──────────────────────────────────────────── */
.nav-mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 13px 11px;
  border-top: 1px solid var(--color-border);
}

.nav-mega__foot-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.nav-mega__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-brand-red);
  text-decoration: none;
  white-space: nowrap;
}

.nav-mega__foot-link svg {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-mega__foot-link:hover svg {
  transform: translateX(4px);
}

/* ── Narrow desktop: drop the promo rail ─────────────────── */
@media (max-width: 1280px) {
  .nav-mega__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .nav-mega {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav-mega__aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
  }
  .nav-mega__headline,
  .nav-mega__stats {
    display: none;
  }
  .nav-mega__label {
    margin-bottom: 0;
  }
  .nav-mega__cta {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown--mega,
  .nav-mega__item,
  .nav-mega__icon,
  .nav-mega__cta svg,
  .nav-mega__foot-link svg {
    transition: none;
  }
  .nav-dropdown--mega,
  .nav-item:hover .nav-dropdown--mega,
  .nav-item:focus-within .nav-dropdown--mega {
    transform: none;
  }
}

/* Nav CTA */
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Very narrow phones: tighten the gutters and the header CTA so the
   hamburger stays on screen. */
@media (max-width: 380px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav-cta {
    gap: var(--space-2);
  }
  .nav-cta .btn {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    font-size: 0.875rem;
  }
}

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  transition: background var(--transition-fast);
}

.nav-hamburger:hover {
  background: var(--color-surface-2);
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.site-header.is-transparent .nav-hamburger span {
  background: #fff;
}

.nav-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-primary { display: none; }
  .nav-hamburger { display: flex; }
}

/* Mobile drawer */
.nav-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-surface-0);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  padding: 90px var(--space-5) var(--space-8);
}

.nav-mobile-drawer.is-open {
  transform: translateX(0);
}

.nav-mobile__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-mobile__link {
  display: block;
  padding: var(--space-4) var(--space-4);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border);
}

.nav-mobile__link:hover {
  color: var(--color-brand-red);
  background: var(--color-brand-red-light);
}

.nav-mobile__sub {
  padding-left: var(--space-5);
}

.nav-mobile__sub a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
}

.nav-mobile__sub a:hover {
  color: var(--color-brand-red);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-brand-red);
  color: #fff;
  border: 2px solid transparent;
}

.btn--primary:hover {
  background: var(--color-brand-red-dark);
  box-shadow: 0 4px 16px rgba(215, 35, 35, 0.3);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-strong);
}

.btn--outline:hover {
  border-color: var(--color-brand-red);
  color: var(--color-brand-red);
  background: var(--color-brand-red-light);
}

.btn--outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}

.btn--outline-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.btn--white {
  background: #fff;
  color: var(--color-brand-red);
  border: 2px solid transparent;
}

.btn--white:hover {
  background: var(--color-brand-red-light);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-brand-red);
  border: 2px solid transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn--ghost:hover {
  color: var(--color-brand-red-dark);
}

.btn--ghost .btn-arrow {
  transition: transform var(--transition-base);
}

.btn--ghost:hover .btn-arrow {
  transform: translateX(4px);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 18px 36px;
  font-size: 1rem;
}

.btn svg, .btn .btn-icon {
  width: 18px;
  height: 18px;
}

/* =========================================================
   BADGES AND TAGS
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
}

.badge--red {
  background: var(--color-brand-red-light);
  color: var(--color-brand-red);
}

.badge--grey {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
}

.badge--dark {
  background: var(--color-text-primary);
  color: #fff;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface-1);
}

/* Section label */
.section-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-red);
  margin-bottom: var(--space-4);
}

/* =========================================================
   HERO - VIDEO
   ========================================================= */
.hero-video {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0f0f0f;
}

.hero-video__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video__media video,
.hero-video__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: 1;
}
.hero-video__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0 140px; /* leave room for stat bar */
  width: 100%;
}

.hero-video__inner {
  width: 100%;
  padding-top: 72px; /* Offset for fixed header */
}

.hero-video__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.hero-video__eyebrow-line {
  width: 32px;
  height: 2px;
  background: var(--color-brand-red);
  display: block;
}

.hero-video__eyebrow-text {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.hero-video__headline {
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  max-width: 820px;
  margin-bottom: var(--space-5);
}

.hero-video__headline em {
  font-style: normal;
  color: var(--color-brand-red);
}

.hero-video__subhead {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 580px;
  margin-bottom: var(--space-7);
  font-weight: 400;
}

.hero-video__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Hero stat bar — overlaid at the bottom of the hero video */
.hero-stat-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 0 28px;
  /* fade the video into the bar */
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 100%);
}

.hero-stat-bar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 0 8px;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.hero-stat-bar__divider {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.hero-stat-bar__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 12px;
  transition: background 200ms;
  cursor: default;
}

.hero-stat-bar__item:hover {
  background: rgba(255,255,255,0.05);
}

.hero-stat-bar__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(215,35,35,0.18);
  border: 1px solid rgba(215,35,35,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f87171;
  transition: background 200ms, border-color 200ms;
}

.hero-stat-bar__item:hover .hero-stat-bar__icon {
  background: rgba(215,35,35,0.28);
  border-color: rgba(215,35,35,0.50);
}

.hero-stat-bar__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-stat-bar__number {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hero-stat-bar__label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.50);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .hero-stat-bar__inner {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .hero-stat-bar__divider { display: none; }
  .hero-stat-bar__item { padding: 18px 16px; }
  .hero-stat-bar__item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
  .hero-stat-bar__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}

@media (max-width: 480px) {
  .hero-stat-bar { padding-bottom: 16px; }
  .hero-stat-bar__inner { grid-template-columns: 1fr 1fr; border-radius: 12px; }
  .hero-stat-bar__item { padding: 14px 12px; gap: 10px; }
  .hero-stat-bar__icon { width: 34px; height: 34px; border-radius: 8px; }
  .hero-stat-bar__number { font-size: 1.375rem; }
  .hero-stat-bar__label { font-size: 0.72rem; }
}

/* =========================================================
   HERO - PAGE (Inner pages)
   ========================================================= */
.hero-page {
  background: var(--color-surface-1);
  padding: 140px 0 80px;
  border-bottom: 1px solid var(--color-border);
}

.hero-page__eyebrow {
  margin-bottom: var(--space-3);
}

.hero-page__title {
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.hero-page__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  line-height: 1.7;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.breadcrumb__item a {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-brand-red);
}

.breadcrumb__sep {
  width: 4px;
  height: 4px;
  background: var(--color-border-strong);
  border-radius: 50%;
}

.breadcrumb__item.is-current {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* =========================================================
   SERVICE CARDS  — Apple-inspired layout
   Text always visible at top; image fills the lower portion.
   ========================================================= */
.card-service {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 320ms cubic-bezier(0.22,1,0.36,1),
              transform   320ms cubic-bezier(0.22,1,0.36,1);
}
.card-service:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.13);
  transform: translateY(-3px);
}

/* Dark / featured variant (first card) */
.card-service--dark {
  background: #111827;
}

/* Header — always visible text block */
.card-service__header {
  padding: 24px 24px 20px;
  flex-shrink: 0;
}

.card-service__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-red);
  margin-bottom: 10px;
}
.card-service--dark .card-service__tag {
  color: #f87171;
}

.card-service__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.card-service--dark .card-service__title { color: #fff; }

.card-service__desc {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  /* Always visible — no max-height trick */
}
.card-service--dark .card-service__desc { color: rgba(255,255,255,0.6); }

.card-service__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand-red);
  transition: gap 200ms;
}
.card-service--dark .card-service__cta { color: #f87171; }
.card-service:hover .card-service__cta { gap: 8px; }
.card-service__cta svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  flex-shrink: 0;
  transition: transform 200ms;
}
.card-service:hover .card-service__cta svg { transform: translateX(2px); }

/* Image wrapper — fills remaining card height */
.card-service__image-wrap {
  flex: 1;
  overflow: hidden;
  min-height: 200px;
}
.card-service__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card-service:hover .card-service__image {
  transform: scale(1.05);
}

/* =========================================================
   WORK / CASE STUDY CARDS
   ========================================================= */
.card-work {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.card-work:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-work__image-wrap {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--color-surface-2);
}

.card-work__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.card-work:hover .card-work__image {
  transform: scale(1.04);
}

.card-work__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}

.card-work__body {
  padding: var(--space-5) var(--space-6);
}

.card-work__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.card-work__client {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.card-work__title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.card-work__result {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.card-work__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand-red);
  margin-top: var(--space-4);
  transition: gap var(--transition-fast);
}

.card-work:hover .card-work__link {
  gap: var(--space-3);
}

/* =========================================================
   BLOG CARDS
   ========================================================= */
.card-blog {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.card-blog:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-blog__image-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-surface-2);
}

.card-blog__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.card-blog:hover .card-blog__image {
  transform: scale(1.04);
}

.card-blog__body {
  padding: var(--space-5) var(--space-6);
}

.card-blog__cat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brand-red);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.card-blog__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.card-blog__excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-blog__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* =========================================================
   TESTIMONIAL CARDS
   ========================================================= */
.card-testimonial {
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  position: relative;
}

.card-testimonial::before {
  content: '\201C';
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  font-family: var(--font-serif);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-brand-red-light);
  font-weight: 400;
}

.card-testimonial__quote {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  font-style: italic;
  font-family: var(--font-serif);
}

.card-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.card-testimonial__avatar {
  width: 44px;
  height: 44px;
  background: var(--color-surface-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-brand-red);
  flex-shrink: 0;
}

.card-testimonial__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.25;
}

.card-testimonial__role {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* =========================================================
   STATS / COUNTERS
   ========================================================= */
.stats-row {
  background: var(--color-surface-2);
  padding: var(--space-9) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);
  position: relative;
}

.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--color-border-strong);
}

.stat-item__number {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 500;
  color: var(--color-brand-red);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.stat-item__label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item + .stat-item::before { display: none; }
  .stat-item { border-bottom: 1px solid var(--color-border); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--color-border); }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none !important; }
}

/* =========================================================
   CLIENT LOGO STRIP
   ========================================================= */
.clients-strip {
  background: var(--color-surface-1);
  padding: var(--space-6) 0;
  overflow: hidden;
}

.clients-strip__marquee {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}

.clients-strip__marquee:hover {
  animation-play-state: paused;
}

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

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  opacity: 1;
  flex-shrink: 0;
}

.client-logo img {
  max-height: 40px;
  max-width: 140px;
  object-fit: contain;
}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band {
  position: relative;
  isolation: isolate;
  background: #0A0A0A;
  padding: clamp(64px, 8vw, 112px) 0;
  overflow: hidden;
}

/* Hairline that separates the band from whatever sits above it */
.cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(215, 35, 35, 0.55) 30%,
    rgba(215, 35, 35, 0.55) 70%,
    transparent 100%);
  z-index: 2;
}

/* ── Background decoration ───────────────────────────────── */
.cta-band__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cta-band__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%);
}

/* Warm red bloom anchored behind the action card */
.cta-band__bg-bloom {
  position: absolute;
  top: 50%;
  right: 4%;
  width: min(780px, 70vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle,
    rgba(215, 35, 35, 0.18) 0%,
    rgba(215, 35, 35, 0.07) 35%,
    transparent 68%);
}

.cta-band__bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(215, 35, 35, 0.10);
}
.cta-band__bg-ring--1 {
  width: 560px;
  height: 560px;
  top: -220px;
  right: -120px;
}
.cta-band__bg-ring--2 {
  width: 380px;
  height: 380px;
  bottom: -170px;
  left: -90px;
  border-color: rgba(255, 255, 255, 0.05);
}

/* ── Layout ──────────────────────────────────────────────── */
.cta-band__container {
  position: relative;
  z-index: 2;
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 384px);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1120px;
  margin-inline: auto;
}

.cta-band__left {
  min-width: 0;
}

/* ── Eyebrow ─────────────────────────────────────────────── */
.cta-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF5A5A;
  margin-bottom: 22px;
}

.cta-band__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D72323;
  box-shadow: 0 0 12px rgba(215, 35, 35, 0.9);
  animation: ctaPulse 2.4s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.62); }
}

/* ── Headline ────────────────────────────────────────────── */
.cta-band__headline {
  font-family: var(--font-sans);
  font-size: clamp(2.125rem, 4.2vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.038em;
  line-height: 1.04;
  margin: 0 0 18px;
  text-wrap: balance;
}

/* Red brush stroke sitting under the emphasised words.
   Painted as the span's own background so it always sits behind the
   glyphs without needing a negative z-index (which would drop it
   below .cta-band__bg). */
.cta-band__headline-accent {
  white-space: nowrap;
  padding-inline: 0.05em;
  padding-bottom: 0.16em;
  background-image: linear-gradient(90deg,
    rgba(215, 35, 35, 0.95) 0%,
    rgba(215, 35, 35, 0.42) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.15em;
  background-position: 0 100%;
  border-radius: 2px;
}

/* ── Supporting copy ─────────────────────────────────────── */
.cta-band__sub {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  max-width: 46ch;
  margin: 0 0 28px;
}

/* ── Trust row ───────────────────────────────────────────── */
.cta-band__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cta-band__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.cta-band__trust-item svg {
  color: #FF5A5A;
  flex-shrink: 0;
}

/* ── Action card ─────────────────────────────────────────── */
.cta-band__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  border-radius: 22px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 100%);
  box-shadow:
    0 32px 64px -24px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Gradient hairline border */
.cta-band__card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg,
    rgba(215, 35, 35, 0.60) 0%,
    rgba(255, 255, 255, 0.14) 32%,
    rgba(255, 255, 255, 0.05) 65%,
    rgba(215, 35, 35, 0.30) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.cta-band__card-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 6px;
}

/* Primary action */
.cta-band__btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 16px 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, #E22B2B 0%, #C51D1D 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow:
    0 8px 28px -6px rgba(215, 35, 35, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease,
              filter 220ms ease;
}
.cta-band__btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    0 14px 38px -8px rgba(215, 35, 35, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.cta-band__btn-primary:active {
  transform: translateY(0);
}
.cta-band__btn-primary svg {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-band__btn-primary:hover svg {
  transform: translateX(5px);
}

/* Secondary action */
.cta-band__btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.cta-band__btn-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
}

/* Divider */
.cta-band__card-divider {
  height: 1px;
  margin: 6px 0 2px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.14), transparent);
}

/* Phone fallback, treated as a real third conversion path */
.cta-band__call {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 200ms ease;
}
.cta-band__call:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cta-band__call-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(215, 35, 35, 0.14);
  border: 1px solid rgba(215, 35, 35, 0.28);
  color: #FF5A5A;
}

.cta-band__call-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cta-band__call-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.cta-band__call-number {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ── Focus states ────────────────────────────────────────── */
.cta-band a:focus-visible {
  outline: 2px solid #FF5A5A;
  outline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 40px;
    max-width: 560px;
  }
  .cta-band__sub {
    margin-inline: auto;
  }
  /* Stack the ticks but keep every checkmark on one vertical edge,
     while the block as a whole stays optically centred. */
  .cta-band__trust {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    gap: 10px;
  }
  .cta-band__card {
    width: 100%;
  }
  .cta-band__call {
    justify-content: center;
  }
  .cta-band__bg-bloom {
    top: auto;
    bottom: -18%;
    right: 50%;
    transform: translateX(50%);
  }
}

@media (max-width: 560px) {
  .cta-band {
    padding: 56px 0;
  }
  .cta-band__headline {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }
  .cta-band__headline-accent {
    white-space: normal;
  }
  .cta-band__card {
    padding: 26px 20px;
    border-radius: 18px;
  }
}

/* ── Motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cta-band__eyebrow-dot {
    animation: none;
  }
  .cta-band__btn-primary,
  .cta-band__btn-primary svg,
  .cta-band__btn-secondary,
  .cta-band__call {
    transition: none;
  }
  .cta-band__btn-primary:hover {
    transform: none;
  }
}

/* =========================================================
   ABOUT STRIP
   ========================================================= */
.about-strip {
  background: var(--color-surface-0);
  padding: var(--space-10) 0;
}

.about-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.about-strip__headline {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.about-strip__headline em {
  font-style: normal;
  color: var(--color-brand-red);
}

.about-strip__body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.about-strip__image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 5/4;
  background: var(--color-surface-2);
}

.about-strip__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-strip__badge {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
}

.about-strip__badge-number {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--color-brand-red);
  line-height: 1;
}

.about-strip__badge-text {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .about-strip__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section-header {
  margin-bottom: var(--space-8);
}

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

.section-header--center .section-label {
  justify-content: center;
  display: flex;
}

.section-header__title {
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.section-header__body {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 600px;
}

.section-header--center .section-header__body {
  margin: 0 auto;
}

/* =========================================================
   COVERAGE MAP
   ========================================================= */
.coverage-section {
  background: var(--color-surface-1);
  padding: clamp(56px, 7vw, 96px) 0;
}

/* ── Stat strip ──────────────────────────────────────────── */
.coverage-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 40px;
  padding: 0;
  list-style: none;
}

.coverage-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.coverage-stat__num {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-brand-red);
  letter-spacing: -0.02em;
}

.coverage-stat__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ── Explorer layout ─────────────────────────────────────── */
.coverage-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 20px;
  align-items: stretch;
}

/* ── Map panel ───────────────────────────────────────────── */
.coverage-map {
  position: relative;
  min-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  background: #10120F;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.45);
}

.coverage-map__canvas {
  position: absolute;
  inset: 0;
}

/* Idle / loading / failed state, sits under the canvas once loaded */
.coverage-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(215, 35, 35, 0.14), transparent 70%),
    #10120F;
}

.coverage-map__fallback-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
}

.coverage-map__fallback-text {
  font-size: 0.8125rem;
  max-width: 34ch;
  line-height: 1.6;
}

.coverage-map__spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--color-brand-red);
  animation: coverageSpin 800ms linear infinite;
}

@keyframes coverageSpin {
  to { transform: rotate(360deg); }
}

/* Once the map is live the fallback is removed from the flow */
.coverage-map.is-ready .coverage-map__fallback {
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

/* Legend chip floating over the map. Anchored top-left so it never covers
   the Google attribution logo, which must stay visible per the Maps terms. */
.coverage-map__legend {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(16, 18, 15, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.coverage-map__legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand-red);
  box-shadow: 0 0 0 4px rgba(215, 35, 35, 0.22);
}

/* ── District list ───────────────────────────────────────── */
.coverage-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.coverage-list__head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border);
}

.coverage-list__title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin: 0;
}

.coverage-list__items {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  flex: 1;
  max-height: 392px;
  scrollbar-width: thin;
}

/* Each district is a real button so it is keyboard reachable */
.coverage-district {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 180ms ease;
}

.coverage-district:hover {
  background: var(--color-surface-1);
}

.coverage-district.is-active {
  background: rgba(215, 35, 35, 0.06);
}

.coverage-district:focus-visible {
  outline: 2px solid var(--color-brand-red);
  outline-offset: -2px;
}

.coverage-district__pin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  transition: background 180ms ease, color 180ms ease;
}

.coverage-district:hover .coverage-district__pin,
.coverage-district.is-active .coverage-district__pin {
  background: var(--color-brand-red);
  color: #fff;
}

.coverage-district__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.coverage-district__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.coverage-district__region {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.coverage-district__sites {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-brand-red);
  flex-shrink: 0;
}

/* ── Footer action ───────────────────────────────────────── */
.coverage-actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .coverage-explorer {
    grid-template-columns: minmax(0, 1fr);
  }
  .coverage-map {
    min-height: 380px;
  }
  .coverage-list__items {
    max-height: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .coverage-map {
    min-height: 320px;
    border-radius: 16px;
  }
  .coverage-stats {
    gap: 10px;
    margin-bottom: 28px;
  }
  .coverage-stat {
    padding: 9px 14px;
  }
  .coverage-list__items {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coverage-map__spinner {
    animation: none;
  }
  .coverage-district,
  .coverage-district__pin {
    transition: none;
  }
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px var(--color-brand-red-light);
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-0);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.faq-trigger:hover {
  background: var(--color-surface-1);
}

.faq-trigger__question {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.faq-item.is-open .faq-trigger__question {
  color: var(--color-brand-red);
}

.faq-trigger__icon {
  width: 28px;
  height: 28px;
  background: var(--color-surface-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-base);
}

.faq-item.is-open .faq-trigger__icon {
  background: var(--color-brand-red);
  transform: rotate(180deg);
}

.faq-trigger__icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-text-secondary);
  fill: none;
  transition: stroke var(--transition-fast);
}

.faq-item.is-open .faq-trigger__icon svg {
  stroke: #fff;
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-body {
  max-height: 1000px;
}

.faq-body__inner {
  padding: 0 var(--space-6) var(--space-6);
  padding-top: var(--space-3);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

/* =========================================================
   CONTACT SECTION
   ========================================================= */
.contact-section {
  padding: var(--space-10) 0;
}

/* minmax(0, 1fr): a plain 1fr floors at the content's min-content width,
   which let the enquiry form push this track wider than the container on
   narrow phones. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Forms */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.form-label span {
  color: var(--color-brand-red);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-0);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px var(--color-brand-red-light);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-error {
  font-size: 0.8125rem;
  color: var(--color-brand-red);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* Contact info */
.contact-info {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  border: 1px solid var(--color-border);
}

.contact-info__item {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  background: var(--color-brand-red-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-brand-red);
  fill: none;
}

.contact-info__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.contact-info__value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  /* Email addresses have no break opportunities and overflowed narrow screens */
  overflow-wrap: anywhere;
}

.contact-info__value a {
  color: var(--color-brand-red);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
}

.footer-main {
  display: grid;
  grid-template-columns: 320px 1fr 1fr 280px;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.footer-brand__tagline {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.footer-brand__statement {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 280px;
}

.footer-col__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.footer-col__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col__link {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  line-height: 1.4;
}

.footer-col__link:hover {
  color: var(--color-brand-red);
}

.footer-address {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.footer-contact-item a {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer-contact-item a:hover {
  color: var(--color-brand-red);
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-text-muted);
  fill: none;
  flex-shrink: 0;
}

.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 20px;
  background: #25D366;
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: var(--space-4);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.footer-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
}

.footer-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  flex-wrap: wrap;
}

.footer-bottom__copy {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-bottom__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.footer-bottom__link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-bottom__link:hover {
  color: var(--color-brand-red);
}

@media (max-width: 1280px) {
  .footer-main { grid-template-columns: 1fr 1fr 1fr; }
  .footer-main > *:last-child { grid-column: span 3; }
}

@media (max-width: 768px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .footer-main > *:first-child { grid-column: span 2; }
  .footer-main > *:last-child { grid-column: span 2; }
}

@media (max-width: 480px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-main > *:first-child { grid-column: 1; }
  .footer-main > *:last-child { grid-column: 1; }
}

/* =========================================================
   PROCESS STRIP
   ========================================================= */
.process-strip {
  background: var(--color-surface-2);
  padding: var(--space-9) 0;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 2px;
  background: linear-gradient(to right, var(--color-brand-red), var(--color-brand-red-light));
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-4);
  position: relative;
  z-index: 1;
}

.process-step__number {
  width: 48px;
  height: 48px;
  background: var(--color-brand-red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--color-surface-2), 0 0 0 6px var(--color-border);
}

.process-step__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.process-step__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }
}

@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* =========================================================
   SERVICE CARDS
   Each card carries its own accent via --svc / --svc-tint,
   set inline so the grid reads as a colour-coded taxonomy.
   ========================================================= */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: 20px;
}

.svc-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 264px;
  padding: 26px 24px 22px;
  border-radius: 20px;
  /* Faint accent wash so the grid reads as colour-coded before any hover */
  background:
    linear-gradient(155deg, var(--svc-tint, rgba(215, 35, 35, 0.10)) 0%, rgba(255, 255, 255, 0) 58%),
    var(--color-surface-0);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 420ms ease,
              border-color 260ms ease;
}

.svc-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 30px 54px -28px rgba(0, 0, 0, 0.38);
}

.svc-card:focus-visible {
  outline: 2px solid var(--svc, var(--color-brand-red));
  outline-offset: 3px;
}

/* The accent disc that floods the card on hover. Negative z-index puts it
   above the card's own background but below its content. */
.svc-card__flood {
  position: absolute;
  top: -42px;
  right: -42px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--svc, var(--color-brand-red));
  z-index: -1;
  opacity: 0;
  transform: scale(0.3);
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease;
}

.svc-card:hover .svc-card__flood,
.svc-card:focus-visible .svc-card__flood {
  opacity: 1;
  transform: scale(9);
}

/* Oversized index numeral, sits behind everything as texture */
.svc-card__index {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--svc, var(--color-brand-red));
  opacity: 0.2;
  transition: color 320ms ease, opacity 320ms ease;
}

.svc-card:hover .svc-card__index {
  color: #fff;
  opacity: 0.26;
}

.svc-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: var(--svc-tint, rgba(215, 35, 35, 0.10));
  color: var(--svc, var(--color-brand-red));
  transition: background 320ms ease, color 320ms ease;
}

.svc-card:hover .svc-card__icon {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}

.svc-card__type {
  display: block;
  margin-bottom: 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--svc, var(--color-brand-red));
  transition: color 320ms ease;
}

.svc-card:hover .svc-card__type {
  color: rgba(255, 255, 255, 0.88);
}

.svc-card__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--color-text);
  transition: color 320ms ease;
}

.svc-card:hover .svc-card__title {
  color: #fff;
}

.svc-card__desc {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  transition: color 320ms ease;
}

.svc-card:hover .svc-card__desc {
  color: rgba(255, 255, 255, 0.88);
}

.svc-card__go {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: auto;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background 320ms ease, color 320ms ease,
              border-color 320ms ease, transform 320ms ease;
}

.svc-card:hover .svc-card__go {
  background: #fff;
  border-color: #fff;
  color: var(--svc, var(--color-brand-red));
  transform: translateX(5px);
}

/* ── Format guide chips ──────────────────────────────────── */
.svc-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.svc-guide__item {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Accent rule across the top edge */
.svc-guide__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--svc, var(--color-brand-red));
}

.svc-guide__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc, var(--color-brand-red));
  background: var(--svc-tint, rgba(215, 35, 35, 0.10));
}

.svc-guide__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* =========================================================
   SERVICE DETAIL LAYOUT
   ========================================================= */
.svc-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 396px);
  gap: 52px;
  align-items: start;
}

.svc-detail__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--svc-tint, var(--color-surface-2));
}

.svc-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown when a format has no photograph yet */
.svc-detail__media--blank {
  display: grid;
  place-items: center;
  color: var(--svc, var(--color-brand-red));
  background:
    radial-gradient(circle at 30% 25%, var(--svc-tint, rgba(215,35,35,0.10)), transparent 60%),
    var(--color-surface-1);
}

.svc-detail__media--blank svg {
  width: 76px;
  height: 76px;
  opacity: 0.55;
}

/* ── Sticky enquiry card ─────────────────────────────────── */
.svc-detail__aside {
  position: sticky;
  top: 104px;
}

.svc-form-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 54px -34px rgba(0, 0, 0, 0.40);
}

.svc-form-card__head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--svc-tint, rgba(215, 35, 35, 0.07));
}

.svc-form-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc, var(--color-brand-red));
}

.svc-form-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--svc, var(--color-brand-red));
}

.svc-form-card__title {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--color-text);
}

.svc-form-card__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.svc-form-card__body {
  padding: 18px 22px 20px;
}

/* The shared enquiry partial is two-column; a sidebar needs one.
   Fields are also compressed so the whole card stays shorter than the
   viewport, otherwise position:sticky has nothing to hold onto. */
.svc-form-card .form-row {
  display: block;
}

.svc-form-card .form-group {
  margin-bottom: 12px;
}

.svc-form-card .form-label {
  margin-bottom: 5px;
  font-size: 0.75rem;
}

.svc-form-card .form-input,
.svc-form-card .form-textarea {
  padding: 10px 12px;
  font-size: 0.875rem;
}

.svc-form-card .form-textarea {
  height: 84px;
  min-height: 84px;
}

.svc-form-card .btn {
  width: 100%;
  justify-content: center;
}

.svc-form-card__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.svc-form-card__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.svc-form-card__trust-item svg {
  color: var(--svc, var(--color-brand-red));
  flex-shrink: 0;
}

/* ── Blocks stacked inside the left column ───────────────── */
.svc-block {
  margin-top: 56px;
}

.svc-block__title {
  margin: 8px 0 24px;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-text);
}

/* Tinted panel keeps the advantages block distinct now that it no longer
   has a full-bleed section background of its own. */
.svc-panel {
  position: relative;
  padding: 32px 30px;
  border-radius: 22px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.svc-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--svc, var(--color-brand-red));
}

/* ── Specification cards ─────────────────────────────────── */
/* 320px floor keeps this at two columns in the content column, so long
   values like "Highway junctions, commercial corridors, roundabouts"
   do not wrap into a narrow ribbon. */
.svc-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.svc-spec {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 15px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

.svc-spec:hover {
  border-color: var(--svc, var(--color-brand-red));
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.28);
}

.svc-spec__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  color: var(--svc, var(--color-brand-red));
  background: var(--svc-tint, rgba(215, 35, 35, 0.10));
}

.svc-spec__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.svc-spec__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.svc-spec__value {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Advantage tiles ─────────────────────────────────────── */
.svc-adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.svc-adv {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 22px 22px 20px;
  border-radius: 16px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms ease;
}

.svc-adv:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.30);
}

.svc-adv__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--svc, var(--color-brand-red));
  background: var(--svc-tint, rgba(215, 35, 35, 0.10));
}

.svc-adv__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--color-text-secondary);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .svc-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .svc-detail__aside {
    position: static;
  }
  .svc-form-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .svc-card {
    min-height: 0;
    padding: 22px 20px 20px;
  }
  .svc-card__index {
    font-size: 2.75rem;
  }
  .svc-form-card .form-row {
    display: block;
  }
  .svc-block {
    margin-top: 40px;
  }
  .svc-panel {
    padding: 24px 18px;
    border-radius: 18px;
  }
  .svc-spec-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__flood,
  .svc-card__go,
  .svc-adv {
    transition: none;
  }
  .svc-card:hover,
  .svc-adv:hover {
    transform: none;
  }
  .svc-card:hover .svc-card__flood {
    transform: scale(9);
  }
}

/* =========================================================
   COVERAGE PAGE
   Districts are accented by region (--reg / --reg-tint), so the
   grid groups visually by geography rather than by arbitrary order.
   ========================================================= */
/* Kerala is tall and narrow, so a very wide panel makes fitBounds zoom out
   and fill the sides with neighbouring states. Constrained width plus a
   taller panel keeps the state filling the frame. */
.cov-explorer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1060px;
  margin-inline: auto;
}

/* ── District rail above the map ─────────────────────────── */
.cov-rail {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.cov-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-0);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.cov-chip:hover {
  border-color: var(--reg, var(--color-brand-red));
}

.cov-chip.is-active {
  background: var(--reg, var(--color-brand-red));
  border-color: var(--reg, var(--color-brand-red));
  color: #fff;
}

.cov-chip:focus-visible {
  outline: 2px solid var(--reg, var(--color-brand-red));
  outline-offset: 2px;
}

.cov-chip__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--reg, var(--color-brand-red));
  transition: color 220ms ease;
}

.cov-chip.is-active .cov-chip__count {
  color: rgba(255, 255, 255, 0.92);
}

/* ── Taller map on the dedicated coverage page ───────────── */
.cov-explorer .coverage-map {
  min-height: 620px;
}

/* Summary chip floating over the map, opposite the legend */
.cov-map-badge {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  display: flex;
  gap: 18px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(16, 18, 15, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cov-map-badge__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cov-map-badge__num {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.cov-map-badge__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ── District cards ──────────────────────────────────────── */
.cov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.cov-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px 24px 22px;
  border-radius: 20px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 380ms ease,
              border-color 260ms ease;
}

/* Region rule down the leading edge */
.cov-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--reg, var(--color-brand-red));
  transform: scaleY(0.28);
  transform-origin: top;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cov-card:hover {
  transform: translateY(-5px);
  border-color: var(--reg, var(--color-brand-red));
  box-shadow: 0 26px 48px -30px rgba(0, 0, 0, 0.34);
}

.cov-card:hover::before {
  transform: scaleY(1);
}

.cov-card:focus-visible {
  outline: 2px solid var(--reg, var(--color-brand-red));
  outline-offset: 3px;
}

.cov-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cov-card__name {
  margin: 0 0 3px;
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-text);
}

.cov-card__region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--reg, var(--color-brand-red));
}

.cov-card__region::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Site count as the card's display figure */
.cov-card__count {
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
}

.cov-card__count-num {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--reg, var(--color-brand-red));
}

.cov-card__count-label {
  display: block;
  margin-top: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cov-card__intro {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cov-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.cov-card__tag {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
}

.cov-card__tag--more {
  color: var(--reg, var(--color-brand-red));
  background: var(--reg-tint, rgba(215, 35, 35, 0.10));
  border-color: transparent;
}

.cov-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--reg, var(--color-brand-red));
}

.cov-card__go svg {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cov-card:hover .cov-card__go svg {
  transform: translateX(5px);
}

/* ── Region legend ───────────────────────────────────────── */
.cov-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin-bottom: 28px;
  padding: 0;
  list-style: none;
}

.cov-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cov-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--reg);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .cov-explorer .coverage-map {
    min-height: 420px;
  }
  .cov-map-badge {
    right: 12px;
    top: 12px;
    gap: 14px;
    padding: 10px 14px;
  }
}

@media (max-width: 560px) {
  .cov-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .cov-explorer .coverage-map {
    min-height: 360px;
  }
  /* The badge would crowd a small map; the stats band below repeats it */
  .cov-map-badge {
    display: none;
  }
  .cov-card {
    padding: 22px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cov-card,
  .cov-card::before,
  .cov-card__go svg,
  .cov-chip {
    transition: none;
  }
  .cov-card:hover {
    transform: none;
  }
}

/* =========================================================
   ABOUT PAGE
   "Signal Grid": an LED dot-matrix motif, hairline rules and
   oversized monospace numerals. Red is the only accent.
   ========================================================= */
.abt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #08090A;
  /* The site header is position:fixed and 72px tall, so its height has to be
     added on top of the intended breathing room or the breadcrumb sits flush
     against it. .hero-page uses a flat 140px for the same reason. */
  padding: calc(72px + clamp(34px, 6vw, 68px)) 0 0;
}

/* Dot matrix, the page's signature texture */
.abt-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 30%, #000 20%, transparent 78%);
}

.abt-hero__bloom {
  position: absolute;
  top: -22%;
  right: -8%;
  z-index: 0;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(215, 35, 35, 0.30) 0%,
    rgba(215, 35, 35, 0.10) 34%,
    transparent 68%);
}

/* A slow light band travelling down the grid, like a panel refreshing */
.abt-hero__sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.abt-hero__sweep::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 42%;
  top: -42%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(215, 35, 35, 0.07) 45%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(215, 35, 35, 0.07) 55%,
    transparent 100%);
  animation: abtSweep 9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes abtSweep {
  0%       { transform: translateY(0); opacity: 0; }
  12%      { opacity: 1; }
  88%      { opacity: 1; }
  100%     { transform: translateY(340%); opacity: 0; }
}

.abt-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.abt-hero .breadcrumb__item a { color: rgba(255, 255, 255, 0.55); }
.abt-hero .breadcrumb__item a:hover { color: #fff; }
.abt-hero .breadcrumb__item.is-current { color: rgba(255, 255, 255, 0.85); }
.abt-hero .breadcrumb__sep { background: rgba(255, 255, 255, 0.28); }

.abt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 22px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF5A5A;
}

.abt-hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D72323;
  box-shadow: 0 0 12px rgba(215, 35, 35, 0.9);
  animation: abtPulse 2.4s ease-in-out infinite;
}

@keyframes abtPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.62); }
}

.abt-hero__title {
  margin: 0 0 22px;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: #fff;
}

.abt-hero__title-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.abt-hero__title-main {
  display: block;
  font-size: clamp(2.75rem, 8vw, 6rem);
  font-weight: 800;
}

.abt-hero__sub {
  max-width: 54ch;
  margin: 0 0 clamp(48px, 6vw, 76px);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
}

/* ── Stat rail, pulled into the hero ─────────────────────── */
.abt-rail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Padding is set per column position rather than with :not(:first-child),
   which leaked a left indent onto the third cell once the grid drops to
   two columns and knocked the first column out of alignment. */
.abt-rail__item {
  padding: 28px 24px 34px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.abt-rail__item:first-child {
  padding-left: 0;
}

.abt-rail__item:last-child {
  border-right: 0;
}

.abt-rail__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}

.abt-rail__label {
  display: block;
  margin-top: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* =========================================================
   POSITIONING
   ========================================================= */
.abt-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.abt-lede__title {
  margin: 10px 0 26px;
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.08;
  color: var(--color-text);
}

.abt-lede__title em {
  font-style: normal;
  color: var(--color-brand-red);
}

.abt-lede__body p {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.abt-lede__body p:last-child {
  margin-bottom: 0;
}

/* Framed figure with an offset accent plate behind it */
.abt-figure {
  position: relative;
  align-self: stretch;
  min-height: 320px;
}

.abt-figure__plate {
  position: absolute;
  inset: 22px -18px -18px 22px;
  border-radius: 22px;
  border: 1px solid var(--color-brand-red);
  opacity: 0.42;
}

.abt-figure__frame {
  position: relative;
  height: 100%;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.abt-figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-figure__badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(8, 9, 10, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.abt-figure__badge-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.abt-figure__badge-label {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   MISSION / VISION / VALUES
   ========================================================= */
.abt-mvv {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 4vw, 52px);
  border-radius: 28px;
  background: #0C0D0F;
}

.abt-mvv__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 80% at 70% 10%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 70% 10%, #000 10%, transparent 75%);
}

.abt-mvv__inner {
  position: relative;
  z-index: 2;
}

.abt-mvv__tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 32px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Scoped past the generic .tab-btn rules further down this file, which
   otherwise repaint the active pill's label red on a red background. */
.abt-mvv__tabs .abt-mvv__tab {
  padding: 9px 22px;
  margin: 0;
  border: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease;
}

.abt-mvv__tabs .abt-mvv__tab:hover {
  color: #fff;
}

.abt-mvv__tabs .abt-mvv__tab.is-active {
  background: var(--color-brand-red);
  color: #fff;
  border-bottom-color: transparent;
  box-shadow: 0 6px 20px -6px rgba(215, 35, 35, 0.7);
}

.abt-mvv__tabs .abt-mvv__tab:focus-visible {
  outline: 2px solid #FF5A5A;
  outline-offset: 2px;
}

.abt-mvv__pane {
  display: none;
}

.abt-mvv__pane.is-active {
  display: block;
  animation: abtFade 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* No-JS fallback: if nothing has been activated, show the first pane so the
   section is never empty. Browsers without :has() get the previous behaviour. */
.abt-mvv__panes:not(:has(> .abt-mvv__pane.is-active)) > .abt-mvv__pane:first-child {
  display: block;
}

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

.abt-mvv__pane-title {
  margin: 0 0 18px;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.abt-mvv__pane p {
  max-width: 72ch;
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
}

.abt-mvv__pane p:last-child {
  margin-bottom: 0;
}

.abt-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  overflow: hidden;
}

/* Hairline dividers come from the 2px grid gap showing through */
.abt-value {
  padding: 26px 24px;
  background: #0C0D0F;
  transition: background 280ms ease;
}

.abt-value:hover {
  background: #131518;
}

.abt-value__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FF5A5A;
}

.abt-value__title {
  margin: 0 0 9px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #fff;
}

.abt-value__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   TIMELINE
   ========================================================= */
.abt-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Centre rail */
.abt-tl::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    var(--color-border) 8%,
    var(--color-border) 92%,
    transparent 100%);
}

.abt-tl__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
}

/* Both children are pinned to row 1. Without this, an explicitly placed
   card in column 3 advances the auto-placement cursor and the node drops
   to a second row. */
.abt-tl__item--left .abt-tl__card  { grid-column: 1; grid-row: 1; text-align: right; }
.abt-tl__item--right .abt-tl__card { grid-column: 3; grid-row: 1; }

.abt-tl__node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: border-color 320ms ease, color 320ms ease,
              background 320ms ease, box-shadow 320ms ease;
}

.abt-tl__item:hover .abt-tl__node {
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(215, 35, 35, 0.12);
}

.abt-tl__card {
  padding: 24px 26px;
  border-radius: 18px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 360ms ease, border-color 280ms ease;
}

.abt-tl__item:hover .abt-tl__card {
  transform: translateY(-4px);
  border-color: var(--color-brand-red);
  box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.4);
}

.abt-tl__year {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-brand-red);
}

.abt-tl__title {
  margin: 0 0 9px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.abt-tl__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .abt-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Two columns: odd cells start the row, even cells close it. */
  .abt-rail__item {
    padding: 22px 18px 24px 18px;
  }
  .abt-rail__item:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .abt-rail__item:nth-child(even) {
    border-right: 0;
  }
  .abt-rail__item:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .abt-lede {
    grid-template-columns: minmax(0, 1fr);
  }
  .abt-figure {
    min-height: 280px;
  }
  .abt-figure__plate {
    inset: 16px -12px -12px 16px;
  }

  /* Timeline collapses to a single left-hand rail */
  .abt-tl::before {
    left: 26px;
  }
  .abt-tl__item,
  .abt-tl__item--left,
  .abt-tl__item--right {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .abt-tl__node {
    grid-column: 1;
  }
  .abt-tl__item--left .abt-tl__card,
  .abt-tl__item--right .abt-tl__card {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .abt-hero__title-main {
    font-size: clamp(2.25rem, 12vw, 3rem);
  }
  .abt-mvv {
    padding: 26px 20px;
    border-radius: 22px;
  }
  .abt-mvv__tabs {
    display: flex;
    width: 100%;
  }
  .abt-mvv__tabs .abt-mvv__tab {
    flex: 1;
    padding: 9px 12px;
    font-size: 0.8125rem;
  }
  .abt-tl__card {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abt-hero__sweep::after,
  .abt-hero__eyebrow-dot {
    animation: none;
  }
  .abt-mvv__pane.is-active {
    animation: none;
  }
  .abt-tl__card,
  .abt-tl__node,
  .abt-value {
    transition: none;
  }
  .abt-tl__item:hover .abt-tl__card {
    transform: none;
  }
}

/* =========================================================
   WORKS STATS BAND
   ========================================================= */
.works-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  text-align: center;
}

@media (max-width: 640px) {
  .works-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* =========================================================
   ABOUT SUB-PAGE LAYOUTS
   All three were inline grids with no breakpoint, so they stayed
   multi-column on phones and forced a horizontal scroll.
   ========================================================= */
.lead-profile {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.awards-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 40px);
  align-items: center;
}

.awards-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 860px) {
  .lead-profile,
  .awards-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   NEWS GRID
   minmax(0, 1fr) rather than 1fr: the default auto floor let the
   featured card's content push the tracks wider than the viewport.
   ========================================================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
}

.news-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
}

@media (max-width: 860px) {
  .news-grid,
  .news-featured {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .news-featured {
    padding: var(--space-6);
  }
}

/* =========================================================
   JOB DETAIL LAYOUT
   Was an inline two-column grid, which no media query could override,
   so the sidebar sat off-screen on phones.
   ========================================================= */
.job-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 48px);
  align-items: start;
}

@media (max-width: 900px) {
  .job-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   DARK DETAIL HERO (gallery album + case study)
   ========================================================= */
:root {
  /* How far the case-study cover rides up into the hero band */
  --cs-cover-lift: clamp(40px, 8vw, 120px);
  /* Breathing room kept between the hero subtitle and the cover */
  --cs-cover-clearance: clamp(24px, 3vw, 44px);
}

.dt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #08090A;
  padding: calc(72px + clamp(34px, 5vw, 60px)) 0 clamp(40px, 5vw, 64px);
}

/* Taller band when a cover overlaps it. Only the case study opts in;
   the gallery album hero keeps its normal height. */
.dt-hero--with-cover {
  padding-bottom: calc(var(--cs-cover-lift) + var(--cs-cover-clearance));
}

.dt-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 20%, transparent 78%);
}

.dt-hero__bloom {
  position: absolute;
  z-index: 0;
  top: -30%;
  right: -6%;
  width: min(680px, 70vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(215, 35, 35, 0.26) 0%, rgba(215, 35, 35, 0.08) 36%, transparent 68%);
}

/* Cover photo bleeding behind the case-study hero */
.dt-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
}

.dt-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two passes: a vertical fade into the page plus a horizontal one so any
   type baked into the cover photo cannot compete with the headline. */
.dt-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #08090A 0%, rgba(8, 9, 10, 0.86) 34%, rgba(8, 9, 10, 0.35) 72%, transparent 100%),
    linear-gradient(180deg, rgba(8, 9, 10, 0.6) 0%, rgba(8, 9, 10, 0.85) 60%, #08090A 100%);
}

.dt-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.dt-hero .breadcrumb { margin-bottom: 26px; }
.dt-hero .breadcrumb__item a { color: rgba(255, 255, 255, 0.55); }
.dt-hero .breadcrumb__item a:hover { color: #fff; }
.dt-hero .breadcrumb__item.is-current { color: rgba(255, 255, 255, 0.85); }
.dt-hero .breadcrumb__sep { background: rgba(255, 255, 255, 0.28); }

.dt-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.dt-chip--accent {
  color: #fff;
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
}

.dt-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.dt-hero__title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.03;
  color: #fff;
  text-wrap: balance;
}

.dt-hero__sub {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.64);
}

/* =========================================================
   GALLERY ALBUM
   ========================================================= */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 176px;
  grid-auto-flow: dense;
  gap: 12px;
}

/* A repeating 6-tile rhythm keeps the wall from reading as a plain grid */
.gal-tile:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gal-tile:nth-child(6n + 4) { grid-column: span 2; }

.gal-tile {
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--color-surface-2);
  cursor: zoom-in;
  isolation: isolate;
}

.gal-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gal-tile:hover img,
.gal-tile:focus-visible img {
  transform: scale(1.055);
}

.gal-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  transition: opacity 320ms ease;
}

.gal-tile:hover::after,
.gal-tile:focus-visible::after {
  opacity: 1;
}

.gal-tile:focus-visible {
  outline: 2px solid var(--color-brand-red);
  outline-offset: 3px;
}

.gal-tile__caption {
  position: absolute;
  left: 14px;
  right: 46px;
  bottom: 12px;
  z-index: 2;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gal-tile:hover .gal-tile__caption,
.gal-tile:focus-visible .gal-tile__caption {
  opacity: 1;
  transform: translateY(0);
}

.gal-tile__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #0A0A0A;
  background: #fff;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gal-tile:hover .gal-tile__zoom,
.gal-tile:focus-visible .gal-tile__zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Lightbox ────────────────────────────────────────────── */
.gal-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  background: rgba(6, 7, 8, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.gal-lb.is-open {
  display: flex;
  animation: galLbIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes galLbIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gal-lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  flex-shrink: 0;
}

.gal-lb__counter {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.gal-lb__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.gal-lb__btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.gal-lb__btn:focus-visible {
  outline: 2px solid #FF5A5A;
  outline-offset: 2px;
}

/* Flex rather than grid: max-height:100% on a centred grid item does not
   resolve against the track, so the photo rendered at natural size and
   spilled over the thumbnail rail. */
.gal-lb__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 clamp(12px, 6vw, 80px);
}

.gal-lb__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}

.gal-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
}

.gal-lb__nav--prev { left: clamp(8px, 2vw, 26px); }
.gal-lb__nav--next { right: clamp(8px, 2vw, 26px); }

.gal-lb__foot {
  flex-shrink: 0;
  padding: 14px 20px 20px;
  text-align: center;
}

.gal-lb__caption {
  max-width: 70ch;
  margin: 0 auto 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  min-height: 1.4em;
}

/* Thumbnail rail */
.gal-lb__rail {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gal-lb__thumb {
  flex-shrink: 0;
  width: 62px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 200ms ease, border-color 200ms ease;
}

.gal-lb__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gal-lb__thumb:hover { opacity: 0.8; }

.gal-lb__thumb.is-active {
  opacity: 1;
  border-color: var(--color-brand-red);
}

.gal-lb__thumb:focus-visible {
  outline: 2px solid #FF5A5A;
  outline-offset: 2px;
}

/* =========================================================
   CASE STUDY
   ========================================================= */
.cs-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px;
  margin: 0 0 clamp(36px, 4vw, 52px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.cs-result {
  padding: 26px 22px;
  background: var(--color-surface-0);
  text-align: center;
}

.cs-result__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-brand-red);
}

.cs-result__label {
  display: block;
  margin-top: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Cover image between hero and body. Pulled up so it overlaps the hero's
   bottom edge, which stops the page reading as two stacked blocks. */
/* The cover's lift and the hero's extra bottom padding come from the same
   variable, so the dark band always extends far enough for the overlap to
   look deliberate, and the gap below the subtitle stays constant. */
.cs-cover {
  position: relative;
  margin: calc(var(--cs-cover-lift) * -1) 0 clamp(36px, 4vw, 56px);
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-radius: 22px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.22);
}

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

@media (max-width: 720px) {
  .cs-cover {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }
}

/* Pull quote */
.cs-quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(36px, 4vw, 56px) 0;
  padding: clamp(30px, 4vw, 44px);
  border-radius: 22px;
  background: #0C0D0F;
}

.cs-quote__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 80% 80% at 85% 0%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 85% 0%, #000 5%, transparent 72%);
}

.cs-quote__mark {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 14px;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 0.6;
  color: var(--color-brand-red);
}

.cs-quote__text {
  position: relative;
  z-index: 2;
  margin: 0 0 26px;
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  line-height: 1.55;
  letter-spacing: -0.018em;
  color: #fff;
}

.cs-quote__author {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
}

.cs-quote__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #fff;
  background: var(--color-brand-red);
}

.cs-quote__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
}

.cs-quote__role {
  display: block;
  margin-top: 1px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Related cards */
.cs-related-card {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 340ms ease, border-color 260ms ease;
}

.cs-related-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-brand-red);
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.34);
}

.cs-related-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--color-surface-2);
  color: var(--color-border);
}

.cs-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-related-card:hover .cs-related-card__media img {
  transform: scale(1.05);
}

.cs-related-card__body { padding: 15px 16px 17px; }

.cs-related-card__client {
  margin: 0 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cs-related-card__title {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .gal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 160px;
  }
}

@media (max-width: 720px) {
  .gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
    gap: 9px;
  }
  /* Keep only the hero tile oversized so small screens stay legible */
  .gal-tile:nth-child(6n + 4) { grid-column: span 1; }
  .gal-lb__thumb { width: 52px; height: 38px; }
}

@media (max-width: 440px) {
  .gal-tile:nth-child(6n + 1) { grid-column: span 2; grid-row: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gal-tile img,
  .gal-tile::after,
  .gal-tile__caption,
  .gal-tile__zoom,
  .cs-related-card,
  .cs-related-card__media img,
  .gal-lb__btn {
    transition: none;
  }
  .gal-tile:hover img,
  .cs-related-card:hover,
  .cs-related-card:hover .cs-related-card__media img {
    transform: none;
  }
  .gal-lb.is-open { animation: none; }
}

/* =========================================================
   TEAM CARDS
   ========================================================= */
.card-team {
  text-align: center;
}

.card-team__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--space-4);
  background: var(--color-surface-2);
  border: 3px solid var(--color-border);
}

.card-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-team__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}

.card-team__title {
  font-size: 0.875rem;
  color: var(--color-brand-red);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.card-team__bio {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* =========================================================
   TABS
   ========================================================= */
.tabs {
  border-bottom: 2px solid var(--color-border);
  display: flex;
  gap: 0;
  margin-bottom: var(--space-7);
}

.tab-btn {
  padding: var(--space-4) var(--space-6);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab-btn:hover {
  color: var(--color-text-primary);
}

.tab-btn.is-active {
  color: var(--color-brand-red);
  border-bottom-color: var(--color-brand-red);
}

.tab-pane {
  display: none;
}

.tab-pane.is-active {
  display: block;
}

/* =========================================================
   TIMELINE
   ========================================================= */
/* JOURNEY TIMELINE */
.jt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: var(--space-8) var(--space-5);
  padding: var(--space-2) 0 var(--space-4);
}

.jt::before {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--color-border) 5%, var(--color-border) 95%, transparent);
  pointer-events: none;
}

.jt__spacer { /* empty grid cell, intentional */ }

.jt__node {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  position: relative;
  z-index: 1;
}

.jt__node span {
  width: 48px;
  height: 48px;
  background: var(--color-brand-red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 0 0 4px var(--color-surface-0), 0 0 0 8px rgba(215, 35, 35, 0.18);
  flex-shrink: 0;
}

.jt__card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.jt__card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.jt__card--left { text-align: right; }

.jt__year {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-brand-red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.jt__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.jt__body {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 768px) {
  .jt {
    grid-template-columns: 40px 1fr;
    grid-auto-flow: dense;
    gap: var(--space-6) var(--space-4);
  }
  .jt::before { left: 19px; }
  .jt__spacer { display: none; }
  .jt__node { grid-column: 1; padding-top: 14px; justify-content: flex-start; }
  .jt__node span { width: 40px; height: 40px; font-size: 0.7rem; }
  .jt__card { grid-column: 2; text-align: left; }
}

/* =========================================================
   VALUES / MISSION TABS
   ========================================================= */
/* MVV — Mission / Vision / Values */
.mvv {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.mvv__tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
}

.mvv__tab {
  flex: 1;
  padding: 10px var(--space-4);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
}

.mvv__tab:hover { color: var(--color-text-primary); }

.mvv__tab.is-active {
  color: var(--color-brand-red);
  background: var(--color-surface-0);
  border-color: var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.mvv__pane { display: none; }
.mvv__pane.is-active { display: block; }

.mvv__text-pane {
  padding: var(--space-7) var(--space-8);
}

.mvv__pane-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.mvv__text-pane p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.mvv__text-pane p:last-child { margin-bottom: 0; }

.mvv__values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
}

.mvv__value {
  background: var(--color-surface-0);
  padding: var(--space-6) var(--space-7);
}

.mvv__value-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-brand-red);
  display: block;
  margin-bottom: var(--space-2);
}

.mvv__value-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.mvv__value-body {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 600px) {
  .mvv__tabs { padding: var(--space-3); gap: var(--space-1); }
  .mvv__tab { font-size: 0.8125rem; padding: 8px var(--space-3); }
  .mvv__text-pane { padding: var(--space-5); }
  .mvv__values-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   CAREERS
   ========================================================= */
.card-career {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card-career:hover {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px var(--color-brand-red-light);
}

.card-career__left {
  flex: 1;
}

.card-career__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.card-career__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card-career__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.card-career__meta-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-text-muted);
  fill: none;
}

@media (max-width: 640px) {
  .card-career { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   404 / ERROR PAGES
   ========================================================= */
.error-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-5);
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: clamp(6rem, 15vw, 10rem);
  font-weight: 500;
  color: var(--color-surface-3);
  line-height: 1;
  margin-bottom: var(--space-5);
}

.error-page__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.error-page__body {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0 auto var(--space-7);
  line-height: 1.7;
}

/* =========================================================
   SEARCH
   ========================================================= */
.search-bar {
  position: relative;
}

.search-bar__input {
  width: 100%;
  padding: 16px 56px 16px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-surface-0);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-bar__input:focus {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px var(--color-brand-red-light);
  outline: none;
}

.search-bar__btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: var(--color-brand-red);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast);
}

.search-bar__btn:hover { background: var(--color-brand-red-dark); }

.search-bar__btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-9);
}

.pagination__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
  border: 1px solid var(--color-border);
}

.pagination__btn:hover,
.pagination__btn.is-active {
  background: var(--color-brand-red);
  color: #fff;
  border-color: var(--color-brand-red);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-enter), transform var(--transition-enter);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll[data-delay="100"] { transition-delay: 100ms; }
.animate-on-scroll[data-delay="150"] { transition-delay: 150ms; }
.animate-on-scroll[data-delay="200"] { transition-delay: 200ms; }
.animate-on-scroll[data-delay="250"] { transition-delay: 250ms; }
.animate-on-scroll[data-delay="300"] { transition-delay: 300ms; }
.animate-on-scroll[data-delay="400"] { transition-delay: 400ms; }
.animate-on-scroll[data-delay="500"] { transition-delay: 500ms; }

/* =========================================================
   UTILITIES
   ========================================================= */
.text-red    { color: var(--color-brand-red); }
.text-muted  { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-mono   { font-family: var(--font-mono); }
.font-serif  { font-family: var(--font-serif); }
.fw-600      { font-weight: 600; }
.fw-700      { font-weight: 700; }
.fw-800      { font-weight: 800; }

.bg-surface-0 { background: var(--color-surface-0); }
.bg-surface-1 { background: var(--color-surface-1); }
.bg-surface-2 { background: var(--color-surface-2); }
.bg-red       { background: var(--color-brand-red); }

.hidden  { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mt-auto { margin-top: auto; }

/* Divider */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
}

/* Rich text content */
.prose h2 { margin: var(--space-8) 0 var(--space-4); }
.prose h3 { margin: var(--space-6) 0 var(--space-3); }
.prose p  { margin-bottom: var(--space-5); color: var(--color-text-secondary); line-height: 1.75; }
.prose ul, .prose ol { margin-bottom: var(--space-5); padding-left: var(--space-6); }
.prose ul li, .prose ol li { margin-bottom: var(--space-2); color: var(--color-text-secondary); line-height: 1.7; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose strong { font-weight: 700; color: var(--color-text-primary); }
.prose a { color: var(--color-brand-red); text-decoration: underline; }
.prose blockquote {
  border-left: 3px solid var(--color-brand-red);
  padding: var(--space-4) var(--space-6);
  background: var(--color-brand-red-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-6) 0;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  line-height: 1.65;
}

/* Alert / notification */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.alert--success {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  color: #166534;
}

.alert--error {
  background: var(--color-brand-red-light);
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* WhatsApp float button */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-7);
  right: var(--space-7);
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 500;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

@media (max-width: 768px) {
  .whatsapp-float { bottom: var(--space-5); right: var(--space-5); }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .site-header, .site-footer, .whatsapp-float { display: none; }
  body { font-size: 12pt; }
}