/* ==========================================================================
       STRAVISION MANAGEMENT CONSULTANCIES - DESIGN SYSTEM & STYLESHEET
       ========================================================================== */

    :root {
      /* Color Palette - Hybrid Dark/Light Luxe Theme */
      --bg-dark-primary: #05080E;
      --bg-dark-secondary: #10141C;
      --card-dark-bg: rgba(255, 255, 255, 0.03);
      --card-dark-border: rgba(255, 255, 255, 0.08);
      
      --bg-light-primary: #F8FAFC;
      --bg-light-surface: #FFFFFF;
      --card-light-border: #E2E8F0;
      
      --text-dark-main: #D4DCE8;
      --text-dark-muted: #94A3B8;
      
      --text-light-main: #0F172A;
      --text-light-muted: #64748B;
      
      --teal-primary: #26A99A;  /* Authoritative Deep Teal */
      --teal-soft: #26A99A;     /* Vibrant Soft Teal for Dark Mode */
      --teal-light-bg: #F0FDFA; /* Soft Tint for Light Highlights */
      --teal-glow: rgba(38,169,154, 0.15);

      --navy-primary: #1E3A5F;  /* Deep Corporate Navy � Divisions Accent */
      --navy-soft: #2C5282;     /* Lighter Navy for hover/dark states */
      --navy-light-bg: #EEF3F9; /* Soft Tint for Light Highlights */
      --navy-glow: rgba(44, 82, 130, 0.15);
      
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
      --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
      --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
      
      /* Single sans-serif family across the whole site. Both variables point
         to the same stack so headings and body text stay consistent; swap the
         first name here to change the site's typeface in one place. */
      --font-serif: 'Segoe UI', 'Segoe UI Variable', Tahoma, Geneva, Verdana, sans-serif;
      --font-sans: 'Segoe UI', 'Segoe UI Variable', Tahoma, Geneva, Verdana, sans-serif;
      
      --card-radius: 12px;
      --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Screen Reader Only Utility for SEO */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    body {
      font-family: var(--font-sans);
      background-color: var(--bg-dark-primary);
      color: var(--text-dark-muted);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

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

    button {
      cursor: pointer;
      font-family: inherit;
    }

    /* ==========================================================================
       HEADER & NAVIGATION
       ========================================================================== */

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 75px;
      background-color: rgba(5, 8, 14, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--card-dark-border);
      z-index: 1000;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      column-gap: 20px;
      padding: 0 2.5% 0 5%;
      transition: height var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
    }

    .site-header.scrolled {
      height: 62px;
      background-color: rgba(5, 8, 14, 0.97);
      box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
    }

    .brand-logo {
      grid-column: 1;
      display: flex;
      align-items: center;
      z-index: 1010;
      transition: transform var(--transition-normal);
    }

    .brand-logo-full {
      height: 34px;
      width: auto;
      display: block;
      transition: height var(--transition-normal);
    }

    .site-header.scrolled .brand-logo-full {
      height: 28px;
    }

    .nav-tagline-slot {
      position: absolute;
      top: 50%;
      left: 50vw;
      width: max-content;
      transform: translate(-50%, -50%);
      max-width: calc(100vw - 32px);
      font-family: var(--font-serif);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
      display: flex;
      align-items: center;
      z-index: 1;
    }

    .nav-letter {
      display: inline-block;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .nav-letter.white-text { color: var(--text-dark-main); }
    .nav-letter.teal-text { color: var(--teal-soft); font-weight: 800; }
    .nav-letter.visible { opacity: 1; transform: translateY(0); }

    /* Navigation Links */
    .site-nav {
      grid-column: 3;
      justify-self: end;
      display: flex;
      align-items: center;
      z-index: 2;
    }

    .nav-links {
      display: flex;
      gap: 19px;
      list-style: none;
      align-items: center;
      margin: 0;
    }

    .nav-links > li {
      display: flex;
      align-items: center;
    }

    .nav-links > li > a {
      color: var(--text-dark-main);
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: color var(--transition-fast);
      min-height: 32px;
      padding: 8px 0;
      position: relative;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .nav-links > li > a::after {
      display: none;
    }

    .nav-links > li > a:hover,
    .nav-links > li > a:focus-visible {
      color: var(--teal-soft);
      outline: none;
    }

    .nav-links > li > a:hover::after,
    .nav-links > li > a:focus-visible::after {
      transform: scaleX(1);
    }

    .nav-links .dropdown-trigger::after {
      display: none;
    }

    /* Divisions Dropdown Menu */
    .dropdown {
      position: relative;
    }

    .dropdown-trigger {
      gap: 4px;
    }

    .dropdown-arrow {
      display: inline-flex;
      align-items: center;
      font-size: 9px;
      line-height: 1;
      position: relative;
      top: -1px;
      transition: transform var(--transition-fast);
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
      font-size: 0;
    }

    .dropdown:hover .dropdown-arrow {
      transform: rotate(180deg);
    }

    /* Full-width horizontal strip, fixed directly under the header
       (header is a fixed 75px), rather than a boxed vertical card
       hanging off the trigger � it now spans the entire viewport width
       so all six divisions sit in a single row. position: fixed (not
       absolute) is what lets it break out of the nav's width and reach
       the full viewport edge to edge. */
    /* Height matches the nav bar exactly (75px) rather than sizing to
       its own padding, and centers its row of items vertically within
       that fixed strip. */
    .dropdown-menu-card {
      position: fixed;
      top: 75px;
      left: 0;
      right: 0;
      height: auto;
      min-height: 70px;
      display: flex;
      align-items: center;
      background-color: var(--bg-dark-primary);
      border: none;
      border-top: 1px solid var(--card-dark-border);
      border-bottom: 1px solid var(--card-dark-border);
      border-radius: 0;
      padding: 0 5%;
      width: auto;
      max-width: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      /* top/height are excluded from the transition (only opacity,
         visibility, transform run at var(--transition-fast)) � they
         instead track the header's own height change instantly via the
         .site-header.scrolled rule below, so the strip repositions in
         the same frame the header resizes rather than lagging a beat
         behind it and visibly opening a gap. */
      transition: opacity var(--transition-fast), visibility var(--transition-fast),
                  transform var(--transition-fast), top 0s, height 0s;
      box-shadow: 0 20px 40px rgba(0,0,0,0.6);
      z-index: 1100;
    }

    /* Header shrinks from 75px to 62px once scrolled (see
       .site-header.scrolled) � the strip must track that exactly or it
       either overlaps the header or leaves a visible gap beneath it.
       .dropdown-menu-card is nested inside .site-header itself, so a
       plain descendant selector reaches it. */
    .site-header.scrolled .dropdown-menu-card {
      top: 62px;
    }

    /* Invisible bridge so moving the pointer from the trigger into the panel
       does not cross a dead gap and close the menu. */
    .dropdown-menu-card::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      height: 20px;
    }

    .dropdown:hover .dropdown-menu-card,
    .dropdown:focus-within .dropdown-menu-card {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 14px;
      max-width: 1460px;
      width: 100%;
      margin: 0 auto;
    }

    .dropdown-item {
      display: block;
      /* flex-basis with wrap: three across on the strip normally, but
         wraps down to two rows of three rather than squeezing six items
         into an unreadably narrow column on medium desktop widths
         (this strip only appears =993px; below that the mobile nav
         panel takes over instead). */
      flex: 1 1 150px;
      padding: 10px 16px;
      border-radius: 8px;
      transition: background-color var(--transition-fast);
      text-align: center;
      border: 1px solid transparent;
      color: var(--text-dark-muted);
    }

    .dropdown-item:hover {
      background-color: var(--teal-glow);
      border-color: rgba(38,169,154, 0.2);
    }

    .dropdown-code {
      font-family: var(--font-serif);
      font-size: 15px;
      font-weight: 700;
      color: var(--teal-soft);
      letter-spacing: 1.2px;
      margin-bottom: 4px;
      display: block;
    }

    .dropdown-sub {
      font-size: 12px;
      color: var(--text-dark-muted);
      margin-top: 2px;
      white-space: nowrap;
    }

    /* Mobile Hamburger Toggle */
    .mobile-nav-toggle {
      grid-column: 3;
      justify-self: end;
      display: none;
      background: transparent;
      border: none;
      color: var(--text-dark-main);
      padding: 8px;
      z-index: 1010;
    }

    .hamburger-icon {
      width: 26px;
      height: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .hamburger-line {
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--text-dark-main);
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .mobile-nav-toggle.active .hamburger-line:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
    }

    .mobile-nav-toggle.active .hamburger-line:nth-child(2) {
      opacity: 0;
    }

    .mobile-nav-toggle.active .hamburger-line:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
    }

    /* ==========================================================================
       HERO SECTION
       ========================================================================== */

    /* Hero and the "What We Do" cards are now one continuous dark section
       (#landing) instead of a dark hero directly followed by a hard cut to
       a separate light section � that colour-block seam was making the
       homepage read as two stacked views instead of one landing view.
       .hero-section below now only supplies the tagline layout; the
       background, padding and the accordion cards live on #landing. */
    .hero-section {
      flex: 0 0 auto;
      min-height: 0;
      padding: 100px 5% 0;
      text-align: center;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Cursor-follow spotlight + film grain, replacing the earlier flowing
       particle canvas. A soft teal light tracks the mouse directly, with a
       subtle animated grain layered over everything for a premium,
       filmic finish. Spans the whole merged landing block (hero + cards),
       not just the old hero area.

       This is deliberately interaction-driven rather than ambient: it is
       the strongest option for a homepage where visitors are expected to
       actually look around on desktop. On touch devices there is no
       cursor, so the spotlight simply stays centred and only the grain
       texture is visible there � see initHeroSpotlight for that fallback.

       Scoped to #landing only, so the CORP and Careers pages � which
       reuse .hero-section but not #landing � are unaffected. */
    /* Fills the first screen on load: header is a fixed 75px, so #landing
       takes up the rest of the viewport height and centers its content
       (tagline + cards) inside it. min-height rather than height so it
       can still grow if content ever needs more room than one screen,
       rather than clipping. Our Network only appears once the visitor
       scrolls past this full-screen block. */
    #landing {
      position: relative;
      overflow: hidden;
      margin-top: 75px;
      background: var(--bg-dark-primary);
      /* calc(100vh - 75px) is a fallback for when JS hasn't run yet.
         Some browsers round 100vh inconsistently at non-100% zoom levels
         (it can end up noticeably taller than the real visible area,
         which is what produced the huge blank gap with the tagline and
         cards squeezed into the bottom of an oversized box). JS below
         overrides this with an exact pixel value computed from
         window.innerHeight, which tracks zoom correctly. */
      min-height: calc(100vh - 75px);
      max-height: calc(100vh - 75px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      /* Bottom padding still clears the fixed floating-dock (18px from
         the viewport bottom, ~34px tall). It's kept deliberately larger
         than the top padding (10px) so the centered block as a whole
         reads noticeably higher in the viewport rather than sitting
         dead-center, and so there's a generous breathing gap below the
         division cards before Our Network begins. */
      padding: 0 0 0;
    }

    #landing .landing-spotlight {
      position: absolute;
      width: 640px;
      height: 640px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(38,169,154, 0.28), transparent 70%);
      left: var(--sx, 50%);
      top: var(--sy, 260px);
      transform: translate(-50%, -50%);
      transition: left 0.25s ease-out, top 0.25s ease-out;
      pointer-events: none;
      z-index: 0;
    }

    #landing .landing-grain {
      position: absolute;
      inset: -50%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
      opacity: 0.15;
      animation: heroGrainShift 1s steps(4) infinite;
      pointer-events: none;
      z-index: 0;
    }

    @keyframes heroGrainShift {
      0% { transform: translate(0, 0); }
      25% { transform: translate(-2%, 1%); }
      50% { transform: translate(1%, -2%); }
      75% { transform: translate(-1%, 2%); }
      100% { transform: translate(0, 0); }
    }

    #landing > * {
      position: relative;
      z-index: 1;
    }

    /* Text entrance: only translateY is handled in CSS via class toggle.
       Opacity is deliberately left out of this rule and handled instead by
       a temporary inline style set directly in JS (see initHeroSpotlight),
       which is removed once the entrance finishes.

       This split matters: .hero-tagline.transferred (used by the
       scroll-to-nav effect below) sets opacity to 0.15. A class like
       "#landing .hero-tagline.arrived { opacity: 1 }" would have an ID in
       its selector and so would always outrank ".hero-tagline.transferred"
       on specificity � meaning once the entrance finished, scrolling could
       never dim the tagline again. Using a temporary inline style avoids
       that entirely: inline styles beat any class while present, and once
       JS removes the inline style, normal cascade rules (including
       .transferred) resume working exactly as before. transform carries
       no such conflict, since nothing else in the page sets a transform on
       this element, so it can safely stay as a plain CSS class. */
    /* Drops down from above into place, rather than the earlier subtle
       rise from below � a larger negative offset plus a slight
       overshoot easing so it visibly settles rather than just fading
       into position. */
    #landing .hero-tagline {
      transform: translateY(-46px);
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #landing .hero-tagline.arrived {
      transform: translateY(0);
    }

    /* LANDING ENTRANCE - Letters cascade individually */
    .hero-tagline .line-white,
    .hero-tagline .line-teal{display:block;overflow:hidden}
    .hero-letter{display:inline-block;opacity:0;transform:translateY(100%);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
    .hero-letter.vis{opacity:1;transform:translateY(0)}

    /* Division cards - each card slides from its own direction */
    .div-sq{opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
    .div-sq:nth-child(1){transform:translateX(-40px) rotate(-4deg)}
    .div-sq:nth-child(2){transform:translateY(-30px) rotate(2deg)}
    .div-sq:nth-child(3){transform:translateX(-20px) translateY(30px)}
    .div-sq:nth-child(4){transform:translateX(20px) translateY(30px)}
    .div-sq:nth-child(5){transform:translateY(-30px) rotate(-2deg)}
    .div-sq:nth-child(6){transform:translateX(40px) rotate(4deg)}
    .div-sq.entered{opacity:1;transform:translateX(0) translateY(0) rotate(0)}
    .div-sq:nth-child(1){transition-delay:.6s}
    .div-sq:nth-child(2){transition-delay:.7s}
    .div-sq:nth-child(3){transition-delay:.8s}
    .div-sq:nth-child(4){transition-delay:.9s}
    .div-sq:nth-child(5){transition-delay:1s}
    .div-sq:nth-child(6){transition-delay:1.1s}

    /* Stats ticker entrance - keep counting numbers, just slide up */
    .stats-ticker{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,1,.36,1) 1.3s,transform .6s cubic-bezier(.22,1,.36,1) 1.3s}
    .stats-ticker.entered{opacity:1;transform:translateY(0)}

    @media (prefers-reduced-motion: reduce) {
      #landing .landing-grain {
        animation: none;
      }

      #landing .hero-tagline {
        transform: none;
        transition: none;
      }
    }

    .hero-tagline {
      font-family: var(--font-serif);
      font-size: clamp(20px, 3.4vw, 32px);
      font-weight: 700;
      letter-spacing: 2.5px;
      line-height: 1.35;
      text-transform: uppercase;
      transition: opacity 0.4s ease;
      max-width: 1000px;
      margin: 0 auto;
      /* Protects readability against the glow without dimming the glow
         itself: a tight dark shadow right at each letter's edge, rather
         than a separate dark shape behind the whole line. */
      text-shadow: 0 2px 18px rgba(5, 8, 14, 0.9);
    }

    .hero-tagline .line-white {
      color: var(--text-dark-main);
      display: block;
      margin-bottom: 8px;
    }

    /* A moving highlight sweeps left-to-right across the teal line,
       shifting that patch of text from teal to white and back � done
       with a gradient text-fill animated via background-position rather
       than an opacity pulse, so it reads as a running light travelling
       through the words instead of the whole line flashing at once. */
    .hero-tagline .line-teal {
      display: block;
      color: var(--teal-soft);
    }

    /* The shimmer gradient is applied directly to each letter span once
       JS has split the line into .hero-letter elements. background-clip:text
       only works on the element whose text you want to show through, so
       it must live on the spans (which hold the actual characters), not
       the parent .line-teal wrapper. When letters haven't been split yet
       (JS disabled / hasn't run), the plain color:teal-soft above is the
       visible fallback. */
    .hero-tagline .line-teal .hero-letter {
      background: linear-gradient(
        100deg,
        var(--teal-soft) 30%,
        #FFFFFF 50%,
        var(--teal-soft) 70%
      );
      background-size: 250% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: taglineGlowSweep 8s ease-in-out infinite;
    }

    @keyframes taglineGlowSweep {
      0%, 10% { background-position: 100% 0; }
      45%, 55% { background-position: 0% 0; }
      90%, 100% { background-position: 100% 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-tagline .line-teal .hero-letter {
        animation: none;
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--teal-soft);
      }
    }

    .hero-tagline.transferred {
      opacity: 0.15;
    }

    .hero-subtitle {
      margin-top: 24px;
      font-size: 16px;
      color: var(--text-dark-muted);
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ==========================================================================
       SECTION HEADERS
       ========================================================================== */

    .section-header-center {
      text-align: center;
      margin-bottom: 40px;
    }

    .section-label {
      font-family: var(--font-serif);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      display: block;
      margin-bottom: 8px;
    }

    .section-title {
      font-family: var(--font-serif);
      font-size: clamp(26px, 3.5vw, 36px);
      font-weight: 700;
      line-height: 1.25;
    }

    /* Still used by every other light section on the page (Our Values,
       Services, How Stravision Delivers Value, Industries, FAQ, Careers) �
       this rule must stay even though #divisions no longer uses it. */
    .light-wrapper {
      background-color: var(--bg-dark-secondary);
      color: var(--text-dark-muted);
      padding: 64px 4% 76px;
    }

    .light-wrapper .section-label { color: var(--teal-soft); }
    .light-wrapper .section-title { color: var(--text-dark-main); }

    /* ==========================================================================
       PRACTICE AREAS � HOVER-EXPANDING ACCORDION ROW
       ========================================================================== */

    /* WHAT WE DO / Divisions accent stays teal now that the cards sit on
       the dark #landing background rather than the light section they
       used to belong to (the navy accent only read correctly on light). */
    #divisions .section-label { color: var(--teal-soft); }

    /* ==========================================================================
       DIVISION SQUARE CARDS � Static squares below the tagline. No
       animation, clean hover glow. Each has a subtle gradient tint.
       ========================================================================== */
    .div-squares {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 0 5% 0;
      flex: 1;
      min-height: 0;
    }

    .div-sq {
      position: relative;
      width: 120px;
      height: 120px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-decoration: none;
      color: inherit;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .div-sq:nth-child(1) { background: linear-gradient(155deg, rgba(38,169,154,.10) 0%, rgba(5,8,14,.95) 100%); }
    .div-sq:nth-child(2) { background: linear-gradient(155deg, rgba(30,58,95,.14) 0%, rgba(5,8,14,.95) 100%); }
    .div-sq:nth-child(3) { background: linear-gradient(160deg, rgba(15,118,110,.12) 0%, rgba(5,8,14,.95) 100%); }
    .div-sq:nth-child(4) { background: linear-gradient(155deg, rgba(38,169,154,.08) 0%, rgba(44,82,130,.08) 50%, rgba(5,8,14,.95) 100%); }
    .div-sq:nth-child(5) { background: linear-gradient(160deg, rgba(44,82,130,.12) 0%, rgba(38,169,154,.06) 50%, rgba(5,8,14,.95) 100%); }
    .div-sq:nth-child(6) { background: linear-gradient(155deg, rgba(38,169,154,.08) 0%, rgba(30,58,95,.10) 50%, rgba(5,8,14,.95) 100%); }

    .div-sq:hover {
      border-color: var(--teal-soft);
      box-shadow: 0 0 20px 3px rgba(38,169,154, 0.16), 0 10px 24px -8px rgba(0, 0, 0, 0.3);
    }

    .div-sq-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(38,169,154, 0.08);
      border: 1px solid rgba(38,169,154, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .div-sq:hover .div-sq-icon {
      background: rgba(38,169,154, 0.18);
      border-color: rgba(38,169,154, 0.4);
    }

    .div-sq-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--teal-soft);
      fill: none;
      stroke-width: 1.8;
    }

    .div-sq-name {
      font-family: var(--font-serif);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-dark-main);
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }

    /* Tooltip above card on hover */
    .div-sq-tip {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: rgba(38,169,154, 0.95);
      color: #04211D;
      font-size: 11px;
      font-weight: 600;
      padding: 7px 14px;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .div-sq-tip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border: 5px solid transparent;
      border-top-color: rgba(38,169,154, 0.95);
    }

    .div-sq:hover .div-sq-tip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 900px) {
      .div-squares { flex-wrap: wrap; gap: 12px; max-width: 400px; margin: 0 auto; }
      .div-sq { width: 110px; height: 110px; }
    }

    @media (max-width: 480px) {
      .div-squares { max-width: 280px; }
      .div-sq { width: 90px; height: 90px; }
      .div-sq-icon { width: 32px; height: 32px; }
      .div-sq-name { font-size: 9.5px; }
    }

    /* Dropdown strip layout: full-width, items evenly spaced with
       division name + description stacked vertically, separated by
       thin borders � replaces the old centered tile grid. */
    .dropdown-strip {
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: stretch;
      gap: 0 !important;
      width: 100%;
    }

    .dropdown-strip .dropdown-item {
      flex: 1;
      border-right: 1px solid var(--card-dark-border);
      border-radius: 0;
      padding: 16px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .dropdown-strip .dropdown-item:last-child {
      border-right: none;
    }

    .dropdown-strip .dropdown-item:hover {
      background-color: rgba(38,169,154, 0.06);
    }

    .dropdown-strip .dropdown-code {
      font-size: 13px;
      letter-spacing: 1px;
      margin-bottom: 0;
      text-transform: uppercase;
    }

    .dropdown-strip .dropdown-sub {
      font-size: 11.5px;
      margin-top: 0;
      white-space: nowrap;
    }

    /* Resources dropdown: same full-width strip style as Divisions */

    /* ==========================================================================
       NEW MIDDLE SECTIONS: Approach + Commitment + Values (v3 magnetic)
       ========================================================================== */
    .sec-approach,.sec-commitment,.sec-values{padding:40px 5% 80px}
    .sec-approach{background:var(--bg-dark-primary)}

    /* PROGRESS RAIL — Our Approach (5 nodes) */
    /* Standardized rail pattern shared by every horizontal circle+line
       diagram on the site (this rail, About Us "Our Strategic
       Direction", Careers "Growth path"): one fixed circle diameter via
       --rail-dot-size, and the line's vertical offset computed from
       that variable with calc() instead of a hand-picked pixel value —
       so the line always lands exactly on the circle centers regardless
       of any future diameter tweak. Animation is a continuous loop
       (light sweeping along the line + each dot pulsing in sequence)
       rather than the old one-shot scroll-triggered fill, matching the
       always-on treatment used elsewhere on the site. */
    .progress-rail{--rail-dot-size:48px;display:flex;align-items:flex-start;justify-content:center;gap:0;max-width:1000px;margin:0 auto;position:relative}
    .rail-line{position:absolute;top:calc(var(--rail-dot-size) / 2);left:12%;right:12%;height:2px;background:var(--card-dark-border);overflow:hidden}
    .rail-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--teal-soft),transparent);animation:railSweep 3s ease-in-out infinite}
    @keyframes railSweep{0%{left:-100%}100%{left:100%}}
    .rail-node{flex:1;text-align:center;position:relative;z-index:1}
    .rail-dot{width:var(--rail-dot-size);height:var(--rail-dot-size);border-radius:50%;border:2px solid var(--card-dark-border);background:var(--bg-dark-secondary);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:border-color .4s,box-shadow .4s;animation:railDotPulse 4s ease-in-out infinite}
    .rail-node:nth-child(2) .rail-dot{animation-delay:.6s}
    .rail-node:nth-child(3) .rail-dot{animation-delay:1.2s}
    .rail-node:nth-child(4) .rail-dot{animation-delay:1.8s}
    .rail-node:nth-child(5) .rail-dot{animation-delay:2.4s}
    @keyframes railDotPulse{0%,100%{border-color:var(--card-dark-border);box-shadow:none}50%{border-color:var(--teal-soft);box-shadow:0 0 20px rgba(38,169,154,.25)}}
    .rail-dot svg{width:18px;height:18px;stroke:var(--text-dark-muted);stroke-width:1.5;fill:none;animation:railIconPulse 4s ease-in-out infinite}
    .rail-node:nth-child(2) .rail-dot svg{animation-delay:.6s}
    .rail-node:nth-child(3) .rail-dot svg{animation-delay:1.2s}
    .rail-node:nth-child(4) .rail-dot svg{animation-delay:1.8s}
    .rail-node:nth-child(5) .rail-dot svg{animation-delay:2.4s}
    @keyframes railIconPulse{0%,100%{stroke:var(--text-dark-muted)}50%{stroke:var(--teal-soft)}}
    .rail-label{font-size:13px;font-weight:700;color:var(--text-dark-main);margin-bottom:4px}
    .rail-desc{font-size:11px;color:var(--text-dark-muted);line-height:1.5;max-width:160px;margin:0 auto}
    .sec-commitment{background:var(--bg-dark-secondary);border-top:1px solid var(--card-dark-border);border-bottom:1px solid var(--card-dark-border)}
    .sec-values{background:var(--bg-dark-primary)}
    .sec-wrap{max-width:1140px;margin:0 auto}
    .sec-head{text-align:center;margin-bottom:50px}
    .sec-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft);display:inline-block;margin-bottom:12px;padding:6px 14px;border:1px solid rgba(38,169,154,.2);border-radius:6px;background:rgba(38,169,154,.04)}
    .sec-title{font-family:var(--font-serif);font-size:clamp(26px,3.2vw,36px);font-weight:700;color:var(--text-dark-main);line-height:1.2;margin-top:8px}
    .sec-sub{margin-top:14px;font-size:15px;color:var(--text-dark-muted);white-space:nowrap}

    /* Magnetic cards */
    .mag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .mag-card{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--card-dark-border);border-radius:16px;padding:26px 20px 52px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
    .mag-card::before{content:'';position:absolute;inset:-1px;border-radius:16px;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(38,169,154,.15),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
    .mag-card:hover::before{opacity:1}
    .mag-card:hover{transform:translateY(-4px);border-color:rgba(38,169,154,.4);box-shadow:0 12px 40px -8px rgba(38,169,154,.18)}
    .mag-num{font-size:32px;font-weight:800;color:rgba(38,169,154,.2);margin-bottom:8px}
    .mag-title{font-size:14.5px;font-weight:700;color:var(--text-dark-main);margin-bottom:8px}
    .mag-desc{font-size:12px;color:var(--text-dark-muted);line-height:1.6}
    .mag-tag{position:absolute;bottom:20px;left:20px;font-size:10px;font-weight:700;color:var(--teal-soft);background:rgba(38,169,154,.08);padding:4px 10px;border-radius:6px}

    /* Glassmorphism cards */
    .glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto}
    .glass-card{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:22px 18px;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
    .glass-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(38,169,154,.3),transparent,rgba(38,169,154,.1),transparent);animation:glsBorderSpin 4s linear infinite;opacity:0;transition:opacity .4s}
    .glass-card:hover::after{opacity:1}
    .glass-card:hover{transform:translateY(-4px);border-color:rgba(38,169,154,.3);box-shadow:0 12px 40px -8px rgba(38,169,154,.15)}
    @keyframes glsBorderSpin{to{transform:rotate(360deg)}}
    .glass-inner{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
    .glass-icon{width:34px;height:34px;border-radius:9px;background:rgba(38,169,154,.1);border:1px solid rgba(38,169,154,.2);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
    .glass-icon svg{width:16px;height:16px;stroke:var(--teal-soft);fill:none;stroke-width:1.8}
    .glass-title{font-size:13px;font-weight:700;color:var(--text-dark-main);margin-bottom:6px}
    .glass-desc{font-size:11px;color:var(--text-dark-muted);line-height:1.55}

    /* Animated gradient border value cards */
    .val-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .val-card{position:relative;padding:3px;border-radius:18px;background:linear-gradient(135deg,rgba(38,169,154,.3),rgba(30,58,95,.3),rgba(184,134,47,.2));background-size:200% 200%;animation:valGradShift 6s ease infinite;transition:transform .3s var(--transition-normal)}
    .val-card:hover{transform:translateY(-5px);box-shadow:0 14px 44px -10px rgba(38,169,154,.18)}
    @keyframes valGradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    .val-inner{background:var(--bg-dark-primary);border-radius:15px;padding:30px 24px;height:100%}
    .val-title{font-family:var(--font-serif);font-size:19px;font-weight:700;color:var(--text-dark-main);margin-bottom:12px}
    .val-desc{font-size:13px;color:var(--text-dark-muted);line-height:1.7}
    .val-badge{display:inline-block;margin-bottom:14px;width:8px;height:8px;border-radius:50%}
    .vc1 .val-badge{background:var(--teal-soft)}
    .vc2 .val-badge{background:#3E6DA6}
    .vc3 .val-badge{background:#B8862F}

    @media (max-width:900px){
      .mag-grid,.glass-grid{grid-template-columns:repeat(2,1fr)}
      .val-row{grid-template-columns:1fr}
      .sec-sub{white-space:normal}
    }
    @media (max-width:560px){
      .mag-grid,.glass-grid{grid-template-columns:1fr}
    }

    /* Scroll-triggered motion */
    .sv-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--transition-normal),transform .7s var(--transition-normal)}
    .sv-reveal.vis{opacity:1;transform:none}
    .sv-up{opacity:0;transform:translateY(36px);transition:opacity .6s var(--transition-normal),transform .6s var(--transition-normal)}
    .sv-up.vis{opacity:1;transform:translateY(0)}
    .sv-left{opacity:0;transform:translateX(-40px);transition:opacity .6s var(--transition-normal),transform .6s var(--transition-normal)}
    .sv-left.vis{opacity:1;transform:translateX(0)}
    .sv-right{opacity:0;transform:translateX(40px);transition:opacity .6s var(--transition-normal),transform .6s var(--transition-normal)}
    .sv-right.vis{opacity:1;transform:translateX(0)}

    /* #2 Scale reveal - cards start small and grow */
    .sv-scale{opacity:0;transform:scale(.88);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
    .sv-scale.vis{opacity:1;transform:scale(1)}

    /* #1 3D Tilt perspective on cards */
    .tilt-card{transform-style:preserve-3d;transition:transform .15s ease-out}

    /* #6 Card content stagger on hover */
    .glass-card .glass-icon,.glass-card .glass-title,.glass-card .glass-desc,
    .mag-card .mag-num,.mag-card .mag-title,.mag-card .mag-desc{transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .25s}
    .glass-card:hover .glass-icon{transform:translateY(-2px)}
    .glass-card:hover .glass-title{transform:translateY(-1px)}
    .mag-card:hover .mag-num{transform:translateY(-2px)}
    .mag-card:hover .mag-title{transform:translateY(-1px)}

    /* #4 Glassmorphism depth layers - blurred accent behind cards */
    .depth-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(38,169,154,.08);filter:blur(60px);pointer-events:none;z-index:0}

    /* #5 Word-by-word title reveal */
    .word-reveal{display:block}
    .word-reveal .word{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
    .word-reveal.vis .word{opacity:1;transform:translateY(0)}

    /* #7 Floating accent particles */
    .section-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
    .section-particles .particle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(38,169,154,.25);animation:particleDrift linear infinite}
    @keyframes particleDrift{0%{transform:translateY(100%) translateX(0)}100%{transform:translateY(-100%) translateX(40px)}}

    /* #8 Magnetic cursor pull on headings */
    .magnetic-text{transition:transform .2s ease-out}

    /* #7 PARALLAX DEPTH on landing grain */
    .landing-grain-parallax{transition:transform .1s linear}

    /* #9 SCROLL-LINKED COLOR SHIFT on sections */
    .sec-approach,.sec-commitment,.sec-values{position:relative;overflow:hidden}

    /* #10 FAQ BORDER DRAW */
    .faq-row{border-left:2px solid transparent;transition:border-color .4s,background .2s}
    .faq-row.border-drawn{border-left-color:var(--teal-soft)}

    /* #3 Background gradient shift - subtle on sections */
    .bg-shift{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(38,169,154,.03) 0%,transparent 70%);transition:background-position .1s;pointer-events:none;z-index:0}
    .sec-wrap{position:relative;z-index:1}

    .practice-grid {
      display: flex;
      gap: 14px;
      /* Shorter than before (was 320px) � at the narrower 900px width the
         taller cards were reading as slab-like rather than the slim
         vertical-rectangle proportion this row is meant to have. */
      height: 230px;
      /* Narrower max-width than the section itself so the row reads as
         a condensed, centered group of cards rather than stretching
         edge-to-edge across the full page. */
      max-width: 900px;
      margin: 0 auto;
    }

    /* Six brand gradients, varying angle and which colour leads, built
       only from the teal ramp and navy so the row reads as varied while
       staying strictly on-palette. */
    .division-front.dg-1 { background: linear-gradient(150deg, #26A99A 0%, #26A99A 100%); }
    .division-front.dg-2 { background: linear-gradient(150deg, #1E3A5F 0%, #2C5282 100%); }
    .division-front.dg-3 { background: linear-gradient(160deg, #26A99A 0%, #26A99A 100%); }
    .division-front.dg-4 { background: linear-gradient(150deg, #26A99A 0%, #2C5282 100%); }
    .division-front.dg-5 { background: linear-gradient(160deg, #2C5282 0%, #26A99A 100%); }
    .division-front.dg-6 { background: linear-gradient(150deg, #26A99A 0%, #1E3A5F 100%); }

    /* Tall, narrow vertical rectangles at rest � no stacked/peeking
       layers behind them anymore, just the single card. Hovering (or
       keyboard focus, via :focus-within) grows one card and lets the
       rest shrink further; the expand is still pure CSS, no click
       handler or JS state. */
    .division-card {
      position: relative;
      flex: 1;
      overflow: hidden;
      border-radius: 16px;
      text-decoration: none;
      color: #FFFFFF;
      opacity: 0;
      transform: translateY(24px);
      transition: flex-grow 0.5s var(--transition-normal), opacity 0.6s var(--transition-normal),
                  transform 0.4s var(--transition-normal), box-shadow 0.4s var(--transition-normal);
      box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
    }

    .division-card.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .division-card:hover,
    .division-card:focus-within {
      flex-grow: 3.2;
      box-shadow: 0 26px 46px -18px rgba(0, 0, 0, 0.6);
    }

    /* Front face: the coloured card itself, holding the icon/code/copy.
       Kept as its own layer (rather than folded into .division-card)
       so the .division-rest / .division-full crossfade below still
       has a single, unambiguous parent to key off. */
    .division-front {
      position: absolute;
      inset: 0;
      border-radius: 16px;
      overflow: hidden;
    }

    /* Collapsed face: icon above the code, both upright and horizontal
       (no writing-mode rotation). */
    .division-rest {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 6px;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .division-card:hover .division-rest,
    .division-card:focus-within .division-rest { opacity: 0; }

    .division-icon {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .division-icon svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 1.8;
    }

    .division-code {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-align: center;
      line-height: 1.3;
    }

    /* Expanded face: fades and lifts in once the card grows on hover. */
    .division-full {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 24px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
    }

    .division-card:hover .division-full,
    .division-card:focus-within .division-full { opacity: 1; transform: none; }

    .division-code-big {
      font-family: var(--font-serif);
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 6px;
      /* No nowrap: the longer codes (INSIGHTS) have no
         fallback if they don't fit the expanded card's width at some
         zoom level or narrow viewport � letting it wrap normally like
         .division-subtitle already does is what actually prevents
         clipping, rather than forcing one line with no safety net. */
      white-space: normal;
      overflow-wrap: break-word;
    }

    .division-subtitle {
      font-size: 12.5px;
      line-height: 1.6;
      opacity: 0.9;
      max-width: 220px;
    }

    .division-icon-big {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
    }

    .division-icon-big svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 1.8;
    }

    /* ==========================================================================
       NETWORK MARQUEE STRIP
       ========================================================================== */

    /* Brand-only belt: white to the softest brand teal tint, with teal
       hairlines. No colour outside the teal/white palette is used here. */
    .network-strip {
      background: var(--bg-dark-secondary);
      border-top: 1px solid var(--card-dark-border);
      border-bottom: 1px solid var(--card-dark-border);
      padding: 40px 0 80px;
      overflow: hidden;
      white-space: nowrap;
    }

    .logo-marquee-track {
      display: inline-flex;
      gap: 16px;
      animation: marquee 45s linear infinite;
    }

    .logo-marquee-track:hover { animation-play-state: paused; }

    /* justify-content:center previously centred the (image + tag) pair
       as a single block, so the tag's vertical position drifted chip to
       chip depending on how tall that particular logo happened to
       render � a 48px-tall square mark pushed its tag lower than a
       30px-tall wordmark did. Switching to a fixed-height image slot
       (.logo-chip-img-wrap below) plus justify-content:space-between
       pins the image area to the same band and the tag to the same
       baseline in every chip, regardless of each logo's own aspect
       ratio. */
    .logo-chip {
      background: #FFFFFF;
      border: 1px solid rgba(38,169,154, 0.22);
      border-radius: 12px;
      padding: 14px 20px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 160px;
      height: 90px;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(38,169,154, 0.1);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .logo-chip-img-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      width: 100%;
    }

    .logo-chip:hover {
      border-color: var(--teal-soft);
      box-shadow: 0 6px 18px rgba(38,169,154, 0.22);
    }

    /* Shown in full colour at rest now (previously desaturated to
       grayscale and only regaining colour on hover) � the belt itself
       stays white/teal via its background and chip styling, so partner
       marks can carry their own real-world colours without breaking
       that palette discipline. Hover just lifts opacity slightly for
       a touch of polish, and the whole track pauses on hover below. */
    .logo-chip-img {
      max-width: 110px;
      max-height: 40px;
      object-fit: contain;
      opacity: 0.92;
      transition: opacity var(--transition-normal);
    }

    .logo-chip:hover .logo-chip-img {
      opacity: 1;
    }

    /* object-fit:contain sizes purely off each source file's own aspect
       ratio, not its pixel resolution. That's the actual cause of the
       "some logos look bigger, some look smaller" complaint: square
       icon-marks (ratio ~1) were shrinking to fit the 40px height and
       reading small, while wide wordmark logos (ratio 2.5-3.4) were
       stretching out to the full 110px width and reading noticeably
       larger. These per-logo overrides (keyed by the same data-imgkey
       used to inject each image) shrink the wide wordmarks and enlarge
       the square marks so every logo reads as roughly the same visual
       weight, rather than all sharing one generic box. */
    .logo-chip-img[data-imgkey="img1"],
    .logo-chip-img[data-imgkey="img2"],
    .logo-chip-img[data-imgkey="img6"],
    .logo-chip-img[data-imgkey="img7"],
    .logo-chip-img[data-imgkey="img8"],
    .logo-chip-img[data-imgkey="img9"],
    .logo-chip-img[data-imgkey="img11"],
    .logo-chip-img[data-imgkey="img14"],
    .logo-chip-img[data-imgkey="img17"] {
      max-width: 48px;
      max-height: 48px;
    }

    .logo-chip-img[data-imgkey="img12"],
    .logo-chip-img[data-imgkey="img15"],
    .logo-chip-img[data-imgkey="img16"] {
      max-width: 68px;
      max-height: 42px;
    }

    .logo-chip-img[data-imgkey="img3"],
    .logo-chip-img[data-imgkey="img4"],
    .logo-chip-img[data-imgkey="img5"],
    .logo-chip-img[data-imgkey="img10"],
    .logo-chip-img[data-imgkey="img13"],
    .logo-chip-img[data-imgkey="img18"],
    .logo-chip-img[data-imgkey="img19"],
    .logo-chip-img[data-imgkey="img20"] {
      max-width: 78px;
      max-height: 30px;
    }

    .logo-chip-tag {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--teal-primary);
    }

    .marquee-track {
      display: inline-flex;
      gap: 50px;
      animation: marquee 30s linear infinite;
    }

    .marquee-track:hover {
      animation-play-state: paused;
    }

    .marquee-item {
      font-family: var(--font-serif);
      font-size: 14px;
      color: var(--text-dark-muted);
      letter-spacing: 1.2px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
    }

    .marquee-item::before {
      content: "�";
      color: var(--teal-soft);
      font-size: 18px;
    }

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

    /* ==========================================================================
       OUR APPROACH - FULL-WIDTH MANIFESTO BAND
       ========================================================================== */

    /* Not a card grid: one wide band split into three by thin vertical
       dividers, echoing the scale of the homepage hero rather than
       introducing yet another card pattern on the same page. Fully
       static � no scroll-linked motion, no hover-dependent reveal � so
       every line of copy is visible immediately and nothing can end up
       looking broken. Hover only lifts the background tint slightly. */
    .stacked-cards-section {
      padding: 90px 5%;
      background-color: var(--bg-dark-primary);
      max-width: 1140px;
      margin: 0 auto;
    }

    .stacked-cards-section .section-label { color: var(--teal-soft); }
    .stacked-cards-section .section-title { color: var(--text-dark-main); }

    .stacked-cards-section .section-header-center {
      margin-bottom: 34px;
    }

    .pillar-flip-grid {
      display: flex;
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(120deg, #0B111E, #0D1627, #0B111E);
      border: 1px solid var(--card-dark-border);
    }

    .flip-card {
      flex: 1;
      padding: 46px 30px;
      text-align: center;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: background-color var(--transition-normal);
    }

    .flip-card:hover,
    .flip-card:focus-visible {
      background-color: rgba(38,169,154, 0.06);
      outline: none;
    }

    /* Thin divider between thirds � skipped on the first card since
       there is nothing to its left to divide from. */
    .flip-card + .flip-card::before {
      content: '';
      position: absolute;
      top: 20%;
      bottom: 20%;
      left: 0;
      width: 1px;
      background: rgba(255, 255, 255, 0.1);
    }

    .flip-title {
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text-dark-main);
      margin-bottom: 12px;
    }

    .flip-desc {
      max-width: 260px;
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--text-dark-muted);
      text-align: center;
    }

    /* ==========================================================================
       PROCESS STEP CARDS (CORP division page)
       These reuse the old stacked-card class names but are a plain vertical
       list � no stacking, no sticky behaviour.
       ========================================================================== */

    .stacked-deck-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 8px;
    }

    .stacked-card {
      background: linear-gradient(135deg, #0D1627 0%, #080D18 100%);
      border: 1px solid var(--card-dark-border);
      border-radius: var(--card-radius);
      padding: 26px 30px;
      text-align: center;
      box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
      transition: border-color var(--transition-fast), transform var(--transition-fast);
    }

    .stacked-card:hover {
      border-color: var(--teal-soft);
      transform: translateY(-3px);
    }

    .stacked-card-num {
      display: block;
      font-family: var(--font-serif);
      font-size: 12px;
      font-weight: 700;
      color: var(--teal-soft);
      letter-spacing: 2px;
      margin-bottom: 10px;
    }

    .stacked-card-title {
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 700;
      color: var(--text-dark-main);
      margin-bottom: 10px;
    }

    .stacked-card-desc {
      font-size: 14.5px;
      color: var(--text-dark-muted);
      max-width: 680px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ==========================================================================
       OUR VALUES & COMMITMENT
       ========================================================================== */

    .values-split-container {
      max-width: 1140px;
      margin: 0 auto 100px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start;
      /* Fallback only; recalculated from the real header height at runtime. */
      --values-card-top: 120px;
      /* Shared by the cards and the left copy so both pin at the same offset,
         occupy the same box height, and therefore release together. Sized to
         the copy now that the oversized background numerals are gone. */
      --values-card-height: 248px;
    }

    /* The copy is given the same sticky offset AND the same box height as a
       value card. Identical geometry means it pins level with the middle of
       whichever card is showing and releases on exactly the same scroll
       position as the last card, so the two halves travel up together
       instead of the cards leaving the text behind. */
    .values-left-content {
      position: sticky;
      top: var(--values-card-top);
      height: var(--values-card-height);
      align-self: start;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: var(--bg-light-primary);
      z-index: 2;
    }

    .values-left-content .section-label {
      text-align: center;
      margin-bottom: 10px;
    }

    .values-left-title {
      font-family: var(--font-serif);
      font-size: clamp(30px, 3.5vw, 40px);
      font-weight: 700;
      color: var(--text-light-main);
      line-height: 1.18;
      margin-bottom: 20px;
    }

    .values-left-desc {
      font-size: 15.5px;
      color: var(--text-light-muted);
      line-height: 1.7;
      max-width: 420px;
      margin: 0 auto;
    }

    .values-stack-deck {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Content is centred both ways now that the numerals are gone, which
       keeps the three cards symmetrical as they stack. */
    /* Every card gets full corner rounding, not just the literal
       first/last child. Rounding only the outer edges avoided a subtle
       transitional notch as one card slides up under another, but it
       caused a much more visible bug: whichever card is currently the
       active/topmost one at rest shows square top corners, since it's
       visually the top edge of the whole stack at that moment (a later
       card is not adjacent to the one before it, it fully covers it).
       A square corner sitting at rest at the top of the stack reads as
       a much more obvious a bug than a faint notch during active
       scrolling, so this direction is the better trade-off. */
    .value-stack-card {
      position: sticky;
      top: var(--values-card-top);
      height: var(--values-card-height);
      border-radius: 16px;
      padding: 36px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #FFFFFF;
      overflow: hidden;
      /* Flush, so each card lands exactly on the previous one with no strip
         of the earlier card visible during the transition. */
      margin-bottom: 0;
    }

    .value-stack-card:nth-child(1) { background-color: #0B1728; z-index: 1; }
    .value-stack-card:nth-child(2) { background-color: #26A99A; z-index: 2; }
    .value-stack-card:nth-child(3) { background-color: #26A99A; z-index: 3; }

    .value-card-title {
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #FFFFFF;
      position: relative;
      z-index: 2;
    }

    .value-card-text {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.65;
      /* Held narrower than the card so the centred lines stay balanced
         instead of running the full width. */
      max-width: 440px;
      margin: 0 auto;
      text-wrap: pretty;
      position: relative;
      z-index: 2;
    }

    /* OUR COMMITMENT - COMPACT CARD */
    /* 1140px to match every other section's content width (Our Values,
       Our Approach, blogs, footer) � this was previously 1080px, which
       made this card sit visibly narrower and inset from the sections
       above and below it instead of sharing the same left/right edges. */
    .compact-commitment-wrapper {
      max-width: 1140px;
      margin: 0 auto 90px;
    }

    .compact-commitment-container {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 32px;
      background: #FFFFFF;
      border: 1px solid var(--card-light-border);
      border-radius: 16px;
      padding: 36px;
      box-shadow: var(--shadow-sm);
      align-items: center;
    }

    .commitment-hero-side {
      background: #10141C;
      border-radius: 12px;
      padding: 36px 30px;
      color: #FFFFFF;
      border-left: 5px solid var(--teal-primary);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* Card now holds only the headline + subtitle (no tag, no
         divisions list), so everything is centred rather than
         left-anchored � reads as a single focal statement instead of
         a mini article. */
      align-items: center;
      text-align: center;
    }

    .compact-title {
      font-family: var(--font-serif);
      font-size: 24px;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.3;
      margin-bottom: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .compact-desc {
      font-size: 13.5px;
      color: var(--text-dark-muted);
      line-height: 1.6;
    }

    .compact-list-side {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .compact-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 14px;
      border-radius: 8px;
      transition: background-color var(--transition-fast);
    }

    .compact-row:hover {
      background-color: #F1F5F9;
    }

    .compact-icon {
      width: 36px;
      height: 36px;
      background: var(--teal-light-bg);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .compact-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--teal-primary);
    }

    .compact-text {
      display: flex;
      flex-direction: column;
    }

    .row-title {
      font-family: var(--font-serif);
      font-size: 14px;
      font-weight: 700;
      color: var(--text-light-main);
      line-height: 1.25;
    }

    .row-desc {
      font-size: 12.5px;
      color: var(--text-light-muted);
      line-height: 1.35;
    }

    /* ==========================================================================
       BLOG / THOUGHT LEADERSHIP
       ========================================================================== */

    /* Right column holds one tall vertical card; left column stacks two
       shorter horizontal cards beside it � grid-template-areas maps
       that shape regardless of source order, and both row tracks share
       height so the two stacked cards together match the vertical
       card's full height exactly. */
    /* Fixed row tracks (rather than 1fr 1fr, which stretched to
       whatever height the tallest content demanded) is what actually
       caps the grid's total height � this was the cause of the blog
       section reading as "full screen": two auto-stretched rows plus
       generous card padding compounded into a very tall block. 130px
       per row keeps each horizontal card compact while still holding
       its image + two lines of copy. */
    .blog-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      grid-template-rows: 130px 130px;
      grid-template-areas:
        "horiz1 vert"
        "horiz2 vert";
      gap: 16px;
      /* 1140px to match every other section's content width � this was
         previously 1000px, which made the blog cards sit visibly
         narrower/inset from Our Values, Our Commitment, and the footer. */
      max-width: 1140px;
      margin: 0 auto;
    }

    .blog-card-horizontal:nth-of-type(1) { grid-area: horiz1; }
    .blog-card-horizontal:nth-of-type(2) { grid-area: horiz2; }
    .blog-card-vertical { grid-area: vert; }

    .light-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--card-dark-border);
      border-radius: var(--card-radius);
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-normal);
      overflow: hidden;
    }

    .light-card:hover {
      border-color: rgba(38,169,154,.35);
      box-shadow: 0 12px 40px -8px rgba(38,169,154,.12);
      transform: translateY(-4px);
    }

    /* Horizontal cards: image fills a fixed-width left band, copy sits
       in the remaining space on the right � image and text read
       side-by-side rather than stacked, to match the shorter,
       landscape proportion of these two cards. */
    .blog-card-horizontal {
      display: flex;
      align-items: stretch;
      min-height: 0;
    }

    .blog-card-horizontal .blog-thumb {
      width: 38%;
      flex-shrink: 0;
      border-radius: 0;
    }

    .blog-card-horizontal .blog-card-body {
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      overflow: hidden;
    }

    /* Vertical card: image fills the top band, copy sits below it �
       the taller portrait proportion this card is meant to have. */
    .blog-card-vertical {
      display: flex;
      flex-direction: column;
    }

    .blog-card-vertical .blog-thumb {
      width: 100%;
      height: 52%;
      border-radius: 0;
    }

    .blog-card-vertical .blog-card-body {
      padding: 14px 18px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      overflow: hidden;
    }

    /* Stock photography replaced with brand artwork: teal/navy abstract
       compositions drawn inline, so the cards stay on palette and load
       without external requests. */
    .blog-thumb {
      overflow: hidden;
      position: relative;
      display: block;
    }

    .blog-thumb svg {
      width: 100%;
      height: 100%;
      display: block;
      transition: transform var(--transition-normal);
    }

    .light-card:hover .blog-thumb svg { transform: scale(1.05); }

    .blog-category {
      font-size: 10px;
      color: var(--teal-primary);
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .blog-title {
      font-family: var(--font-serif);
      font-size: 14px;
      font-weight: 700;
      color: var(--text-dark-main);
      margin-bottom: 4px;
      line-height: 1.25;
      font-weight: 700;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .blog-card-vertical .blog-title {
      font-size: 15px;
    }

    .card-text-light {
      font-size: 11.5px;
      color: var(--text-dark-muted);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .blog-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
          "vert"
          "horiz1"
          "horiz2";
      }

      .blog-card-vertical .blog-thumb { height: 200px; }

      /* Horizontal cards switch to the same top-image/bottom-text stack
         as the vertical card once the grid is a single column. At this
         width the side-by-side layout squeezed the 38%-wide thumbnail
         into a narrow sliver next to cramped text; stacking it gives the
         artwork and copy both their full width instead. */
      .blog-card-horizontal {
        flex-direction: column;
      }
      .blog-card-horizontal .blog-thumb {
        width: 100%;
        height: 200px;
      }
      .blog-card-horizontal .blog-card-body {
        padding: 14px 18px;
        justify-content: flex-start;
      }
    }

    /* ==========================================================================
       FOOTER
       ========================================================================== */

    .site-footer {
      background-color: var(--bg-dark-primary);
      color: var(--text-dark-muted);
      padding: 70px 5% 120px;
      border-top: 1px solid var(--card-dark-border);
      font-size: 13.5px;
    }

    .footer-container {
      max-width: 1140px;
      margin: 0 auto;
    }

    /* Solid dark background (rather than the old translucent teal
       overlay) since this card now sits inside the light FAQ section
       instead of directly on the footer's own dark backdrop � it needs
       to carry its own dark surface to still read correctly, matching
       the rounded dark panel look from the reference. box-shadow adds
       a visible lift off the light background, since border-radius
       alone reads flat without it once the card isn't sat directly on
       a matching dark section anymore. */
    .footer-cta {
      background: rgba(5, 8, 14, 0.92);
      border: 1px solid rgba(38,169,154, 0.2);
      border-radius: 16px;
      box-shadow: 0 18px 40px -14px rgba(5, 8, 14, 0.35);
      padding: 32px 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
      flex-wrap: wrap;
      max-width: 1140px;
      margin: 44px auto 0;
    }

    .footer-cta-title {
      font-family: var(--font-serif);
      font-size: 24px;
      font-weight: 700;
      color: var(--text-dark-main);
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .footer-cta-sub { font-size: 13.5px; }

    .footer-cta-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .footer-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      padding: 12px 18px;
      border-radius: 8px;
      transition: all var(--transition-normal);
    }

    .footer-btn svg { width: 14px; height: 14px; fill: currentColor; }

    .footer-btn-ghost {
      border: 1px solid rgba(38,169,154, 0.3);
      color: #FFFFFF;
      background: rgba(38,169,154, 0.06);
    }
    .footer-btn-ghost:hover { border-color: var(--teal-soft); background: rgba(38,169,154, 0.12); color: var(--teal-soft); }

    .footer-columns {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 46px;
      align-items: start;
    }

    .footer-brand-col {
      display: flex;
      align-items: flex-start;
    }

    /* Scaled up to hold the brand column now that the address line is gone. */
    .footer-logo-img {
      height: 54px;
      width: auto;
      display: block;
    }

    .footer-col-title {
      font-size: 11px;
      color: var(--text-dark-main);
      margin-bottom: 16px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
    }

    /* teal tick before each column heading */
    .footer-col-title::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 2px;
      background-color: var(--teal-soft);
      vertical-align: middle;
      margin-right: 8px;
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 10px;
    }

    .footer-links a {
      transition: color var(--transition-fast);
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: var(--teal-soft);
      outline: none;
    }

    /* SEO Service Directory Tabs � plain, no boxed background per request */
    .seo-pills-box {
      border-top: 1px solid var(--card-dark-border);
      padding: 28px 0 0;
      text-align: center;
    }

    /* No divider rule under the tabs � the active pill already reads as the
       separator, and the extra line cut the footer up unnecessarily. */
    .seo-tabs {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 18px;
      padding-bottom: 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* Without a definite max-width, this row's own content (six
         nowrap tab buttons) could push it � and with it, .footer-
         container and the page itself � wider than the viewport on
         narrow screens, rather than scrolling within its own box as
         overflow-x:auto intends. Capping it to 100% of its parent
         forces the scrollbar to actually activate here instead of the
         whole footer bleeding off-screen. */
      max-width: 100%;
    }

    .seo-tab-btn {
      background: none;
      border: 1px solid transparent;
      color: var(--text-dark-muted);
      font-size: 12.5px;
      font-weight: 600;
      padding: 6px 14px;
      cursor: pointer;
      border-radius: 6px;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .seo-tab-btn:hover {
      color: var(--teal-soft);
      background-color: var(--card-dark-bg);
    }

    .seo-tab-btn.active {
      background-color: var(--teal-soft);
      color: #05080E;
      font-weight: 700;
    }

    .seo-pills-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .seo-pill {
      background-color: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--card-dark-border);
      border-radius: 6px;
      color: var(--text-dark-muted);
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      transition: all var(--transition-fast);
    }

    .seo-pill:hover,
    .seo-pill:focus-visible {
      border-color: var(--teal-soft);
      color: var(--teal-soft);
      background-color: var(--teal-glow);
      outline: none;
    }

    .footer-bottom-copy {
      margin-top: 30px;
      text-align: center;
      font-size: 12px;
      color: var(--text-dark-muted);
    }

    /* ==========================================================================
       FLOATING ACTION DOCK
       ========================================================================== */

    .floating-dock {
      position: fixed;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(5, 8, 14, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(38,169,154, 0.2);
      border-radius: var(--card-radius);
      padding: 16px 7px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      z-index: 999;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .dock-link {
      color: var(--teal-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border-radius: 10px;
      border: none;
      border-top: 1px solid var(--card-dark-border);
      transition: background 0.2s, color 0.2s;
    }

    .dock-link:first-child {
      border-top: 1px solid var(--card-dark-border);
    }

    .dock-link + .dock-link {
      margin-top: 0;
    }

    .dock-link:hover,
    .dock-link:focus-visible {
      background: rgba(38,169,154, 0.15);
      color: #fff;
      outline: none;
    }

    .dock-icon {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    /* ==========================================================================
       MEDIA QUERIES (RESPONSIVE DESIGN)
       ========================================================================== */

    /* The base grid is already three across, so no override is needed here. */

    /* Compress the full desktop navigation before switching to the mobile menu. */
    @media (min-width: 993px) and (max-width: 1200px) {
      .site-header {
        padding-left: 3%;
        padding-right: 1.5%;
        column-gap: 12px;
      }

      .nav-tagline-slot {
        font-size: 11px;
        letter-spacing: 1px;
      }

      .nav-links {
        gap: 12px;
      }

      .nav-links > li > a {
        font-size: 10px;
        letter-spacing: 0.35px;
      }
    }

    @media (max-width: 992px) {
      .nav-tagline-slot {
        display: none;
      }

      .site-nav {
        position: fixed;
        top: 75px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 75px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #05080E;
        border-bottom: 1px solid var(--card-dark-border);
        padding: 24px 5%;
        transform: translateY(-150%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
      }

      .site-header.scrolled .site-nav {
        top: 62px;
        max-height: calc(100vh - 62px);
      }

      .site-nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
      }

      .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .nav-links > li {
        display: block;
        width: 100%;
      }

      .nav-links > li > a {
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        width: 100%;
      }

      .dropdown-menu-card {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        box-shadow: none;
        padding: 12px 0 0;
        border: none;
        background: transparent;
        display: none;
      }

      .dropdown.active .dropdown-menu-card {
        display: block;
      }

      .dropdown-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .mobile-nav-toggle {
        display: block;
      }

      .values-split-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .values-left-content {
        position: relative;
        top: 0;
        height: auto;
        transform: none;
        text-align: center;
      }

      .values-left-desc {
        margin: 0 auto;
      }

      /* Sticky stacking needs viewport room, so on tablets and phones the
         value cards return to normal document flow. */
      .value-stack-card {
        position: relative;
        top: auto;
        height: auto;
        min-height: 210px;
        margin-bottom: 20px;
        /* Cards are visually separated again here (each has its own
           margin), so every one needs full corner rounding and its own
           shadow, rather than only the first/last as in the flush
           desktop stack above. */
        border-radius: 16px;
        box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.3);
      }

      .value-stack-card:last-child {
        margin-bottom: 0;
      }

      /* Stack the three thirds vertically on narrow screens instead of
         squeezing them side by side; dividers switch from vertical
         lines between columns to horizontal lines between rows. */
      .pillar-flip-grid {
        flex-direction: column;
      }

      .flip-card + .flip-card::before {
        top: 0;
        bottom: auto;
        left: 20%;
        right: 20%;
        width: auto;
        height: 1px;
      }

      .compact-commitment-container {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
      }

      .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }

      .footer-brand-col {
        grid-column: 1 / -1;
      }

      .footer-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 24px;
      }

      .footer-cta-title { font-size: 21px; }
    }

    @media (max-width: 768px) {
      .hero-section {
        padding: 30px 5% 20px;
      }

      /* The hover-expand and stacked-peek depth both need pointer hover
         to make sense; on narrow/touch screens the row instead wraps,
         the peeking layers hide, and every card shows its expanded face
         directly, stacked. */
      .practice-grid {
        flex-wrap: wrap;
        height: auto;
        padding: 0;
      }

      .division-card {
        flex: 1 1 100%;
        /* min-height instead of a fixed height: longer subtitle copy
           (e.g. "Governance and Risk Advisory") wrapping onto more
           lines than shorter ones would otherwise clip against a fixed
           130px box on narrow screens. min-height keeps every card at
           least that tall while letting it grow if its own text needs
           more room. */
        height: auto;
        min-height: 130px;
      }

      .division-rest { display: none; }

      /* .division-front is position:absolute; inset:0 on desktop, which
         only fills whatever height its already-sized parent has � it
         can't make .division-card grow to fit longer wrapped text. On
         mobile it switches to a normal block so its real content
         height (driven by .division-full below) is what actually sets
         .division-card's height via min-height above.

         height: 100% was wrong here: .division-card's height is `auto`
         on mobile (a floor is set via min-height, not a definite
         height), and a percentage height against an auto-height parent
         resolves to nothing usable � it collapses to zero rather than
         "fill available space". That's what was making the whole card
         disappear. Dropping height entirely lets these flow normally:
         .division-full's real content height becomes .division-front's
         height, which becomes .division-card's height, all through
         ordinary block flow instead of percentages. */
      .division-front {
        position: relative;
        inset: auto;
      }

      .division-full {
        position: relative;
        opacity: 1;
        transform: none;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 18px 24px;
      }

      .division-icon-big { margin-bottom: 0; flex: 0 0 36px; }

      .value-stack-card {
        height: auto;
        min-height: 190px;
        padding: 26px 24px;
      }

      .footer-columns {
        grid-template-columns: 1fr;
      }

      .footer-brand-col {
        grid-column: auto;
      }

      .floating-dock {
        width: auto;
        right: 12px;
        padding: 12px 7px;
        gap: 14px;
      }

      .dock-link {
        font-size: 11.5px;
      }
    }

    @media (max-width: 768px) {
      .hero-tagline {
        font-size: clamp(18px, 5.5vw, 24px) !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
        padding: 0 16px !important;
      }
      .hero-tagline .line-white,
      .hero-tagline .line-teal {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
      }
    }

    @media (max-width: 480px) {
      .hero-tagline {
        font-size: clamp(17px, 5.2vw, 21px) !important;
      }

      .stacked-card {
        padding: 30px 20px;
      }

      .compact-row {
        align-items: flex-start;
      }

      .seo-tabs {
        justify-content: flex-start;
      }
    }

    /* ==========================================================================
       LIVE STATS TICKER � thin animated strip, sits between the division
       cards and the network marquee. Numbers count up once the strip
       scrolls into view; reinforces an active, currently-operating firm
       rather than a static credentials list.
       ========================================================================== */
    .stats-ticker {
      background-color: transparent;
      border-top: 1px solid var(--card-dark-border);
      border-bottom: 1px solid var(--card-dark-border);
      padding: 26px 5%;
      margin-top: 60px;
    }

    .stats-ticker-row {
      max-width: 1140px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
    }

    .stat-item {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex: 1 1 auto;
      justify-content: center;
    }

    .stat-num {
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 700;
      color: var(--teal-soft);
      line-height: 1;
      min-width: 2.4ch;
      text-align: right;
    }

    .stat-label {
      font-size: 12px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--text-dark-muted);
    }

    .stat-item + .stat-item {
      border-left: 1px solid var(--card-dark-border);
      padding-left: 24px;
    }

    @media (max-width: 720px) {
      .stats-ticker-row { justify-content: space-between; }
      .stat-item { flex: 1 1 42%; justify-content: flex-start; }
      .stat-item + .stat-item { border-left: none; padding-left: 0; }
    }

    /* ==========================================================================
       OUR APPROACH � scroll-linked connector line across the three pillars,
       plus an icon that draws itself in as each card activates. Card order
       (We Execute ? One Trusted Partner ? We Grow With You) reads as a
       live sequence rather than three unrelated static blocks.
       ========================================================================== */
    /* ==========================================================================
       OUR APPROACH � PROOF RAIL (v3 redesign)
       Client-tested instinct: a prospect wants proof of process before
       anything else. Vertical tab rail on the left (click to switch
       stage � self-directed, not scroll-forced), each stage opens a
       detail panel on the right carrying a concrete fact pair rather
       than a mood adjective. Desktop: side-by-side rail + panel.
       Mobile: rail collapses to a horizontal scrollable pill row above
       a full-width panel.
       ========================================================================== */
    .approach-wrap {
      max-width: 1140px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 0;
      border: 1px solid var(--card-dark-border);
      border-radius: 20px;
      overflow: hidden;
      background: var(--bg-dark-secondary);
    }

    .approach-rail {
      border-right: 1px solid var(--card-dark-border);
    }

    .approach-tab {
      width: 100%;
      text-align: left;
      display: block;
      padding: 24px 26px;
      background: none;
      border: none;
      border-bottom: 1px solid var(--card-dark-border);
      cursor: pointer;
      font-family: inherit;
      color: var(--text-dark-muted);
      transition: background 0.3s var(--transition-normal), border-left-color 0.3s var(--transition-normal);
      border-left: 3px solid transparent;
    }

    .approach-tab:last-child { border-bottom: none; }

    .approach-tab-n {
      display: block;
      font-family: var(--font-serif);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 2px;
      color: var(--teal-soft);
      margin-bottom: 6px;
    }

    .approach-tab-t {
      display: block;
      font-size: 16px;
      font-weight: 700;
      color: var(--text-dark-main);
    }

    .approach-tab:hover:not(.active) { background: rgba(255,255,255,0.03); }
    .approach-tab.active {
      background: linear-gradient(90deg, rgba(38,169,154,0.12) 0%, transparent 100%);
      border-left-color: var(--teal-soft);
    }

    .approach-panels {
      position: relative;
      padding: 48px 50px;
      min-height: 300px;
    }

    .approach-panel {
      display: none;
      animation: approachFade 0.45s var(--transition-normal);
    }

    .approach-panel.active { display: block; }

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

    .approach-panel-badge {
      position: absolute;
      top: 38px;
      right: 46px;
      font-family: var(--font-serif);
      font-size: 72px;
      font-weight: 800;
      color: rgba(38,169,154, 0.08);
      line-height: 1;
      pointer-events: none;
    }

    .approach-panel-title {
      font-family: var(--font-serif);
      font-size: 25px;
      font-weight: 700;
      color: var(--text-dark-main);
      max-width: 22ch;
      margin-bottom: 16px;
      position: relative;
    }

    .approach-panel-desc {
      font-size: 15px;
      color: var(--text-dark-muted);
      max-width: 54ch;
      margin-bottom: 26px;
      position: relative;
    }

    .approach-facts {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      position: relative;
    }

    .approach-fact {
      border-left: 2px solid var(--teal-soft);
      padding-left: 16px;
    }

    .approach-fact-n {
      font-family: var(--font-serif);
      font-size: 22px;
      font-weight: 800;
      color: var(--text-dark-main);
      line-height: 1;
    }

    .approach-fact-l {
      margin-top: 5px;
      font-size: 12px;
      color: var(--text-dark-muted);
      letter-spacing: 0.3px;
    }

    @media (max-width: 900px) {
      .approach-wrap { grid-template-columns: 1fr; border-radius: 16px; }
      .approach-rail {
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--card-dark-border);
        -webkit-overflow-scrolling: touch;
      }
      .approach-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        border-bottom: none;
        border-right: 1px solid var(--card-dark-border);
        border-left: none;
        border-top: 3px solid transparent;
      }
      .approach-tab.active { border-top-color: var(--teal-soft); border-left-color: transparent; }
      .approach-panels { padding: 32px 24px; }
      .approach-panel-badge { display: none; }
      .approach-facts { gap: 22px; }
    }

    /* ==========================================================================
       STRAVISION'S COMMITMENT � FLIP-STAT GRID (v3 redesign)
       Six tiles in a uniform grid; front face carries only the icon and
       a short label, so the section reads clean at a glance. Hover
       (desktop) / tap (touch) flips the tile 180� via a real 3D
       transform to reveal the full description on a solid gradient
       back face � a fundamentally different interaction than the
       hover-expand or bento-span patterns already tried.
       ========================================================================== */
    .commitment-grid {
      max-width: 1140px;
      margin: 0 auto 60px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .commitment-tile {
      perspective: 1500px;
      height: 190px;
    }

    .commitment-tile-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.7s var(--transition-normal);
      transform-style: preserve-3d;
      cursor: pointer;
    }

    .commitment-tile.flipped .commitment-tile-inner,
    .commitment-tile:hover .commitment-tile-inner,
    .commitment-tile:focus-within .commitment-tile-inner {
      transform: rotateY(180deg);
    }

    .commitment-face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      border-radius: 16px;
      padding: 26px 24px;
      display: flex;
      flex-direction: column;
    }

    .commitment-front {
      background-color: var(--bg-light-surface);
      border: 1px solid var(--card-light-border);
      justify-content: space-between;
    }

    .commitment-back {
      background: linear-gradient(150deg, #26A99A 0%, #26A99A 100%);
      transform: rotateY(180deg);
      justify-content: center;
      box-shadow: var(--shadow-lg);
    }

    .commitment-tile:nth-of-type(2) .commitment-back { background: linear-gradient(150deg, #1E3A5F 0%, #2C5282 100%); }
    .commitment-tile:nth-of-type(4) .commitment-back { background: linear-gradient(150deg, #2C5282 0%, #26A99A 100%); }
    .commitment-tile:nth-of-type(5) .commitment-back { background: linear-gradient(150deg, #26A99A 0%, #1E3A5F 100%); }
    .commitment-tile:nth-of-type(6) .commitment-back { background: linear-gradient(150deg, #26A99A 0%, #2C5282 100%); }

    .commitment-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--teal-light-bg);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .commitment-icon svg {
      width: 21px;
      height: 21px;
      stroke: var(--teal-primary);
      fill: none;
      stroke-width: 1.8;
    }

    .commitment-title {
      font-family: var(--font-serif);
      font-size: 16px;
      font-weight: 700;
      color: var(--text-light-main);
    }

    .commitment-hint {
      font-size: 11px;
      color: var(--text-light-muted);
      letter-spacing: 0.3px;
    }

    .commitment-back-tag {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      margin-bottom: 10px;
    }

    .commitment-back p {
      font-size: 13px;
      line-height: 1.65;
      color: #fff;
    }

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

    @media (max-width: 560px) {
      .commitment-grid { grid-template-columns: 1fr; gap: 14px; }
      .commitment-tile { height: 168px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .commitment-tile-inner, .approach-panel { transition: none; animation: none; }
    }
  

    .site-page{display:none;}
    .site-page.active{display:block;}
  

    /* ===== CORP PAGE COMPONENTS ===== */

    /* Services grid � hover-lift tiles with teal accent edge */
    .corp-services-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
      max-width:1140px; margin:0 auto;
    }
    .service-tile{
      background:var(--bg-light-surface);
      border:1px solid var(--card-light-border);
      border-left:3px solid transparent;
      border-radius:10px;
      padding:20px 22px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      transition:all var(--transition-fast);
      box-shadow:var(--shadow-sm);
    }
    .service-tile:hover{
      border-left-color:var(--teal-primary);
      transform:translateX(4px);
      box-shadow:var(--shadow-md);
    }
    .service-tile-title{
      font-family:var(--font-serif); font-weight:700; font-size:14.5px;
      color:var(--text-light-main);
    }
    .service-tile-cta{
      font-size:11px; font-weight:700; color:var(--teal-primary);
      letter-spacing:0.5px; white-space:nowrap; opacity:0;
      transition:opacity var(--transition-fast);
    }
    .service-tile:hover .service-tile-cta{ opacity:1; }

    /* Why You Need Expert Support � icon rows */
    .risk-row-grid{
      display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
      max-width:900px; margin:50px auto 0;
    }
    .risk-row-item{
      display:flex; gap:16px; align-items:flex-start;
      background:linear-gradient(135deg, #0D1627 0%, #080D18 100%);
      border:1px solid var(--card-dark-border);
      border-radius:12px; padding:20px;
      transition:border-color var(--transition-fast);
    }
    .risk-row-item:hover{ border-color:var(--teal-soft); }
    .risk-row-icon{
      width:38px; height:38px; border-radius:9px; flex-shrink:0;
      background:var(--teal-glow); display:flex; align-items:center; justify-content:center;
    }
    .risk-row-icon svg{ width:19px; height:19px; stroke:var(--teal-soft); }
    .risk-row-title{
      font-family:var(--font-serif); font-weight:700; font-size:14px;
      color:var(--text-dark-main); margin-bottom:4px;
    }
    .risk-row-desc{ font-size:12.5px; color:var(--text-dark-muted); line-height:1.5; }

    /* How Stravision Delivers Value � numbered tiles */
    .value-tile-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
      max-width:1140px; margin:0 auto;
    }
    .value-tile{
      background:#FFFFFF; border:1px solid var(--card-light-border);
      border-radius:14px; padding:26px 20px; text-align:center;
      box-shadow:var(--shadow-sm); transition:all var(--transition-normal);
      position:relative; overflow:hidden;
    }
    .value-tile:hover{
      transform:translateY(-6px); box-shadow:var(--shadow-md);
      background:#10141C;
    }
    .value-tile-num{
      font-family:var(--font-serif); font-size:32px; font-weight:800;
      color:var(--teal-light-bg); -webkit-text-stroke:1.5px var(--teal-primary);
      margin-bottom:10px; transition:all var(--transition-normal);
    }
    .value-tile:hover .value-tile-num{ color:rgba(255,255,255,0.1); -webkit-text-stroke:1.5px var(--teal-soft); }
    .value-tile-title{
      font-family:var(--font-serif); font-weight:700; font-size:14.5px;
      color:var(--text-light-main); transition:color var(--transition-normal);
    }
    .value-tile:hover .value-tile-title{ color:#FFFFFF; }

    /* Industries pill row */
    .industry-pill-row{
      display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
      max-width:1000px; margin:0 auto;
    }
    .industry-pill{
      background:var(--teal-light-bg); color:var(--teal-primary);
      border:1px solid rgba(38,169,154,0.2); border-radius:20px;
      padding:9px 18px; font-size:13px; font-weight:600;
      transition:all var(--transition-fast);
    }
    .industry-pill:hover{
      background:var(--teal-primary); color:#FFFFFF;
      transform:translateY(-2px);
    }

    /* FAQ accordion */
    .faq-accordion{ max-width:820px; margin:0 auto; }

    /* Homepage FAQ: single flat question list (no category tabs) plus
       the contact CTA panel living directly inside this same section
       (see the FAQ markup) so there is no section boundary between the
       questions and the CTA, or between this section and the footer
       right after it. */
    .faq-home-header{ text-align:center; margin-bottom: 8px; }
    .faq-home-sub{
      font-size:13.5px; color:var(--text-dark-muted);
      max-width:520px; margin:0 auto 32px;
    }

    /* Reduced (not zeroed) bottom padding on this section: the CTA card
       is dark and self-contained with its own rounded corners, so it
       was never actually going to blend into the dark footer below it
       regardless of padding � zeroing the padding just left the card
       with no breathing room of its own, making it look cramped/cut
       off right above the footer. A modest gap here lets the card read
       as a clean, separate panel floating in the light section. */
    .faq-section-seamless{ padding:40px 5% 80px; background-color: var(--bg-dark-primary); }

    .faq-row{
      border:1px solid var(--card-dark-border); border-radius:10px;
      margin-bottom:10px; overflow:hidden; background:rgba(255,255,255,.03);
    }
    .faq-q{
      width:100%; background:none; border:none; text-align:left;
      padding:16px 20px; display:flex; justify-content:space-between; align-items:center;
      font-family:var(--font-serif); font-weight:700; font-size:14px;
      color:var(--text-dark-main); cursor:pointer;
    }
    .faq-plus{ color:var(--teal-soft); font-size:18px; transition:transform var(--transition-fast); }
    .faq-row.open .faq-plus{ transform:rotate(45deg); }
    .faq-a{ max-height:0; overflow:hidden; transition:max-height var(--transition-normal); padding:0 20px; }
    /* 600px comfortably covers every real FAQ answer on the site, including
       the longest multi-clause answers once they wrap to 6+ lines on a
       narrow mobile viewport (previously 160px, which clipped those). The
       transition is still smooth since CSS animates toward whichever value
       is set, not to the content's actual height. */
    .faq-row.open .faq-a{ max-height:600px; padding-bottom:16px; }
    .faq-a p{ font-size:13px; color:var(--text-dark-muted); line-height:1.6; }

    /* CTA band */
    .corp-cta-band{
      background:var(--bg-dark-secondary);
      padding:40px 5%;
      display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;
      border-top:1px solid var(--card-dark-border);
      border-bottom:1px solid var(--card-dark-border);
    }
    .corp-cta-band h2{
      font-family:var(--font-serif); font-size:24px; font-weight:700; color:#FFFFFF;
    }
    .corp-cta-btn{
      background:var(--teal-soft); color:#05080E; font-weight:700;
      padding:13px 32px; border-radius:8px; font-size:13.5px;
      box-shadow:0 0 24px rgba(38,169,154,0.5);
      transition:all var(--transition-fast);
    }
    .corp-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 0 32px rgba(38,169,154,0.7); }

    /* Aligned to the site's standard 992px breakpoint (where the nav
       itself switches to the mobile menu) rather than the previous
       one-off 900px, so the CORP page grids and the header change
       layout at the same viewport width instead of leaving a ~90px
       band where the nav is still desktop-style but these grids have
       already collapsed. A 2-column step is added here too, since
       jumping straight from 3/2 columns to 1 column skipped a natural
       tablet-width layout. */
    @media (max-width:992px){
      .corp-services-grid{ grid-template-columns:repeat(2,1fr); }
    }

    @media (max-width:768px){
      .corp-services-grid{ grid-template-columns:1fr; }
      .risk-row-grid{ grid-template-columns:1fr; }
      .value-tile-grid{ grid-template-columns:1fr; }
      .progress-rail{flex-direction:column;gap:24px}
      .rail-line{display:none}
      .rail-desc{max-width:none}
      /* .rail-dot's 14px bottom margin exists to clear the horizontal
         connecting line in the desktop layout. Once stacked, that line
         is gone and the 24px gap above already separates each node, so
         the extra margin just adds uneven, unintentional-looking space
         between a dot and its own label — tighten it down to a small
         value that still gives the dot some breathing room. */
      .rail-dot{margin:0 auto 10px}
    }
  


/* ==========================================================================
   RESPONSIVE REFINEMENTS (tablet + mobile) — appended, cascades last
   Targets gaps found in the responsive audit. Desktop layout unchanged;
   these rules only apply at tablet (<=992) and mobile (<=600/480) widths.
   ========================================================================== */

/* Fluid hero subtitle so it scales down on small phones instead of staying 16px */
@media (max-width: 600px){
  .hero-subtitle{ font-size: 15px; max-width: 100%; }
}

/* Floating dock: on phones it becomes a compact horizontal bar pinned to the
   bottom-right so it never overlaps a full column of body text on the right
   edge, and each target stays >=44px. Semi-transparent + slightly smaller so
   it reads as an overlay control, not a block sitting on the content. */
@media (max-width: 600px){
  .floating-dock{
    top: auto;
    bottom: 12px;
    right: 10px;
    transform: none;
    flex-direction: row;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    background-color: rgba(5, 8, 14, 0.82);
  }
  .dock-link{
    border-top: none;
    padding: 10px;
    min-width: 42px;
    min-height: 42px;
  }
  .dock-icon{ width: 20px; height: 20px; }
  /* Clear space at the very bottom of the page so the fixed dock never
     hides the footer copyright / last line of content. */
  .site-footer{ padding-bottom: 78px; }
}

/* Tap-target floors on shared interactive chrome (>=44px comfortable touch) */
@media (max-width: 992px){
  .mobile-nav-toggle{ padding: 10px; }
  .footer-links a{ display: inline-block; padding: 4px 0; }
}

/* Floating dock on every inner page (anything other than the homepage,
   which has its own purpose-built .mh-dock inside .mhome) -- below the
   homepage's own 992px mobile cutoff, restyle this shared dock into the
   same full-width Call/WhatsApp/Email bottom bar used there, instead of
   the small floating pill cluster above. That pill cluster is still fine
   on tablets/narrow-desktop (601-992px, where this rule does not apply
   until the viewport also drops under 600px via the rule above) -- this
   block specifically targets the phone-width range so inner pages read
   consistently with the homepage's mobile dock rather than carrying over
   the desktop-style floating control. Overrides (does not duplicate) the
   600px rule above since it's declared later in the same cascade layer
   at equal specificity. */
@media (max-width: 600px){
  .floating-dock{
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: 100%; flex-direction: row; gap: 0; padding: 0;
    border-radius: 0; border: none; border-top: 1px solid rgba(38,169,154, 0.2);
    background-color: rgba(5, 8, 14, 0.97);
  }
  .dock-link{
    flex: 1; min-width: 0; border-top: none; border-radius: 0;
    height: 54px; padding: 0; gap: 3px;
    flex-direction: column; font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
  }
  .dock-link + .dock-link{ border-left: 1px solid var(--card-dark-border); }
  .dock-link::after{ content: attr(aria-label); }
  .dock-icon{ width: 19px; height: 19px; }
  .site-footer{ padding-bottom: 60px; }
}

/* Home division square cards: add a genuine tablet layer (2-up) between the
   3-up wrap and the small-phone size, and keep them from feeling cramped. */
@media (max-width: 900px) and (min-width: 561px){
  .div-squares{ gap: 14px; }
}

/* Blog grid rows should not stay fixed height once stacked on mobile. */
@media (max-width: 768px){
  .blog-grid{ grid-template-rows: auto; }
}

/* Prevent any stray horizontal scrolling from wide inline media on small screens */
@media (max-width: 600px){
  img, iframe, video, table{ max-width: 100%; }
}

/* ---- Horizontal-overflow guards (mobile + tablet) ----
   1) The scroll-reveal helpers translate elements +/-40px on the X axis
      before they animate in. Off-screen (not-yet-revealed) elements then
      stick out past the viewport edge and create a horizontal scrollbar /
      jitter on touch. On narrow screens, reveal them VERTICALLY instead so
      nothing ever sits outside the horizontal bounds.
   2) overflow-x:clip on the root is a hard safety net that also contains
      fixed/absolute decorative layers (which body{overflow-x:hidden} can
      miss). clip (not hidden) avoids creating a scroll container. */
@media (max-width: 992px){
  html{ overflow-x: clip; }
  .sv-left, .sv-right{ transform: translateY(28px) !important; }
  .sv-left.vis, .sv-right.vis{ transform: translateY(0) !important; }
}

/* =============================================================================
   MOBILE NAV FIX (burger panel must be full-width, not a cut-off right strip).
   Root cause: .site-header has backdrop-filter, which makes it the containing
   block for its position:fixed children. That pinned the open .site-nav panel
   to the header's own (shrunk) grid column instead of the viewport, rendering
   it as a ~56px sliver on the right edge. Dropping the filter on mobile lets
   the fixed nav size against the viewport = full width.
   This block must stay LAST in the cascade (appended at end of file) so its
   !important rules reliably win over the earlier @media(max-width:992px)
   mobile-nav rules above. Applies site-wide via the shared stylesheet.
   ============================================================================= */
@media (max-width: 992px){
  .site-header{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .site-header .site-nav{
    position: fixed !important;
    top: 75px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    justify-self: stretch !important;
    background-color: #05080E !important;
    padding: 20px 6% 28px !important;
    max-height: calc(100vh - 75px) !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.8) !important;
  }
  .site-header.scrolled .site-nav{ top: 62px !important; }
  .site-nav .nav-links{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 4px !important;
  }
  .site-nav .nav-links > li{ display: block !important; width: 100% !important; }
  .site-nav .nav-links > li > a{
    display: flex !important;
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 16px !important;
    padding: 14px 4px !important;
  }
  .site-nav:not(.active){ transform: translateY(-150%) !important; opacity: 0 !important; visibility: hidden !important; }
  .site-nav.active{ transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; }
  /* Dropdown submenus (Divisions / Resources) inside the mobile panel: force
     them static + stacked (the desktop .dropdown-strip flex row was leaking
     in and misaligning the items). */
  .site-nav .dropdown-menu-card{
    position: static !important; top: auto !important; width: 100% !important;
    transform: none !important; box-shadow: none !important; background: transparent !important;
    padding: 6px 0 4px 12px !important; border: none !important;
  }
  .site-nav .dropdown:not(.active) .dropdown-menu-card{ display: none !important; }
  .site-nav .dropdown.active .dropdown-menu-card{ display: block !important; opacity: 1 !important; visibility: visible !important; }
  .site-nav .dropdown-grid,
  .site-nav .dropdown-strip{
    display: flex !important; flex-direction: column !important; flex-wrap: wrap !important;
    gap: 2px !important; width: 100% !important;
  }
  .site-nav .dropdown-item{
    display: block !important; width: 100% !important; text-align: left !important;
    padding: 10px 4px !important;
  }
  /* rotate the little caret when its dropdown is open */
  .site-nav .dropdown.active .dropdown-arrow{ transform: rotate(180deg); display:inline-block; }
}

/* Flagship nav item (SOP & Digital SOP Advisory) intentionally has no
   special gold/orange styling — it renders as a plain .dropdown-item,
   identical to every other entry in the Divisions dropdown, matching
   the homepage's version exactly (index.html has no gold override at
   all, since it doesn't load this stylesheet's older gold accent). */

/* Divisions dropdown in the navbar: the description under each division name is in capitals */
.dropdown-strip .dropdown-sub { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }

span.cat-reg-new {
    display: none !important;
}