/* ============================================================
   BROLLY DESIGN SYSTEM — v1.0
   Human-touch, corporate, conversion-led
   ============================================================ */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Brand colours */
  --blue-primary:   #1E5BA8;
  --blue-light:     #4A90E2;
  --blue-pale:      #EBF3FB;
  --pink-primary:   #C2185B;
  --pink-light:     #E94B8B;
  --orange-primary: #F57C00;
  --orange-light:   #FFA726;
  --purple-primary: #311B92;
  --purple-light:   #5B2C91;

  /* Neutral palette */
  --white:          #FFFFFF;
  --off-white:      #F8FAFC;
  --grey-50:        #F1F5F9;
  --grey-100:       #E2E8F0;
  --grey-200:       #CBD5E1;
  --grey-400:       #94A3B8;
  --grey-600:       #475569;
  --grey-800:       #1E293B;
  --black:          #0F172A;

  /* Status */
  --success:        #16A34A;
  --warning:        #D97706;
  --error:          #DC2626;

  /* Typography — Ubuntu primary, with system fallbacks */
  --font-sans:      'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading:   var(--font-sans);
  --font-body:      'Varela Round', var(--font-sans);

  /* Brolly brand spectrum gradient — used for the scroll bar and most gradient buttons */
  --brolly-gradient: linear-gradient(90deg, #51caff, #2675ea, #ff55a2, #cc0a8b, #fcd224, #fd8300);
  --brolly-gradient-d: linear-gradient(90deg, #45b3e6, #1f63cf, #e63f8e, #aa067a, #e6b81f, #e07300);
  /* Pink gradient — reserved for "Book a Demo" CTAs */
  --pink-gradient:   linear-gradient(135deg, #ff55a2, #cc0a8b);

  /* Spacing */
  --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;
  --space-24:  96px;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.10), 0 8px 10px rgba(0,0,0,.04);

  /* Animation */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   200ms;
  --dur-base:   350ms;
  --dur-slow:   600ms;

  /* Layout */
  --max-width:  1320px;
  --nav-height: 72px;
  /* Static page-hero height — keeps every secondary page hero the same size */
  --page-hero-height: 480px;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  color: var(--grey-800);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ── Typography Scale ────────────────────────────────────── */
.display-1 { font-family: var(--font-heading); font-size: clamp(44px, 5vw, 72px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.display-2 { font-family: var(--font-heading); font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1.1;  letter-spacing: -0.025em; }
.h1        { font-family: var(--font-heading); font-size: clamp(30px, 3.5vw, 48px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.h2        { font-family: var(--font-heading); font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; line-height: 1.2;  letter-spacing: -0.015em; }
.h3        { font-family: var(--font-heading); font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; line-height: 1.25; }
.h4        { font-family: var(--font-heading); font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; line-height: 1.3; }
.body-lg   { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }
.body-md   { font-size: 17px; line-height: 1.6; }
.body-sm   { font-size: 15px; line-height: 1.55; }
.caption   { font-size: 13px; line-height: 1.4; letter-spacing: 0.01em; }
.overline  { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Layout Utilities ────────────────────────────────────── */
.container  { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
.section    { padding: var(--space-20) 0; }
.section-sm { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-24) 0; }

.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.flex    { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

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

/* ── Colour Utilities ────────────────────────────────────── */
.text-blue    { color: var(--blue-primary); }
.text-pink    { color: var(--pink-primary); }
.text-orange  { color: var(--orange-primary); }
.text-purple  { color: var(--purple-primary); }
.text-white   { color: var(--white); }
.text-muted   { color: var(--grey-600); }
.bg-blue      { background: var(--blue-primary); }
.bg-pink      { background: var(--pink-primary); }
.bg-orange    { background: var(--orange-primary); }
.bg-off-white { background: var(--off-white); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 14px 28px; border-radius: var(--radius-full);
  font-weight: 600; font-size: 16px; line-height: 1; transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--blue-primary); color: var(--white); }
.btn-primary:hover { background: var(--blue-light); }
.btn-secondary { background: transparent; color: var(--blue-primary); border: 2px solid var(--blue-primary); }
.btn-secondary:hover { background: var(--blue-pale); }
.btn-white     { background: var(--white); color: var(--blue-primary); }
.btn-white:hover { background: var(--grey-50); }
.btn-outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.6); }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-pink  { background: var(--pink-primary); color: var(--white); }
.btn-pink:hover { background: var(--pink-light); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-lg { padding: 18px 40px; font-size: 18px; }

/* ── Chip / Badge ─────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 600; background: var(--grey-50);
  color: var(--grey-800); border: 1px solid var(--grey-100);
}
.chip-blue   { background: var(--blue-pale); color: var(--blue-primary); border-color: rgba(74,144,226,0.2); }
.chip-green  { background: #F0FDF4; color: var(--success); border-color: rgba(22,163,74,0.2); }
.chip-orange { background: #FFF7ED; color: var(--orange-primary); border-color: rgba(245,124,0,0.2); }
.chip-pink   { background: #FDF2F8; color: var(--pink-primary); border-color: rgba(194,24,91,0.2); }

/* ── Scroll progress bar (Pace-style) ────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--brolly-gradient);
  z-index: 10001;
  pointer-events: none;
  transition: width 0.05s linear;
}

/* ── Navigation ──────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-height); background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grey-100);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.nav.scrolled { box-shadow: var(--shadow-md); }

/* On the home page, the nav starts fully transparent over the purple
   hero, then fills in white once the user has scrolled past the top. */
.page-home .nav {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.page-home .nav .nav-link,
.page-home .nav .nav-link-button {
  color: rgba(255,255,255,0.92);
}
.page-home .nav .nav-link:hover,
.page-home .nav .nav-link-button:hover {
  color: #fff;
}
.page-home .nav .nav-link::after { background: #fff; }
.page-home .nav .nav-hamburger span { background: #fff; }

/* When the user scrolls, snap back to the standard light nav */
.page-home .nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--grey-100);
  box-shadow: var(--shadow-md);
}
.page-home .nav.scrolled .nav-link,
.page-home .nav.scrolled .nav-link-button { color: var(--grey-800); }
.page-home .nav.scrolled .nav-link:hover,
.page-home .nav.scrolled .nav-link-button:hover { color: var(--blue-primary); }
.page-home .nav.scrolled .nav-link::after { background: var(--blue-primary); }
.page-home .nav.scrolled .nav-hamburger span { background: var(--grey-800); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); }
.nav-logo { display: flex; align-items: center; gap: var(--space-3); background: transparent; border: none; padding: 0; position: relative; }
.nav-logo-img { height: 44px; width: auto; background: transparent; border: none; display: block; transition: opacity var(--dur-base) var(--ease-out); }
/* Default: show navy logo (most pages have a light nav background) */
.nav-logo-white { display: none; }
.nav-logo-dark  { display: block; }
/* On the home page, when nav is transparent over the purple hero, swap to white */
.page-home .nav .nav-logo-white { display: block; }
.page-home .nav .nav-logo-dark  { display: none; }
.page-home .nav.scrolled .nav-logo-white { display: none; }
.page-home .nav.scrolled .nav-logo-dark  { display: block; }
.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-link {
  padding: 8px 4px;
  font-size: 15px; font-weight: 500; color: var(--grey-800);
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 2px;
  height: 2px;
  background: var(--pink-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: #cc0a8b; background: transparent; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: #cc0a8b; }
.nav-link.active::after { transform: scaleX(1); }
/* Chevron on dropdown trigger flips when the menu opens */
.nav-chevron {
  font-size: 10px;
  margin-left: 4px;
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-mega:hover .nav-chevron,
.nav-mega:focus-within .nav-chevron,
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }
/* Keep the trigger underline visible while the panel is open */
.nav-mega:hover .nav-mega-trigger::after,
.nav-mega:focus-within .nav-mega-trigger::after { transform: scaleX(1); }
.nav-mega:hover .nav-mega-trigger,
.nav-mega:focus-within .nav-mega-trigger { color: #cc0a8b; }
/* Home page over the dark hero: white on hover keeps it readable on the gradient. */
.page-home .nav .nav-mega:hover .nav-mega-trigger,
.page-home .nav .nav-mega:focus-within .nav-mega-trigger { color: #fff; }
/* Once scrolled, the nav is white again — switch back to the pink hover so the
   trigger doesn't disappear into a white background. */
.page-home .nav.scrolled .nav-mega:hover .nav-mega-trigger,
.page-home .nav.scrolled .nav-mega:focus-within .nav-mega-trigger { color: #cc0a8b; }
/* dropdown trigger that's not a link — render as a button but match .nav-link */
.nav-link-button {
  display: inline-flex; align-items: center;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
}
.nav-mobile-section {
  display: block;
  padding: 14px var(--space-4) 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.nav-cta {
  margin-left: var(--space-4);
  background: var(--pink-gradient) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(204,10,139,0.30);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);
}
.nav-cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.05);
  box-shadow: 0 10px 24px rgba(204,10,139,0.40);
  color: #fff !important;
}

/* Generic gradient button — share the brolly spectrum across the site */
.btn-gradient,
.btn.btn-gradient {
  background: var(--brolly-gradient);
  color: #fff !important;
  border: none;
  box-shadow: 0 8px 22px rgba(204,10,139,0.25);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);
}
.btn-gradient:hover,
.btn.btn-gradient:hover {
  transform: translateY(-2px);
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0 12px 30px rgba(204,10,139,0.35);
  color: #fff !important;
}
.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--grey-800); border-radius: 2px; transition: all var(--dur-base) var(--ease-out); }
.nav-mobile-menu {
  display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
  background: var(--white); padding: var(--space-6); overflow-y: auto;
  flex-direction: column; gap: var(--space-2); z-index: 999;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link { padding: 14px var(--space-4); font-size: 17px; font-weight: 500; border-radius: var(--radius-md); color: var(--grey-800); transition: all var(--dur-fast); }
.nav-mobile-link:hover { background: var(--blue-pale); color: var(--blue-primary); }

/* Dropdown */
.nav-dropdown { position: relative; }
/* Extend the hover zone of .nav-dropdown downward by 12px into the visual
   gap between the nav link and the menu, so sliding the cursor toward the
   menu never leaves the hover area. Uses ::after because it's always
   pointer-active (unlike the menu which switches off when hidden). */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 14px;
}
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  background: var(--white); border-radius: var(--radius-md); padding: var(--space-3);
  min-width: 220px; box-shadow: var(--shadow-xl);
  border: 1px solid var(--grey-100);
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--grey-800); transition: all var(--dur-fast); }
.nav-dropdown-item:hover { background: var(--blue-pale); color: var(--blue-primary); }

/* ── Stripe-style mega menu (Solutions = Sectors + Services) ─ */
.nav-mega {
  position: relative;
  /* The whole nav-mega LI extends down off the bottom of the nav so the
     trigger's hover area continues into the panel territory uninterrupted.
     The trigger button stays visually centred via flex on .nav-links. */
}
/* Invisible "bridge" rectangle that completely covers the gap between the
   bottom of the trigger and the top of the open panel. Pointer-active even
   when the panel is hidden, so the hover state never breaks while the
   cursor traverses the gap. */
/* Hover bridge — only active when the user is actually hovering the trigger
   or focused inside the menu. Otherwise it would steal pointer events from
   any element underneath. */
.nav-mega::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 1000;
}
.nav-mega:hover::after,
.nav-mega:focus-within::after { pointer-events: auto; }
.nav-mega-panel {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(880px, 96vw);
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--grey-100);
  box-shadow: 0 24px 64px rgba(15,23,42,0.18), 0 8px 20px rgba(15,23,42,0.08);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  z-index: 1001;
}
/* Once the panel is open, give it its own pointer-active "ceiling" so even
   if you arc the cursor outside the bridge rectangle, hovering the panel
   itself keeps it open.
   Pointer-events MUST be gated on .nav-mega:hover (same as the bridge) — if
   it's left "auto" unconditionally, the ceiling stays pointer-active during
   the panel's close transition (~200ms while visibility is still visible)
   and re-triggers hover when the cursor crosses to the next nav link,
   causing the open/close flicker loop. */
.nav-mega-panel::before {
  content: '';
  position: absolute;
  top: -40px; left: 0; right: 0;
  height: 40px;
  pointer-events: none;
}
.nav-mega:hover .nav-mega-panel::before,
.nav-mega:focus-within .nav-mega-panel::before { pointer-events: auto; }
.nav-mega:hover .nav-mega-panel,
.nav-mega:focus-within .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear 0s;
}

.nav-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.nav-mega-col-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-600);
  padding: 4px 12px;
  margin-bottom: 6px;
}
.nav-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-mega-item:hover { background: var(--grey-50); }
.nav-mega-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--mega-c, var(--blue-primary)) 12%, white);
  color: var(--mega-c, var(--blue-primary));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-mega-item:hover .nav-mega-icon {
  background: var(--mega-c, var(--blue-primary));
  color: #ffffff;
}
.nav-mega-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-800);
  margin-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-mega-desc {
  display: block;
  font-size: 12px;
  color: var(--grey-600);
  line-height: 1.45;
}
/* Always highlight names in pink on hover, irrespective of accent colour */
.nav-mega-item:hover .nav-mega-name { color: #cc0a8b; }

.nav-mega-footer {
  margin-top: 8px;
  padding: 16px 18px 4px;
  border-top: 1px solid var(--grey-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nav-mega-footer-label {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--grey-800);
}
.nav-mega-footer-text {
  display: block;
  font-size: 12px;
  color: var(--grey-600);
  margin-top: 2px;
}
.nav-mega-footer-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--pink-gradient);
  color: #ffffff;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(204,10,139,0.30);
  transition: transform var(--dur-fast), filter var(--dur-fast), box-shadow var(--dur-fast);
}
.nav-mega-footer-cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.05);
  color: #fff;
  box-shadow: 0 10px 22px rgba(204,10,139,0.40);
}

