.elementor-kit-6{--e-global-color-primary:#F48D26;--e-global-color-secondary:#2864A9;--e-global-color-text:#383837;--e-global-color-accent:#1A4169;--e-global-typography-primary-font-family:"archivo";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"ibm plex mono";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"archivo";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"ibm plex mono";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   Safe Traffic Management — Global brand + component CSS
   Paste into  Elementor > Site Settings > Custom CSS
   (or load via the child theme / a code snippet).
   Import-ready for stg-mcdonntest-devstg.kinsta.cloud.
   Fonts: add Archivo + IBM Plex Mono via Elementor > Custom Fonts.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS (colours, spacing, type, fonts) ---------- */
/* ============================================================
   Safe Traffic Management — Colour System
   Brand: #f48d26 (hi-vis orange)  #2864a9 (governance blue)
          #383837 (charcoal)       #f1f2f2 (light grey)
          #fefefe (off-white)
   Orange = action, energy, hi-vis safety.
   Blue   = trust, governance, compliance.
   Charcoal carries text and the "asphalt" weight of the brand.
   ============================================================ */

:root {
  /* ---- Brand orange (primary) ---- */
  --orange-50:  #fef4e9;
  --orange-100: #fde2c6;
  --orange-200: #fac994;
  --orange-300: #f8af62;
  --orange-400: #f69e44;
  --orange-500: #f48d26;  /* brand */
  --orange-600: #db7711;
  --orange-700: #ad5d0c;
  --orange-800: #7d4308;
  --orange-900: #4f2b05;

  /* ---- Governance blue (secondary) ---- */
  --blue-50:  #eaf1f8;
  --blue-100: #c7daed;
  --blue-200: #93b6db;
  --blue-300: #5e8fc7;
  --blue-400: #3d77b5;
  --blue-500: #2864a9;  /* brand */
  --blue-600: #215489;
  --blue-700: #1a4169;
  --blue-800: #122e4a;
  --blue-900: #0b1c2e;

  /* ---- Charcoal / neutral (asphalt) ---- */
  --charcoal: #383837;   /* brand text */
  --neutral-950: #1c1c1b;
  --neutral-900: #262625;
  --neutral-800: #383837;  /* brand */
  --neutral-700: #4d4d4b;
  --neutral-600: #6b6b69;
  --neutral-500: #8a8a87;
  --neutral-400: #aeaeab;
  --neutral-300: #cdcdca;
  --neutral-200: #e2e2e0;
  --neutral-100: #f1f2f2;  /* brand light grey */
  --neutral-50:  #f8f8f7;
  --white: #fefefe;        /* brand off-white */
  --true-white: #ffffff;

  /* ---- Semantic / status (safety domain) ---- */
  --green-500:  #2e8b57;  /* compliant / pass */
  --green-50:   #e7f3ec;
  --green-700:  #1f6a40;
  --amber-500:  #e8a317;  /* caution / pending */
  --amber-50:   #fdf3da;
  --amber-700:  #b07c08;
  --red-500:    #d23b34;  /* non-compliant / incident */
  --red-50:     #fbeae9;
  --red-700:    #a02822;

  /* Hi-vis accent (PPE / signage echo) */
  --hivis-yellow: #f7c948;
  --hivis-orange: #f48d26;

  /* ---- Brand gradients (mirrors the logo road + triangle) ---- */
  --gradient-hivis: linear-gradient(135deg, #f7c948 0%, #f48d26 55%, #db7711 100%); /* @kind color */
  --gradient-blue:  linear-gradient(160deg, #3d92d6 0%, #2864a9 60%, #1a4169 100%); /* @kind color */
  --gradient-asphalt: linear-gradient(180deg, #4d4d4b 0%, #262625 100%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — reach for these, not the raw scales.
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--white);
  --surface-sunken:    var(--neutral-100);
  --surface-card:      var(--true-white);
  --surface-raised:    var(--true-white);
  --surface-inverse:   var(--neutral-800);
  --surface-brand:     var(--orange-500);
  --surface-brand-sub: var(--orange-50);
  --surface-gov:       var(--blue-500);
  --surface-gov-sub:   var(--blue-50);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--charcoal);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-on-brand: var(--neutral-950);   /* dark text on hi-vis orange = max legibility */
  --text-on-gov:   var(--white);
  --text-on-dark:  var(--neutral-100);
  --text-link:     var(--blue-600);

  /* Borders / lines */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand:  var(--orange-500);
  --border-focus:  var(--blue-500);

  /* Status semantics */
  --status-pass-fg:   var(--green-700);
  --status-pass-bg:   var(--green-50);
  --status-pass-bd:   var(--green-500);
  --status-warn-fg:   var(--amber-700);
  --status-warn-bg:   var(--amber-50);
  --status-warn-bd:   var(--amber-500);
  --status-fail-fg:   var(--red-700);
  --status-fail-bg:   var(--red-50);
  --status-fail-bd:   var(--red-500);
  --status-info-fg:   var(--blue-700);
  --status-info-bg:   var(--blue-50);
  --status-info-bd:   var(--blue-500);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--blue-500) 35%, transparent);
}


