/* ==========================================================================
   SAS Freight — Premium Design System
   Deep Navy / Freight Blue / Action Blue / Amber accent — Premium B2B
   logistics, mobile-first, custom-built (no framework, no external fonts).

   Visual direction inspired by premium 2026 logistics/freight landing
   page conventions (bold hero typography, route/grid motifs, card-based
   trust signals) — this is an original, custom-built stylesheet, not a
   copy of any theme or template.

   Breakpoints used throughout (mobile-first, min-width):
     480px  — large phones
     768px  — tablets
     1024px — laptops
     1280px — desktops
     1440px — wide screens
   (max-width breakpoints are used only for the handful of "collapse below
   this" rules — header nav, form rows, footer grid.)
   ========================================================================== */

:root {
  /* Brand color system */
  --color-navy: #071a2d;          /* Deep Navy — primary dark surface */
  --color-navy-dark: #04111c;     /* deepest gradient end */
  --color-blue: #0e4c92;          /* Freight Blue — primary brand blue */
  --color-blue-light: #1d8cff;    /* Electric/Action Blue — links, focus, accents */
  --color-steel: #6c7a89;         /* Steel Grey — secondary text/icons */
  --color-steel-light: #f4f7fb;   /* Soft Surface — alt section backgrounds */
  --color-accent: #ff8a00;        /* Amber — CTA highlight, used sparingly */
  --color-accent-dark: #e67700;
  --color-white: #ffffff;
  --color-ink: #15212f;
  --color-muted: #4d5e72;
  --color-border: #dde6f0;
  --color-success: #1b8a5a;       /* status/WhatsApp only — not brand */
  --color-success-bg: #e6f6ee;
  --color-success-border: #b9e6cf;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f3c2bd;
  --color-warning-bg: #fff8e1;

  /* Gradient tokens */
  --gradient-hero: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-blue) 100%);
  --gradient-surface: radial-gradient(circle at 100% 0%, rgba(14, 76, 146, 0.06), transparent 60%);

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.65;
  --line-height-tight: 1.18;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(7, 26, 45, 0.08);
  --shadow-md: 0 8px 24px rgba(7, 26, 45, 0.10);
  --shadow-lg: 0 20px 48px rgba(7, 26, 45, 0.16);
  --shadow-glow: 0 0 0 1px rgba(29, 140, 255, 0.18), 0 8px 24px rgba(14, 76, 146, 0.18);

  /* Layout */
  --container-width: 1200px;
  --container-width-wide: 1360px;

  /* Motion */
  --transition-fast: 140ms ease;
  --transition-base: 220ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 50;
  --z-header: 500;
  --z-overlay: 900;
  --z-skip-link: 1000;
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                            */
/* ---------------------------------------------------------------------- */

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: var(--line-height-base);
  font-size: var(--font-size-base);
}

img, svg { max-width: 100%; height: auto; display: block; }
img { color: transparent; }

a { color: var(--color-blue-light); text-decoration: none; }
a:hover { text-decoration: underline; }
a:not([class]) { text-underline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-navy);
  line-height: var(--line-height-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; }

p { margin: 0 0 1em; color: var(--color-muted); }

ul, ol { padding-left: 1.25em; }
address { font-style: normal; } /* browsers italicize <address> by default — reset for a premium, non-italic look */

/* ---------------------------------------------------------------------- */
/* Layout                                                                   */
/* ---------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container--wide { max-width: var(--container-width-wide); }

.section { padding: var(--space-16) 0; }
.section--tight { padding: var(--space-8) 0; }
.section--alt { background: var(--color-steel-light); }

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .section { padding: var(--space-10) 0; }
}

/* Utility classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.justify-center { justify-content: center; }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-1); }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-6); }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 760px; }

.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;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  z-index: var(--z-skip-link);
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
  background: var(--color-white);
  color: var(--color-navy);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

/* Section header — eyebrow + heading + optional intro, used to open most
   major sections with a consistent premium rhythm. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
  background: rgba(14, 76, 146, 0.08);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.hero .eyebrow, .service-hero .eyebrow {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.12);
}

.section-header { max-width: 720px; margin: 0 0 var(--space-10); }
.section-header--center { margin-inline: auto; text-align: center; }

/* ---------------------------------------------------------------------- */
/* Buttons — minimum 44px comfortable tap target throughout                */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.7em 1.6em;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--gradient-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: var(--color-blue); box-shadow: var(--shadow-lg); }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-navy);
  box-shadow: 0 8px 20px rgba(255, 138, 0, 0.32);
}
.btn--accent:hover { background: var(--color-accent-dark); }