@media (max-width: 760px) {
  .nav-mega-panel { width: calc(100vw - 32px); }
  .nav-mega-grid { grid-template-columns: 1fr; gap: 8px; }
  .nav-mega-footer { flex-direction: column; align-items: stretch; }
}

/* ── Cookie banner ──────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  margin: 0 auto;
  max-width: 720px;
  background: #0a1d3d;
  color: #ffffff;
  border-radius: 14px;
  padding: 14px 16px 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 36px;
  border-radius: 3px;
  background: var(--pink-gradient);
}
.cookie-banner-text {
  flex: 1;
  min-width: 220px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
}
.cookie-banner-text a {
  color: #ff7ac4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-text a:hover { color: #ffffff; }
.cookie-banner-btn {
  flex-shrink: 0;
  padding: 9px 22px;
  border: none;
  border-radius: 999px;
  background: var(--pink-gradient);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(204,10,139,0.35);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.cookie-banner-btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.05);
  box-shadow: 0 10px 22px rgba(204,10,139,0.45);
}
@media (max-width: 480px) {
  .cookie-banner { padding: 14px; }
  .cookie-banner::before { display: none; }
  .cookie-banner-btn { width: 100%; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; padding-top: var(--nav-height);
  overflow: hidden; background: linear-gradient(135deg, #0F172A 0%, #1E3A6E 50%, #1E5BA8 100%);
}
.hero-bg {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  transition: opacity 1s ease;
}
.hero-cta {
    align-items: center;
    margin-top:30px;
    padding: 0.95rem 2.25rem;
    background: linear-gradient(135deg, #4B4E51 0%, #5A5D61 100%);
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 2px solid #E09520;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), opacity var(--transition-base);
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
}

    .hero-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .hero-cta:hover::before {
        left: 100%;
    }

    .hero-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(204, 10, 139, 0.35);
        color: #ffffff;
        opacity: 0.9;
    }

    .hero-cta:active {
        transform: translateY(0);
    }


@keyframes heroCTAGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(204, 10, 139, 0.4), 0 0 60px rgba(204, 10, 139, 0.15);
    }

    50% {
        box-shadow: 0 0 40px rgba(204, 10, 139, 0.6), 0 0 80px rgba(204, 10, 139, 0.25);
    }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,58,110,0.80) 50%, rgba(30,91,168,0.70) 100%);
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--max-width); margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center;
}
.hero-text { animation: fadeSlideUp 0.8s var(--ease-out) 0.3s both; }
.hero-eyebrow { color: var(--orange-light); margin-bottom: var(--space-4); }
.hero-title { color: var(--white); margin-bottom: var(--space-5); }
.hero-subtitle { color: rgba(255,255,255,0.82); margin-bottom: var(--space-8); }
.hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.hero-chips .chip { background: rgba(255,255,255,0.12); color: var(--white); border-color: rgba(255,255,255,0.2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-10); }
.hero-stat { border-left: 3px solid var(--orange-light); padding-left: var(--space-4); }
.hero-stat-number { font-family: var(--font-heading); font-size: 36px; font-weight: 800; color: var(--white); line-height: 1; }
.hero-stat-label  { color: rgba(255,255,255,0.65); font-size: 14px; margin-top: 4px; }

/* Sector page hero */
.hero-sector { min-height: 75vh; }