/* ============================================================
   Safe Traffic Management — Spacing, Radius, Shadow, Borders, Motion
   Squared, structured, infrastructure-grade. Radii stay modest —
   nothing pill-soft except deliberate status chips.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */

  /* Radii — kept tight for a structured, engineered feel */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px;
  --border-thin:     1.5px;
  --border-thick:    2px;
  --border-heavy:    3px;

  /* Shadows — cool, restrained, never coloured */
  --shadow-xs:  0 1px 2px rgba(28, 28, 27, 0.06);
  --shadow-sm:  0 1px 3px rgba(28, 28, 27, 0.08), 0 1px 2px rgba(28, 28, 27, 0.04);
  --shadow-md:  0 4px 12px rgba(28, 28, 27, 0.08), 0 2px 4px rgba(28, 28, 27, 0.05);
  --shadow-lg:  0 12px 28px rgba(28, 28, 27, 0.12), 0 4px 8px rgba(28, 28, 27, 0.06);
  --shadow-xl:  0 24px 48px rgba(28, 28, 27, 0.16);

  /* Focus / hi-vis accent shadow for warning emphasis */
  --shadow-hivis: 0 4px 16px rgba(244, 141, 38, 0.32);

  /* Layout */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --header-h:      72px;

  /* Motion — purposeful, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}


/* ============================================================
   Safe Traffic Management — Typography
   Display + UI : Archivo (grotesque, variable)
   Data / codes : IBM Plex Mono
   Headings lean heavy and tight; running text stays calm.
   ============================================================ */

:root {
  /* Families */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* Type scale (1.250 major-third, 16px base) */
  --text-2xs:  0.6875rem; /* 11px - micro labels */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  3.75rem;   /* 60px */
  --text-5xl:  4.75rem;   /* 76px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.14em;  /* eyebrows / kicker labels — echoes "MANAGEMENT" */

  /* Semantic roles */
  --type-display-stretch: 110%; /* @kind font */
}


/* ============================================================
   Safe Traffic Management — Base element defaults
   Applied on top of the token layer. Keep light: tokens do the work.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Kicker / eyebrow — the brand's signature tracked caps label */
.stm-kicker {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--orange-600);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--orange-200); color: var(--neutral-950); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}


/* ---------- 2. PAGE LAYOUT + COMPONENTS (from the approved mockup) ---------- */

/* ── Layout helpers ── */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); overflow-x: hidden; }
:root { --nav-h: 90px; }
[id] { scroll-margin-top: var(--nav-h); }

/* ── PALETTE LOCK, approved brand colours only ──
   #F48D26 orange · #2864A9 blue · #383837 charcoal · #F1F2F2 grey · #FEFEFE white */
:root {
  --orange-50:  #F1F2F2;
  --orange-400: #F48D26;
  --orange-600: #F48D26;
  --orange-700: #F48D26;
  --blue-50:    #F1F2F2;
  --blue-600:   #2864A9;
  --blue-700:   #2864A9;
  --green-50:   #F1F2F2;
  --green-500:  #2864A9;
  --green-700:  #2864A9;
  --hivis-yellow: #F48D26;
  --text-strong: #383837;
}

/* ── Highlight word inside headings ── */
.hl { color: #F48D26; }
.hl--blue { color: #2864A9; }

/* ── Large content heading (matches section-head h2 scale) ── */
.heading-lg { font-size: clamp(2.25rem, 3.4vw, 2.85rem); line-height: 1.08; letter-spacing: 0.01em; }

/* ── All headings set in uppercase ── */
h1, h2 { text-transform: uppercase; }
img { max-width: 100%; }
.container { max-width: var(--container-xl); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
.section { padding: var(--space-24) 0; }
.section--tight { padding: var(--space-20) 0; }
.section--sunken { background: var(--surface-sunken); }

/* ── Kicker ── */
.kicker { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--orange-600); display: block; margin-bottom: var(--space-3); }
.kicker--onDark { color: var(--orange-400); }
.kicker--blue { color: var(--blue-600); }

/* ── Section header ── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-12); flex-wrap: wrap; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head h2 { font-size: clamp(2.25rem, 3.4vw, 2.85rem); margin: var(--space-2) 0 var(--space-4); line-height: 1.08; letter-spacing: 0.01em; }
.section-head p { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-normal); margin: 0; max-width: 62ch; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-sm); border-radius: var(--radius-md); padding: 11px 20px; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--lg { font-size: var(--text-base); padding: 14px 26px; }
.btn--lg svg { width: 20px; height: 20px; }
.btn--primary { background: #f48d26; color: var(--neutral-950); border-color: #f48d26; }
.btn--primary:hover { background: var(--orange-600); border-color: var(--orange-600); text-decoration: none; }
.btn--secondary { background: var(--neutral-950); color: #fefefe; border-color: var(--neutral-950); }
.btn--secondary:hover { background: var(--neutral-800); text-decoration: none; }
.btn--outline { background: transparent; color: var(--text-strong); border-color: var(--border-default); }
.btn--outline:hover { border-color: var(--border-strong); background: var(--neutral-50); text-decoration: none; }
.btn--outline-white { background: rgba(255,255,255,0.08); color: #fefefe; border-color: rgba(255,255,255,0.42); }
.btn--outline-white:hover { background: rgba(255,255,255,0.14); text-decoration: none; }
.btn--full { width: 100%; justify-content: center; }

/* ── Text link ── */
.textlink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--text-link); text-decoration: none; }
.textlink svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.textlink:hover svg { transform: translateX(3px); }

/* ── Reveal animation ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.reveal.revealed { opacity: 1; transform: none; }

/* ── HEADER: transparent → solid on scroll ── */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }

/* ── TOP STRIP (orange, flush above nav on scroll) ── */
.topstrip { height: 0; background: #F48D26; transition: height 0.3s var(--ease-standard); }
header.header--scrolled .topstrip { height: 6px; }

/* ── NAV CALL LINK ── */
.nav-call { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-md); color: #fefefe; text-decoration: none; white-space: nowrap; padding: 0 var(--space-2); transition: color var(--dur-fast); }
.nav-call svg { width: 18px; height: 18px; color: #f48d26; }
.nav-call:hover { color: #fefefe; text-decoration: none; }
header.header--scrolled .nav-call { color: #383837; }
@media (max-width:1060px){ .nav-call { display: none; } }

/* ── MAIN NAV ── */
.mainnav { background: transparent; border-bottom: 1px solid transparent; box-shadow: none; transition: background 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease; }
.mainnav__inner { max-width: var(--container-xl); margin: 0 auto; height: 86px; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-6); }
.mainnav__logo { background: #fefefe; padding: 4px 12px; border-radius: var(--radius-md); display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.mainnav__logo img { height: 64px; width: auto; max-width: none; object-fit: contain; display: block; }
.mainnav__menu { display: flex; align-items: center; gap: 1px; margin-left: var(--space-4); }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-sm); color: #fefefe; text-decoration: none; padding: 10px 13px; border-radius: var(--radius-sm); white-space: nowrap; background: none; border: 0; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); }
.nav-link:hover { color: #fefefe; background: rgba(255,255,255,0.12); text-decoration: none; }
.nav-link svg { width: 15px; height: 15px; transition: transform var(--dur-fast); }
.nav-link--open svg.caret { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 290px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); display: none; z-index: 60; }
.dropdown::before { content: ""; position: absolute; top: -4px; left: 14px; right: 14px; height: 4px; background: #f48d26; border-radius: 4px 4px 0 0; }
.dropdown--open { display: block; animation: dropIn 200ms var(--ease-out); }
@keyframes dropIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dropdown a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius-sm); color: var(--text-body); text-decoration: none; font-size: var(--text-sm); font-weight: var(--fw-medium); }
.dropdown a svg { width: 16px; height: 16px; color: var(--orange-600); flex: none; }
.dropdown a:hover { background: var(--blue-50); color: var(--blue-700); text-decoration: none; }
.mainnav__spacer { flex: 1; }
.mainnav__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.42); border-radius: var(--radius-md); background: rgba(255,255,255,0.08); cursor: pointer; color: #fefefe; }
@media (max-width:1060px){ .mainnav__menu { display: none; } .burger { display: inline-flex; } }
header.header--scrolled .mainnav { background: #fefefe; border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
header.header--scrolled .nav-link { color: #383837; }
header.header--scrolled .nav-link:hover { color: #2864a9; background: var(--blue-50); }
header.header--scrolled .burger { border-color: var(--border-default); background: #fefefe; color: #383837; }

/* ── MOBILE SHEET ── */
.sheet { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: var(--surface-card); z-index: 40; overflow-y: auto; padding: var(--space-5) var(--space-6) var(--space-16); }
.sheet--open { display: block; }
.sheet__group { border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) 0; }
.sheet__head { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-md); color: var(--text-strong); padding: 8px 0; text-decoration: none; display: block; }
.sheet a.sub { display: block; padding: 9px 0 9px var(--space-4); color: var(--text-muted); text-decoration: none; font-weight: var(--fw-medium); font-size: var(--text-sm); }

/* ── HERO (split panel) ── */
.hero { position: relative; background: #2864a9; overflow: hidden; border-bottom: 4px solid #f48d26; }
.hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; background: url('https://stg-mcdonntest-devstg.kinsta.cloud/wp-content/uploads/2026/06/iStock-1038532394.jpg') center center/cover no-repeat; }
.hero__bg-overlay { position: absolute; inset: 0; background: linear-gradient(to right, #2864a9 0%, #2864a9 26%, rgba(40,100,169,0.92) 44%, rgba(40,100,169,0.55) 68%, rgba(40,100,169,0.18) 100%); pointer-events: none; }
.hero__inner { position: relative; z-index: 2; max-width: var(--container-xl); margin: 0 auto; padding: 106px var(--space-6) 66px; }
.hero__content { max-width: 660px; }
.hero h1 { color: #fefefe; font-size: clamp(2.2rem, 3.5vw, 3.25rem); line-height: 1.06; font-stretch: 108%; letter-spacing: 0; margin: var(--space-3) 0 var(--space-4); max-width: 24ch; }
.hero__lead { color: rgba(255,255,255,0.84); font-size: var(--text-base); line-height: var(--leading-normal); max-width: 58ch; margin: 0 0 var(--space-8); }
.hero__cta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hero__divider { height: 1px; background: rgba(255,255,255,0.24); margin: var(--space-8) 0; }
.hero__trust { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: var(--space-4) var(--space-10); }
.hero__trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.88); font-weight: var(--fw-semibold); font-size: var(--text-sm); white-space: nowrap; }
@media (max-width:480px){ .hero__trust { grid-template-columns: max-content; } }
.hero__trust-item svg { width: 18px; height: 18px; color: #f48d26; flex: none; }
@media (max-width:720px){ .hero h1 { font-size: var(--text-2xl); } .hero__bg-img { width: 100%; } .hero__bg-overlay { width: 100%; background: rgba(40,100,169,0.88); } .hero__inner { padding: calc(86px + var(--space-8)) var(--space-6) var(--space-12); } }

/* ── CTA STRIP ── */
.ctastrip { background: #f48d26; }
.ctastrip__inner { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-8); flex-wrap: wrap; }
.ctastrip__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-lg); color: var(--neutral-950); margin: 0; line-height: 1.15; }
.ctastrip__sub { color: rgba(28,28,27,0.82); font-weight: var(--fw-semibold); font-size: var(--text-sm); margin: 2px 0 0; }
.ctastrip__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.ctastrip__call { display: inline-flex; align-items: center; gap: 9px; color: var(--neutral-950); text-decoration: none; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-md); }
.ctastrip__call svg { width: 20px; height: 20px; }
.ctastrip__call:hover { opacity: 0.82; text-decoration: none; }

/* ── INTRO / WHAT IS TRAFFIC MANAGEMENT ── */
.intro-section { background: var(--surface-sunken); }
.intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-10) var(--space-16); align-items: start; }
.intro-lead .kicker { margin-bottom: var(--space-4); }
.intro-lead h2 { margin: 0; color: var(--text-strong); }
.intro-body__lead { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); margin: 0 0 var(--space-5); }
.intro-body__lead b { color: var(--text-strong); }
.intro-body__text { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); margin: 0; }
.intro-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-10); margin-top: var(--space-12); padding-top: var(--space-10); border-top: 1px solid var(--border-subtle); }
.intro-point { display: flex; align-items: flex-start; gap: var(--space-4); }
.intro-point__icon { width: 56px; height: 56px; flex: none; border-radius: var(--radius-md); background: #383837; color: #F48D26; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base); }
.intro-point__icon svg { width: 26px; height: 26px; }
.intro-point:hover .intro-point__icon { background: #F48D26; color: #383837; }
.intro-point > div b { display: block; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); margin-bottom: 4px; }
.intro-point > div span { display: block; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
@media (max-width:900px){ .intro-grid { grid-template-columns: 1fr; gap: var(--space-6); } .intro-points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:620px){ .intro-points { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ── SERVICES ── */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.svc-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base); border-top: 3px solid var(--orange-500); text-decoration: none; color: inherit; }
.svc-card--blue { border-top-color: var(--blue-500); }
.svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); text-decoration: none; }
.svc-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--orange-50); color: var(--orange-600); display: inline-flex; align-items: center; justify-content: center; }
.svc-card--blue .svc-card__icon { background: var(--blue-50); color: var(--blue-600); }
.svc-card__icon svg { width: 24px; height: 24px; }
.svc-card h3 { font-size: var(--text-md); margin: 0; color: var(--text-strong); }
.svc-card p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; line-height: var(--leading-normal); flex: 1; }
.svc-card .textlink { margin-top: auto; }