/* Default outline is for use on dark/navy backgrounds (hero, footer). */
.btn--outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-white); }

/* Use on light/white backgrounds instead of repeating an inline style. */
.btn--outline-light {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.btn--outline-light:hover { background: var(--color-steel-light); }

.btn--whatsapp {
  background: var(--color-success);
  color: var(--color-white);
}
.btn--whatsapp:hover { background: #156e48; }

.btn--sm { min-height: 38px; padding: 0.5em 1.1em; font-size: 0.85rem; }

.btn--block { display: flex; width: 100%; margin-top: 1em; }

.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------------- */
/* Header / Navigation                                                     */
/* ---------------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-white); box-shadow: var(--shadow-sm); }

.topbar { background: var(--color-navy); color: var(--color-white); font-size: 0.85rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; flex-wrap: wrap; gap: var(--space-2); }
.topbar__contact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.topbar__contact a { color: var(--color-white); opacity: 0.92; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; transition: opacity var(--transition-fast); }
.topbar__contact a:hover, .topbar__contact a:focus-visible { opacity: 1; text-decoration: none; }
.topbar__trust { opacity: 0.85; font-weight: 600; letter-spacing: 0.02em; }

@media (max-width: 700px) {
  .topbar__trust { display: none; }
}

.navbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); gap: var(--space-4); }
.navbar__logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-navy);
  padding: var(--space-2) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: -0.02em;
}
.navbar__logo::before {
  content: '';
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--gradient-accent);
  flex-shrink: 0;
  /* simple custom mark — two crossing "route" bars, CSS-only, no image asset */
  background-image:
    linear-gradient(135deg, transparent 46%, rgba(255,255,255,0.9) 46%, rgba(255,255,255,0.9) 54%, transparent 54%),
    var(--gradient-accent);
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: var(--space-2);
}
.navbar__toggle span { width: 24px; height: 2px; background: var(--color-navy); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); }
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.navbar__nav { display: flex; align-items: center; gap: var(--space-5); flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.nav-list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-item { position: relative; }
.nav-item a {
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.92rem;
  padding: var(--space-2) 2px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
  white-space: nowrap;
}
.nav-item a::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 8px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
  transform-origin: left;
}
.nav-item a:hover, .nav-item a.is-active { color: var(--color-blue); text-decoration: none; }
.nav-item a:hover::after, .nav-item a.is-active::after { transform: scaleX(1); }

.has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  min-width: 240px;
  z-index: var(--z-dropdown);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li a { display: flex; align-items: center; min-height: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); white-space: nowrap; }
.dropdown li a::after { display: none; }
.dropdown li a:hover, .dropdown li a:focus-visible { background: var(--color-steel-light); text-decoration: none; color: var(--color-blue); }
.dropdown li:first-child a { border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-1); padding-bottom: var(--space-2); }

/* Mega-style services dropdown — multi-column so 14 links (12 services +
   All Services + Consulting & Planning) stay reachable without an
   overly tall single-column list. Right-aligned so it never overflows
   past the viewport edge on the right side of the header. */