/* ── Logo Animation Module ───────────────────────────────── */
.logo-anim-module {
  position: relative; width: 100%;
  background: #0C1C3B;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.logo-anim-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-xl);
  background: #0C1C3B;
}
/* Dark-to-light blue gradient revealed when end-state is shown */
@keyframes moduleBlend {
  0%   { background: #0C1C3B; }
  40%  { background: #1a3a6b; }
  100% { background: linear-gradient(135deg, #1E5BA8 0%, #4A90E2 100%); }
}
.logo-anim-end {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  /* fully opaque — no reflection bleed-through */
  background: #0C1C3B;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
}
.logo-anim-end.visible {
  opacity: 1;
  pointer-events: all;
  animation: moduleBlend 2.5s ease-out 0.3s both;
}
.logo-anim-end .logo-anim-logo { width: 160px; margin-bottom: var(--space-2); }
.logo-anim-end .service-blocks {
  display: flex; gap: var(--space-3); flex-wrap: nowrap; justify-content: center; width: 100%;
}
.service-block {
  padding: 14px 22px; border-radius: var(--radius-md);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--white);
  cursor: pointer; transition: all var(--dur-base) var(--ease-spring);
  text-decoration: none; display: inline-block;
}
.service-block:hover { transform: scale(1.06) translateY(-3px); box-shadow: var(--shadow-lg); }
.service-block-software     { background: var(--blue-primary); }
.service-block-consultancy  { background: var(--pink-primary); }
.service-block-training     { background: var(--orange-primary); }

/* Skip button */
.anim-skip-btn {
  position: absolute; bottom: 12px; right: 12px; z-index: 10;
  padding: 6px 14px; background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8); border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; backdrop-filter: blur(4px);
  transition: all var(--dur-fast);
}
.anim-skip-btn:hover { background: rgba(255,255,255,0.25); color: var(--white); }

/* Reduced motion: show end-state immediately */
@media (prefers-reduced-motion: reduce) {
  .logo-anim-video { display: none !important; }
  .logo-anim-end   { opacity: 1 !important; pointer-events: all !important; }
  .anim-skip-btn   { display: none !important; }
}

/* ── Trust Strip ─────────────────────────────────────────── */
.trust-strip {
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
  border-bottom: 1px solid var(--grey-100);
  padding: var(--space-5) 0;
}
.trust-strip-inner {
  display: flex; align-items: center; gap: var(--space-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: wrap; justify-content: center;
}
.trust-strip-inner::-webkit-scrollbar { display: none; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: var(--radius-full);
  background: var(--white); border: 1px solid var(--grey-100);
  font-size: 13px; font-weight: 600; color: var(--grey-800);
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.trust-badge i { color: var(--success); font-size: 14px; }

/* ── Sector Switcher ─────────────────────────────────────── */
.sector-switcher { background: var(--white); padding: var(--space-10) 0; }
.sector-montage {
  width: 100%; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-bottom: var(--space-6);
  aspect-ratio: 16/5; background: linear-gradient(135deg, var(--blue-primary), var(--purple-primary));
  position: relative;
}
.sector-montage img { width: 100%; height: 100%; object-fit: cover; }
.sector-montage-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1E3A6E, #5B2C91);
  color: var(--white); font-size: 14px; opacity: 0.8; gap: var(--space-4);
}
.sector-tabs {
  display: flex; gap: var(--space-2); overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-1);
  justify-content: center; flex-wrap: wrap;
}
.sector-tabs::-webkit-scrollbar { display: none; }
.sector-tab {
  padding: 12px 22px; border-radius: var(--radius-full);
  font-size: 14px; font-weight: 600; color: var(--grey-600);
  background: var(--grey-50); border: 2px solid var(--grey-100);
  white-space: nowrap; cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none; display: inline-block;
}
.sector-tab:hover,
.sector-tab.active {
  background: var(--blue-primary); color: var(--white);
  border-color: var(--blue-primary); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-8); border: 1px solid var(--grey-100);
  box-shadow: var(--shadow-sm); transition: all var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--grey-200); }