/* ── Services + Compliance, solid orange top accent (scoped) ── */
#services .svc-card, #compliance .svc-card { position: relative; overflow: hidden; border-top: 0; padding: calc(var(--space-6) + 6px) var(--space-6) var(--space-6); gap: var(--space-4); }
#services .svc-card::before, #compliance .svc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #F48D26; }
#services .svc-card__icon, #compliance .svc-card__icon { background: #383837; color: #F48D26; width: 56px; height: 56px; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base); }
#services .svc-card:hover .svc-card__icon, #compliance .svc-card:hover .svc-card__icon { background: #F48D26; color: #383837; }
#services .svc-card h3, #compliance .svc-card h3 { line-height: 1.25; }
.svc-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--text-link); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.svc-card__more svg { width: 15px; height: 15px; transition: transform var(--dur-fast); }
.svc-card:hover .svc-card__more svg { transform: translateX(3px); }
@media (max-width:1080px){ .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:720px){ .svc-grid { grid-template-columns: 1fr; } }

/* ── STATS ── */
.stats-section { background: var(--gradient-blue); position: relative; overflow: hidden; }
.stats-section__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }
.stats-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,46,74,0.35), rgba(11,28,46,0.65)); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); position: relative; z-index: 1; }
.stat-card { padding-left: var(--space-6); border-left: 3px solid var(--orange-500); }
.stat-card__value { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-4xl); line-height: 1; color: var(--hivis-yellow); font-stretch: 108%; letter-spacing: var(--tracking-tight); display: block; }
.stat-card__label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--white); margin-top: var(--space-3); }
.stat-card__caption { font-size: var(--text-sm); color: var(--blue-100); margin-top: 4px; line-height: 1.4; }
@media (max-width:1080px){ .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:720px){ .stat-card__value { font-size: var(--text-3xl); } }

/* ── TABS ── */
.tabs { display: inline-flex; gap: 4px; background: var(--neutral-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 4px; }
.tab-btn { appearance: none; border: 0; cursor: pointer; background: transparent; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--text-muted); padding: 10px 20px; border-radius: var(--radius-sm); transition: all var(--dur-fast); display: inline-flex; align-items: center; gap: 8px; }
.tab-btn svg { width: 16px; height: 16px; }
.tab-btn--active { background: var(--surface-card); color: var(--text-strong); box-shadow: var(--shadow-sm); }

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: stretch; margin-top: var(--space-10); }
.about-media { position: relative; min-height: 440px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); }
.about-value { display: flex; gap: 10px; align-items: flex-start; }
.about-value svg { width: 20px; height: 20px; color: var(--green-700); flex: none; margin-top: 2px; }
.about-value b { display: block; color: var(--text-strong); font-size: var(--text-sm); }
.about-value span { color: var(--text-muted); font-size: var(--text-sm); }
@media (max-width:1080px){ .about-grid { grid-template-columns: 1fr; } .about-values { grid-template-columns: 1fr; } }