.has-dropdown .dropdown--mega {
  right: 0;
  left: auto;
  min-width: 660px;
  max-width: calc(100vw - var(--space-6));
  display: none;
  column-count: 2;
  column-gap: var(--space-4);
}
.dropdown--mega li a { font-size: 0.9rem; }
.has-dropdown:hover .dropdown--mega,
.has-dropdown:focus-within .dropdown--mega { display: block; }
.dropdown--mega li { break-inside: avoid; }
.dropdown--mega .dropdown__all {
  column-span: all;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-2);
}
.dropdown--mega .dropdown__all a { border-bottom: none; }

.navbar__cta { display: flex; gap: var(--space-3); }
.navbar__cta .btn--outline { border-color: var(--color-blue); color: var(--color-blue); }
.navbar__cta .btn--outline:hover { background: var(--color-steel-light); }

@media (max-width: 900px) {
  .navbar__toggle { display: flex; }
  .navbar__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    background: var(--color-white);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-md);
    z-index: var(--z-overlay);
  }
  .navbar__nav.is-open { display: flex; }
  .nav-list { flex-direction: column; gap: 2px; }
  .nav-item a::after { display: none; }
  .has-dropdown .dropdown { display: block; position: static; box-shadow: none; border: none; padding-left: var(--space-4); margin-top: 2px; }
  .has-dropdown .dropdown--mega { column-count: 1; min-width: 0; max-width: none; right: auto; }
  .dropdown--mega .dropdown__all { column-span: none; }
  .navbar__cta { flex-direction: column; margin-top: var(--space-3); }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: var(--space-20) 0;
  overflow: hidden;
  isolation: isolate;
}
/* Subtle route/grid motif — CSS-only, no image asset, kept low-contrast
   so it never competes with the heading or CTAs. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(29, 140, 255, 0.10) 40.5%, rgba(29, 140, 255, 0.10) 41%, transparent 41.5%),
    linear-gradient(115deg, transparent 60%, rgba(255, 255, 255, 0.05) 60.5%, rgba(255, 255, 255, 0.05) 61%, transparent 61.5%),
    radial-gradient(circle at 85% 20%, rgba(29, 140, 255, 0.22), transparent 55%);
  background-size: cover;
}
.hero h1 { color: var(--color-white); }
.hero p { color: rgba(255, 255, 255, 0.88); max-width: 640px; font-size: 1.1rem; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 480px) {
  .hero { padding: var(--space-12) 0; }
}

/* Inner-page hero — shorter, used on service pages and form pages. */
.hero--inner { padding: var(--space-12) 0 var(--space-10); }

/* CSS-only "logistics visual" panel — a stacked card composition evoking
   a shipment tracking/route panel, with no external image dependency. */
.visual-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  backdrop-filter: blur(2px);
}
.visual-panel__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.65); margin-bottom: var(--space-4); font-weight: 700; }
.visual-panel__route { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.visual-panel__route .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.visual-panel__route .dot--end { background: var(--color-blue-light); }
.visual-panel__route .line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 6px, transparent 6px 12px); }
.visual-panel__route span { font-size: 0.82rem; color: rgba(255,255,255,0.85); font-weight: 600; white-space: nowrap; }
.visual-panel__card {
  background: rgba(255, 255, 255, 0.97);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-shadow: var(--shadow-md);
}
.visual-panel__card:last-child { margin-bottom: 0; }
.visual-panel__card-label { font-size: 0.82rem; color: var(--color-muted); font-weight: 600; }
.visual-panel__card-value { font-size: 1rem; font-weight: 800; color: var(--color-navy); }
.visual-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-bg);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.visual-panel__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }

.breadcrumbs { font-size: 0.85rem; color: var(--color-muted); padding: var(--space-3) 0; }
.breadcrumbs a { color: var(--color-muted); }

/* ---------------------------------------------------------------------- */
/* Cards / grids                                                            */
/* ---------------------------------------------------------------------- */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.card-grid--split { grid-template-columns: 1.3fr 1fr; align-items: center; }
@media (max-width: 768px) {
  .card-grid--split { grid-template-columns: 1fr; }
}
.card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card h3 { margin-top: 0; }