.card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4); font-size: 22px;
}
.card-icon-blue   { background: var(--blue-pale); color: var(--blue-primary); }
.card-icon-pink   { background: #FDF2F8; color: var(--pink-primary); }
.card-icon-orange { background: #FFF7ED; color: var(--orange-primary); }
.card-icon-green  { background: #F0FDF4; color: var(--success); }
.card-icon-purple { background: #EDE7F6; color: var(--purple-primary); }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; margin-bottom: var(--space-3); }
.card-text  { color: var(--grey-600); font-size: 15px; line-height: 1.6; }

/* Challenge card */
.challenge-card { border-left: 4px solid var(--orange-primary); }
.challenge-card:hover { border-left-color: var(--blue-primary); }
.challenge-stat { font-size: 28px; font-weight: 800; font-family: var(--font-heading); color: var(--orange-primary); line-height: 1; margin-bottom: var(--space-2); }

/* AI Agent card */
.agent-card { position: relative; overflow: hidden; }
.agent-card-tag {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: var(--blue-pale); color: var(--blue-primary);
  padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
}
.agent-card-tag.new { background: #F0FDF4; color: var(--success); }
.agent-card-tag.coming { background: var(--grey-50); color: var(--grey-600); }

/* Differentiator card */
.diff-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10);
  align-items: center; padding: var(--space-12) 0;
  border-bottom: 1px solid var(--grey-100);
}
.diff-card:last-child { border-bottom: none; }
.diff-card.reverse .diff-image { order: -1; }
.diff-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 16/9; }
.diff-image img { width: 100%; height: 100%; object-fit: cover; }
.diff-number { font-size: 64px; font-weight: 900; font-family: var(--font-heading); color: var(--grey-100); line-height: 1; margin-bottom: var(--space-2); }
.diff-label  { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-primary); margin-bottom: var(--space-3); }
.diff-quote  { font-size: 20px; font-weight: 600; font-family: var(--font-heading); margin-bottom: var(--space-4); color: var(--grey-800); line-height: 1.4; }

/* ── Case Study ──────────────────────────────────────────── */
.case-study {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A6E 100%);
  border-radius: var(--radius-xl); padding: var(--space-12);
  color: var(--white); position: relative; overflow: hidden;
}
.case-study::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(74,144,226,0.15);
}
.case-study-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: var(--space-8) 0; }
.case-study-metric-number { font-size: 42px; font-weight: 800; font-family: var(--font-heading); color: var(--orange-light); line-height: 1; }
.case-study-metric-label  { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 4px; }
.case-study-quote { border-left: 4px solid var(--orange-light); padding-left: var(--space-5); font-size: 18px; font-style: italic; color: rgba(255,255,255,0.9); }