/* ── USP ── */
.usp-section { background: #2864A9; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.usp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.usp-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 3px solid var(--orange-500); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); }
.usp-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--orange-50); color: var(--orange-600); display: inline-flex; align-items: center; justify-content: center; margin: 0 0 var(--space-5); }
.usp-icon svg { width: 26px; height: 26px; }
.usp-card h3 { font-size: var(--text-md); margin: 0 0 8px; }
.usp-card p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; line-height: var(--leading-normal); }
@media (max-width:1080px){ .usp-grid { grid-template-columns: 1fr; } }

/* ── STANDARDS ── */
.standards { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.standards__label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-subtle); font-weight: var(--fw-bold); margin-right: var(--space-2); }
.standards__chip { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-body); background: var(--neutral-100); border: 1px solid var(--border-subtle); padding: 6px 12px; border-radius: var(--radius-sm); }

/* ── TESTIMONIALS ── */
.tst-section { background: #2864A9; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.tst-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.tst-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-4); }
.tst-stars { display: inline-flex; gap: 2px; color: #f48d26; }
.tst-stars svg { width: 18px; height: 18px; fill: currentColor; }
.tst-quote { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-normal); margin: 0; }
.tst-who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.tst-avatar { width: 42px; height: 42px; border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-black); flex: none; font-size: var(--text-sm); }
.tst-name { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--text-sm); }
.tst-role { color: var(--text-muted); font-size: var(--text-xs); }
@media (max-width:980px){ .tst-grid { grid-template-columns: 1fr; } }