/* Inside a grid, cards in the same row stretch to equal height by
   default (CSS grid behavior) — make each card a column flex container
   so its trailing CTA row sticks to the bottom uniformly, instead of
   floating at different heights depending on how much text the card
   above it has. Harmless on cards with no .btn-row (most cards). */
.card-grid > .card { display: flex; flex-direction: column; }
.card-grid > .card > .btn-row:last-child { margin-top: auto; padding-top: var(--space-3); }

/* Service/feature cards get a hover lift + top accent line, used wherever
   a card links somewhere (service summaries, related services). */
.card--interactive { overflow: hidden; }
.card--interactive::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(14, 76, 146, 0.25);
}
.card--interactive:hover::before { transform: scaleX(1); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(14, 76, 146, 0.08);
  color: var(--color-blue);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}

.service-block { padding: var(--space-10) 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 90px; }
.service-block:last-child { border-bottom: none; }

.stat-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-block:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-block__number { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; color: var(--color-navy); display: block; line-height: 1; }
.stat-block__label { color: var(--color-muted); margin-top: var(--space-2); margin-bottom: 0; font-size: 0.92rem; }
.stat-block--on-dark { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
.stat-block--on-dark:hover { background: rgba(255, 255, 255, 0.1); }
.stat-block--on-dark .stat-block__number { color: var(--color-white); }
.stat-block--on-dark .stat-block__label { color: rgba(255, 255, 255, 0.8); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); }

/* Trust strip — compact horizontal row of small stats, used right under a hero. */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.trust-strip__item { display: flex; flex-direction: column; }
.trust-strip__number { font-size: 1.5rem; font-weight: 800; color: var(--color-white); }
.trust-strip__label { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------------- */
/* CTA band — wide, high-contrast strip used before the footer or between
   major sections. */
/* ---------------------------------------------------------------------- */

.cta-band {
  position: relative;
  background: var(--gradient-hero);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 15% 85%, rgba(255, 138, 0, 0.18), transparent 55%),
              radial-gradient(circle at 85% 15%, rgba(29, 140, 255, 0.22), transparent 55%);
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 600px) {
  .cta-band { padding: var(--space-10) var(--space-5); border-radius: var(--radius-lg); }
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                    */
/* ---------------------------------------------------------------------- */

.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
}

.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-8);
}
.form-fieldset legend {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-navy);
  padding: 0;
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-steel-light);
  padding-bottom: var(--space-3);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.form-fieldset legend::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.form-group { margin-bottom: var(--space-5); }
.form-group label { display: block; font-weight: 600; margin-bottom: var(--space-2); font-size: 0.9rem; color: var(--color-navy); }
.form-group .hint { font-size: 0.8rem; color: var(--color-muted); margin-top: var(--space-1); margin-bottom: 0; }
.hint { font-size: 0.8rem; color: var(--color-muted); }
.hint--tight { margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-4); }
.hint--after { margin-top: var(--space-2); }
.required-marker { color: var(--color-danger); }

.form-control {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea.form-control { min-height: 88px; }
.form-control:focus { outline: none; border-color: var(--color-blue-light); box-shadow: 0 0 0 4px rgba(29, 140, 255, 0.15); }
.form-control:focus-visible { outline: 2px solid var(--color-blue-light); outline-offset: 1px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-honeypot { position: absolute; left: -9999px; top: -9999px; }

.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5); font-size: 0.92rem; }
.alert--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.alert--error { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }

/* Callout — used for the "Prefer WhatsApp?" prompt above forms. */
.callout {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-white);
  font-size: 1.1rem;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .callout { flex-direction: column; align-items: flex-start; }
}

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

.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-item:hover { border-color: rgba(14, 76, 146, 0.2); box-shadow: var(--shadow-sm); }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--color-white);
  background: var(--color-blue);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform var(--transition-base), background-color var(--transition-base);
}
.faq-item[open] summary::after { content: '\2212'; background: var(--color-accent); }
.faq-item p { margin-top: var(--space-3); margin-bottom: 0; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-blue-light); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------------- */
/* Misc content blocks                                                     */
/* ---------------------------------------------------------------------- */