/* ── Section Headers ─────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: var(--space-12); }
.section-header .overline { color: var(--blue-primary); margin-bottom: var(--space-3); display: block; }
.section-header .h2 { margin-bottom: var(--space-4); }
.section-header .body-lg { color: var(--grey-600); max-width: 680px; margin: 0 auto; }

/* ── CTA Band ────────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--purple-primary) 100%);
  padding: var(--space-16) 0; text-align: center; color: var(--white);
}
.cta-band .h2 { color: var(--white); margin-bottom: var(--space-4); }
.cta-band p   { color: rgba(255,255,255,0.85); margin-bottom: var(--space-8); font-size: 19px; }
.cta-actions  { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* Demo Form */
.demo-form { max-width: 520px; margin: var(--space-8) auto 0; }
.demo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.form-field:last-of-type { margin-bottom: 0; }
.demo-form-grid .form-field { margin-bottom: 0; }
.form-label { font-size: 13px; font-weight: 600; color: var(--grey-800); }
.form-input, .form-select {
  padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--grey-200); background: var(--white);
  color: var(--grey-800); font-size: 15px; width: 100%;
  transition: all var(--dur-fast);
}
.form-input::placeholder { color: var(--grey-400); }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--blue-primary); background: var(--white); box-shadow: 0 0 0 3px rgba(30,91,168,0.15); }
.form-select option { background: var(--white); color: var(--grey-800); }