/* ── GOOGLE BADGE ── */
.google-badge { display: inline-flex; align-items: center; gap: 12px; background: #fefefe; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 18px; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.google-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.google-badge__logo { height: 32px; width: auto; flex: none; display: block; }
.google-badge__right { display: flex; flex-direction: column; gap: 2px; }
.google-badge__top { display: flex; align-items: center; gap: 7px; }
.google-badge__num { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-lg); color: var(--text-strong); line-height: 1; }
.google-badge__stars { color: #F48D26; font-size: 15px; letter-spacing: 1px; line-height: 1; }
.google-badge__count { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* ── CAPABILITY (dark band) ── */
.cap-section { background: #1a4169; color: var(--text-on-dark); position: relative; overflow: hidden; }
.cap-section .cap__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; z-index: 0; }
.cap-section::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(61,146,214,0.82) 0%, rgba(40,100,169,0.93) 55%, rgba(26,65,105,0.97) 100%); }
.cap-section .section-head h2 { color: var(--white); }
.cap-section .section-head p { color: var(--neutral-300); }
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); position: relative; z-index: 1; }
.cap-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-top: 3px solid #F48D26; border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.cap-tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--fw-bold); color: var(--orange-400); }
.cap-tag svg { width: 16px; height: 16px; }
.cap-card h3 { color: var(--white); font-size: var(--text-lg); margin: 0; }
.cap-card p { color: var(--neutral-300); font-size: var(--text-sm); margin: 0; line-height: var(--leading-normal); }
.cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cap-list li { display: flex; align-items: center; gap: 9px; color: var(--neutral-100); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.cap-list li svg { width: 16px; height: 16px; color: var(--orange-400); flex: none; }
.cap-section .section-head { position: relative; z-index: 1; }
#capability .section-head > div { max-width: 900px; }
#industries .section-head > div { max-width: 1000px; }
#compliance .section-head > div { max-width: 1000px; }
.usp-section .section-head > div { max-width: 820px; }
#services .section-head > div { max-width: 880px; }
@media (max-width:720px){ .cap-grid { grid-template-columns: 1fr; } }

/* ── INDUSTRIES ── */
.ind-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); }
.ind-card { position: relative; overflow: hidden; display: block; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: calc(var(--space-6) + 6px) var(--space-6) var(--space-6); box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base); }
.ind-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #F48D26; }
.ind-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-strong); text-decoration: none; }
.ind-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: #383837; color: #F48D26; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); transition: background var(--dur-base) var(--ease-standard), color var(--dur-base); }
.ind-card:hover .ind-icon { background: #F48D26; color: #383837; }
.ind-icon svg { width: 26px; height: 26px; }
.ind-card h3 { font-size: var(--text-md); margin: 0 0 6px; }
.ind-card p { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); line-height: var(--leading-normal); }
.ind-more { display: inline-flex; align-items: center; gap: 6px; color: var(--text-link); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.ind-more svg { width: 15px; height: 15px; transition: transform var(--dur-fast); }
.ind-card:hover .ind-more svg { transform: translateX(3px); }
@media (max-width:1080px){ .ind-grid { grid-template-columns: 1fr 1fr; } }

/* ── FAQ ── */
.faq-section { background: #2864A9; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-16); align-items: start; }
.faq-list { display: grid; gap: var(--space-3); }
.faq-item { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-fast); }
.faq-item--open { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; text-align: left; appearance: none; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--text-strong); }
.faq-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--orange-50); color: var(--orange-600); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background var(--dur-fast), transform var(--dur-base); }
.faq-icon svg { width: 18px; height: 18px; }
.faq-item--open .faq-icon { background: var(--orange-500); color: var(--neutral-950); transform: rotate(180deg); }
.faq-a { display: block; max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-standard); }
.faq-item--open .faq-a { max-height: 460px; }
.faq-a p { margin: 0; padding: 0 var(--space-6) var(--space-6); color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal); }
@media (max-width:980px){ .faq-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

/* ── BLUE PANELS, recolour content to suit the #2864A9 background ── */
.usp-section .section-head h2, .tst-section .section-head h2, .faq-section h2 { color: #FEFEFE; }
.usp-section .section-head p, .tst-section .section-head p { color: rgba(255,255,255,0.80); }

/* frosted cards on blue, orange kept as the accent */
.usp-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-top: 3px solid #F48D26; box-shadow: none; }
.usp-card h3 { color: #FEFEFE; }
.usp-card p { color: rgba(255,255,255,0.80); }
.usp-icon { background: rgba(255,255,255,0.10); color: #F48D26; }

.tst-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-top: 3px solid #F48D26; box-shadow: none; }
.tst-quote { color: #FEFEFE; }
.tst-who { border-top-color: rgba(255,255,255,0.16); }
.tst-avatar { background: rgba(255,255,255,0.12); color: #FEFEFE; }
.tst-name { color: #FEFEFE; }
.tst-role { color: rgba(255,255,255,0.72); }

.faq-item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.faq-item--open { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.30); border-top: 3px solid #F48D26; box-shadow: none; }
.faq-q { color: #FEFEFE; }
.faq-icon { background: rgba(255,255,255,0.12); color: #F48D26; }
.faq-item--open .faq-icon { background: #F48D26; color: #383837; }
.faq-a p { color: rgba(255,255,255,0.80); }

/* ── LOCATIONS ── */
.loc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; width: 390px; align-items: stretch; }
#locations .section-head > div { max-width: 600px; }
#locations .loc-tab { justify-content: center; white-space: nowrap; }
@media (max-width:520px){ .loc-tabs { grid-template-columns: 1fr; width: 100%; } }
.loc-tab { appearance: none; cursor: pointer; border: 1px solid var(--border-default); background: var(--surface-card); border-radius: var(--radius-md); padding: 11px 20px; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--text-body); display: inline-flex; align-items: center; gap: 8px; transition: all var(--dur-fast); }
.loc-tab svg { width: 16px; height: 16px; }
.loc-tab:hover { border-color: var(--border-strong); }
.loc-tab--active { background: var(--orange-500); border-color: var(--orange-500); color: var(--neutral-950); }
.loc-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-12); align-items: stretch; }
.loc-info h3 { font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-3); }
.loc-contacts { list-style: none; margin: var(--space-6) 0 var(--space-8); padding: 0; display: grid; gap: var(--space-4); }
.loc-contacts li { display: flex; align-items: center; gap: 12px; color: var(--text-body); font-weight: var(--fw-semibold); font-size: var(--text-base); }
.loc-contacts a { color: var(--text-body); text-decoration: none; }
.loc-contacts a:hover { color: var(--orange-700); }
.loc-ci { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--blue-50); color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.loc-ci svg { width: 19px; height: 19px; }
.map-placeholder { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-default); min-height: 360px; background: linear-gradient(var(--neutral-200) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, var(--neutral-200) 1px, transparent 1px) 0 0 / 44px 100%, var(--neutral-100); }
.map-road { position: absolute; background: var(--neutral-300); }
.map-road--h { left: -5%; right: -5%; top: 58%; height: 16px; transform: rotate(-6deg); }
.map-road--v { top: -5%; bottom: -5%; left: 38%; width: 13px; transform: rotate(4deg); }
.map-road--d { left: 10%; right: -10%; top: 22%; height: 9px; transform: rotate(18deg); background: var(--blue-200); }
.map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.map-pin-dot { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--orange-500); transform: rotate(-45deg); border: 3px solid var(--white); box-shadow: var(--shadow-md); }
.map-pin-label { transform: translateY(8px); background: var(--neutral-950); color: var(--white); font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.map-coords { position: absolute; left: var(--space-4); bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); background: rgba(254,254,254,0.9); padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); z-index: 2; }
.map-open { position: absolute; right: var(--space-4); top: var(--space-4); display: inline-flex; align-items: center; gap: 7px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 14px; font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--text-strong); text-decoration: none; box-shadow: var(--shadow-sm); z-index: 2; }
.map-open:hover { border-color: var(--orange-500); text-decoration: none; }
.map-open svg { width: 16px; height: 16px; color: var(--orange-600); }
.loc-map { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-default); min-height: 380px; box-shadow: var(--shadow-sm); }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.18) contrast(1.02); }
.loc-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-panel { display: none; }
.loc-panel--active { display: block; }
@media (max-width:980px){ .loc-grid { grid-template-columns: 1fr; } }

