/* Stowe Holdings website — styles for index.html. Version 1.0.2 */
  :root{
    /* Stowe brand tokens (2026 re-skin) */
    --stowe-navy:#102936;
    --stowe-gold:#d8b979;
    --stowe-teal:#75b9b0;
    --stowe-paper:#fffdf8;
    --stowe-slate:#54617a;
    /* Darker derivatives of gold/teal, AA-contrast-safe for small text/links
       on light backgrounds. Buttons, stat numbers and dark-surface accents
       use the literal client tokens above; small text-on-light uses these. */
    --stowe-teal-deep:#2f6d63;
    --stowe-gold-deep:#8a6d2f;

    /* Navy depth ramp, re-anchored around --stowe-navy (close to the old
       #0b1730 ramp, so this is a refinement rather than a hard swap) */
    --navy-950:#0a1d26;
    --navy-900:var(--stowe-navy);
    --navy-800:#1c3d4d;
    --navy-700:#28536a;

    /* Accent roles, mapped onto the new palette:
       gold  = primary CTAs, stat numbers, icon fills
       teal  = secondary/outline buttons, hover states, card accents */
    --blue-500:var(--stowe-gold);
    --blue-400:var(--stowe-gold);
    --cyan-400:var(--stowe-teal);
    --amber-400:var(--stowe-gold);
    --green-500:var(--stowe-teal);
    --paper:var(--stowe-paper);
    --ink:var(--stowe-navy);
    --ink-soft:var(--stowe-slate);
    --line:#e3e7f0;
    --radius:14px;

    /* News section — the deep teal of the "Stowe News" bulletin
       masthead, with cool white cards, so the section matches the
       bulletins it carries. (Token names keep the old "blog" prefix.) */
    --blog-bg-1:#1d4f5c;
    --blog-bg-2:#0f2f3a;
    --blog-cream:#f4f8f8;
    --blog-accent:#8fd0c7;
    --blog-accent-deep:#2f6f7a;
  }
  *{box-sizing:border-box;}
  /* Force background colours/images to render when this page is printed
     or exported to PDF, regardless of the browser's "print backgrounds"
     setting (off by default in Chrome/Edge). Without this, every navy
     section (dashboard, Who We Are, CEO video, Your Advantage, footer)
     loses its background and leaves white text sitting on white — the
     copy is still there, just unreadable. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  /* Typography: one clean grotesque (Archivo) end to end, headlines
     through data. Archivo has enough character — sturdy, slightly
     technical, confident at large sizes — to avoid the "default Helvetica-
     alike" generic feel without reaching for a serif; headlines set at a
     heavier 800 weight so they read as a deliberate statement rather than
     scaled-up body text. Inter stays the body/paragraph face since nobody
     reads a font choice into running copy — the visible identity change
     is entirely in how the headlines and stat digits are weighted. */
  h1,h2,h3,.display{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

  /* ---------- Reading progress bar ----------
     z-index above the header (50) so the fill is visible drawn over its
     top edge in both header states, transparent and scrolled/white. */
  .scroll-progress{
    position:fixed;top:0;left:0;right:0;height:3px;z-index:90;
    background:rgba(255,255,255,.08);pointer-events:none;
  }
  .scroll-progress-bar{
    height:100%;width:0%;
    background:linear-gradient(90deg,var(--stowe-gold),var(--stowe-teal));
    transition:width .1s linear;
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-progress-bar{transition:none;}
  }

  /* ---------- Utility bar ---------- */
  .utility-bar{
    background:var(--navy-950);
    color:#c7d0e6;
    font-size:12.5px;
  }
  .utility-bar .wrap{
    display:flex;justify-content:flex-end;gap:26px;
    padding:9px 32px;
  }
  .utility-bar a{display:flex;align-items:center;gap:6px;opacity:.85;transition:opacity .15s;}
  .utility-bar a:hover{opacity:1;color:#fff;}
  .utility-bar svg{width:13px;height:13px;flex:none;}

  /* ---------- Header ----------
     Mainly white, but not a flat opaque bar — a frosted "Acrylic/Mica"
     translucent white (same glass treatment used on the dashboard cards,
     footprint panel and floating hero card elsewhere on this page), so
     it reads as white at a glance while still letting a soft hint of
     whatever's scrolled underneath show through, rather than a hard-
     edged white slab sitting on top of the page. The bottom edge is a
     soft shadow fade instead of a hairline rule, for the same reason.
     Kept as CSS custom properties (rather than flattening straight into
     the rules below) since both nav.tabs and .icon-btn key off these
     same variables — one definition instead of duplicating values in
     two places. */
  header.main{
    --nav-fg:var(--navy-900);
    --nav-fg-soft:var(--ink-soft);
    --nav-active:var(--stowe-teal-deep);
    --nav-hover-bg:var(--paper);
    --icon-border:var(--line);
    --icon-color:var(--navy-900);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
    box-shadow:0 1px 0 rgba(16,41,54,.06), 0 12px 24px -18px rgba(16,41,54,.18);
    position:sticky;top:0;z-index:50;
  }
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 32px;
    gap:24px;
  }
  .logo{display:flex;align-items:center;flex:none;padding:4px 0;}
  .logo img{display:block;width:auto;height:44px;max-width:200px;object-fit:contain;}
  nav.tabs{display:flex;gap:2px;flex:1;justify-content:center;flex-wrap:wrap;}
  nav.tabs a{
    font-size:13.5px;font-weight:600;color:var(--nav-fg-soft);
    padding:10px 14px;border-radius:8px;transition:.15s;
    white-space:nowrap;
  }
  nav.tabs a:hover{background:var(--nav-hover-bg);color:var(--nav-fg);}
  nav.tabs a.active{color:var(--nav-active);}
  /* Services dropdown — quick-glance list of every offering, including
     the ones that don't have their own page yet. Menu panel is always
     solid/light so it reads the same whether the header is transparent
     (over the hero) or scrolled/white. */
  .nav-dropdown{position:relative;}
  .nav-dropdown>a{display:inline-flex;align-items:center;gap:4px;}
  /* Invisible hover bridge spanning the 6px gap between the trigger link
     and the menu panel below — without it, the cursor crosses a dead
     zone belonging to neither element while moving down into the menu,
     :hover drops, and the menu closes before it can be clicked. */
  .nav-dropdown::after{
    content:"";position:absolute;left:50%;top:100%;
    transform:translateX(-50%);width:230px;height:10px;
  }
  .nav-dropdown-caret{width:9px;height:9px;flex:none;transition:transform .15s ease;}
  .nav-dropdown:hover .nav-dropdown-caret,.nav-dropdown:focus-within .nav-dropdown-caret{transform:rotate(180deg);}
  .nav-dropdown-menu{
    position:absolute;top:calc(100% + 6px);left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:230px;background:#fff;border-radius:12px;border:1px solid var(--line);
    box-shadow:0 20px 40px -16px rgba(16,41,54,.35);
    padding:8px;display:flex;flex-direction:column;gap:1px;
    opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;
    z-index:60;
  }
  .nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown-menu a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-size:13px;font-weight:600;color:var(--navy-900);padding:9px 12px;border-radius:8px;
    white-space:nowrap;
  }
  .nav-dropdown-menu a:hover{background:var(--paper);color:var(--stowe-teal-deep);}
  /* A real pill badge rather than plain small text for pages still being
     built (Demo Centers, Success Hub, Shop Online) — not scoped to
     .nav-dropdown-menu specifically since it's reused on the Success Hub
     preview's "Explore" link (see .sh-teaser) too. */
  .ndm-soon{
    display:inline-block;font-size:9px;font-weight:700;color:#8b96ab;
    text-transform:uppercase;letter-spacing:.04em;
    background:#fff;border:1px solid var(--line);
    padding:2px 7px;border-radius:100px;margin-left:2px;vertical-align:1px;
  }
  .nav-actions{display:flex;align-items:center;gap:14px;flex:none;}
  .icon-btn{
    width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--icon-border);color:var(--icon-color);
    transition:border-color .3s ease, color .3s ease;
  }
  /* Search/menu are UI actions (a future search overlay, mobile nav
     toggle) rather than navigation, so they're <button> elements, not
     dead href="#" links — this strips the native button chrome so they
     still read identically to the anchor-based icon buttons elsewhere. */
  button.icon-btn{background:none;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
  .icon-btn svg{width:15px;height:15px;}

  /* ---------- Side section indicator ----------
     A slim fixed vertical rail (one dot per major section) so a visitor
     can see roughly where they are on a long page and jump around,
     without a second full nav duplicating the header. The active dot is
     toggled by IntersectionObserver watching each section's midpoint
     (see the "Section scroll-spy" script) — pure CSS can't know scroll
     position, so this one part needs JS. Hidden below 980px: on a phone
     you're only ever looking at one section-height at a time, so a
     position rail adds clutter without adding information. */
  .section-nav{
    position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .section-dot{
    position:relative;width:9px;height:9px;border-radius:50%;
    background:rgba(16,41,54,.18);border:1px solid rgba(16,41,54,.22);
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .section-dot:hover{transform:scale(1.3);}
  .section-dot.is-active{
    background:var(--stowe-teal-deep);border-color:var(--stowe-teal-deep);
    transform:scale(1.3);
  }
  .section-dot-tip{
    position:absolute;right:20px;top:50%;transform:translateY(-50%);
    font-size:11px;font-weight:600;color:var(--navy-900);white-space:nowrap;
    background:#fff;border:1px solid var(--line);padding:4px 10px;border-radius:100px;
    opacity:0;pointer-events:none;transition:opacity .15s ease;
    box-shadow:0 6px 16px -8px rgba(16,41,54,.3);
  }
  .section-dot:hover .section-dot-tip{opacity:1;}
  @media (max-width:980px){
    .section-nav{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    /* The real Stowe Holdings head office (head-office-building-2.jpg — a portrait
       phone shot of the building's corner/signage) rather than stock
       photography. It's a tall source image being cropped into a wide
       banner, so background-position is tuned to "center 38%" to keep
       the STOWE sign and windows in frame and let cover crop away the
       sky above and the parking canopy below, rather than the default
       centre crop landing between the two. Gradient on top as a scrim
       so the heading/CTAs stay legible; otherwise kept plain — no glow
       blobs, starburst or dot-grid. */
    background:
      linear-gradient(100deg, rgba(10,29,38,.94) 0%, rgba(10,29,38,.88) 34%, rgba(16,41,54,.74) 62%, rgba(16,41,54,.6) 100%),
      url('../images/head-office-building-2.jpg') center 38%/cover no-repeat;
    color:#fff;
    overflow:hidden;
  }
  /* Shared drift/spin keyframes for the background glow shapes used across
     the page sections below (dashboard, Who We Are, Who We Serve, pillars,
     footprint band, blog, contact, footer) — kept here as one shared
     definition so every section's decorative blobs move independently
     rather than the page reading as a flat, static stack of panels.
     Motion is killed for prefers-reduced-motion below. */
  @keyframes bg-drift-a{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-20px,24px);}
  }
  @keyframes bg-drift-b{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(18px,-22px);}
  }
  @keyframes bg-spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes bg-spin-slow{
    from{transform:rotate(45deg);}
    to{transform:rotate(405deg);}
  }

  .hero-inner{
    position:relative;z-index:2;
    padding:88px 32px 64px;
    display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
    max-width:1240px;margin:0 auto;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(117,185,176,.12);border:1px solid rgba(117,185,176,.35);
    color:var(--cyan-400);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    padding:6px 12px;border-radius:100px;margin-bottom:22px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 0 3px rgba(117,185,176,.25);}
  .hero h1{
    font-size:clamp(34px,4.4vw,58px);
    line-height:1.04;
  }
  .hero h1 .l1{display:block;color:#fff;}
  /* Gradient-clipped text needs its own fallback: `color` is set to a
     plain solid gold FIRST, then -webkit-text-fill-color:transparent
     (not color:transparent) hides that solid fill only where the
     background-clip gradient is actually supported and rendered — e.g.
     print/PDF export, which frequently drops background-image entirely.
     Using color:transparent with no fallback would leave genuinely
     invisible text in exactly those cases, since nothing would be left
     to fall back to. */
  .hero h1 .l2{
    display:block;color:var(--stowe-gold);
    /* The heading's own letter-spacing:-0.015em (fine on l1/l3's single
       words) reads as "Retail.Technology." with almost no gap at this
       font size, so word-spacing pushes the two words back apart without
       loosening the individual letters. */
    word-spacing:.14em;
    background:linear-gradient(90deg,var(--stowe-gold),var(--stowe-teal));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero h1 .l3{display:block;color:#fff;}
  /* Condensed "35+ years" + "what we do" statement, kept inside the first viewport
     (replaces the old two-sentence .hero-sub paragraph — brevity requested).
     The years figure is set as a plain typographic stat (big numeral, thin
     rule, small caption) rather than a coloured pill/badge — reads as a
     confident fact instead of a marketing sticker. */
  .hero-facts{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    margin-top:22px;max-width:480px;
  }
  .hero-stat{
    flex:none;display:flex;align-items:baseline;gap:10px;
    padding-right:18px;border-right:1px solid rgba(255,255,255,.18);
  }
  .hero-stat-num{font-family:'Archivo',sans-serif;font-weight:700;font-size:42px;line-height:1;color:var(--stowe-gold);}
  .hero-stat-plus{font-size:22px;}
  .hero-stat-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9fb0d1;line-height:1.45;}
  .hf-what{margin:0;font-size:14px;line-height:1.6;color:#c7d0e6;}
  @media (max-width:600px){
    .hero-stat{border-right:none;padding-right:0;}
  }
  .cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 22px;border-radius:10px;font-weight:600;font-size:14px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    border:1px solid transparent;cursor:pointer;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--stowe-gold);color:var(--stowe-navy);box-shadow:0 10px 24px -8px rgba(216,185,121,.5);}
  .btn-primary:hover{background:#e2c68e;}
  .btn-outline{border-color:rgba(117,185,176,.55);color:#fff;}
  .btn-outline:hover{border-color:var(--stowe-teal);background:rgba(117,185,176,.12);}
  .hero-visual{position:relative;min-height:360px;}

  /* Hero carousel — replaces the old single static hero image.
     Multiple auto-advancing slides, each with ONE short overlaid statement. */
  .hero-carousel{
    position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;
    box-shadow:0 30px 60px -18px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.12);
    outline-offset:3px;
  }
  .hero-carousel:focus-visible{outline:2px solid var(--stowe-teal);}
  .hc-slide{
    position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transition:opacity .7s ease;
  }
  .hc-slide.is-active{opacity:1;}
  .hc-slide::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(0deg, rgba(10,29,38,.85) 0%, rgba(10,29,38,.15) 55%, rgba(10,29,38,.05) 100%);
  }
  .hc-statement{
    position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
    font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;color:#fff;
    /* frosted glass overlay treatment */
    background:rgba(16,41,54,.42);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;padding:12px 16px;
  }
  .hc-controls{
    position:absolute;top:14px;right:14px;z-index:3;
    display:flex;align-items:center;gap:8px;
  }
  .hc-arrow{
    width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
    background:rgba(16,41,54,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;
  }
  .hc-arrow:hover{background:rgba(117,185,176,.35);}
  .hc-dots{position:absolute;left:16px;top:14px;z-index:3;display:flex;gap:6px;}
  .hc-dot{
    width:8px;height:8px;border-radius:50%;padding:0;border:1px solid rgba(255,255,255,.5);
    background:rgba(255,255,255,.25);cursor:pointer;
  }
  .hc-dot.is-active{background:var(--stowe-gold);border-color:var(--stowe-gold);}

  @media (prefers-reduced-motion: reduce){
    .hc-slide{transition:none;}
    .value-strip::before,.value-strip::after,
    .dash::before,.dash::after,
    .who-we-are::before,.who-we-are::after,
    .serve::before,.serve::after,
    .pillars::before,.pillars::after,
    .band::before,.band::after,
    .blog::after,.blog-glow,
    .contact::before,.contact::after,
    footer.site::before,footer.site::after,
    .serve-shapes .ss-ring,.serve-shapes .ss-diamond,.serve-shapes .ss-dot,
    .pillars-shapes .ps-ring,.pillars-shapes .ps-diamond,.pillars-shapes .ps-dot,
    .led{
      animation:none !important;opacity:1;
    }
    /* The ping ring should disappear rather than freeze mid-pulse as a
       static halo, so it gets its own opacity target instead of the 1
       every other entry in this list uses. */
    .led::after,.fp-chip.is-hq::after{animation:none !important;opacity:0;}
  }

  /* ---------- Dashboard strip ---------- */
  .dash{
    background:var(--navy-900);
    border-top:1px solid var(--navy-700);
    color:#fff;
    position:relative;overflow:hidden;
  }
  .dash::before{
    content:"";position:absolute;top:-160px;left:6%;width:420px;height:420px;
    background:radial-gradient(circle, rgba(216,185,121,.1), transparent 70%);
    pointer-events:none;
    animation:bg-drift-a 19s ease-in-out infinite;
  }
  .dash::after{
    content:"";position:absolute;bottom:-200px;right:4%;width:400px;height:400px;
    background:radial-gradient(circle, rgba(117,185,176,.12), transparent 70%);
    pointer-events:none;
    animation:bg-drift-b 24s ease-in-out infinite;
  }
  .dash-inner{padding:26px 32px;max-width:1240px;margin:0 auto;position:relative;z-index:1;}
  .dash-head{
    display:flex;align-items:center;justify-content:center;gap:18px;position:relative;
    margin-bottom:18px;
  }
  .dash-label{
    display:inline-flex;align-items:center;gap:9px;
    text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.18em;
    color:#7f92bb;text-transform:uppercase;
    font-family:'Archivo',sans-serif;
  }
  /* Breathing LED — a small pulsing status dot standing in for "this
     data is live," used on the dashboard label and on each stat card.
     Opacity+scale "breathe" rather than a hard blink, with a slower ping
     ring behind it, reads as a calm status light rather than an alert.
     Each card gets its own animation-delay (set inline, see markup) so
     the five lights breathe slightly out of phase with each other,
     instead of blinking in unison like a single shared timer would. */
  @keyframes led-breathe{
    0%,100%{opacity:.5;transform:scale(.85);}
    50%{opacity:1;transform:scale(1.15);}
  }
  @keyframes led-ping{
    0%{transform:scale(.6);opacity:.7;}
    70%,100%{transform:scale(2.1);opacity:0;}
  }
  .led{
    position:relative;width:7px;height:7px;border-radius:50%;flex:none;
    background:var(--stowe-teal);
    animation:led-breathe 2.4s ease-in-out infinite;
  }
  .led::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    border:1px solid rgba(117,185,176,.5);
    animation:led-ping 2.4s ease-in-out infinite;
  }
  .dash-card .led{position:absolute;top:14px;right:14px;}
  /* "Our Journey" link sits above the stat grid, not inside it, so it
     reads as dashboard-level navigation rather than a fifth stat tile. */
  .dash-journey-link{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    font-size:12px;font-weight:700;color:var(--stowe-teal);
    display:inline-flex;align-items:center;gap:4px;
  }
  .dash-journey-link:hover{color:var(--stowe-gold);}
  .dash-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  }
  .dash-card{
    /* frosted glass ("Acrylic/Mica") tile */
    position:relative;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    border-radius:12px;padding:16px;transition:.2s;
  }
  .dash-card:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);}
  .dash-card .di{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
  .dash-card .di svg{width:15px;height:15px;}
  .dash-card .dv{font-family:'Archivo',sans-serif;font-size:23px;font-weight:700;}
  .dash-card .dl{font-size:11.5px;color:#9fb0d1;margin-top:2px;}
  .dash-card .dtag{font-size:10.5px;color:var(--cyan-400);margin-top:8px;font-weight:600;}
  .dash-foot{
    text-align:center;font-size:11.5px;color:#647394;margin-top:16px;
  }
  /* Company stat block, moved up from the footprint band into the dashboard */
  .dash-stats-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
    margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  }
  .dash-stat{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    border-radius:12px;padding:16px;text-align:center;
  }
  .dash-stat .sv{font-family:'Archivo',sans-serif;font-size:24px;font-weight:700;color:var(--stowe-gold);}
  .dash-stat .sl{font-size:11px;color:#9fb0d1;margin-top:4px;}

  /* ---------- Value strip ---------- */
  /* Fluid section seams: a soft ~140px fade layered on top of each
     section's own background, tinted toward the section it follows, so
     navy<->light boundaries read as a gradual bleed instead of a hard
     ruled line — the page feels like one continuous surface rather than
     a stack of separate panels. */
  .value-strip{
    background:linear-gradient(to bottom, rgba(10,29,38,.08), transparent 140px), #fff;
    position:relative;overflow:hidden;
  }
  .value-strip::before{
    content:"";position:absolute;top:-110px;right:8%;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle, rgba(117,185,176,.1), transparent 70%);
    pointer-events:none;animation:bg-drift-a 22s ease-in-out infinite;
  }
  .value-strip::after{
    content:"";position:absolute;bottom:-130px;left:14%;width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle, rgba(216,185,121,.1), transparent 70%);
    pointer-events:none;animation:bg-drift-b 27s ease-in-out infinite;
  }
  .value-inner{
    max-width:1240px;margin:0 auto;padding:52px 32px;
    display:grid;grid-template-columns:.9fr 1.4fr;gap:44px;align-items:center;
    position:relative;z-index:1;
  }
  .value-inner h2{font-size:27px;line-height:1.25;color:var(--navy-900);}
  .value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .value-card{
    border:1px solid var(--line);border-radius:var(--radius);padding:20px;
    transition:.2s;
  }
  .value-card:hover{border-color:var(--stowe-teal-deep);box-shadow:0 12px 26px -14px rgba(117,185,176,.35);transform:translateY(-3px);}
  .value-card .vi{width:38px;height:38px;border-radius:10px;background:rgba(216,185,121,.16);color:var(--stowe-navy);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
  .value-card .vi svg{width:19px;height:19px;}
  .value-card h4{font-size:14.5px;font-weight:700;color:var(--navy-900);margin-bottom:4px;}
  .value-card p{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.5;}

  /* ---------- Who We Are — company background/purpose ----------
     Sits ahead of Who We Serve. The years-in-business figure repeats the
     hero's stat treatment (big numeral, thin rule, small caption) rather
     than a second badge/pill, so the emphasis reads consistent rather
     than like two different "look at this number" gimmicks.
     Two-column layout (copy left, head-office photo right) rather than
     the old single centered block — a real photo of a real building
     grounds the "35+ years, national network" copy in something
     concrete, and gives this section a second visual register instead
     of being the only all-text block on the page. */
  .who-we-are{
    position:relative;overflow:hidden;color:#fff;padding:72px 0;
    background:linear-gradient(to bottom, rgba(255,255,255,.1), transparent 140px), linear-gradient(160deg,var(--navy-900),var(--navy-800) 120%);
  }
  .who-we-are::before{
    content:"";position:absolute;top:-140px;left:-100px;width:360px;height:360px;border-radius:50%;
    background:rgba(117,185,176,.16);filter:blur(70px);pointer-events:none;
    animation:bg-drift-a 20s ease-in-out infinite;
  }
  .who-we-are::after{
    content:"";position:absolute;bottom:-140px;right:-80px;width:300px;height:300px;border-radius:50%;
    background:rgba(216,185,121,.14);filter:blur(70px);pointer-events:none;
    animation:bg-drift-b 25s ease-in-out infinite;
  }
  .who-we-are-grid{
    max-width:1100px;margin:0 auto;padding:0 32px;position:relative;z-index:1;
    display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;
  }
  .who-we-are .section-eyebrow{color:var(--stowe-teal);}
  .who-we-are h2{color:#fff;font-size:33px;line-height:1.2;margin-top:14px;}
  /* Company motto — sets the emotional register for the whole page:
     passion + innovation, not just uptime stats. Set in Archivo like
     everything else now, but at a light weight with open tracking so it
     still reads as a distinct, quieter voice next to the bold headline
     above it — that contrast used to come from switching to an italic
     serif; here it comes from weight and spacing instead. */
  .wa-motto{
    font-family:'Archivo',sans-serif;font-weight:500;
    font-size:14px;letter-spacing:.03em;text-transform:uppercase;
    color:var(--stowe-gold);margin-top:12px;
  }
  .who-we-are p{color:#c7d0e6;font-size:15px;line-height:1.85;margin-top:18px;}
  .who-we-are-stat{
    display:inline-flex;align-items:center;gap:18px;margin-top:36px;
    padding-top:28px;border-top:1px solid rgba(255,255,255,.14);
  }
  .wa-num{font-family:'Archivo',sans-serif;font-size:48px;font-weight:700;color:var(--stowe-gold);line-height:1;}
  .wa-plus{font-size:26px;}
  .wa-divider{width:1px;height:38px;background:rgba(255,255,255,.2);}
  .wa-label{font-size:12.5px;color:#9fb0d1;line-height:1.5;text-align:left;max-width:190px;}
  /* Head-office photo card — framed like the rest of the site's photo
     treatments (rounded corners, soft shadow, gradient caption bar; see
     .hc-statement in the hero carousel for the same idea). */
  .who-we-are-photo{
    position:relative;border-radius:16px;overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.55);
  }
  .who-we-are-photo img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;}
  /* Right-aligned and width-capped rather than spanning the full photo:
     the badge photo below sits over the bottom-left corner (48% wide,
     plus it spills further left), so a full-width caption would run
     straight under it and get its text covered. Keeping the caption to
     the right half only guarantees it never overlaps the badge's
     footprint, at any viewport width the badge's own media query covers. */
  .wap-caption{
    position:absolute;right:0;bottom:0;left:52%;padding:16px 18px;
    font-size:12px;font-weight:600;color:#fff;letter-spacing:.02em;text-align:right;
    background:linear-gradient(90deg, transparent, rgba(10,29,38,.82) 40%);
  }
  /* Second, smaller photo overlapping the main one's bottom-left corner —
     the classic "place + people" about-us pairing: the building shows
     where Stowe works, this badge (the team at the office-opening open
     day) shows who. Framed with a solid navy border rather than a soft
     shadow alone so it visibly reads as a second, separate photo instead
     of a torn edge on the first. */
  .wap-badge{
    position:absolute;left:-22px;bottom:-22px;width:48%;z-index:2;
    border-radius:10px;overflow:hidden;border:3px solid var(--navy-900);
    box-shadow:0 16px 32px -16px rgba(0,0,0,.6);
  }
  .wap-badge img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;}
  @media (max-width:860px){
    .who-we-are-grid{grid-template-columns:1fr;text-align:center;}
    .who-we-are-stat{margin-left:auto;margin-right:auto;}
    .wa-label{text-align:left;}
    .who-we-are-photo{max-width:360px;margin:8px auto 0;}
    .wap-badge{width:150px;left:-10px;bottom:-16px;}
  }
  @media (max-width:600px){
    .who-we-are-stat{text-align:left;}
  }

  /* ---------- Who we serve (retail gap addressed) ---------- */
  .serve{
    background:linear-gradient(to bottom, rgba(10,29,38,.06), transparent 140px), var(--paper);
    padding:64px 0;position:relative;overflow:hidden;
  }
  .serve::before{
    content:"";position:absolute;top:-120px;right:-90px;width:360px;height:360px;
    background:radial-gradient(circle, rgba(216,185,121,.14), transparent 70%);
    pointer-events:none;z-index:-1;
    animation:bg-drift-a 18s ease-in-out infinite;
  }
  /* Faint dot-grid texture across the section, fading out toward the
     edges rather than tiling edge-to-edge — gives the paper background
     some depth beyond the glow blob and the corner linework (.ss-ring
     etc.) without competing with either. Static, so no reduced-motion
     handling needed. */
  .serve::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(rgba(16,41,54,.07) 1px, transparent 1px);
    background-size:24px 24px;
    mask-image:radial-gradient(ellipse 65% 70% at 50% 45%, rgba(0,0,0,.85), transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 65% 70% at 50% 45%, rgba(0,0,0,.85), transparent 75%);
  }
  /* Second glow blob, on .serve-shapes rather than a second .serve::after
     (a duplicate ::after selector doesn't stack two independent layers —
     it's one pseudo-element, so the background shorthand below would
     silently wipe out the dot-grid texture set above by resetting every
     background-* sub-property, and the mixed inset/bottom+left+width+
     height would fight each other for box geometry). .serve-shapes is
     already an absolutely-positioned overlay with its own ::before free,
     so the blob gets a real, independent layer there instead. */
  .serve-shapes::before{
    content:"";position:absolute;bottom:-100px;left:-80px;width:280px;height:280px;
    background:radial-gradient(circle, rgba(117,185,176,.12), transparent 70%);
    pointer-events:none;
    animation:bg-drift-b 23s ease-in-out infinite;
  }
  /* Extra linework — thin rotating rings/diamond/dot layered above the
     soft glow blobs but below the cards, so this section (called out as
     needing more depth) reads with more going on than a flat glow. */
  .serve-shapes{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
  .serve-shapes .ss-ring{
    position:absolute;top:6%;right:3%;width:150px;height:150px;border-radius:50%;
    border:1px solid rgba(117,185,176,.32);
    animation:bg-spin 42s linear infinite;
  }
  .serve-shapes .ss-ring::after{
    content:"";position:absolute;inset:18px;border-radius:50%;
    border:1px solid rgba(216,185,121,.24);
  }
  .serve-shapes .ss-diamond{
    position:absolute;bottom:8%;left:2%;width:58px;height:58px;
    border:1px solid rgba(216,185,121,.34);
    transform:rotate(45deg);
    animation:bg-spin-slow 30s linear infinite;
  }
  .serve-shapes .ss-dot{
    position:absolute;top:2%;left:48%;width:9px;height:9px;border-radius:50%;
    background:var(--stowe-teal);opacity:.4;
    animation:bg-drift-a 12s ease-in-out infinite;
  }
  .section-head{max-width:640px;margin:0 auto 40px;text-align:center;position:relative;z-index:1;}
  .section-eyebrow{
    font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--stowe-teal-deep);margin-bottom:10px;
  }
  .section-head h2{font-size:30px;color:var(--navy-900);line-height:1.2;}
  .section-head p{margin-top:12px;font-size:14.5px;color:var(--ink-soft);line-height:1.7;}
  .serve-grid{max-width:1240px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1;}
  .serve-card{
    background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .serve-card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -20px rgba(16,41,54,.32);}
  /* A different hover language from the pillars deliberately: the photo
     itself zooms slightly and a navy scrim rises from the bottom (a
     classic "photo card" hover), rather than the pillars' glow + icon-
     flip treatment, so the two grids don't feel like the same component
     re-skinned twice. */
  .serve-media{height:150px;position:relative;overflow:hidden;}
  .serve-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
  .serve-card:hover .serve-media img{transform:scale(1.1);}
  .serve-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(0deg, rgba(10,29,38,.55), transparent 65%);
    opacity:0;transition:opacity .3s ease;pointer-events:none;
  }
  .serve-card:hover .serve-media::after{opacity:1;}
  .serve-badge{
    position:absolute;top:12px;left:12px;background:var(--stowe-gold);color:var(--stowe-navy);
    font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:100px;letter-spacing:.03em;
    z-index:1;
  }
  .serve-body{padding:20px;}
  .serve-body h3{font-size:17px;color:var(--navy-900);margin-bottom:8px;}
  .serve-body p{font-size:13px;color:var(--ink-soft);line-height:1.65;margin:0 0 14px;}
  .serve-link{font-size:12.5px;font-weight:700;color:var(--stowe-teal-deep);display:inline-flex;align-items:center;gap:6px;transition:gap .2s ease,color .2s ease;}
  .serve-card:hover .serve-link{gap:10px;color:var(--stowe-teal);}

  /* ---------- Section seam (Who We Serve -> Our Services) ----------
     Both sections share the paper background, so colour alone gives no
     sense of a boundary between them. Instead of a hard rule/colour
     break, a small dot slides left-to-right along the track as this seam
     scrolls through the viewport (see the "Section seam" script) — a
     scroll-linked marker rather than a one-shot reveal, so it's visibly
     doing something as you scroll past it, not just present once. */
  .section-seam{
    max-width:520px;margin:0 auto;padding:34px 32px;
    display:flex;align-items:center;gap:16px;position:relative;z-index:1;
  }
  .seam-label{
    font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:#9aa6c0;white-space:nowrap;
  }
  .seam-track{position:relative;flex:1;height:2px;background:var(--line);border-radius:2px;}
  .seam-dot{
    position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;
    background:var(--stowe-gold);box-shadow:0 0 0 4px rgba(216,185,121,.22);
    transform:translate(-50%,-50%);
  }

  /* ---------- Pillars (six strategic pillars) ---------- */
  .pillars{background:var(--stowe-paper);padding:70px 0;position:relative;overflow:hidden;}
  .pillars::before{
    content:"";position:absolute;bottom:-150px;left:-110px;width:400px;height:400px;
    background:radial-gradient(circle, rgba(117,185,176,.14), transparent 70%);
    pointer-events:none;z-index:-1;
    animation:bg-drift-a 21s ease-in-out infinite;
  }
  .pillars::after{
    content:"";position:absolute;top:-120px;right:-90px;width:300px;height:300px;
    background:radial-gradient(circle, rgba(216,185,121,.12), transparent 70%);
    pointer-events:none;z-index:-1;
    animation:bg-drift-b 26s ease-in-out infinite;
  }
  /* Extra linework to match Who We Serve — thin rotating rings/diamond/dot
     layered above the glow blobs, below the pillar cards. Also carries
     the dot-grid texture as its own background (rather than a third
     ::before/::after — .pillars already uses both for its two glow
     blobs) — same faint, edge-fading pattern as Who We Serve's, so the
     two sections read as a matched pair. */
  .pillars-shapes{
    position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    background-image:radial-gradient(rgba(16,41,54,.07) 1px, transparent 1px);
    background-size:24px 24px;
    mask-image:radial-gradient(ellipse 65% 70% at 50% 45%, rgba(0,0,0,.85), transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 65% 70% at 50% 45%, rgba(0,0,0,.85), transparent 75%);
  }
  .pillars-shapes .ps-ring{
    position:absolute;bottom:6%;right:3%;width:170px;height:170px;border-radius:50%;
    border:1px solid rgba(216,185,121,.32);
    animation:bg-spin 50s linear infinite;
  }
  .pillars-shapes .ps-ring::after{
    content:"";position:absolute;inset:20px;border-radius:50%;
    border:1px solid rgba(117,185,176,.24);
  }
  .pillars-shapes .ps-diamond{
    position:absolute;top:8%;left:2%;width:50px;height:50px;
    border:1px solid rgba(117,185,176,.34);
    transform:rotate(45deg);
    animation:bg-spin-slow 36s linear infinite;
  }
  .pillars-shapes .ps-dot{
    position:absolute;top:3%;right:47%;width:9px;height:9px;border-radius:50%;
    background:var(--stowe-gold);opacity:.4;
    animation:bg-drift-b 14s ease-in-out infinite;
  }
  .pillars-grid{max-width:1240px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1;}
  .pillar{
    border:1px solid var(--line);border-radius:14px;padding:24px;position:relative;overflow:hidden;
    background:#fff;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  }
  /* Corner glow that fades in on hover, sitting behind the content
     (z-index-free, painted before the text since it has no positioned
     children of its own competing for stacking) so it reads as the card
     itself lighting up rather than a layer sitting on top of the copy. */
  .pillar::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 88% -12%, rgba(216,185,121,.22), transparent 62%);
    opacity:0;transition:opacity .3s ease;pointer-events:none;
  }
  .pillar:hover{
    transform:translateY(-8px);
    border-color:var(--stowe-gold);
    box-shadow:0 30px 54px -22px rgba(16,41,54,.4);
  }
  .pillar:hover::before{opacity:1;}
  .pillar .pnum{
    position:absolute;top:22px;right:22px;font-family:'Archivo',sans-serif;
    font-size:12px;font-weight:700;color:#c3cbe0;
    transition:color .3s ease;
  }
  .pillar:hover .pnum{color:var(--stowe-gold-deep);}
  .pillar .pi{
    width:40px;height:40px;border-radius:10px;background:var(--navy-900);color:var(--cyan-400);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;z-index:1;
    transition:background .3s ease, color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .pillar .pi svg{width:19px;height:19px;}
  .pillar:hover .pi{background:var(--stowe-gold);color:var(--stowe-navy);transform:scale(1.1) rotate(-6deg);}
  .pillar h4{font-size:15.5px;color:var(--navy-900);margin-bottom:8px;position:relative;z-index:1;}
  .pillar ul{margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-soft);line-height:2;position:relative;z-index:1;}
  .pillar ul li::before{content:"›";color:var(--stowe-teal-deep);font-weight:700;margin-right:7px;transition:margin-right .2s ease;}
  .pillar:hover ul li::before{margin-right:10px;}

  /* ---------- Trust strip ----------
     Logos run full colour, always — an earlier greyscale-with-colour-on-
     hover treatment was dropped since these aren't clickable, so a hover
     state served no purpose. Belt scrolls continuously, never pausing.
     To reinstate the greyscale treatment:
       .trust-row img{filter:grayscale(100%) opacity(.58);}
       .trust-row img:hover{filter:grayscale(0%) opacity(1);}
  */
  .trust{background:#fff;padding:36px 0;overflow:hidden;}
  .trust-label{text-align:center;font-size:11px;letter-spacing:.16em;color:var(--stowe-navy);font-weight:700;text-transform:uppercase;margin-bottom:22px;}
  .trust-window{position:relative;overflow:hidden;width:100%;}
  .trust-window::before,.trust-window::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;}
  .trust-window::before{left:0;background:linear-gradient(90deg,#fff,transparent);}
  .trust-window::after{right:0;background:linear-gradient(270deg,#fff,transparent);}
  .trust-row{display:flex;width:max-content;align-items:center;gap:20px;animation:trust-belt 34s linear infinite;animation-play-state:running;}
  .trust-group{display:flex;align-items:center;gap:20px;flex:none;}
  .trust-row img{width:148px;height:52px;flex:none;object-fit:contain;}
  @keyframes trust-belt{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 10px));}}

  /* ---------- Success Hub preview ----------
     A compact teaser for the customer portal referenced in the nav's
     Services dropdown ("Success Hub", currently Coming Soon). Styled as
     an app/widget card — an icon badge, title and a live-status pill —
     rather than a browser-window mockup with a fake URL bar: this isn't
     a page, so it shouldn't be dressed up as a screenshot of one. No
     live tabs/filters (unlike the full Success Hub itself): this is a
     "lil" preview, not a second dashboard.
     Deliberately flat/solid colour throughout — no gradients anywhere in
     this section (contrast the rest of the page, which uses them
     freely) — and its own metrics (response time, tickets, uptime) are
     account-level figures, distinct from the company-wide totals on the
     Live Capability Dashboard above, so the two don't just repeat each
     other. */
  .sh-teaser{background:var(--stowe-paper);padding:64px 32px;position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  /* Same faint crosshatch as the CEO video section (dark lines here,
     since this section is light rather than navy) — this section lost
     its old glow blobs when they were removed for using gradients, and
     has read a little flat/empty on its own since. */
  .sh-teaser::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      repeating-linear-gradient(45deg, rgba(16,41,54,.045) 0, rgba(16,41,54,.045) 1px, transparent 1px, transparent 46px),
      repeating-linear-gradient(-45deg, rgba(16,41,54,.045) 0, rgba(16,41,54,.045) 1px, transparent 1px, transparent 46px);
    mask-image:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
  }
  .sh-teaser-inner{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:1;}
  .sh-card{
    max-width:820px;margin:8px auto 26px;text-align:left;
    border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
    box-shadow:0 24px 60px -28px rgba(16,41,54,.3);background:#fff;
  }
  .sh-card-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line);}
  .sh-card-icon{
    width:38px;height:38px;border-radius:10px;flex:none;
    background:var(--stowe-navy);color:var(--stowe-gold);
    display:flex;align-items:center;justify-content:center;
  }
  .sh-card-icon svg{width:18px;height:18px;}
  .sh-card-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:var(--navy-900);}
  .sh-card-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
  .sh-card-status{
    margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;
    font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--stowe-teal-deep);background:rgba(117,185,176,.12);
    border:1px solid rgba(117,185,176,.3);padding:7px 13px;border-radius:100px;
  }
  .sh-card-body{padding:22px 22px 24px;}
  /* Liquid-glass stat buttons — translucent, blurred "frosted" surfaces
     with a soft specular sheen (the ::before highlight), each holding
     one metric. Needs something with actual colour/texture behind it to
     blur, so .sh-glass-row carries its own soft two-tone wash rather
     than sitting on the card's flat white — the wash lives only inside
     this row, not the rest of the (still gradient-free) section. */
  .sh-glass-row{
    display:flex;flex-wrap:wrap;gap:12px;padding:18px;border-radius:18px;margin-bottom:18px;
    background:
      radial-gradient(circle at 15% 20%, rgba(216,185,121,.18), transparent 55%),
      radial-gradient(circle at 85% 80%, rgba(117,185,176,.16), transparent 55%),
      var(--stowe-paper);
  }
  .glass-btn{
    position:relative;flex:1;min-width:150px;overflow:hidden;
    padding:14px 18px;border-radius:16px;
    background:linear-gradient(155deg, rgba(255,255,255,.82), rgba(255,255,255,.32));
    backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 10px 24px -16px rgba(16,41,54,.3), inset 0 1px 0 rgba(255,255,255,.85);
  }
  /* Specular highlight — a soft diagonal streak of light standing in for
     glass catching light, the signature "liquid glass" cue. */
  .glass-btn::before{
    content:"";position:absolute;top:-50%;left:-15%;width:65%;height:90%;
    background:linear-gradient(135deg, rgba(255,255,255,.55), transparent 65%);
    transform:rotate(-18deg);pointer-events:none;
  }
  .glass-btn-val{
    position:relative;z-index:1;display:block;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;color:var(--stowe-gold-deep);
  }
  .glass-btn-label{position:relative;z-index:1;display:block;font-size:10.5px;color:var(--ink-soft);margin-top:4px;}
  .glass-btn-trend{position:relative;z-index:1;display:block;font-size:10.5px;font-weight:700;color:var(--stowe-teal-deep);margin-top:6px;}
  /* Ticket-volume line chart — a filled area line rather than the bar
     chart this used to be, still tracking the "Tickets Resolved" glass
     button above it (14 -> 25 over five weeks). Flat semi-transparent
     fill under the line, not a gradient, so the section stays gradient-
     free apart from the glass buttons' own translucency. */
  .sh-chart-card{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:16px 18px 10px;background:var(--stowe-paper);}
  .sh-chart-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
  .sh-chart-head h4{font-size:12.5px;font-weight:700;color:var(--navy-900);margin:0;}
  .sh-chart-range{font-size:10.5px;color:var(--ink-soft);margin-top:2px;}
  .sh-chart-axis{display:flex;justify-content:space-between;margin-top:2px;padding:0 2px;}
  .sh-chart-axis span{font-size:10px;color:#9aa6c0;}
  .sh-teaser .serve-link{justify-content:center;}
  @media (max-width:600px){
    .sh-chart-axis span:nth-child(2),.sh-chart-axis span:nth-child(4){display:none;}
  }

  /* ---------- Leadership photo (replaces the CEO video section while
     no video exists yet — see the HTML comment below) ---------- */
  .leadership-photo{background:var(--navy-950);color:#fff;padding:70px 32px;position:relative;overflow:hidden;}
  /* Faint crosshatch — two sets of diagonal lines crossing at 90°, faded
     out toward the section edges. This section had no background
     decoration at all before (unlike almost every other section on the
     page), so it read as flatter/emptier by comparison; this is a
     different texture language from the dot-grids on Who We Serve/Our
     Services (lines instead of dots) so the page doesn't just repeat the
     same treatment everywhere. */
  .leadership-photo::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 46px),
      repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 46px);
    mask-image:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
  }
  .leadership-photo-inner{
    position:relative;z-index:1;
    max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
    gap:44px;align-items:center;
  }
  .leadership-photo-media{
    position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
    background:var(--navy-900);
    border:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;
  }
  .leadership-photo-media img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  }
  .leadership-photo-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(10,29,38,.15), rgba(10,29,38,.55));
  }
  .leadership-photo-body .section-eyebrow{color:var(--stowe-gold);}
  .leadership-photo-body h2{font-size:27px;line-height:1.25;margin-top:10px;color:#fff;}
  .leadership-photo-body p{color:#c7d0e6;font-size:14.5px;line-height:1.75;margin-top:12px;}
  @media (max-width:760px){.leadership-photo-inner{grid-template-columns:1fr;}}

  /* ---------- Footprint / CTA band ----------
     Promoted to a second "hero moment": the pitch pivots from what Stowe
     has already proven (35+ years, 7 countries — "we know what we're
     doing") to an invitation aimed straight at the reader ("YOU"), so the
     section closes on momentum rather than just restating credentials.
     Sized and textured to match the hero (dot-grid overlay, big clamp
     heading, gradient accent word) rather than the smaller CTA strip it
     used to be. */
  .band{
    background:
      linear-gradient(to bottom, rgba(255,255,255,.09), transparent 140px),
      radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px,
      linear-gradient(120deg,var(--navy-900),var(--navy-800));
    color:#fff;padding:96px 0 104px;position:relative;overflow:hidden;
  }
  /* Faint "data transfer" pulses behind the band's content (the inline
     .band-links SVG): pairs of node dots, with a short bright pulse
     drifting slowly along an invisible curve from one dot to the other
     and back. Every path has pathLength="100", so one dash/offset
     keyframe fits curves of any length; --t/--d on each pulse vary the
     speed and start so they never move in step. */
  .band-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
  .band-links path{fill:none;stroke-linecap:round;}
  .bl-node{fill:rgba(255,255,255,.1);}
  .bl-node.is-gold{fill:rgba(216,185,121,.16);}
  .bl-pulse{
    stroke:rgba(255,255,255,.15);stroke-width:1.2;
    stroke-dasharray:3.5 106;stroke-dashoffset:3.5;
    animation:bl-travel var(--t,22s) ease-in-out var(--d,0s) infinite alternate;
  }
  .bl-pulse.is-gold{stroke:rgba(216,185,121,.21);}
  @keyframes bl-travel{from{stroke-dashoffset:3.5;}to{stroke-dashoffset:-100;}}
  @media (prefers-reduced-motion: reduce){
    .bl-pulse{display:none;}
  }
  /* Same fallback-colour pattern as .hero h1 .l2 above: a plain solid
     `color` first, -webkit-text-fill-color:transparent (not
     color:transparent) hides it only where the gradient clip actually
     renders, so this never goes fully invisible in a context — print/PDF
     export chief among them — that drops the gradient. */
  .text-grad{
    color:var(--stowe-gold);
    background:linear-gradient(90deg,var(--stowe-gold),var(--stowe-teal));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .band .hero-facts{margin-top:26px;}
  .band .cta-row{margin-top:30px;}
  .band::before{
    content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;
    background:radial-gradient(circle,rgba(117,185,176,.18),transparent 70%);
    pointer-events:none;
    animation:bg-drift-a 16s ease-in-out infinite;
  }
  .band::after{
    content:"";position:absolute;left:-90px;bottom:-110px;width:300px;height:300px;
    background:radial-gradient(circle,rgba(216,185,121,.15),transparent 70%);
    pointer-events:none;
    animation:bg-drift-b 20s ease-in-out infinite;
  }
  .band-inner{
    max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:2;
    display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  }
  .band h2{font-size:clamp(28px,3.6vw,46px);line-height:1.15;}
  .band p{margin-top:16px;color:#b7c3e0;font-size:15px;line-height:1.8;max-width:480px;}

  /* ---------- Mini timeline ----------
     A compact three-point "story" strip (founded -> today -> next) that
     literalises the band's narrative arc. The connecting line draws left-
     to-right the first time it scrolls into view, via the same .is-in
     class the generic reveal observer already toggles (see the JS
     "Scroll reveal" section) — .mini-timeline itself isn't a .reveal (no
     fade/slide), it's plain in-flow content; only .tl-fill's width is
     gated on .is-in, so nesting it inside the band's fading-in left
     column doesn't compound into a double animation. */
  .mini-timeline{margin:26px 0 4px;max-width:480px;}
  .tl-track{position:relative;height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden;}
  .tl-fill{
    position:absolute;inset:0;width:0%;
    background:linear-gradient(90deg,var(--stowe-gold),var(--stowe-teal));
    transition:width 1.6s cubic-bezier(.2,.7,.2,1) .2s;
  }
  .mini-timeline.is-in .tl-fill{width:100%;}
  .tl-points{display:flex;justify-content:space-between;gap:10px;margin-top:10px;}
  .tl-point{display:flex;flex-direction:column;gap:3px;flex:1;}
  .tl-year{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;color:var(--stowe-gold);}
  .tl-label{font-size:11px;color:#9fb0d1;line-height:1.4;}
  @media (max-width:500px){
    .tl-points{flex-direction:column;gap:10px;}
  }
  @media (prefers-reduced-motion: reduce){
    .tl-fill{transition:none;}
  }

  /* ---------- Stowe's Footprint panel ----------
     Redesigned as the visual centrepiece of the band — client wants this
     panel "doing a lot of talking" rather than sitting as a quiet bullet
     list. South Africa leads as a full-width gold HQ card (big flag,
     "since 1989" line, radar "ping"), the other six countries sit
     below as a 3x2 grid of flag cards that rise in one after another,
     and a closing line signs the panel off. A gold-to-teal bar caps the
     top edge. The office addresses live in the footer (.foot-locations). */
  .footprint{
    background:rgba(255,255,255,.06);border:1px solid rgba(216,185,121,.28);
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    border-radius:20px;padding:32px 26px 24px;position:relative;overflow:hidden;
    box-shadow:0 30px 70px -40px rgba(0,0,0,.7), 0 0 60px -30px rgba(216,185,121,.35);
  }
  .footprint::after{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;pointer-events:none;
    background:linear-gradient(90deg,var(--stowe-gold),var(--stowe-teal));
  }
  .footprint::before{
    content:"";position:absolute;left:50%;top:-45%;width:150%;aspect-ratio:1;
    transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(circle, rgba(216,185,121,.18), rgba(117,185,176,.1) 45%, transparent 72%);
  }
  .footprint-head{
    position:relative;z-index:1;
    display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
    margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .footprint-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stowe-teal);}
  .footprint-head h3{font-size:23px;line-height:1.2;color:#fff;margin-top:8px;max-width:270px;}
  .footprint-head h3 .text-grad{display:block;}
  .footprint-count{
    font-family:'Archivo',sans-serif;font-weight:800;font-size:60px;line-height:.9;color:var(--stowe-gold);
    display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;
    text-shadow:0 0 28px rgba(216,185,121,.45);
  }
  .footprint-count span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#cdd8ef;text-shadow:none;}
  @keyframes fp-ping{
    0%{transform:scale(.6);opacity:.9;}
    100%{transform:scale(1.9);opacity:0;}
  }

  .footprint-chips{
    position:relative;z-index:1;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  }
  .fp-chip{
    position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
    font:inherit;font-size:12.5px;font-weight:600;color:#dfe5f2;white-space:nowrap;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    border-radius:12px;padding:14px 14px 16px;text-align:left;
    transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .fp-chip:hover{
    transform:translateY(-3px) scale(1.04);
    background:rgba(255,255,255,.11);border-color:rgba(216,185,121,.55);
    box-shadow:0 12px 26px -14px rgba(216,185,121,.6);
  }
  /* Cards rise in one after another once the panel scrolls into view
     (.is-in comes from the generic reveal observer). fill-mode is
     "backwards" only, so the :hover transform still works afterwards. */
  .footprint.is-in .fp-chip{
    animation:fp-rise .55s cubic-bezier(.2,.7,.2,1) backwards;
    animation-delay:calc(var(--i,0) * 45ms + .25s);
  }
  @keyframes fp-rise{from{opacity:0;transform:translateY(12px);}}
  .fp-flag{
    display:block;width:30px;height:20px;object-fit:cover;border-radius:4px;margin-bottom:4px;
    box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 5px 10px -5px rgba(0,0,0,.6);
  }
  .fp-chip.is-hq{
    grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;padding:16px 52px 16px 18px;
    color:#fff;border-color:rgba(216,185,121,.6);
    background:linear-gradient(120deg, rgba(216,185,121,.3), rgba(216,185,121,.08) 60%, rgba(117,185,176,.12));
  }
  .fp-chip.is-hq:hover{border-color:var(--stowe-gold);transform:translateY(-3px);}
  .fp-chip.is-hq .fp-flag{width:48px;height:32px;border-radius:6px;margin:0;flex:none;}
  .fp-hq-text{display:flex;flex-direction:column;gap:3px;min-width:0;white-space:normal;}
  .fp-hq-text b{display:flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;font-size:17px;font-weight:700;}
  .fp-hq-text small{font-size:11.5px;font-weight:500;color:#e6d6b0;letter-spacing:.02em;}
  /* HQ "ping": a gold dot at the card's right edge with a ring
     radiating out of it. */
  .fp-chip.is-hq::before{
    content:"";position:absolute;top:calc(50% - 4px);right:22px;width:8px;height:8px;border-radius:50%;
    background:var(--stowe-gold);
  }
  .fp-chip.is-hq::after{
    content:"";position:absolute;top:calc(50% - 12px);right:14px;width:24px;height:24px;border-radius:50%;
    border:1px solid var(--stowe-gold);animation:fp-ping 2.2s ease-out infinite;
  }
  .fp-chip em{
    font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--stowe-navy);
    background:var(--stowe-gold);padding:2px 7px;border-radius:100px;
  }
  .footprint-foot{
    position:relative;z-index:1;margin-top:20px;padding-top:16px;text-align:center;
    border-top:1px solid rgba(255,255,255,.14);
    font-family:'Archivo',sans-serif;font-size:13px;font-weight:500;letter-spacing:.03em;color:#b7c3e0;
  }
  .footprint-foot b{color:var(--stowe-gold);font-weight:700;}
  @media (max-width:560px){
    .footprint-chips{grid-template-columns:repeat(2,1fr);}
    .footprint-count{font-size:46px;}
  }
  @media (prefers-reduced-motion: reduce){
    .footprint.is-in .fp-chip{animation:none;}
  }

  /* ---------- Compliance Center ----------
     A trust/assurance panel for a company operating fuel, payment and
     retail systems across 7 countries — POPIA (South Africa's data
     protection law), PCI-adjacent payment handling, and site safety
     standards all come up in enterprise procurement conversations before
     a contract gets signed, so this gives that answer its own visible
     home rather than leaving it buried in a footer link. Card layout
     matches the pillars grid (same border/radius/hover language) so it
     reads as a sibling of "Our Services," not a bolted-on legal notice. */
  .compliance{background:#fff;padding:70px 0;border-top:1px solid var(--line);position:relative;overflow:hidden;}
  .compliance-grid{max-width:1240px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:1;}
  .compliance-card{
    border:1px solid var(--line);border-radius:14px;padding:22px;text-align:left;
    transition:.2s;
  }
  .compliance-card:hover{border-color:var(--stowe-teal-deep);box-shadow:0 16px 30px -18px rgba(16,41,54,.22);transform:translateY(-3px);}
  .compliance-card .ci{
    width:38px;height:38px;border-radius:10px;background:rgba(47,109,99,.12);color:var(--stowe-teal-deep);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  }
  .compliance-card .ci svg{width:18px;height:18px;}
  .compliance-card h4{font-size:14.5px;color:var(--navy-900);margin-bottom:6px;}
  .compliance-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0;}
  .compliance-card .cc-status{
    display:inline-flex;align-items:center;gap:6px;margin-top:12px;
    font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    color:var(--stowe-teal-deep);
  }
  .compliance-card .cc-status .dot{width:6px;height:6px;border-radius:50%;background:var(--stowe-teal-deep);}
  .compliance-foot{
    max-width:1240px;margin:26px auto 0;padding:0 32px;position:relative;z-index:1;
    font-size:12px;color:var(--ink-soft);text-align:center;
  }
  .compliance-foot a{color:var(--stowe-teal-deep);font-weight:600;}
  @media (max-width:980px){
    .compliance-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .compliance-grid{grid-template-columns:1fr;}
  }

  /* ---------- Stowe News ----------
     Company news bulletins and announcements, in the deep teal of the
     "Stowe News" bulletin masthead (see --blog-* tokens in :root).
     Inset from the viewport edge with rounded corners and real vertical
     margin so it reads as its own separated "chapter" of the page, the
     way the dashboard and the "Your Advantage" band already do, instead
     of just another full-width strip butted against its neighbours. */
  .blog{
    position:relative;overflow:hidden;
    background:linear-gradient(155deg,var(--blog-bg-1),var(--blog-bg-2) 120%);
    padding:52px 0 56px;margin:20px auto;max-width:1180px;border-radius:20px;
    box-shadow:0 24px 56px -34px rgba(20,8,14,.5);
  }
  @media (max-width:1360px){ .blog{max-width:calc(100% - 40px);} }
  @media (max-width:640px){ .blog{max-width:calc(100% - 20px);border-radius:16px;margin:16px auto;} }
  /* Faint dot texture (reuses the hero's technique) plus two soft teal
     glows for depth. */
  .blog::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:24px 24px;
    mask-image:radial-gradient(ellipse at 30% 20%, rgba(0,0,0,.9), transparent 65%);
  }
  .blog::after{
    content:"";position:absolute;bottom:-160px;right:-100px;width:420px;height:420px;
    background:radial-gradient(circle, rgba(117,185,176,.22), transparent 70%);
    pointer-events:none;
    animation:bg-drift-a 24s ease-in-out infinite;
  }
  .blog-glow{
    position:absolute;top:-140px;left:-90px;width:340px;height:340px;border-radius:50%;
    background:rgba(117,185,176,.16);filter:blur(80px);pointer-events:none;
    animation:bg-drift-b 29s ease-in-out infinite;
  }
  .blog .section-head{position:relative;z-index:1;margin-bottom:28px;}
  .blog .section-eyebrow{color:var(--blog-accent);}
  .blog .section-head h2{color:var(--blog-cream);font-size:25px;}
  .blog .section-head p{color:rgba(232,243,243,.74);font-size:13px;margin-top:8px;max-width:480px;}
  /* Newsroom layout: equal cards, four to a row, newest first. Only the
     first row shows until the "Read more news" button is pressed (see
     newsApply in script.js). */
  .blog-grid{
    max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:1;
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  }
  .blog-card{
    background:var(--blog-cream);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    display:flex;flex-direction:column;
    box-shadow:0 12px 26px -18px rgba(10,4,7,.5);
  }
  .blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -20px rgba(10,4,7,.6);}
  /* Lead story — full width, graphic on the left and text on the right,
     with a thin accent ring so it clearly reads as the featured piece. */
  .blog-card--featured{
    grid-column:1 / -1;flex-direction:row;
    box-shadow:0 0 0 1.5px var(--blog-accent), 0 12px 26px -18px rgba(10,4,7,.5);
  }
  /* The thumbnail is a button (opens the full bulletin), so the native
     button chrome is stripped. 16:9 matches the bulletin slides, so
     most show whole; taller posters are cropped from the top. */
  .blog-media{
    display:block;width:100%;aspect-ratio:16 / 9;overflow:hidden;flex:none;
    padding:0;border:0;background:var(--navy-950);cursor:zoom-in;
    -webkit-appearance:none;appearance:none;
  }
  .blog-media:focus-visible{outline:3px solid var(--blog-accent);outline-offset:-3px;}
  .blog-card--featured .blog-media{width:54%;aspect-ratio:auto;min-height:300px;}
  .blog-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
  .blog-card--featured .blog-media img{object-position:left top;}
  .blog-card:hover .blog-media img{transform:scale(1.04);}
  @media (max-width:1100px){
    .blog-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:780px){
    .blog-card--featured{flex-direction:column;}
    .blog-card--featured .blog-media{width:100%;aspect-ratio:16 / 9;min-height:0;}
  }
  @media (max-width:600px){
    .blog-grid{grid-template-columns:1fr;}
  }
  .blog-body{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1;min-width:0;}
  .blog-card--featured .blog-body{padding:30px 30px 26px;justify-content:center;}
  .blog-meta{display:flex;align-items:center;gap:10px;font-size:10.5px;color:var(--ink-soft);margin-bottom:10px;}
  .blog-tag{
    font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;
    background:var(--blog-accent-deep);padding:3px 9px;border-radius:100px;font-size:9px;
  }
  .blog-body h3{
    font-weight:800;letter-spacing:-0.01em;color:var(--navy-900);margin-bottom:8px;line-height:1.28;
    font-size:15.5px;
  }
  .blog-card--featured .blog-body h3{font-size:25px;line-height:1.2;margin-bottom:12px;}
  .blog-body p{font-size:12.5px;color:var(--ink-soft);line-height:1.65;margin:0 0 14px;flex:1;}
  .blog-card--featured .blog-body p{font-size:14px;line-height:1.7;flex:none;margin-bottom:20px;}
  .blog-card[hidden]{display:none;}
  /* Category filter pills above the grid. */
  .news-filters{
    max-width:1240px;margin:0 auto 22px;padding:0 28px;position:relative;z-index:1;
    display:flex;flex-wrap:wrap;gap:8px;
  }
  .news-filter{
    display:inline-flex;align-items:center;gap:8px;
    font:inherit;font-size:12.5px;font-weight:600;color:var(--blog-cream);cursor:pointer;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:8px 14px;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .news-filter span{
    font-size:10.5px;font-weight:700;min-width:20px;text-align:center;
    background:rgba(255,255,255,.14);border-radius:100px;padding:1px 6px;
  }
  .news-filter:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}
  .news-filter.is-active{background:var(--blog-accent);border-color:var(--blog-accent);color:var(--navy-900);}
  .news-filter.is-active span{background:rgba(16,41,54,.16);}
  .news-filter:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  /* "Read more news" — the one loud control in the section: a large
     gold pill centred under the single row of cards, with a "+5" count
     and a chevron that flips once the rest are showing. */
  .news-more-wrap{position:relative;z-index:1;display:flex;justify-content:center;margin-top:32px;padding:0 28px;}
  .news-more{
    display:inline-flex;align-items:center;gap:12px;
    font:inherit;font-family:'Archivo',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:.01em;
    color:var(--stowe-navy);cursor:pointer;
    background:linear-gradient(120deg,var(--stowe-gold),#ecd49e);border:0;border-radius:100px;padding:16px 30px;
    box-shadow:0 16px 36px -14px rgba(216,185,121,.75), 0 0 0 6px rgba(216,185,121,.14);
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  }
  .news-more[hidden]{display:none;}
  .news-more:hover{transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(216,185,121,.9), 0 0 0 8px rgba(216,185,121,.2);}
  .news-more:focus-visible{outline:3px solid #fff;outline-offset:4px;}
  .news-more-count{
    font-size:12px;font-weight:800;color:#fff;background:var(--stowe-navy);
    border-radius:100px;padding:3px 10px;
  }
  .news-more-count:empty{display:none;}
  .news-more svg{width:18px;height:18px;transition:transform .3s ease;}
  .news-more[aria-expanded="true"] svg{transform:rotate(180deg);}
  /* "Read story" — opens the story in the reader, sitting along the
     card's bottom edge. */
  .blog-more{
    align-self:stretch;text-align:left;margin-top:auto;padding:12px 0 0;
    border:0;border-top:1px solid rgba(16,41,54,.1);background:none;cursor:pointer;
    font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--blog-accent-deep);
    transition:color .2s ease;
  }
  .blog-more span{display:inline-block;transition:transform .2s ease;}
  .blog-more:hover{color:var(--navy-900);}
  .blog-more:hover span{transform:translateX(4px);}
  .blog-more:focus-visible{outline:2px solid var(--blog-accent-deep);outline-offset:3px;border-radius:4px;}

  /* News reader (a native <dialog>): a fixed teal bar with the story
     counter and Previous / Next / Close, above a scrolling column with
     the bulletin graphic and then the story text at a comfortable
     reading measure. */
  .news-reader{
    border:0;padding:0;border-radius:16px;overflow:hidden;
    width:min(880px,94vw);max-width:none;max-height:90vh;
    background:var(--blog-cream);color:var(--navy-900);
    box-shadow:0 40px 100px -30px rgba(0,0,0,.8);
  }
  .news-reader[open]{display:flex;flex-direction:column;}
  .news-reader::backdrop{background:rgba(10,29,38,.82);backdrop-filter:blur(3px);}
  .nr-bar{
    flex:none;display:flex;align-items:center;gap:8px;padding:12px 14px 12px 20px;color:#fff;
    background:linear-gradient(120deg,var(--blog-bg-1),var(--blog-bg-2));
  }
  .nr-count{margin-right:auto;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(232,243,243,.82);}
  .nr-btn{
    font:inherit;font-size:12.5px;font-weight:600;color:#fff;cursor:pointer;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);border-radius:100px;padding:7px 14px;
    transition:background .2s ease, border-color .2s ease;
  }
  .nr-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);}
  .nr-btn:disabled{opacity:.4;cursor:default;}
  .nr-close{
    width:34px;height:34px;border-radius:50%;margin-left:6px;flex:none;
    border:0;background:#fff;color:var(--navy-900);font-size:21px;line-height:1;cursor:pointer;
  }
  .nr-btn:focus-visible,.nr-close:focus-visible{outline:2px solid var(--blog-accent);outline-offset:2px;}
  .nr-scroll{overflow-y:auto;overscroll-behavior:contain;}
  .nr-figure{
    display:block;position:relative;width:100%;padding:0;border:0;background:var(--navy-950);cursor:zoom-in;
    -webkit-appearance:none;appearance:none;
  }
  .nr-figure:focus-visible{outline:3px solid var(--blog-accent);outline-offset:-3px;}
  .nr-figure img{display:block;width:100%;max-height:44vh;object-fit:contain;}
  /* Full-size view: the dialog grows to nearly the whole screen and the
     picture fills it, with the story text hidden. */
  .news-reader.is-zoomed{width:96vw;height:94vh;max-height:94vh;background:var(--navy-950);}
  .news-reader.is-zoomed .nr-scroll{flex:1;min-height:0;overflow:hidden;}
  .news-reader.is-zoomed .nr-article{display:none;}
  .news-reader.is-zoomed .nr-figure{height:100%;cursor:zoom-out;}
  .news-reader.is-zoomed .nr-figure img{height:100%;max-height:none;}
  .nr-figure span{
    position:absolute;right:12px;bottom:12px;font-size:11px;font-weight:600;color:#fff;
    background:rgba(10,29,38,.82);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:5px 11px;
  }
  .nr-figure:hover span{background:var(--blog-accent-deep);}
  .nr-article{max-width:700px;margin:0 auto;padding:28px 32px 38px;}
  .nr-article .blog-meta{font-size:11.5px;margin-bottom:12px;}
  .nr-article h3{font-size:27px;font-weight:800;letter-spacing:-0.01em;line-height:1.2;color:var(--navy-900);margin-bottom:18px;}
  .nr-content p,.nr-content li{font-size:15px;line-height:1.75;color:#2f434c;}
  .nr-content p{margin:0 0 14px;}
  .nr-content h4{
    font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--blog-accent-deep);margin:24px 0 8px;
  }
  .nr-content ul{list-style:disc;margin:0 0 14px;padding-left:22px;}
  .nr-content li{margin-bottom:6px;}
  .nr-content li::marker{color:var(--blog-accent-deep);}
  .nr-content > :last-child{margin-bottom:0;}
  @media (max-width:560px){
    .nr-article{padding:22px 20px 30px;}
    .nr-article h3{font-size:22px;}
    .nr-btn{padding:7px 10px;font-size:12px;}
    .nr-count{font-size:10.5px;letter-spacing:.06em;}
  }

  /* ---------- Contact Us (new) ---------- */
  .contact{background:var(--stowe-paper);padding:70px 0;position:relative;overflow:hidden;}
  .contact::before{
    content:"";position:absolute;bottom:-120px;left:-90px;width:340px;height:340px;
    background:radial-gradient(circle, rgba(216,185,121,.13), transparent 70%);
    pointer-events:none;z-index:-1;
    animation:bg-drift-a 22s ease-in-out infinite;
  }
  .contact::after{
    content:"";position:absolute;top:-100px;right:-80px;width:280px;height:280px;
    background:radial-gradient(circle, rgba(117,185,176,.12), transparent 70%);
    pointer-events:none;z-index:-1;
    animation:bg-drift-b 27s ease-in-out infinite;
  }
  /* Same faint crosshatch as CEO video/Success Hub, but its own element
     rather than another ::before/::after — .contact already uses both of
     those for its glow blobs, and stacking this on top of one of them
     (rather than adding a third layer) would tangle the two very
     different patterns together. z-index:-1 matches the blobs above so
     it sinks below .contact-inner's in-flow content the same way they do,
     without needing to give contact-inner its own z-index it doesn't
     otherwise need. */
  .contact-texture{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:
      repeating-linear-gradient(45deg, rgba(16,41,54,.045) 0, rgba(16,41,54,.045) 1px, transparent 1px, transparent 46px),
      repeating-linear-gradient(-45deg, rgba(16,41,54,.045) 0, rgba(16,41,54,.045) 1px, transparent 1px, transparent 46px);
    mask-image:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,.85), transparent 78%);
  }
  .contact-inner{
    max-width:1240px;margin:0 auto;padding:0 32px;
    display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start;
  }
  .contact-info h2{font-size:29px;color:var(--navy-900);line-height:1.2;margin-top:10px;}
  .contact-info p{margin-top:12px;font-size:14.5px;color:var(--ink-soft);line-height:1.7;max-width:420px;}
  .contact-list{margin-top:26px;display:flex;flex-direction:column;gap:16px;}
  /* Real reception photo — a small, quiet "this is an actual place you
     can visit" cue rather than another icon row, sitting under the
     contact list instead of taking a whole grid column of its own. */
  .contact-photo{
    margin-top:24px;position:relative;border-radius:14px;overflow:hidden;
    border:1px solid var(--line);box-shadow:0 20px 40px -26px rgba(16,41,54,.4);
  }
  .contact-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
  .contact-photo-caption{
    position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
    font-size:11.5px;font-weight:600;color:#fff;
    background:linear-gradient(0deg, rgba(10,29,38,.82), transparent);
  }
  .contact-item{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--navy-900);}
  .contact-item .ci-ico{
    width:36px;height:36px;border-radius:10px;background:rgba(216,185,121,.16);color:var(--stowe-navy);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .contact-item .ci-ico svg{width:16px;height:16px;}
  .contact-item b{display:block;font-weight:700;}
  .contact-item span{color:var(--ink-soft);font-weight:400;}
  .contact-form{
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;
    display:flex;flex-direction:column;gap:14px;
  }
  .contact-form label{font-size:12.5px;font-weight:600;color:var(--navy-900);display:flex;flex-direction:column;gap:6px;}
  .contact-form input,.contact-form textarea{
    font-family:inherit;font-size:13.5px;color:var(--navy-900);
    border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--stowe-paper);
    resize:vertical;
  }
  .contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--stowe-teal);outline-offset:1px;}
  .contact-form .label-hint{font-size:11.5px;font-weight:400;color:var(--muted,#6b7280);margin-top:-3px;}
  .contact-form .btn{align-self:flex-start;margin-top:4px;}
  .contact-form-note{
    margin:0;font-size:12.5px;font-weight:600;color:var(--stowe-teal-deep);
    background:rgba(117,185,176,.12);border:1px solid rgba(117,185,176,.3);
    padding:10px 12px;border-radius:10px;
  }
  .contact-form-note.contact-form-error{
    color:#a13b3b;background:rgba(161,59,59,.1);border-color:rgba(161,59,59,.3);
  }
  @media (max-width:980px){
    .contact-inner{grid-template-columns:1fr;}
    .band-inner{grid-template-columns:1fr;}
  }

  /* ---------- Footer ---------- */
  footer.site{
    background:linear-gradient(to bottom, rgba(255,255,255,.06), transparent 120px), var(--navy-950);
    color:#fff;position:relative;overflow:hidden;
  }
  /* Brand accent bar along the very top edge — same gold-to-teal pairing
     as the reading-progress bar and the Success Hub window, so the page
     doesn't just stop in flat navy; it closes on the same accent it
     opened with. */
  .foot-accent{height:3px;background:linear-gradient(90deg,var(--stowe-gold),var(--stowe-teal));position:relative;z-index:1;}
  footer.site::before{
    content:"";position:absolute;top:-120px;left:10%;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle, rgba(117,185,176,.1), transparent 70%);
    pointer-events:none;animation:bg-drift-a 25s ease-in-out infinite;
  }
  footer.site::after{
    content:"";position:absolute;bottom:-140px;right:8%;width:260px;height:260px;border-radius:50%;
    background:radial-gradient(circle, rgba(216,185,121,.09), transparent 70%);
    pointer-events:none;animation:bg-drift-b 30s ease-in-out infinite;
  }
  /* Footer CTA band — a distinct banner strip (its own border, not just
     a row of buttons floating in the column area below) so it reads as
     a deliberate closing call-to-action rather than an afterthought. */
  .foot-cta{
    max-width:1240px;margin:0 auto;padding:22px 32px;
    display:flex;flex-wrap:wrap;align-items:center;gap:14px;position:relative;z-index:1;
    border-bottom:1px solid var(--navy-700);
  }
  .foot-cta-label{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;
    color:#fff;margin-right:auto;
  }
  .foot-cta .btn{padding:10px 20px;font-size:12.5px;}
  /* Four-column corporate layout — brand/mission, Company, Services and
     Get In Touch — replacing the old single row of bordered contact
     chips. Column headers match the small-caps, letter-spaced treatment
     used for .section-eyebrow across the rest of the page, so the
     footer reads as a continuation of the same design system rather
     than its own thing. */
  .foot-columns{
    max-width:1240px;margin:0 auto;padding:48px 32px 40px;
    display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px;
    position:relative;z-index:1;
  }
  .foot-col h4{
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--stowe-gold);margin-bottom:20px;
  }
  /* The logo's wordmark is dark/black, drawn for a light background —
     fine in the header (permanently white now), but it all but
     disappears against the footer's navy. Rather than a CSS colour
     filter (which would also wreck the icon mark's own gold/teal
     colours, not just the black text), a white backing plate gives the
     logo the light background it was actually designed for, without
     touching its colours at all. */
  .footer-brand{
    display:inline-flex;align-items:center;
    background:#fff;border-radius:10px;padding:8px 16px;
    box-shadow:0 8px 20px -10px rgba(0,0,0,.4);
  }
  .footer-brand img{display:block;width:auto;height:34px;max-width:170px;object-fit:contain;}
  .foot-col-brand p{font-size:13px;color:#9fb0d1;line-height:1.75;margin:18px 0 22px;max-width:260px;}
  .foot-social{display:flex;gap:10px;}
  /* No real profile URLs exist yet, so these are plain <span> placeholders
     rather than <a href="#"> links that would look clickable and go
     nowhere — swap back to <a href="https://..."> once the client
     supplies the actual LinkedIn/Facebook/Instagram profile links. */
  .foot-social span{
    width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
    display:flex;align-items:center;justify-content:center;color:inherit;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .foot-social svg{width:14px;height:14px;}
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
  .foot-col ul a{font-size:13px;color:#c7d0e6;transition:color .15s ease;}
  .foot-col ul a:hover{color:var(--stowe-gold);}
  /* Get In Touch — plain labelled lines rather than the old bordered
     icon chips, closer to how a formal letterhead lists contact details
     than a row of app-style buttons. */
  .foot-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
  .foot-contact li{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:#c7d0e6;line-height:1.5;}
  .foot-contact svg{width:15px;height:15px;color:var(--stowe-gold);flex:none;margin-top:2px;}
  .foot-contact b{display:block;color:#fff;font-weight:600;font-size:12.5px;}
  /* Our Locations — full-width row under the four footer columns:
     head office, regional offices and the Windhoek branch as a grid of
     address blocks, with the satellite hubs as a single line below. */
  .foot-locations{
    max-width:1240px;margin:0 auto;padding:28px 32px 40px;
    border-top:1px solid var(--navy-700);position:relative;z-index:1;
  }
  .foot-locations h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stowe-gold);margin-bottom:18px;}
  .foot-loc-grid{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:20px 28px;
  }
  .foot-loc-grid li{font-size:12.5px;color:#9fb0d1;line-height:1.6;}
  .foot-loc-grid b{display:block;color:#fff;font-weight:600;font-size:13px;margin-bottom:3px;}
  .foot-loc-grid em{
    font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--stowe-navy);
    background:var(--stowe-gold);padding:2px 7px;border-radius:100px;margin-left:6px;vertical-align:middle;white-space:nowrap;
  }
  .foot-loc-hubs{margin-top:20px;font-size:12.5px;color:#9fb0d1;line-height:1.7;}
  .foot-loc-hubs b{color:#c7d0e6;font-weight:600;}
  /* Each location opens its Google Maps search in a new tab. */
  .foot-loc-grid a{display:block;transition:color .15s ease;}
  .foot-loc-grid a b{transition:color .15s ease;}
  .foot-loc-grid a:hover,.foot-loc-grid a:hover b,
  .foot-loc-grid a:focus-visible,.foot-loc-grid a:focus-visible b{color:var(--stowe-gold);}
  .foot-loc-hubs a{color:#c7d0e6;border-bottom:1px dotted rgba(199,208,230,.45);transition:color .15s ease,border-color .15s ease;}
  .foot-loc-hubs a:hover,.foot-loc-hubs a:focus-visible{color:var(--stowe-gold);border-bottom-color:var(--stowe-gold);}
  @media (max-width:900px){
    .foot-loc-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .foot-loc-grid{grid-template-columns:1fr;}
  }
  .foot-mid{border-top:1px solid var(--navy-700);position:relative;z-index:1;}
  .foot-bottom{
    max-width:1240px;margin:0 auto;padding:18px 32px;font-size:11.5px;color:#6b7ba0;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
    position:relative;z-index:1;border-top:1px solid var(--navy-700);
  }
  @media (max-width:900px){
    .foot-columns{grid-template-columns:1fr 1fr;gap:32px 24px;}
  }
  @media (max-width:560px){
    .foot-columns{grid-template-columns:1fr;}
  }
  .foot-bottom-links a{color:inherit;transition:color .15s ease;}
  .foot-bottom-links a:hover{color:#fff;}
  .foot-bottom-links span{color:#4a5878;}

  /* ---------- Scroll reveal ----------
     Everything below the hero (cards, stat tiles, panels) starts faded
     down a little and settles into place the first time it crosses into
     view, via the .reveal/.is-in classes toggled by an IntersectionObserver
     at the bottom of the page — the hero itself is skipped since it's
     already visible on load and needs no scroll to trigger. Cards inside
     the same grid stagger in slightly rather than snapping in together,
     so scrolling the page feels like something is happening rather than
     panels just appearing. Reduced to an instant, non-animated appearance
     under prefers-reduced-motion. */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.is-in{opacity:1;transform:none;}
  .value-cards>.reveal:nth-child(1),.serve-grid>.reveal:nth-child(1),.pillars-grid>.reveal:nth-child(1),
  .dash-grid>.reveal:nth-child(1),.dash-stats-row>.reveal:nth-child(1),.blog-grid>.reveal:nth-child(1),
  .band-inner>.reveal:nth-child(1),.contact-inner>.reveal:nth-child(1),.compliance-grid>.reveal:nth-child(1){transition-delay:.04s;}
  .value-cards>.reveal:nth-child(2),.serve-grid>.reveal:nth-child(2),.pillars-grid>.reveal:nth-child(2),
  .dash-grid>.reveal:nth-child(2),.dash-stats-row>.reveal:nth-child(2),.blog-grid>.reveal:nth-child(2),
  .band-inner>.reveal:nth-child(2),.contact-inner>.reveal:nth-child(2),.compliance-grid>.reveal:nth-child(2){transition-delay:.14s;}
  .value-cards>.reveal:nth-child(3),.serve-grid>.reveal:nth-child(3),.pillars-grid>.reveal:nth-child(3),
  .dash-grid>.reveal:nth-child(3),.dash-stats-row>.reveal:nth-child(3),.blog-grid>.reveal:nth-child(3),.compliance-grid>.reveal:nth-child(3){transition-delay:.24s;}
  .pillars-grid>.reveal:nth-child(4),.dash-grid>.reveal:nth-child(4),.dash-stats-row>.reveal:nth-child(4),.compliance-grid>.reveal:nth-child(4){transition-delay:.34s;}
  .pillars-grid>.reveal:nth-child(5),.dash-grid>.reveal:nth-child(5){transition-delay:.44s;}
  .pillars-grid>.reveal:nth-child(6){transition-delay:.54s;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  @media (max-width:980px){
    /* Mobile nav — below 980px the inline tab bar has nowhere to go, so
       it becomes a full-width dropdown panel toggled by the header's
       "Menu" button (see the "Mobile nav toggle" script near the end of
       the page) instead of just vanishing with no way back in. The
       Services submenu is flattened in place rather than nested behind
       its own hover/tap trigger, since hover doesn't exist on touch. */
    nav.tabs{
      display:none;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;
      background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      padding:6px 20px 16px;max-height:calc(100vh - 64px);overflow-y:auto;
      box-shadow:0 24px 40px -20px rgba(16,41,54,.3);
    }
    nav.tabs.is-open{display:flex;}
    nav.tabs a{width:100%;padding:13px 4px;border-radius:0;border-bottom:1px solid var(--line);}
    .nav-dropdown{width:100%;}
    .nav-dropdown::after{display:none;}
    .nav-dropdown>a{width:100%;justify-content:space-between;border-bottom:1px solid var(--line);}
    .nav-dropdown-caret{display:none;}
    .nav-dropdown-menu{
      position:static;opacity:1;pointer-events:auto;transform:none;
      min-width:0;background:none;border:none;border-radius:0;box-shadow:none;
      padding:0 0 0 16px;
    }
    .nav-dropdown-menu a{border-bottom:1px solid var(--line);border-radius:0;padding:12px 4px;}
    .hero-inner{grid-template-columns:1fr;padding-top:56px;}
    .hero-visual{display:none;}
    .dash-grid{grid-template-columns:repeat(2,1fr);}
    .dash-stats-row{grid-template-columns:repeat(2,1fr);}
    .dash-head{flex-direction:column;gap:6px;}
    .dash-journey-link{position:static;transform:none;}
    .value-inner{grid-template-columns:1fr;}
    .value-cards{grid-template-columns:1fr;}
    .serve-grid{grid-template-columns:1fr;}
    .pillars-grid{grid-template-columns:1fr;}
    .utility-bar .wrap{justify-content:center;flex-wrap:wrap;gap:14px;}
    .trust-row img{width:132px;}
  }
  @media (max-width:600px){
    .nav-row{padding:8px 18px;}
    .logo img{height:38px;max-width:160px;}
    .trust-row img{width:116px;height:44px;}
  }