/* Dark variant — used inside .cta-band (Index.cshtml's quick demo form sits on a dark gradient) */
.cta-band .form-label { color: rgba(255,255,255,0.8); }
.cta-band .form-input, .cta-band .form-select {
  border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: var(--white);
}
.cta-band .form-input::placeholder { color: rgba(255,255,255,0.4); }
.cta-band .form-input:focus, .cta-band .form-select:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); box-shadow: none; }
.cta-band .form-select option { background: var(--grey-800); color: var(--white); }

/* ── Testimonials ────────────────────────────────────────── */
.testimonial-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-8); border: 1px solid var(--grey-100);
  box-shadow: var(--shadow-sm);
}
.testimonial-stars { color: var(--orange-light); font-size: 16px; margin-bottom: var(--space-4); letter-spacing: 2px; }
.testimonial-text  { font-size: 17px; font-style: italic; color: var(--grey-600); line-height: 1.65; margin-bottom: var(--space-5); }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-primary), var(--purple-primary));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--white); flex-shrink: 0;
}
.testimonial-name  { font-weight: 600; font-size: 15px; }
.testimonial-role  { font-size: 13px; color: var(--grey-600); }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  padding: var(--space-4) 0; background: var(--off-white);
  border-bottom: 1px solid var(--grey-100);
  margin-top: var(--nav-height);
}
.breadcrumb-inner { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.breadcrumb-item { color: var(--grey-600); }
.breadcrumb-item a:hover { color: var(--blue-primary); }
.breadcrumb-sep  { color: var(--grey-400); }
.breadcrumb-item.active { color: var(--blue-primary); font-weight: 600; }

/* ── How It Works ────────────────────────────────────────── */
.how-step {
  display: flex; gap: var(--space-6); align-items: flex-start;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--grey-100);
  box-shadow: var(--shadow-sm); transition: all var(--dur-base) var(--ease-out);
}
.how-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.how-step-num {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-primary); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; font-family: var(--font-heading);
}
.how-step-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; margin-bottom: var(--space-2); }
.how-step-text  { font-size: 15px; color: var(--grey-600); }

/* ── Team ────────────────────────────────────────────────── */
.team-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-8); text-align: center;
  border: 1px solid var(--grey-100); box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--ease-out);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.team-avatar {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto var(--space-4);
  background: linear-gradient(135deg, var(--blue-primary), var(--purple-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: var(--white);
  font-family: var(--font-heading);
}
.team-name { font-family: var(--font-heading); font-weight: 700; font-size: 20px; margin-bottom: 4px; }
.team-title { color: var(--blue-primary); font-size: 14px; font-weight: 600; margin-bottom: var(--space-4); }
.team-bio   { color: var(--grey-600); font-size: 15px; line-height: 1.6; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--black); color: rgba(255,255,255,0.7);
  padding: var(--space-20) 0 var(--space-8);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-16); }
.footer-brand .nav-logo img,
.footer-brand .footer-logo img { filter: brightness(0) invert(1); height: 56px; mix-blend-mode: normal; }
.footer-brand .footer-logo {
  display: block;
  margin-bottom: var(--space-4);
}
.footer-brand .footer-logo img {
  height: 96px;
  width: auto;
  max-width: 100%;
  display: block;
}
.footer-brand p { margin-top: var(--space-4); font-size: 15px; line-height: 1.7; }
.footer-col-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: var(--space-5); }
.footer-link { display: block; font-size: 14px; padding: 4px 0; transition: color var(--dur-fast); }
.footer-link:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-8);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  font-size: 13px;
}
.footer-social { display: flex; gap: var(--space-4); }
.footer-social a { font-size: 18px; transition: color var(--dur-fast); }
.footer-social a:hover { color: var(--white); }