/* ── CONTACT / CLOSING CTA ── */
.close-section { position: relative; overflow: hidden; background: #1a4169; color: var(--white); }
.close-section::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url('https://stg-mcdonntest-devstg.kinsta.cloud/wp-content/uploads/2026/06/iStock-1321417982.jpg') center/cover no-repeat; }
.close-section::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, #1a4169 0%, rgba(26,65,105,0.96) 30%, rgba(33,84,137,0.74) 62%, rgba(33,84,137,0.48) 100%); }
.close-section > .container { position: relative; z-index: 1; }
.close-section h2 { color: var(--white); }
.close-section .section-head p { color: var(--blue-100); }
.close-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-16); align-items: start; }
.close-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.close-points li { display: flex; gap: 10px; align-items: flex-start; color: #eaf1f8; font-size: var(--text-base); font-weight: var(--fw-medium); }
.close-points li svg { width: 19px; height: 19px; color: var(--orange-400); flex: none; margin-top: 2px; }
.close-call { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--space-8); padding: var(--space-4) var(--space-5); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-lg); text-decoration: none; }
.close-call__ic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--orange-500); color: var(--neutral-950); display: inline-flex; align-items: center; justify-content: center; }
.close-call__ic svg { width: 22px; height: 22px; }
.close-call:hover { background: rgba(255,255,255,0.16); text-decoration: none; }
.close-call__num { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-lg); color: var(--white); }
.close-call__sub { font-size: var(--text-xs); color: var(--blue-100); }
.contact-card { background: var(--surface-card); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-xl); border-top: 3px solid var(--orange-500); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.form-input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body); background: var(--surface-card); transition: border-color var(--dur-fast); box-sizing: border-box; }
.form-input:focus { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); }
textarea.form-input { resize: vertical; min-height: 88px; }
.form-success { text-align: center; padding: var(--space-12) var(--space-4); display: none; }
.form-success--visible { display: block; }
.form-success svg { width: 48px; height: 48px; color: var(--green-700); margin-bottom: var(--space-4); }
.form-success h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.form-success p { color: var(--text-muted); margin: 0 0 var(--space-6); }
@media (max-width:980px){ .close-grid { grid-template-columns: 1fr; gap: var(--space-10); } .form-grid-2 { grid-template-columns: 1fr; } }