.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-8);
  background: var(--color-white);
  padding: var(--space-3) 0;
  z-index: var(--z-base);
}

@media (min-width: 901px) {
  .anchor-nav { position: sticky; top: 96px; }
}
.anchor-nav a {
  background: var(--color-steel-light);
  color: var(--color-navy);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.anchor-nav a:hover, .anchor-nav a:focus-visible { background: var(--color-blue); color: var(--color-white); text-decoration: none; transform: translateY(-1px); }

@media (max-width: 600px) {
  .anchor-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .anchor-nav a { flex-shrink: 0; }
}

.feature-list { padding-left: 0; margin: 0 0 var(--space-4); list-style: none; }
.feature-list li {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  padding-left: var(--space-6);
  position: relative;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--gradient-accent);
}

.best-for { background: var(--color-steel-light); border-radius: var(--radius-md); padding: var(--space-4); font-size: 0.92rem; margin-bottom: var(--space-4); border-left: 3px solid var(--color-accent); }
.best-for strong { color: var(--color-navy); }

.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); counter-reset: step; position: relative; }
.process-step {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.process-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--color-white);
  font-weight: 800;
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-glow);
}

.region-card h3 { margin-bottom: var(--space-2); }
.region-card p { color: var(--color-ink); font-size: 0.92rem; }

.timeline { display: flex; flex-direction: column; gap: var(--space-4); }
.timeline-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border-left: 3px solid var(--color-accent);
}
.timeline-year { flex: 0 0 110px; font-weight: 800; color: var(--color-blue); }
.timeline-item h3 { margin-bottom: var(--space-1); }
.timeline-item p { margin-bottom: 0; }

@media (max-width: 480px) {
  .timeline-item { flex-direction: column; gap: var(--space-1); }
  .timeline-year { flex-basis: auto; }
}

.contact-person-card h3 { margin-bottom: var(--space-1); }
.contact-person-card .role { color: var(--color-muted); font-size: 0.85rem; margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */

.footer-cta {
  background: var(--color-navy);
  padding: var(--space-12) 0 0;
}

.site-footer { background: var(--color-navy); color: rgba(255, 255, 255, 0.85); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: var(--space-8); padding: var(--space-12) var(--space-5); }
.footer__col h3, .footer__col h4 { color: var(--color-white); }
.footer__col p { color: rgba(255, 255, 255, 0.75); }
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin-bottom: var(--space-2); }
.footer__links a, .footer__about a, address a {
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition: color var(--transition-fast);
}
.footer__links a:hover, address a:hover { color: var(--color-accent); }
.trust-badges { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.trust-badges li { background: rgba(255, 255, 255, 0.1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer__bottom-inner { display: flex; justify-content: space-between; padding: var(--space-4) var(--space-5); flex-wrap: wrap; gap: var(--space-2); font-size: 0.85rem; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------------------------------------------------------------------- */
/* Admin (internal tooling — functional, not a marketing surface)          */
/* ---------------------------------------------------------------------- */

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: var(--space-3); text-align: left; }
.admin-table thead tr { background: var(--color-steel-light); }
.admin-table tbody tr { border-bottom: 1px solid var(--color-border); }
.admin-table tr.tr--duplicate { background: var(--color-warning-bg); }

.admin-shell { padding-top: var(--space-10); padding-bottom: var(--space-12); }
.admin-header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.admin-stat-number { font-size: 2rem; color: var(--color-navy); margin-bottom: 0; }
.admin-stat-number--sm { font-size: 1.3rem; }
.admin-pagination a { margin-right: var(--space-2); }
.admin-pagination a.is-current { font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* Accessibility helpers                                                    */
/* ---------------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--color-blue-light); outline-offset: 2px; }

@media (max-width: 360px) {
  html { font-size: 95%; }
}