/* ── Metrics Bar ─────────────────────────────────────────── */
.metrics-bar {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-light));
  padding: var(--space-10) 0;
}
.metrics-bar-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
  text-align: center; color: var(--white);
}
.metric-number { font-family: var(--font-heading); font-size: 40px; font-weight: 800; line-height: 1; }
.metric-label  { font-size: 14px; margin-top: 6px; opacity: 0.85; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sprinkleBurst {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes counterUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-up { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.anim-fade-up.in-view { opacity: 1; transform: translateY(0); }
.anim-delay-1 { transition-delay: 100ms; }
.anim-delay-2 { transition-delay: 200ms; }
.anim-delay-3 { transition-delay: 300ms; }
.anim-delay-4 { transition-delay: 400ms; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1280px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* Shrink the static page-hero height on smaller screens so it stays
   readable on phones without becoming a wall of empty space. */
@media (max-width: 768px) {
  :root { --page-hero-height: 380px; }
}

@media (max-width: 1023px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; gap: var(--space-10); }
  .hero-stats   { justify-items: start; }
  .hero-actions { justify-content: center; }
  .hero-chips   { justify-content: center; }
  .logo-anim-module { max-width: 520px; margin: 0 auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .metrics-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .diff-card { grid-template-columns: 1fr; }
  .diff-card.reverse .diff-image { order: 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 767px) {
  :root { --space-20: 60px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .case-study-metrics { grid-template-columns: 1fr; }
  .demo-form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .metrics-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .sector-tabs { justify-content: flex-start; }
  .cta-actions { flex-direction: column; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — Full pass for 320px–768px screens
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (max 768px) ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Container padding */
  .container { padding: 0 var(--space-4); }

  /* Section spacing */
  .section    { padding: var(--space-12) 0; }
  .section-sm { padding: var(--space-8) 0; }
  .section-lg { padding: var(--space-16) 0; }

  /* Section headers */
  .section-header { margin-bottom: var(--space-8); }
  .section-header .body-lg { font-size: 16px; }

  /* Buttons — full width on very small screens */
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero-actions .btn { text-align: center; justify-content: center; width: 100%; }
  .btn-lg { padding: 16px 24px; font-size: 16px; }

  /* Cards */
  .card { padding: var(--space-6); }
  .case-study { padding: var(--space-8); }
  .case-study::before { display: none; }

  /* Trust strip — wraps nicely */
  .trust-strip-inner { gap: var(--space-2); }
  .trust-badge { font-size: 12px; padding: 6px 12px; }

  /* Metrics bar */
  .metrics-bar-inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .metric-number { font-size: 32px; }

  /* Footer */
  .footer { padding: var(--space-12) 0 var(--space-6); }
  .footer-grid { gap: var(--space-8); margin-bottom: var(--space-10); }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-3); }
  .footer-social { justify-content: center; }

  /* Hero stats panel */
  .hero-stat-number { font-size: 28px; }

  /* Diff cards */
  .diff-card { padding: var(--space-8) 0; gap: var(--space-6); }
  .diff-number { font-size: 48px; }
  .diff-quote  { font-size: 18px; }
}

/* ── Mobile (max 480px) ───────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Homepage hero ── */
  .home-hero-content {
    grid-template-columns: 1fr !important;
    padding: var(--space-8) var(--space-4) !important;
    gap: var(--space-8) !important;
    min-height: unset !important;
  }
  .logo-anim-wrapper { width: 100% !important; }
  .logo-anim-module  { max-width: 100% !important; aspect-ratio: 4/3 !important; }
  .hero-title-large  { font-size: clamp(28px, 8vw, 42px) !important; margin-bottom: 14px !important; }
  .hero-sub-large    { font-size: 17px !important; }
  .hero-body-large   { font-size: 15px !important; margin-bottom: 20px !important; }
  .hero-eyebrow-large { font-size: 12px !important; padding: 10px 18px !important; }

  /* Sector tiles — 2 col on mobile */
  .sector-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .sector-feature-item { padding: 14px 6px 12px !important; font-size: 12px !important; }
  .sector-feature-item i { font-size: 18px !important; margin-bottom: 6px !important; }

  /* Hero chips — wrap and shrink */
  .hero-chips-large { flex-wrap: wrap !important; gap: 8px !important; }
  .hero-chip-large  { font-size: 12px !important; padding: 10px 14px !important; }

  /* ── Sector / Service page heroes ── */
  .res-hero, .hero-sector {
    min-height: 60vh !important;
    background-attachment: scroll !important;
  }
  .hero-content {
    grid-template-columns: 1fr !important;
    padding: var(--space-10) var(--space-4) !important;
    gap: var(--space-6) !important;
  }

  /* Stats panels inside heroes */
  .hero-stats[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Two-col tick list → single col */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Chips row in hero */
  div[style*="display:flex;gap:var(--space-3);flex-wrap:wrap"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Why Brolly alternating rows ── */
  .wb-alt-row {
    flex-direction: column !important;
    gap: var(--space-6) !important;
    padding: var(--space-8) var(--space-4) !important;
  }
  .wb-alt-row.wb-reverse { flex-direction: column !important; }
  .wb-alt-img  { width: 100% !important; max-width: 100% !important; }
  .wb-alt-img img { width: 100% !important; border-radius: var(--radius-md) !important; }
  .wb-alt-copy { width: 100% !important; }
  .wb-alt-title { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Why Brolly page rows */
  .wb-row {
    flex-direction: column !important;
    padding: var(--space-8) var(--space-4) !important;
    gap: var(--space-6) !important;
  }
  .wb-row.reverse { flex-direction: column !important; }
  .wb-row-img { width: 100% !important; }
  .wb-row-img img { width: 100% !important; height: 220px !important; object-fit: cover; border-radius: var(--radius-md); }
  .wb-row-copy { width: 100% !important; }
  .wb-row-title { font-size: clamp(20px, 5vw, 28px) !important; }

  /* ── About / Team page ── */
  .leader-grid, .ops-grid {
    grid-template-columns: 1fr !important;
  }
  .leadership-strip {
    grid-template-columns: 1fr !important;
  }

  /* ── Brolly AI Assistant grid ── */
  .grid-4 { grid-template-columns: 1fr !important; }

  /* ── Solution cards ── */
  .grid-3 { grid-template-columns: 1fr !important; }

  /* ── CTA Band ── */
  .cta-band { padding: var(--space-10) var(--space-4); }
  .cta-band .h2 { font-size: clamp(22px, 6vw, 32px); }
  .cta-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* ── Testimonial cards ── */
  .testimonial-text { font-size: 15px; }

  /* ── How-it-works steps ── */
  .how-step { flex-direction: column; gap: var(--space-4); }

  /* ── Breadcrumb ── */
  .breadcrumb-inner { font-size: 12px; flex-wrap: wrap; }

  /* ── Typography scale down ── */
  .h1 { font-size: clamp(26px, 7vw, 36px); }
  .h2 { font-size: clamp(22px, 6vw, 30px); }
  .h3 { font-size: clamp(18px, 5vw, 24px); }
  .body-lg { font-size: 16px; }

  /* ── Nav logo size ── */
  .nav-logo img { height: 52px !important; }
  .nav-inner { padding: 0 var(--space-4); }

  /* ── Footer nav ── */
  .footer-grid { gap: var(--space-6); }
  .footer-brand p { font-size: 14px; }

  /* ── Sector tabs wrap ── */
  .sector-tabs { flex-wrap: wrap; gap: 8px; }
  .sector-tab  { font-size: 12px; padding: 10px 16px; }

  /* ── Demo form ── */
  .demo-form { padding: 0 var(--space-4); }

  /* ── Scroll overflow prevention ── */
  section, .section { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }
}

/* ── Brand strip (centred logo before footer) ─────────────── */
.brand-strip {
  background: var(--off-white, #F8FAFC);
  border-top: 1px solid var(--grey-100, #E5E7EB);
  padding: var(--space-12, 48px) 0;
  text-align: center;
}
.brand-strip-logo { display: inline-block; margin: 0 auto; }
.brand-strip-logo img {
  height: 80px;
  width: auto;
  opacity: 0.9;
  transition: opacity var(--dur-base, .25s) ease;
  mix-blend-mode: multiply;
}
.brand-strip-logo:hover img { opacity: 1; }
.brand-strip-tagline {
  margin-top: 12px;
  font-size: 14px;
  color: var(--grey-600, #64748B);
  font-style: italic;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .brand-strip { padding: var(--space-8, 32px) 0; }
  .brand-strip-logo img { height: 60px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE SAFETY NET — targets inline style="..." grids in views
   ═══════════════════════════════════════════════════════════ */

/* Global overflow guard — stops a rogue wide child scrolling the whole page */
html, body { max-width: 100%; overflow-x: hidden; }

/* Collapse 3- and 4-column inline grids */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* Collapse the 2-column inline grids used across About / Services /
   Contact / WhyBrolly / Solutions (hero text next to stats or image). */
@media (max-width: 900px) {
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }
}

/* Reduce the hero two-col on the homepage below 900px */
@media (max-width: 900px) {
  .home-hero-content {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
    padding: var(--space-8) var(--space-4) !important;
  }
}

/* Contact form info grid has a 1.2fr 1fr split — already covered above. */

/* Service hero three buttons: wrap nicely */
@media (max-width: 600px) {
  .btn-lg { padding: 14px 20px !important; font-size: 15px !important; }
  .hero-actions, .cta-actions { flex-direction: column !important; align-items: stretch !important; width: 100%; }
  .hero-actions .btn, .cta-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* Trust strip — let badges wrap cleanly on narrow screens */
@media (max-width: 600px) {
  .trust-strip-inner { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
}

/* Contact page form card padding on mobile */
@media (max-width: 640px) {
  .card[style*="padding:40px"] { padding: var(--space-5) !important; }
  .section-header .h2 { font-size: clamp(22px, 6vw, 30px) !important; }
}

/* Why Brolly CTA split (image column) — just stack on mobile */
@media (max-width: 900px) {
  .why-cta-img { margin-top: var(--space-6); }
}

/* Home case study: ensure the 3-col metrics collapse on mobile */
@media (max-width: 600px) {
  .case-study-metrics { grid-template-columns: 1fr !important; }
}