/* ── FOOTER ── */
.footer { background: var(--neutral-950); color: var(--neutral-300); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr; gap: var(--space-10); }
.footer__logo-wrap { background: var(--white); padding: 12px 16px; border-radius: var(--radius-md); display: inline-block; margin-bottom: var(--space-5); }
.footer__logo-wrap img { height: 62px; display: block; }
.footer__about { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--neutral-400); max-width: 38ch; margin: 0 0 var(--space-5); }
.footer__contactbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5) var(--space-8); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.1); }
.footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.footer__contact li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--neutral-300); }
.footer__contact a { color: var(--neutral-300); text-decoration: none; }
.footer__contact a:hover { color: var(--white); }
.footer__contact svg { width: 18px; height: 18px; color: var(--orange-400); flex: none; }
.footer__social { display: flex; align-items: center; gap: var(--space-3); }
.footer__social a { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; color: var(--neutral-300); transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.footer__social a:hover { color: var(--neutral-950); background: #F48D26; border-color: #F48D26; transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer h4 { font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--neutral-500); font-weight: 700; margin: 0 0 var(--space-4); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a { color: var(--neutral-300); font-size: var(--text-sm); text-decoration: none; }
.footer__col a:hover { color: var(--white); }
.footer__certs { margin: var(--space-12) 0; padding: var(--space-10) 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer__certs-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--neutral-500); font-weight: 700; margin-bottom: var(--space-6); display: block; }
.footer__certs-main { display: flex; align-items: center; gap: var(--space-6); }
.footer__cert-row { flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-4); }
.footer__cert { height: 72px; background: #fefefe; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; flex: none; }
.footer__cert img { height: 100%; max-height: 50px; width: auto; object-fit: contain; }
.footer__certs-rule { flex: none; width: 1px; align-self: stretch; min-height: 72px; margin: 0 var(--space-4); background: rgba(255,255,255,0.14); }
.footer__certs-right { flex: none; display: flex; justify-content: flex-end; }
@media (max-width:860px){ .footer__certs-main { flex-direction: column; align-items: stretch; gap: var(--space-8); } .footer__certs-rule { display: none; } .footer__cert-row { flex-wrap: wrap; justify-content: center; } .footer__certs-right { justify-content: center; } }
.footer__legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--neutral-500); }
.footer__legal-links { display: inline-flex; gap: var(--space-4); align-items: center; }
.footer__legal a { color: var(--neutral-400); }
.footer__fbf { display: inline-flex; align-items: center; gap: 10px; color: #87aaa1; text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.footer__fbf:hover { color: #aecabf; text-decoration: none; }
.footer__fbf img { height: 22px; width: auto; }
@media (max-width:980px){ .footer__top { grid-template-columns: 1fr 1fr 1fr; } .footer__cert-row { flex-wrap: wrap; } }
@media (max-width:720px){ .footer__top { grid-template-columns: 1fr 1fr; } }

/* ═══════════ MERGED FROM DESIGN 2, Services carousel, Stats, Testimonials ═══════════ */
.svc-carousel { position: relative; margin-top: var(--space-10); }
.svc-stage { position: relative; }
.svc-track { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: clamp(var(--space-4), 2.5vw, var(--space-10)); padding: var(--space-2) clamp(var(--space-4), 2.5vw, var(--space-10)) var(--space-4); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.svc-track::-webkit-scrollbar { display: none; }
.svc-tile { scroll-snap-align: start; flex: 0 0 clamp(258px, 23vw, 320px); aspect-ratio: 3 / 4; position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); text-decoration: none; }
.svc-tile__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.svc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,40,64,0.16) 0%, rgba(11,28,46,0.5) 52%, rgba(8,20,33,0.9) 100%); }
.svc-tile:hover .svc-tile__bg { transform: scale(1.06); }
.svc-tile__logo { position: absolute; top: var(--space-5); left: 50%; transform: translateX(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.92); display: inline-flex; align-items: center; justify-content: center; }
.svc-tile__logo img { width: 60%; height: 60%; object-fit: contain; }
.svc-tile__title { position: absolute; left: var(--space-5); right: var(--space-5); top: 50%; transform: translateY(-50%); z-index: 2; margin: 0; text-align: center; color: #fff; text-transform: uppercase; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-lg); line-height: 1.18; letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.svc-tile__plus { position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: var(--orange-400); color: #383837; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform var(--dur-fast); }
.svc-tile:hover .svc-tile__plus { transform: translateX(-50%) scale(1.12); }
.svc-tile__plus svg { width: 24px; height: 24px; }
.svc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: none; background: #fefefe; color: var(--text-strong); box-shadow: var(--shadow-lg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast), color var(--dur-fast); }
.svc-nav:hover { background: var(--orange-400); color: #fefefe; }
.svc-nav svg { width: 22px; height: 22px; }
.svc-nav--prev { left: var(--space-4); }
.svc-nav--next { right: var(--space-4); }
.svc-dots { display: flex; justify-content: center; gap: 9px; margin-top: var(--space-6); flex-wrap: wrap; }
.svc-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: var(--border-strong); cursor: pointer; transition: background var(--dur-fast), width var(--dur-fast); }
.svc-dot.is-active { background: var(--orange-400); width: 26px; border-radius: 2.5px; }
@media (max-width:760px){ .svc-nav { display: none; } }

.stats-section { background: #1a4169; position: relative; overflow: hidden; }
.stats-section__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.stats-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(61,146,214,0.82) 0%, rgba(40,100,169,0.93) 55%, rgba(26,65,105,0.97) 100%); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-8); position: relative; z-index: 1; }
.stat-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-card__value { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(3rem, 6vw, 4.75rem); line-height: 1; color: #fefefe; font-stretch: 108%; letter-spacing: var(--tracking-tight); display: block; }
.stat-card__bar { display: block; width: 92px; height: 9px; background: var(--orange-400); margin: var(--space-4) 0; }
.stat-card__label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--white); }
.stat-card__caption { font-size: var(--text-sm); color: rgba(255,255,255,0.68); margin-top: var(--space-2); line-height: 1.4; max-width: 26ch; }
@media (max-width:1080px){ .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); } }
.tst-section { background: #2864A9; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.tst-wrap { position: relative; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); }
.tst-ghost { text-align: center; font-family: var(--font-display); font-weight: var(--fw-black); text-transform: uppercase; font-size: clamp(2.25rem, 9.5vw, 9rem); line-height: 0.86; letter-spacing: -0.01em; margin: 0 0 -0.32em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.34); position: relative; z-index: 0; user-select: none; white-space: nowrap; overflow: visible; }
.tst-card { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; background: #fefefe; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border-top: 4px solid var(--orange-400); }
.tst-badge { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); z-index: 2; width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--orange-400); color: #383837; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.tst-badge svg { width: 30px; height: 30px; stroke-width: 2.5; }
.tst-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tst-track::-webkit-scrollbar { display: none; }
.tst-slide { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; padding: var(--space-12) clamp(var(--space-8), 6vw, 90px) var(--space-10); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); }
.tst-text { font-size: clamp(var(--text-md), 1.4vw, var(--text-lg)); color: var(--text-body); line-height: 1.6; margin: 0; max-width: 70ch; }
.tst-mark { width: 66px; height: 66px; border-radius: 50%; background: var(--neutral-50); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.tst-mark img { width: 62%; height: 62%; object-fit: contain; }
.tst-by { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--text-md); }
.tst-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-subtle); background: #fefefe; color: var(--text-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.tst-arrow:hover { background: var(--orange-400); color: #fefefe; border-color: var(--orange-400); }
.tst-arrow svg { width: 20px; height: 20px; }
.tst-arrow--prev { left: var(--space-3); }
.tst-arrow--next { right: var(--space-3); }
.tst-google { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: var(--space-10); }
@media (max-width:760px){ .tst-arrow { display: none; } .tst-slide { padding: var(--space-12) var(--space-6) var(--space-8); } }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'archivo';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://stg-mcdonntest-devstg.kinsta.cloud/wp-content/uploads/2026/06/archivovar.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'ibm plex mono';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://stg-mcdonntest-devstg.kinsta.cloud/wp-content/uploads/2026/06/ibmplexmono400.woff2') format('woff2');
}
@font-face {
	font-family: 'ibm plex mono';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://stg-mcdonntest-devstg.kinsta.cloud/wp-content/uploads/2026/06/ibmplexmono500.woff2') format('woff2');
}
@font-face {
	font-family: 'ibm plex mono';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://stg-mcdonntest-devstg.kinsta.cloud/wp-content/uploads/2026/06/ibmplexmono600.woff2') format('woff2');
}
/* End Custom Fonts CSS */