:root {
            --black: #001846;
            --ink: #0B1220;
            --paper: #ffffff;
            --offwhite: #F7F8FA;
            --muted: #5B6472;
            --line: #E6E8EC;
            --radius: 0px;
            --navy: #001846;
            --navy-2: #030F4D;
            --teal: #0FB5AE;
            --teal-dark: #0A8F89;
          }
      /* 1. Global Teal Variables */
      :root {
        --teal: #5dbb64 !important;
        --teal-dark: #5dbb64 !important;
      }

      /* 2. Top Meta Icons (Calendar, Tag) & Related Cards Date */
      .md2-meta .mi svg,
      .md2-hc svg,
      .md2-hero-guests svg,
      .md2-fact h4,
      .md2-fact .loc svg,
      .md2-rel-loc svg,
      .md2-rel-date {
        color: #5dbb64 !important;
      }

      /* 3. CLIMATE TECHNOLOGY Badge */
      .md2-badge {
        color: #5dbb64 !important;
        background: rgba(93, 187, 100, 0.12) !important;
        border-color: rgba(93, 187, 100, 0.3) !important;
        box-shadow: 0 4px 12px rgba(93, 187, 100, 0.15) !important;
      }

      /* 4. Quote Left Border & Cite */
      .md2-quote {
        border-left-color: #5dbb64 !important;
      }
      .md2-quote cite {
        color: #5dbb64 !important;
      }

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

          html {
            scroll-behavior: smooth
          }

          body {
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--paper);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;

          }

          .pvx,
          .imp,
          .pc,
          .dnx,
          .afn-quote,
          .dark,
          .pc,
          .tl,
          .ft,
          .wsv,
          .bn,
          .ltk,
          .vwx,
          .afn-cap,
          .afn-journal,
          .hero,
          .crhero,
          .opsec,
          .evsec,
          .mdhero,
          .faqpage,
          .ptnr,
          .fz-panel {
            max-width: 1440px !important;
            margin: 0 auto !important;
          }

          h1,
          h2,
          h3 {
            font-family: 'Inter', sans-serif;
            line-height: 1.08;
            letter-spacing: -0.02em
          }

          h1,
          h2 {
            color: #1B1464
          }

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

          img {
            display: block;
            max-width: 100%
          }

          .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 28px
          }

          /* ---------- NAV ---------- */
          nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 14px 32px;
            max-width: 100% !important;
            margin: 0 !important;
            background: rgb(27 43 75 / 45%);
            -webkit-backdrop-filter: blur(5px) saturate(121%);
            backdrop-filter: blur(5px) saturate(121%);
            border: none;
            border-radius: 0;
            box-shadow: none;
            transition: background .3s ease, box-shadow .3s ease;
          }

          .logo {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 22px;
            letter-spacing: -0.03em;
            display: flex;
            align-items: center;
            gap: 10px
          }

          .logo-word {
            height: 26px;
            width: auto;
            display: block
          }

          .logo-img {
            height: 40px;
            width: auto;
            display: block
          }

          .site-nav .logo {
            position: relative;
            height: 50px;
            width: 150px;
          }

          .site-nav .logo-img {
            height: 100%;
            width: auto;
            max-width: 100%;
            object-fit: contain;
            object-position: left center;
            transition: opacity .25s ease
          }


          .navlinks {
            display: flex;
            gap: 34px;
            font-size: 18px
          }

          .navlinks a {
            color: rgba(255, 255, 255, .92)
          }

          .navlinks a:hover {
            color: #fff
          }

          .navlinks a.active {
            color: #fff;
            font-weight: 700
          }

          /* ---- pill nav brand (badge + name + divider) ---- */
          .site-nav .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            height: 44px;
            width: auto
          }

          .nav-badge {
            width: 45px;
            height: 54px;
            border-radius: 0%;
            background: var(--navy, #1B1464);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 15px;
            letter-spacing: .02em;
            overflow: hidden
          }

          .nav-badge img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 1px;
            background: #fff
          }

          .nav-brand-name {
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 700;
            font-size: 20px;
            letter-spacing: -.01em;
            color: #1a1a1a;
            white-space: nowrap
          }

          /* Hindi wordmark on white background */
          .nav-brand-hi {
            display: inline-flex;
            align-items: center;
            background: #fff;
            padding: 4px 8px;
            border-radius: 8px;
            line-height: 0
          }

          /* open the logo in a full/large view on hover only */
          .site-nav .logo {
            position: relative
          }

          .logo-preview {
            position: absolute;
            top: calc(100% + 14px);
            left: 0;
            z-index: 120;
            background: #fff;
            padding: 22px 30px;
            border-radius: 16px;
            box-shadow: 0 30px 70px -24px rgba(3, 15, 77, .5);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px) scale(.96);
            transform-origin: top left;
            transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s;
            pointer-events: none
          }

          .logo-preview img {
            height: 260px;
            width: auto;
            max-width: none;
            object-fit: contain;
            display: block
          }

          .site-nav .logo:hover .logo-preview {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1)
          }

          @media (prefers-reduced-motion:reduce) {
            .logo-preview {
              transition: opacity .2s
            }

            .site-nav .logo:hover .logo-preview {
              transform: none
            }
          }

          .nav-brand-hi img {
            height: 30px;
            width: auto;
            display: block
          }

          /* zoom the whole logo on hover only */
          .site-nav .logo {
            transition: transform .35s cubic-bezier(.22, 1, .36, 1);
            transform-origin: left center
          }

          @media (prefers-reduced-motion:reduce) {
            .site-nav .logo {
              transition: none
            }
          }

          .nav-divider {
            width: 1px;
            height: 26px;
            background: var(--line, #e6e6e3);
            margin: 0 6px;
            flex-shrink: 0
          }

          /* gold contact pill on the right */
          .nav-contact {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14px;
            border-radius: 40px;
            padding: 11px 24px;
            background: var(--navy, #1B1464);
            color: #fff;
            transition: .2s;
            white-space: nowrap
          }

          .nav-contact:hover {
            background: #030F4D;
            transform: translateY(-1px)
          }

          /* ---- mobile hamburger + slide-in menu ---- */
          .nav-burger {
            display: none;
            width: 44px;
            height: 44px;
            border: none;
            background: transparent;
            cursor: pointer;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
            border-radius: 50%;
            transition: background .18s
          }

          .nav-burger:hover {
            background: var(--offwhite, #f4f5f2)
          }

          .nav-burger span {
            display: block;
            width: 22px;
            height: 2px;
            background: #1a1a1a;
            border-radius: 2px;
            transition: transform .3s, opacity .2s
          }

          body.mnav-open .nav-burger span:nth-child(1) {
            transform: translateY(7px) rotate(45deg)
          }

          body.mnav-open .nav-burger span:nth-child(2) {
            opacity: 0
          }

          body.mnav-open .nav-burger span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg)
          }

          .mnav-overlay {
            position: fixed;
            inset: 0;
            background: rgba(3, 15, 77, .45);
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s, visibility .3s;
            z-index: 400
          }

          body.mnav-open .mnav-overlay {
            opacity: 1;
            visibility: visible
          }

          .mnav-panel {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(86vw, 340px);
            background: #fff;
            z-index: 401;
            box-shadow: -20px 0 60px -20px rgba(0, 24, 70, .4);
            transform: translateX(100%);
            transition: transform .35s cubic-bezier(.22, 1, .36, 1);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 24px 22px 40px
          }

          body.mnav-open .mnav-panel {
            transform: translateX(0)
          }

          .mnav-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px
          }

          .mnav-head .nav-brand-hi img {
            height: 26px
          }

          .mnav-close {
            width: 40px;
            height: 40px;
            border: none;
            background: transparent;
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            color: #1a1a1a;
            border-radius: 50%
          }

          .mnav-close:hover {
            background: var(--offwhite, #f4f5f2)
          }

          .mnav-links {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin: 0;
            padding: 0;
            list-style: none
          }

          .mnav-links a {
            display: block;
            padding: 14px 12px;
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
            text-decoration: none;
            border-radius: 10px;
            transition: background .15s
          }

          .mnav-links a:active,
          .mnav-links a:hover {
            background: var(--offwhite, #f4f5f2)
          }

          .mnav-group>.mnav-sub-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 14px 12px;
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
            background: transparent;
            border: none;
            cursor: pointer;
            border-radius: 10px;
            text-align: left
          }

          .mnav-group>.mnav-sub-toggle svg {
            width: 16px;
            height: 16px;
            transition: transform .25s
          }

          .mnav-group.open>.mnav-sub-toggle svg {
            transform: rotate(180deg)
          }

          .mnav-sub {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease;
            padding-left: 10px
          }

          .mnav-group.open .mnav-sub {
            max-height: 400px
          }

          .mnav-sub a {
            font-size: 15px;
            font-weight: 500;
            color: #3a3a3a;
            padding: 11px 12px;
            display: flex;
            align-items: center;
            gap: 10px
          }

          .mnav-sub a .mega-ic {
            width: 26px;
            height: 26px;
            border-radius: 7px
          }

          .mnav-sub a .mega-ic svg {
            width: 15px;
            height: 15px
          }

          .mnav-contact {
            margin-top: 20px;
            text-align: center;
            background: var(--navy, #1B1464);
            color: #fff;
            padding: 14px;
            border-radius: 40px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 16px;
            text-decoration: none
          }

          @media(max-width:820px) {
            .nav-burger {
              display: inline-flex
            }

            .navbtns .nav-contact {
              display: none
            }
          }

          @media(min-width:821px) {

            .mnav-overlay,
            .mnav-panel {
              display: none
            }
          }

          .navbtns {
            display: flex;
            gap: 12px
          }

          .after-scroll {
            height: 53px !important;


          }

          .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 12px;
            border-radius: 0;
            padding: 7px 18px;
            transition: .2s;
          }

          .btn-ghost {
            background: #fff;
            border: 1.5px solid var(--ink);
            color: var(--ink)
          }

          .btn-ghost:hover {
            background: var(--ink);
            color: #fff
          }

          .btn-dark {
            background: var(--black);
            color: #fff
          }

          .btn-dark:hover {
            background: #2a2a2a
          }

          .btn .arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 0;
            background: #fff;
            color: var(--black);
          }

          .btn-dark .arrow {
            background: #fff;
            color: var(--black)
          }

          /* nav right icon cluster */
          .navbtns {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0
          }

          .nav-prof-wrap {
            flex-shrink: 0
          }

          .nav-ic {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            background: #fff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--ink);
            transition: .18s
          }

          .nav-ic:hover {
            background: var(--offwhite);
            border-color: #d6d6d1
          }

          .nav-ic svg {
            width: 19px;
            height: 19px;
            stroke: currentColor;
            fill: none
          }

          .nav-dot {
            position: absolute;
            top: 9px;
            right: 10px;
            width: 8px;
            height: 8px;
            border-radius: 0;
            background: #d4373a;
            border: 2px solid #fff
          }

          .nav-profile {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            cursor: pointer;
            background: var(--navy);
            color: #fff;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: .18s;
            margin-left: 4px;
            overflow: hidden;
            flex-shrink: 0;
            padding: 0
          }

          .nav-profile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%
          }

          .nav-profile:hover {
            box-shadow: 0 0 0 3px rgba(0, 38, 113, .18)
          }

          /* role toggle */
          .role-toggle {
            display: inline-flex;
            background: var(--offwhite);
            border: 1.5px solid var(--line);
            border-radius: 30px;
            padding: 3px;
            margin-right: 6px
          }

          .role-opt {
            font-size: 12.5px;
            font-weight: 600;
            color: #8a8a86;
            padding: 6px 14px;
            border-radius: 30px;
            cursor: pointer;
            transition: .18s;
            white-space: nowrap;
            user-select: none
          }

          .role-opt.active {
            background: var(--navy);
            color: #fff
          }

          /* profile dropdown */
          .nav-prof-wrap {
            position: relative
          }

          .nav-menu {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 248px;
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 14px;
            box-shadow: 0 18px 50px -16px rgba(0, 0, 0, .28);
            padding: 8px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: opacity .18s, transform .18s, visibility .18s;
            z-index: 120
          }

          .nav-menu.open {
            opacity: 1;
            visibility: visible;
            transform: none
          }

          .nm-head {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 10px 10px 12px;
            margin-bottom: 6px;
            border-bottom: 1px solid #f0f0ee
          }

          .nm-av {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--navy);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 12px;
            flex-shrink: 0;
            overflow: hidden
          }

          .nm-av img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%
          }

          .nm-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14px;
            color: var(--ink)
          }

          .nm-role {
            font-size: 11.5px;
            color: var(--muted);
            margin-top: 2px
          }

          .nm-item {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 9px 10px;
            border-radius: 9px;
            font-size: 13.5px;
            font-weight: 500;
            color: #3a3a3a;
            cursor: pointer;
            transition: .14s;
            text-decoration: none
          }

          .nm-item:hover {
            background: var(--offwhite);
            color: var(--ink)
          }

          .nm-item svg {
            width: 17px;
            height: 17px;
            stroke: #6b6b6b;
            fill: none;
            flex-shrink: 0
          }

          .nm-item:hover svg {
            stroke: var(--navy)
          }

          .nm-tag {
            margin-left: auto;
            font-size: 11px;
            font-weight: 700;
            color: #1f9d57;
            background: #e9f6ef;
            border-radius: 20px;
            padding: 1px 8px
          }

          .nm-sep {
            height: 1px;
            background: #f0f0ee;
            margin: 6px 4px
          }

          .nm-item.danger {
            color: #d4373a
          }

          .nm-item.danger svg {
            stroke: #d4373a
          }

          .nm-item.danger:hover {
            background: #fdecec
          }

          @media(max-width:1080px) {
            .role-toggle {
              display: none
            }
          }

          /* ===== SITEWIDE TYPOGRAPHY SPEC (forced over all scoped rules) ===== */
          h1 {
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            /* font-size:clamp(30px,4.6vw,45px) !important; */
            line-height: 1.12 !important;
            letter-spacing: -.02em !important;
            margin: 4px 0 0 !important;
            color: #1B1464;
          }

          h1 .accent,
          .h1-accent,
          h1 .h1-accent {
            color: #9aa3ad !important;
            font-weight: 600 !important;
          }

          .lead {
            max-width: 520px !important;
            margin: 18px auto 0 !important;
            font-size: 18px !important;
            font-weight: 500 !important;
            line-height: 1.6 !important;
            color: var(--muted) !important;
          }

          .eyebrow {
            display: inline-block !important;
            font-size: 16px !important;
            font-weight: 500 !important;
            letter-spacing: .04em !important;
            color: var(--muted) !important;
            position: relative !important;
            padding-left: 18px !important;
            margin-bottom: 14px !important;
          }

          .quote-tx,
          .sq-text {
            font-family: 'Inter', sans-serif !important;
            font-weight: 400 !important;
            font-size: clamp(20px, 2.4vw, 28px) !important;
            line-height: 1.4 !important;
            color: var(--navy) !important;
            margin: 0 !important;
          }

          /* ===== /SITEWIDE TYPOGRAPHY SPEC ===== */

          /* ========== GLOBAL SECTION STYLING (About Page Aesthetic) ========== */
          .section-eyebrow {
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: .04em;
            color: var(--muted);
            position: relative;
            padding-left: 18px;
            margin-bottom: 14px;
            text-align: center
          }

          .section-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 10px;
            height: 10px;
            border-left: 1.5px solid var(--teal);
            border-top: 1.5px solid var(--teal);
            transform: translateY(-50%)
          }

          .section-heading {
            font-family: 'Inter', sans-serif;
            font-weight: 600 !important;
            font-size: clamp(32px, 4.6vw, 56px);
            line-height: 1.08;
            letter-spacing: -.025em;
            color: var(--navy);
            margin: 4px 0 0;
            text-align: center
          }

          .section-heading .accent {
            color: #9aa3ad;
            font-weight: 700 !important;
          }

          .section-lead {
            max-width: 520px;
            margin: 18px auto 0;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.6;
            color: var(--muted);
            text-align: center
          }

          /* SECTION QUOTE (for testimonials) */
          .section-quote {
            text-align: center;
            max-width: 760px;
            margin: 0 auto;
            padding: 60px 0
          }

          .sq-mark {
            font-family: 'Inter', sans-serif;
            font-size: 64px;
            color: var(--teal);
            line-height: 0;
            display: inline-block;
            margin-bottom: 14px
          }

          .sq-text {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: clamp(20px, 2.4vw, 28px);
            line-height: 1.4;
            color: var(--navy);
            margin: 0
          }

          .sq-by {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 28px
          }

          .sq-by img {
            width: 46px;
            height: 46px;
            border-radius: 0;
            object-fit: cover
          }

          .sq-name {
            font-weight: 700;
            font-size: 14px;
            color: var(--navy)
          }

          .sq-role {
            font-size: 12.5px;
            color: var(--muted)
          }

          /* ---------- HERO ---------- */
          .hero {
            padding: 18px 0 40px
          }

          .hero-row {
            display: grid;
            grid-template-columns: 200px 1fr 220px;
            gap: 34px;
            align-items: start
          }

          .hero-portrait {
            border-radius: 0;
            overflow: hidden;
            height: 250px;
            background-size: cover;
            background-position: center 18%;
          }

          /* flip card */
          .flip-card {
            background: none !important;
            perspective: 1200px;
            overflow: visible
          }

          .flip-card .flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform .7s cubic-bezier(.6, .05, .25, 1);
            transform-style: preserve-3d
          }

          .flip-card:hover .flip-inner {
            transform: rotateY(180deg)
          }

          .flip-card .flip-front,
          .flip-card .flip-back {
            position: absolute;
            inset: 0;
            border-radius: 0;
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            box-shadow: 0 24px 50px -28px rgba(0, 24, 70, .4)
          }

          .flip-card .flip-front {
            background-size: cover;
            background-position: center
          }

          .flip-card .flip-back {
            transform: rotateY(180deg);
            background: #fff;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border: 1.5px solid var(--line)
          }

          .hero-main {
            padding-top: 4px
          }

          .hero h1 {
            font-size: clamp(30px, 4.4vw, 30px);
            font-weight: 100
          }

          .hero .lead {
            color: var(--muted);
            font-size: 16px;
            max-width: 430px;
            margin-top: 20px
          }

          .hero-tag {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            text-align: right;
            padding-top: 6px
          }

          .hero-tag .ico {
            font-size: 22px
          }

          .hero-tag p {
            font-size: 13px;
            color: var(--muted);
            max-width: 170px
          }

          .hero-row2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 46px;
            align-items: center;
            margin-top: -25px
          }

          .hero-left2 {
            display: flex;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
            padding-left: 234px
          }

          .members {
            display: flex;
            align-items: center;
            gap: 14px
          }

          .avatars {
            display: flex
          }

          .avatars img {
            width: 38px;
            height: 38px;
            border-radius: 0;
            border: 2px solid #fff;
            margin-left: -12px;
            object-fit: cover;
          }

          .avatars img:first-child {
            margin-left: 0
          }

          .members .num {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 22px
          }

          .members .num span {
            display: block;
            font-family: 'Inter';
            font-weight: 400;
            font-size: 12px;
            color: var(--muted)
          }

          .hero-sub-photo {
            border-radius: 0;
            overflow: hidden;
            height: 300px;
            background-size: cover;
            background-position: center;
          }

          /* ---------- HERO BANNER (full-bleed agriculture style) ---------- */
          .hero-banner-full {
            width: 100%;
            padding: 0 28px
          }

          .hero-banner {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            min-height: 660px;
            margin: 14px 0 50px;
            background: linear-gradient(135deg, #0a1f4d 0%, #103a6b 45%, #0a8f89 100%);
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            color: #fff;
            box-shadow: 0 30px 70px -34px rgba(0, 24, 70, .55);
          }

          /* dark wash so text/UI reads on any photo */
          .hero-banner::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 16, 46, .30) 0%, rgba(0, 16, 46, .10) 38%, rgba(0, 16, 46, .55) 100%);
            z-index: 1;
          }

          .hero-banner>* {
            position: relative;
            z-index: 2
          }

          /* main content area */
          .hb-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 50px 50px 0
          }

          .hb-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            align-self: flex-start;
            background: rgba(255, 255, 255, .14);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, .28);
            border-radius: 0;
            padding: 9px 18px;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
          }

          .hb-pill .dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--teal)
          }

          .hb-title {
            font-family: 'Inter';
            font-weight: 100;
            font-size: clamp(40px, 5.6vw, 40px);
            line-height: 1.25;
            letter-spacing: -.02em;
            margin-top: 25px;
            max-width: 750px;
            text-shadow: 0 2px 30px rgba(0, 0, 0, .25)
          }

          /* footer row of the banner */
          .hb-foot {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 30px;
            padding: 0 50px 40px;
            flex-wrap: wrap
          }

          /* video card */
          .hb-video {
            width: 300px;
            border-radius: 0;
            overflow: hidden;
            background: rgba(0, 16, 46, .45);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, .22);
          }

          .hb-video .thumb {
            height: 120px;
            background-size: cover;
            background-position: center;
            position: relative;
            background-color: #0a8f89
          }

          .hb-video .play {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: rgba(255, 255, 255, .92);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy)
          }

          .hb-video .play svg {
            width: 18px;
            height: 18px;
            margin-left: 2px
          }

          .hb-video .vcap {
            padding: 14px 16px 16px
          }

          .hb-video .vcap h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            margin-bottom: 5px
          }

          .hb-video .vcap p {
            font-size: 12px;
            color: rgba(255, 255, 255, .78);
            line-height: 1.45
          }

          /* right description + cta */
          .hb-right {
            max-width: 430px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 20px;
            text-align: right;
            margin-left: auto
          }

          .hb-right p {
            font-size: 15px;
            line-height: 1.6;
            color: rgba(255, 255, 255, .92)
          }

          .hb-getstarted {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: var(--teal);
            color: #fff;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 15px;
            border-radius: 0;
            padding: 14px 16px 14px 26px;
            transition: .18s
          }

          .hb-getstarted:hover {
            background: var(--teal-dark)
          }

          .hb-getstarted .arrow {
            width: 30px;
            height: 30px;
            border-radius: 0;
            background: rgba(255, 255, 255, .25);
            display: inline-flex;
            align-items: center;
            justify-content: center
          }

          @media(max-width:880px) {
            .hb-body {
              padding: 24px 24px 0
            }

            .hb-foot {
              padding: 0 24px 28px;
              flex-direction: column;
              align-items: stretch
            }

            .hb-right {
              text-align: left;
              align-items: flex-start;
              margin-left: 0
            }

            .hb-video {
              width: 100%
            }

            .hero-banner {
              min-height: 560px
            }
          }

          /* ---------- LOGOS ---------- */
          .logos {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 36px 0;
            border-top: 1px solid var(--line);
            margin-top: 30px;
            flex-wrap: wrap;
            gap: 20px
          }

          .logos span {
            font-family: 'Inter';
            font-weight: 700;
            color: #bdbdbd;
            font-size: 22px;
            letter-spacing: .02em
          }

          /* ---------- DARK SECTION ---------- */
          .dark {
            background: var(--black);
            color: #fff;
            border-radius: 0;
            padding: 72px 0
          }

          .dark-top {
            display: grid;
            /* grid-template-columns:1fr 1fr;*/
            gap: 40px;
            align-items: start
          }

          .dark h2 {
            font-size: clamp(30px, 3.4vw, 35px);
            font-weight: 300
          }

          .dark .section-heading {
            font-size: clamp(32px, 4vw, 48px);
            text-align: left;
            color: #fff;
            margin-bottom: 20px
          }

          .dark .section-heading .accent {
            color: #999
          }

          .dark .section-eyebrow {
            color: #999;
            text-align: left;
            margin-bottom: 10px
          }

          .dark .section-eyebrow::before {
            border-left-color: #0FB5AE;
            border-top-color: #0FB5AE
          }

          .dark .desc {
            color: #b5b5b5;
            font-size: 15px;
            max-width: 430px
          }

          .dark .desc .learn {
            margin-top: 22px
          }

          .feat-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 18px;
            margin-top: 48px
          }

          .feat-img {
            border-radius: 0;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            min-height: 200px
          }

          .feat {
            background: #1c1c1c;
            border-radius: 0;
            padding: 26px 22px;
            display: flex;
            flex-direction: column;
            gap: 14px;
          }

          .feat.light {
            background: #fff;
            color: var(--ink)
          }

          .feat .ico {
            font-size: 24px
          }

          .feat h3 {
            font-size: 17px;
            font-weight: 700
          }

          .feat p {
            font-size: 13px;
            color: #9a9a9a;
            line-height: 1.55
          }

          .feat.light p {
            color: var(--muted)
          }

          /* ---------- COURSES ---------- */
          .section {
            padding: 80px 0
          }

          .courses-head {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            align-items: center;
            margin-bottom: 42px
          }

          .courses-head h2 {
            font-size: clamp(28px, 3.2vw, 35px);
            font-weight: 300
          }

          .courses-head .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 24px
          }

          .courses-head .right p {
            color: var(--muted);
            font-size: 14px;
            max-width: 300px;
            text-align: right
          }

          .course-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px
          }

          .course {
            border: 1px solid var(--line);
            border-radius: 0;
            overflow: hidden;
            background: #fff;
            transition: .2s
          }

          .course:hover {
            box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
            transform: translateY(-3px)
          }

          .course .ph {
            height: 150px;
            background-size: cover;
            background-position: center
          }

          .course .body {
            padding: 18px
          }

          .course h3 {
            font-size: 16px;
            font-weight: 600;
            font-family: 'Inter';
            line-height: 1.3
          }

          .course .by {
            font-size: 12px;
            color: var(--muted);
            margin-top: 8px
          }

          .course .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px
          }

          .course .price {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 18px
          }

          .course .vbtn {
            font-size: 12px;
            font-weight: 600;
            border: 1.5px solid var(--ink);
            border-radius: 0;
            padding: 8px 14px;
            background: #fff;
            cursor: pointer
          }

          .course .vbtn:hover {
            background: var(--ink);
            color: #fff
          }

          /* ---------- CATEGORY GRID ---------- */
          .cat-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 14px;
            padding: 4px;
          }

          .cat-card {
            border: 1px solid var(--line);
            border-radius: 0;
            background: #fff;
            padding: 16px 10px;
            text-align: center;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 9px;
            min-height: 108px;
            justify-content: center;
            transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s, border-color .18s;
          }

          .cat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
            border-color: transparent
          }

          .cat-ico {
            width: 38px;
            height: 38px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--cbg, #E6F7F6);
            color: var(--cfg, #0FB5AE);
            flex: 0 0 auto
          }

          .cat-ico svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .cat-name {
            font-size: 12px;
            font-weight: 600;
            line-height: 1.25;
            color: var(--ink)
          }

          .cat-hint {
            margin-top: 14px;
            font-size: 12.5px;
            color: var(--muted);
            text-align: center
          }

          .cat-card.is-hidden {
            display: none
          }

          .cat-more-wrap {
            text-align: center;
            margin-top: 22px
          }

          .cat-more {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 9px 22px;
            transition: .18s
          }

          .cat-more:hover {
            border-color: #0FB5AE;
            color: #0FB5AE;
            transform: translateY(-2px)
          }

          .cat-more span {
            font-size: 14px;
            line-height: 1;
            transition: transform .2s
          }

          .cat-more.is-done {
            display: none
          }

          @media(max-width:1100px) {
            .cat-grid {
              grid-template-columns: repeat(6, 1fr)
            }
          }

          @media(max-width:820px) {
            .cat-grid {
              grid-template-columns: repeat(4, 1fr);
              max-height: none;
              overflow: visible
            }
          }

          @media(max-width:520px) {
            .cat-grid {
              grid-template-columns: repeat(3, 1fr)
            }
          }

          /* ---------- STORIES (spotlight) ---------- */
          .stories {
            padding: 80px 0 90px;
            border-top: 1px solid var(--line);
            overflow: hidden
          }

          .stories-inner {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            padding: 0 20px
          }

          .st-pill {
            display: inline-block;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 7px 18px;
            font-size: 13px;
            color: var(--ink);
            font-weight: 600
          }

          .st-quote {
            font-size: clamp(24px, 3.2vw, 35px);
            line-height: 1.1;
            font-weight: 300;
            margin: 30px auto 0;
            max-width: 840px;
            letter-spacing: -.5px;
            transition: opacity .4s ease;
          }

          .st-quote .lo {
            color: #9aa0ab
          }

          /* faded tail of the quote */
          .st-quote .brand {
            color: #9b7fe0
          }

          /* highlighted product name */
          .stories.fading .st-quote,
          .stories.fading .st-name {
            opacity: 0
          }

          .st-wave {
            display: flex;
            gap: 3px;
            align-items: center;
            justify-content: center;
            height: 40px;
            margin: 34px 0 30px
          }

          .st-wave span {
            width: 3px;
            border-radius: 0;
            background: #cfd3da;
            animation: stw 1.1s ease-in-out infinite
          }

          @keyframes stw {

            0%,
            100% {
              transform: scaleY(.35)
            }

            50% {
              transform: scaleY(1)
            }
          }

          .st-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            height: 170px;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent)
          }

          .st-av {
            flex: 0 0 auto;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            width: 108px;
            height: 108px;
            opacity: .55;
            filter: saturate(.85);
            transition: width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1), opacity .4s, box-shadow .4s, border .4s;
            border: 3px solid transparent;
          }

          .st-av img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          .st-av.active {
            width: 150px;
            height: 150px;
            opacity: 1;
            filter: none;
            border-color: #c9bff0;
            box-shadow: 0 20px 44px rgba(120, 100, 200, .22);
          }

          .st-av.near {
            opacity: .8
          }

          .st-av.far {
            opacity: .3;
            width: 96px;
            height: 96px
          }

          .st-name {
            font-size: 17px;
            color: var(--ink);
            margin-top: 22px;
            transition: opacity .4s ease
          }

          .st-ctrls {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-top: 26px
          }

          .st-ctrls button {
            width: 46px;
            height: 46px;
            border-radius: 0;
            border: 1px solid var(--line);
            background: #fff;
            cursor: pointer;
            font-size: 16px;
            color: var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .15s;
          }

          .st-ctrls button:hover {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink)
          }

          .st-ctrls button:active {
            transform: scale(.92)
          }

          /* ---------- XLEARN HERO ---------- */
          .xl-hero {
            background: #faf6f2;
            padding: 64px 0 70px;
            border-bottom: 1px solid var(--line)
          }

          .xl-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center
          }

          .xl-left h1 {
            font-size: clamp(34px, 4.6vw, 35px);
            font-weight: 300;
            line-height: 1.04;
            letter-spacing: -.02em;
            color: #4a4343
          }

          .xl-left p.lead {
            color: #444;
            font-size: 17px;
            line-height: 1.55;
            max-width: 430px;
            margin: 22px 0 30px
          }

          .xl-btns {
            display: flex;
            gap: 16px;
            flex-wrap: wrap
          }

          .xl-btn {
            padding: 15px 20px;
            border-radius: 0;
            font-weight: 400;
            font-size: 14px;
            letter-spacing: .04em;
            cursor: pointer;
            border: 2px solid #060606
          }

          .xl-btn.solid {
            background: #0a0a0c;
            color: #fff
          }

          .xl-btn.ghost {
            background: transparent;
            color: #131215
          }

          .xl-trust {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 30px;
            font-size: 14px;
            color: #333;
            flex-wrap: wrap
          }

          .xl-trust .ex {
            font-weight: 700
          }

          .xl-trust .stars {
            color: #00b67a;
            letter-spacing: 1px
          }

          .xl-trust .tp {
            font-weight: 700;
            color: #00b67a
          }

          /* photo collage */
          .xl-collage {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            align-items: start;
            max-width: 520px;
            margin-left: auto
          }

          .xl-arch {
            position: relative;
            border-radius: 120px 120px 18px 18px;
            overflow: hidden;
            color: #fff;
            text-align: center
          }

          .xl-arch img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            mix-blend-mode: luminosity;
            opacity: .92
          }

          .xl-arch .cap {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 16px;
            z-index: 2
          }

          .xl-arch .cap .nm {
            font-weight: 700;
            font-size: 15px
          }

          .xl-arch .cap .rl {
            font-size: 12px;
            opacity: .92
          }

          .xl-arch .cap .co {
            font-weight: 800;
            font-size: 15px;
            margin-top: 7px;
            letter-spacing: .02em
          }

          .xl-arch::after {
            content: "";
            position: absolute;
            inset: 0;
            mix-blend-mode: multiply
          }

          .a-purple {
            background: #b13fd0
          }

          .a-purple::after {
            background: #b13fd0
          }

          .a-amber {
            background: #f4b740
          }

          .a-amber::after {
            background: #f4b740
          }

          .a-teal {
            background: #16c0c8
          }

          .a-teal::after {
            background: #16c0c8
          }

          .a-indigo {
            background: #0FB5AE
          }

          .a-indigo::after {
            background: #0FB5AE
          }

          .a-green {
            background: #1bb673
          }

          .a-green::after {
            background: #1bb673
          }

          /* layout: 3 columns, staggered heights like the ref */
          .xl-arch.tall {
            aspect-ratio: 3/4.4
          }

          .xl-arch.mid {
            aspect-ratio: 3/3.6
          }

          .col-mid {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 46px
          }

          .col-right {
            display: flex;
            flex-direction: column;
            gap: 14px
          }

          .xl-fort {
            text-align: center;
            color: #555;
            font-size: 17px;
            margin: 54px 0 26px
          }

          .xl-logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
            opacity: .85
          }

          .xl-logos span {
            font-weight: 800;
            font-size: 22px;
            color: #222;
            letter-spacing: -.01em
          }

          /* ---------- XLEARN FEATURES ---------- */
          .xl-feat {
            padding: 78px 0 90px
          }

          .xl-feat h2 {
            text-align: center;
            font-size: clamp(28px, 3.6vw, 35px);
            font-weight: 100;
            max-width: 760px;
            margin: 0 auto 56px;
            line-height: 1.12;
            letter-spacing: -.02em
          }

          .xl-feat .section-heading {
            font-size: clamp(28px, 4vw, 40px);
            max-width: 760px;
            margin: 0 auto 56px;
            line-height: 1.15
          }

          .xl-feat .section-eyebrow {
            margin-bottom: 16px
          }

          .xl-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 34px
          }

          .xl-card .pic {
            background: linear-gradient(160deg, #efeafc, #f6f3fd);
            border-radius: 0;
            padding: 30px;
            height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
          }

          .xl-card .pic img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 0;
            box-shadow: 0 14px 30px rgba(0, 0, 0, .12)
          }

          .xl-card h3 {
            font-size: 16px;
            font-weight: 100;
            margin: 22px 0 12px;
            line-height: 1.25
          }

          .xl-card p {
            color: #555;
            font-size: 15px;
            line-height: 1.55
          }

          .xl-card .more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #0FB5AE;
            font-weight: 700;
            margin-top: 16px;
            font-size: 15px;
            cursor: pointer
          }

          @media(max-width:820px) {
            .xl-grid {
              grid-template-columns: 1fr;
              gap: 40px
            }

            .xl-collage {
              margin: 0 auto
            }

            .xl-cards {
              grid-template-columns: 1fr
            }

            .xl-logos {
              justify-content: center
            }
          }

          /* ---------- SAFEGUARDS ---------- */
          .sg {
            padding: 30px 0 80px
          }

          .sg-head {
            max-width: 680px;
            margin: 0 auto 48px;
            text-align: center
          }

          .sg-head .eyebrow {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .12em;
            color: #9a9a9a;
            text-transform: uppercase
          }

          .sg-head h2 {
            font-size: clamp(28px, 3.6vw, 35px);
            font-weight: 300;
            letter-spacing: -.02em;
            margin: 12px 0 10px
          }

          .sg-head p {
            color: var(--muted);
            font-size: 16px
          }

          .sg-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
            align-items: stretch
          }

          .sg-card {
            position: relative;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 30px 26px 28px;
            background: #fff;
            overflow: hidden;
            transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s;
          }

          .sg-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--sgc)
          }

          .sg-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 26px 54px rgba(0, 0, 0, .12);
            border-color: transparent
          }

          .sg-card .sg-num {
            position: absolute;
            top: 24px;
            right: 24px;
            font-family: 'Inter';
            font-weight: 800;
            font-size: 30px;
            line-height: 1;
            color: var(--sgbg);
            letter-spacing: -.02em
          }

          .sg-card .ico {
            width: 54px;
            height: 54px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--sgbg);
            color: var(--sgc);
            margin: 8px 0 20px
          }

          .sg-card .ico svg {
            width: 26px;
            height: 26px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .sg-card h3 {
            font-size: 17px;
            font-weight: 600;
            line-height: 1.3;
            margin-bottom: 11px
          }

          .sg-card p {
            color: #5f5f5f;
            font-size: 13.5px;
            line-height: 1.6;
            margin: 0
          }

          .sg-card.s1 {
            --sgbg: #eafaf4;
            --sgc: #16a06b
          }

          .sg-card.s2 {
            --sgbg: #fff3ea;
            --sgc: #e8852b
          }

          .sg-card.s3 {
            --sgbg: #E6F7F6;
            --sgc: #0FB5AE
          }

          .sg-card.s4 {
            --sgbg: #eaf2ff;
            --sgc: #2b6fe0
          }

          @media(max-width:1024px) {
            .sg-grid {
              grid-template-columns: 1fr 1fr
            }
          }

          @media(max-width:560px) {
            .sg-grid {
              grid-template-columns: 1fr
            }
          }

          /* ---------- AVATAR STUDIO ---------- */
          .av {
            background: linear-gradient(180deg, #eceaf9, #f4f2fc);
            padding: 64px 0 72px
          }

          .av-head {
            text-align: center;
            max-width: 760px;
            margin: 0 auto 44px
          }

          .av-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1px solid #e3e0f5;
            border-radius: 0;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 700;
            color: #5a3fd6;
            box-shadow: 0 4px 14px rgba(90, 60, 200, .08)
          }

          .av-pill svg {
            width: 16px;
            height: 16px;
            stroke: #5a3fd6;
            fill: none;
            stroke-width: 1.8
          }

          .av-head h2 {
            font-family: 'Inter';
            font-size: clamp(30px, 4vw, 35px);
            font-weight: 300;
            line-height: 1.08;
            letter-spacing: -.02em;
            margin: 18px 0 16px
          }

          .av-head h2 .grad {
            background: linear-gradient(90deg, #3b5bdb, #9b51e0, #d63384);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
          }

          .av-head p {
            color: #555;
            font-size: 17px;
            line-height: 1.55;
            max-width: 560px;
            margin: 0 auto
          }

          .av-panel {
            background: #fff;
            border-radius: 0;
            padding: 22px;
            box-shadow: 0 30px 70px rgba(70, 50, 160, .12);
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 22px
          }

          /* left rail: steps */
          .av-rail h4 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 16px
          }

          .av-step {
            display: flex;
            gap: 14px;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 0;
            cursor: pointer;
            transition: transform .25s, box-shadow .25s, border-color .25s;
            background: #fff
          }

          .av-step+.av-step {
            margin-top: 12px
          }

          .av-step:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 30px rgba(70, 50, 160, .12);
            border-color: transparent
          }

          .av-step .n {
            width: 34px;
            height: 34px;
            flex: 0 0 auto;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 800;
            font-size: 14px;
            color: #fff;
            background: var(--sc)
          }

          .av-step .t .nm {
            font-weight: 700;
            font-size: 15px
          }

          .av-step .t .ds {
            font-size: 12.5px;
            color: var(--muted);
            line-height: 1.4;
            margin-top: 2px
          }

          .av-step.a1 {
            --sc: #5a3fd6
          }

          .av-step.a2 {
            --sc: #2b8a6e
          }

          .av-step.a3 {
            --sc: #e8852b
          }

          .av-step.a4 {
            --sc: #d63384
          }

          /* right preview */
          .av-prev {
            display: flex;
            flex-direction: column
          }

          .av-screen {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 16/10;
            background: #1a1a22
          }

          .av-screen img,
          .av-screen video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          .av-screen::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35))
          }

          .av-live {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 7px;
            background: rgba(20, 20, 28, .7);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 0;
            backdrop-filter: blur(4px)
          }

          .av-live .dot {
            width: 8px;
            height: 8px;
            border-radius: 0;
            background: #ff4d6d;
            box-shadow: 0 0 0 0 rgba(255, 77, 109, .6);
            animation: avpulse 1.8s infinite
          }

          @keyframes avpulse {
            0% {
              box-shadow: 0 0 0 0 rgba(255, 77, 109, .6)
            }

            70% {
              box-shadow: 0 0 0 8px rgba(255, 77, 109, 0)
            }

            100% {
              box-shadow: 0 0 0 0 rgba(255, 77, 109, 0)
            }
          }

          .av-bubble {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 14px;
            z-index: 2;
            background: rgba(255, 255, 255, .95);
            border-radius: 0;
            padding: 13px 16px;
            font-size: 14px;
            color: #222;
            line-height: 1.45;
            box-shadow: 0 10px 26px rgba(0, 0, 0, .18)
          }

          .av-bubble b {
            color: #5a3fd6
          }

          .av-bar {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 16px 2px 6px
          }

          .av-bar .time {
            font-size: 12px;
            color: var(--muted);
            font-variant-numeric: tabular-nums
          }

          .av-track {
            flex: 1;
            height: 6px;
            border-radius: 0;
            background: #e7e4f3;
            position: relative;
            overflow: hidden
          }

          .av-track i {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 62%;
            border-radius: 0;
            background: linear-gradient(90deg, #5a3fd6, #9b51e0)
          }

          .av-foot {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 14px
          }

          .av-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 11px 16px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            background: #fff;
            transition: background .15s
          }

          .av-chip:hover {
            background: #faf9ff
          }

          .av-chip svg {
            width: 17px;
            height: 17px;
            stroke: #555;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .av-badge {
            margin-left: auto;
            background: #eceaf9;
            color: #5a3fd6;
            font-weight: 700;
            font-size: 13.5px;
            padding: 11px 16px;
            border-radius: 11px
          }

          @media(max-width:860px) {
            .av-panel {
              grid-template-columns: 1fr
            }
          }

          /* ---------- CASE BUILDER ---------- */
          .cb {
            padding: 80px 0 30px
          }

          .cb .eyebrow {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .12em;
            color: #9a9a9a;
            text-transform: uppercase
          }

          .cb h2 {
            font-size: clamp(30px, 4vw, 35px);
            font-weight: 300;
            letter-spacing: -.02em;
            margin: 10px 0 5px
          }

          .cb .section-heading {
            font-size: clamp(32px, 4.2vw, 48px);
            margin: 0 0 30px;
            line-height: 1.1
          }

          .cb .section-eyebrow {
            margin-bottom: 16px
          }

          .cb .sub {
            color: var(--muted);
            font-size: 17px;
            margin-bottom: 42px
          }

          .cb-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px
          }

          .cb-card {
            border: 1px solid var(--line);
            border-radius: 0;
            overflow: hidden;
            background: #fff;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            min-height: 430px;
            position: relative;
            transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s;
            /* scroll-in start state */
            opacity: 0;
            transform: translateY(34px);
          }

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

          .cb-card.in:nth-child(1) {
            transition-delay: .05s
          }

          .cb-card.in:nth-child(2) {
            transition-delay: .15s
          }

          .cb-card.in:nth-child(3) {
            transition-delay: .25s
          }

          .cb-card.in:nth-child(4) {
            transition-delay: .35s
          }

          .cb-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 28px 56px rgba(0, 0, 0, .14);
            border-color: transparent
          }

          .cb-pic {
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            background: var(--cbg);
            transition: height .35s ease
          }

          .cb-pic svg {
            transition: transform .45s cubic-bezier(.22, 1, .36, 1)
          }

          .cb-card:hover .cb-pic svg {
            transform: scale(1.08)
          }

          .cb-body {
            padding: 22px 22px 10px
          }

          .cb-body h3 {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 8px
          }

          .cb-body p {
            color: #666;
            font-size: 14px;
            line-height: 1.5
          }

          .cb-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 14px 22px 18px;
            margin-top: auto
          }

          .cb-tag {
            font-size: 12px;
            padding: 5px 12px;
            border-radius: 0;
            background: #f0f0ee;
            color: #666;
            font-weight: 600
          }

          .cb-tag.lead {
            background: var(--cbg);
            color: var(--cfg);
            font-weight: 700
          }

          /* hover-revealed Start button */
          .cb-start {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin: 0 22px 0;
            padding: 0 16px;
            height: 0;
            overflow: hidden;
            border-radius: 0;
            background: var(--cfg);
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            opacity: 0;
            transform: translateY(6px);
            transition: height .35s ease, opacity .3s ease, transform .35s ease, margin .35s ease;
          }

          .cb-card:hover .cb-start {
            height: 44px;
            opacity: 1;
            transform: translateY(0);
            margin-bottom: 18px
          }

          .cb-start svg {
            width: 16px;
            height: 16px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .cb-card.c1 {
            --cbg: #e4ddfb;
            --cfg: #6d4ce0
          }

          .cb-card.c2 {
            --cbg: #cfeede;
            --cfg: #1c9f6b
          }

          .cb-card.c3 {
            --cbg: #f8e3b8;
            --cfg: #cf8a1e
          }

          .cb-card.c4 {
            --cbg: #f9d5e3;
            --cfg: #d23c79
          }

          @media(prefers-reduced-motion:reduce) {
            .cb-card {
              opacity: 1;
              transform: none;
              transition: box-shadow .3s
            }
          }

          @media(max-width:980px) {
            .cb-grid {
              grid-template-columns: 1fr 1fr
            }
          }

          @media(max-width:560px) {
            .cb-grid {
              grid-template-columns: 1fr
            }

            .cb-card {
              min-height: 0
            }
          }

          /* ---------- PROCESS CARD ---------- */
          .proc {
            padding: 84px 0 96px;
            background: linear-gradient(180deg, #faf7ff, #fff)
          }

          .proc .wrap {
            max-width: none;
            padding: 0 48px
          }

          .proc-card {
            width: 100%;
            max-width: none;
            margin: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
          }

          .proc-head {
            text-align: center;
            margin-bottom: 42px
          }

          .proc-head .tag {
            display: inline-block;
            background: #E6F7F6;
            color: #0FB5AE;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: .08em;
            padding: 6px 14px;
            border-radius: 0;
            text-transform: uppercase
          }

          .proc-head h2 {
            font-size: clamp(24px, 3vw, 30px);
            font-weight: 200;
            margin-top: 15px;
            letter-spacing: -.02em
          }

          .proc-head h2 .brand {
            color: #0FB5AE
          }

          .proc-phases {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
          }

          .phase {
            position: relative;
            border-radius: 0;
            padding: 20px 18px 22px;
            background: var(--phbg)
          }

          .phase .ph-name {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--phc);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px
          }

          .phase .ph-name .dot {
            width: 9px;
            height: 9px;
            border-radius: 0;
            background: var(--phc)
          }

          .step {
            display: flex;
            align-items: center;
            gap: 14px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 12px 14px;
            position: relative;
            transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, border-color .25s;
          }

          .step+.step {
            margin-top: 12px
          }

          .step:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 30px rgba(90, 60, 180, .14);
            border-color: var(--phc)
          }

          .step .ico {
            width: 42px;
            height: 42px;
            border-radius: 0;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--phc);
            color: #fff;
          }

          .step .ico svg {
            width: 20px;
            height: 20px;
            stroke: #fff;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .step .txt {
            flex: 1;
            min-width: 0
          }

          .step .txt .nm {
            font-weight: 300;
            font-size: 14px;
            color: #070505
          }

          .step .txt .sub {
            font-size: 12px;
            color: var(--muted)
          }

          .step .num {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 15px;
            color: #cfcfe6
          }

          /* phase palettes */
          .phase.p1 {
            --phbg: #E6F7F6;
            --phc: #0FB5AE
          }

          .phase.p2 {
            --phbg: #eafaf4;
            --phc: #16a06b
          }

          .phase.p3 {
            --phbg: #fff3ea;
            --phc: #e8852b
          }

          .phase.p4 {
            --phbg: #eef2ff;
            --phc: #3f5bd9
          }

          /* connector arrow between phases */
          .phase:not(:last-child)::after {
            content: "→";
            position: absolute;
            top: 50%;
            right: -16px;
            transform: translateY(-50%);
            color: #c9c4e0;
            font-size: 22px;
            font-weight: 700;
            z-index: 2;
          }

          @media(max-width:820px) {
            .proc-phases {
              grid-template-columns: 1fr;
              gap: 30px
            }

            .phase:not(:last-child)::after {
              content: "↓";
              top: auto;
              bottom: -26px;
              right: 50%;
              transform: translateX(50%)
            }
          }

          /* ---------- CASE STUDY VIEW (course detail) ---------- */
          .csv {
            padding: 70px 0 84px;
            border-top: 1px solid var(--line)
          }

          .csv .crumb {
            font-size: 14px;
            color: #9a9a9a;
            margin-bottom: 30px
          }

          .csv .crumb b {
            color: var(--ink);
            font-weight: 600
          }

          .csv .crumb span {
            margin: 0 8px;
            color: #cfcfcf
          }

          /* catchy section header replacing breadcrumb */
          .csv-headline {
            margin-bottom: 34px;
            max-width: 760px
          }

          .csv-headline .eyebrow {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .12em;
            color: #0FB5AE;
            text-transform: uppercase
          }

          .csv-headline h2 {
            font-family: 'Inter';
            font-size: clamp(26px, 3.6vw, 35px);
            font-weight: 100;
            line-height: 1.1;
            letter-spacing: -.02em;
            margin: 12px 0 0
          }

          .csv-headline h2 .grad {
            background: linear-gradient(90deg, #3b5bdb, #9b51e0, #d63384);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
          }

          /* fade-to-locked paywall */
          .csv-locked {
            position: relative
          }

          .csv-locked .csv-fade {
            position: relative;
            max-height: 340px;
            overflow: hidden
          }

          .csv-locked .csv-fade::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 200px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 92%);
            pointer-events: none
          }

          .csv-paywall {
            margin-top: -46px;
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 0 20px 8px
          }

          .csv-paywall .lock-ico {
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: #E6F7F6;
            color: #0FB5AE;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px
          }

          .csv-paywall .lock-ico svg {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .csv-paywall .pw-t {
            font-family: 'Inter';
            font-size: 19px;
            font-weight: 500;
            margin-bottom: 6px
          }

          .csv-paywall .pw-s {
            color: var(--muted);
            font-size: 14px;
            max-width: 420px;
            margin: 0 auto 18px;
            line-height: 1.55
          }

          .csv-sub {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: var(--black);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 14px 30px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: .18s
          }

          .csv-sub:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(90, 60, 180, .25)
          }

          .csv-sub svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .csv-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 56px;
            align-items: start
          }

          .csv-hero {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 16/11;
            background: linear-gradient(135deg, #2b58d8 0%, #6a3fc0 32%, #e8642a 70%, #f4b021 100%);
          }

          .csv-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 35%, rgba(255, 255, 255, .18), transparent 45%),
              radial-gradient(circle at 72% 68%, rgba(0, 0, 0, .22), transparent 55%);
          }

          .csv-rev {
            position: absolute;
            right: 18px;
            bottom: 16px;
            z-index: 2;
            color: #fff;
            text-align: right;
            text-shadow: 0 1px 4px rgba(0, 0, 0, .4)
          }

          .csv-rev .rc {
            font-size: 13px;
            font-weight: 600
          }

          .csv-rev .stars {
            color: #ffc83d;
            font-size: 15px;
            letter-spacing: 2px
          }

          .csv-avatar {
            position: absolute;
            left: 18px;
            bottom: -26px;
            z-index: 3;
            width: 78px;
            height: 78px;
            border-radius: 0;
            overflow: hidden;
            border: 4px solid #fff;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
            background: #333
          }

          .csv-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          .csv-hero-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            z-index: 1
          }

          .csv-by {
            margin-top: 44px;
            color: #9a9a9a;
            font-size: 15px
          }

          .csv-by b {
            color: var(--ink);
            font-weight: 600
          }

          .csv-title {
            font-family: 'Inter';
            font-size: clamp(30px, 4.4vw, 30px);
            font-weight: 200;
            line-height: 1.05;
            letter-spacing: -.02em;
            margin: 7px 0 7px
          }

          .csv-body p {
            color: #444;
            font-size: 16px;
            line-height: 1.62;
            margin-bottom: 18px;
            max-width: 600px
          }

          .csv-toc-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #9a9a9a;
            text-transform: uppercase;
            margin: 34px 0 16px
          }

          .csv-toc {
            background: #faf9f7;
            border: 1px solid var(--line);
            border-radius: 0;
            overflow: hidden
          }

          .csv-acc {
            border-bottom: 1px solid var(--line)
          }

          .csv-acc:last-child {
            border-bottom: none
          }

          .csv-acc-h {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            cursor: pointer;
            font-weight: 600;
            font-size: 17px
          }

          .csv-acc-h .ic {
            font-size: 20px;
            color: #888;
            font-weight: 400
          }

          .csv-acc-c {
            padding: 0 24px;
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease, padding .35s ease;
            color: #666;
            font-size: 14px;
            line-height: 1.6
          }

          .csv-acc.open .csv-acc-c {
            max-height: 320px;
            padding: 0 24px 22px
          }

          /* right rail */
          .csv-price {
            font-family: 'Inter';
            font-size: 35px;
            font-weight: 100;
            letter-spacing: -.02em;
            line-height: 1
          }

          .csv-price small {
            font-size: 18px;
            font-weight: 600;
            color: #9a9a9a;
            margin-left: 4px
          }

          .csv-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin: 26px 0 28px
          }

          .csv-stat {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px
          }

          .csv-stat .si {
            width: 30px;
            height: 30px;
            flex: 0 0 auto;
            color: #888
          }

          .csv-stat .sl {
            font-size: 11px;
            letter-spacing: .06em;
            color: #9a9a9a;
            text-transform: uppercase
          }

          .csv-stat .sv {
            font-weight: 700;
            font-size: 16px
          }

          .csv-meta {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 30px
          }

          .csv-meta .row {
            display: flex;
            gap: 12px;
            font-size: 15px;
            color: #555;
            line-height: 1.45
          }

          .csv-meta .row svg {
            width: 19px;
            height: 19px;
            flex: 0 0 auto;
            margin-top: 2px;
            stroke: #999;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .csv-meta .row b {
            color: var(--ink);
            font-weight: 600
          }

          .csv-cta {
            display: flex;
            gap: 12px;
            margin-bottom: 30px;
            flex-wrap: wrap
          }

          .csv-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 18px;
            border-radius: 0;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid var(--line)
          }

          .csv-btn.dark {
            background: var(--black);
            color: #fff;
            border-color: var(--black)
          }

          .csv-btn.dark:hover {
            background: #000
          }

          .csv-btn.ghost {
            background: #fff;
            color: var(--ink)
          }

          .csv-btn.ghost:hover {
            background: #faf9f7
          }

          .csv-btn.buy {
            background: #0FB5AE;
            color: #fff;
            border-color: #0FB5AE
          }

          .csv-btn.buy:hover {
            background: #6a23dd
          }

          .csv-btn svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .csv-divider {
            border: none;
            border-top: 1px solid var(--line);
            margin: 30px 0
          }

          .csv-block {
            margin-bottom: 26px
          }

          .csv-block .bl {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #9a9a9a;
            text-transform: uppercase;
            margin-bottom: 12px
          }

          .csv-block p {
            color: #555;
            font-size: 15px;
            line-height: 1.6
          }

          @media(max-width:880px) {
            .csv-grid {
              grid-template-columns: 1fr;
              gap: 40px
            }
          }

          /* ---------- CASE DETAIL TABS ---------- */
          .csv-tabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--line);
            margin: 0 0 40px;
            overflow-x: auto;
            scrollbar-width: none
          }

          .csv-tabs::-webkit-scrollbar {
            display: none
          }

          .csv-tab {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 15px 20px;
            font-size: 12px;
            font-weight: 300;
            background: none;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            transition: color .2s ease
          }

          .csv-tab svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .csv-tab:hover {
            color: var(--ink)
          }

          .csv-tab.active {
            color: var(--ink)
          }

          .csv-tab.active::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: -1px;
            height: 2px;
            background: linear-gradient(90deg, #3b5bdb, #9b51e0, #d63384);
            border-radius: 2px
          }

          .csv-panel {
            display: none;
            animation: csvFade .35s ease
          }

          .csv-panel.active {
            display: block
          }

          @keyframes csvFade {
            from {
              opacity: 0;
              transform: translateY(6px)
            }

            to {
              opacity: 1;
              transform: translateY(0)
            }
          }

          .csv-stub {
            border: 1px dashed var(--line);
            border-radius: 0;
            padding: 60px 30px;
            text-align: center;
            background: #faf9f7;
            max-width: 760px
          }

          .csv-stub .stub-ico {
            width: 54px;
            height: 54px;
            border-radius: 0;
            background: #fff;
            border: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: #0FB5AE
          }

          .csv-stub .stub-ico svg {
            width: 24px;
            height: 24px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .csv-stub h3 {
            font-family: 'Inter';
            font-size: 22px;
            font-weight: 500;
            margin: 0 0 8px
          }

          .csv-stub p {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.6;
            max-width: 420px;
            margin: 0 auto
          }

          /* ---------- PRICING ---------- */
          .pricing {
            background: var(--black);
            color: #fff;
            padding: 78px 0
          }

          .pricing h2 {
            text-align: center;
            font-size: clamp(28px, 3.4vw, 35px);
            font-weight: 700;
            max-width: 560px;
            margin: 0 auto 46px
          }

          .plans {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            max-width: 760px;
            margin: 0 auto
          }

          .plan {
            border-radius: 0;
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 18px
          }

          .plan.dark {
            background: #1c1c1c
          }

          .plan.light {
            background: #fff;
            color: var(--ink)
          }

          .plan .pname {
            font-weight: 700;
            font-family: 'Inter';
            font-size: 17px
          }

          .plan .pprice {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 38px
          }

          .plan .pprice small {
            font-size: 14px;
            font-weight: 400;
            color: #999
          }

          .plan .pdesc {
            font-size: 13px;
            color: #9a9a9a;
            line-height: 1.55
          }

          .plan.light .pdesc {
            color: var(--muted)
          }

          .plan .pbtn {
            width: 100%;
            justify-content: center;
            border-radius: 0;
            padding: 13px;
            font-weight: 600;
            cursor: pointer;
            border: none
          }

          .plan.dark .pbtn {
            background: #fff;
            color: var(--black)
          }

          .plan.light .pbtn {
            background: var(--black);
            color: #fff
          }

          .plan ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-size: 14px
          }

          .plan li {
            display: flex;
            align-items: center;
            gap: 10px
          }

          .plan li .ck {
            width: 18px;
            height: 18px;
            border-radius: 0;
            border: 1.5px solid currentColor;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            opacity: .7
          }

          /* ---------- CTA STRIP ---------- */
          .ctastrip {
            padding: 78px 0
          }

          .ctastrip-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 50px;
            align-items: center
          }

          .ctastrip h2 {
            font-size: clamp(26px, 3vw, 35px);
            font-weight: 300;
            max-width: 480px
          }

          .ctastrip .photo {
            border-radius: 0;
            overflow: hidden;
            height: 250px;
            background-size: cover;
            background-position: center
          }

          .ctastrip .below {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-top: 28px
          }

          .socials {
            display: flex;
            gap: 12px
          }

          .socials a {
            width: 34px;
            height: 34px;
            border-radius: 0;
            background: var(--black);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px
          }

          /* ---------- FOOTER ---------- */
          footer {
            padding: 28px 0
          }

          .foot-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            padding-top: 18px;
            margin-top: 10px;
            border-top: 1px solid var(--line);
            font-size: 14px
          }

          .foot-copy {
            color: var(--muted);
            font-weight: 500
          }

          .foot-nav {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap
          }

          .foot-nav a {
            color: #444;
            font-weight: 500;
            transition: color .15s
          }

          .foot-nav a:hover {
            color: var(--ink)
          }

          .foot-nav .sep {
            color: #cfcfcf
          }

          .bigword {
            text-align: center;
            font-family: 'Inter';
            font-weight: 800;
            font-size: clamp(80px, 20vw, 150px);
            line-height: .85;
            letter-spacing: -0.04em;
            background: linear-gradient(176deg, #003e6e4a 0%, #fff 90%);
            -webkit-background-clip: text;
            background-clip: text;
            color: #c3e9ff00;
            margin-top: 20px;
            user-select: none;
          }

          /* ---------- RESPONSIVE ---------- */
          @media(max-width:980px) {
            .hero-row {
              grid-template-columns: 1fr
            }

            .hero-portrait {
              height: 240px
            }

            .hero-tag {
              align-items: flex-start;
              text-align: left
            }

            .hero-row2,
            .dark-top,
            .courses-head,
            .stories-grid,
            .ctastrip-grid,
            .plans {
              grid-template-columns: 1fr
            }

            .hero-left2 {
              padding-left: 0
            }

            .feat-grid {
              grid-template-columns: 1fr 1fr
            }

            .course-grid {
              grid-template-columns: 1fr 1fr
            }

            .stories h2,
            .courses-head .right p,
            .hero-tag p {
              text-align: left
            }

            .courses-head .right {
              justify-content: flex-start
            }

            .stories h2 {
              text-align: left
            }

            .navlinks {
              display: none
            }
          }

          @media(max-width:560px) {

            .feat-grid,
            .course-grid {
              grid-template-columns: 1fr
            }

            nav .navbtns .btn span {
              display: none
            }

            .foot-top {
              flex-direction: column;
              gap: 10px
            }

            .deck {
              height: 380px
            }

            .mq-card {
              flex: 0 0 280px;
              padding: 22px 22px
            }
          }

          #authView {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: var(--page, #f1f1ef);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            overflow: auto
          }

          body.show-auth #authView {
            display: flex
          }

          body.show-auth {
            overflow: hidden
          }

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

          #authView .card {
            width: 100%;
            max-width: 1180px;
            background: #fff;
            border-radius: 0;
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            min-height: 560px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .08);
          }

          #authView

          /* ---------- LEFT FORM PANEL ---------- */
          .panel {
            padding: 26px 48px;
            display: flex;
            flex-direction: column;
            position: relative
          }

          #authView .dots {
            display: flex;
            gap: 7px
          }

          #authView .dots span {
            width: 11px;
            height: 11px;
            border-radius: 50%
          }

          #authView .dots span:nth-child(1) {
            background: #ff5f57
          }

          #authView .dots span:nth-child(2) {
            background: #febc2e
          }

          #authView .dots span:nth-child(3) {
            background: #28c840
          }

          #authView .form-wrap {
            margin: auto;
            width: 100%;
            max-width: 340px;
            text-align: center
          }

          #authView .brand {
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
          }

          #authView .brand svg {
            width: 26px;
            height: 26px
          }

          #authView .form-wrap h1 {
            font-family: 'Inter';
            font-size: 24px;
            font-weight: 700;
            letter-spacing: -0.02em
          }

          #authView .form-wrap .sub {
            color: var(--muted);
            font-size: 14px;
            margin-top: 6px;
            margin-bottom: 20px
          }

          #authView .social {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: var(--field);
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 11px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 9px;
            transition: .15s;
          }

          #authView .social:hover {
            background: #f3f3f1
          }

          #authView .social img,
          #authView .social svg {
            width: 18px;
            height: 18px
          }

          #authView .divider {
            display: flex;
            align-items: center;
            gap: 14px;
            color: var(--muted);
            font-size: 13px;
            margin: 12px 0
          }

          #authView .divider::before,
          #authView .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--line)
          }

          #authView .field {
            text-align: left;
            margin-bottom: 11px
          }

          #authView .field label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 5px
          }

          #authView .field input {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 11px 14px;
            font-family: inherit;
            font-size: 15px;
            background: #fff;
            transition: .15s;
          }

          #authView .field input::placeholder {
            color: #b0b0ac
          }

          #authView .field input:focus {
            outline: none;
            border-color: var(--ink);
            box-shadow: 0 0 0 3px rgba(13, 13, 13, .06)
          }

          #authView .submit {
            width: 100%;
            background: var(--black);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 13px;
            font-family: inherit;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 5px;
            transition: .15s;
          }

          #authView .submit:hover {
            background: #2a2a2a
          }

          #authView .swap {
            font-size: 14px;
            color: var(--muted);
            margin-top: 16px
          }

          #authView .swap a {
            color: var(--ink);
            font-weight: 700;
            text-decoration: underline;
            cursor: pointer
          }

          #authView .terms {
            font-size: 13px;
            color: var(--muted);
            text-align: center;
            margin-top: auto;
            padding-top: 18px
          }

          #authView .terms a {
            color: var(--ink);
            text-decoration: underline
          }

          #authView .name-row {
            display: none
          }

          #authView.signup .name-row {
            display: block
          }

          #authView.signup .terms {
            display: block
          }

          #authView:not(.signup) .terms {
            display: none
          }

          #authView

          /* ---------- RIGHT IMAGE PANEL ---------- */
          .visual {
            position: relative;
            border-radius: 0;
            margin: 14px;
            overflow: hidden;
            background: linear-gradient(160deg, #fdeef0 0%, #fbe2e4 55%, #f7d4d6 100%);
            background-size: cover;
            background-position: center;
          }

          #authView .visual-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
          }

          #authView .visual .nav-circle {
            position: absolute;
            width: 54px;
            height: 54px;
            border-radius: 0;
            background: rgba(255, 255, 255, .6);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            color: #333;
            border: none;
            transition: .15s;
          }

          #authView .visual .nav-circle:hover {
            background: rgba(255, 255, 255, .85)
          }

          #authView .visual .back {
            top: 24px;
            left: 24px
          }

          #authView .visual .fwd {
            bottom: 24px;
            right: 24px
          }

          #authView .visual .meta {
            position: absolute;
            left: 24px;
            bottom: 24px;
            right: 88px;
            background: rgba(255, 255, 255, .18);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, .25);
            border-radius: 0;
            padding: 16px 18px;
            color: #fff;
          }

          #authView .visual .meta .title {
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between
          }

          #authView .visual .meta .stats {
            display: flex;
            gap: 20px;
            margin-top: 12px;
            font-size: 13px;
            align-items: center;
            flex-wrap: wrap
          }

          #authView .visual .meta .stats span {
            display: flex;
            align-items: center;
            gap: 6px;
            opacity: .95
          }

          @media(max-width:860px) {
            #authView .card {
              grid-template-columns: 1fr
            }

            #authView .visual {
              display: none
            }

            #authView .panel {
              padding: 34px 28px
            }
          }



          /* SPA view switching */
          .view {
            display: none
          }

          .view.active {
            display: block
          }

          .site-nav {
            position: sticky;
            top: 0;
            z-index: 100;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background: transparent;
            transition: transform .35s cubic-bezier(.4, 0, .2, 1)
          }

          .site-nav.nav-hidden {
            transform: translateY(-100%)
          }

          /* floating scroll-to-top button */
          #toTop {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 200;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 0;
            background: var(--navy, #001846);
            color: #fff;
            box-shadow: 0 8px 24px -8px rgba(0, 24, 70, .5);
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px) scale(.9);
            transition: opacity .3s, transform .3s, visibility .3s, background .2s
          }

          #toTop.show {
            opacity: 1;
            visibility: visible;
            transform: none
          }

          #toTop:hover {
            background: var(--teal, #0FB5AE)
          }

          #toTop svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: #fff;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          @media(max-width:600px) {
            #toTop {
              right: 16px;
              bottom: 16px;
              width: 44px;
              height: 44px
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .site-nav {
              transition: none
            }

            #toTop {
              transition: opacity .2s
            }
          }

          /* WhatsApp button in nav */
          .nav-wa {
            width: 40px;
            height: 40px;
            border-radius: 0;
            background: #25D366;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 4px;
            flex-shrink: 0;
            transition: .18s;
            box-shadow: 0 8px 18px -8px rgba(37, 211, 102, .7)
          }

          .nav-wa:hover {
            background: #1ebe5b;
            transform: translateY(-2px)
          }

          .nav-wa svg {
            width: 22px;
            height: 22px
          }

          /* PNG icon variants (call + whatsapp) */
          .nav-ic-png {
            width: 21px;
            height: 21px;
            display: block;
            object-fit: contain
          }

          .nav-wa-png {
            background: transparent;
            box-shadow: none;
            width: 40px;
            height: 40px
          }

          .nav-wa-png:hover {
            background: transparent;
            transform: translateY(-2px)
          }

          .nav-wa-png .nav-ic-png {
            width: 30px;
            height: 30px
          }

          /* Call icon: no circular border/background */
          #navSettings.nav-ic {
            border: none;
            background: transparent
          }

          #navSettings.nav-ic:hover {
            background: transparent;
            border: none
          }

          /* ===== MEGA DROPDOWN ===== */
          .has-mega {
            position: relative;
            display: inline-flex;
            align-items: center
          }

          .mega-trigger {
            display: inline-flex;
            align-items: center;
            gap: 5px
          }

          .mega-trigger .caret {
            width: 13px;
            height: 13px;
            transition: transform .25s
          }

          .has-mega:hover .mega-trigger .caret {
            transform: rotate(180deg)
          }

          /* plain straight dropdown, anchored under the trigger */
          .mega {
            position: absolute;
            left: 0;
            right: auto;
            top: calc(100% + 14px);
            width: max-content;
            min-width: 230px;
            background: #fff;
            border: 1px solid var(--line);
            border-top: 1px solid var(--line);
            border-radius: 14px;
            box-shadow: 0 24px 48px -20px rgba(0, 24, 70, .28);
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: opacity .2s, transform .2s, visibility .2s;
            z-index: 60;
            overflow: hidden
          }

          .has-mega:hover .mega {
            opacity: 1;
            visibility: visible;
            transform: translateY(0)
          }

          /* small hover bridge so the menu doesn't close in the gap */
          .mega::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -14px;
            height: 14px
          }

          .mega-inner {
            max-width: none;
            margin: 0;
            padding: 8px;
            display: block
          }

          /* collapse the old grid/card layouts into a simple vertical list */
          .mega-company {
            display: block
          }

          .mega-company .mega-h,
          .mega-h {
            display: none
          }

          .mega-row {
            display: flex;
            flex-direction: column;
            gap: 2px
          }

          .mega-row .mega-item {
            align-items: center
          }

          .mega-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            transition: .15s;
            text-decoration: none
          }

          .mega-item:hover {
            background: var(--offwhite, #f4f5f2)
          }

          .mega-ic {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: linear-gradient(135deg, var(--teal), var(--teal-dark));
            color: #fff;
            box-shadow: none
          }

          .mega-ic svg {
            width: 17px;
            height: 17px
          }

          .mega-ic.i-journey {
            background: linear-gradient(135deg, #7c6cf0, #5b4bc4)
          }

          .mega-ic.i-team {
            background: linear-gradient(135deg, #4f9bff, #1f6feb)
          }

          .mega-ic.i-msg {
            background: linear-gradient(135deg, #34d399, #0a8f89)
          }

          .mega-ic.i-road {
            background: linear-gradient(135deg, #fbbf6b, #e0922a)
          }

          .mega-ic.i-first {
            background: linear-gradient(135deg, #f48fb1, #d23c79)
          }

          .mega-ic.i-offices {
            background: linear-gradient(135deg, #5DBB64, #0a8f89)
          }

          .mega-ic.i-news {
            background: #1e2158
          }

          .mega-ic.i-life {
            background: #1e2158
          }

          .mega-tx {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
            min-width: 0
          }

          .mega-tx b {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #1a1a1a
          }

          /* hide the descriptive sub-text   icon + name only */
          .mega-tx i {
            display: none
          }

          /* convert Media feature cards into simple icon+name rows */
          .mega-media2,
          .mega-media-center {
            display: flex;
            flex-direction: column;
            gap: 2px;
            max-width: none;
            margin: 0
          }

          .mega-feat {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            text-decoration: none;
            transition: .15s;
            text-align: left
          }

          .mega-feat:hover {
            background: var(--offwhite, #f4f5f2);
            transform: none
          }

          .mega-feat-pic,
          .mega-feat-tx,
          .mega-feat-go {
            display: none
          }

          .mega-feat-title {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #1a1a1a;
            margin: 0
          }

          /* keep old unused mega layout rules from affecting the new straight list */
          .mega-cols {
            display: flex;
            flex-direction: column;
            gap: 2px
          }

          .mega-ic.i-journey {
            background: linear-gradient(135deg, #7c6cf0, #5b4bc4)
          }

          .mega-ic.i-team {
            background: linear-gradient(135deg, #4f9bff, #1f6feb)
          }

          .mega-ic.i-msg {
            background: linear-gradient(135deg, #34d399, #0a8f89)
          }

          .mega-ic.i-road {
            background: linear-gradient(135deg, #fbbf6b, #e0922a)
          }

          .mega-ic.i-first {
            background: linear-gradient(135deg, #f48fb1, #d23c79)
          }

          .mega-ic.i-offices {
            background: linear-gradient(135deg, #5DBB64, #0a8f89)
          }

          .mega-ic.i-news {
            background: #1e2158
          }

          .mega-ic.i-life {
            background: #1e2158
          }

          .mega-tx {
            display: flex;
            flex-direction: column;
            line-height: 1.3;
            min-width: 0
          }

          .mega-tx b {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 12.5px;
            color: #072b71
          }

          .mega-tx i {
            font-style: normal;
            font-size: 13px;
            color: var(--muted);
            margin-top: 3px
          }

          .mega-new {
            border-left: 1px solid var(--line);
            padding-left: 40px
          }

          .mega-new-h {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted);
            margin: 0 0 16px
          }

          .mega-new-card {
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 16px 34px -20px rgba(0, 24, 70, .4)
          }

          .mega-new-pic {
            height: 150px
          }

          .mega-new-pic svg {
            width: 100%;
            height: 100%;
            display: block
          }

          .mega-new-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 16px;
            color: var(--navy);
            margin: 16px 0 6px
          }

          .mega-new-tx {
            font-size: 13.5px;
            color: var(--muted);
            line-height: 1.55;
            margin: 0
          }

          /* Media menu: Moments & News as simple icon+name rows (straight dropdown) */
          .mega-media2 {
            grid-template-columns: none
          }

          .mega-media-center {
            max-width: none;
            margin: 0
          }

          .mega-media-center .mega-feat {
            text-align: left
          }

          .mega-media-center .mega-feat-go {
            justify-content: flex-start
          }

          .mega-feat {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            border-radius: 8px;
            padding: 10px 14px;
            transition: .15s
          }

          .mega-feat:hover {
            transform: none;
            background: var(--offwhite, #f4f5f2)
          }

          .mega-feat-pic {
            display: none
          }

          .mega-feat-pic svg {
            width: 100%;
            height: 100%;
            display: block
          }

          .mega-feat-title {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #1a1a1a;
            margin: 0
          }

          .mega-feat-tx {
            display: none
          }

          .mega-feat-go {
            display: none
          }

          @media(max-width:1024px) {
            .mega-inner {
              grid-template-columns: 1fr
            }

            .mega-media2 {
              grid-template-columns: 1fr
            }

            .mega-new {
              border-left: none;
              border-top: 1px solid var(--line);
              padding-left: 0;
              padding-top: 24px
            }
          }

          @media(max-width:860px) {
            .has-mega .mega {
              display: none
            }
          }

          /* ===== scoped: case studies ===== */
          #view-cases {
            --black: #001846;
            --ink: #0B1220;
            --paper: #ffffff;
            --offwhite: #F7F8FA;
            --muted: #5B6472;
            --line: #E6E8EC;
            --radius: 18px;
            --navy: #001846;
            --navy-2: #030F4D;
            --teal: #0FB5AE;
            --teal-dark: #0A8F89;
          }

          #view-cases {
            box-sizing: border-box;
            margin: 0;
            padding: 0
          }

          #view-cases {
            scroll-behavior: smooth
          }

          #view-cases {
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--paper);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased
          }

          #view-cases h1,
          #view-cases h2,
          #view-cases h3 {
            font-family: 'Inter', sans-serif;
            line-height: 1.08;
            letter-spacing: -0.02em
          }

          #view-cases a {
            text-decoration: none;
            color: inherit
          }

          #view-cases img {
            display: block;
            max-width: 100%
          }

          #view-cases .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 48px
          }

          #view-cases button {
            font-family: inherit
          }

          #view-cases nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 22px 0
          }

          #view-cases .logo {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 22px;
            letter-spacing: -0.03em
          }

          #view-cases .navlinks {
            display: flex;
            gap: 34px;
            font-size: 13px
          }

          #view-cases .navlinks a {
            color: #3a3a3a
          }

          #view-cases .navlinks a.active,
          #view-cases .navlinks a:hover {
            color: var(--black);
            font-weight: 600
          }

          #view-cases .navbtns {
            display: flex;
            gap: 12px
          }

          #view-cases .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 12px;
            border-radius: 0;
            padding: 7px 18px;
            transition: .2s
          }

          #view-cases .btn-ghost {
            background: #fff;
            border: 1.5px solid var(--ink);
            color: var(--ink)
          }

          #view-cases .btn-ghost:hover {
            background: var(--ink);
            color: #fff
          }

          #view-cases .btn-dark {
            background: var(--black);
            color: #fff
          }

          #view-cases .btn-dark:hover {
            background: #2a2a2a
          }

          #view-cases

          /* full-width banner */
          .cs-banner {
            width: 100%;
            background: var(--offwhite);
            border-bottom: 1.5px solid var(--line)
          }

          #view-cases .cs-banner-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            padding-top: 34px;
            padding-bottom: 34px
          }

          #view-cases .cs-banner-text h1 {
            font-size: clamp(25px, 5vw, 25px);
            font-weight: 200
          }

          #view-cases .cs-banner-text p {
            color: var(--muted);
            font-size: 15px;
            margin-top: 0px;
            max-width: 520px
          }

          #view-cases .cs-banner-tools {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap
          }

          /* segment tabs */
          #view-cases .cs-segwrap {
            width: 100%;
            background: #fff;
            border-bottom: 1.5px solid var(--line);
            position: sticky;
            top: 0;
            z-index: 30
          }

          #view-cases .cs-seg {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            flex: 1;
            min-width: 0
          }

          #view-cases .cs-seg-tab {
            position: relative;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            color: #8a8a86;
            padding: 16px 18px;
            white-space: nowrap;
            transition: .15s
          }

          #view-cases .cs-seg-tab:hover {
            color: var(--ink)
          }

          #view-cases .cs-seg-tab.active {
            color: #002671
          }

          #view-cases .cs-seg-tab.active::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 0;
            height: 2.5px;
            background: #002671;
            border-radius: 3px
          }

          #view-cases .cs-segbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px
          }

          #view-cases .cs-segright {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0
          }

          #view-cases .cs-create {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #002671;
            border: none;
            color: #fff;
            border-radius: 0;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: .18s;
            font-family: inherit
          }

          #view-cases .cs-create:hover {
            background: #001c54
          }

          #view-cases .cs-create svg {
            width: 16px;
            height: 16px;
            stroke: #fff;
            fill: none
          }

          @media(max-width:760px) {
            #view-cases .cs-segbar {
              flex-wrap: wrap;
              gap: 8px
            }

            #view-cases .cs-seg {
              order: 2;
              width: 100%
            }

            #view-cases .cs-segright {
              order: 1;
              width: 100%;
              justify-content: space-between
            }
          }

          #view-cases .cs-search {
            position: relative;
            flex: 0 1 300px;
            min-width: 220px
          }

          #view-cases .cs-search svg {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 17px;
            height: 17px;
            stroke: var(--muted)
          }

          #view-cases .cs-search input {
            width: 100%;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 11px 18px 11px 44px;
            font-size: 14px;
            font-family: inherit;
            background: #fff;
            transition: .18s
          }

          #view-cases .cs-search input::placeholder {
            color: #a3a3a0
          }

          #view-cases .cs-search input:focus {
            outline: none;
            border-color: var(--ink);
            box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
          }

          #view-cases .selectwrap {
            position: relative
          }

          #view-cases .selectwrap svg.caret {
            position: absolute;
            right: 13px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            stroke: #9a9a9a;
            pointer-events: none
          }

          #view-cases .cs-select {
            appearance: none;
            -webkit-appearance: none;
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 11px 38px 11px 18px;
            font-size: 13.5px;
            font-weight: 500;
            color: var(--ink);
            cursor: pointer;
            transition: .18s
          }

          #view-cases .cs-select:hover {
            border-color: #c9c9c4
          }

          #view-cases .cs-select:focus {
            outline: none;
            border-color: var(--ink);
            box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
          }

          #view-cases .cs-layout {
            display: grid;
            grid-template-columns: 268px 1fr;
            gap: 34px;
            align-items: start;
            padding: 32px 0 0
          }

          #view-cases .cs-sidebar {
            position: sticky;
            top: 18px;
            align-self: start
          }

          #view-cases .side-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px
          }

          #view-cases .side-head h3 {
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter'
          }

          #view-cases .side-clear {
            background: none;
            border: none;
            color: var(--muted);
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: underline
          }

          #view-cases .side-clear:hover {
            color: var(--ink)
          }

          #view-cases .fgroup {
            border-top: 1.5px solid var(--line);
            padding: 16px 0 14px
          }

          #view-cases .fgroup:first-of-type {
            border-top: none
          }

          #view-cases .fgroup>.ftitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: .01em;
            margin-bottom: 2px
          }

          #view-cases .ftitle .fchev {
            width: 14px;
            height: 14px;
            stroke: #9a9a9a;
            transition: transform .2s
          }

          #view-cases .fgroup.collapsed .fchev {
            transform: rotate(-90deg)
          }

          #view-cases .fbody {
            display: flex;
            flex-direction: column;
            gap: 9px;
            padding-top: 11px;
            overflow: hidden;
            transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
            max-height: 600px;
            opacity: 1
          }

          #view-cases .fgroup.collapsed .fbody {
            max-height: 0;
            padding-top: 0;
            opacity: 0
          }

          #view-cases .check {
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            font-size: 13px;
            color: #454545
          }

          #view-cases .check:hover {
            color: var(--ink)
          }

          #view-cases .check input {
            display: none
          }

          #view-cases .cbox {
            width: 17px;
            height: 17px;
            border: 1.6px solid #cfcfca;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: .15s
          }

          #view-cases .cbox svg {
            width: 11px;
            height: 11px;
            stroke: #fff;
            stroke-width: 3.2;
            opacity: 0
          }

          #view-cases .check input:checked+.cbox {
            background: var(--black);
            border-color: var(--black)
          }

          #view-cases .check input:checked+.cbox svg {
            opacity: 1
          }

          #view-cases .cradio {
            border-radius: 50%
          }

          #view-cases .cradio svg {
            width: 9px;
            height: 9px
          }

          #view-cases .check .cnt {
            margin-left: auto;
            font-size: 11px;
            font-weight: 600;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 1px 8px;
            line-height: 1.5;
            color: #8a8a86
          }

          #view-cases .side-select {
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 10px 34px 10px 13px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            cursor: pointer;
            transition: .15s
          }

          #view-cases .side-select:hover {
            border-color: #c9c9c4
          }

          #view-cases .side-select:focus {
            outline: none;
            border-color: var(--ink);
            box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
          }

          #view-cases .selwrap {
            position: relative
          }

          #view-cases .selwrap .caret {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 13px;
            height: 13px;
            stroke: #9a9a9a;
            pointer-events: none
          }

          #view-cases .applied {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin: 10px 0 4px
          }

          #view-cases .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--offwhite);
            border-radius: 0;
            padding: 5px 7px 5px 11px;
            font-size: 12px;
            font-weight: 600;
            color: #333
          }

          #view-cases .chip button {
            background: none;
            border: none;
            cursor: pointer;
            display: inline-flex;
            color: #888;
            padding: 1px;
            border-radius: 50%
          }

          #view-cases .chip button:hover {
            color: #000;
            background: #e0e0dc
          }

          #view-cases .chip button svg {
            width: 12px;
            height: 12px;
            stroke: currentColor;
            stroke-width: 2.4
          }

          #view-cases .cs-resultsbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 16px
          }

          #view-cases .cs-count {
            font-size: 14px;
            color: var(--muted);
            margin-left: auto;
            text-align: right
          }

          #view-cases .cs-count b {
            color: var(--ink);
            font-weight: 700
          }

          #view-cases .cs-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
            padding-bottom: 10px
          }

          #view-cases .cs-card {
            position: relative;
            display: grid;
            grid-template-columns: 260px 1fr;
            border: 1.5px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            overflow: hidden;
            transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s, border-color .25s;
            opacity: 0;
            transform: translateY(14px);
            animation: cardIn .5s forwards
          }

          @keyframes cardIn {
            to {
              opacity: 1;
              transform: translateY(0)
            }
          }

          #view-cases .cs-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .22);
            border-color: #d6d6d1
          }

          #view-cases .cs-media {
            position: relative;
            align-self: start;
            aspect-ratio: 16/10;
            overflow: hidden;
            margin: 16px;
            border-radius: 12px
          }

          #view-cases .cs-media .ph {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transition: transform .5s cubic-bezier(.2, .7, .3, 1)
          }

          #view-cases .cs-media .ph img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-cases .cs-card:hover .cs-media .ph {
            transform: scale(1.05)
          }

          #view-cases .cs-media .num {
            position: absolute;
            left: 12px;
            bottom: 10px;
            z-index: 2;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 13px;
            color: #fff;
            text-shadow: 0 1px 6px rgba(0, 0, 0, .5)
          }

          #view-cases .cs-media::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .28))
          }

          #view-cases .cs-body {
            padding: 18px 24px 18px 8px;
            display: flex;
            flex-direction: column
          }

          #view-cases .cs-cat {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 12.5px;
            font-weight: 600
          }

          #view-cases .cs-cat svg {
            width: 15px;
            height: 15px;
            fill: none
          }

          #view-cases .cs-code {
            color: #b3b3ae;
            font-weight: 600;
            font-size: 12.5px;
            margin-left: 8px;
            letter-spacing: .02em
          }

          #view-cases .cs-title {
            font-family: 'Inter';
            font-weight: 200;
            font-size: 16px;
            letter-spacing: -0.02em;
            margin: 1px 0 1px;
            line-height: 1.22;
            color: #002671
          }

          #view-cases .cs-rating {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px
          }

          #view-cases .stars {
            display: inline-flex;
            gap: 1px
          }

          #view-cases .stars svg {
            width: 15px;
            height: 15px
          }

          #view-cases .cs-rating b {
            font-size: 13.5px;
            font-weight: 700
          }

          #view-cases .cs-rating span {
            font-size: 13px;
            color: var(--muted)
          }

          #view-cases .cs-desc {
            font-size: 12.5px;
            color: #4d4d4d;
            line-height: 1.55;
            margin-bottom: 6px
          }

          #view-cases .cs-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            font-size: 12.5px;
            color: var(--muted);
            justify-content: flex-end
          }

          #view-cases .save-corner {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 5;
            width: 38px;
            height: 38px;
            border-radius: 0;
            border: 1.5px solid var(--line);
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(4px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: .18s;
            color: var(--ink)
          }

          #view-cases .save-corner svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none
          }

          #view-cases .save-corner:hover {
            border-color: var(--ink);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .25)
          }

          #view-cases .save-corner.is-saved {
            color: #002671;
            border-color: #002671
          }

          #view-cases .cs-meta .mi {
            display: inline-flex;
            align-items: center;
            gap: 6px
          }

          #view-cases .cs-meta .mi svg {
            width: 15px;
            height: 15px;
            stroke: var(--muted);
            fill: none
          }

          #view-cases .cs-meta .mi b {
            color: var(--ink);
            font-weight: 700
          }

          #view-cases .cs-avatar {
            width: 24px;
            height: 24px;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: #fff
          }

          #view-cases .cs-tags {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            margin-bottom: 16px
          }

          #view-cases .cs-tag {
            font-size: 11.5px;
            font-weight: 600;
            color: #4d4d4d;
            background: var(--offwhite);
            border-radius: 0;
            padding: 5px 11px;
            transition: .15s
          }

          #view-cases .cs-tag:hover {
            background: #ececea;
            color: var(--ink)
          }

          #view-cases .cs-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: auto;
            padding-top: 14px;
            border-top: 1.5px solid var(--line)
          }

          #view-cases .cs-priceblock {
            display: flex;
            flex-direction: column;
            line-height: 1.1
          }

          #view-cases .cs-price {
            font-family: 'Inter';
            font-weight: 300;
            font-size: 16px;
            color: #002671
          }

          #view-cases .cs-price.free {
            color: #1f9d57
          }

          #view-cases .cs-perd {
            font-size: 11.5px;
            color: var(--muted);
            margin-top: 3px
          }

          #view-cases .cs-actions {
            display: flex;
            align-items: center;
            gap: 9px;
            flex-wrap: wrap
          }

          #view-cases .act {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 0;
            font-size: 12.5px;
            font-weight: 500;
            cursor: pointer;
            padding: 6px 7px;
            transition: .18s;
            border: 1.5px solid var(--line);
            background: #fff;
            color: var(--ink)
          }

          #view-cases .act svg {
            width: 14px;
            height: 14px;
            stroke: currentColor;
            fill: none
          }

          #view-cases .act:hover {
            border-color: #c9c9c4;
            background: #fafafa
          }

          #view-cases .act-primary {
            background: var(--black);
            color: #fff;
            border-color: var(--black)
          }

          #view-cases .act-primary:hover {
            background: #2a2a2a;
            border-color: #2a2a2a
          }

          #view-cases .act-primary.subscribed {
            background: #1f9d57;
            border-color: #1f9d57
          }

          #view-cases .cs-more-wrap {
            display: flex;
            justify-content: center;
            padding: 34px 0 70px
          }

          #view-cases .cs-more {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            background: #fff;
            border: 1.5px solid var(--ink);
            border-radius: 0;
            padding: 13px 30px;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            transition: .2s
          }

          #view-cases .cs-more:hover {
            background: var(--ink);
            color: #fff
          }

          #view-cases .cs-more.is-done {
            display: none
          }

          #view-cases .cs-more svg {
            width: 15px;
            height: 15px;
            transition: transform .2s
          }

          #view-cases .cs-more:hover svg {
            transform: translateY(2px)
          }

          #view-cases .cs-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--muted)
          }

          #view-cases .cs-empty h3 {
            font-size: 20px;
            color: var(--ink);
            margin-bottom: 8px
          }

          #view-cases .cs-empty button {
            margin-top: 16px;
            background: none;
            border: none;
            color: var(--ink);
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            text-decoration: underline
          }

          #view-cases .filter-toggle {
            display: none;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1.5px solid var(--ink);
            border-radius: 0;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer
          }

          #view-cases .filter-toggle svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            fill: none
          }

          #view-cases footer {
            border-top: 1.5px solid var(--line);
            padding: 30px 0;
            text-align: center;
            color: var(--muted);
            font-size: 13px;
            margin-top: 20px
          }

          @media(max-width:980px) {
            #view-cases .cs-card {
              grid-template-columns: 200px 1fr
            }
          }

          @media(max-width:860px) {
            #view-cases .navlinks {
              display: none
            }

            #view-cases .cs-layout {
              grid-template-columns: 1fr
            }

            #view-cases .cs-sidebar {
              position: fixed;
              top: 0;
              left: 0;
              height: 100%;
              width: 300px;
              max-width: 86vw;
              background: #fff;
              z-index: 60;
              padding: 24px;
              overflow-y: auto;
              transform: translateX(-100%);
              transition: transform .28s ease;
              box-shadow: 0 0 50px rgba(0, 0, 0, .18)
            }

            #view-cases .cs-sidebar.open {
              transform: translateX(0)
            }

            #view-cases .filter-toggle {
              display: inline-flex
            }

            #view-cases .scrim {
              display: none;
              position: fixed;
              inset: 0;
              background: rgba(0, 0, 0, .35);
              z-index: 55
            }

            #view-cases .scrim.show {
              display: block
            }
          }

          @media(max-width:560px) {
            #view-cases .cs-card {
              grid-template-columns: 1fr
            }

            #view-cases .cs-media {
              min-height: 160px
            }

            #view-cases .cs-search {
              margin-left: 0;
              flex-basis: 100%;
              order: 5
            }
          }

          @media(prefers-reduced-motion:reduce) {
            #view-cases .cs-card {
              animation: none;
              opacity: 1;
              transform: none
            }

            #view-cases {
              transition: none !important
            }
          }

          /* ===== scoped: connections ===== */
          #view-connections {
            --black: #0d0d0d;
            --ink: #1a1a1a;
            --paper: #ffffff;
            --offwhite: #f4f4f2;
            --muted: #6b6b6b;
            --line: #e6e6e3;
            --navy: #002671;
            --green: #1f9d57;
            --radius: 18px;
          }

          #view-connections {
            box-sizing: border-box;
            margin: 0;
            padding: 0
          }

          #view-connections {
            scroll-behavior: smooth
          }

          #view-connections {
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--paper);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased
          }

          #view-connections h1,
          #view-connections h2,
          #view-connections h3 {
            font-family: 'Inter', sans-serif;
            line-height: 1.12;
            letter-spacing: -0.02em
          }

          #view-connections a {
            text-decoration: none;
            color: inherit
          }

          #view-connections .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 48px
          }

          #view-connections button {
            font-family: inherit
          }

          #view-connections

          /* NAV */
          header.site {
            border-bottom: 1.5px solid var(--line)
          }

          #view-connections nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 0
          }

          #view-connections .logo {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 22px;
            letter-spacing: -0.03em
          }

          #view-connections .navlinks {
            display: flex;
            gap: 30px;
            font-size: 13px
          }

          #view-connections .navlinks a {
            color: #3a3a3a
          }

          #view-connections .navlinks a.active,
          #view-connections .navlinks a:hover {
            color: var(--black);
            font-weight: 600
          }

          #view-connections .navbtns {
            display: flex;
            gap: 12px
          }

          #view-connections .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 12px;
            border-radius: 0;
            padding: 7px 18px;
            transition: .2s
          }

          #view-connections .btn-ghost {
            background: #fff;
            border: 1.5px solid var(--ink);
            color: var(--ink)
          }

          #view-connections .btn-ghost:hover {
            background: var(--ink);
            color: #fff
          }

          #view-connections .btn-dark {
            background: var(--black);
            color: #fff
          }

          #view-connections .btn-dark:hover {
            background: #2a2a2a
          }

          #view-connections

          /* BANNER */
          .cn-banner {
            width: 100%;
            background: var(--offwhite);
            border-bottom: 1.5px solid var(--line)
          }

          #view-connections .cn-banner-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            padding: 34px 0
          }

          #view-connections .cn-banner h1 {
            font-size: clamp(25px, 5vw, 25px);
            font-weight: 200
          }

          #view-connections .cn-banner p {
            color: var(--muted);
            font-size: 15px;
            margin-top: 0px;
            max-width: 540px
          }

          #view-connections .cn-search {
            position: relative;
            flex: 0 1 340px;
            min-width: 240px
          }

          #view-connections .cn-search svg {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 17px;
            height: 17px;
            stroke: var(--muted)
          }

          #view-connections .cn-search input {
            width: 100%;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 12px 18px 12px 44px;
            font-size: 14px;
            font-family: inherit;
            background: #fff;
            transition: .18s
          }

          #view-connections .cn-search input::placeholder {
            color: #a3a3a0
          }

          #view-connections .cn-search input:focus {
            outline: none;
            border-color: var(--ink);
            box-shadow: 0 0 0 3px rgba(0, 0, 0, .06)
          }

          #view-connections

          /* TOOLBAR */
          .cn-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            padding: 26px 0 6px
          }

          #view-connections .cn-tabs {
            display: flex;
            gap: 4px
          }

          #view-connections .cn-tab {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            color: var(--muted);
            padding: 9px 18px;
            border-radius: 0;
            transition: .18s
          }

          #view-connections .cn-tab:hover {
            color: var(--ink)
          }

          #view-connections .cn-tab.active {
            background: var(--black);
            color: #fff
          }

          #view-connections .cn-count {
            font-size: 14px;
            color: var(--muted)
          }

          #view-connections .cn-count b {
            color: var(--ink);
            font-weight: 700
          }

          #view-connections

          /* GRID */
          .cn-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 4px 0 40px
          }

          /* connections layout */
          #view-connections .cn-layout {
            display: grid;
            grid-template-columns: 268px 1fr;
            gap: 34px;
            align-items: start;
            padding: 24px 0 0
          }

          #view-connections .cn-sidebar {
            position: sticky;
            top: 18px;
            align-self: start
          }

          #view-connections .cn-side-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px
          }

          #view-connections .cn-side-head h3 {
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter'
          }

          #view-connections .cn-clear {
            background: none;
            border: none;
            color: var(--muted);
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: underline
          }

          #view-connections .cn-clear:hover {
            color: var(--ink)
          }

          #view-connections .cn-applied {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin: 10px 0 4px
          }

          #view-connections .cn-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--offwhite);
            border-radius: 0;
            padding: 5px 7px 5px 11px;
            font-size: 12px;
            font-weight: 600;
            color: #333
          }

          #view-connections .cn-chip button {
            background: none;
            border: none;
            cursor: pointer;
            display: inline-flex;
            color: #888;
            padding: 1px;
            border-radius: 50%
          }

          #view-connections .cn-chip button:hover {
            color: #000;
            background: #e0e0dc
          }

          #view-connections .cn-chip button svg {
            width: 12px;
            height: 12px;
            stroke: currentColor;
            stroke-width: 2.4;
            fill: none
          }

          #view-connections .fgroup {
            border-top: 1.5px solid var(--line);
            padding: 16px 0 14px
          }

          #view-connections .fgroup:first-of-type {
            border-top: none
          }

          #view-connections .fgroup>.ftitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 2px
          }

          #view-connections .ftitle .fchev {
            width: 14px;
            height: 14px;
            stroke: #9a9a9a;
            fill: none;
            transition: transform .2s
          }

          #view-connections .fgroup.collapsed .fchev {
            transform: rotate(-90deg)
          }

          #view-connections .fbody {
            display: flex;
            flex-direction: column;
            gap: 9px;
            padding-top: 11px;
            overflow: hidden;
            transition: max-height .25s, padding .25s, opacity .2s;
            max-height: 600px;
            opacity: 1
          }

          #view-connections .fgroup.collapsed .fbody {
            max-height: 0;
            padding-top: 0;
            opacity: 0
          }

          #view-connections .check {
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            font-size: 13px;
            color: #454545
          }

          #view-connections .check:hover {
            color: var(--ink)
          }

          #view-connections .check input {
            display: none
          }

          #view-connections .cbox {
            width: 17px;
            height: 17px;
            border: 1.6px solid #cfcfca;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: .15s
          }

          #view-connections .cbox svg {
            width: 11px;
            height: 11px;
            stroke: #fff;
            stroke-width: 3.2;
            fill: none;
            opacity: 0
          }

          #view-connections .check input:checked+.cbox {
            background: var(--navy);
            border-color: var(--navy)
          }

          #view-connections .check input:checked+.cbox svg {
            opacity: 1
          }

          #view-connections .check .cnt {
            margin-left: auto;
            font-size: 11px;
            font-weight: 600;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 1px 8px;
            color: #8a8a86
          }

          #view-connections .selwrap {
            position: relative
          }

          #view-connections .side-select {
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 10px 34px 10px 13px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            cursor: pointer
          }

          #view-connections .side-select:focus {
            outline: none;
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
          }

          #view-connections .selwrap .caret {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 13px;
            height: 13px;
            stroke: #9a9a9a;
            fill: none;
            pointer-events: none
          }

          #view-connections .cn-resbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            padding-top: 8px
          }

          #view-connections .cn-filter-toggle {
            display: none;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1.5px solid var(--ink);
            border-radius: 0;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer
          }

          #view-connections .cn-filter-toggle svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            fill: none
          }

          #view-connections .cn-count {
            margin-left: auto;
            text-align: right
          }

          #view-connections .cn-scrim {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            z-index: 55
          }

          #view-connections .cn-scrim.show {
            display: block
          }

          #view-connections .mc {
            border: 1.5px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s, border-color .25s;
            opacity: 0;
            transform: translateY(14px);
            animation: cardIn .5s forwards
          }

          @keyframes cardIn {
            to {
              opacity: 1;
              transform: translateY(0)
            }
          }

          #view-connections .mc:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .18);
            border-color: #d6d6d1
          }

          #view-connections .mc-cover {
            height: 72px;
            background: linear-gradient(120deg, var(--navy), #3a52a8)
          }

          #view-connections .mc-body {
            padding: 0 22px 22px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1
          }

          #view-connections .mc-av {
            width: 104px;
            height: 104px;
            border-radius: 0;
            border: 4px solid #fff;
            margin-top: -52px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 32px;
            color: #fff;
            box-shadow: 0 4px 14px -3px rgba(0, 0, 0, .25);
            overflow: hidden;
            position: relative
          }

          #view-connections .mc-av img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%
          }

          #view-connections .mc-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 17px;
            color: var(--ink);
            margin-top: 12px
          }

          #view-connections .mc-role {
            font-size: 13px;
            color: #444;
            margin-top: 4px;
            line-height: 1.4
          }

          #view-connections .mc-loc {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12.5px;
            color: var(--muted);
            margin-top: 8px
          }

          #view-connections .mc-loc svg {
            width: 13px;
            height: 13px;
            stroke: var(--muted);
            fill: none
          }

          #view-connections .mc-mutual {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            font-size: 12px;
            color: var(--muted)
          }

          #view-connections .mc-mutual .dots {
            display: flex
          }

          #view-connections .mc-mutual .dots span {
            width: 20px;
            height: 20px;
            border-radius: 0;
            border: 2px solid #fff;
            margin-left: -7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            font-weight: 700;
            color: #fff
          }

          #view-connections .mc-mutual .dots span:first-child {
            margin-left: 0
          }

          #view-connections .mc-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            margin-top: 14px
          }

          #view-connections .mc-tag {
            font-size: 11px;
            font-weight: 600;
            color: #4d4d4d;
            background: var(--offwhite);
            border-radius: 0;
            padding: 4px 10px
          }

          #view-connections .mc-actions {
            display: flex;
            gap: 8px;
            margin-top: 18px;
            width: 100%
          }

          #view-connections .mc-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-radius: 0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            padding: 9px 12px;
            transition: .18s;
            border: 1.5px solid var(--line);
            background: #fff;
            color: var(--ink)
          }

          #view-connections .mc-btn svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            fill: none
          }

          #view-connections .mc-btn:hover {
            border-color: #c9c9c4;
            background: #fafafa
          }

          #view-connections .mc-btn.primary {
            background: var(--navy);
            color: #fff;
            border-color: var(--navy)
          }

          #view-connections .mc-btn.primary:hover {
            background: #001c5e
          }

          #view-connections .mc-btn.pending {
            background: #fff6ee;
            color: #e07a1a;
            border-color: #f3dcc2
          }

          #view-connections .mc-btn.connected {
            background: #e9f6ef;
            color: var(--green);
            border-color: #cfe9d9
          }

          #view-connections .mc-btn.following {
            background: var(--offwhite);
            color: var(--ink);
            border-color: var(--line)
          }

          #view-connections .cn-more-wrap {
            display: flex;
            justify-content: center;
            padding: 10px 0 80px
          }

          #view-connections .cn-more {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            background: #fff;
            border: 1.5px solid var(--ink);
            border-radius: 0;
            padding: 13px 30px;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            transition: .2s
          }

          #view-connections .cn-more:hover {
            background: var(--ink);
            color: #fff
          }

          #view-connections .cn-more.is-done {
            display: none
          }

          #view-connections .cn-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 60px 20px;
            color: var(--muted)
          }

          #view-connections .cn-empty h3 {
            font-size: 20px;
            color: var(--ink);
            margin-bottom: 8px
          }

          #view-connections footer {
            border-top: 1.5px solid var(--line);
            padding: 28px 0;
            text-align: center;
            color: var(--muted);
            font-size: 13px
          }

          @media(max-width:1100px) {
            #view-connections .cn-grid {
              grid-template-columns: repeat(2, 1fr)
            }
          }

          @media(max-width:900px) {
            #view-connections .navlinks {
              display: none
            }

            #view-connections .cn-banner-inner {
              flex-direction: column;
              align-items: flex-start
            }

            #view-connections .cn-search {
              flex-basis: 100%
            }

            #view-connections .cn-layout {
              grid-template-columns: 1fr
            }

            #view-connections .cn-sidebar {
              position: fixed;
              top: 0;
              left: 0;
              height: 100%;
              width: 300px;
              max-width: 86vw;
              background: #fff;
              z-index: 60;
              padding: 24px;
              overflow-y: auto;
              transform: translateX(-100%);
              transition: transform .28s;
              box-shadow: 0 0 50px rgba(0, 0, 0, .18)
            }

            #view-connections .cn-sidebar.open {
              transform: translateX(0)
            }

            #view-connections .cn-filter-toggle {
              display: inline-flex
            }
          }

          @media(max-width:560px) {
            #view-connections .wrap {
              padding: 0 20px
            }

            #view-connections .cn-grid {
              grid-template-columns: 1fr
            }
          }

          @media(prefers-reduced-motion:reduce) {
            #view-connections .mc {
              animation: none;
              opacity: 1;
              transform: none
            }

            #view-connections {
              transition: none !important
            }
          }

          /* ===== scoped: case study view ===== */
          #view-casestudy {
            --black: #0d0d0d;
            --ink: #1a1a1a;
            --paper: #ffffff;
            --offwhite: #f4f4f2;
            --muted: #6b6b6b;
            --line: #e6e6e3;
            --navy: #002671;
            --radius: 18px;
            --green: #1f9d57;
            --amber: #e07a1a;
            --red: #d4373a;
            --indigo: #5546d6;
          }

          #view-casestudy {
            box-sizing: border-box;
            margin: 0;
            padding: 0
          }

          #view-casestudy {
            scroll-behavior: smooth
          }

          #view-casestudy {
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--paper);
            line-height: 1.55;
            -webkit-font-smoothing: antialiased
          }

          #view-casestudy h1,
          #view-casestudy h2,
          #view-casestudy h3,
          #view-casestudy h4 {
            font-family: 'Inter', sans-serif;
            line-height: 1.12;
            letter-spacing: -0.02em
          }

          #view-casestudy a {
            text-decoration: none;
            color: inherit
          }

          #view-casestudy img {
            display: block;
            max-width: 100%
          }

          #view-casestudy .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 48px
          }

          #view-casestudy button {
            font-family: inherit
          }

          #view-casestudy

          /* NAV */
          header.site {
            border-bottom: 1.5px solid var(--line)
          }

          #view-casestudy nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 0
          }

          #view-casestudy .logo {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 22px;
            letter-spacing: -0.03em
          }

          #view-casestudy .navlinks {
            display: flex;
            gap: 30px;
            font-size: 13px
          }

          #view-casestudy .navlinks a {
            color: #3a3a3a
          }

          #view-casestudy .navlinks a.active,
          #view-casestudy .navlinks a:hover {
            color: var(--black);
            font-weight: 600
          }

          #view-casestudy .navbtns {
            display: flex;
            gap: 12px
          }

          #view-casestudy .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 12px;
            border-radius: 0;
            padding: 7px 18px;
            transition: .2s
          }

          #view-casestudy .btn-ghost {
            background: #fff;
            border: 1.5px solid var(--ink);
            color: var(--ink)
          }

          #view-casestudy .btn-ghost:hover {
            background: var(--ink);
            color: #fff
          }

          #view-casestudy .btn-dark {
            background: var(--black);
            color: #fff
          }

          #view-casestudy .btn-dark:hover {
            background: #2a2a2a
          }

          #view-casestudy

          /* LAYOUT: toc | article | buy */
          .layout {
            display: grid;
            grid-template-columns: 240px minmax(0, 1fr) 340px;
            gap: 48px;
            align-items: start;
            padding: 30px 0 80px
          }

          #view-casestudy

          /* TOC */
          .toc {
            position: sticky;
            top: 24px
          }

          #view-casestudy .toc .toc-label {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px
          }

          #view-casestudy .toc .toc-label svg {
            width: 17px;
            height: 17px;
            stroke: var(--ink);
            fill: none
          }

          #view-casestudy .toc .eyebrow {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .14em;
            color: #b0b0ab;
            margin-bottom: 14px
          }

          #view-casestudy .toc ol {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 3px
          }

          #view-casestudy .toc a {
            display: flex;
            gap: 12px;
            align-items: baseline;
            padding: 8px 12px;
            border-radius: 0;
            font-size: 13.5px;
            color: #5a5a5a;
            transition: .15s
          }

          #view-casestudy .toc a .n {
            font-size: 11.5px;
            font-weight: 700;
            color: #b8b8b3;
            min-width: 16px
          }

          #view-casestudy .toc a:hover {
            background: var(--offwhite);
            color: var(--ink)
          }

          #view-casestudy .toc a.active {
            background: #eef0fb;
            color: var(--navy);
            font-weight: 600
          }

          #view-casestudy .toc a.active .n {
            color: var(--navy)
          }

          #view-casestudy

          /* ARTICLE */
          .article {
            min-width: 0;
            max-width: 920px
          }

          #view-casestudy .cstabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--line);
            margin: 0 0 24px;
            overflow-x: auto;
            scrollbar-width: none
          }

          #view-casestudy .cstabs::-webkit-scrollbar {
            display: none
          }

          #view-casestudy .cstab {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 15px 20px;
            font-size: 12px;
            font-weight: 300;
            background: none;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            transition: color .2s ease
          }

          #view-casestudy .cstab svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          #view-casestudy .cstab:hover {
            color: var(--ink)
          }

          #view-casestudy .cstab.active {
            color: var(--ink)
          }

          #view-casestudy .cstab.active::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: -1px;
            height: 2px;
            background: var(--ink)
          }

          /* ===== SUGGEST EDIT MODE ===== */
          #view-casestudy.suggest-mode .article .block [data-editable] {
            outline: 1px dashed rgba(200, 30, 40, .35);
            outline-offset: 4px;
            border-radius: 0;
            cursor: text;
            transition: outline-color .15s ease
          }

          #view-casestudy.suggest-mode .article .block [data-editable]:hover {
            outline-color: rgba(200, 30, 40, .7)
          }

          #view-casestudy.suggest-mode .article .block [data-editable]:focus {
            outline: 2px solid rgba(200, 30, 40, .85);
            background: rgba(200, 30, 40, .04)
          }

          #view-casestudy .se-del {
            color: #9a9a9a;
            text-decoration: line-through;
            text-decoration-color: #c81e28;
            margin-right: .35em
          }

          #view-casestudy .se-ins {
            color: #c81e28;
            font-weight: 600
          }

          #view-casestudy .se-bar {
            position: sticky;
            top: 0;
            z-index: 20;
            display: none;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            margin: 0 0 18px;
            border: 1px solid rgba(200, 30, 40, .25);
            border-radius: 0;
            background: rgba(200, 30, 40, .05);
            backdrop-filter: blur(4px)
          }

          #view-casestudy.suggest-mode .se-bar {
            display: flex
          }

          #view-casestudy .se-bar .se-msg {
            font-size: 13px;
            color: var(--ink);
            flex: 1
          }

          #view-casestudy .se-bar .se-msg b {
            font-family: 'Inter';
            font-weight: 700
          }

          #view-casestudy .se-bar .se-count {
            color: #c81e28;
            font-weight: 600
          }

          #view-casestudy .se-btn {
            font-size: 13px;
            font-weight: 600;
            padding: 9px 18px;
            border-radius: 0;
            border: none;
            cursor: pointer
          }

          #view-casestudy .se-btn.save {
            background: #c81e28;
            color: #fff
          }

          #view-casestudy .se-btn.save:hover {
            background: #a8151e
          }

          #view-casestudy .se-btn.cancel {
            background: transparent;
            color: #666;
            border: 1px solid var(--line)
          }

          #view-casestudy .se-btn.cancel:hover {
            color: var(--ink)
          }

          /* ===== BUY TO USE PANEL ===== */
          #view-casestudy .buyx {
            display: none
          }

          #view-casestudy.buy-mode .buyx {
            display: block
          }

          #view-casestudy.buy-mode .article>.block,
          #view-casestudy.buy-mode .article>.hero,
          #view-casestudy.buy-mode .article>.crumbs,
          #view-casestudy.buy-mode .article>.head,
          #view-casestudy.buy-mode .article>.metastrip {
            display: none
          }

          #view-casestudy.buy-mode .buy {
            display: none
          }

          #view-casestudy.buy-mode .layout {
            grid-template-columns: 240px minmax(0, 1fr)
          }

          #view-casestudy.buy-mode .article {
            max-width: none
          }

          /* header */
          #view-casestudy .bx-head {
            display: flex;
            gap: 28px;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-bottom: 26px;
            border-bottom: 1px solid var(--line)
          }

          #view-casestudy .bx-head-l {
            flex: 1;
            min-width: 280px
          }

          #view-casestudy .bx-cat {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--navy);
            background: rgba(0, 38, 113, .07);
            padding: 5px 12px;
            border-radius: 0;
            margin-bottom: 14px
          }

          #view-casestudy .bx-title {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 30px;
            line-height: 1.15;
            color: var(--ink);
            letter-spacing: -.01em
          }

          #view-casestudy .bx-sub {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.55;
            margin-top: 12px;
            max-width: 640px
          }

          #view-casestudy .bx-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 18px
          }

          #view-casestudy .bx-meta span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            color: var(--muted);
            font-weight: 500
          }

          #view-casestudy .bx-meta svg {
            width: 16px;
            height: 16px;
            stroke: var(--muted);
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          #view-casestudy .bx-meta .rate {
            color: #b8860b
          }

          #view-casestudy .bx-meta .rate svg {
            stroke: none;
            fill: #e0a000;
            width: 15px;
            height: 15px
          }

          #view-casestudy .bx-id {
            background: var(--offwhite);
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 16px 18px;
            min-width: 200px
          }

          #view-casestudy .bx-id-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            font-size: 13px;
            padding: 6px 0
          }

          #view-casestudy .bx-id-row span {
            color: var(--muted)
          }

          #view-casestudy .bx-id-row b {
            font-family: 'Inter';
            font-weight: 600;
            color: var(--ink)
          }

          #view-casestudy .bx-id-row b.ok {
            color: #1f9d57
          }

          /* about grid */
          #view-casestudy .bx-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 16px;
            margin-top: 24px
          }

          #view-casestudy .bx-cardp {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 20px 22px;
            background: #fff
          }

          #view-casestudy .bx-cardp.about {
            grid-row: span 2
          }

          #view-casestudy .bx-ph {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--ink);
            margin-bottom: 12px
          }

          #view-casestudy .bx-ph.big {
            font-size: 18px;
            text-transform: none;
            letter-spacing: -.01em;
            margin-bottom: 18px
          }

          #view-casestudy .bx-cardp.about p {
            font-size: 14px;
            line-height: 1.6;
            color: #3a3a3a
          }

          #view-casestudy .bx-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px
          }

          #view-casestudy .bx-tags span {
            font-size: 12px;
            color: var(--navy);
            background: rgba(0, 38, 113, .06);
            padding: 5px 11px;
            border-radius: 0;
            font-weight: 500
          }

          #view-casestudy .bx-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px
          }

          #view-casestudy .bx-list li {
            display: flex;
            align-items: center;
            gap: 11px;
            font-size: 14px;
            color: #3a3a3a
          }

          #view-casestudy .bx-list svg {
            width: 18px;
            height: 18px;
            stroke: var(--navy);
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0
          }

          #view-casestudy .bx-schools {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
          }

          #view-casestudy .bx-schools span {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--ink);
            background: var(--offwhite);
            border: 1px solid var(--line);
            padding: 6px 12px;
            border-radius: 8px
          }

          #view-casestudy .bx-where-foot {
            margin-top: 14px;
            font-size: 13px;
            color: var(--muted)
          }

          #view-casestudy .bx-where-foot b {
            color: var(--ink)
          }

          #view-casestudy .bx-cardp.subs {
            display: flex;
            flex-direction: column;
            align-items: flex-start
          }

          #view-casestudy .bx-subs-num {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 32px;
            color: var(--ink);
            line-height: 1
          }

          #view-casestudy .bx-subs-lbl {
            font-size: 13px;
            color: var(--muted);
            margin-top: 2px
          }

          #view-casestudy .bx-avs {
            display: flex;
            margin-top: 16px
          }

          #view-casestudy .bx-avs span {
            width: 34px;
            height: 34px;
            border-radius: 0;
            border: 2px solid #fff;
            margin-left: -8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            font-family: 'Inter'
          }

          #view-casestudy .bx-avs span:first-child {
            margin-left: 0
          }

          #view-casestudy .bx-avs .more {
            background: var(--ink);
            font-size: 10px
          }

          #view-casestudy .bx-subs-foot {
            margin-top: 14px;
            font-size: 13px;
            color: #1f9d57;
            font-weight: 500
          }

          /* writer */
          #view-casestudy .bx-writer {
            display: flex;
            gap: 20px;
            margin-top: 24px;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: 0;
            background: linear-gradient(135deg, #fafafa, #f4f4f2)
          }

          #view-casestudy .bx-writer-av {
            width: 64px;
            height: 64px;
            border-radius: 0;
            background: var(--navy);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 22px;
            flex-shrink: 0
          }

          #view-casestudy .bx-writer-body {
            flex: 1;
            min-width: 0
          }

          #view-casestudy .bx-writer-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px
          }

          #view-casestudy .bx-writer-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 18px;
            color: var(--ink);
            display: flex;
            align-items: center;
            gap: 7px
          }

          #view-casestudy .bx-writer-name .verif {
            width: 18px;
            height: 18px;
            fill: #2563eb
          }

          #view-casestudy .bx-writer-role {
            font-size: 13px;
            color: var(--muted);
            margin-top: 3px
          }

          #view-casestudy .bx-follow {
            font-size: 13px;
            font-weight: 600;
            padding: 8px 18px;
            border-radius: 0;
            border: 1.5px solid var(--ink);
            background: #fff;
            color: var(--ink);
            cursor: pointer;
            transition: .15s;
            flex-shrink: 0
          }

          #view-casestudy .bx-follow:hover {
            background: var(--ink);
            color: #fff
          }

          #view-casestudy .bx-writer-bio {
            font-size: 13.5px;
            line-height: 1.55;
            color: #3a3a3a;
            margin-top: 12px;
            max-width: 620px
          }

          #view-casestudy .bx-writer-stats {
            display: flex;
            gap: 32px;
            margin-top: 18px
          }

          #view-casestudy .bx-writer-stats div {
            display: flex;
            flex-direction: column
          }

          #view-casestudy .bx-writer-stats b {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 20px;
            color: var(--ink)
          }

          #view-casestudy .bx-writer-stats span {
            font-size: 12px;
            color: var(--muted);
            margin-top: 2px
          }

          /* pricing */
          #view-casestudy .bx-pricewrap {
            margin-top: 34px
          }

          #view-casestudy .bx-tiers {
            display: flex;
            flex-direction: column;
            gap: 14px
          }

          #view-casestudy .bx-tier {
            position: relative;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 20px 24px;
            cursor: pointer;
            transition: .18s;
            background: #fff;
            display: grid;
            grid-template-columns: 230px 1fr 150px;
            align-items: center;
            gap: 24px
          }

          #view-casestudy .bx-tier:hover {
            border-color: #bcbcbc
          }

          #view-casestudy .bx-tier.active {
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
          }

          #view-casestudy .bx-tier-lead {
            display: flex;
            flex-direction: column
          }

          #view-casestudy .bx-tier-tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            padding: 5px 11px;
            border-radius: 0;
            margin-bottom: 10px;
            align-self: flex-start
          }

          #view-casestudy .bx-tier-tag.use {
            color: #0f9aa0;
            background: rgba(15, 154, 160, .1)
          }

          #view-casestudy .bx-tier-tag.edit {
            color: #7c3aed;
            background: rgba(124, 58, 237, .1)
          }

          #view-casestudy .bx-tier-tag.dist {
            color: #e07a1a;
            background: rgba(224, 122, 26, .1)
          }

          #view-casestudy .bx-tier-price {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 28px;
            color: var(--ink);
            line-height: 1
          }

          #view-casestudy .bx-tier-price span {
            font-size: 13px;
            font-weight: 500;
            color: var(--muted)
          }

          #view-casestudy .bx-tier-desc {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.5;
            margin-top: 8px;
            min-height: 0
          }

          #view-casestudy .bx-tier-feat {
            list-style: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 22px;
            margin-top: 0
          }

          #view-casestudy .bx-tier-feat li {
            font-size: 12.5px;
            color: #3a3a3a;
            padding-left: 22px;
            position: relative
          }

          #view-casestudy .bx-tier-feat li::before {
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 700
          }

          #view-casestudy .bx-tier-feat li.y::before {
            content: "✓";
            color: #1f9d57
          }

          #view-casestudy .bx-tier-feat li.n {
            color: #aaa
          }

          #view-casestudy .bx-tier-feat li.n::before {
            content: "✕";
            color: #cbcbcb
          }

          #view-casestudy .bx-tier-pick {
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            padding: 12px;
            border-radius: 0;
            background: var(--offwhite);
            color: var(--muted)
          }

          #view-casestudy .bx-tier.active .bx-tier-pick {
            background: #265700;
            color: #fff
          }

          #view-casestudy .bx-tier-detail {
            grid-column: 1 / -1;
            display: none;
            margin-top: 4px;
            padding-top: 10px;
            border-top: 1px solid var(--line)
          }

          #view-casestudy .bx-tier.active .bx-tier-detail {
            display: block;
            animation: bxExpand .22s ease
          }

          @keyframes bxExpand {
            from {
              opacity: 0;
              transform: translateY(-4px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          @media(max-width:720px) {
            #view-casestudy .bx-tier {
              grid-template-columns: 1fr;
              gap: 14px
            }

            #view-casestudy .bx-tier-feat {
              grid-template-columns: 1fr
            }
          }

          /* summary / dynamic area */
          #view-casestudy .bx-tier-detail .bx-sum-head {
            background: transparent;
            border-bottom: none;
            padding: 0
          }

          #view-casestudy .bx-tier-detail .bx-sum-body {
            padding: 0
          }

          #view-casestudy .bx-summary {
            margin-top: 20px;
            border: 1px solid var(--line);
            border-radius: 0;
            overflow: hidden
          }

          #view-casestudy .bx-sum-head {
            padding: 18px 22px;
            background: var(--offwhite);
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            gap: 12px
          }

          #view-casestudy .bx-sum-head .ic {
            width: 38px;
            height: 38px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
          }

          #view-casestudy .bx-sum-head svg {
            width: 20px;
            height: 20px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          #view-casestudy .bx-sum-head h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            color: var(--ink)
          }

          #view-casestudy .bx-sum-head p {
            font-size: 13px;
            color: var(--muted);
            margin-top: 2px
          }

          #view-casestudy .bx-sum-body {
            padding: 22px
          }

          /* qty stepper */
          #view-casestudy .bx-qty {
            display: flex;
            align-items: center;
            gap: 0;
            border: 1.5px solid var(--line);
            border-radius: 0;
            overflow: hidden;
            width: fit-content
          }

          #view-casestudy .bx-qty button {
            width: 40px;
            height: 42px;
            border: none;
            background: #fff;
            font-size: 20px;
            cursor: pointer;
            color: var(--ink)
          }

          #view-casestudy .bx-qty button:hover {
            background: var(--offwhite)
          }

          #view-casestudy .bx-qty input {
            width: 70px;
            height: 42px;
            border: none;
            border-left: 1.5px solid var(--line);
            border-right: 1.5px solid var(--line);
            text-align: center;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 16px;
            color: var(--ink)
          }

          #view-casestudy .bx-qty input:focus {
            outline: none
          }

          #view-casestudy .bx-field-row {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap
          }

          #view-casestudy .bx-field-row label {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink)
          }

          /* royalty breakdown */
          #view-casestudy .bx-royalty {
            margin-top: 22px;
            background: linear-gradient(135deg, #0a1628, #13284a);
            border-radius: 0;
            padding: 22px;
            color: #fff
          }

          #view-casestudy .bx-royalty .rh {
            display: flex;
            align-items: center;
            gap: 9px;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            margin-bottom: 4px
          }

          #view-casestudy .bx-royalty .rh svg {
            width: 18px;
            height: 18px;
            stroke: #7fd1a8;
            fill: none;
            stroke-width: 2
          }

          #view-casestudy .bx-royalty .rsub {
            font-size: 12.5px;
            color: rgba(255, 255, 255, .6);
            margin-bottom: 18px
          }

          #view-casestudy .bx-flow {
            display: flex;
            align-items: stretch;
            gap: 0;
            flex-wrap: wrap
          }

          #view-casestudy .bx-flow .node {
            flex: 1;
            min-width: 120px;
            text-align: center;
            padding: 14px 10px
          }

          #view-casestudy .bx-flow .node .nlbl {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: rgba(255, 255, 255, .55);
            margin-bottom: 6px
          }

          #view-casestudy .bx-flow .node .nval {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 22px
          }

          #view-casestudy .bx-flow .node .npct {
            font-size: 11px;
            color: rgba(255, 255, 255, .6);
            margin-top: 3px
          }

          #view-casestudy .bx-flow .node.writer .nval {
            color: #7fd1a8
          }

          #view-casestudy .bx-flow .arr {
            display: flex;
            align-items: center;
            color: rgba(255, 255, 255, .35);
            font-size: 20px;
            padding: 0 4px
          }

          #view-casestudy .bx-rsplit {
            display: flex;
            height: 8px;
            border-radius: 0;
            overflow: hidden;
            margin: 16px 0 4px
          }

          #view-casestudy .bx-rsplit i {
            display: block;
            height: 100%
          }

          #view-casestudy .bx-rlegend {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            font-size: 12px;
            color: rgba(255, 255, 255, .7)
          }

          #view-casestudy .bx-rlegend span {
            display: inline-flex;
            align-items: center;
            gap: 6px
          }

          #view-casestudy .bx-rlegend i {
            width: 10px;
            height: 10px;
            border-radius: 3px
          }

          #view-casestudy .bx-assure {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 18px;
            padding: 12px 14px;
            background: rgba(127, 209, 168, .12);
            border: 1px solid rgba(127, 209, 168, .3);
            border-radius: 0;
            font-size: 12.5px;
            color: #cfeede
          }

          #view-casestudy .bx-assure svg {
            width: 18px;
            height: 18px;
            stroke: #7fd1a8;
            fill: none;
            stroke-width: 2;
            flex-shrink: 0
          }

          #view-casestudy .bx-assure b {
            color: #fff
          }

          /* totals + cta */
          #view-casestudy .bx-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            padding-top: 0;
            border-top: 1px dashed var(--line)
          }

          #view-casestudy .bx-total .tl {
            font-size: 13px;
            color: var(--muted)
          }

          #view-casestudy .bx-total .tv {
            font-family: 'Inter';
            font-weight: 500;
            font-size: 20px;
            color: #002671
          }

          #view-casestudy .bx-cta {
            display: flex;
            width: fit-content;
            margin-left: auto;
            margin-top: 14px;
            padding: 10px 18px;
            border: none;
            border-radius: 0;
            background: #002671;
            color: #fff;
            font-family: 'Inter';
            font-weight: 400;
            font-size: 12px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            gap: 9px;
            transition: .15s
          }

          #view-casestudy .bx-cta:hover {
            background: #000
          }

          #view-casestudy .bx-cta svg {
            width: 18px;
            height: 18px;
            stroke: #fff;
            fill: none;
            stroke-width: 2
          }

          /* guardrails (edit tier) */
          #view-casestudy .bx-guard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 4px
          }

          #view-casestudy .bx-guard .gcol {
            border-radius: 0;
            padding: 18px
          }

          #view-casestudy .bx-guard .gcan {
            background: rgba(31, 157, 87, .06);
            border: 1px solid rgba(31, 157, 87, .25)
          }

          #view-casestudy .bx-guard .gcant {
            background: rgba(200, 30, 40, .05);
            border: 1px solid rgba(200, 30, 40, .22)
          }

          #view-casestudy .bx-guard .gh {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 12px
          }

          #view-casestudy .bx-guard .gcan .gh {
            color: #1f9d57
          }

          #view-casestudy .bx-guard .gcant .gh {
            color: #c81e28
          }

          #view-casestudy .bx-guard ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px
          }

          #view-casestudy .bx-guard li {
            font-size: 13px;
            line-height: 1.45;
            color: #3a3a3a;
            padding-left: 22px;
            position: relative
          }

          #view-casestudy .bx-guard li::before {
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 700
          }

          #view-casestudy .bx-guard .gcan li::before {
            content: "✓";
            color: #1f9d57
          }

          #view-casestudy .bx-guard .gcant li::before {
            content: "✕";
            color: #c81e28
          }

          @media(max-width:760px) {
            #view-casestudy .bx-grid {
              grid-template-columns: 1fr
            }

            #view-casestudy .bx-cardp.about {
              grid-row: auto
            }

            #view-casestudy .bx-tiers {
              grid-template-columns: 1fr
            }

            #view-casestudy .bx-guard {
              grid-template-columns: 1fr
            }

            #view-casestudy .bx-title {
              font-size: 24px
            }
          }

          #view-casestudy

          /* hero */
          .hero {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            aspect-ratio: 16/7;
            margin-bottom: 30px;
            background: linear-gradient(135deg, #0a1a3a, #1b2f5e)
          }

          #view-casestudy .hero img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-casestudy .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .62))
          }

          #view-casestudy .hero-back {
            position: absolute;
            top: 18px;
            left: 18px;
            z-index: 3;
            width: 40px;
            height: 40px;
            border-radius: 0;
            background: rgba(0, 0, 0, .4);
            backdrop-filter: blur(6px);
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center
          }

          #view-casestudy .hero-back svg {
            width: 18px;
            height: 18px;
            stroke: #fff;
            fill: none
          }

          #view-casestudy .hero-meta {
            position: absolute;
            left: 24px;
            bottom: 22px;
            right: 24px;
            z-index: 3;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px
          }

          #view-casestudy .hero-author {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #fff
          }

          #view-casestudy .hero-author .av {
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: rgba(255, 255, 255, .18);
            backdrop-filter: blur(6px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px
          }

          #view-casestudy .hero-author .lbl {
            font-size: 12px;
            opacity: .85
          }

          #view-casestudy .hero-author .nm {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px
          }

          #view-casestudy .hero-rating {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #fff;
            background: rgba(0, 0, 0, .32);
            backdrop-filter: blur(6px);
            padding: 7px 12px;
            border-radius: 30px
          }

          #view-casestudy .hero-rating .stars {
            display: inline-flex;
            gap: 1px
          }

          #view-casestudy .hero-rating .stars svg {
            width: 14px;
            height: 14px
          }

          #view-casestudy .hero-rating b {
            font-size: 14px
          }

          #view-casestudy .hero-rating span {
            font-size: 12px;
            opacity: .85
          }

          #view-casestudy

          /* breadcrumb + title */
          .crumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 18px;
            flex-wrap: wrap
          }

          #view-casestudy .crumb a:hover {
            color: var(--ink)
          }

          #view-casestudy .crumb .sep {
            color: #cfcfca
          }

          #view-casestudy .crumb .cur {
            color: var(--navy);
            font-weight: 600
          }

          #view-casestudy .cat-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #eef0fb;
            color: var(--navy);
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .08em;
            padding: 6px 13px;
            border-radius: 0;
            margin-bottom: 16px
          }

          #view-casestudy .cat-pill svg {
            width: 14px;
            height: 14px;
            stroke: var(--navy);
            fill: none
          }

          #view-casestudy .article h1.title {
            font-size: clamp(25px, 3.4vw, 25px);
            font-weight: 200;
            color: #051e8c;
            margin-bottom: 5px
          }

          #view-casestudy .lead {
            font-size: 17px;
            color: #444;
            line-height: 1.6;
            margin-bottom: 24px;
            max-width: 62ch
          }

          #view-casestudy

          /* meta strip */
          .meta-strip {
            display: flex;
            align-items: center;
            gap: 22px;
            flex-wrap: wrap;
            padding: 16px 0;
            border-top: 1.5px solid var(--line);
            border-bottom: 1.5px solid var(--line);
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 44px
          }

          #view-casestudy .meta-strip .m {
            display: inline-flex;
            align-items: center;
            gap: 7px
          }

          #view-casestudy .meta-strip .m svg {
            width: 15px;
            height: 15px;
            stroke: var(--muted);
            fill: none
          }

          #view-casestudy .meta-strip .m b {
            color: var(--ink);
            font-weight: 600
          }

          #view-casestudy

          /* sections */
          section.block {
            margin-bottom: 52px;
            scroll-margin-top: 24px
          }

          #view-casestudy .eyebrow {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .14em;
            color: #a8a8a3;
            margin-bottom: 10px
          }

          #view-casestudy .article h2 {
            font-size: 20px;
            font-weight: 300;
            color: #001c7b;
            margin-bottom: 10px
          }

          #view-casestudy .article h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            margin: 28px 0 12px
          }

          #view-casestudy .article p {
            font-size: 12.5px;
            color: #3f3f3f;
            margin-bottom: 16px
          }

          #view-casestudy .article p strong {
            color: var(--ink);
            font-weight: 700
          }

          #view-casestudy .article em {
            font-style: italic
          }

          #view-casestudy

          /* stat cards */
          .stat-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin: 24px 0
          }

          #view-casestudy .stat {
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 20px 18px;
            background: #fff
          }

          #view-casestudy .stat.dark {
            background: var(--black);
            border-color: var(--black)
          }

          #view-casestudy .stat .v {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 26px;
            color: var(--ink);
            margin-bottom: 6px
          }

          #view-casestudy .stat.dark .v {
            color: #fff
          }

          #view-casestudy .stat .l {
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: .04em;
            color: var(--muted);
            line-height: 1.35;
            margin-bottom: 8px;
            text-transform: uppercase
          }

          #view-casestudy .stat.dark .l {
            color: #b9b9b9
          }

          #view-casestudy .stat .src {
            font-size: 12px;
            font-weight: 700
          }

          #view-casestudy .stat .src.up {
            color: var(--green)
          }

          #view-casestudy .stat .src.amber {
            color: var(--amber)
          }

          #view-casestudy

          /* pull quote */
          .pullquote {
            background: #eef0fb;
            border-left: 4px solid var(--navy);
            border-radius: 0 12px 12px 0;
            padding: 22px 26px;
            margin: 24px 0
          }

          #view-casestudy .pullquote.warm {
            background: #fff6ee;
            border-left-color: var(--amber)
          }

          #view-casestudy .pullquote.rose {
            background: #fdeef0;
            border-left-color: var(--red)
          }

          #view-casestudy .pullquote p {
            font-size: 17px;
            font-style: italic;
            font-weight: 500;
            color: var(--ink);
            margin-bottom: 8px;
            line-height: 1.5
          }

          #view-casestudy .pullquote cite {
            font-style: normal;
            font-size: 13px;
            color: var(--muted)
          }

          #view-casestudy

          /* exhibit wrapper */
          .exhibit {
            border: 1.5px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            margin: 24px 0
          }

          #view-casestudy .exhibit-head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 22px;
            border-bottom: 1.5px solid var(--line);
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px
          }

          #view-casestudy .exhibit-head svg {
            width: 18px;
            height: 18px;
            stroke: var(--navy);
            fill: none
          }

          #view-casestudy .exhibit-body {
            padding: 22px
          }

          #view-casestudy .exhibit-note {
            font-size: 12.5px;
            color: #9a9a95;
            padding: 0 22px 18px
          }

          #view-casestudy

          /* tables */
          table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px
          }

          #view-casestudy thead th {
            background: var(--black);
            color: #fff;
            text-align: left;
            padding: 13px 16px;
            font-weight: 600;
            font-size: 13px
          }

          #view-casestudy thead th:first-child {
            border-radius: 8px 0 0 8px
          }

          #view-casestudy thead th:last-child {
            border-radius: 0 8px 8px 0
          }

          #view-casestudy tbody td {
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            vertical-align: top
          }

          #view-casestudy tbody tr:last-child td {
            border-bottom: none
          }

          #view-casestudy tbody td:first-child {
            font-weight: 700;
            color: var(--ink)
          }

          #view-casestudy .dot {
            display: inline-flex;
            align-items: center;
            gap: 7px
          }

          #view-casestudy .dot::before {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 0;
            background: currentColor
          }

          #view-casestudy .c-red {
            color: var(--red)
          }

          #view-casestudy .c-amber {
            color: var(--amber)
          }

          #view-casestudy .c-green {
            color: var(--green)
          }

          #view-casestudy .c-yellow {
            color: #d8a200
          }

          #view-casestudy td .crit {
            color: var(--red);
            font-weight: 700
          }

          #view-casestudy td .hi {
            color: var(--amber);
            font-weight: 700
          }

          #view-casestudy td .up {
            color: var(--green);
            font-weight: 700
          }

          #view-casestudy td .down {
            color: var(--red);
            font-weight: 700
          }

          #view-casestudy td .mid {
            color: var(--amber);
            font-weight: 700
          }

          #view-casestudy td .neutral {
            color: var(--muted);
            font-weight: 700
          }

          #view-casestudy

          /* bar chart */
          .bars {
            display: flex;
            flex-direction: column;
            gap: 13px
          }

          #view-casestudy .bar-row {
            display: grid;
            grid-template-columns: 150px 1fr 48px;
            align-items: center;
            gap: 14px
          }

          #view-casestudy .bar-row .lab {
            font-size: 13px;
            color: #3f3f3f;
            text-align: right
          }

          #view-casestudy .bar-track {
            height: 11px;
            background: var(--offwhite);
            border-radius: 0;
            overflow: hidden
          }

          #view-casestudy .bar-fill {
            height: 100%;
            border-radius: 20px
          }

          #view-casestudy .bar-row .pct {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14px;
            text-align: right
          }

          #view-casestudy .bar-src {
            font-size: 12px;
            color: #9a9a95;
            margin-top: 14px
          }

          #view-casestudy

          /* wave / option cards */
          .cardgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin: 24px 0
          }

          #view-casestudy .ic {
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 20px;
            background: #fff
          }

          #view-casestudy .ic .tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            padding: 5px 11px;
            border-radius: 0;
            margin-bottom: 14px
          }

          #view-casestudy .ic.indigo .tag {
            background: #eef0fb;
            color: var(--indigo)
          }

          #view-casestudy .ic.amber .tag {
            background: #fff6ee;
            color: var(--amber)
          }

          #view-casestudy .ic.green .tag {
            background: #e9f6ef;
            color: var(--green)
          }

          #view-casestudy .ic h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px
          }

          #view-casestudy .ic p {
            font-size: 13.5px;
            color: #555;
            margin: 0;
            line-height: 1.5
          }

          #view-casestudy

          /* timeline */
          .tl {
            position: relative;
            padding-left: 30px;
            margin: 8px 0
          }

          #view-casestudy .tl::before {
            content: "";
            position: absolute;
            left: 7px;
            top: 6px;
            bottom: 6px;
            width: 2px;
            background: var(--line)
          }

          #view-casestudy .tl-item {
            position: relative;
            margin-bottom: 26px
          }

          #view-casestudy .tl-item:last-child {
            margin-bottom: 0
          }

          #view-casestudy .tl-item::before {
            content: "";
            position: absolute;
            left: -30px;
            top: 3px;
            width: 16px;
            height: 16px;
            border-radius: 0;
            border: 3px solid var(--navy);
            background: #fff
          }

          #view-casestudy .tl-item.amber::before {
            border-color: var(--amber)
          }

          #view-casestudy .tl-item.green::before {
            border-color: var(--green)
          }

          #view-casestudy .tl-year {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 13px;
            color: var(--navy);
            margin-bottom: 3px
          }

          #view-casestudy .tl-item.amber .tl-year {
            color: var(--amber)
          }

          #view-casestudy .tl-item.green .tl-year {
            color: var(--green)
          }

          #view-casestudy .tl-title {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 5px
          }

          #view-casestudy .tl-desc {
            font-size: 14px;
            color: #555
          }

          #view-casestudy

          /* questions */
          .q {
            display: flex;
            gap: 16px;
            background: var(--offwhite);
            border-radius: 0;
            padding: 18px 20px;
            margin-bottom: 14px
          }

          #view-casestudy .q .num {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            border-radius: 0;
            background: var(--black);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px
          }

          #view-casestudy .q p {
            font-size: 15px;
            color: #333;
            margin: 0
          }

          #view-casestudy

          /* references */
          .ref {
            display: flex;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid var(--line);
            font-size: 14.5px
          }

          #view-casestudy .ref:last-child {
            border-bottom: none
          }

          #view-casestudy .ref .rn {
            color: var(--navy);
            font-weight: 700;
            min-width: 28px
          }

          #view-casestudy .ref .rt em {
            color: #555
          }

          #view-casestudy

          /* key terms */
          .terms {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 8px
          }

          #view-casestudy .term {
            font-size: 12.5px;
            font-weight: 600;
            padding: 7px 14px;
            border-radius: 0;
            border: 1.5px solid var(--line);
            color: #4d4d4d
          }

          #view-casestudy .term.i {
            background: #eef0fb;
            border-color: #dfe2f7;
            color: var(--indigo)
          }

          #view-casestudy .term.a {
            background: #fff6ee;
            border-color: #f5e3cf;
            color: var(--amber)
          }

          #view-casestudy .term.g {
            background: #e9f6ef;
            border-color: #cfe9d9;
            color: var(--green)
          }

          #view-casestudy

          /* ===== BUY PANEL ===== */
          .buy {
            position: sticky;
            top: 24px;
            display: flex;
            flex-direction: column;
            gap: 0
          }

          #view-casestudy .buy-card {
            border: 1.5px solid var(--line);
            border-radius: var(--radius);
            padding: 24px;
            background: #fff
          }

          #view-casestudy .price {
            display: flex;
            align-items: baseline;
            gap: 6px;
            font-family: 'Inter'
          }

          #view-casestudy .price .amt {
            font-weight: 200;
            font-size: 25px;
            color: #111f41
          }

          #view-casestudy .price .cur {
            font-size: 14px;
            font-weight: 600;
            color: var(--muted)
          }

          #view-casestudy .price-sub {
            font-size: 12.5px;
            color: var(--green);
            font-weight: 600;
            margin: 4px 0 18px
          }

          #view-casestudy .buy-actions {
            display: flex;
            gap: 10px;
            align-items: stretch
          }

          #view-casestudy .buy-now {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--black);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 14px 16px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: .18s
          }

          #view-casestudy .buy-now:hover {
            background: #2a2a2a
          }

          #view-casestudy .buy-now svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none
          }

          #view-casestudy .icon-btn {
            width: 46px;
            border: 1.5px solid var(--line);
            border-radius: 0;
            background: #fff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: .18s;
            color: var(--ink)
          }

          #view-casestudy .icon-btn:hover {
            border-color: var(--ink);
            background: #fafafa
          }

          #view-casestudy .icon-btn.flag:hover {
            color: var(--red);
            border-color: var(--red)
          }

          #view-casestudy .icon-btn svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none
          }

          #view-casestudy .icon-btn.saved {
            color: var(--navy);
            border-color: var(--navy)
          }

          #view-casestudy .icon-btn.saved svg {
            fill: var(--navy)
          }

          #view-casestudy .subs {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 0 4px;
            border-top: 1.5px solid var(--line);
            margin-top: 20px
          }

          #view-casestudy .avs {
            display: flex
          }

          #view-casestudy .avs .a {
            width: 30px;
            height: 30px;
            border-radius: 0;
            border: 2px solid #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: #fff;
            margin-left: -8px
          }

          #view-casestudy .avs .a:first-child {
            margin-left: 0
          }

          #view-casestudy .subs .stxt {
            font-size: 14px
          }

          #view-casestudy .subs .stxt b {
            font-family: 'Inter';
            font-weight: 700
          }

          #view-casestudy .details-card {
            border: 1.5px solid var(--line);
            border-radius: var(--radius);
            padding: 22px 24px;
            background: #fff;
            margin-top: 16px
          }

          #view-casestudy .details-card .dh {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .14em;
            color: #a8a8a3;
            margin-bottom: 16px
          }

          #view-casestudy .dgrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px 16px
          }

          #view-casestudy .dcell .k {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #b0b0ab;
            margin-bottom: 4px;
            text-transform: uppercase
          }

          #view-casestudy .dcell .v {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink)
          }

          #view-casestudy .dcell .v.navy {
            color: var(--navy)
          }

          #view-casestudy .dcell .v.green {
            color: var(--green)
          }

          #view-casestudy .dcell .v.amber {
            color: var(--amber)
          }

          #view-casestudy .detail-list {
            margin-top: 4px;
            display: flex;
            flex-direction: column;
            gap: 2px
          }

          #view-casestudy .dl-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12.5px;
            color: #666;
            padding: 5px 0;
            border-bottom: 1px solid var(--line)
          }

          #view-casestudy .dl-row:last-child {
            border-bottom: none
          }

          #view-casestudy .dl-row svg {
            width: 16px;
            height: 16px;
            stroke: var(--muted);
            fill: none;
            flex-shrink: 0
          }

          #view-casestudy .dl-row .lbl {
            color: #666
          }

          #view-casestudy .dl-row b {
            margin-left: auto;
            text-align: right;
            color: var(--ink);
            font-weight: 700
          }

          #view-casestudy .dl-row b.navy {
            color: var(--navy)
          }

          #view-casestudy .dl-row b.green {
            color: var(--green)
          }

          #view-casestudy .dl-row b.amber {
            color: var(--amber)
          }

          #view-casestudy .sect-block {
            border-top: 1.5px solid var(--line);
            margin-top: 18px;
            padding-top: 16px
          }

          #view-casestudy .sect-block .dh {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .14em;
            color: #a8a8a3;
            margin-bottom: 11px
          }

          #view-casestudy .prereq {
            font-size: 13px;
            color: #555;
            line-height: 1.55;
            margin: 0
          }

          #view-casestudy .materials {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 0;
            padding: 0
          }

          #view-casestudy .materials li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 13px;
            color: #3f3f3f
          }

          #view-casestudy .materials li svg {
            width: 15px;
            height: 15px;
            stroke: var(--green);
            fill: none;
            flex-shrink: 0;
            margin-top: 2px
          }

          #view-casestudy .materials li .muted {
            color: #9a9a95;
            font-size: 12px
          }

          #view-casestudy .taught {
            border-top: 1.5px solid var(--line);
            margin-top: 18px;
            padding-top: 16px
          }

          #view-casestudy .taught .dh {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .14em;
            color: #a8a8a3;
            margin-bottom: 12px
          }

          #view-casestudy .taught .schools {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
          }

          #view-casestudy .school {
            font-size: 12px;
            font-weight: 600;
            color: #4d4d4d;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 6px 13px
          }

          #view-casestudy

          /* CHECKOUT MODAL */
          .modal-scrim {
            position: fixed;
            inset: 0;
            background: rgba(10, 12, 24, .55);
            backdrop-filter: blur(3px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 200;
            padding: 24px
          }

          #view-casestudy .modal-scrim.open {
            display: flex;
            animation: fadeIn .2s ease
          }

          @keyframes fadeIn {
            from {
              opacity: 0
            }

            to {
              opacity: 1
            }
          }

          #view-casestudy .modal {
            background: #fff;
            border-radius: 0;
            width: 100%;
            max-width: 440px;
            padding: 28px;
            position: relative;
            max-height: 92vh;
            overflow-y: auto;
            animation: popIn .25s cubic-bezier(.2, .7, .3, 1)
          }

          #view-casestudy .modal-wide {
            max-width: 500px
          }

          @keyframes popIn {
            from {
              opacity: 0;
              transform: translateY(12px) scale(.98)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          #view-casestudy .modal-close {
            position: absolute;
            top: 16px;
            right: 18px;
            background: none;
            border: none;
            font-size: 26px;
            line-height: 1;
            color: #999;
            cursor: pointer;
            transition: .15s;
            z-index: 2
          }

          #view-casestudy .modal-close:hover {
            color: var(--ink)
          }

          #view-casestudy .modal h3 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 20px;
            color: var(--ink);
            margin-bottom: 18px
          }

          #view-casestudy

          /* stepper */
          .co-steps {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 22px;
            padding-right: 30px
          }

          #view-casestudy .co-step {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 12.5px;
            font-weight: 600;
            color: #b0b0ab;
            white-space: nowrap
          }

          #view-casestudy .co-step .dot {
            width: 22px;
            height: 22px;
            border-radius: 0;
            border: 1.5px solid var(--line);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #b0b0ab;
            background: #fff;
            transition: .2s
          }

          #view-casestudy .co-step.active {
            color: var(--navy)
          }

          #view-casestudy .co-step.active .dot {
            background: var(--navy);
            border-color: var(--navy);
            color: #fff
          }

          #view-casestudy .co-step.done .dot {
            background: var(--green);
            border-color: var(--green);
            color: #fff
          }

          #view-casestudy .co-step.done {
            color: var(--green)
          }

          #view-casestudy .co-bar {
            flex: 1;
            height: 1.5px;
            background: var(--line)
          }

          #view-casestudy

          /* summary */
          .co-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            background: var(--offwhite);
            border-radius: 0;
            padding: 14px 16px;
            margin-bottom: 18px
          }

          #view-casestudy .co-summary.compact {
            padding: 12px 16px;
            margin-bottom: 18px
          }

          #view-casestudy .co-sum-title {
            font-weight: 700;
            font-size: 13.5px;
            color: var(--ink);
            line-height: 1.35
          }

          #view-casestudy .co-sum-meta {
            font-size: 12px;
            color: var(--muted);
            margin-top: 3px
          }

          #view-casestudy .co-sum-price {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 20px;
            color: var(--navy);
            white-space: nowrap
          }

          #view-casestudy

          /* review blocks */
          .co-block {
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 15px 16px;
            margin-bottom: 14px
          }

          #view-casestudy .co-block-h {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 13.5px;
            color: var(--ink);
            margin-bottom: 11px
          }

          #view-casestudy .co-block-h svg {
            width: 16px;
            height: 16px;
            stroke: var(--navy);
            fill: none
          }

          #view-casestudy .co-kv {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            font-size: 13px;
            padding: 5px 0;
            color: #666
          }

          #view-casestudy .co-kv b {
            color: var(--ink);
            font-weight: 600;
            text-align: right
          }

          #view-casestudy .co-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin: 0;
            padding: 0
          }

          #view-casestudy .co-list li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 13px;
            color: #3f3f3f
          }

          #view-casestudy .co-list li svg {
            width: 15px;
            height: 15px;
            stroke: var(--green);
            fill: none;
            flex-shrink: 0;
            margin-top: 2px
          }

          #view-casestudy .co-list .muted {
            color: #9a9a95;
            font-size: 12px
          }

          #view-casestudy .co-ol {
            margin: 0;
            padding-left: 18px;
            display: flex;
            flex-direction: column;
            gap: 7px
          }

          #view-casestudy .co-ol li {
            font-size: 13px;
            color: #555;
            line-height: 1.5
          }

          #view-casestudy .co-terms {
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 0 16px;
            margin-bottom: 16px
          }

          #view-casestudy .co-terms summary {
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            padding: 14px 0;
            list-style: none
          }

          #view-casestudy .co-terms summary::-webkit-details-marker {
            display: none
          }

          #view-casestudy .co-terms summary::before {
            content: "+ ";
            color: var(--navy);
            font-weight: 700
          }

          #view-casestudy .co-terms[open] summary::before {
            content: "– "
          }

          #view-casestudy .co-terms p {
            font-size: 12.5px;
            color: #666;
            line-height: 1.6;
            padding-bottom: 14px;
            margin: 0
          }

          #view-casestudy .co-agree {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: #444;
            margin-bottom: 18px;
            cursor: pointer
          }

          #view-casestudy .co-agree input {
            margin-top: 2px;
            width: 16px;
            height: 16px;
            accent-color: var(--navy);
            flex-shrink: 0
          }

          #view-casestudy .co-agree.shake {
            animation: shake .4s
          }

          @keyframes shake {

            0%,
            100% {
              transform: translateX(0)
            }

            25% {
              transform: translateX(-5px)
            }

            75% {
              transform: translateX(5px)
            }
          }

          #view-casestudy

          /* payment methods */
          .co-pm-label {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #a8a8a3;
            margin-bottom: 10px;
            text-transform: uppercase
          }

          #view-casestudy .co-pmlist {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 12px
          }

          #view-casestudy .co-pm {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 13px 15px;
            cursor: pointer;
            transition: .15s
          }

          #view-casestudy .co-pm:hover {
            border-color: #c9c9c4
          }

          #view-casestudy .co-pm.selected {
            border-color: var(--navy);
            background: #f6f7fd
          }

          #view-casestudy .co-pm input {
            display: none
          }

          #view-casestudy .pm-radio {
            width: 18px;
            height: 18px;
            border-radius: 0;
            border: 1.6px solid #cfcfca;
            flex-shrink: 0;
            position: relative;
            transition: .15s
          }

          #view-casestudy .co-pm.selected .pm-radio {
            border-color: var(--navy)
          }

          #view-casestudy .co-pm.selected .pm-radio::after {
            content: "";
            position: absolute;
            inset: 3px;
            border-radius: 0;
            background: var(--navy)
          }

          #view-casestudy .pm-brand {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 11px;
            color: #fff;
            padding: 5px 8px;
            border-radius: 0;
            min-width: 42px;
            text-align: center;
            flex-shrink: 0
          }

          #view-casestudy .pm-brand.visa {
            background: #1a1f71
          }

          #view-casestudy .pm-brand.mc {
            background: #eb001b
          }

          #view-casestudy .pm-brand.upi {
            background: #0f9d58
          }

          #view-casestudy .pm-info {
            display: flex;
            flex-direction: column;
            line-height: 1.3
          }

          #view-casestudy .pm-info b {
            font-size: 13.5px;
            color: var(--ink);
            font-weight: 600
          }

          #view-casestudy .pm-info span {
            font-size: 11.5px;
            color: var(--muted)
          }

          #view-casestudy .co-add {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            justify-content: center;
            border: 1.5px dashed var(--line);
            background: #fff;
            border-radius: 0;
            padding: 12px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--navy);
            cursor: pointer;
            transition: .15s;
            margin-bottom: 16px
          }

          #view-casestudy .co-add:hover {
            border-color: var(--navy);
            background: #f6f7fd
          }

          #view-casestudy .co-add svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none
          }

          #view-casestudy .co-addform {
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 16px;
            margin-bottom: 16px
          }

          #view-casestudy .co-addbtns {
            display: flex;
            gap: 10px;
            margin-top: 4px
          }

          #view-casestudy .co-ghost {
            flex: 1;
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 10px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--ink);
            cursor: pointer;
            transition: .15s
          }

          #view-casestudy .co-ghost:hover {
            border-color: var(--ink)
          }

          #view-casestudy .co-solid {
            flex: 1;
            background: var(--navy);
            border: none;
            border-radius: 0;
            padding: 10px;
            font-size: 13.5px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            transition: .15s
          }

          #view-casestudy .co-solid:hover {
            background: #001c5e
          }

          #view-casestudy

          /* form inputs */
          .co-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #555;
            margin-bottom: 6px
          }

          #view-casestudy .co-input {
            width: 100%;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 11px 13px;
            font-size: 14px;
            font-family: inherit;
            color: var(--ink);
            transition: .15s;
            margin-bottom: 15px
          }

          #view-casestudy .co-input::placeholder {
            color: #b3b3ae
          }

          #view-casestudy .co-input:focus {
            outline: none;
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
          }

          #view-casestudy .co-card-wrap {
            position: relative;
            margin-bottom: 15px
          }

          #view-casestudy .co-card-wrap svg {
            position: absolute;
            left: 13px;
            top: 13px;
            width: 18px;
            height: 18px;
            stroke: var(--muted);
            fill: none
          }

          #view-casestudy .co-input.has-icon {
            padding-left: 40px;
            margin-bottom: 0
          }

          #view-casestudy .co-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px
          }

          #view-casestudy .co-error {
            color: var(--red);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 12px;
            min-height: 18px
          }

          #view-casestudy

          /* pay row */
          .co-payrow {
            display: flex;
            gap: 10px;
            align-items: stretch;
            margin-top: 4px
          }

          #view-casestudy .co-back {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 0 16px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--ink);
            cursor: pointer;
            transition: .15s
          }

          #view-casestudy .co-back:hover {
            border-color: var(--ink)
          }

          #view-casestudy .co-pay {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: var(--black);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 14px;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            transition: .18s;
            margin-top: 4px
          }

          #view-casestudy .co-pay:hover {
            background: #2a2a2a
          }

          #view-casestudy .co-pay:disabled {
            opacity: .7;
            cursor: default
          }

          #view-casestudy .co-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, .35);
            border-top-color: #fff;
            border-radius: 0;
            animation: spin .7s linear infinite
          }

          @keyframes spin {
            to {
              transform: rotate(360deg)
            }
          }

          #view-casestudy .co-secure {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font-size: 12px;
            color: var(--muted);
            margin-top: 14px;
            text-align: center
          }

          #view-casestudy .co-secure svg {
            width: 14px;
            height: 14px;
            stroke: var(--muted);
            fill: none
          }

          #view-casestudy

          /* thank you */
          .co-check {
            width: 64px;
            height: 64px;
            border-radius: 0;
            background: #e9f6ef;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 6px auto 18px
          }

          #view-casestudy .co-check svg {
            width: 30px;
            height: 30px;
            stroke: var(--green);
            fill: none
          }

          #view-casestudy .co-success-msg {
            font-size: 14px;
            color: #555;
            text-align: center;
            line-height: 1.6;
            margin: 0 0 22px
          }

          #view-casestudy .co-success-msg b {
            color: var(--ink)
          }

          #view-casestudy .co-done-btns {
            display: flex;
            flex-direction: column;
            gap: 10px
          }

          #view-casestudy .co-solid.wide,
          #view-casestudy .co-ghost.wide {
            flex: none;
            width: 100%;
            padding: 13px
          }

          #view-casestudy footer {
            border-top: 1.5px solid var(--line);
            padding: 28px 0;
            text-align: center;
            color: var(--muted);
            font-size: 13px
          }

          #view-casestudy

          /* RESPONSIVE */
          @media(max-width:1180px) {
            .layout {
              grid-template-columns: minmax(0, 1fr) 300px;
              gap: 32px
            }

            .toc {
              display: none
            }
          }

          @media(max-width:900px) {
            #view-casestudy .layout {
              grid-template-columns: 1fr;
              gap: 0
            }

            #view-casestudy .buy {
              position: static;
              order: -1;
              margin-bottom: 30px
            }

            #view-casestudy .stat-row {
              grid-template-columns: repeat(2, 1fr)
            }

            #view-casestudy .cardgrid {
              grid-template-columns: 1fr
            }

            #view-casestudy .navlinks {
              display: none
            }
          }

          @media(max-width:560px) {
            #view-casestudy .meta-strip {
              gap: 14px
            }

            #view-casestudy .bar-row {
              grid-template-columns: 110px 1fr 40px;
              gap: 10px
            }

            #view-casestudy table {
              font-size: 12.5px
            }

            #view-casestudy thead th,
            #view-casestudy tbody td {
              padding: 10px 10px
            }
          }

          @media(prefers-reduced-motion:reduce) {
            #view-casestudy {
              transition: none !important
            }
          }

          /* ===== VIRTUAL ME ===== */
          #view-virtualme .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 28px
          }

          #view-virtualme .vm-eyebrow {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .16em;
            color: #a8a8a3;
            display: block;
            margin-bottom: 14px
          }

          #view-virtualme .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 13px;
            border-radius: 0;
            padding: 11px 22px;
            transition: .2s
          }

          #view-virtualme .btn-ghost {
            background: #fff;
            border: 1.5px solid #1a1a1a;
            color: #1a1a1a
          }

          #view-virtualme .btn-ghost:hover {
            background: #1a1a1a;
            color: #fff
          }

          #view-virtualme .btn-dark {
            background: #0d0d0d;
            color: #fff
          }

          #view-virtualme .btn-dark:hover {
            background: #2a2a2a
          }

          /* hero */
          #view-virtualme .vm-hero {
            background: #f4f4f2;
            border-bottom: 1.5px solid #e6e6e3;
            padding: 60px 0
          }

          #view-virtualme .vm-hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 48px;
            align-items: center
          }

          #view-virtualme .vm-hero-text h1 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: clamp(28px, 3.8vw, 42px);
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: #1a1a1a
          }

          #view-virtualme .vm-hero-text p {
            font-size: 16.5px;
            color: #555;
            line-height: 1.6;
            margin-top: 18px;
            max-width: 54ch
          }

          #view-virtualme .vm-hero-btns {
            display: flex;
            gap: 12px;
            margin-top: 26px;
            flex-wrap: wrap
          }

          /* chat card (shared look) */
          #view-virtualme .vm-hero-card,
          #view-virtualme .vm-demo-wrap {
            background: #0d0d0d;
            border-radius: 0;
            padding: 22px;
            color: #fff
          }

          #view-virtualme .vm-demo-wrap {
            max-width: 620px;
            margin: 0 auto
          }

          #view-virtualme .vm-chat-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1.5px solid #262626
          }

          #view-virtualme .vm-chat-av {
            width: 40px;
            height: 40px;
            border-radius: 0;
            background: #002671;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14px;
            flex-shrink: 0
          }

          #view-virtualme .vm-chat-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            color: #fff
          }

          #view-virtualme .vm-chat-sub {
            font-size: 12px;
            color: #9a9a9a;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px
          }

          #view-virtualme .vm-dot {
            width: 7px;
            height: 7px;
            border-radius: 0;
            background: #1f9d57;
            box-shadow: 0 0 0 3px rgba(31, 157, 87, .25)
          }

          #view-virtualme .vm-bubble {
            max-width: 84%;
            font-size: 14px;
            line-height: 1.5;
            padding: 11px 15px;
            border-radius: 0;
            margin-bottom: 11px
          }

          #view-virtualme .vm-bubble.student {
            background: #262626;
            color: #e6e6e6;
            margin-left: auto;
            border-bottom-right-radius: 4px
          }

          #view-virtualme .vm-bubble.avatar {
            background: #eef0fb;
            color: #1a2a52;
            border-bottom-left-radius: 4px
          }

          #view-virtualme .vm-chat-foot {
            font-size: 11.5px;
            color: #777;
            text-align: center;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1.5px solid #262626
          }

          /* heads */
          #view-virtualme .vm-head {
            text-align: center;
            max-width: 680px;
            margin: 0 auto 36px
          }

          #view-virtualme .vm-block {
            padding: 64px 0 0
          }

          #view-virtualme .vm-head h2 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: clamp(24px, 3vw, 32px);
            letter-spacing: -0.02em;
            color: #1a1a1a
          }

          #view-virtualme .vm-head p {
            font-size: 16px;
            color: #6b6b6b;
            line-height: 1.6;
            margin-top: 12px
          }

          #view-virtualme .vm-ic {
            width: 44px;
            height: 44px;
            border-radius: 0;
            background: #eef0fb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px
          }

          #view-virtualme .vm-ic svg {
            width: 22px;
            height: 22px;
            stroke: #002671;
            fill: none
          }

          #view-virtualme .vm-ic.dark {
            background: rgba(255, 255, 255, .08)
          }

          #view-virtualme .vm-ic.dark svg {
            stroke: #fff
          }

          /* what is it */
          #view-virtualme .vm-what {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
          }

          #view-virtualme .vm-what-card {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 22px;
            transition: .2s
          }

          #view-virtualme .vm-what-card:hover {
            border-color: #d6d6d1;
            transform: translateY(-2px);
            box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
          }

          #view-virtualme .vm-what-card h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15.5px;
            color: #1a1a1a;
            margin-bottom: 7px
          }

          #view-virtualme .vm-what-card p {
            font-size: 13.5px;
            color: #555;
            line-height: 1.55
          }

          /* bands */
          #view-virtualme .vm-band {
            background: #0d0d0d;
            color: #fff;
            margin-top: 64px;
            padding: 64px 0
          }

          #view-virtualme .vm-band .vm-head h2 {
            color: #fff
          }

          #view-virtualme .vm-band .vm-head p {
            color: #b9b9b9
          }

          #view-virtualme .vm-band .vm-eyebrow {
            color: #777
          }

          #view-virtualme .vm-band.light {
            background: #f4f4f2;
            color: #1a1a1a;
            border-top: 1.5px solid #e6e6e3;
            border-bottom: 1.5px solid #e6e6e3
          }

          #view-virtualme .vm-band.light .vm-head h2,
          #view-virtualme .vm-band.light .vm-setup-text h2 {
            color: #1a1a1a
          }

          #view-virtualme .vm-band.light .vm-eyebrow {
            color: #a8a8a3
          }

          /* avatar types */
          #view-virtualme .vm-types {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
          }

          #view-virtualme .vm-type {
            background: #161616;
            border: 1.5px solid #262626;
            border-radius: 0;
            padding: 28px;
            position: relative
          }

          #view-virtualme .vm-type-tag {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #1f9d57;
            background: rgba(31, 157, 87, .12);
            padding: 5px 11px;
            border-radius: 0;
            margin-bottom: 16px
          }

          #view-virtualme .vm-type-tag.future {
            color: #e0a23a;
            background: rgba(224, 162, 58, .12)
          }

          #view-virtualme .vm-type h3 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            margin-bottom: 8px
          }

          #view-virtualme .vm-type p {
            font-size: 14.5px;
            color: #b0b0b0;
            line-height: 1.55;
            margin-bottom: 16px
          }

          #view-virtualme .vm-ticks {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px
          }

          #view-virtualme .vm-ticks li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 14px;
            color: #cfcfcf
          }

          #view-virtualme .vm-ticks li svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            fill: none;
            margin-top: 1px
          }

          /* build steps */
          #view-virtualme .vm-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
          }

          #view-virtualme .vm-step {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 22px;
            position: relative;
            transition: .2s
          }

          #view-virtualme .vm-step:hover {
            border-color: #d6d6d1;
            transform: translateY(-2px);
            box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
          }

          #view-virtualme .vm-step-n {
            position: absolute;
            top: 18px;
            right: 20px;
            font-family: 'Inter';
            font-weight: 800;
            font-size: 30px;
            color: #eef0fb
          }

          #view-virtualme .vm-step h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15.5px;
            color: #1a1a1a;
            margin-bottom: 7px
          }

          #view-virtualme .vm-step p {
            font-size: 13.5px;
            color: #555;
            line-height: 1.55
          }

          /* setup */
          #view-virtualme .vm-setup-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center
          }

          #view-virtualme .vm-setup-text p {
            font-size: 16px;
            color: #6b6b6b;
            line-height: 1.6;
            margin: 14px 0 20px
          }

          #view-virtualme .vm-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 9px
          }

          #view-virtualme .vm-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 7px 13px;
            font-size: 12.5px;
            font-weight: 600;
            color: #444
          }

          #view-virtualme .vm-chip svg {
            width: 14px;
            height: 14px;
            fill: none
          }

          #view-virtualme .vm-setup-panel {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 8px 22px
          }

          #view-virtualme .vm-panel-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0ee
          }

          #view-virtualme .vm-panel-row:last-child {
            border-bottom: none
          }

          #view-virtualme .vm-panel-row label {
            font-size: 12.5px;
            font-weight: 700;
            color: #8a8a86;
            letter-spacing: .04em
          }

          #view-virtualme .vm-field {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            text-align: right
          }

          #view-virtualme .vm-field.locked {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #1f9d57
          }

          #view-virtualme .vm-field.locked svg {
            width: 15px;
            height: 15px;
            stroke: #1f9d57;
            fill: none
          }

          #view-virtualme .vm-toggle {
            display: inline-flex;
            background: #f4f4f2;
            border-radius: 0;
            padding: 3px
          }

          #view-virtualme .vm-toggle-opt {
            font-size: 12.5px;
            font-weight: 600;
            color: #8a8a86;
            padding: 6px 13px;
            border-radius: 30px
          }

          #view-virtualme .vm-toggle-opt.active {
            background: #002671;
            color: #fff
          }

          /* who */
          #view-virtualme .vm-who {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
          }

          #view-virtualme .vm-who-card {
            background: #161616;
            border: 1.5px solid #262626;
            border-radius: 0;
            padding: 24px;
            transition: .2s
          }

          #view-virtualme .vm-who-card:hover {
            border-color: #3a3a3a;
            background: #1b1b1b
          }

          #view-virtualme .vm-who-card h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            color: #fff;
            margin-bottom: 7px
          }

          #view-virtualme .vm-who-card p {
            font-size: 13.5px;
            color: #b0b0b0;
            line-height: 1.55
          }

          /* insights */
          #view-virtualme .vm-insights {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 40px;
            align-items: center;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 40px
          }

          #view-virtualme .vm-insights-text h2 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: clamp(22px, 2.6vw, 28px);
            color: #1a1a1a;
            letter-spacing: -0.02em
          }

          #view-virtualme .vm-insights-text p {
            font-size: 15px;
            color: #6b6b6b;
            line-height: 1.6;
            margin-top: 12px
          }

          #view-virtualme .vm-insights-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px
          }

          #view-virtualme .vm-stat {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 18px;
            text-align: center
          }

          #view-virtualme .vm-stat .v {
            width: 42px;
            height: 42px;
            border-radius: 0;
            background: #eef0fb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px
          }

          #view-virtualme .vm-stat .v svg {
            width: 21px;
            height: 21px;
            stroke: #002671;
            fill: none
          }

          #view-virtualme .vm-stat h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 13.5px;
            color: #1a1a1a;
            margin-bottom: 5px
          }

          #view-virtualme .vm-stat p {
            font-size: 12px;
            color: #6b6b6b;
            line-height: 1.45
          }

          /* cta */
          #view-virtualme .vm-cta {
            text-align: center;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 54px 30px;
            margin: 64px 0 80px;
            background: #f4f4f2
          }

          #view-virtualme .vm-cta h2 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: clamp(24px, 3vw, 34px);
            color: #1a1a1a
          }

          #view-virtualme .vm-cta p {
            font-size: 16px;
            color: #6b6b6b;
            margin-top: 12px;
            max-width: 54ch;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6
          }

          #view-virtualme .vm-cta-btns {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 26px;
            flex-wrap: wrap
          }

          @media(max-width:1000px) {

            #view-virtualme .vm-what,
            #view-virtualme .vm-steps,
            #view-virtualme .vm-who {
              grid-template-columns: repeat(2, 1fr)
            }
          }

          @media(max-width:900px) {

            #view-virtualme .vm-hero-grid,
            #view-virtualme .vm-setup-grid,
            #view-virtualme .vm-insights {
              grid-template-columns: 1fr;
              gap: 30px
            }

            #view-virtualme .vm-types {
              grid-template-columns: 1fr
            }

            #view-virtualme .vm-insights-stats {
              grid-template-columns: repeat(3, 1fr)
            }
          }

          @media(max-width:560px) {

            #view-virtualme .vm-what,
            #view-virtualme .vm-steps,
            #view-virtualme .vm-who {
              grid-template-columns: 1fr
            }

            #view-virtualme .vm-insights-stats {
              grid-template-columns: 1fr
            }

            #view-virtualme .wrap {
              padding: 0 20px
            }
          }

          /* ===== FEED ===== */
          #view-feed {
            background: #f4f4f2;
            min-height: 100vh
          }

          #view-feed .fd-wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 28px
          }

          #view-feed .fd-layout {
            display: grid;
            grid-template-columns: 248px minmax(0, 1fr) 280px;
            gap: 24px;
            align-items: start;
            padding: 26px 0 70px
          }

          #view-feed .fd-left,
          #view-feed .fd-right {
            position: sticky;
            top: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px
          }

          /* profile mini */
          #view-feed .fd-profile {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            text-align: center;
            padding-bottom: 18px
          }

          #view-feed .fd-prof-cover {
            height: 56px;
            background: linear-gradient(120deg, #002671, #3a52a8)
          }

          #view-feed .fd-prof-av {
            width: 64px;
            height: 64px;
            border-radius: 0;
            border: 3px solid #fff;
            background: #002671;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            margin-top: -32px;
            overflow: hidden
          }

          #view-feed .fd-prof-av img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%
          }

          #view-feed .fd-prof-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            color: #1a1a1a;
            margin-top: 10px
          }

          #view-feed .fd-prof-role {
            font-size: 12.5px;
            color: #6b6b6b;
            margin-top: 3px
          }

          #view-feed .fd-prof-stats {
            display: flex;
            justify-content: center;
            gap: 26px;
            margin: 16px 0 14px;
            padding: 14px 0;
            border-top: 1px solid #f0f0ee;
            border-bottom: 1px solid #f0f0ee
          }

          #view-feed .fd-prof-stats b {
            display: block;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            color: #002671
          }

          #view-feed .fd-prof-stats span {
            font-size: 11px;
            color: #8a8a86
          }

          #view-feed .fd-prof-link {
            background: none;
            border: none;
            color: #002671;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer
          }

          #view-feed .fd-prof-link:hover {
            text-decoration: underline
          }

          /* shortcuts */
          #view-feed .fd-shortcuts {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 16px
          }

          #view-feed .fd-sc-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #a8a8a3;
            text-transform: uppercase;
            margin-bottom: 10px
          }

          #view-feed .fd-shortcuts a {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13.5px;
            color: #444;
            padding: 9px 8px;
            border-radius: 0;
            transition: .15s
          }

          #view-feed .fd-shortcuts a:hover {
            background: #f4f4f2;
            color: #1a1a1a
          }

          #view-feed .fd-shortcuts a svg {
            width: 17px;
            height: 17px;
            stroke: #002671;
            fill: none
          }

          /* center */
          #view-feed .fd-center {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 16px
          }

          /* composer */
          #view-feed .fd-composer {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 16px
          }

          #view-feed .fd-comp-top {
            display: flex;
            align-items: center;
            gap: 12px
          }

          #view-feed .fd-comp-av {
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: #002671;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 13px;
            flex-shrink: 0;
            overflow: hidden
          }

          #view-feed .fd-comp-av img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%
          }

          #view-feed .fd-comp-trigger {
            flex: 1;
            text-align: left;
            background: #f4f4f2;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 13px 20px;
            font-size: 14px;
            color: #8a8a86;
            cursor: pointer;
            transition: .15s;
            font-family: inherit
          }

          #view-feed .fd-comp-trigger:hover {
            background: #ececeb;
            border-color: #d6d6d1
          }

          #view-feed .fd-comp-actions {
            display: flex;
            gap: 6px;
            margin-top: 12px
          }

          #view-feed .fd-comp-act {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: none;
            border: none;
            border-radius: 0;
            padding: 9px;
            font-size: 13px;
            font-weight: 600;
            color: #5a5a5a;
            cursor: pointer;
            transition: .15s
          }

          #view-feed .fd-comp-act:hover {
            background: #f4f4f2;
            color: #1a1a1a
          }

          #view-feed .fd-comp-act svg {
            width: 18px;
            height: 18px;
            stroke: #002671;
            fill: none
          }

          #view-feed .fd-comp-edit {
            margin-top: 14px;
            border-top: 1px solid #f0f0ee;
            padding-top: 14px
          }

          #view-feed .fd-comp-edit textarea {
            width: 100%;
            min-height: 90px;
            border: none;
            resize: vertical;
            font-family: inherit;
            font-size: 15px;
            color: #1a1a1a;
            line-height: 1.5
          }

          #view-feed .fd-comp-edit textarea:focus {
            outline: none
          }

          #view-feed .fd-comp-edit textarea::placeholder {
            color: #b3b3ae
          }

          #view-feed .fd-comp-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-top: 10px
          }

          #view-feed .fd-comp-hint {
            font-size: 12px;
            color: #8a8a86
          }

          #view-feed .fd-comp-hint b {
            color: #444
          }

          #view-feed .fd-comp-btns {
            display: flex;
            gap: 8px
          }

          #view-feed .fd-ghost {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 600;
            color: #444;
            cursor: pointer
          }

          #view-feed .fd-ghost:hover {
            border-color: #1a1a1a
          }

          #view-feed .fd-solid {
            background: #0d0d0d;
            border: none;
            border-radius: 0;
            padding: 8px 22px;
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            transition: .15s
          }

          #view-feed .fd-solid:hover {
            background: #2a2a2a
          }

          #view-feed .fd-solid:disabled {
            opacity: .4;
            cursor: default
          }

          /* sort bar */
          #view-feed .fd-sortbar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 4px
          }

          #view-feed .fd-line {
            flex: 1;
            height: 1px;
            background: #e0e0dc
          }

          #view-feed .fd-sort {
            font-size: 12.5px;
            font-weight: 600;
            color: #6b6b6b;
            cursor: pointer
          }

          /* post card */
          #view-feed .fd-post {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            animation: fdIn .4s ease
          }

          @keyframes fdIn {
            from {
              opacity: 0;
              transform: translateY(10px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          #view-feed .fd-post-head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 16px 18px 0
          }

          #view-feed .fd-post-av {
            width: 46px;
            height: 46px;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14px;
            color: #fff;
            flex-shrink: 0;
            overflow: hidden
          }

          #view-feed .fd-post-av img {
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-feed .fd-post-id {
            flex: 1;
            min-width: 0
          }

          #view-feed .fd-post-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14.5px;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 7px
          }

          #view-feed .fd-badge {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .06em;
            color: #002671;
            background: #eef0fb;
            padding: 2px 7px;
            border-radius: 20px
          }

          #view-feed .fd-post-role {
            font-size: 12px;
            color: #6b6b6b;
            margin-top: 1px
          }

          #view-feed .fd-post-time {
            font-size: 11.5px;
            color: #a0a09a;
            margin-top: 1px
          }

          #view-feed .fd-post-more {
            background: none;
            border: none;
            color: #a0a09a;
            cursor: pointer;
            font-size: 20px;
            line-height: 1;
            padding: 0 6px
          }

          #view-feed .fd-post-body {
            padding: 12px 18px 0;
            font-size: 14.5px;
            color: #2f2f2f;
            line-height: 1.6;
            white-space: pre-wrap
          }

          #view-feed .fd-post-body b {
            color: #1a1a1a
          }

          #view-feed .fd-post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 10px 18px 0
          }

          #view-feed .fd-ptag {
            font-size: 12px;
            font-weight: 600;
            color: #002671
          }

          /* attached case preview */
          #view-feed .fd-case {
            margin: 14px 18px 0;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            transition: .15s
          }

          #view-feed .fd-case:hover {
            border-color: #c9c9c4;
            background: #fafafa
          }

          #view-feed .fd-case-media {
            height: 150px;
            background-size: cover;
            background-position: center
          }

          #view-feed .fd-case-info {
            padding: 13px 15px
          }

          #view-feed .fd-case-cat {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .08em;
            color: #002671;
            text-transform: uppercase
          }

          #view-feed .fd-case-title {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            color: #1a1a1a;
            margin: 5px 0 4px
          }

          #view-feed .fd-case-meta {
            font-size: 12px;
            color: #6b6b6b
          }

          /* image attachment */
          #view-feed .fd-post-img {
            margin-top: 14px;
            width: 100%;
            max-height: 380px;
            object-fit: cover
          }

          /* engagement bar */
          #view-feed .fd-post-stats {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            color: #8a8a86;
            padding: 12px 18px 10px
          }

          #view-feed .fd-post-stats .likes {
            display: flex;
            align-items: center;
            gap: 6px
          }

          #view-feed .fd-likeic {
            width: 16px;
            height: 16px;
            border-radius: 0;
            background: #002671;
            display: inline-flex;
            align-items: center;
            justify-content: center
          }

          #view-feed .fd-likeic svg {
            width: 9px;
            height: 9px;
            stroke: #fff;
            fill: none;
            stroke-width: 2.5
          }

          #view-feed .fd-post-actions {
            display: flex;
            border-top: 1px solid #f0f0ee
          }

          #view-feed .fd-act {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: none;
            border: none;
            padding: 11px;
            font-size: 13px;
            font-weight: 600;
            color: #5a5a5a;
            cursor: pointer;
            transition: .15s
          }

          #view-feed .fd-act:hover {
            background: #f4f4f2
          }

          #view-feed .fd-act svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none
          }

          #view-feed .fd-act.liked {
            color: #002671
          }

          #view-feed .fd-act.liked svg {
            fill: #002671;
            stroke: #002671
          }

          /* comments */
          #view-feed .fd-comments {
            padding: 6px 18px 16px;
            border-top: 1px solid #f0f0ee;
            display: none
          }

          #view-feed .fd-comments.open {
            display: block
          }

          #view-feed .fd-comment-box {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 12px 0
          }

          #view-feed .fd-comment-av {
            width: 34px;
            height: 34px;
            border-radius: 0;
            background: #002671;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 11px;
            flex-shrink: 0;
            overflow: hidden
          }

          #view-feed .fd-comment-av img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%
          }

          #view-feed .fd-comment-input {
            flex: 1;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 9px 16px;
            font-size: 13.5px;
            font-family: inherit
          }

          #view-feed .fd-comment-input:focus {
            outline: none;
            border-color: #002671
          }

          #view-feed .fd-comment {
            display: flex;
            gap: 10px;
            margin-top: 10px
          }

          #view-feed .fd-comment .fd-c-body {
            background: #f4f4f2;
            border-radius: 0;
            padding: 9px 14px;
            flex: 1
          }

          #view-feed .fd-comment .fd-c-name {
            font-weight: 700;
            font-size: 12.5px;
            color: #1a1a1a
          }

          #view-feed .fd-comment .fd-c-text {
            font-size: 13px;
            color: #444;
            margin-top: 2px
          }

          /* right rail */
          #view-feed .fd-panel {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 16px
          }

          #view-feed .fd-panel-title {
            font-size: 13px;
            font-weight: 700;
            color: #1a1a1a;
            font-family: 'Inter';
            margin-bottom: 14px
          }

          #view-feed .fd-sug {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 9px 0
          }

          #view-feed .fd-sug-av {
            width: 40px;
            height: 40px;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 12px;
            flex-shrink: 0;
            overflow: hidden
          }

          #view-feed .fd-sug-av img {
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-feed .fd-sug-id {
            flex: 1;
            min-width: 0
          }

          #view-feed .fd-sug-name {
            font-size: 13px;
            font-weight: 700;
            color: #1a1a1a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
          }

          #view-feed .fd-sug-role {
            font-size: 11.5px;
            color: #6b6b6b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
          }

          #view-feed .fd-sug-btn {
            border: 1.5px solid #002671;
            color: #002671;
            background: #fff;
            border-radius: 0;
            font-size: 12px;
            font-weight: 600;
            padding: 5px 13px;
            cursor: pointer;
            transition: .15s;
            flex-shrink: 0
          }

          #view-feed .fd-sug-btn:hover {
            background: #002671;
            color: #fff
          }

          #view-feed .fd-sug-btn.done {
            border-color: #e6e6e3;
            color: #8a8a86;
            background: #f4f4f2
          }

          #view-feed .fd-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
          }

          #view-feed .fd-trend {
            font-size: 12.5px;
            font-weight: 600;
            color: #002671;
            background: #eef0fb;
            border-radius: 0;
            padding: 6px 12px;
            cursor: pointer
          }

          #view-feed .fd-foot-note {
            font-size: 11.5px;
            color: #a0a09a;
            text-align: center;
            padding: 4px
          }

          #view-feed .fd-more-wrap {
            display: flex;
            justify-content: center;
            padding: 6px 0 0
          }

          #view-feed .fd-more {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            background: #fff;
            border: 1.5px solid #1a1a1a;
            border-radius: 0;
            padding: 12px 28px;
            font-size: 13.5px;
            font-weight: 600;
            color: #1a1a1a;
            transition: .2s
          }

          #view-feed .fd-more:hover {
            background: #1a1a1a;
            color: #fff
          }

          #view-feed .fd-more.is-done {
            display: none
          }

          @media(max-width:1080px) {
            #view-feed .fd-layout {
              grid-template-columns: minmax(0, 1fr) 280px
            }

            #view-feed .fd-left {
              display: none
            }
          }

          @media(max-width:860px) {
            #view-feed .fd-layout {
              grid-template-columns: 1fr
            }

            #view-feed .fd-right {
              display: none
            }
          }

          @media(max-width:560px) {
            #view-feed .fd-wrap {
              padding: 0 14px
            }

            #view-feed .fd-comp-act span {
              display: none
            }
          }

          /* ===== HOME: new sections (How Works / Who / Benefits) ===== */
          .hx-eyebrow {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .16em;
            color: #a8a8a3;
            display: block;
            margin-bottom: 14px
          }

          .hx-eyebrow.light {
            color: #888
          }

          .hx-head {
            text-align: center;
            max-width: 680px;
            margin: 0 auto 46px
          }

          .hx-head h2 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: clamp(26px, 3.4vw, 38px);
            letter-spacing: -0.02em;
            color: #0d0d0d;
            line-height: 1.12
          }

          .hx-head p {
            font-size: 16.5px;
            color: #6b6b6b;
            line-height: 1.6;
            margin-top: 14px
          }

          /* How works flow */
          .hx-works {
            padding: 80px 0px 80px 0px;
            background: #fff;
            /* border-top:1.5px solid #e6e6e3 */
          }

          .hx-flow {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap
          }

          .hx-node {
            flex: 1 1 0;
            min-width: 200px;
            max-width: 250px;
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 26px 22px;
            position: relative;
            transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s
          }

          .hx-node:hover {
            transform: translateY(-5px);
            box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .25);
            border-color: #002671
          }

          .hx-node-ic {
            width: 50px;
            height: 50px;
            border-radius: 0;
            background: #eef0fb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            transition: .3s
          }

          .hx-node:hover .hx-node-ic {
            background: #002671
          }

          .hx-node-ic svg {
            width: 24px;
            height: 24px;
            stroke: #002671;
            fill: none;
            transition: .3s
          }

          .hx-node:hover .hx-node-ic svg {
            stroke: #fff
          }

          .hx-node-n {
            position: absolute;
            top: 22px;
            right: 24px;
            font-family: 'Inter';
            font-weight: 800;
            font-size: 26px;
            color: #eef0fb
          }

          .hx-node h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 17px;
            color: #0d0d0d;
            margin-bottom: 8px
          }

          .hx-node p {
            font-size: 13.5px;
            color: #555;
            line-height: 1.55
          }

          .hx-arrow {
            display: flex;
            align-items: center;
            color: #c9c9c4;
            flex: 0 0 auto
          }

          .hx-arrow svg {
            width: 26px;
            height: 26px;
            stroke: currentColor;
            fill: none
          }

          /* Who benefits */
          .hx-who {
            padding: 80px 0;
            background: #f4f4f2;
            border-top: 1.5px solid #e6e6e3
          }

          .hx-who-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px
          }

          .hx-who-card {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 28px 24px;
            transition: transform .3s, box-shadow .3s, border-color .3s
          }

          .hx-who-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .22);
            border-color: #d6d6d1
          }

          .hx-who-ic {
            width: 54px;
            height: 54px;
            border-radius: 0;
            background: linear-gradient(135deg, #002671, #3a52a8);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px
          }

          .hx-who-ic svg {
            width: 26px;
            height: 26px;
            stroke: #fff;
            fill: none
          }

          .hx-who-card h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 18px;
            color: #0d0d0d;
            margin-bottom: 9px
          }

          .hx-who-card p {
            font-size: 14px;
            color: #555;
            line-height: 1.55;
            margin-bottom: 16px
          }

          .hx-who-tag {
            display: inline-block;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .04em;
            color: #002671;
            background: #eef0fb;
            border-radius: 0;
            padding: 6px 13px
          }

          /* Benefits (dark) */
          .hx-benefits {
            padding: 80px 0;
            background: #0d0d0d;
            color: #fff
          }

          .hx-benefits .hx-head h2 {
            color: #fff
          }

          .hx-benefits .hx-head p {
            color: #b9b9b9
          }

          .hx-ben-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
          }

          .hx-ben-card {
            background: #161616;
            border: 1.5px solid #262626;
            border-radius: 0;
            padding: 24px 22px;
            transition: transform .3s, background .3s, border-color .3s
          }

          .hx-ben-card:hover {
            transform: translateY(-4px);
            background: #1b1b1b;
            border-color: #3a3a3a
          }

          .hx-ben-ic {
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: rgba(255, 255, 255, .08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            transition: .3s
          }

          .hx-ben-card:hover .hx-ben-ic {
            background: #002671
          }

          .hx-ben-ic svg {
            width: 22px;
            height: 22px;
            stroke: #fff;
            fill: none
          }

          .hx-ben-card h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15.5px;
            color: #fff;
            margin-bottom: 8px
          }

          .hx-ben-card p {
            font-size: 13px;
            color: #aeaeae;
            line-height: 1.55
          }

          @media(max-width:1000px) {

            .hx-who-grid,
            .hx-ben-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .hx-flow {
              gap: 14px
            }

            .hx-arrow {
              display: none
            }

            .hx-node {
              max-width: none;
              flex-basis: calc(50% - 8px)
            }
          }

          @media(max-width:560px) {

            .hx-who-grid,
            .hx-ben-grid {
              grid-template-columns: 1fr
            }

            .hx-node {
              flex-basis: 100%
            }
          }

          /* ===== PROFILE ===== */
          #view-profile {
            background: #f4f4f2;
            min-height: 100vh
          }

          #view-profile .pf-wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 28px 70px
          }

          /* hero */
          #view-profile .pf-hero {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            margin: 24px 0 22px
          }

          #view-profile .pf-hero-cover {
            height: 96px;
            background: linear-gradient(120deg, #002671, #3a52a8)
          }

          #view-profile .pf-hero-row {
            display: flex;
            align-items: flex-end;
            gap: 20px;
            padding: 0 28px 22px;
            margin-top: -40px
          }

          #view-profile .pf-hero-av {
            width: 104px;
            height: 104px;
            border-radius: 0;
            border: 4px solid #fff;
            background: #002671;
            overflow: hidden;
            flex-shrink: 0
          }

          #view-profile .pf-hero-av img {
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-profile .pf-hero-id {
            flex: 1;
            padding-bottom: 4px
          }

          #view-profile .pf-hero-id h1 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 26px;
            color: #1a1a1a
          }

          #view-profile .pf-hero-id p {
            font-size: 13.5px;
            color: #6b6b6b;
            margin-top: 3px
          }

          #view-profile .pf-hero-stats {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 12px;
            font-size: 13px;
            color: #6b6b6b
          }

          #view-profile .pf-hero-stats b {
            color: #002671;
            font-family: 'Inter'
          }

          #view-profile .pf-sep {
            width: 1px;
            height: 14px;
            background: #e0e0dc
          }

          #view-profile .pf-hero-btn {
            align-self: center;
            border: 1.5px solid #1a1a1a;
            background: #fff;
            color: #1a1a1a;
            border-radius: 0;
            padding: 9px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: .18s;
            flex-shrink: 0
          }

          #view-profile .pf-hero-btn:hover {
            background: #1a1a1a;
            color: #fff
          }

          /* layout */
          #view-profile .pf-layout {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 24px;
            align-items: start
          }

          /* tabs */
          #view-profile .pf-tabs {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 10px;
            position: sticky;
            top: 18px;
            display: flex;
            flex-direction: column;
            gap: 2px
          }

          #view-profile .pf-tab {
            display: flex;
            align-items: center;
            gap: 11px;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            border-radius: 0;
            padding: 11px 13px;
            font-size: 13.5px;
            font-weight: 600;
            color: #4a4a4a;
            cursor: pointer;
            transition: .15s;
            font-family: inherit
          }

          #view-profile .pf-tab svg {
            width: 18px;
            height: 18px;
            stroke: #8a8a86;
            fill: none;
            flex-shrink: 0;
            transition: .15s
          }

          #view-profile .pf-tab:hover {
            background: #f4f4f2;
            color: #1a1a1a
          }

          #view-profile .pf-tab.active {
            background: #002671;
            color: #fff
          }

          #view-profile .pf-tab.active svg {
            stroke: #fff
          }

          #view-profile .pf-tab.danger {
            color: #d4373a
          }

          #view-profile .pf-tab.danger svg {
            stroke: #d4373a
          }

          #view-profile .pf-tab.danger:hover {
            background: #fdecec
          }

          #view-profile .pf-tab-sep {
            height: 1px;
            background: #f0f0ee;
            margin: 6px 8px
          }

          /* content */
          #view-profile .pf-content {
            min-width: 0
          }

          #view-profile .pf-panel {
            display: none;
            animation: pfIn .35s ease
          }

          #view-profile .pf-panel.active {
            display: block
          }

          @keyframes pfIn {
            from {
              opacity: 0;
              transform: translateY(8px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          #view-profile .pf-phead {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px 14px;
            margin-bottom: 20px
          }

          #view-profile .pf-phead h2 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 24px;
            color: #1a1a1a;
            width: 100%
          }

          #view-profile .pf-phead p {
            font-size: 14px;
            color: #6b6b6b;
            margin-top: -2px
          }

          #view-profile .pf-card {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 24px;
            margin-bottom: 18px
          }

          #view-profile .pf-card-t {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            color: #1a1a1a;
            margin-bottom: 18px
          }

          #view-profile .pf-grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px
          }

          #view-profile .pf-field {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 16px
          }

          #view-profile .pf-field:last-child {
            margin-bottom: 0
          }

          #view-profile .pf-grid2 .pf-field {
            margin-bottom: 0
          }

          #view-profile .pf-field label {
            font-size: 12px;
            font-weight: 700;
            color: #8a8a86;
            letter-spacing: .03em
          }

          #view-profile .pf-field input,
          #view-profile .pf-field textarea {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 11px 14px;
            font-size: 14px;
            font-family: inherit;
            color: #1a1a1a;
            resize: vertical
          }

          #view-profile .pf-field input:focus,
          #view-profile .pf-field textarea:focus {
            outline: none;
            border-color: #002671;
            box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
          }

          #view-profile .pf-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 18px
          }

          #view-profile .pf-btn {
            border-radius: 0;
            padding: 10px 22px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: .18s
          }

          #view-profile .pf-btn.sm {
            padding: 8px 16px
          }

          #view-profile .pf-btn.ghost {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            color: #444
          }

          #view-profile .pf-btn.ghost:hover {
            border-color: #1a1a1a
          }

          #view-profile .pf-btn.solid {
            background: #0d0d0d;
            border: none;
            color: #fff
          }

          #view-profile .pf-btn.solid:hover {
            background: #2a2a2a
          }

          /* chips */
          #view-profile .pf-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 9px
          }

          #view-profile .pf-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #eef0fb;
            color: #002671;
            border-radius: 0;
            padding: 7px 13px;
            font-size: 13px;
            font-weight: 600
          }

          #view-profile .pf-chip svg {
            stroke: #002671;
            cursor: pointer
          }

          #view-profile .pf-chip.add {
            background: #fff;
            border: 1.5px dashed #cfcfca;
            color: #6b6b6b;
            cursor: pointer
          }

          /* row lines */
          #view-profile .pf-rowline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid #f0f0ee
          }

          #view-profile .pf-rowline:last-child {
            border-bottom: none
          }

          #view-profile .pf-rl-t {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a
          }

          #view-profile .pf-rl-s {
            font-size: 12.5px;
            color: #6b6b6b;
            margin-top: 2px
          }

          #view-profile .pf-pill {
            font-size: 11.5px;
            font-weight: 700;
            border-radius: 0;
            padding: 4px 11px
          }

          #view-profile .pf-pill.on {
            background: #e9f6ef;
            color: #1f9d57
          }

          #view-profile .pf-pill.pend {
            background: #fdf2e3;
            color: #c47d1a
          }

          /* stats */
          #view-profile .pf-stats4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 18px
          }

          #view-profile .pf-stat {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 20px
          }

          #view-profile .pf-stat-v {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 26px;
            color: #002671
          }

          #view-profile .pf-stat-l {
            font-size: 12.5px;
            color: #6b6b6b;
            margin-top: 5px
          }

          /* table */
          #view-profile .pf-table .pf-tr {
            display: grid;
            grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;
            align-items: center;
            gap: 12px;
            padding: 13px 0;
            border-bottom: 1px solid #f0f0ee;
            font-size: 13.5px;
            color: #3a3a3a
          }

          #view-profile .pf-table .pf-tr:last-child {
            border-bottom: none
          }

          #view-profile .pf-table .pf-th {
            font-size: 11.5px;
            font-weight: 700;
            color: #8a8a86;
            letter-spacing: .04em;
            text-transform: uppercase;
            border-bottom: 1.5px solid #e6e6e3
          }

          #view-profile .pf-mcell {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            color: #1a1a1a
          }

          #view-profile .pf-mcell i {
            width: 30px;
            height: 30px;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-style: normal;
            font-size: 11px;
            font-weight: 700;
            flex-shrink: 0
          }

          #view-profile .pf-strong {
            font-weight: 600;
            color: #1a1a1a
          }

          #view-profile .pf-mlink {
            color: #002671;
            font-weight: 600;
            cursor: pointer;
            font-size: 13px
          }

          #view-profile .pf-mlink:hover {
            text-decoration: underline
          }

          /* support help links */
          #view-profile .pf-help {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0ee;
            font-size: 14px;
            color: #3a3a3a;
            cursor: pointer
          }

          #view-profile .pf-help:last-child {
            border-bottom: none
          }

          #view-profile .pf-help:hover {
            color: #002671
          }

          #view-profile .pf-help svg {
            width: 18px;
            height: 18px;
            stroke: #8a8a86;
            fill: none
          }

          #view-profile .pf-help:hover svg {
            stroke: #002671
          }

          /* refer */
          #view-profile .pf-refer {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 40px;
            text-align: center
          }

          #view-profile .pf-refer-ic {
            width: 64px;
            height: 64px;
            border-radius: 0;
            background: #eef0fb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px
          }

          #view-profile .pf-refer-ic svg {
            width: 32px;
            height: 32px;
            stroke: #002671;
            fill: none
          }

          #view-profile .pf-refer h3 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 22px;
            color: #1a1a1a
          }

          #view-profile .pf-refer p {
            font-size: 14.5px;
            color: #6b6b6b;
            margin: 10px auto 22px;
            max-width: 46ch;
            line-height: 1.6
          }

          #view-profile .pf-refer-link {
            display: flex;
            gap: 10px;
            max-width: 440px;
            margin: 0 auto 22px
          }

          #view-profile .pf-refer-link input {
            flex: 1;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 11px 14px;
            font-size: 13.5px;
            color: #1a1a1a;
            font-family: inherit
          }

          #view-profile .pf-refer-stats {
            display: flex;
            justify-content: center;
            gap: 34px;
            font-size: 13.5px;
            color: #6b6b6b
          }

          #view-profile .pf-refer-stats b {
            display: block;
            font-family: 'Inter';
            font-weight: 800;
            font-size: 22px;
            color: #002671
          }

          @media(max-width:900px) {
            #view-profile .pf-layout {
              grid-template-columns: 1fr
            }

            #view-profile .pf-tabs {
              position: static;
              flex-direction: row;
              overflow-x: auto;
              flex-wrap: nowrap
            }

            #view-profile .pf-tab span {
              white-space: nowrap
            }

            #view-profile .pf-tab-sep {
              display: none
            }

            #view-profile .pf-grid2,
            #view-profile .pf-stats4 {
              grid-template-columns: 1fr 1fr
            }

            #view-profile .pf-table .pf-tr {
              grid-template-columns: 1.5fr 1fr 1fr;
              font-size: 12.5px
            }

            #view-profile .pf-hero-row {
              flex-direction: column;
              align-items: flex-start
            }
          }

          @media(max-width:560px) {

            #view-profile .pf-grid2,
            #view-profile .pf-stats4 {
              grid-template-columns: 1fr
            }

            #view-profile .pf-wrap {
              padding: 0 16px 50px
            }
          }

          /* ===== CREATE CASE STUDY ===== */
          #view-createcasestudy {
            background: #f6f6f4
          }

          #view-createcasestudy .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 28px
          }

          #view-createcasestudy .cc-stage {
            padding: 100px 0 100px
          }

          #view-createcasestudy .cc-eyebrow {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .16em;
            color: #6b6b61;
            display: block;
            margin-bottom: 2px
          }

          #view-createcasestudy .cc-head h1 {
            font-family: 'Inter';
            font-weight: 200;
            font-size: clamp(24px, 3vw, 25px);
            letter-spacing: -0.02em;
            color: #453a9c
          }

          #view-createcasestudy .cc-head p {
            font-size: 14px;
            color: #6b6b6b;
            margin-top: 0px
          }

          /* selection cards */
          #view-createcasestudy .cc-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-top: 20px
          }

          #view-createcasestudy .cc-card {
            position: relative;
            display: flex;
            flex-direction: column;
            text-align: left;
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            transition: transform .25s, box-shadow .25s, border-color .25s;
            font-family: inherit;
            padding: 0
          }

          #view-createcasestudy .cc-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 38px -22px rgba(0, 0, 0, .22);
            border-color: #d6d6d1
          }

          #view-createcasestudy .cc-card-media {
            height: 104px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
          }

          #view-createcasestudy .cc-card-media svg {
            width: 58%;
            height: auto
          }

          #view-createcasestudy .cc-card-media.purple {
            background: #eae6fb
          }

          #view-createcasestudy .cc-card-media.green {
            background: #d9f2e6
          }

          #view-createcasestudy .cc-card-media.amber {
            background: #fbeccb
          }

          #view-createcasestudy .cc-card-media.pink {
            background: #f9e0e9
          }

          #view-createcasestudy .cc-card-body {
            padding: 14px 15px 16px
          }

          #view-createcasestudy .cc-card-body h3 {
            font-family: 'Inter';
            font-weight: 300;
            font-size: 15px;
            color: #1a1a1a;
            margin-bottom: 6px
          }

          #view-createcasestudy .cc-card-body p {
            font-size: 12.5px;
            color: #5a5a5a;
            line-height: 1.45
          }

          #view-createcasestudy .cc-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 12px
          }

          #view-createcasestudy .cc-tag {
            font-size: 11px;
            font-weight: 600;
            color: #6b6b6b;
            background: #f1f1ef;
            border-radius: 0;
            padding: 4px 10px
          }

          #view-createcasestudy .cc-tag.accent {
            background: #eae6fb;
            color: #5b4bc4
          }

          #view-createcasestudy .cc-tag.accent.green {
            background: #d9f2e6;
            color: #1f8d5e
          }

          #view-createcasestudy .cc-tag.accent.amber {
            background: #fbeccb;
            color: #b3781a
          }

          #view-createcasestudy .cc-tag.accent.pink {
            background: #f9e0e9;
            color: #bd3e68
          }

          /* hover explanation overlay (covers whole card) */
          #view-createcasestudy .cc-hover {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: rgba(13, 13, 13, .94);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 22px 26px;
            opacity: 0;
            transition: opacity .2s;
            pointer-events: none
          }

          #view-createcasestudy .cc-card:hover .cc-hover {
            opacity: 1
          }

          #view-createcasestudy .cc-hover-t {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #b9b2f0;
            margin-bottom: 12px
          }

          #view-createcasestudy .cc-hover ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 9px
          }

          #view-createcasestudy .cc-hover li {
            position: relative;
            padding-left: 20px;
            font-size: 14px;
            line-height: 1.4;
            color: #eaeaea
          }

          #view-createcasestudy .cc-hover li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 0;
            background: #8b7df0
          }

          #view-createcasestudy .cc-hover-go {
            margin-top: 16px;
            font-size: 14px;
            font-weight: 700;
            color: #a99cf2
          }

          /* chat bar */
          #view-createcasestudy .cc-chatbar {
            background: #fff;
            border-bottom: 1.5px solid #e6e6e3;
            position: sticky;
            top: 0;
            z-index: 20
          }

          #view-createcasestudy .cc-chatbar-in {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 14px 28px
          }

          #view-createcasestudy .cc-back {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 13.5px;
            font-weight: 600;
            color: #5a5a5a;
            font-family: inherit
          }

          #view-createcasestudy .cc-back:hover {
            color: #1a1a1a
          }

          #view-createcasestudy .cc-back svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none
          }

          #view-createcasestudy .cc-chatbar-title {
            display: flex;
            align-items: center;
            gap: 9px;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14.5px;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-chip-ai {
            width: 28px;
            height: 28px;
            border-radius: 0;
            background: #eae6fb;
            display: inline-flex;
            align-items: center;
            justify-content: center
          }

          #view-createcasestudy .cc-chip-ai svg {
            width: 16px;
            height: 16px;
            stroke: #5b4bc4;
            fill: none
          }

          #view-createcasestudy .cc-progress {
            margin-left: auto;
            width: 160px;
            height: 6px;
            background: #eee;
            border-radius: 0;
            overflow: hidden
          }

          #view-createcasestudy .cc-progress-fill {
            display: block;
            height: 100%;
            width: 0;
            background: #5b4bc4;
            border-radius: 0;
            transition: width .4s
          }

          /* chat */
          #view-createcasestudy .cc-chatwrap {
            padding: 28px 28px 40px;
            max-width: 820px
          }

          #view-createcasestudy .cc-chat {
            display: flex;
            flex-direction: column;
            gap: 18px
          }

          #view-createcasestudy .cc-msg {
            display: flex;
            gap: 13px;
            max-width: 100%;
            animation: ccIn .35s ease
          }

          @keyframes ccIn {
            from {
              opacity: 0;
              transform: translateY(8px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          #view-createcasestudy .cc-msg-av {
            width: 34px;
            height: 34px;
            border-radius: 0;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
          }

          #view-createcasestudy .cc-msg.ai .cc-msg-av {
            background: #eae6fb
          }

          #view-createcasestudy .cc-msg.ai .cc-msg-av svg {
            width: 18px;
            height: 18px;
            stroke: #5b4bc4;
            fill: none
          }

          #view-createcasestudy .cc-msg.me .cc-msg-av {
            background: #002671;
            color: #fff
          }

          #view-createcasestudy .cc-msg.me .cc-msg-av img {
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-createcasestudy .cc-msg.me {
            flex-direction: row-reverse;
            margin-left: auto
          }

          #view-createcasestudy .cc-bubble {
            font-size: 15px;
            line-height: 1.6;
            padding: 13px 17px;
            border-radius: 0;
            max-width: 560px
          }

          #view-createcasestudy .cc-msg.ai .cc-bubble {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            color: #2a2a2a;
            border-top-left-radius: 5px
          }

          #view-createcasestudy .cc-msg.me .cc-bubble {
            background: #002671;
            color: #fff;
            border-top-right-radius: 5px
          }

          #view-createcasestudy .cc-bubble b {
            font-weight: 700
          }

          #view-createcasestudy .cc-bubble .cc-q-sub {
            display: block;
            font-size: 13px;
            color: #8a8a86;
            margin-top: 6px
          }

          /* input zone */
          #view-createcasestudy .cc-inputzone {
            margin-top: 22px;
            padding-left: 47px
          }

          #view-createcasestudy .cc-opts {
            display: flex;
            flex-wrap: wrap;
            gap: 9px
          }

          #view-createcasestudy .cc-opt {
            background: #fff;
            border: 1.5px solid #d6d6d1;
            border-radius: 0;
            padding: 10px 17px;
            font-size: 14px;
            font-weight: 600;
            color: #3a3a3a;
            cursor: pointer;
            transition: .15s;
            font-family: inherit
          }

          #view-createcasestudy .cc-opt:hover {
            border-color: #5b4bc4;
            color: #5b4bc4
          }

          #view-createcasestudy .cc-opt.sel {
            background: #5b4bc4;
            border-color: #5b4bc4;
            color: #fff
          }

          #view-createcasestudy .cc-opt .ck {
            display: none
          }

          #view-createcasestudy .cc-opt.sel .ck {
            display: inline
          }

          #view-createcasestudy .cc-multi-foot {
            margin-top: 14px;
            display: flex;
            align-items: center;
            gap: 12px
          }

          #view-createcasestudy .cc-hint {
            font-size: 12.5px;
            color: #9a9a96
          }

          #view-createcasestudy .cc-textwrap {
            position: relative;
            max-width: 620px
          }

          #view-createcasestudy .cc-textwrap textarea {
            width: 100%;
            min-height: 54px;
            border: 1.5px solid #d6d6d1;
            border-radius: 0;
            padding: 14px 56px 14px 16px;
            font-size: 15px;
            font-family: inherit;
            color: #1a1a1a;
            resize: vertical;
            line-height: 1.5
          }

          #view-createcasestudy .cc-textwrap textarea:focus {
            outline: none;
            border-color: #5b4bc4;
            box-shadow: 0 0 0 3px rgba(91, 75, 196, .12)
          }

          #view-createcasestudy .cc-send {
            position: absolute;
            right: 9px;
            bottom: 9px;
            width: 38px;
            height: 38px;
            border-radius: 0;
            background: #5b4bc4;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: .15s
          }

          #view-createcasestudy .cc-send:hover {
            background: #4a3ba8
          }

          #view-createcasestudy .cc-send:disabled {
            opacity: .4;
            cursor: default
          }

          #view-createcasestudy .cc-send svg {
            width: 18px;
            height: 18px;
            stroke: #fff;
            fill: none
          }

          #view-createcasestudy .cc-upload {
            border: 1.8px dashed #cfcfca;
            border-radius: 0;
            padding: 26px;
            text-align: center;
            cursor: pointer;
            background: #fff;
            max-width: 560px;
            transition: .15s
          }

          #view-createcasestudy .cc-upload:hover {
            border-color: #5b4bc4;
            background: #faf9ff
          }

          #view-createcasestudy .cc-upload svg {
            width: 30px;
            height: 30px;
            stroke: #5b4bc4;
            fill: none;
            margin-bottom: 8px
          }

          #view-createcasestudy .cc-upload .ut {
            font-size: 14.5px;
            font-weight: 600;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-upload .us {
            font-size: 12.5px;
            color: #8a8a86;
            margin-top: 3px
          }

          #view-createcasestudy .cc-btn {
            border-radius: 0;
            padding: 11px 22px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: .18s;
            border: none
          }

          #view-createcasestudy .cc-btn.solid {
            background: #5b4bc4;
            color: #fff
          }

          #view-createcasestudy .cc-btn.solid:hover {
            background: #4a3ba8
          }

          #view-createcasestudy .cc-btn.solid:disabled {
            opacity: .4;
            cursor: default
          }

          #view-createcasestudy .cc-btn.ghost {
            background: #fff;
            border: 1.5px solid #d6d6d1;
            color: #3a3a3a
          }

          #view-createcasestudy .cc-btn.ghost:hover {
            border-color: #1a1a1a
          }

          /* brief card */
          #view-createcasestudy .cc-brief {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 26px;
            max-width: 640px;
            margin-top: 6px
          }

          #view-createcasestudy .cc-brief-t {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #a8a8a3;
            text-transform: uppercase;
            margin-bottom: 18px
          }

          #view-createcasestudy .cc-brief-row {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 9px 0
          }

          #view-createcasestudy .cc-brief-ck {
            width: 22px;
            height: 22px;
            border-radius: 0;
            background: #e9f6ef;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px
          }

          #view-createcasestudy .cc-brief-ck svg {
            width: 13px;
            height: 13px;
            stroke: #1f9d57;
            fill: none;
            stroke-width: 3
          }

          #view-createcasestudy .cc-brief-k {
            width: 130px;
            flex-shrink: 0;
            font-size: 14px;
            color: #8a8a86
          }

          #view-createcasestudy .cc-brief-v {
            font-size: 14.5px;
            font-weight: 700;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-brief-foot {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1.5px solid #f0f0ee
          }

          /* blueprint */
          #view-createcasestudy .cc-blueprint {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 28px;
            max-width: 680px;
            margin-top: 6px
          }

          #view-createcasestudy .cc-bp-h {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 20px;
            color: #1a1a1a;
            margin-bottom: 4px
          }

          #view-createcasestudy .cc-bp-sub {
            font-size: 13.5px;
            color: #6b6b6b;
            margin-bottom: 20px
          }

          #view-createcasestudy .cc-bp-sec {
            padding: 16px 0;
            border-top: 1px solid #f0f0ee
          }

          #view-createcasestudy .cc-bp-sec:first-of-type {
            border-top: none
          }

          #view-createcasestudy .cc-bp-label {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .06em;
            color: #5b4bc4;
            text-transform: uppercase;
            margin-bottom: 7px
          }

          #view-createcasestudy .cc-bp-sec p {
            font-size: 14.5px;
            color: #2f2f2f;
            line-height: 1.6
          }

          #view-createcasestudy .cc-bp-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px
          }

          #view-createcasestudy .cc-bp-list li {
            display: flex;
            gap: 9px;
            font-size: 14px;
            color: #3a3a3a;
            align-items: flex-start
          }

          #view-createcasestudy .cc-bp-list li::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 0;
            background: #5b4bc4;
            margin-top: 7px;
            flex-shrink: 0
          }

          #view-createcasestudy .cc-bp-list.warn li::before {
            background: #d98a2b
          }

          #view-createcasestudy .cc-bp-foot {
            display: flex;
            gap: 12px;
            margin-top: 22px;
            flex-wrap: wrap
          }

          @media(max-width:920px) {
            #view-createcasestudy .cc-cards {
              grid-template-columns: 1fr 1fr
            }
          }

          @media(max-width:820px) {
            #view-createcasestudy .cc-inputzone {
              padding-left: 0
            }

            #view-createcasestudy .cc-progress {
              display: none
            }
          }

          @media(max-width:520px) {
            #view-createcasestudy .cc-cards {
              grid-template-columns: 1fr
            }
          }

          /* ===== CASE BUILDER WORKSPACE ===== */
          #view-createcasestudy .cc-workspace {
            padding: 0
          }

          #view-createcasestudy .cc-topbar {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 5px 24px;
            background: #fff;
            border-bottom: 1.5px solid #e6e6e3;
            position: sticky;
            top: 0;
            z-index: 30;
            min-height: 52px
          }

          #view-createcasestudy .cc-topbar-title {
            display: flex;
            align-items: center;
            gap: 9px;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14.5px;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-saved {
            font-weight: 500;
            font-size: 12px;
            color: #9a9a96
          }

          #view-createcasestudy .cc-topbar-actions {
            margin-left: auto;
            display: flex;
            gap: 9px
          }

          #view-createcasestudy .cc-tb-btn {
            border: 1.5px solid #d6d6d1;
            background: #fff;
            color: #3a3a3a;
            border-radius: 0;
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: .15s
          }

          #view-createcasestudy .cc-tb-btn:hover {
            border-color: #1a1a1a
          }

          #view-createcasestudy .cc-tb-btn.primary {
            background: #5b4bc4;
            border-color: #5b4bc4;
            color: #fff
          }

          #view-createcasestudy .cc-tb-btn.primary:hover {
            background: #4a3ba8
          }

          /* grid */
          #view-createcasestudy .cc-ws-grid {
            display: grid;
            grid-template-columns: 228px 1fr 300px;
            gap: 0;
            align-items: stretch;
            min-height: calc(100vh - 110px)
          }

          /* left stages */
          #view-createcasestudy .cc-stages {
            border-right: 1.5px solid #e6e6e3;
            background: #fafafa;
            padding: 20px 14px;
            display: flex;
            flex-direction: column
          }

          #view-createcasestudy .cc-stages-h {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #a8a8a3;
            padding: 0 8px;
            margin-bottom: 12px
          }

          #view-createcasestudy .cc-stage-list {
            display: flex;
            flex-direction: column;
            gap: 1px;
            flex: 1
          }

          #view-createcasestudy .cc-stg {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 9px 10px;
            border-radius: 0;
            cursor: pointer;
            font-size: 13.5px;
            font-weight: 600;
            color: #5a5a5a;
            transition: .15s;
            border: none;
            background: none;
            text-align: left;
            font-family: inherit;
            width: 100%
          }

          #view-createcasestudy .cc-stg:hover {
            background: #efeef6;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-stg.active {
            background: #eae6fb;
            color: #5b4bc4
          }

          #view-createcasestudy .cc-stg-ic {
            width: 22px;
            height: 22px;
            border-radius: 0;
            border: 1.8px solid #cfcfca;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 700;
            color: #a8a8a3;
            transition: .15s
          }

          #view-createcasestudy .cc-stg.active .cc-stg-ic {
            border-color: #5b4bc4;
            color: #5b4bc4
          }

          #view-createcasestudy .cc-stg.done .cc-stg-ic {
            background: #1f9d57;
            border-color: #1f9d57;
            color: #fff
          }

          #view-createcasestudy .cc-stg.done .cc-stg-ic svg {
            width: 11px;
            height: 11px;
            stroke: #fff;
            fill: none;
            stroke-width: 3
          }

          #view-createcasestudy .cc-stage-prog {
            height: 5px;
            background: #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            margin: 14px 8px 6px
          }

          #view-createcasestudy .cc-stage-prog-bar {
            height: 100%;
            width: 0;
            background: #5b4bc4;
            border-radius: 0;
            transition: width .4s
          }

          #view-createcasestudy .cc-stage-prog-t {
            font-size: 11.5px;
            color: #9a9a96;
            padding: 0 8px
          }

          /* center */
          #view-createcasestudy .cc-center {
            padding: 30px 36px 60px;
            overflow-y: auto;
            max-width: 860px;
            width: 100%;
            margin: 0 auto
          }

          #view-createcasestudy .cc-stg-head {
            margin-bottom: 22px
          }

          #view-createcasestudy .cc-stg-head h2 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 24px;
            color: #1a1a1a;
            letter-spacing: -0.01em
          }

          #view-createcasestudy .cc-stg-head p {
            font-size: 14.5px;
            color: #6b6b6b;
            margin-top: 7px;
            line-height: 1.55
          }

          /* chat (inside discover stage) */
          #view-createcasestudy .cc-chat {
            display: flex;
            flex-direction: column;
            gap: 16px
          }

          #view-createcasestudy .cc-msg {
            display: flex;
            gap: 12px;
            animation: ccIn .35s ease
          }

          #view-createcasestudy .cc-msg-av {
            width: 32px;
            height: 32px;
            border-radius: 0;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
          }

          #view-createcasestudy .cc-msg.ai .cc-msg-av {
            background: #eae6fb
          }

          #view-createcasestudy .cc-msg.ai .cc-msg-av svg {
            width: 17px;
            height: 17px;
            stroke: #5b4bc4;
            fill: none
          }

          #view-createcasestudy .cc-msg.me {
            flex-direction: row-reverse
          }

          #view-createcasestudy .cc-msg.me .cc-msg-av {
            background: #002671;
            color: #fff
          }

          #view-createcasestudy .cc-msg.me .cc-msg-av img {
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-createcasestudy .cc-bubble {
            font-size: 14.5px;
            line-height: 1.6;
            padding: 12px 16px;
            border-radius: 0;
            max-width: 520px
          }

          #view-createcasestudy .cc-msg.ai .cc-bubble {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            color: #2a2a2a;
            border-top-left-radius: 5px
          }

          #view-createcasestudy .cc-msg.me .cc-bubble {
            background: #002671;
            color: #fff;
            border-top-right-radius: 5px
          }

          #view-createcasestudy .cc-bubble b {
            font-weight: 700
          }

          #view-createcasestudy .cc-q-sub {
            display: block;
            font-size: 13px;
            color: #8a8a86;
            margin-top: 6px
          }

          #view-createcasestudy .cc-inputzone {
            margin-top: 18px;
            padding-left: 44px
          }

          #view-createcasestudy .cc-opts {
            display: flex;
            flex-wrap: wrap;
            gap: 9px
          }

          #view-createcasestudy .cc-opt {
            background: #fff;
            border: 1.5px solid #d6d6d1;
            border-radius: 0;
            padding: 9px 16px;
            font-size: 13.5px;
            font-weight: 600;
            color: #3a3a3a;
            cursor: pointer;
            transition: .15s;
            font-family: inherit
          }

          #view-createcasestudy .cc-opt:hover {
            border-color: #5b4bc4;
            color: #5b4bc4
          }

          #view-createcasestudy .cc-opt.sel {
            background: #5b4bc4;
            border-color: #5b4bc4;
            color: #fff
          }

          #view-createcasestudy .cc-multi-foot {
            margin-top: 14px;
            display: flex;
            align-items: center;
            gap: 12px
          }

          #view-createcasestudy .cc-hint {
            font-size: 12.5px;
            color: #9a9a96
          }

          #view-createcasestudy .cc-textwrap {
            position: relative;
            max-width: 600px
          }

          #view-createcasestudy .cc-textwrap textarea {
            width: 100%;
            min-height: 50px;
            border: 1.5px solid #d6d6d1;
            border-radius: 0;
            padding: 13px 54px 13px 15px;
            font-size: 14.5px;
            font-family: inherit;
            color: #1a1a1a;
            resize: vertical;
            line-height: 1.5
          }

          #view-createcasestudy .cc-textwrap textarea:focus {
            outline: none;
            border-color: #5b4bc4;
            box-shadow: 0 0 0 3px rgba(91, 75, 196, .12)
          }

          #view-createcasestudy .cc-send {
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 36px;
            height: 36px;
            border-radius: 0;
            background: #5b4bc4;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: .15s
          }

          #view-createcasestudy .cc-send:hover {
            background: #4a3ba8
          }

          #view-createcasestudy .cc-send:disabled {
            opacity: .4;
            cursor: default
          }

          #view-createcasestudy .cc-send svg {
            width: 18px;
            height: 18px;
            stroke: #fff;
            fill: none
          }

          /* generic builder buttons */
          #view-createcasestudy .cc-btn {
            border-radius: 0;
            padding: 10px 20px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: .18s;
            border: none
          }

          #view-createcasestudy .cc-btn.solid {
            background: #5b4bc4;
            color: #fff
          }

          #view-createcasestudy .cc-btn.solid:hover {
            background: #4a3ba8
          }

          #view-createcasestudy .cc-btn.ghost {
            background: #fff;
            border: 1.5px solid #d6d6d1;
            color: #3a3a3a
          }

          #view-createcasestudy .cc-btn.ghost:hover {
            border-color: #1a1a1a
          }

          /* brief card */
          #view-createcasestudy .cc-brief {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 24px
          }

          #view-createcasestudy .cc-brief-t {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #a8a8a3;
            text-transform: uppercase;
            margin-bottom: 16px
          }

          #view-createcasestudy .cc-brief-row {
            display: flex;
            align-items: flex-start;
            gap: 13px;
            padding: 8px 0
          }

          #view-createcasestudy .cc-brief-ck {
            width: 20px;
            height: 20px;
            border-radius: 0;
            background: #e9f6ef;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px
          }

          #view-createcasestudy .cc-brief-ck svg {
            width: 12px;
            height: 12px;
            stroke: #1f9d57;
            fill: none;
            stroke-width: 3
          }

          #view-createcasestudy .cc-brief-k {
            width: 130px;
            flex-shrink: 0;
            font-size: 13.5px;
            color: #8a8a86
          }

          #view-createcasestudy .cc-brief-v {
            font-size: 14px;
            font-weight: 700;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-brief-foot {
            display: flex;
            gap: 11px;
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1.5px solid #f0f0ee
          }

          /* editable doc sections */
          #view-createcasestudy .cc-doc-sec {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 20px 22px;
            margin-bottom: 16px;
            transition: border-color .15s
          }

          #view-createcasestudy .cc-doc-sec:focus-within {
            border-color: #5b4bc4
          }

          #view-createcasestudy .cc-doc-sec-h {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px
          }

          #view-createcasestudy .cc-doc-label {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .06em;
            color: #5b4bc4;
            text-transform: uppercase
          }

          #view-createcasestudy .cc-doc-tools {
            margin-left: auto;
            display: flex;
            gap: 6px
          }

          #view-createcasestudy .cc-doc-tool {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border: 1.5px solid #e6e6e3;
            background: #fff;
            border-radius: 0;
            padding: 4px 10px;
            font-size: 11.5px;
            font-weight: 600;
            color: #6b6b6b;
            cursor: pointer;
            transition: .15s
          }

          #view-createcasestudy .cc-doc-tool:hover {
            border-color: #5b4bc4;
            color: #5b4bc4
          }

          #view-createcasestudy .cc-doc-tool svg {
            width: 12px;
            height: 12px;
            stroke: currentColor;
            fill: none
          }

          #view-createcasestudy .cc-doc-body {
            font-size: 14.5px;
            line-height: 1.7;
            color: #2a2a2a;
            border: none;
            outline: none;
            width: 100%;
            resize: none;
            font-family: inherit;
            min-height: 40px
          }

          #view-createcasestudy .cc-doc-body[contenteditable]:focus {
            outline: none
          }

          #view-createcasestudy .cc-doc-body p {
            margin-bottom: 10px
          }

          #view-createcasestudy .cc-ai-suggest {
            margin-top: 12px;
            background: #faf9ff;
            border: 1.5px solid #e7e2fb;
            border-radius: 0;
            padding: 12px 14px;
            font-size: 13px;
            color: #5b4bc4;
            display: flex;
            align-items: flex-start;
            gap: 9px
          }

          #view-createcasestudy .cc-ai-suggest svg {
            width: 15px;
            height: 15px;
            stroke: #5b4bc4;
            fill: none;
            flex-shrink: 0;
            margin-top: 1px
          }

          /* upload */
          #view-createcasestudy .cc-upload {
            border: 1.8px dashed #cfcfca;
            border-radius: 0;
            padding: 28px;
            text-align: center;
            cursor: pointer;
            background: #fff;
            transition: .15s
          }

          #view-createcasestudy .cc-upload:hover {
            border-color: #5b4bc4;
            background: #faf9ff
          }

          #view-createcasestudy .cc-upload svg {
            width: 30px;
            height: 30px;
            stroke: #5b4bc4;
            fill: none;
            margin-bottom: 8px
          }

          #view-createcasestudy .cc-upload .ut {
            font-size: 14.5px;
            font-weight: 600;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-upload .us {
            font-size: 12.5px;
            color: #8a8a86;
            margin-top: 3px
          }

          /* exhibits / table */
          #view-createcasestudy .cc-exhibit {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 16px 18px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 14px
          }

          #view-createcasestudy .cc-exhibit-ic {
            width: 40px;
            height: 40px;
            border-radius: 0;
            background: #eef0fb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
          }

          #view-createcasestudy .cc-exhibit-ic svg {
            width: 20px;
            height: 20px;
            stroke: #5b4bc4;
            fill: none
          }

          #view-createcasestudy .cc-exhibit-t {
            font-weight: 700;
            font-size: 14px;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-exhibit-s {
            font-size: 12.5px;
            color: #6b6b6b;
            margin-top: 2px
          }

          /* checklist */
          #view-createcasestudy .cc-check {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 13px 0;
            border-bottom: 1px solid #f0f0ee
          }

          #view-createcasestudy .cc-check:last-child {
            border-bottom: none
          }

          #view-createcasestudy .cc-check-ic {
            width: 22px;
            height: 22px;
            border-radius: 0;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center
          }

          #view-createcasestudy .cc-check-ic.ok {
            background: #e9f6ef
          }

          #view-createcasestudy .cc-check-ic.ok svg {
            stroke: #1f9d57
          }

          #view-createcasestudy .cc-check-ic.warn {
            background: #fdf2e3
          }

          #view-createcasestudy .cc-check-ic.warn svg {
            stroke: #d98a2b
          }

          #view-createcasestudy .cc-check-ic svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke-width: 2.6
          }

          #view-createcasestudy .cc-check-t {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-check-s {
            font-size: 12.5px;
            color: #6b6b6b;
            margin-top: 2px
          }

          /* right side agents/activity */
          #view-createcasestudy .cc-side {
            border-left: 1.5px solid #e6e6e3;
            background: #fafafa;
            padding: 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 18px;
            overflow-y: auto
          }

          #view-createcasestudy .cc-side-panel {}

          #view-createcasestudy .cc-side-h {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #8a8a86;
            margin-bottom: 12px;
            display: flex;
            align-items: baseline;
            gap: 8px
          }

          #view-createcasestudy .cc-side-sub {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: none;
            color: #b3b3ae
          }

          #view-createcasestudy .cc-agents {
            display: flex;
            flex-direction: column;
            gap: 9px
          }

          #view-createcasestudy .cc-agent {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 12px 13px;
            cursor: pointer;
            transition: .15s
          }

          #view-createcasestudy .cc-agent:hover {
            border-color: #5b4bc4;
            box-shadow: 0 8px 20px -14px rgba(91, 75, 196, .5)
          }

          #view-createcasestudy .cc-agent-top {
            display: flex;
            align-items: center;
            gap: 9px
          }

          #view-createcasestudy .cc-agent-ic {
            width: 30px;
            height: 30px;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
          }

          #view-createcasestudy .cc-agent-ic svg {
            width: 16px;
            height: 16px;
            fill: none
          }

          #view-createcasestudy .cc-agent-name {
            font-size: 12.5px;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1.25
          }

          #view-createcasestudy .cc-agent-desc {
            font-size: 11.5px;
            color: #7a7a76;
            margin-top: 7px;
            line-height: 1.4
          }

          #view-createcasestudy .cc-agent-status {
            margin-left: auto;
            font-size: 10px;
            font-weight: 700;
            border-radius: 0;
            padding: 3px 8px
          }

          #view-createcasestudy .cc-agent-status.idle {
            background: #f1f1ef;
            color: #9a9a96
          }

          #view-createcasestudy .cc-agent-status.run {
            background: #fdf2e3;
            color: #c47d1a
          }

          #view-createcasestudy .cc-agent-status.done {
            background: #e9f6ef;
            color: #1f9d57
          }

          #view-createcasestudy .cc-activity {
            display: flex;
            flex-direction: column;
            gap: 0
          }

          #view-createcasestudy .cc-act {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #ededeb
          }

          #view-createcasestudy .cc-act:last-child {
            border-bottom: none
          }

          #view-createcasestudy .cc-act-dot {
            width: 26px;
            height: 26px;
            border-radius: 0;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            color: #fff;
            overflow: hidden
          }

          #view-createcasestudy .cc-act-dot img {
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-createcasestudy .cc-act-dot.ai {
            background: #5b4bc4
          }

          #view-createcasestudy .cc-act-dot.ai svg {
            width: 14px;
            height: 14px;
            stroke: #fff;
            fill: none
          }

          #view-createcasestudy .cc-act-txt {
            font-size: 12px;
            color: #3a3a3a;
            line-height: 1.4
          }

          #view-createcasestudy .cc-act-txt b {
            font-weight: 700;
            color: #1a1a1a
          }

          #view-createcasestudy .cc-act-time {
            font-size: 10.5px;
            color: #b3b3ae;
            margin-top: 2px
          }

          @media(max-width:1100px) {
            #view-createcasestudy .cc-ws-grid {
              grid-template-columns: 200px 1fr
            }

            #view-createcasestudy .cc-side {
              display: none
            }
          }

          @media(max-width:760px) {
            #view-createcasestudy .cc-ws-grid {
              grid-template-columns: 1fr
            }

            #view-createcasestudy .cc-stages {
              display: none
            }
          }

          /* ===== CLONE CONNECT ON HOME (copied from Virtual Me) ===== */
          /* ===== VIRTUAL ME ===== */
          #view-virtualme .cc-vm-sections .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 28px
          }

          #view-virtualme .cc-vm-sections .vm-eyebrow {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .16em;
            color: #a8a8a3;
            display: block;
            margin-bottom: 14px
          }

          #view-virtualme .cc-vm-sections .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 13px;
            border-radius: 0;
            padding: 11px 22px;
            transition: .2s
          }

          #view-virtualme .cc-vm-sections .btn-ghost {
            background: #fff;
            border: 1.5px solid #1a1a1a;
            color: #1a1a1a
          }

          #view-virtualme .cc-vm-sections .btn-ghost:hover {
            background: #1a1a1a;
            color: #fff
          }

          #view-virtualme .cc-vm-sections .btn-dark {
            background: #0d0d0d;
            color: #fff
          }

          #view-virtualme .cc-vm-sections .btn-dark:hover {
            background: #2a2a2a
          }

          /* hero */
          #view-virtualme .cc-vm-sections .vm-hero {
            background: #f4f4f2;
            border-bottom: 1.5px solid #e6e6e3;
            padding: 60px 0
          }

          #view-virtualme .cc-vm-sections .vm-hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 48px;
            align-items: center
          }

          #view-virtualme .cc-vm-sections .vm-hero-text h1 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: clamp(28px, 3.8vw, 42px);
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: #1a1a1a
          }

          #view-virtualme .cc-vm-sections .vm-hero-text p {
            font-size: 16.5px;
            color: #555;
            line-height: 1.6;
            margin-top: 18px;
            max-width: 54ch
          }

          #view-virtualme .cc-vm-sections .vm-hero-btns {
            display: flex;
            gap: 12px;
            margin-top: 26px;
            flex-wrap: wrap
          }

          /* chat card (shared look) */
          #view-virtualme .cc-vm-sections .vm-hero-card,
          #view-virtualme .cc-vm-sections .vm-demo-wrap {
            background: #0d0d0d;
            border-radius: 0;
            padding: 22px;
            color: #fff
          }

          #view-virtualme .cc-vm-sections .vm-demo-wrap {
            max-width: 620px;
            margin: 0 auto
          }

          #view-virtualme .cc-vm-sections .vm-chat-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1.5px solid #262626
          }

          #view-virtualme .cc-vm-sections .vm-chat-av {
            width: 40px;
            height: 40px;
            border-radius: 0;
            background: #002671;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14px;
            flex-shrink: 0
          }

          #view-virtualme .cc-vm-sections .vm-chat-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            color: #fff
          }

          #view-virtualme .cc-vm-sections .vm-chat-sub {
            font-size: 12px;
            color: #9a9a9a;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px
          }

          #view-virtualme .cc-vm-sections .vm-dot {
            width: 7px;
            height: 7px;
            border-radius: 0;
            background: #1f9d57;
            box-shadow: 0 0 0 3px rgba(31, 157, 87, .25)
          }

          #view-virtualme .cc-vm-sections .vm-bubble {
            max-width: 84%;
            font-size: 14px;
            line-height: 1.5;
            padding: 11px 15px;
            border-radius: 0;
            margin-bottom: 11px
          }

          #view-virtualme .cc-vm-sections .vm-bubble.student {
            background: #262626;
            color: #e6e6e6;
            margin-left: auto;
            border-bottom-right-radius: 4px
          }

          #view-virtualme .cc-vm-sections .vm-bubble.avatar {
            background: #eef0fb;
            color: #1a2a52;
            border-bottom-left-radius: 4px
          }

          #view-virtualme .cc-vm-sections .vm-chat-foot {
            font-size: 11.5px;
            color: #777;
            text-align: center;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1.5px solid #262626
          }

          /* heads */
          #view-virtualme .cc-vm-sections .vm-head {
            text-align: center;
            max-width: 680px;
            margin: 0 auto 36px
          }

          #view-virtualme .cc-vm-sections .vm-block {
            padding: 64px 0 0
          }

          #view-virtualme .cc-vm-sections .vm-head h2 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: clamp(24px, 3vw, 32px);
            letter-spacing: -0.02em;
            color: #1a1a1a
          }

          #view-virtualme .cc-vm-sections .vm-head p {
            font-size: 16px;
            color: #6b6b6b;
            line-height: 1.6;
            margin-top: 12px
          }

          #view-virtualme .cc-vm-sections .vm-ic {
            width: 44px;
            height: 44px;
            border-radius: 0;
            background: #eef0fb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px
          }

          #view-virtualme .cc-vm-sections .vm-ic svg {
            width: 22px;
            height: 22px;
            stroke: #002671;
            fill: none
          }

          #view-virtualme .cc-vm-sections .vm-ic.dark {
            background: rgba(255, 255, 255, .08)
          }

          #view-virtualme .cc-vm-sections .vm-ic.dark svg {
            stroke: #fff
          }

          /* what is it */
          #view-virtualme .cc-vm-sections .vm-what {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
          }

          #view-virtualme .cc-vm-sections .vm-what-card {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 22px;
            transition: .2s
          }

          #view-virtualme .cc-vm-sections .vm-what-card:hover {
            border-color: #d6d6d1;
            transform: translateY(-2px);
            box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
          }

          #view-virtualme .cc-vm-sections .vm-what-card h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15.5px;
            color: #1a1a1a;
            margin-bottom: 7px
          }

          #view-virtualme .cc-vm-sections .vm-what-card p {
            font-size: 13.5px;
            color: #555;
            line-height: 1.55
          }

          /* bands */
          #view-virtualme .cc-vm-sections .vm-band {
            background: #0d0d0d;
            color: #fff;
            margin-top: 64px;
            padding: 64px 0
          }

          #view-virtualme .cc-vm-sections .vm-band .vm-head h2 {
            color: #fff
          }

          #view-virtualme .cc-vm-sections .vm-band .vm-head p {
            color: #b9b9b9
          }

          #view-virtualme .cc-vm-sections .vm-band .vm-eyebrow {
            color: #777
          }

          #view-virtualme .cc-vm-sections .vm-band.light {
            background: #f4f4f2;
            color: #1a1a1a;
            border-top: 1.5px solid #e6e6e3;
            border-bottom: 1.5px solid #e6e6e3
          }

          #view-virtualme .cc-vm-sections .vm-band.light .vm-head h2,
          #view-virtualme .cc-vm-sections .vm-band.light .vm-setup-text h2 {
            color: #1a1a1a
          }

          #view-virtualme .cc-vm-sections .vm-band.light .vm-eyebrow {
            color: #a8a8a3
          }

          /* avatar types */
          #view-virtualme .cc-vm-sections .vm-types {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
          }

          #view-virtualme .cc-vm-sections .vm-type {
            background: #161616;
            border: 1.5px solid #262626;
            border-radius: 0;
            padding: 28px;
            position: relative
          }

          #view-virtualme .cc-vm-sections .vm-type-tag {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .1em;
            color: #1f9d57;
            background: rgba(31, 157, 87, .12);
            padding: 5px 11px;
            border-radius: 0;
            margin-bottom: 16px
          }

          #view-virtualme .cc-vm-sections .vm-type-tag.future {
            color: #e0a23a;
            background: rgba(224, 162, 58, .12)
          }

          #view-virtualme .cc-vm-sections .vm-type h3 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            margin-bottom: 8px
          }

          #view-virtualme .cc-vm-sections .vm-type p {
            font-size: 14.5px;
            color: #b0b0b0;
            line-height: 1.55;
            margin-bottom: 16px
          }

          #view-virtualme .cc-vm-sections .vm-ticks {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px
          }

          #view-virtualme .cc-vm-sections .vm-ticks li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 14px;
            color: #cfcfcf
          }

          #view-virtualme .cc-vm-sections .vm-ticks li svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            fill: none;
            margin-top: 1px
          }

          /* build steps */
          #view-virtualme .cc-vm-sections .vm-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
          }

          #view-virtualme .cc-vm-sections .vm-step {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 22px;
            position: relative;
            transition: .2s
          }

          #view-virtualme .cc-vm-sections .vm-step:hover {
            border-color: #d6d6d1;
            transform: translateY(-2px);
            box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
          }

          #view-virtualme .cc-vm-sections .vm-step-n {
            position: absolute;
            top: 18px;
            right: 20px;
            font-family: 'Inter';
            font-weight: 800;
            font-size: 30px;
            color: #eef0fb
          }

          #view-virtualme .cc-vm-sections .vm-step h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15.5px;
            color: #1a1a1a;
            margin-bottom: 7px
          }

          #view-virtualme .cc-vm-sections .vm-step p {
            font-size: 13.5px;
            color: #555;
            line-height: 1.55
          }

          /* setup */
          #view-virtualme .cc-vm-sections .vm-setup-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center
          }

          #view-virtualme .cc-vm-sections .vm-setup-text p {
            font-size: 16px;
            color: #6b6b6b;
            line-height: 1.6;
            margin: 14px 0 20px
          }

          #view-virtualme .cc-vm-sections .vm-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 9px
          }

          #view-virtualme .cc-vm-sections .vm-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 7px 13px;
            font-size: 12.5px;
            font-weight: 600;
            color: #444
          }

          #view-virtualme .cc-vm-sections .vm-chip svg {
            width: 14px;
            height: 14px;
            fill: none
          }

          #view-virtualme .cc-vm-sections .vm-setup-panel {
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 8px 22px
          }

          #view-virtualme .cc-vm-sections .vm-panel-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0ee
          }

          #view-virtualme .cc-vm-sections .vm-panel-row:last-child {
            border-bottom: none
          }

          #view-virtualme .cc-vm-sections .vm-panel-row label {
            font-size: 12.5px;
            font-weight: 700;
            color: #8a8a86;
            letter-spacing: .04em
          }

          #view-virtualme .cc-vm-sections .vm-field {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            text-align: right
          }

          #view-virtualme .cc-vm-sections .vm-field.locked {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #1f9d57
          }

          #view-virtualme .cc-vm-sections .vm-field.locked svg {
            width: 15px;
            height: 15px;
            stroke: #1f9d57;
            fill: none
          }

          #view-virtualme .cc-vm-sections .vm-toggle {
            display: inline-flex;
            background: #f4f4f2;
            border-radius: 0;
            padding: 3px
          }

          #view-virtualme .cc-vm-sections .vm-toggle-opt {
            font-size: 12.5px;
            font-weight: 600;
            color: #8a8a86;
            padding: 6px 13px;
            border-radius: 30px
          }

          #view-virtualme .cc-vm-sections .vm-toggle-opt.active {
            background: #002671;
            color: #fff
          }

          /* who */
          #view-virtualme .cc-vm-sections .vm-who {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
          }

          #view-virtualme .cc-vm-sections .vm-who-card {
            background: #161616;
            border: 1.5px solid #262626;
            border-radius: 0;
            padding: 24px;
            transition: .2s
          }

          #view-virtualme .cc-vm-sections .vm-who-card:hover {
            border-color: #3a3a3a;
            background: #1b1b1b
          }

          #view-virtualme .cc-vm-sections .vm-who-card h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            color: #fff;
            margin-bottom: 7px
          }

          #view-virtualme .cc-vm-sections .vm-who-card p {
            font-size: 13.5px;
            color: #b0b0b0;
            line-height: 1.55
          }

          /* insights */
          #view-virtualme .cc-vm-sections .vm-insights {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 40px;
            align-items: center;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 40px
          }

          #view-virtualme .cc-vm-sections .vm-insights-text h2 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: clamp(22px, 2.6vw, 28px);
            color: #1a1a1a;
            letter-spacing: -0.02em
          }

          #view-virtualme .cc-vm-sections .vm-insights-text p {
            font-size: 15px;
            color: #6b6b6b;
            line-height: 1.6;
            margin-top: 12px
          }

          #view-virtualme .cc-vm-sections .vm-insights-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px
          }

          #view-virtualme .cc-vm-sections .vm-stat {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 18px;
            text-align: center
          }

          #view-virtualme .cc-vm-sections .vm-stat .v {
            width: 42px;
            height: 42px;
            border-radius: 0;
            background: #eef0fb;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px
          }

          #view-virtualme .cc-vm-sections .vm-stat .v svg {
            width: 21px;
            height: 21px;
            stroke: #002671;
            fill: none
          }

          #view-virtualme .cc-vm-sections .vm-stat h4 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 13.5px;
            color: #1a1a1a;
            margin-bottom: 5px
          }

          #view-virtualme .cc-vm-sections .vm-stat p {
            font-size: 12px;
            color: #6b6b6b;
            line-height: 1.45
          }

          /* cta */
          #view-virtualme .cc-vm-sections .vm-cta {
            text-align: center;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 54px 30px;
            margin: 64px 0 80px;
            background: #f4f4f2
          }

          #view-virtualme .cc-vm-sections .vm-cta h2 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: clamp(24px, 3vw, 34px);
            color: #1a1a1a
          }

          #view-virtualme .cc-vm-sections .vm-cta p {
            font-size: 16px;
            color: #6b6b6b;
            margin-top: 12px;
            max-width: 54ch;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6
          }

          #view-virtualme .cc-vm-sections .vm-cta-btns {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 26px;
            flex-wrap: wrap
          }

          @media(max-width:1000px) {

            #view-virtualme .cc-vm-sections .vm-what,
            #view-virtualme .cc-vm-sections .vm-steps,
            #view-virtualme .cc-vm-sections .vm-who {
              grid-template-columns: repeat(2, 1fr)
            }
          }

          @media(max-width:900px) {

            #view-virtualme .cc-vm-sections .vm-hero-grid,
            #view-virtualme .cc-vm-sections .vm-setup-grid,
            #view-virtualme .cc-vm-sections .vm-insights {
              grid-template-columns: 1fr;
              gap: 30px
            }

            #view-virtualme .cc-vm-sections .vm-types {
              grid-template-columns: 1fr
            }

            #view-virtualme .cc-vm-sections .vm-insights-stats {
              grid-template-columns: repeat(3, 1fr)
            }
          }

          @media(max-width:560px) {

            #view-virtualme .cc-vm-sections .vm-what,
            #view-virtualme .cc-vm-sections .vm-steps,
            #view-virtualme .cc-vm-sections .vm-who {
              grid-template-columns: 1fr
            }

            #view-virtualme .cc-vm-sections .vm-insights-stats {
              grid-template-columns: 1fr
            }

            #view-virtualme .cc-vm-sections .wrap {
              padding: 0 20px
            }
          }

          /* ===== CLONE CONNECT (avatar directory) ===== */
          #view-virtualme {
            background: #fff;
            font-family: 'Inter', sans-serif;
            color: #1a1a1a
          }

          #view-virtualme .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 48px
          }

          #view-virtualme .cca-banner {
            width: 100%;
            background: #f4f4f2;
            border-bottom: 1.5px solid #e6e6e3
          }

          #view-virtualme .cca-banner-in {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            padding: 34px 0
          }

          #view-virtualme .cca-banner h1 {
            font-family: 'Inter';
            font-weight: 200;
            font-size: clamp(25px, 5vw, 25px);
            letter-spacing: -0.02em
          }

          #view-virtualme .cca-banner p {
            color: #6b6b6b;
            font-size: 15px;
            margin-top: 0;
            max-width: 560px
          }

          #view-virtualme .cca-search {
            position: relative;
            min-width: 300px
          }

          #view-virtualme .cca-search svg {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 17px;
            height: 17px;
            stroke: #9a9a9a;
            fill: none
          }

          #view-virtualme .cca-search input {
            width: 100%;
            border: 1.5px solid #e6e6e3;
            background: #fff;
            border-radius: 0;
            padding: 12px 18px 12px 42px;
            font-size: 14px;
            font-family: inherit
          }

          #view-virtualme .cca-search input:focus {
            outline: none;
            border-color: #002671;
            box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
          }

          /* ===== Reels-format avatar hero ===== */
          #view-virtualme .cc-hero {
            background: radial-gradient(120% 120% at 12% 8%, rgba(40, 78, 180, .55) 0%, rgba(13, 16, 32, .6) 42%, rgba(8, 8, 10, 1) 70%), radial-gradient(90% 90% at 92% 100%, rgba(214, 180, 70, .32) 0%, rgba(120, 95, 30, 0) 48%), #08080a;
            color: #fff;
            border-bottom: 1.5px solid #1c1c1c
          }

          #view-virtualme .cc-hero-in {
            display: grid;
            grid-template-columns: 300px minmax(0, 560px);
            gap: 48px;
            align-items: center;
            justify-content: center;
            padding: 54px 0
          }

          /* 9:16 vertical reel */
          #view-virtualme .cc-reel {
            position: relative;
            width: 100%;
            max-width: 300px;
            aspect-ratio: 9/16;
            margin: 0 auto;
            border-radius: 0;
            overflow: hidden;
            background: #1a1a1a;
            box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8)
          }

          #view-virtualme .cc-reel-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px
          }

          #view-virtualme .cc-reel-connect {
            width: 100%;
            max-width: 300px;
            justify-content: center
          }

          #view-virtualme .cc-reel video {
            width: 150%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          #view-virtualme .cc-reel-grad {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .78) 100%);
            pointer-events: none
          }

          #view-virtualme .cc-reel-live {
            position: absolute;
            top: 14px;
            left: 14px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(0, 0, 0, .55);
            backdrop-filter: blur(6px);
            border-radius: 0;
            padding: 5px 12px;
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: .02em
          }

          #view-virtualme .cc-reel-live .dot {
            width: 7px;
            height: 7px;
            border-radius: 0;
            background: #1f9d57;
            box-shadow: 0 0 0 3px rgba(31, 157, 87, .3);
            animation: ccPulse 1.8s infinite
          }

          @keyframes ccPulse {

            0%,
            100% {
              opacity: 1
            }

            50% {
              opacity: .4
            }
          }

          #view-virtualme .cc-reel-cap {
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 16px
          }

          #view-virtualme .cc-reel-cap .nm {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px
          }

          #view-virtualme .cc-reel-cap .rl {
            font-size: 12px;
            color: #cfcfcf;
            margin-top: 2px
          }

          #view-virtualme .cc-reel-side {
            position: absolute;
            right: 12px;
            bottom: 84px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: center
          }

          #view-virtualme .cc-reel-side .ic {
            width: 38px;
            height: 38px;
            border-radius: 0;
            background: rgba(255, 255, 255, .12);
            backdrop-filter: blur(6px);
            display: inline-flex;
            align-items: center;
            justify-content: center
          }

          #view-virtualme .cc-reel-side .ic svg {
            width: 18px;
            height: 18px;
            stroke: #fff;
            fill: none;
            stroke-width: 2
          }

          /* hero text */
          #view-virtualme .cc-hero-eyebrow {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .16em;
            color: #8c8c8c;
            display: block;
            margin-bottom: 14px
          }

          #view-virtualme .cc-hero-text h1 {
            font-family: 'Inter';
            font-weight: 300;
            font-size: clamp(25px, 3.8vw, 25px);
            letter-spacing: -0.02em;
            line-height: 1.12
          }

          #view-virtualme .cc-hero-text h1 .grad {
            background: linear-gradient(90deg, #7d9bff, #c8b3ff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent
          }

          #view-virtualme .cc-role {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            font-size: 13.5px;
            font-weight: 600;
            color: #dcdcdc
          }

          #view-virtualme .cc-role .sep {
            width: 4px;
            height: 4px;
            border-radius: 0;
            background: #666
          }

          #view-virtualme .cc-tone {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 18px
          }

          #view-virtualme .cc-tone span {
            font-size: 12px;
            font-weight: 600;
            color: #cfcfcf;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 0;
            padding: 5px 12px
          }

          #view-virtualme .cc-bio {
            font-size: 15.5px;
            color: #b8b8b8;
            line-height: 1.65;
            margin-top: 20px;
            max-width: 52ch
          }

          #view-virtualme .cc-hero-btns {
            display: flex;
            gap: 12px;
            margin-top: 26px;
            flex-wrap: wrap
          }

          #view-virtualme .cc-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 13.5px;
            border-radius: 0;
            padding: 12px 24px;
            transition: .2s
          }

          #view-virtualme .cc-btn svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2
          }

          #view-virtualme .cc-btn-primary {
            background: #fff;
            color: #0d0d0d
          }

          #view-virtualme .cc-btn-primary:hover {
            background: #e8e8e8;
            transform: translateY(-1px)
          }

          #view-virtualme .cc-btn-ghost {
            background: transparent;
            border: 1.5px solid rgba(255, 255, 255, .3);
            color: #fff
          }

          #view-virtualme .cc-btn-ghost:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, .06)
          }

          @media(max-width:820px) {
            #view-virtualme .cc-hero-in {
              grid-template-columns: 1fr;
              gap: 34px;
              padding: 40px 0;
              text-align: center
            }

            #view-virtualme .cc-role,
            #view-virtualme .cc-tone,
            #view-virtualme .cc-hero-btns {
              justify-content: center
            }

            #view-virtualme .cc-bio {
              margin-left: auto;
              margin-right: auto
            }
          }

          /* ===== flip stage ===== */
          #view-virtualme .cc-stage {
            perspective: 2200px
          }

          #view-virtualme .cc-flip {
            position: relative;
            transform-style: preserve-3d;
            transition: transform .8s cubic-bezier(.7, .05, .2, 1)
          }

          #view-virtualme .cc-flip.flipped {
            transform: rotateY(180deg)
          }

          #view-virtualme .cc-face {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden
          }

          #view-virtualme .cc-front {
            position: relative
          }

          #view-virtualme .cc-back {
            position: absolute;
            inset: 0 0 auto 0;
            transform: rotateY(180deg);
            overflow: visible
          }

          /* search button on hero */
          #view-virtualme .cc-btn-search {
            background: linear-gradient(90deg, #3a63d8, #7d9bff);
            color: #fff
          }

          #view-virtualme .cc-btn-search:hover {
            filter: brightness(1.08);
            transform: translateY(-1px)
          }

          /* ===== TED-style back face ===== */
          #view-virtualme .ccs {
            background: #f4f4f2;
            min-height: 100%
          }

          #view-virtualme .ccs .wrap {
            padding: 34px 28px 70px
          }

          #view-virtualme .ccs-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 13.5px;
            color: #555;
            padding: 0;
            margin-bottom: 26px
          }

          #view-virtualme .ccs-back:hover {
            color: #0d0d0d
          }

          #view-virtualme .ccs-back svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2
          }

          #view-virtualme .ccs-title {
            font-family: 'Inter';
            font-weight: 200;
            font-size: clamp(25px, 3.6vw, 25px);
            letter-spacing: -0.02em;
            line-height: 1.12;
            text-align: center;
            color: #1a1a1a;
            max-width: 760px;
            margin: -4px auto 30px
          }

          #view-virtualme .ccs-title span {
            color: #6b6b6b;
            font-weight: 400
          }

          #view-virtualme .ccs-searchrow {
            display: flex;
            gap: 14px;
            max-width: 760px;
            margin: 0 auto;
            flex-wrap: wrap
          }

          #view-virtualme .ccs-search {
            position: relative;
            flex: 1;
            min-width: 240px
          }

          #view-virtualme .ccs-search svg {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            stroke: #9a9a9a;
            fill: none;
            stroke-width: 2
          }

          #view-virtualme .ccs-search input {
            width: 100%;
            border: 1.5px solid #d8d8d3;
            background: #fff;
            border-radius: 0;
            padding: 15px 18px 15px 46px;
            font-size: 15px;
            font-family: inherit
          }

          #view-virtualme .ccs-search input:focus {
            outline: none;
            border-color: #002671;
            box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
          }

          #view-virtualme .ccs-sort {
            position: relative
          }

          #view-virtualme .ccs-sort select {
            -webkit-appearance: none;
            border: 1.5px solid #d8d8d3;
            background: #fff;
            border-radius: 0;
            padding: 15px 42px 15px 18px;
            font-size: 12px;
            font-family: inherit;
            font-weight: 600;
            color: #333;
            cursor: pointer
          }

          #view-virtualme .ccs-sort select:focus {
            outline: none;
            border-color: #002671
          }

          #view-virtualme .ccs-sort svg {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            stroke: #6b6b6b;
            fill: none;
            stroke-width: 2;
            pointer-events: none
          }

          #view-virtualme .ccs-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            max-width: 820px;
            margin: 28px auto 0
          }

          #view-virtualme .ccs-pill {
            border: 1.5px solid #d8d8d3;
            background: #fff;
            border-radius: 0;
            padding: 10px 22px;
            font-size: 12px;
            font-weight: 200;
            color: #1a1a1a;
            cursor: pointer;
            transition: .18s
          }

          #view-virtualme .ccs-pill:hover {
            border-color: #1a1a1a
          }

          #view-virtualme .ccs-pill.active {
            background: #0d0d0d;
            color: #fff;
            border-color: #0d0d0d
          }

          #view-virtualme .ccs-seeall {
            text-align: center;
            margin-top: 18px
          }

          #view-virtualme .ccs-seeall button {
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 14px;
            color: #1a1a1a;
            text-decoration: underline;
            text-underline-offset: 5px
          }

          #view-virtualme .ccs-sec {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 24px;
            letter-spacing: -0.02em;
            color: #1a1a1a;
            margin: 48px 0 4px
          }

          #view-virtualme .ccs-count {
            font-size: 13px;
            color: #6b6b6b;
            margin-bottom: 20px
          }

          /* reels card grid */
          #view-virtualme .ccs-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px
          }

          #view-virtualme .ccs-rcard {
            cursor: pointer;
            display: grid;
            grid-template-columns: 180px 1fr;
            gap: 0;
            background: #fff;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            transition: transform .22s, box-shadow .22s, border-color .22s
          }

          #view-virtualme .ccs-rcard:hover {
            transform: translateY(-3px);
            box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .32);
            border-color: #d6d6d1
          }

          #view-virtualme .ccs-reel {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 240px;
            overflow: hidden;
            background: linear-gradient(150deg, #1a2b52, #0d0d0d)
          }

          #view-virtualme .ccs-reel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          #view-virtualme .ccs-reel-grad {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .82) 100%)
          }

          #view-virtualme .ccs-reel-live {
            position: absolute;
            top: 12px;
            left: 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(0, 0, 0, .5);
            backdrop-filter: blur(5px);
            border-radius: 0;
            padding: 4px 10px;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            color: #fff
          }

          #view-virtualme .ccs-reel-live .d {
            width: 6px;
            height: 6px;
            border-radius: 0;
            background: #1f9d57;
            box-shadow: 0 0 0 3px rgba(31, 157, 87, .3)
          }

          #view-virtualme .ccs-reel-cap {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 14px;
            color: #fff
          }

          #view-virtualme .ccs-reel-cap .al {
            font-size: 12.5px;
            font-style: italic;
            color: #eaeaea;
            line-height: 1.3
          }

          #view-virtualme .ccs-rcard-info {
            padding: 18px 20px;
            display: flex;
            flex-direction: column
          }

          #view-virtualme .ccs-rcard-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px
          }

          #view-virtualme .ccs-rcard-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 17px;
            color: #1a1a1a;
            line-height: 1.2;
            margin: 0
          }

          #view-virtualme .ccs-rcard-desig {
            font-size: 12.5px;
            color: #6b6b6b;
            line-height: 1.4;
            margin-top: 3px
          }

          #view-virtualme .ccs-rcard-rating {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #fff7e6;
            color: #9a6b00;
            border-radius: 0;
            padding: 4px 10px;
            font-size: 12px;
            font-weight: 700
          }

          #view-virtualme .ccs-rcard-rating svg {
            width: 12px;
            height: 12px;
            fill: #f5b50a;
            stroke: none
          }

          #view-virtualme .ccs-rcard-rows {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 14px
          }

          #view-virtualme .ccs-rcard-row {
            display: grid;
            grid-template-columns: 104px 1fr;
            gap: 10px;
            align-items: start
          }

          #view-virtualme .ccs-rcard-row .lbl {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #a8a8a3;
            padding-top: 1px
          }

          #view-virtualme .ccs-rcard-row .val {
            font-size: 12.5px;
            color: #333;
            line-height: 1.4;
            font-weight: 500
          }

          #view-virtualme .ccs-rcard-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 16px
          }

          #view-virtualme .ccs-rcard-topics span {
            font-size: 11px;
            font-weight: 600;
            color: #33415c;
            background: #eef0fb;
            border-radius: 0;
            padding: 3px 10px
          }

          #view-virtualme .ccs-rcard-foot {
            display: flex;
            gap: 9px;
            margin-top: auto
          }

          #view-virtualme .ccs-rcard-talk {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            background: #002671;
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 10px 14px;
            font-family: 'Inter';
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: .15s
          }

          #view-virtualme .ccs-rcard-talk:hover {
            background: #001c54
          }

          #view-virtualme .ccs-rcard-talk svg {
            width: 15px;
            height: 15px
          }

          #view-virtualme .ccs-rcard-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #1a1a1a;
            border: 1.5px solid #d8d8d3;
            border-radius: 0;
            padding: 10px 16px;
            font-family: 'Inter';
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: .15s
          }

          #view-virtualme .ccs-rcard-secondary:hover {
            border-color: #1a1a1a
          }

          #view-virtualme .ccs-more-wrap {
            text-align: center;
            margin-top: 36px
          }

          #view-virtualme .ccs-more {
            background: #fff;
            border: 1.5px solid #1a1a1a;
            border-radius: 0;
            padding: 12px 28px;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: .2s
          }

          #view-virtualme .ccs-more:hover {
            background: #1a1a1a;
            color: #fff
          }

          #view-virtualme .ccs-more.is-done {
            display: none
          }

          #view-virtualme .ccs-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 50px 0;
            color: #6b6b6b
          }

          #view-virtualme .ccs-empty h3 {
            font-family: 'Inter';
            font-size: 18px;
            color: #1a1a1a;
            margin-bottom: 6px
          }

          @media(max-width:1100px) {
            #view-virtualme .ccs-grid {
              grid-template-columns: 1fr
            }
          }

          @media(max-width:560px) {
            #view-virtualme .ccs-rcard {
              grid-template-columns: 1fr
            }

            #view-virtualme .ccs-reel {
              min-height: 200px;
              aspect-ratio: 16/10
            }
          }

          /* layout */
          #view-virtualme .cca-layout {
            display: grid;
            grid-template-columns: 268px 1fr;
            gap: 34px;
            align-items: start;
            padding: 24px 0 70px
          }

          #view-virtualme .cca-sidebar {
            position: sticky;
            top: 18px
          }

          #view-virtualme .cca-side-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px
          }

          #view-virtualme .cca-side-head h3 {
            font-size: 15px;
            font-weight: 700;
            font-family: 'Inter'
          }

          #view-virtualme .cca-clear {
            background: none;
            border: none;
            color: #6b6b6b;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: underline
          }

          #view-virtualme .cca-clear:hover {
            color: #1a1a1a
          }

          #view-virtualme .cca-applied {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin: 10px 0 4px
          }

          #view-virtualme .cca-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f4f4f2;
            border-radius: 0;
            padding: 5px 7px 5px 11px;
            font-size: 12px;
            font-weight: 600;
            color: #333
          }

          #view-virtualme .cca-chip button {
            background: none;
            border: none;
            cursor: pointer;
            display: inline-flex;
            color: #888;
            padding: 1px;
            border-radius: 50%
          }

          #view-virtualme .cca-chip button:hover {
            color: #000
          }

          #view-virtualme .cca-chip button svg {
            width: 12px;
            height: 12px;
            stroke: currentColor;
            stroke-width: 2.4;
            fill: none
          }

          #view-virtualme .ccafg {
            border-top: 1.5px solid #e6e6e3;
            padding: 16px 0 14px
          }

          #view-virtualme .ccafg:first-of-type {
            border-top: none
          }

          #view-virtualme .ccafg .ccaft {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 2px
          }

          #view-virtualme .ccaft .chev {
            width: 14px;
            height: 14px;
            stroke: #9a9a9a;
            fill: none;
            transition: transform .2s
          }

          #view-virtualme .ccafg.collapsed .chev {
            transform: rotate(-90deg)
          }

          #view-virtualme .ccafb {
            display: flex;
            flex-direction: column;
            gap: 9px;
            padding-top: 11px;
            overflow: hidden;
            transition: max-height .25s;
            max-height: 600px
          }

          #view-virtualme .ccafg.collapsed .ccafb {
            max-height: 0;
            padding-top: 0
          }

          #view-virtualme .cca-check {
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            font-size: 13px;
            color: #454545
          }

          #view-virtualme .cca-check:hover {
            color: #1a1a1a
          }

          #view-virtualme .cca-check input {
            display: none
          }

          #view-virtualme .cca-cbox {
            width: 17px;
            height: 17px;
            border: 1.6px solid #cfcfca;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: .15s
          }

          #view-virtualme .cca-cbox svg {
            width: 11px;
            height: 11px;
            stroke: #fff;
            stroke-width: 3.2;
            fill: none;
            opacity: 0
          }

          #view-virtualme .cca-check input:checked+.cca-cbox {
            background: #002671;
            border-color: #002671
          }

          #view-virtualme .cca-check input:checked+.cca-cbox svg {
            opacity: 1
          }

          #view-virtualme .cca-check .cnt {
            margin-left: auto;
            font-size: 11px;
            font-weight: 600;
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            padding: 1px 8px;
            color: #8a8a86
          }

          #view-virtualme .cca-resbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            padding-top: 8px
          }

          #view-virtualme .cca-filter-toggle {
            display: none;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1.5px solid #1a1a1a;
            border-radius: 0;
            padding: 10px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer
          }

          #view-virtualme .cca-filter-toggle svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            fill: none
          }

          #view-virtualme .cca-count {
            margin-left: auto;
            text-align: right;
            font-size: 14px;
            color: #6b6b6b
          }

          #view-virtualme .cca-count b {
            color: #1a1a1a
          }

          #view-virtualme .cca-scrim {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            z-index: 55
          }

          #view-virtualme .cca-scrim.show {
            display: block
          }

          /* grid + cards */
          #view-virtualme .cca-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 4px 0 36px
          }

          #view-virtualme .cca-card {
            border: 1.5px solid #e6e6e3;
            border-radius: 0;
            overflow: hidden;
            background: #fff;
            display: flex;
            flex-direction: column;
            transition: transform .25s, box-shadow .25s, border-color .25s
          }

          #view-virtualme .cca-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .22);
            border-color: #d6d6d1
          }

          #view-virtualme .cca-card-top {
            position: relative;
            background: linear-gradient(120deg, #0d0d0d, #1c2b52);
            padding: 18px 20px;
            color: #fff
          }

          #view-virtualme .cca-live {
            position: absolute;
            top: 14px;
            right: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            background: rgba(31, 157, 87, .18);
            color: #5fe0a0;
            border-radius: 0;
            padding: 4px 10px
          }

          #view-virtualme .cca-live::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 0;
            background: #2fe08a;
            box-shadow: 0 0 0 3px rgba(47, 224, 138, .25)
          }

          #view-virtualme .cca-av {
            width: 62px;
            height: 62px;
            border-radius: 0;
            border: 3px solid rgba(255, 255, 255, .2);
            overflow: hidden;
            background: #002671;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 18px;
            color: #fff
          }

          #view-virtualme .cca-av img {
            width: 100%;
            height: 100%;
            object-fit: cover
          }

          #view-virtualme .cca-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16.5px;
            margin-top: 12px
          }

          #view-virtualme .cca-alias {
            font-size: 12.5px;
            color: #a9b6d6;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px
          }

          #view-virtualme .cca-alias svg {
            width: 13px;
            height: 13px;
            stroke: #8b7df0;
            fill: none
          }

          #view-virtualme .cca-desig {
            font-size: 12.5px;
            color: #c9d2e8;
            margin-top: 8px
          }

          #view-virtualme .cca-body {
            padding: 16px 20px 20px;
            display: flex;
            flex-direction: column;
            flex: 1
          }

          #view-virtualme .cca-avail-l {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .08em;
            color: #a8a8a3;
            text-transform: uppercase;
            margin-bottom: 8px
          }

          #view-virtualme .cca-avail {
            display: flex;
            flex-wrap: wrap;
            gap: 7px
          }

          #view-virtualme .cca-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 0;
            padding: 5px 11px;
            background: #eef0fb;
            color: #3a4ba0
          }

          #view-virtualme .cca-pill svg {
            width: 13px;
            height: 13px;
            stroke: currentColor;
            fill: none
          }

          #view-virtualme .cca-meta {
            display: flex;
            gap: 18px;
            margin: 16px 0;
            padding: 14px 0;
            border-top: 1px solid #f0f0ee;
            border-bottom: 1px solid #f0f0ee
          }

          #view-virtualme .cca-meta .m {
            font-size: 12px;
            color: #8a8a86
          }

          #view-virtualme .cca-meta .m b {
            display: block;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 16px;
            color: #002671
          }

          #view-virtualme .cca-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 16px
          }

          #view-virtualme .cca-topic {
            font-size: 11.5px;
            font-weight: 600;
            color: #6b6b6b;
            background: #f4f4f2;
            border-radius: 0;
            padding: 4px 10px
          }

          #view-virtualme .cca-actions {
            display: flex;
            gap: 8px;
            margin-top: auto
          }

          #view-virtualme .cca-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 0;
            padding: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: .15s;
            border: 1.5px solid #e6e6e3;
            background: #fff;
            color: #1a1a1a
          }

          #view-virtualme .cca-btn:hover {
            border-color: #1a1a1a
          }

          #view-virtualme .cca-btn.primary {
            background: #002671;
            border-color: #002671;
            color: #fff
          }

          #view-virtualme .cca-btn.primary:hover {
            background: #001c54
          }

          #view-virtualme .cca-btn svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            fill: none
          }

          #view-virtualme .cca-more-wrap {
            display: flex;
            justify-content: center;
            padding: 6px 0
          }

          #view-virtualme .cca-more {
            cursor: pointer;
            background: #fff;
            border: 1.5px solid #1a1a1a;
            border-radius: 0;
            padding: 12px 28px;
            font-size: 13.5px;
            font-weight: 600;
            color: #1a1a1a;
            transition: .2s
          }

          #view-virtualme .cca-more:hover {
            background: #1a1a1a;
            color: #fff
          }

          #view-virtualme .cca-more.is-done {
            display: none
          }

          #view-virtualme .cca-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 60px 20px;
            color: #6b6b6b
          }

          #view-virtualme .cca-empty h3 {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 18px;
            color: #1a1a1a;
            margin-bottom: 8px
          }

          @media(max-width:1100px) {
            #view-virtualme .cca-grid {
              grid-template-columns: repeat(2, 1fr)
            }
          }

          @media(max-width:900px) {
            #view-virtualme .cca-layout {
              grid-template-columns: 1fr
            }

            #view-virtualme .cca-sidebar {
              position: fixed;
              top: 0;
              left: 0;
              height: 100%;
              width: 300px;
              max-width: 86vw;
              background: #fff;
              z-index: 60;
              padding: 24px;
              overflow-y: auto;
              transform: translateX(-100%);
              transition: transform .28s;
              box-shadow: 0 0 50px rgba(0, 0, 0, .18)
            }

            #view-virtualme .cca-sidebar.open {
              transform: translateX(0)
            }

            #view-virtualme .cca-filter-toggle {
              display: inline-flex
            }

            #view-virtualme .cca-banner-in {
              flex-direction: column;
              align-items: flex-start
            }

            #view-virtualme .cca-search {
              width: 100%
            }
          }

          @media(max-width:560px) {
            #view-virtualme .wrap {
              padding: 0 20px
            }

            #view-virtualme .cca-grid {
              grid-template-columns: 1fr
            }
          }







          .pvx {
            position: relative;
            background: #fff
          }

          .pvx-head {
            flex: 0 0 40%;
            max-width: 420px;
            text-align: left;
            padding: 0 10px;
            transition: opacity .4s ease
          }

          .pvx-h-eyebrow {
            display: inline-block;
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: .04em;
            color: var(--muted);
            position: relative;
            padding-left: 18px;
            margin-bottom: 14px
          }

          .pvx-h-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 10px;
            height: 2px;
            background: var(--teal);
            transform: translateY(-50%)
          }

          .pvx-h-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 3.6vw, 46px);
            line-height: 1.08;
            letter-spacing: -.025em;
            margin: 4px 0 0;
            color: var(--navy)
          }

          .pvx-h-accent {
            color: #9aa3ad;
            font-weight: 600
          }

          .pvx-h-lead {
            max-width: 420px;
            margin: 18px 0 0;
            font-size: 17px;
            font-weight: 500;
            line-height: 1.6;
            color: var(--muted)
          }

          .pvx-track {
            height: 180vh
          }

          /* scroll distance for the expand */
          .pvx-stage {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 48px;
            padding: 0 126px;
            overflow: hidden
          }

          /* ---- flowing colored waves behind video card + heading ---- */
          .pvx-waves {
            position: absolute;
            inset: -8% -6%;
            z-index: 0;
            pointer-events: none;
            will-change: transform;
            transition: transform 1.1s cubic-bezier(.22, 1, .36, 1)
          }

          .pvx-waves svg {
            width: 100%;
            height: 100%;
            display: block;
            overflow: visible
          }

          .pvx-wave {
            fill: none;
            stroke-linecap: round
          }

          .pvx-wave.w1 {
            stroke: var(--teal);
            stroke-width: 34;
            opacity: .8
          }

          @media(prefers-reduced-motion:reduce) {

            .pvx-waves,
            .pvx-wave {
              transition: none
            }
          }

          .pvx-head {
            flex: 0 0 38%;
            max-width: 430px;
            text-align: left;
            padding: 0 4px;
            transition: opacity .35s ease;
            position: relative;
            z-index: 1
          }

          .pvx-frame {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 62vh;
            left: 40px;
            width: 52%;
            overflow: hidden;
            background: #000;
            will-change: height, left, width;
            z-index: 2
          }

          .pvx-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            transform: scale(1.35);
            transform-origin: center center
          }

          .pvx-overlay {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 2;
            padding: 34px 40px;
            color: #fff;
            background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent);
            width: 100%;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .6s, transform .6s
          }

          .pvx.revealed .pvx-overlay {
            opacity: 1;
            transform: none
          }

          .pvx-eyebrow {
            display: inline-block;
            color: #fff;
            opacity: .85;
            margin-bottom: 8px
          }

          .pvx-title {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            letter-spacing: -.015em;
            line-height: 1.05;
            font-size: clamp(22px, 3vw, 40px);
            margin: 0;
            color: #fff
          }

          .pvx-play {
            position: absolute;
            top: 18px;
            right: 18px;
            z-index: 3;
            width: 46px;
            height: 46px;
            border: 0;
            cursor: pointer;
            background: rgba(0, 0, 0, .45);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            transition: background .2s
          }

          .pvx-play:hover {
            background: rgba(0, 0, 0, .7)
          }

          .pvx-play svg {
            width: 18px;
            height: 18px;
            fill: #fff
          }

          .pvx-play .pvx-ic-play {
            display: none
          }

          .pvx-play.paused .pvx-ic-pause {
            display: none
          }

          .pvx-play.paused .pvx-ic-play {
            display: block
          }

          @media(max-width:860px) {
            .pvx-track {
              height: auto
            }

            .pvx-stage {
              position: static;
              height: auto;
              flex-direction: column;
              align-items: stretch;
              gap: 20px;
              padding: 48px 22px
            }

            .pvx-head {
              flex: none;
              max-width: none;
              opacity: 1 !important
            }

            .pvx-frame {
              position: static;
              top: auto !important;
              right: auto !important;
              width: 100% !important;
              height: 54vh !important
            }

            .pvx-overlay {
              padding: 22px 22px
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .pvx-track {
              height: auto
            }

            .pvx-stage {
              position: static;
              height: auto;
              flex-direction: column;
              align-items: stretch;
              gap: 24px;
              padding: 48px 40px
            }

            .pvx-head {
              flex: none;
              max-width: none;
              opacity: 1 !important
            }

            .pvx-frame {
              position: static;
              top: auto !important;
              right: auto !important;
              width: 100% !important;
              height: 60vh !important
            }
          }




          /* ===== AFTERNOW-STYLE HOME SECTIONS ===== */

          .afn {
            --afn-ink: #0a0a0a;
            --afn-paper: #fff;
            --afn-soft: #f2f2f0;
            --afn-line: #e3e3df;
            --afn-muted: #6b6b66;
            --afn-teal: #0FB5AE
          }

          .afn .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          .afn-mono {
            font-family: 'SFMono-Regular', ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace;
            text-transform: uppercase;
            letter-spacing: .14em;
            font-size: 12px;
            color: var(--afn-ink)
          }

          .afn-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            letter-spacing: -.02em;
            line-height: .98;
            font-size: clamp(40px, 7vw, 100px);
            margin: 0;
            color: var(--afn-ink)
          }

          .afn-h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            letter-spacing: -.015em;
            line-height: 1.04;
            font-size: clamp(28px, 4vw, 50px);
            margin: 0;
            color: var(--afn-ink)
          }

          .afn-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1.5px solid var(--afn-ink);
            background: var(--afn-ink);
            color: #fff;
            padding: 13px 22px;
            border-radius: 0;
            cursor: pointer;
            font-family: 'SFMono-Regular', ui-monospace, monospace;
            text-transform: uppercase;
            letter-spacing: .12em;
            font-size: 12px;
            transition: .2s;
            text-decoration: none
          }

          .afn-btn:hover {
            background: #fff;
            color: var(--afn-ink)
          }

          .afn-btn .ar,
          .afn-link .ar {
            transition: transform .2s
          }

          .afn-btn:hover .ar,
          .afn-link:hover .ar {
            transform: translateX(4px)
          }

          .afn-link {
            font-family: 'SFMono-Regular', ui-monospace, monospace;
            text-transform: uppercase;
            letter-spacing: .12em;
            font-size: 12px;
            color: var(--afn-ink);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer
          }

          .afn-hero {
            padding: 34px 0 50px;
            background: var(--afn-paper)
          }

          .afn-hero-stage {
            height: min(42vw, 520px);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 6px 0 34px
          }

          .afn-tile {
            width: min(48%, 560px);
            aspect-ratio: 16/10;
            position: relative;
            overflow: hidden;
            display: none
          }

          .afn-tile.on {
            display: block;
            animation: afntilein .6s cubic-bezier(.22, 1, .36, 1)
          }

          @keyframes afntilein {
            from {
              opacity: 0;
              transform: scale(.97)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          .afn-tile .lbl {
            position: absolute;
            left: 14px;
            bottom: 12px
          }

          .afn-stmt {
            padding: 64px 0 70px;
            border-top: 1px solid var(--afn-line);
            background: var(--afn-paper)
          }

          .afn-stmt .row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 30px;
            align-items: start
          }

          .afn-stmt p {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            letter-spacing: -.01em;
            line-height: 1.16;
            font-size: clamp(24px, 3.2vw, 40px);
            margin: 0;
            color: #1b1464
          }

          .afn-work {
            padding: 18px 0 70px;
            background: var(--afn-paper)
          }

          .afn-headrow {
            display: none;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 26px
          }

          .afn-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px
          }

          .afn-card {
            display: block;
            text-decoration: none;
            color: inherit;
            cursor: pointer
          }

          .afn-card .thumb {
            aspect-ratio: 4/3;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
          }

          .afn-card .thumb .logo {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 30px;
            letter-spacing: -.02em
          }

          .afn-card .thumb::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0);
            transition: .25s
          }

          .afn-card:hover .thumb::after {
            background: rgba(0, 0, 0, .06)
          }

          .afn-card .nm {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 18px;
            margin: 14px 2px 6px;
            color: var(--afn-ink)
          }

          .afn-card .ds {
            color: var(--afn-muted);
            font-size: 14px;
            line-height: 1.5;
            margin: 0 2px 12px;
            max-width: 34ch
          }

          .afn-card .go {
            padding: 0 2px
          }

          .afn-cap {
            padding: 0px 0 64px;
            background: var(--afn-paper)
          }

          .afn-capgrid {
            display: flex;
            border-top: 1px solid var(--afn-line);
            border-bottom: 1px solid var(--afn-line)
          }

          .afn-col {
            flex: 1 1 0;
            min-width: 0;
            border-right: 1px solid var(--afn-line);
            padding: 30px 24px 26px;
            position: relative;
            transition: flex .45s cubic-bezier(.22, 1, .36, 1), background .3s;
            min-height: 320px
          }

          .afn-col:last-child {
            border-right: 0
          }

          .afn-col h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 22px;
            letter-spacing: -.01em;
            margin: 0 0 18px;
            color: var(--afn-ink)
          }

          .afn-col .body {
            color: var(--afn-muted);
            font-size: 14px;
            line-height: 1.58;
            max-width: 34ch;
            transition: opacity .35s
          }

          .afn-col .more {
            position: absolute;
            left: 24px;
            bottom: 24px;
            opacity: 0;
            transition: opacity .3s
          }

          .afn-capgrid:hover .afn-col {
            flex: .6 1 0
          }

          .afn-capgrid .afn-col:hover {
            flex: 2.4 1 0;
            background: var(--afn-soft)
          }

          .afn-capgrid .afn-col:hover .more {
            opacity: 1
          }

          .afn-quote {
            position: relative;
            padding: 84px 0 48px;
            border-top: 1px solid var(--afn-line);
            background: var(--afn-soft)
          }

          .afn-quote>.wrap {
            display: flex;
            flex-direction: column
          }

          .afn-quote-card {
            order: 2;
            position: relative;
            max-width: 100%;
            padding: 0 0 0 26px;
            border-left: 3px solid var(--afn-teal);
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1)
          }

          .afn-quote.in .afn-quote-card {
            opacity: 1;
            transform: none
          }

          .afn-quote-card::before {
            content: '\201C';
            position: absolute;
            top: -40px;
            left: 14px;
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 80px;
            line-height: 1;
            color: var(--afn-teal);
            opacity: .25
          }

          .afn-quote blockquote {
            position: relative;
            font-family: 'Inter', sans-serif;
            margin: 0;
            font-weight: 400;
            letter-spacing: -.01em;
            line-height: 1.22;
            font-size: clamp(22px, 3vw, 38px);
            max-width: 100%;
            color: var(--afn-ink)
          }

          .afn-quote .by {
            margin-top: 26px;
            display: flex;
            align-items: center;
            gap: 12px;
          }

          .afn-quote .by img {
            width: 42px;
            height: 42px;
            object-fit: cover;
            border-radius: 50%
          }

          .afn-quote .by .n {
            font-weight: 700;
            font-size: 14px;
            color: var(--afn-ink)
          }

          .afn-quote .by .r {
            color: var(--afn-muted);
            font-size: 13px
          }

          .afn-quote-clients {
            order: 1;
            margin-bottom: 60px;
            padding-bottom: 38px;
            border-bottom: 1px solid var(--afn-line)
          }

          .afn-quote-clients>.afn-mono {
            display: block;
            margin-bottom: 22px;
            color: var(--afn-muted)
          }

          @media(max-width:880px) {
            .afn-quote {
              padding: 56px 0 40px
            }

            .afn-quote-card::before {
              font-size: 60px;
              top: -30px
            }

            .afn-quote-clients {
              margin-bottom: 44px;
              padding-bottom: 28px
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .afn-quote-card {
              opacity: 1 !important;
              transform: none !important;
              transition: none !important
            }
          }

          .afn-clients {
            padding: 8px 0 64px;
            background: var(--afn-soft)
          }

          .afn-clients .row {
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 30px;
            align-items: center
          }

          .afn-marks {
            display: flex;
            flex-wrap: wrap;
            gap: 34px 50px;
            align-items: center
          }

          .afn-marks span {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 20px;
            color: #111;
            opacity: .5;
            letter-spacing: -.01em
          }

          .afn-journal {
            padding: 18px 0 76px;
            border-top: 1px solid var(--afn-line);
            background: var(--afn-paper)
          }

          .afn-journal.hm-news {
            border-top: none
          }

          .afn-jhead {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 34px 0 26px;
            gap: 24px
          }

          .afn-jgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px
          }

          .afn-jcard {
            text-decoration: none;
            color: inherit;
            display: block;
            cursor: pointer
          }

          .afn-jcard .img {
            aspect-ratio: 5/4;
            overflow: hidden
          }

          .afn-jcard h4 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 17px;
            line-height: 1.3;
            margin: 14px 0 6px;
            color: var(--afn-ink)
          }

          .afn-cta {
            color: #fff;
            padding: 0;
            margin-bottom: -3px;
            min-height: 100vh;
            display: flex;
            align-items: center
          }

          .afn-cta>.wrap {
            width: 100%
          }

          .afn-cta h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            letter-spacing: -.02em;
            font-size: clamp(34px, 5vw, 50px);
            line-height: 1.20;
            margin: 20px 0 0;
            color: #fff
          }

          .afn-cta .sub {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 30px;
            margin-top: 30px
          }

          .afn-cta .word {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            letter-spacing: -.02em;
            line-height: .8;
            font-size: clamp(60px, 16vw, 220px);
            margin: 18px 0 0;
            color: #fff;
            overflow: hidden
          }

          .afn-cta .afn-btn {
            border-color: #fff;
            background: #fff;
            color: #0a0a0a
          }

          .afn-cta .afn-btn:hover {
            background: transparent;
            color: #fff
          }

          /* tagline + stat row */
          .afn-cta-facts {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 14px 40px;
            margin-top: 26px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .7s, transform .7s
          }

          .afn-cta.in .afn-cta-facts {
            opacity: 1;
            transform: none;
            transition-delay: .62s
          }

          .afn-cta-tag {
            color: #9fb2c9;
            opacity: .9
          }

          .afn-cta-stat {
            color: #cfd8e6;
            font-size: 15px
          }

          .afn-cta-stat b {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 26px;
            color: #fff;
            letter-spacing: -.01em;
            margin-right: 8px
          }

          /* ===== CTA impressive animation ===== */
          .afn-cta {
            position: relative;
            overflow: hidden
          }

          .afn-cta>.wrap {
            position: relative;
            z-index: 2
          }

          /* ambient moving glow behind everything */
          .afn-cta-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden
          }

          .afn-cta-bg::before {
            content: "";
            position: absolute;
            inset: -6%;
            background-image: url('/extracted/5056cda494e353ee.jpg');
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.4s ease;
            animation: afnBgDrift 15s ease-in-out infinite alternate;
            will-change: transform, opacity
          }

          .afn-cta.in .afn-cta-bg::before {
            opacity: .45
          }

          /* dark navy wash so white text stays readable over the image */
          .afn-cta-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 5, 44, .86), rgba(0, 5, 44, .74) 45%, rgba(0, 5, 44, .92));
          }

          @keyframes afnBgDrift {
            0% {
              transform: scale(1.06) translate3d(0, 0, 0)
            }

            50% {
              transform: scale(1.12) translate3d(-1.5%, -1%, 0)
            }

            100% {
              transform: scale(1.08) translate3d(1.5%, 1%, 0)
            }
          }

          .afn-cta-glow {
            position: absolute;
            inset: -30% -10% auto -10%;
            height: 140%;
            z-index: 1;
            pointer-events: none;
            background:
              radial-gradient(40% 55% at 18% 12%, rgba(15, 181, 174, .30), transparent 70%),
              radial-gradient(38% 50% at 86% 30%, rgba(74, 91, 208, .22), transparent 72%),
              radial-gradient(45% 60% at 60% 95%, rgba(242, 201, 69, .14), transparent 70%);
            filter: blur(8px);
            opacity: .0;
            transition: opacity 1.1s ease;
            animation: afnGlowDrift 16s ease-in-out infinite alternate
          }

          .afn-cta.in .afn-cta-glow {
            opacity: 1
          }

          @keyframes afnGlowDrift {
            0% {
              transform: translate3d(0, 0, 0) scale(1)
            }

            50% {
              transform: translate3d(2.5%, -2%, 0) scale(1.06)
            }

            100% {
              transform: translate3d(-2%, 2.5%, 0) scale(1.03)
            }
          }

          /* faint grid overlay */
          .afn-cta::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: .06;
            background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
            background-size: 64px 64px;
            -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
            mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%)
          }

          /* staged entrance - initial states */
          .afn-cta-eyebrow {
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .6s, transform .6s
          }

          .afn-cta-h2 .ln {
            display: block;
            overflow: hidden
          }

          .afn-cta-h2 .ln i {
            display: block;
            font-style: normal;
            transform: translateY(108%);
            transition: transform .85s cubic-bezier(.19, 1, .22, 1)
          }

          .afn-cta-sub {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .7s, transform .7s
          }

          .afn-cta-word {
            display: block;
            position: relative
          }

          .afn-liquid {
            width: 100%;
            height: auto;
            display: block;
            overflow: visible;
            vertical-align: bottom;
            margin-bottom: 0
          }

          .afn-liquid-txt {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            letter-spacing: -.02em;
            font-size: 180px
          }

          .afn-liquid-outline {
            fill: #fff;
            stroke: none
          }

          .afn-liquid-fill {
            fill: #fff;
            opacity: 0;
            transition: opacity .8s ease
          }

          /* the rising liquid body; translateY animated 0(low)..-1(high) via class */
          .afn-liquid-rise {
            transform: translateY(188px);
            transition: none
          }

          /* shine sweep across the wordmark */
          .afn-cta-word .shine {
            position: absolute;
            top: 0;
            left: -40%;
            width: 35%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
            transform: skewX(-18deg);
            opacity: 0
          }

          /* triggered states (added when section scrolls in) */
          .afn-cta.in .afn-cta-eyebrow {
            opacity: .6;
            transform: none;
            transition-delay: .05s
          }

          .afn-cta.in .afn-cta-h2 .ln:nth-child(1) i {
            transform: none;
            transition-delay: .18s
          }

          .afn-cta.in .afn-cta-h2 .ln:nth-child(2) i {
            transform: none;
            transition-delay: .30s
          }

          .afn-cta.in .afn-cta-sub {
            opacity: 1;
            transform: none;
            transition-delay: .5s
          }

          .afn-cta.in .afn-cta-word .shine {
            animation: afnShine 1.1s ease 1.5s 1 forwards
          }

          @keyframes afnShine {
            0% {
              left: -40%;
              opacity: 0
            }

            12% {
              opacity: 1
            }

            100% {
              left: 120%;
              opacity: 0
            }
          }

          /* magnetic / glow hover on contact button */
          .afn-magnet {
            position: relative;
            will-change: transform;
            transition: transform .18s ease, background .2s, color .2s, box-shadow .3s
          }

          .afn-cta.in .afn-magnet {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, .0)
          }

          .afn-magnet:hover {
            box-shadow: 0 12px 40px -12px rgba(255, 255, 255, .45)
          }

          @media(prefers-reduced-motion:reduce) {

            .afn-cta-eyebrow,
            .afn-cta-h2 .ln i,
            .afn-cta-sub {
              transition: none !important;
              transform: none !important;
              opacity: 1 !important
            }

            .afn-cta-glow {
              animation: none
            }

            .afn-cta-bg::before {
              animation: none
            }

            .afn-cta-word .shine {
              display: none
            }

            .afn-liquid-fill {
              opacity: 1 !important
            }

            .afn-liquid-rise {
              display: none
            }
          }

          /* liquid wave drift while filled */
          @keyframes afnWaveA {
            from {
              transform: translateX(0)
            }

            to {
              transform: translateX(-500px)
            }
          }

          @keyframes afnWaveB {
            from {
              transform: translateX(0)
            }

            to {
              transform: translateX(-500px)
            }
          }

          .afn-cta.in .afn-liquid-rise .afn-wave-a {
            animation: afnWaveA 3.2s linear infinite
          }

          .afn-cta.in .afn-liquid-rise .afn-wave-b {
            animation: afnWaveB 4.6s linear infinite
          }

          @media(max-width:880px) {
            .afn-cta {
              min-height: 56vh
            }

            .afn .wrap {
              padding: 0 22px
            }

            .afn-grid,
            .afn-jgrid {
              grid-template-columns: 1fr
            }

            .afn-tile {
              width: 84%
            }

            .afn-capgrid {
              flex-direction: column
            }

            .afn-col {
              border-right: 0;
              border-bottom: 1px solid var(--afn-line);
              min-height: auto;
              flex: none !important;
              background: transparent !important
            }

            .afn-col:last-child {
              border-bottom: 0
            }

            .afn-col .more {
              position: static;
              opacity: 1;
              margin-top: 14px;
              display: inline-flex
            }

            .afn-stmt .row,
            .afn-clients .row,
            .afn-jhead,
            .afn-cta .sub {
              grid-template-columns: 1fr;
              flex-direction: column;
              align-items: flex-start
            }
          }





          /* ===== CENTER-OPEN VIDEO WINDOW ===== */

          .vwx {
            position: relative;
            background: #00052c
          }

          .vwx-track {
            height: 170vh
          }

          .vwx-stage {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
            background: #00052c
          }

          .vwx-bg {
            position: absolute;
            inset: -6%;
            z-index: 0;
            background-size: cover;
            background-position: center;
            animation: afnBgDrift 24s ease-in-out infinite;
            will-change: transform
          }

          .vwx-veil {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(0, 5, 44, .86) 0%, rgba(0, 5, 44, .52) 42%, rgba(0, 5, 44, .34) 100%), linear-gradient(0deg, rgba(0, 5, 44, .55), transparent 50%)
          }

          .vwx-line {
            position: absolute;
            left: clamp(24px, 5vw, 72px);
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            max-width: 46%;
            will-change: opacity, transform
          }

          .vwx-eyebrow {
            display: inline-block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .22em;
            color: var(--teal);
            margin-bottom: 16px
          }

          .vwx-line h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(30px, 4.4vw, 60px);
            line-height: 1.04;
            letter-spacing: -.025em;
            color: #fff;
            margin: 0
          }

          .vwx-line h2 .accent {
            color: var(--teal)
          }

          .vwx-window {
            position: absolute;
            inset: 0;
            z-index: 3;
            clip-path: inset(50% 50% 50% 50%);
            will-change: clip-path;
            background: #000
          }

          .vwx-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          .vwx-cap {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 2;
            width: 100%;
            padding: 34px clamp(24px, 5vw, 56px);
            color: #fff;
            background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(20px, 2.3vw, 32px);
            letter-spacing: -.01em;
            opacity: 0;
            transform: translateY(12px);
            transition: opacity .6s, transform .6s
          }

          .vwx.full .vwx-cap {
            opacity: 1;
            transform: none
          }

          .vwx-hint {
            position: absolute;
            left: 50%;
            bottom: 34px;
            transform: translateX(-50%);
            z-index: 2;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .22em;
            color: rgba(255, 255, 255, .72);
            display: flex;
            align-items: center;
            gap: 9px;
            will-change: opacity
          }

          .vwx-hint span {
            display: inline-block;
            animation: vwxBob 1.6s ease-in-out infinite
          }

          @keyframes vwxBob {

            0%,
            100% {
              transform: translateY(0)
            }

            50% {
              transform: translateY(5px)
            }
          }

          @media(max-width:860px) {
            .vwx-track {
              height: auto
            }

            .vwx-stage {
              position: static;
              height: auto;
              min-height: auto
            }

            .vwx-bg {
              display: none
            }

            .vwx-veil {
              display: none
            }

            .vwx-line {
              position: static;
              transform: none !important;
              max-width: none;
              padding: 48px 22px 20px;
              background: #00052c
            }

            .vwx-window {
              position: relative;
              clip-path: none !important;
              height: 56vh
            }

            .vwx-hint {
              display: none
            }

            .vwx-cap {
              opacity: 1;
              transform: none
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .vwx-track {
              height: auto
            }

            .vwx-stage {
              position: static;
              height: auto
            }

            .vwx-bg {
              animation: none
            }

            .vwx-line {
              position: static;
              transform: none !important;
              max-width: none;
              padding: 44px 40px 18px
            }

            .vwx-window {
              position: relative;
              clip-path: none !important;
              height: 64vh
            }

            .vwx-hint {
              display: none
            }

            .vwx-cap {
              opacity: 1;
              transform: none
            }
          }






          .dnx {
            position: relative;
            width: 100%;
            background: #001846
          }

          .dnx-track {
            position: relative;
            height: 160vh
          }

          .dnx-stage {
            position: sticky;
            top: 0;
            height: 100vh;
            width: 100%;
            overflow: hidden
          }

          /* day/night split image fills the section */
          .dnx-img {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            z-index: 1
          }

          /* video sits above, revealed from center via clip-path that widens on hover */
          .dnx-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            clip-path: inset(0 calc(50% * (1 - var(--rev, 0))) 0 calc(50% * (1 - var(--rev, 0))))
          }

          /* center divider line (only when not hovered) */
          .dnx-divider {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 1.5px;
            background: rgba(255, 255, 255, .45);
            z-index: 4;
            transform: translateX(-50%);
            transition: opacity .4s
          }

          .dnx.is-open .dnx-divider {
            opacity: 0
          }

          /* the two side headings (On default) */
          .dnx-side {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(34px, 6vw, 84px);
            line-height: 1;
            letter-spacing: -.03em;
            transition: opacity .5s, transform .8s cubic-bezier(.7, 0, .2, 1);
            pointer-events: none
          }

          .dnx-side.left {
            left: 6vw;
            color: rgba(255, 255, 255, .92)
          }

          .dnx-side.right {
            right: 6vw;
            color: rgba(255, 255, 255, .92);
            text-align: right
          }

          .dnx.is-open .dnx-side.left {
            opacity: 0;
            transform: translate(-30px, -50%)
          }

          .dnx.is-open .dnx-side.right {
            opacity: 0;
            transform: translate(30px, -50%)
          }

          /* center heading (revealed on hover) */
          .dnx-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 6;
            text-align: center;
            opacity: 0;
            transition: opacity .6s ease .15s;
            pointer-events: none;
            width: 90%
          }

          .dnx.is-open .dnx-center {
            opacity: 1
          }

          .dnx-center h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(34px, 6vw, 84px);
            line-height: 1;
            letter-spacing: -.03em;
            color: rgba(255, 255, 255, .95);
            margin: 0;
            text-shadow: 0 4px 30px rgba(0, 12, 40, .5)
          }

          /* small day/night tags */
          .dnx-tag {
            position: absolute;
            top: 26px;
            z-index: 5;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            transition: opacity .4s
          }

          .dnx-tag.t-night {
            left: 6vw;
            color: rgba(255, 255, 255, .8)
          }

          .dnx-tag.t-day {
            right: 6vw;
            color: rgba(255, 255, 255, .95)
          }

          .dnx.is-open .dnx-tag {
            opacity: 0
          }

          /* info card bottom-right (revealed on hover, like reference) */
          .dnx-card {
            position: absolute;
            right: 6vw;
            bottom: clamp(34px, 5vw, 56px);
            z-index: 7;
            max-width: 340px;
            background: rgba(20, 28, 44, .62);
            backdrop-filter: blur(10px);
            padding: 24px 26px;
            color: #fff;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .5s ease .25s, transform .5s ease .25s;
            pointer-events: none
          }

          .dnx.is-open .dnx-card {
            opacity: 1;
            transform: none
          }

          .dnx-card p {
            font-size: 14.5px;
            font-weight: 300;
            line-height: 1.65;
            margin: 0;
            color: rgba(255, 255, 255, .9)
          }

          /* hover hint */
          .dnx-hint {
            position: absolute;
            left: 50%;
            bottom: clamp(28px, 4vw, 44px);
            transform: translateX(-50%);
            z-index: 5;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .8);
            transition: opacity .4s
          }

          .dnx.is-open .dnx-hint {
            opacity: 0
          }

          .dnx-hint svg {
            width: 15px;
            height: 15px
          }

          @media(max-width:640px) {
            .dnx-card {
              max-width: none;
              left: 6vw;
              right: 6vw
            }

            .dnx-side {
              font-size: 34px
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .dnx-video {
              transition: clip-path .3s
            }
          }






          .hcl-sec {
            padding: 8px 0 64px;
            background: var(--afn-soft);
          }

          .hcl-head {
            margin-bottom: 24px
          }

          .hcl-marquee {
            position: relative;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent)
          }

          .hcl-track {
            display: flex;
            align-items: center;
            gap: clamp(40px, 5vw, 72px);
            width: max-content;
            animation: hclScroll 55s linear infinite
          }

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

          @keyframes hclScroll {
            from {
              transform: translateX(0)
            }

            to {
              transform: translateX(-50%)
            }
          }

          .hcl-logo {
            height: 72px;
            width: auto;
            max-width: 170px;
            object-fit: contain;
            flex: 0 0 auto;
            filter: none;
            opacity: 1;
            transition: transform .4s cubic-bezier(.22, 1, .36, 1), filter .3s ease
          }

          .hcl-logo:hover {
            transform: scale(1.28);
            filter: drop-shadow(0 10px 18px rgba(10, 10, 10, .16))
          }

          @media(prefers-reduced-motion:reduce) {
            .hcl-track {
              animation: none
            }

            .hcl-marquee {
              overflow-x: auto
            }
          }

          /* ===== Trusted by - eyebrow heading + rounded pill container (moving logos inside) ===== */
          .trust-pillsec {
            text-align: center
          }

          .trust-pill-head {
            font-family: 'Sora', sans-serif;
            font-weight: 300;
            font-size: clamp(24px, 2.6vw, 34px);
            letter-spacing: -.02em;
            color: var(--navy);
            margin: 0 0 26px
          }

          .trust-pill {
            position: relative;
            display: block;
            background: #fff;
            border-radius: 999px;
            padding: 24px clamp(20px, 3vw, 40px);
            box-shadow: 0 24px 60px -30px rgba(0, 24, 70, .28), 0 2px 0 rgba(0, 24, 70, .02);
            overflow: hidden;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
          }

          .trust-pillsec .wrap {
            padding-left: 16px;
            padding-right: 16px;
          }

          .trust-pill .hcl-marquee {
            overflow: hidden
          }

          .trust-pill .hcl-track {
            padding: 6px 0
          }

          @media(max-width:720px) {
            .trust-pill {
              border-radius: 44px;
              padding: 18px 14px
            }

            .trust-pill .hcl-logo {
              height: 52px;
              max-width: 120px
            }

            .trust-pill .hcl-track {
              gap: 36px
            }
          }












          /* ===== WHO GETS BENEFITS ===== */

          /* ===== WHO WE SERVE - full-bleed sticky scroll-sync (alt media + hero bg) ===== */
          .wsv {
            position: relative;
            background: #00052c
          }

          .wsv-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0
          }

          /* LEFT - full-bleed, full-height media (image <-> video crossfade) */
          .wsv-media {
            position: relative
          }

          .wsv-stage {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
            background: var(--navy)
          }

          .wsv-img {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity .8s ease;
            animation: wsvKen 20s ease-in-out infinite alternate;
            will-change: transform, opacity
          }

          .wsv-video {
            position: absolute;
            left: 0;
            top: -5%;
            width: 100%;
            height: 110%;
            z-index: 0;
            object-fit: cover;
            display: block;
            opacity: 0;
            will-change: transform, opacity;
            transition: opacity .8s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1)
          }

          @keyframes wsvKen {
            0% {
              transform: scale(1.04)
            }

            100% {
              transform: scale(1.13)
            }
          }

          .wsv-veil {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(120deg, rgba(0, 5, 44, .55) 0%, rgba(0, 5, 44, .18) 42%, rgba(0, 5, 44, .05) 60%), linear-gradient(0deg, rgba(0, 5, 44, .85), transparent 55%)
          }

          .wsv-tint {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            mix-blend-mode: multiply;
            opacity: .22;
            background: linear-gradient(140deg, var(--teal), transparent 70%);
            transition: opacity .7s, background .7s
          }

          .wsv-stage[data-active="1"] .wsv-tint {
            opacity: .16;
            background: linear-gradient(140deg, #f6c945, transparent 70%)
          }

          .wsv-stage[data-active="2"] .wsv-tint {
            opacity: .24;
            background: linear-gradient(140deg, var(--teal), transparent 72%)
          }

          .wsv-stage[data-active="3"] .wsv-tint {
            opacity: .30;
            background: linear-gradient(140deg, #3a52a8, transparent 72%)
          }

          .wsv-idx {
            position: absolute;
            top: 42px;
            left: 48px;
            z-index: 3;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: .32em;
            color: rgba(255, 255, 255, .82)
          }

          .wsv-label {
            position: absolute;
            bottom: 46px;
            left: 48px;
            right: 48px;
            z-index: 3;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .3em;
            color: rgba(255, 255, 255, .94)
          }

          .wsv-idx.swap,
          .wsv-label.swap {
            animation: wsvUp .55s cubic-bezier(.22, 1, .36, 1) both
          }

          @keyframes wsvUp {
            from {
              opacity: 0;
              transform: translateY(14px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          /* RIGHT - hero-style background panel with moving bg image */
          .wsv-panel {
            position: relative;
            overflow: hidden;
            background: radial-gradient(120% 90% at 80% 0%, rgba(0, 12, 60, 1), rgba(0, 5, 44, 1) 60%)
          }

          .wsv-bgimg {
            position: absolute;
            inset: -6%;
            z-index: 0;
            pointer-events: none;
            background-size: cover;
            background-position: center;
            opacity: .16;
            animation: afnBgDrift 24s ease-in-out infinite
          }

          .wsv-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0, 5, 44, .78), rgba(0, 5, 44, .6) 45%, rgba(0, 5, 44, .88))
          }

          .wsv-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: .06;
            background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
            background-size: 64px 64px;
            -webkit-mask-image: radial-gradient(circle at 60% 30%, #000, transparent 80%);
            mask-image: radial-gradient(circle at 60% 30%, #000, transparent 80%)
          }

          .wsv-glow {
            position: absolute;
            inset: -20% -10%;
            z-index: 1;
            pointer-events: none;
            filter: blur(10px);
            background:
              radial-gradient(40% 50% at 22% 14%, rgba(15, 181, 174, .30), transparent 70%),
              radial-gradient(38% 48% at 88% 34%, rgba(74, 91, 208, .22), transparent 72%),
              radial-gradient(46% 60% at 64% 96%, rgba(242, 201, 69, .12), transparent 70%);
            animation: afnGlowDrift 16s ease-in-out infinite alternate
          }

          .wsv-inner {
            position: relative;
            z-index: 2;
            display: flex;
            gap: 30px;
            padding: 0 clamp(40px, 5vw, 84px)
          }

          /* vertical progress rail (ticks, no radius) */
          .wsv-rail {
            flex: 0 0 auto;
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 9px;
            align-items: center
          }

          .wsv-rail i {
            display: block;
            width: 2px;
            height: 22px;
            background: rgba(255, 255, 255, .22);
            transition: height .45s cubic-bezier(.22, 1, .36, 1), background .45s
          }

          .wsv-rail i.on {
            height: 42px;
            background: var(--teal)
          }

          .wsv-content {
            flex: 1 1 auto;
            min-width: 0
          }

          .wsv-intro {
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 80px 0
          }

          .wsv-eyebrow {
            display: inline-block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .22em;
            color: var(--teal);
            margin-bottom: 18px
          }

          .wsv-h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(32px, 3.6vw, 52px);
            line-height: 1.06;
            letter-spacing: -.025em;
            color: #fff;
            margin: 0
          }

          .wsv-h2 .accent {
            color: var(--teal);
            font-weight: 600
          }

          .wsv-intro-p {
            max-width: 40ch;
            margin: 22px 0 0;
            font-size: 17px;
            font-weight: 600;
            line-height: 1.62;
            color: #c3d2e6
          }

          .wsv-block {
            position: relative;
            min-height: 56vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 50px 0;
            border-top: 1px solid rgba(255, 255, 255, .10);
            opacity: .32;
            transition: opacity .55s
          }

          .wsv-block[data-on] {
            opacity: 1
          }

          /* giant faint index numeral - fills the empty space behind the text with a subtle editorial accent */
          .wsv-num {
            position: absolute;
            z-index: -1;
            top: -.1em;
            right: 0;
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(100px, 11vw, 170px);
            line-height: 1;
            letter-spacing: -.04em;
            color: rgba(255, 255, 255, .04);
            transition: color .6s;
            pointer-events: none;
          }

          .wsv-block[data-on] .wsv-num {
            color: rgba(15, 181, 174, .10)
          }

          .wsv-ic {
            width: 58px;
            height: 58px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 22px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .14);
            transition: background .5s, border-color .5s, transform .5s
          }

          .wsv-block[data-on] .wsv-ic {
            background: linear-gradient(135deg, #0FB5AE, #0a8f89);
            border-color: transparent;
            transform: translateY(-3px)
          }

          .wsv-ic svg {
            width: 27px;
            height: 27px;
            stroke: #fff;
            fill: none
          }

          .wsv-block h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: clamp(26px, 2.8vw, 38px);
            letter-spacing: -.02em;
            color: #fff;
            margin: 0 0 14px
          }

          .wsv-block p {
            font-size: 16.5px;
            font-weight: 500;
            line-height: 1.62;
            color: #c2cfe2;
            max-width: 44ch;
            margin: 0 0 22px
          }

          .wsv-chip {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .05em;
            color: var(--teal);
            background: rgba(15, 181, 174, .12);
            border: 1px solid rgba(15, 181, 174, .32);
            padding: 9px 15px;
            transition: .45s
          }

          .wsv-block[data-on] .wsv-chip {
            color: #00052c;
            background: var(--teal);
            border-color: var(--teal)
          }

          @media(max-width:920px) {
            .wsv-grid {
              grid-template-columns: 1fr
            }

            .wsv-stage {
              height: 42vh;
              min-height: 240px
            }

            .wsv-idx {
              top: 22px;
              left: 24px
            }

            .wsv-label {
              bottom: 22px;
              left: 24px;
              right: 24px
            }

            .wsv-inner {
              padding: 0 22px;
              gap: 0
            }

            .wsv-rail {
              display: none
            }

            .wsv-intro,
            .wsv-block {
              min-height: auto;
              padding: 54px 0
            }

            .wsv-intro {
              padding-top: 46px
            }

            .wsv-num {
              font-size: 88px
            }
          }

          @media(prefers-reduced-motion:reduce) {

            .wsv-video,
            .wsv-glow,
            .wsv-bgimg,
            .wsv-img {
              animation: none;
              transition: opacity .4s
            }

            .wsv-idx.swap,
            .wsv-label.swap {
              animation: none
            }
          }

          /* ===== WHO WE SERVE - white panel variant (readable dark text, faint grey grid) ===== */
          .wsv-panel {
            background: #ffffff
          }

          .wsv-panel::after {
            display: none
          }

          .wsv-bgimg {
            display: none
          }

          .wsv-glow {
            opacity: .35;
            filter: blur(24px)
          }

          /* keep the grid but as a very light grey, slightly more visible on white */
          .wsv-panel::before {
            opacity: .9;
            background-image: linear-gradient(rgba(0, 24, 70, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 24, 70, .06) 1px, transparent 1px);
          }

          /* text + accents recolored for light background */
          .wsv-h2 {
            color: var(--navy)
          }

          .wsv-intro-p {
            color: var(--muted)
          }

          .wsv-block {
            border-top-color: rgba(0, 24, 70, .10)
          }

          .wsv-block h3 {
            color: var(--navy)
          }

          .wsv-block p {
            color: var(--muted)
          }

          .wsv-num {
            color: rgba(0, 24, 70, .05)
          }

          .wsv-block[data-on] .wsv-num {
            color: rgba(15, 181, 174, .12)
          }

          .wsv-ic {
            background: rgba(0, 24, 70, .04);
            border-color: rgba(0, 24, 70, .12)
          }

          .wsv-rail i {
            background: rgba(0, 24, 70, .18)
          }

          .wsv-rail i.on {
            background: var(--teal)
          }






          .repsec {
            padding: 80px 0 80px;
            background: #fff;
            overflow: hidden
          }

          .repsec .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 32px
          }

          .repsec .rep-head {
            margin-bottom: 18px
          }

          .repsec .rep-head h2 {
            color: #1B1464
          }

          .repsec .rep-head p {
            color: var(--muted)
          }

          .rep-stage {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 320px 1fr;
            align-items: stretch
          }

          .rep-mid {
            grid-column: 2;
            position: relative
          }

          .rep-mid svg {
            width: 100%;
            height: auto;
            display: block
          }

          .rep-col {
            grid-column: auto;
            position: relative
          }

          .rep-left {
            grid-column: 1
          }

          .rep-right {
            grid-column: 3
          }

          .rep-item {
            position: absolute;
            max-width: 288px;
            padding: 4px 2px;
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
            display: flex;
            flex-direction: column
          }

          .rep-left .rep-item {
            right: 26px;
            text-align: right;
            align-items: flex-end
          }

          .rep-right .rep-item {
            left: 26px;
            text-align: left;
            align-items: flex-start
          }

          .rep-item.in {
            opacity: 1;
            transform: translateY(0)
          }

          .rep-ic {
            width: 48px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px
          }

          .rep-ic svg {
            width: 34px;
            height: 34px;
            fill: none;
            stroke-width: 2.1;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .rep-title {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 17px;
            letter-spacing: .09em;
            text-transform: uppercase;
            margin: 0 0 9px
          }

          .rep-tx {
            font-size: 13px;
            line-height: 1.62;
            color: #6b7280;
            margin: 0;
            text-align: justify
          }

          .rep-left .rep-tx {
            text-align: right
          }

          .rep-right .rep-tx {
            text-align: left
          }

          @media(max-width:860px) {
            .rep-mid {
              display: none
            }

            .rep-stage {
              display: block;
              padding-left: 26px;
              position: relative
            }

            .rep-stage::before {
              content: "";
              position: absolute;
              left: 6px;
              top: 8px;
              bottom: 20px;
              width: 4px;
              background: linear-gradient(180deg, #33a3a0, #5ab4e0, #3f6fb3, #b07a52, #9a6fc0, #e26fa3)
            }

            .rep-col {
              display: block
            }

            .rep-item {
              position: static;
              max-width: none;
              margin: 0 0 26px;
              text-align: left;
              align-items: flex-start
            }

            .rep-left .rep-item,
            .rep-right .rep-item {
              right: auto;
              left: auto;
              text-align: left;
              align-items: flex-start
            }

            .rep-left .rep-tx,
            .rep-right .rep-tx {
              text-align: left
            }

            .rep-item::before {
              content: "";
              position: absolute;
              left: -26px;
              margin-top: 14px;
              width: 15px;
              height: 15px;
              background: var(--acc);
              box-shadow: 0 0 0 4px #fff
            }
          }



          /* ============ LET'S TALK - full-screen immersive ============ */
          .ltk {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: radial-gradient(120% 120% at 50% 0%, #0006ab 0%, #000000 42%, #032b81 100%);
            font-family: 'Inter', sans-serif;
            color: #fff;
            padding: clamp(56px, 8vh, 96px) 50px;
          }

          .ltk-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            display: block;
          }

          .ltk-veil {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(60% 60% at 50% 50%, rgba(15, 181, 174, .10), transparent 70%);
          }

          .ltk-inner {
            position: relative;
            z-index: 2;
            max-width: none;
            margin: 0;
            width: 100%;
            pointer-events: none;
          }

          .ltk-inner a,
          .ltk-inner button {
            pointer-events: auto;
          }

          .ltk-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #8fe6e1;
            margin: 0;
          }

          .ltk-eyebrow::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--teal, #0FB5AE);
            box-shadow: 0 0 14px 2px rgba(15, 181, 174, .8);
            animation: ltkDot 2.4s ease-in-out infinite;
          }

          @keyframes ltkDot {

            0%,
            100% {
              opacity: 1;
              transform: scale(1);
            }

            50% {
              opacity: .5;
              transform: scale(.7);
            }
          }

          .ltk-big-wrap {
            overflow: hidden;
            margin-top: 14px;
          }

          .ltk-big {
            font-family: 'Sora', sans-serif;
            font-weight: 700;
            font-size: clamp(48px, 10vw, 180px);
            line-height: .9;
            letter-spacing: -.04em;
            margin: 0;
            user-select: none;
            display: flex;
            width: 100%;
            justify-content: start;
            white-space: nowrap;
            color: transparent;
            -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22);
          }

          .ltk-big span {
            flex: 0 0 auto;
            background: linear-gradient(180deg, #ffffff 0%, #cfe9ff 60%, rgba(143, 230, 225, .9) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .ltk-sub {
            max-width: 560px;
            margin: 22px 0 0;
            font-size: clamp(15px, 1.4vw, 18px);
            line-height: 1.6;
            color: rgba(255, 255, 255, .72);
          }

          @media(max-width:760px) {
            .ltk {
              padding-left: 24px;
              padding-right: 24px;
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .ltk-big {
              animation: none;
            }

            .ltk-eyebrow::before {
              animation: none;
            }
          }

          /* ============ BECOME PARTNER PAGE ============ */

          /* ===== BECOME PARTNER - scoped bp- ===== */
          #view-becomepartner {
            background: var(--paper)
          }

          .bp-wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 40px
          }

          /* HERO - navy aperture, teal glow, "open doors" thesis */
          .bp-hero {
            position: relative;
            overflow: hidden;
            background:
              radial-gradient(120% 90% at 78% 18%, rgba(15, 181, 174, .20), transparent 58%),
              radial-gradient(90% 80% at 12% 90%, rgba(246, 197, 68, .10), transparent 60%),
              linear-gradient(160deg, #001129 0%, var(--navy) 46%, var(--navy-2) 100%);
            color: #fff;
            padding: 96px 0 120px
          }

          .bp-hero-grid {
            display: grid;
            grid-template-columns: 1px 1fr;
            background: rgba(255, 255, 255, .06)
          }

          .bp-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
            background-size: 26px 26px;
            opacity: .5;
            pointer-events: none
          }

          /* the door: a vertical seam of teal light that "opens" on load */
          .bp-door {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            transform: translateX(-1px);
            background: linear-gradient(180deg, transparent, rgba(95, 208, 201, .85), transparent);
            box-shadow: 0 0 40px 6px rgba(15, 181, 174, .45);
            opacity: 0;
            animation: bpDoor 1.4s cubic-bezier(.22, 1, .36, 1) .2s forwards
          }

          @keyframes bpDoor {
            0% {
              opacity: 0;
              transform: translateX(-1px) scaleY(.2)
            }

            60% {
              opacity: 1
            }

            100% {
              opacity: .55;
              transform: translateX(-1px) scaleY(1)
            }
          }

          .bp-hero-inner {
            position: relative;
            z-index: 2;
            max-width: 760px
          }

          .bp-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 12.5px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: #5DBB64
          }

          .bp-eyebrow::before {
            content: "";
            width: 26px;
            height: 1px;
            background: #5DBB64;
            display: inline-block
          }

          .bp-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            color: #fff;
            font-size: clamp(38px, 5.4vw, 68px);
            line-height: 1.02;
            letter-spacing: -.01em;
            margin: 22px 0 0
          }

          .bp-h1 em {
            font-style: italic;
            color: #5DBB64
          }

          .bp-lead {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(16px, 1.6vw, 19px);
            line-height: 1.7;
            color: rgba(255, 255, 255, .78);
            max-width: 560px;
            margin: 24px 0 0
          }

          .bp-hero-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 36px
          }

          .bp-btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14.5px;
            padding: 15px 26px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: .25s;
            border-radius: 0
          }

          .bp-btn-solid {
            background: var(--teal);
            color: #022
          }

          .bp-btn-solid:hover {
            background: #5DBB64;
            transform: translateY(-2px)
          }

          .bp-btn-ghost {
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .28)
          }

          .bp-btn-ghost:hover {
            border-color: #5DBB64;
            color: #5DBB64
          }

          /* hero stat ribbon */
          .bp-ribbon {
            position: relative;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
            gap: 48px;
            margin-top: 60px;
            padding-top: 32px;
            border-top: 1px solid rgba(255, 255, 255, .14)
          }

          .bp-stat b {
            display: block;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 30px;
            color: #fff;
            line-height: 1
          }

          .bp-stat i {
            display: block;
            font-style: normal;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: rgba(255, 255, 255, .62);
            margin-top: 7px
          }

          /* WHY PARTNER */
          .bp-why {
            padding: 88px 0 26px
          }

          .bp-sec-eyebrow {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 12.5px;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .bp-sec-h {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(28px, 3.4vw, 40px);
            line-height: 1.08;
            color: var(--navy);
            margin: 12px 0 0;
            max-width: 620px
          }

          .bp-why-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            margin-top: 46px;
            border: 1px solid var(--line)
          }

          .bp-why-card {
            padding: 34px 30px;
            border-right: 1px solid var(--line);
            position: relative;
            transition: .3s
          }

          .bp-why-card:last-child {
            border-right: none
          }

          .bp-why-card:hover {
            background: var(--offwhite)
          }

          .bp-why-ic {
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--navy);
            color: #5DBB64;
            margin-bottom: 20px
          }

          .bp-why-ic svg {
            width: 23px;
            height: 23px
          }

          .bp-why-card h4 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 17px;
            color: var(--navy);
            letter-spacing: -.01em
          }

          .bp-why-card p {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 14.5px;
            line-height: 1.65;
            color: var(--muted);
            margin-top: 10px
          }

          /* WHO - partner types */
          .bp-who {
            padding: 64px 0 20px
          }

          .bp-who-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 30px
          }

          .bp-chip {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            border: 1px solid var(--line);
            background: #fff;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 14px;
            color: var(--navy)
          }

          .bp-chip span {
            width: 7px;
            height: 7px;
            background: var(--teal);
            display: inline-block
          }

          /* APPLY - split: invitation + form */
          .bp-apply {
            padding: 80px 0 96px
          }

          .bp-apply-grid {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 0;
            border: 1px solid var(--line)
          }

          .bp-apply-left {
            background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
            color: #fff;
            padding: 54px 46px;
            position: relative;
            overflow: hidden
          }

          .bp-apply-left::after {
            content: "";
            position: absolute;
            right: -60px;
            bottom: -60px;
            width: 220px;
            height: 220px;
            border: 1px solid rgba(95, 208, 201, .25);
            border-radius: 50%
          }

          .bp-apply-left::before {
            content: "";
            position: absolute;
            right: -20px;
            bottom: -20px;
            width: 140px;
            height: 140px;
            border: 1px solid rgba(95, 208, 201, .18);
            border-radius: 50%
          }

          .bp-apply-left h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 30px;
            line-height: 1.12;
            position: relative
          }

          .bp-apply-left p {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 15px;
            line-height: 1.7;
            color: rgba(255, 255, 255, .76);
            margin-top: 18px;
            position: relative
          }

          .bp-steps {
            list-style: none;
            margin: 30px 0 0;
            padding: 0;
            position: relative
          }

          .bp-steps li {
            display: flex;
            gap: 14px;
            padding: 14px 0;
            border-top: 1px solid rgba(255, 255, 255, .12);
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: rgba(255, 255, 255, .85)
          }

          .bp-steps li b {
            font-family: 'Inter', sans-serif;
            color: #5DBB64;
            font-weight: 700;
            flex: 0 0 auto
          }

          /* FORM */
          .bp-form {
            padding: 54px 46px;
            background: #e6e8ec36
          }

          .bp-form-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: var(--navy);
            letter-spacing: -.01em
          }

          .bp-form-sub {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 14px;
            color: var(--muted);
            margin: 8px 0 28px
          }

          .bp-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px
          }

          .bp-field {
            margin-bottom: 18px;
            display: flex;
            flex-direction: column
          }

          .bp-field.full {
            grid-column: 1 / -1
          }

          .bp-field label {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 12px;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--navy);
            margin-bottom: 8px
          }

          .bp-field label .req {
            color: var(--teal)
          }

          .bp-field input,
          .bp-field select,
          .bp-field textarea {
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            color: var(--ink);
            padding: 13px 14px;
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 0;
            transition: .2s;
            width: 100%;
            font-weight: 400
          }

          .bp-field textarea {
            resize: vertical;
            min-height: 96px;
            line-height: 1.6
          }

          .bp-field input:focus,
          .bp-field select:focus,
          .bp-field textarea:focus {
            outline: none;
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(15, 181, 174, .12)
          }

          .bp-field input::placeholder,
          .bp-field textarea::placeholder {
            color: #aab2bc
          }

          .bp-consent {
            display: flex;
            gap: 11px;
            align-items: flex-start;
            margin: 4px 0 24px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: var(--muted);
            line-height: 1.55
          }

          .bp-consent input {
            width: 17px;
            height: 17px;
            flex: 0 0 auto;
            margin-top: 2px;
            accent-color: var(--teal)
          }

          .bp-submit {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            padding: 16px;
            background: var(--navy);
            color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 0;
            transition: .25s
          }

          .bp-submit:hover {
            background: var(--teal);
            color: #022
          }

          .bp-submit svg {
            width: 17px;
            height: 17px
          }

          /* success */
          .bp-done {
            display: none;
            text-align: center;
            padding: 30px 10px
          }

          .bp-done.show {
            display: block;
            animation: bpIn .5s ease
          }

          @keyframes bpIn {
            from {
              opacity: 0;
              transform: translateY(14px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          .bp-done-ic {
            width: 62px;
            height: 62px;
            margin: 0 auto 18px;
            background: rgba(15, 181, 174, .12);
            color: var(--teal-dark);
            display: flex;
            align-items: center;
            justify-content: center
          }

          .bp-done-ic svg {
            width: 30px;
            height: 30px
          }

          .bp-done h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 26px;
            color: var(--navy)
          }

          .bp-done p {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 15px;
            color: var(--muted);
            margin-top: 10px;
            line-height: 1.65
          }

          @media(max-width:900px) {
            .bp-wrap {
              padding: 0 22px
            }

            .bp-hero {
              padding: 72px 0 88px
            }

            .bp-why-grid {
              grid-template-columns: 1fr
            }

            .bp-why-card {
              border-right: none;
              border-bottom: 1px solid var(--line)
            }

            .bp-why-card:last-child {
              border-bottom: none
            }

            .bp-apply-grid {
              grid-template-columns: 1fr
            }

            .bp-apply-left,
            .bp-form {
              padding: 40px 26px
            }

            .bp-row {
              grid-template-columns: 1fr
            }

            .bp-ribbon {
              gap: 30px
            }
          }

          /* ===== HERO 2 (reference layout) ===== */
          .bp-hero2 {
            background: #fff;
            padding: 54px 0 70px
          }

          .bp-hero2 .bp-eyebrow {
            color: var(--teal-dark)
          }

          .bp-hero2 .bp-eyebrow::before {
            background: var(--teal-dark)
          }

          .bp-h2-title {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            color: #1B1464;
            font-size: clamp(32px, 5vw, 58px);
            line-height: 1.04;
            letter-spacing: -.02em;
            max-width: 1000px;
            margin: 18px 0 0
          }

          .bp-hero2-figure {
            position: relative;
            margin-top: 40px;
            overflow: hidden
          }

          .bp-hero2-figure img {
            width: 100%;
            display: block;
            height: clamp(320px, 46vw, 350px);
            object-fit: cover;
            border-radius: 0;
            background: #0a1a3a
          }

          .bp-hero2-card {
            position: absolute;
            right: clamp(16px, 3vw, 44px);
            bottom: clamp(0px, 0vw, 0px);
            background: #fff;
            padding: 20px 20px;
            max-width: 340px;
            box-shadow: 0 36px 80px -40px rgba(0, 24, 70, .55);
            border-radius: 0
          }

          .bp-hero2-card-tx {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(15px, 1.4vw, 17px);
            line-height: 1.5;
            color: #1B1464;
            margin: 0 0 18px;
            text-align: center
          }

          .bp-hero2-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            width: 100%;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            padding: 14px 24px;
            background: #1B1464;
            color: #fff;
            border: none;
            cursor: pointer;
            text-decoration: none;
            border-radius: 0;
            transition: .25s
          }

          .bp-hero2-btn:hover {
            background: #030F4D
          }

          .bp-hero2-btn svg {
            width: 17px;
            height: 17px;
            stroke: #fff
          }

          .bp-ribbon2 {
            border-top: 1px solid var(--line);
            margin-top: 46px;
            padding-top: 30px
          }

          .bp-ribbon2 .bp-stat b {
            color: #1B1464
          }

          .bp-ribbon2 .bp-stat i {
            color: var(--muted)
          }

          @media(max-width:680px) {
            .bp-hero2-card {
              position: static;
              max-width: none;
              margin-top: 0;
              box-shadow: none;
              border: 1px solid var(--line)
            }

            .bp-hero2-figure {
              overflow: visible
            }
          }





          .crhero {
            padding: 70px 0 30px;
            background: #fff
          }

          .crhero .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          .crhero-top {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 40px;
            flex-wrap: wrap;
            margin-bottom: 34px
          }

          .crhero-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(32px, 4vw, 48px);
            line-height: 1.05;
            letter-spacing: -.025em;
            color: #1B1464;
            margin: 0
          }

          .crhero-title .ital {
            font-style: normal;
            font-weight: 500;
            color: var(--teal-dark)
          }

          .crhero-sub {
            color: var(--muted);
            font-size: 15.5px;
            line-height: 1.65;
            max-width: 420px;
            margin: 0 0 6px
          }

          /* vertical profile slats */
          .crhero-slats {
            display: flex;
            gap: 6px;
            height: clamp(300px, 40vw, 400px);
            overflow: hidden
          }

          .crslat {
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            cursor: pointer;
            overflow: hidden;
            background-image: linear-gradient(180deg, rgba(3, 15, 77, .30), rgba(27, 20, 100, .78)), var(--img);
            background-size: cover;
            background-position: center;
            transition: flex-grow .45s cubic-bezier(.22, 1, .36, 1), filter .45s ease;
            filter: saturate(.6)
          }

          .crslat::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(27, 20, 100, .30);
            transition: .45s
          }

          .crslat:hover {
            flex-grow: 1.7;
            filter: saturate(1)
          }

          .crslat:hover::after {
            background: rgba(27, 20, 100, .05)
          }

          .crslat-label {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 16px;
            z-index: 2;
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 30px;
            letter-spacing: .02em;
            color: #fff;
            text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
            opacity: .9;
            transition: .35s;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            margin: 0 auto;
            bottom: auto;
            top: 40%;
            left: 34%;
            translate: -50% 0
          }

          .crslat:hover .crslat-label {
            writing-mode: horizontal-tb;
            transform: none;
            top: auto;
            bottom: 18px;
            left: 0;
            right: 0;
            translate: 0 0;
            opacity: 1;
            font-size: 15px
          }

          @media(max-width:760px) {
            .crhero-slats {
              height: auto;
              flex-wrap: wrap
            }

            .crslat {
              flex: 1 1 18%;
              height: 120px
            }

            .crslat-label {
              writing-mode: horizontal-tb;
              transform: none;
              top: auto;
              bottom: 8px;
              left: 0;
              right: 0;
              translate: 0 0
            }

            .crslat:hover {
              flex-grow: 1
            }
          }


          .crhero-LEGACY {
            display: none
          }

          .crhero-card {
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 0;
            padding: 24px 24px 26px;
            box-shadow: 0 20px 40px -24px rgba(0, 24, 70, .35);
            opacity: 0;
            transform: translateY(26px);
            animation: crCardIn .7s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .crhero-card:nth-child(1) {
            animation-delay: .25s
          }

          .crhero-card:nth-child(2) {
            animation-delay: .40s
          }

          .crhero-card:nth-child(3) {
            animation-delay: .55s
          }

          @keyframes crCardIn {
            to {
              opacity: 1;
              transform: none
            }
          }

          .crhero-ic {
            width: 42px;
            height: 42px;
            border-radius: 0;
            background: #E6F7F6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px
          }

          .crhero-ic svg {
            width: 21px;
            height: 21px;
            color: var(--teal-dark)
          }

          .crhero-card h4 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 17px;
            color: var(--navy);
            margin: 0 0 9px
          }

          .crhero-card p {
            color: var(--muted);
            font-size: 13.5px;
            line-height: 1.55;
            margin: 0
          }

          @media(max-width:900px) {
            .crhero-cards {
              position: static;
              grid-template-columns: 1fr;
              left: 0;
              right: 0;
              bottom: 0;
              padding: 18px;
              gap: 14px
            }

            .crhero-stage {
              box-shadow: none
            }

            .crhero-img {
              border-radius: 20px
            }

            .crhero-card {
              background: #fff
            }
          }

          @media(max-width:560px) {
            .crhero .wrap {
              padding: 0 22px
            }

            .crhero-sub {
              max-width: 100%
            }
          }






          .opsec {
            background: var(--offwhite);
            padding: 70px 0 90px
          }

          .opsec .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          .op-head {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 50px
          }

          .op-head h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(28px, 3.4vw, 42px);
            letter-spacing: -.02em;
            color: #1B1464;
            margin: 0
          }

          .op-head p {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.65;
            margin: 16px 0 0
          }

          /* vertical stack of wide horizontal cards */
          .op-list {
            display: flex;
            flex-direction: column;
            gap: 18px
          }

          .op-row {
            position: relative;
            background: #fff;
            border: 1.5px solid var(--line);
            display: grid;
            grid-template-columns: 60px 1.9fr 1.1fr 150px;
            align-items: center;
            gap: 24px;
            padding: 24px 28px;
            box-shadow: 0 18px 40px -34px rgba(0, 24, 70, .32);
            transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s, border-color .28s;
            /* hidden until revealed on scroll */
            opacity: 0;
            transform: translateY(28px);
          }

          .op-row.in {
            opacity: 1;
            transform: translateY(0)
          }

          .op-row:hover {
            transform: translateY(-4px);
            box-shadow: 0 30px 56px -34px rgba(0, 24, 70, .42);
            border-color: var(--teal)
          }

          /* teal accent bar on the left edge */
          .op-row::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--teal);
            transform: scaleY(0);
            transform-origin: top;
            transition: transform .3s
          }

          .op-row:hover::before {
            transform: scaleY(1)
          }

          /* col 1 - job id */
          .op-id {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: .04em;
            color: var(--teal-dark);
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            white-space: nowrap;
            align-self: center;
            justify-self: center
          }

          /* col 2 - title + dept + summary */
          .op-main {
            min-width: 0
          }

          .op-row-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 20px;
            letter-spacing: -.015em;
            color: var(--navy);
            margin: 0 0 4px;
            line-height: 1.2
          }

          .op-dept {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .03em;
            text-transform: uppercase;
            color: var(--teal-dark);
            background: #e7f7f6;
            padding: 3px 11px;
            margin-bottom: 10px
          }

          .op-sum {
            font-size: 13.5px;
            line-height: 1.55;
            color: var(--muted);
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
          }

          /* col 3 - meta facts */
          .op-meta {
            display: flex;
            flex-direction: column;
            gap: 9px
          }

          .op-fact {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 13px;
            color: var(--navy);
            font-weight: 600
          }

          .op-fact svg {
            width: 16px;
            height: 16px;
            stroke: var(--teal-dark);
            fill: none;
            stroke-width: 1.9;
            flex-shrink: 0
          }

          .op-fact .lbl {
            color: var(--muted);
            font-weight: 500
          }

          /* col 4 - apply */
          .op-apply-wrap {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px
          }

          .op-pos-pill {
            font-size: 12px;
            font-weight: 700;
            color: var(--navy);
            background: #eef1fb;
            padding: 5px 12px;
            white-space: nowrap
          }

          .op-apply {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 12px 24px;
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: .2s;
            white-space: nowrap
          }

          .op-apply svg {
            width: 16px;
            height: 16px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
            transition: transform .2s
          }

          .op-apply:hover {
            background: var(--teal)
          }

          .op-apply:hover svg {
            transform: translateX(3px)
          }

          @media(max-width:860px) {
            .op-row {
              grid-template-columns: 46px 1fr;
              gap: 16px 18px;
              padding: 22px 22px
            }

            .op-id {
              writing-mode: horizontal-tb;
              text-orientation: initial;
              transform: none;
              justify-self: start
            }

            .op-id {
              grid-column: 1/-1
            }

            .op-main {
              grid-column: 1/-1
            }

            .op-meta {
              grid-column: 1/-1;
              flex-direction: row;
              flex-wrap: wrap;
              gap: 12px 22px
            }

            .op-apply-wrap {
              grid-column: 1/-1;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              width: 100%
            }
          }

          @media(max-width:560px) {
            .opsec .wrap {
              padding: 0 22px
            }

            .op-apply {
              flex: 1;
              justify-content: center
            }
          }




          .evsec {
            position: relative;
            background: #fff;
            padding: 80px 0 90px;
            overflow: hidden
          }

          .evsec .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
            z-index: 2
          }

          /* soft gradient backdrop on the right, like the reference */
          .ev-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 30%;
            height: 100%;
            z-index: 1;
            opacity: .5;
            background:
              radial-gradient(60% 55% at 80% 65%, rgba(15, 181, 174, .55), transparent 70%),
              radial-gradient(55% 50% at 95% 40%, rgba(0, 24, 70, .30), transparent 72%),
              radial-gradient(50% 60% at 70% 90%, rgba(10, 143, 137, .45), transparent 70%);
            filter: saturate(1.05)
          }

          .ev-label {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 18px;
            color: var(--navy);
            margin-bottom: 40px
          }

          .ev-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
            flex-wrap: wrap;
            margin-bottom: 44px
          }

          .ev-head {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(28px, 3.4vw, 42px);
            line-height: 1.14;
            letter-spacing: -.02em;
            color: var(--navy);
            margin: 0
          }

          .ev-head b {
            font-weight: 600;
            color: var(--teal-dark);
          }

          .ev-sub {
            color: var(--muted);
            font-size: 16px;
            margin: 26px 0 0
          }

          .ev-kit {
            max-width: 300px
          }

          .ev-kit-btn {
            display: block;
            width: 100%;
            border: none;
            cursor: pointer;
            border-radius: 0;
            padding: 16px 22px;
            font-family: inherit;
            font-weight: 700;
            font-size: 15px;
            color: #fff;
            background: linear-gradient(95deg, var(--navy), var(--teal));
            transition: .22s;
            box-shadow: 0 16px 34px -16px rgba(15, 181, 174, .6)
          }

          .ev-kit-btn:hover {
            filter: brightness(1.06);
            transform: translateY(-2px)
          }

          .ev-kit-tx {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.55;
            margin: 16px 0 0
          }

          .ev-cards-row {
            position: relative;
            display: flex;
            align-items: center;
            gap: 18px
          }

          .ev-cards {
            display: flex;
            gap: 22px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 6px 4px 14px;
            scrollbar-width: none;
            flex: 1
          }

          .ev-cards::-webkit-scrollbar {
            display: none
          }

          .ev-card {
            position: relative;
            flex: 0 0 calc((100% - 66px)/4);
            height: 380px;
            border-radius: 0;
            overflow: hidden;
            color: #fff;
            display: flex;
            flex-direction: column;
            box-shadow: 0 30px 60px -34px rgba(0, 24, 70, .55);
            transition: transform .3s, box-shadow .3s
          }

          .ev-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 40px 70px -34px rgba(0, 24, 70, .7)
          }

          .ev-card-bg {
            position: absolute;
            inset: 0;
            z-index: 0
          }

          .ev-card[data-bg="0"] .ev-card-bg {
            background: linear-gradient(160deg, #0b1220, #1a1030)
          }

          .ev-card[data-bg="1"] .ev-card-bg {
            background: linear-gradient(160deg, #0a2a1f, #06214f)
          }

          .ev-card[data-bg="2"] .ev-card-bg {
            background: linear-gradient(160deg, #06214f, #030F4D)
          }

          .ev-card[data-bg="3"] .ev-card-bg {
            background: linear-gradient(160deg, #0a8f89, #001846)
          }

          .ev-card-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(120% 80% at 20% 10%, rgba(15, 181, 174, .25), transparent 60%)
          }

          .ev-card-top {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 20px 20px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, .14)
          }

          .ev-av {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            background: #E6F7F6
          }

          .ev-av svg,
          .ev-av img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover
          }

          .ev-name {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 14.5px;
            line-height: 1.2
          }

          .ev-card-quote {
            position: relative;
            z-index: 1;
            padding: 20px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 17px;
            line-height: 1.32;
            flex: 1
          }

          .ev-card-foot {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: flex-start;
            padding: 0 20px 22px;
            font-size: 11px;
            color: rgba(255, 255, 255, .7);
            letter-spacing: .03em
          }

          .ev-role {
            text-transform: uppercase;
            font-weight: 700;
            font-size: 10.5px;
            letter-spacing: .1em;
            color: rgba(15, 181, 174, .92)
          }

          .ev-arrow {
            flex: 0 0 auto;
            width: 78px;
            height: 78px;
            border-radius: 0;
            border: none;
            cursor: pointer;
            color: #fff;
            background: linear-gradient(135deg, var(--teal), var(--navy));
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 20px 44px -18px rgba(15, 181, 174, .7);
            transition: .22s
          }

          .ev-arrow:hover {
            transform: scale(1.06)
          }

          .ev-arrow svg {
            width: 34px;
            height: 34px
          }

          @media(max-width:900px) {
            .ev-bg {
              width: 100%;
              opacity: .5
            }

            .ev-arrow {
              width: 60px;
              height: 60px
            }

            .ev-arrow svg {
              width: 26px;
              height: 26px
            }
          }

          @media(max-width:560px) {
            .evsec .wrap {
              padding: 0 22px
            }

            .ev-card {
              flex-basis: 78%
            }
          }




          .crpage {
            padding: 90px 0 110px;
            background: var(--offwhite)
          }

          .crpage .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          .cr-head {
            text-align: center;
            max-width: 680px;
            margin: 0 auto 56px
          }

          .cr-head h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(30px, 4vw, 44px);
            letter-spacing: -.025em;
            color: #1B1464;
            margin: 0
          }

          .cr-head p {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.7;
            margin: 18px 0 0
          }

          .cr-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px
          }

          .cr-tile {
            border-radius: 0;
            overflow: hidden;
            min-height: 200px;
            opacity: 0;
            transform: translateY(22px);
            animation: crIn .6s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .cr-grid .cr-tile:nth-child(1) {
            animation-delay: .05s
          }

          .cr-grid .cr-tile:nth-child(2) {
            animation-delay: .10s
          }

          .cr-grid .cr-tile:nth-child(3) {
            animation-delay: .15s
          }

          .cr-grid .cr-tile:nth-child(4) {
            animation-delay: .20s
          }

          .cr-grid .cr-tile:nth-child(5) {
            animation-delay: .25s
          }

          .cr-grid .cr-tile:nth-child(6) {
            animation-delay: .30s
          }

          .cr-grid .cr-tile:nth-child(7) {
            animation-delay: .35s
          }

          .cr-grid .cr-tile:nth-child(8) {
            animation-delay: .40s
          }

          .cr-grid .cr-tile:nth-child(9) {
            animation-delay: .45s
          }

          .cr-grid .cr-tile:nth-child(10) {
            animation-delay: .50s
          }

          .cr-grid .cr-tile:nth-child(11) {
            animation-delay: .55s
          }

          .cr-grid .cr-tile:nth-child(12) {
            animation-delay: .60s
          }

          @keyframes crIn {
            to {
              opacity: 1;
              transform: none
            }
          }

          /* quote tiles */
          .cr-quote {
            background: #fff;
            border: 1.5px solid var(--line);
            padding: 34px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: transform .25s, box-shadow .25s
          }

          .cr-quote:hover {
            transform: translateY(-4px);
            box-shadow: 0 26px 50px -30px rgba(0, 24, 70, .3)
          }

          .cr-q {
            font-family: 'Inter', sans-serif;
            font-style: italic;
            font-weight: 500;
            font-size: 19px;
            line-height: 1.45;
            color: var(--navy);
            text-align: center;
            margin: 0
          }

          .cr-line {
            display: block;
            width: 46px;
            height: 2px;
            background: var(--teal);
            margin: 22px auto
          }

          .cr-by {
            display: flex;
            align-items: center;
            gap: 12px;
            justify-content: center
          }

          .cr-av {
            width: 42px;
            height: 42px;
            border-radius: 0;
            overflow: hidden;
            flex-shrink: 0;
            background: #E6F7F6
          }

          .cr-av svg {
            width: 100%;
            height: 100%;
            display: block
          }

          .cr-name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14.5px;
            color: var(--navy)
          }

          .cr-role {
            font-size: 12.5px;
            color: var(--muted);
            margin-top: 1px
          }

          /* photo (graphic) tiles */
          .cr-photo {
            position: relative;
            background: var(--navy);
            transition: transform .25s, box-shadow .25s
          }

          .cr-photo:hover {
            transform: translateY(-4px);
            box-shadow: 0 26px 50px -30px rgba(0, 24, 70, .4)
          }

          .cr-photo svg {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            inset: 0
          }

          @media(max-width:900px) {
            .cr-grid {
              grid-template-columns: 1fr 1fr
            }
          }

          @media(max-width:560px) {
            .crpage {
              padding: 60px 0 72px
            }

            .crpage .wrap {
              padding: 0 22px
            }

            .cr-grid {
              grid-template-columns: 1fr
            }

            .cr-q {
              font-size: 17px
            }
          }




          /* ============ JOB APPLICATION MODAL ============ */

          .ja-modal {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px
          }

          .ja-modal.show {
            display: flex;
            animation: jaFade .25s ease
          }

          @keyframes jaFade {
            from {
              opacity: 0
            }

            to {
              opacity: 1
            }
          }

          .ja-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(3, 15, 77, .55);
            backdrop-filter: blur(4px)
          }

          .ja-card {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 880px;
            max-height: 90vh;
            background: #fff;
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            box-shadow: 0 50px 100px -30px rgba(0, 24, 70, .6);
            animation: jaPop .4s cubic-bezier(.22, 1.3, .4, 1);
            overflow: hidden
          }

          @keyframes jaPop {
            from {
              opacity: 0;
              transform: translateY(20px) scale(.96)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          .ja-x {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 5;
            width: 34px;
            height: 34px;
            border: none;
            background: rgba(255, 255, 255, .14);
            cursor: pointer;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .18s
          }

          .ja-x:hover {
            background: rgba(255, 255, 255, .28)
          }

          .ja-x svg {
            width: 17px;
            height: 17px
          }

          /* LEFT - job description (navy) */
          .ja-left {
            background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
            color: #fff;
            padding: 30px 28px;
            overflow: hidden
          }

          .ja-left .ja-dept {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 11px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #5DBB64
          }

          .ja-left .ja-title {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 22px;
            line-height: 1.12;
            margin: 8px 0 0;
            letter-spacing: -.01em
          }

          .ja-left .ja-sum {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 13px;
            line-height: 1.6;
            color: rgba(255, 255, 255, .78);
            margin: 14px 0 0
          }

          .ja-facts {
            margin: 20px 0 0;
            padding: 0;
            list-style: none
          }

          .ja-facts li {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 0;
            border-top: 1px solid rgba(255, 255, 255, .12);
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            color: rgba(255, 255, 255, .9)
          }

          .ja-facts li b {
            color: #5DBB64;
            font-weight: 600
          }

          .ja-facts svg {
            width: 15px;
            height: 15px;
            stroke: #5DBB64;
            fill: none;
            stroke-width: 2;
            flex: 0 0 auto
          }

          /* RIGHT - form */
          .ja-form {
            padding: 26px 28px;
            background: #e6e8ec36;
            overflow: hidden
          }

          .ja-form-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 17px;
            color: #1B1464
          }

          .ja-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 16px
          }

          .ja-field {
            display: flex;
            flex-direction: column
          }

          .ja-field.full {
            grid-column: 1/-1
          }

          .ja-field label {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 10.5px;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #1B1464;
            margin-bottom: 5px
          }

          .ja-field label .req {
            color: var(--teal)
          }

          .ja-field input,
          .ja-field select {
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            color: var(--ink);
            padding: 9px 11px;
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 0;
            width: 100%;
            transition: .2s
          }

          .ja-field input:focus,
          .ja-field select:focus {
            outline: none;
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(15, 181, 174, .12)
          }

          .ja-file {
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px dashed var(--line);
            background: #fff;
            padding: 9px 11px;
            cursor: pointer;
            transition: .2s
          }

          .ja-file:hover {
            border-color: var(--teal)
          }

          .ja-file svg {
            width: 17px;
            height: 17px;
            stroke: #1B1464;
            fill: none;
            stroke-width: 2;
            flex: 0 0 auto
          }

          .ja-file span {
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            color: var(--muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
          }

          .ja-file input {
            display: none
          }

          .ja-submit {
            margin-top: 16px;
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14px;
            padding: 13px;
            background: #1B1464;
            color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 0;
            transition: .25s
          }

          .ja-submit:hover {
            background: #030F4D
          }

          .ja-submit svg {
            width: 16px;
            height: 16px;
            stroke: #fff
          }

          /* thank-you (replaces form body) */
          .ja-done {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100%;
            padding: 30px 20px
          }

          .ja-done.show {
            display: flex;
            animation: jaFade .4s ease
          }

          .ja-done-ic {
            width: 64px;
            height: 64px;
            margin: 0 auto 18px;
            background: rgba(15, 181, 174, .12);
            color: var(--teal-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%
          }

          .ja-done-ic svg {
            width: 30px;
            height: 30px;
            stroke-dasharray: 28;
            stroke-dashoffset: 28;
            animation: jaCheck .6s .15s ease forwards
          }

          @keyframes jaCheck {
            to {
              stroke-dashoffset: 0
            }
          }

          .ja-done h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 21px;
            color: #1B1464
          }

          .ja-done p {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: var(--muted);
            line-height: 1.6;
            margin: 10px 0 0;
            max-width: 300px
          }

          @media(max-width:720px) {
            .ja-card {
              grid-template-columns: 1fr;
              max-height: 92vh;
              overflow-y: auto
            }

            .ja-left {
              padding: 24px
            }

            .ja-facts {
              display: flex;
              gap: 18px;
              flex-wrap: wrap
            }

            .ja-facts li {
              border: none;
              padding: 0
            }
          }





          /* the old "Assess/Build/Grow" banner above the blog is not wanted here
         any more (it's a shared .pc component still used elsewhere on the site,
         so it's disabled just for this one page rather than deleted) */
          #view-media .pc {
            display: none
          }

          .sblog {
            background: #fff;
            padding: 56px 0 100px
          }

          .sblog-wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 40px
          }

          .sblog-head-main {
            text-align: center;
            margin: 0 0 48px
          }

          .sblog-head {
            margin: 0 0 28px
          }

          .sblog-title {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(30px, 4vw, 44px);
            letter-spacing: -.025em;
            color: var(--navy);
            margin: 0
          }

          .sblog-sub {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(18px, 2.4vw, 26px);
            color: var(--teal);
            margin: 10px 0 0
          }

          /* tabs - pill style, matching Moments page .mom-cats/.mom-cat */
          .sblog-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 0 32px
          }

          .sblog-tab {
            display: inline-flex;
            align-items: center;
            border: 1px solid #d7dbe4;
            background: #fff;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .02em;
            color: #5a6275;
            padding: 9px 18px;
            transition: .2s;
            text-transform: uppercase
          }

          .sblog-tab:hover {
            border-color: #1B1464;
            color: #1B1464
          }

          .sblog-tab.active {
            background: #1B1464;
            border-color: #1B1464;
            color: #fff
          }

          /* meta line */
          .sblog-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--muted);
            font-weight: 600
          }

          .sblog-cat {
            color: var(--navy)
          }

          .sblog-dot {
            color: var(--line)
          }

          /* cards grid - 3D flip (matches Moments page .mom-list sizing/behavior) */
          .sblog-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
            perspective: 1600px
          }

          .sblog-card {
            position: relative;
            height: 460px;
            overflow: hidden;
            background: var(--navy);
            box-shadow: 0 24px 54px -34px rgba(0, 24, 70, .6);
            cursor: pointer;
            opacity: 0;
            transform: translateY(50px) rotateX(5deg);
            transition: opacity .6s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.23, 1, .32, 1), box-shadow .35s;
            transform-style: preserve-3d;
            will-change: transform
          }

          .sblog-card.sblog-visible {
            opacity: 1;
            transform: translateY(0) rotateX(0deg)
          }

          .sblog-flip {
            position: relative;
            width: 100%;
            height: 100%
          }

          .sblog-card:hover .sblog-card-img img {
            transform: scale(1.06)
          }

          @media(prefers-reduced-motion:reduce) {
            .sblog-card {
              opacity: 1;
              transform: none;
              transition: box-shadow .3s
            }
          }

          .sblog-face {
            position: absolute;
            inset: 0;
            border-radius: 0;
            overflow: hidden
          }

          /* front */
          .sblog-front {
            z-index: 1
          }

          .sblog-front .sblog-card-img {
            position: absolute;
            inset: 0;
            height: 100%
          }

          .sblog-front .sblog-card-body {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            padding: 22px 20px;
            background: linear-gradient(to top, rgba(0, 24, 70, .94) 0%, rgba(0, 24, 70, .35) 55%, transparent 100%)
          }

          .sblog-front .sblog-meta,
          .sblog-front .sblog-cat {
            color: #5DBB64
          }

          .sblog-front .sblog-card-h {
            color: #fff;
            font-weight: 600;
            font-size: 17px
          }

          /* top-left frosted category chip, matching Moments page .momd-badge */
          .sblog-badge {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(6px);
            color: #fff;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            padding: 5px 11px;
            text-transform: uppercase
          }

          .sblog-card-img {
            overflow: hidden
          }

          .sblog-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .sblog-card-body {
            padding: 18px 20px
          }

          .sblog-card-h {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: 15px;
            line-height: 1.25;
            letter-spacing: -.01em;
            color: #083998;
            margin: 10px 0 0
          }

          /* back */
          .sblog-back {
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 24px 22px 22px;
            background: linear-gradient(to top, rgb(30 33 88 / 66%) 0%, rgba(0, 24, 70, .85) 60%, rgba(0, 24, 70, .45) 100%);
            opacity: 0;
            transition: opacity .55s ease
          }

          .sblog-card:hover .sblog-back {
            opacity: 1
          }

          .sblog-card-body {
            transition: opacity .35s ease, visibility .35s ease;
          }

          .sblog-card:hover .sblog-card-body,
          .sblog-card:hover .sblog-front .sblog-card-body {
            opacity: 0 !important;
            visibility: hidden !important;
          }

          .sblog-back .sblog-meta {
            color: rgba(255, 255, 255, .65)
          }

          .sblog-back .sblog-cat {
            color: var(--teal)
          }

          .sblog-back-h {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 19px;
            line-height: 1.2;
            color: #fff;
            margin: 8px 0 0
          }

          .sblog-summary-wrap {
            position: relative;
            overflow: hidden;
            margin-top: 12px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .6s ease .12s, transform .6s ease .12s
          }

          .sblog-card:hover .sblog-summary-wrap {
            opacity: 1;
            transform: none
          }

          .sblog-summary {
            font-size: 14px;
            line-height: 1.6;
            color: rgba(255, 255, 255, .82);
            margin: 0
          }

          /* fade out the text as it reaches the bottom of the card */
          .sblog-summary-wrap::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 46px;
            background: linear-gradient(to top, var(--navy), transparent);
            display: none;
          }

          .sblog-more {
            display: inline-block;
            margin-top: 14px;
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            transition: .2s;
            align-self: flex-start
          }

          /* Full-card click target: a real anchor covering the whole card (last
             child, above both faces) so clicking anywhere opens the article.
             Hover still bubbles to .sblog-card, so the flip/hover effect is kept. */
          .sblog-link {
            position: absolute;
            inset: 0;
            z-index: 6;
            transform: translateZ(1px);
          }

          .sblog-more:hover {
            color: var(--teal);
            transform: translateX(3px)
          }

          .sblog-card.is-hidden {
            display: none
          }

          .sblog-empty {
            text-align: center;
            color: var(--muted);
            font-size: 16px;
            margin: 40px 0 0
          }

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

          @media(max-width:860px) {
            .sblog-grid {
              grid-template-columns: 1fr
            }
          }

          @media(max-width:560px) {
            .sblog-wrap {
              padding: 0 22px
            }

            .sblog-grid {
              grid-template-columns: 1fr
            }
          }

          /* load more */
          .sblog-more-wrap {
            text-align: center;
            margin-top: 44px
          }

          .sblog-loadmore {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 15px 34px;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: .22s;
            box-shadow: 0 16px 34px -18px rgba(0, 24, 70, .6)
          }

          .sblog-loadmore:hover {
            background: var(--teal);
            transform: translateY(-2px)
          }

          .sblog-loadmore svg {
            width: 18px;
            height: 18px;
            transition: transform .25s
          }

          .sblog-loadmore:hover svg {
            transform: translateY(3px)
          }

          .sblog-more-wrap.is-hidden {
            display: none
          }








          .mdhero {
            background: #fff;
            padding: 80px 0 0;
            overflow: hidden;
          }

          .md-top {
            text-align: center;
            max-width: 760px;
            margin: 0 auto;
            padding: 0 24px
          }

          .md-eyebrow {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .04em;
            color: var(--muted);
            position: relative;
            padding-left: 18px;
            margin-bottom: 14px
          }

          .md-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 10px;
            height: 10px;
            border-left: 1.5px solid var(--teal);
            border-top: 1.5px solid var(--teal);
            transform: translateY(-50%)
          }

          .md-title {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(28px, 3.4vw, 42px);
            line-height: 1.12;
            letter-spacing: -.02em;
            color: var(--navy);
            margin: 4px 0 0
          }

          .md-title-accent {
            color: #9aa3ad;
            font-weight: 300
          }

          .md-sub {
            max-width: 520px;
            margin: 18px auto 0;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--muted)
          }

          .md-sub .dim {
            color: var(--muted);
            font-weight: 400
          }

          .md-cta {
            margin-top: 30px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 16px 36px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: .22s;
            box-shadow: 0 16px 34px -16px rgba(0, 24, 70, .6)
          }

          .md-cta:hover {
            background: var(--teal);
            transform: translateY(-2px)
          }

          /* curved 3D coverflow */
          .md-stage {
            margin-top: 48px;
            padding-bottom: 40px;
            position: relative;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)
          }

          .md-gallery {
            position: relative;
            width: 100%;
            overflow: hidden
          }

          .md-track {
            display: flex;
            align-items: center;
            gap: 22px;
            width: max-content;
            animation: mdScroll 48s linear infinite
          }

          .md-gallery:hover .md-track {
            animation-play-state: paused
          }

          @keyframes mdScroll {
            from {
              transform: translateX(0)
            }

            to {
              transform: translateX(-50%)
            }
          }

          .md-card {
            position: relative;
            flex: 0 0 auto;
            width: 230px;
            height: 330px;
            border-radius: 0;
            overflow: hidden;
            background: var(--navy);
            box-shadow: 0 26px 54px -28px rgba(0, 24, 70, .5);
            transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
            opacity: 1
          }

          /* all cards the same size - no staggered heights */
          .md-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%
          }

          .md-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .md-card:hover .md-img img {
            transform: scale(1.06)
          }

          .md-img svg {
            width: 100%;
            height: 100%;
            display: block
          }

          /* continuous coverflow fan: every card rotates progressively, hinging toward centre.
         Left-side cards pivot on their RIGHT edge; right-side cards pivot on their LEFT edge. */
          .md-card.center {}

          .md-card.f1 {}

          .md-card.f1.r {
            transform: rotateY(-12deg) translateZ(10px);
            transform-origin: left center;
            margin-right: 0;
            margin-left: -6px
          }

          .md-card.f2 {}

          .md-card.f2.r {
            transform: rotateY(-30deg) translateZ(-20px);
            transform-origin: left center;
            margin-right: 0;
            margin-left: -14px
          }

          .md-card.f3 {}

          .md-card.f3.r {
            transform: rotateY(-50deg) translateZ(-70px);
            transform-origin: left center;
            margin-right: 0;
            margin-left: -30px
          }

          @keyframes mdIn {
            to {
              opacity: 1
            }
          }

          .md-card.f3,
          .md-card.f3.r {
            animation-name: mdInEdge
          }

          @keyframes mdInEdge {
            to {
              opacity: .95
            }
          }

          .md-card:hover {
            transform: scale(1.06) translateY(-6px);
            z-index: 10;
            box-shadow: 0 44px 88px -28px rgba(0, 24, 70, .62)
          }

          .md-cap {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            padding: 18px 16px;
            background: linear-gradient(to top, rgba(0, 24, 70, .92) 0%, rgba(0, 24, 70, .25) 60%, transparent 100%);
            display: flex;
            flex-direction: column;
            gap: 8px
          }

          .md-cap-tag {
            font-family: 'Inter', sans-serif;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #5DBB64
          }

          .md-cap-title {
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -.01em;
            color: #fff
          }

          @media(max-width:600px) {
            .md-card {
              width: 170px;
              height: 250px
            }
          }
          }

          /* ===== Moments coverflow carousel ===== */
          .mcf {
            position: relative;
            margin: 50px auto 0;
            max-width: 1340px;
            padding: 0 70px;
            display: flex;
            align-items: center;
            justify-content: center
          }

          .mcf-track {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            width: 100%;
            overflow: hidden;
            padding: 14px 0
          }

          .mcf-slide {
            flex: 0 0 auto;
            position: relative;
            height: 440px;
            width: 104px;
            overflow: hidden;
            cursor: pointer;
            background: #26344a;
            border-radius: 15px;
            box-shadow: 0 26px 54px -30px rgba(0, 24, 70, .5);
            transition: width .55s cubic-bezier(.6, .01, .05, 1), box-shadow .4s, opacity .4s;
            display: none
          }

          .mcf-slide.is-shown {
            display: block
          }

          .mcf-slide img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform: scale(1);
            transition: transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .mcf-slide:hover img {
            transform: scale(1.05)
          }

          .mcf-slide::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 15px;
            background: linear-gradient(to top, rgba(8, 18, 44, .85), rgba(8, 18, 44, .15) 55%, rgba(8, 18, 44, .25));
            transition: opacity .4s
          }

          .mcf-slide.is-active {
            width: 560px;
            cursor: default;
            box-shadow: 0 40px 90px -36px rgba(0, 24, 70, .65)
          }

          .mcf-slide.is-active::after {
            background: linear-gradient(to top, rgba(8, 18, 44, .82), rgba(8, 18, 44, .12) 60%, transparent)
          }

          /* tasteful slow Ken-Burns zoom on the active image */
          .mcf-slide.is-active img {
            animation: mcfKen 12s ease-out forwards
          }

          @keyframes mcfKen {
            from {
              transform: scale(1.12)
            }

            to {
              transform: scale(1)
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .mcf-slide.is-active img {
              animation: none
            }

            .mcf-slide:hover img {
              transform: none
            }
          }

          /* vertical label for side slides */
          .mcf-vlabel {
            position: absolute;
            left: 50%;
            bottom: 22px;
            transform: translateX(-50%) rotate(180deg);
            writing-mode: vertical-rl;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 18px;
            letter-spacing: .02em;
            color: #fff;
            z-index: 2;
            text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
            white-space: nowrap;
            transition: opacity .3s
          }

          .mcf-slide.is-active .mcf-vlabel {
            opacity: 0;
            pointer-events: none
          }

          /* expanded content for active slide */
          .mcf-body {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            text-align: center;
            padding: 44px 36px;
            opacity: 0;
            transition: opacity .4s .15s;
            pointer-events: none
          }

          .mcf-slide.is-active .mcf-body {
            opacity: 1;
            pointer-events: auto
          }

          .mcf-body .date {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #5DBB64
          }

          .mcf-body .ttl {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(24px, 2.6vw, 34px);
            line-height: 1.1;
            color: #fff;
            margin: 8px 0 0
          }

          .mcf-body .loc {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13.5px;
            font-weight: 300;
            color: rgba(255, 255, 255, .85);
            margin: 12px 0 0
          }

          .mcf-body .loc svg {
            width: 15px;
            height: 15px
          }

          .mcf-show {
            margin: 22px 0 0;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .55);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            padding: 13px 30px;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: .25s;
            white-space: nowrap
          }

          .mcf-show svg {
            width: 17px;
            height: 17px;
            transition: transform .25s
          }

          .mcf-show:hover {
            background: #fff;
            color: #1B1464;
            border-color: #fff
          }

          .mcf-show:hover svg {
            transform: translateX(4px)
          }

          .mcf-badge {
            position: absolute;
            top: 16px;
            left: 16px;
            z-index: 3;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(6px);
            color: #fff;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            padding: 5px 11px;
            text-transform: uppercase;
            opacity: 0;
            transition: opacity .3s
          }

          .mcf-slide.is-active .mcf-badge {
            opacity: 1
          }

          /* arrows */
          .mcf-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: none;
            background: #fff;
            color: #1B1464;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 28px -10px rgba(0, 24, 70, .45);
            transition: .22s
          }

          .mcf-arrow:hover {
            background: #1B1464;
            color: #fff
          }

          .mcf-arrow svg {
            width: 22px;
            height: 22px
          }

          .mcf-prev {
            left: 6px
          }

          .mcf-next {
            right: 6px
          }

          /* scrubber */
          .mcf-scrub {
            max-width: 520px;
            margin: 42px auto 0;
            padding: 0 24px
          }

          .mcf-scrub-track {
            position: relative;
            height: 3px;
            background: #e3e6ee;
            cursor: pointer
          }

          .mcf-scrub-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: #1B1464;
            width: 0;
            transition: width .4s cubic-bezier(.6, .01, .05, 1)
          }

          .mcf-scrub-knob {
            position: absolute;
            top: 50%;
            left: 0;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #1B1464;
            transform: translate(-50%, -50%);
            transition: left .4s cubic-bezier(.6, .01, .05, 1);
            cursor: grab
          }

          .mcf-scrub-knob:active {
            cursor: grabbing
          }

          @media(max-width:880px) {
            .mcf {
              padding: 0 50px
            }

            .mcf-slide {
              height: 380px;
              width: 70px
            }

            .mcf-slide.is-active {
              width: 78vw;
              max-width: 460px
            }
          }

          @media(max-width:560px) {
            .mcf-track {
              gap: 8px
            }

            .mcf-slide:not(.is-active) {
              width: 42px
            }

            .mcf-vlabel {
              font-size: 14px
            }
          }





          .mgal {
            background: var(--offwhite);
            padding: 30px 0 100px
          }

          .mgal .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          .mgal-head {
            text-align: center;
            max-width: 620px;
            margin: 0 auto 48px
          }

          .mgal-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--navy)
          }

          .mgal-eyebrow .dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--teal)
          }

          .mgal-head h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(28px, 3.6vw, 42px);
            letter-spacing: -.025em;
            color: #1B1464;
            margin: 14px 0 0
          }

          .mgal-head p {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.65;
            margin: 14px 0 0
          }

          /* creative masonry: dense grid, tiles span varied rows/cols */
          .mgal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 150px;
            gap: 16px;
            grid-auto-flow: dense
          }

          .mgal-tile {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            background: var(--navy);
            cursor: pointer;
            opacity: 0;
            transform: translateY(24px) scale(.98);
            animation: mgIn .6s cubic-bezier(.22, 1, .36, 1) forwards
          }

          @keyframes mgIn {
            to {
              opacity: 1;
              transform: none
            }
          }

          .mgal-tile svg {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform .5s cubic-bezier(.22, 1, .36, 1)
          }

          .mgal-tile:hover svg {
            transform: scale(1.08)
          }

          /* shape variants */
          .mgal-tile.wide {
            grid-column: span 2
          }

          .mgal-tile.tall {
            grid-row: span 2
          }

          .mgal-tile.big {
            grid-column: span 2;
            grid-row: span 2
          }

          /* caption overlay on hover */
          .mgal-cap {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 18px;
            background: linear-gradient(to top, rgba(3, 15, 77, .85), rgba(3, 15, 77, .1) 55%, transparent);
            opacity: 0;
            transition: opacity .3s;
            z-index: 2
          }

          .mgal-tile:hover .mgal-cap {
            opacity: 1
          }

          .mgal-cap .t {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: #fff;
            transform: translateY(8px);
            transition: transform .3s
          }

          .mgal-cap .s {
            font-size: 12px;
            color: var(--teal);
            font-weight: 600;
            margin-top: 3px;
            transform: translateY(8px);
            transition: transform .3s .04s
          }

          .mgal-tile:hover .mgal-cap .t,
          .mgal-tile:hover .mgal-cap .s {
            transform: none
          }

          .mgal-tag {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 2;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(6px);
            color: #fff;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            padding: 5px 11px;
            border-radius: 0;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(-6px);
            transition: .3s
          }

          .mgal-tile:hover .mgal-tag {
            opacity: 1;
            transform: none
          }

          .mgal-tile.hidden {
            display: none
          }

          .mgal-more-wrap {
            text-align: center;
            margin-top: 44px
          }

          .mgal-more {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 15px 34px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: .22s;
            box-shadow: 0 16px 34px -18px rgba(0, 24, 70, .6)
          }

          .mgal-more:hover {
            background: var(--teal);
            transform: translateY(-2px)
          }

          .mgal-more svg {
            width: 18px;
            height: 18px;
            transition: transform .25s
          }

          .mgal-more:hover svg {
            transform: translateY(3px)
          }

          .mgal-more.done {
            background: var(--line);
            color: var(--muted);
            cursor: default;
            box-shadow: none;
            transform: none
          }

          .mgal-more.done svg {
            display: none
          }

          .mgal-count {
            color: var(--muted);
            font-size: 13px;
            margin: 14px 0 0
          }

          @media(max-width:760px) {
            .mgal-grid {
              grid-template-columns: repeat(2, 1fr);
              grid-auto-rows: 130px
            }

            .mgal-tile.big {
              grid-column: span 2
            }
          }

          @media(max-width:560px) {
            .mgal .wrap {
              padding: 0 22px
            }
          }





          /* ===== Moment & Media Details page ===== */
          .md2 {
            background: #ffffff;
            min-height: 90vh;
            padding: 40px 0 120px
          }

          .md2-wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 32px
          }

          .md2-back {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #1B1464;
            color: #ffffff;
            border: 1px solid #1B1464;
            border-radius: 40px;
            padding: 11px 24px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all .25s cubic-bezier(.22, 1, .36, 1);
            box-shadow: 0 8px 20px -8px rgba(27, 20, 100, .35)
          }

          .md2-back:hover {
            background: #030F4D;
            border-color: #030F4D;
            color: #ffffff;
            transform: translateX(-4px);
            box-shadow: 0 12px 25px -6px rgba(3, 15, 77, .45)
          }

          .md2-back svg {
            width: 18px;
            height: 18px;
            transition: transform .25s ease
          }

          .md2-back:hover svg {
            transform: translateX(-2px)
          }

          .md2-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 32px 0 0;
            background: rgba(15, 181, 174, .1);
            color: #0A8F89;
            border: 1px solid rgba(15, 181, 174, .25);
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 6px 16px;
            border-radius: 20px;
            box-shadow: 0 4px 12px rgba(15, 181, 174, .12)
          }

          .md2-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700 !important;
            font-size: clamp(32px, 4.4vw, 52px);
            line-height: 1.12;
            color: #1B1464;
            margin: 18px 0 0;
            letter-spacing: -.025em
          }

          .md2-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 28px;
            margin: 20px 0 0;
            padding-bottom: 24px;
            border-bottom: 1px solid #E6E8EC
          }

          .md2-meta .mi {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            color: #5B6472;
            font-weight: 500
          }

          .md2-meta .mi svg {
            width: 18px;
            height: 18px;
            color: #0FB5AE;
            flex-shrink: 0
          }

          /* hero / gallery */
          .md2-hero {
            margin: 32px 0 0;
            border-radius: 4px;
            overflow: hidden;
            background: #0B1220;
            box-shadow: 0 25px 60px -20px rgba(0, 24, 70, .25);
            aspect-ratio: 16/9;
            position: relative;
            border: 1px solid rgba(230, 232, 236, .6)
          }

          .md2-hero img,
          .md2-hero iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border: 0
          }

          /* caption overlay on the hero image */
          .md2-hero-cap {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            padding: 36px 32px 28px;
            background: linear-gradient(to top, rgba(11, 18, 32, .92) 0%, rgba(11, 18, 32, .4) 65%, transparent 100%);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
            gap: 12px;
            pointer-events: none
          }

          .md2-hero-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 24px
          }

          .md2-hc {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, .4)
          }

          .md2-hc svg {
            width: 18px;
            height: 18px;
            color: #0FB5AE
          }

          .md2-hero-guests {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, .92);
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 500
          }

          .md2-hero-guests svg {
            width: 17px;
            height: 17px;
            color: #0FB5AE;
            flex-shrink: 0
          }

          .md2-gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin: 18px 0 0
          }

          .md2-thumb {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 1;
            cursor: pointer;
            border: 3px solid transparent;
            transition: all .25s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
          }

          .md2-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .4s ease
          }

          .md2-thumb:hover img {
            transform: scale(1.08)
          }

          .md2-thumb.is-active {
            border-color: #0FB5AE;
            box-shadow: 0 6px 18px rgba(15, 181, 174, .35)
          }

          /* body */
          .md2-content {
            font-family: 'Inter', sans-serif;
            font-size: 17.5px;
            line-height: 1.8;
            color: #334155;
            margin: 36px 0 0;
            max-width: 100%
          }

          .md2-content p {
            margin: 0 0 20px
          }

          .md2-quote {
            margin: 40px 0;
            padding: 30px 36px;
            background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
            border-left: 4px solid #0FB5AE;
            border-radius: 0 16px 16px 0;
            font-family: 'Inter', sans-serif;
            font-style: italic;
            font-size: 21px;
            line-height: 1.55;
            color: #1B1464;
            box-shadow: 0 10px 30px -15px rgba(0, 24, 70, .08)
          }

          .md2-quote cite {
            display: block;
            margin-top: 14px;
            font-style: normal;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #0A8F89
          }

          /* facts grid (location + guests) */
          .md2-facts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 36px 0 0
          }

          .md2-fact {
            background: #ffffff;
            border: 1px solid #E6E8EC;
            border-radius: 14px;
            padding: 24px;
            box-shadow: 0 8px 24px -10px rgba(0, 24, 70, .06)
          }

          .md2-fact h4 {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #0FB5AE;
            margin: 0 0 14px
          }

          .md2-fact .loc {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            color: #1B1464;
            font-weight: 600
          }

          .md2-fact .loc svg {
            width: 19px;
            height: 19px;
            color: #0FB5AE
          }

          .md2-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px
          }

          .md2-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 30px;
            padding: 6px 16px 6px 8px;
            font-size: 13.5px;
            color: #1E293B;
            font-weight: 600
          }

          .md2-chip .av {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #1B1464;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter', sans-serif;
            font-size: 11.5px;
            font-weight: 700
          }

          /* related */
          .md2-related {
            margin: 64px 0 0;
            padding-top: 40px;
            border-top: 1px solid #E6E8EC
          }

          .md2-related h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 30px;
            color: #1B1464;
            margin: 0 0 28px;
            letter-spacing: -.02em
          }

          .md2-rel-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px
          }

          .md2-rel-card {
            position: relative;
            display: block;
            overflow: hidden;
            aspect-ratio: 3/4;
            cursor: pointer;
            border-radius: 4px;
            background: #0B1220;
            border: none;
            box-shadow: 0 16px 40px -18px rgba(0, 24, 70, .35);
            transition: all .35s cubic-bezier(.22, 1, .36, 1)
          }

          .md2-rel-card:hover {
            box-shadow: 0 24px 50px -15px rgba(0, 24, 70, .5);
            transform: translateY(-4px)
          }

          .md2-rel-img {
            position: absolute;
            inset: 0;
            overflow: hidden
          }

          .md2-rel-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .7s cubic-bezier(.22, 1, .36, 1)
          }

          .md2-rel-card:hover .md2-rel-img img {
            transform: scale(1.08)
          }

          .md2-rel-ov {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 24px;
            background: linear-gradient(to top, rgba(0, 24, 70, .95) 0%, rgba(0, 24, 70, .3) 60%, transparent 100%)
          }

          .md2-rel-date {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #0FB5AE
          }

          .md2-rel-h {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 20px;
            line-height: 1.25;
            color: #ffffff;
            margin: 8px 0 0
          }

          .md2-rel-loc {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13.5px;
            font-weight: 400;
            line-height: 1.5;
            color: rgba(255, 255, 255, .85);
            margin: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .4s ease, opacity .3s ease, margin .3s ease
          }

          .md2-rel-loc svg {
            width: 15px;
            height: 15px;
            color: #0FB5AE;
            flex-shrink: 0
          }

          .md2-rel-card:hover .md2-rel-loc {
            max-height: 80px;
            opacity: 1;
            margin-top: 10px
          }

          .md2-rel-badge {
            position: absolute;
            top: 16px;
            left: 16px;
            z-index: 2;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #1B1464;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .06em;
            padding: 6px 14px;
            border-radius: 20px;
            text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
          }

          @media(max-width:760px) {
            .md2-wrap {
              padding: 0 20px
            }

            .md2-facts {
              grid-template-columns: 1fr
            }

            .md2-rel-grid {
              grid-template-columns: 1fr
            }

            .md2-gallery {
              grid-template-columns: repeat(3, 1fr)
            }
          }


          .mom {
            background: #fff;
            min-height: 90vh;
            padding: 70px 0 110px
          }

          .mom-wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 40px
          }

          .mom-head {
            max-width: 680px;
            margin: 0 0 44px
          }

          .mom-eyebrow {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #C08552
          }

          .mom-title {
            font-family: 'Inter', sans-serif;
            font-weight: 100;
            font-size: clamp(34px, 5vw, 40px);
            line-height: 1.05;
            color: #3A2E22;
            margin: 14px 0 0;
            letter-spacing: -.01em
          }

          .mom-lead {
            font-size: 16px;
            line-height: 1.6;
            color: #7A6A57;
            margin: 5px 0 0;
            max-width: 560px
          }

          .mom-layout {
            display: block
          }

          /* Director-card style grid (matches Team page .tt-dir) - 2 per row, News & Updates scale */
          .mom-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px
          }

          .new-mom-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 28px;
          }

          .mom-card {
            position: relative;
            display: block;
            height: 460px;
            overflow: hidden;
            cursor: pointer;
            border-radius: 0;
            background: #26344a;
            border: none;
            margin: 0;
            box-shadow: 0 24px 54px -34px rgba(0, 24, 70, .6);
            opacity: 0;
            transform: translateY(22px) scale(.98);
            animation: momIn .6s cubic-bezier(.22, 1, .36, 1) forwards;
            transition: box-shadow .35s
          }

          @keyframes momIn {
            to {
              opacity: 1;
              transform: none
            }
          }

          .mom-card:hover {
            transform: none;
            box-shadow: 0 30px 64px -30px rgba(0, 24, 70, .7)
          }

          .mom-card.is-active {
            opacity: .25;
            pointer-events: none
          }

          /* Moments page grid: scroll-triggered reveal instead of the plain on-paint
         .momIn animation - each card fades/rises in only as it enters the viewport */
          #momList .mom-card {
            opacity: 0;
            transform: translateY(22px) scale(.98);
            animation: none;
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .35s
          }

          #momList .mom-card.mom-visible {
            opacity: 1;
            transform: none
          }

          @media(prefers-reduced-motion:reduce) {
            #momList .mom-card {
              opacity: 1;
              transform: none;
              transition: box-shadow .35s
            }
          }

          /* Homepage News & Updates strip: same scroll-triggered reveal as the Moments page */
          .hm-news .mom-card {
            opacity: 0;
            transform: translateY(22px) scale(.98);
            animation: none;
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .35s
          }

          .hm-news .mom-card.mom-visible {
            opacity: 1;
            transform: none
          }

          @media(prefers-reduced-motion:reduce) {
            .hm-news .mom-card {
              opacity: 1;
              transform: none;
              transition: box-shadow .35s
            }
          }

          /* Director-style inner: image + gradient + text reveal */
          .momd-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .7s cubic-bezier(.22, 1, .36, 1)
          }

          .mom-card:hover .momd-img {
            transform: scale(1.06)
          }

          .momd-ov {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
            background: linear-gradient(to top, rgba(3, 37, 125, .92), rgba(0, 0, 0, .31) 55%, rgba(1, 14, 18, 0))
          }

          .momd-role {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #5DBB64
          }

          .momd-name {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 24px;
            color: #fff;
            line-height: 1.12;
            margin: 6px 0 0
          }

          .momd-meta {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.5;
            color: rgba(255, 255, 255, .82);
            margin: 12px 0 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .5s, opacity .4s, margin .4s;
            display: flex;
            align-items: center;
            gap: 7px
          }

          .momd-meta svg {
            width: 15px;
            height: 15px;
            flex: 0 0 auto
          }

          .mom-card:hover .momd-meta {
            max-height: 120px;
            opacity: 1;
            margin-top: 12px
          }

          .momd-badge {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(6px);
            color: #fff;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            padding: 5px 11px;
            text-transform: uppercase
          }

          /* Flip-card back face - same interaction pattern as the News & Updates cards
         (.sblog-flip/.sblog-back): front shows the photo + title, back reveals a
         quote/summary on hover */
          .mom-flip {
            position: relative;
            width: 100%;
            height: 100%
          }

          .mom-face {
            position: absolute;
            inset: 0;
            overflow: hidden
          }

          .mom-front {
            z-index: 1
          }

          .mom-back {
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 26px 26px 24px;
            background: linear-gradient(to top, rgba(35, 24, 12, .97) 0%, rgba(43, 30, 15, .86) 60%, rgba(43, 30, 15, .4) 100%);
            opacity: 0;
            transition: opacity .55s ease
          }

          .mom-card:hover .mom-back {
            opacity: 1
          }

          .mom-back-badge {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #e7b98a
          }

          .mom-back-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 21px;
            line-height: 1.22;
            color: #fff;
            margin: 9px 0 0
          }

          .mom-summary-wrap {
            position: relative;
            overflow: hidden;
            margin-top: 12px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .6s ease .12s, transform .6s ease .12s
          }

          .mom-card:hover .mom-summary-wrap {
            opacity: 1;
            transform: none
          }

          .mom-summary {
            font-size: 14.5px;
            line-height: 1.62;
            font-style: italic;
            color: rgba(255, 255, 255, .85);
            margin: 0
          }

          .mom-more {
            display: inline-block;
            margin-top: 16px;
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            transition: .2s;
            align-self: flex-start
          }

          .mom-more:hover {
            color: #e7b98a;
            transform: translateX(3px)
          }

          /* ===== Category filter tabs ===== */
          .mom-cats {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 0 32px
          }

          .mom-cat {
            display: inline-flex;
            align-items: center;
            border: 1px solid #d7dbe4;
            background: #fff;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .02em;
            color: #5a6275;
            padding: 9px 18px;
            transition: .2s;
            text-transform: uppercase
          }

          .mom-cat:hover {
            border-color: #1B1464;
            color: #1B1464
          }

          .mom-cat.is-active {
            background: #1B1464;
            border-color: #1B1464;
            color: #fff
          }

          /* ===== Reels mode: vertical scroll-snap, phone-style ===== */
          .mom-reels {
            height: 88vh;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
            background: #fff;
            scrollbar-width: none
          }

          .mom-reels::-webkit-scrollbar {
            display: none
          }

          .mom-reels-track {
            display: block
          }

          .mom-reel {
            height: 88vh;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px
          }

          .mom-reel-card {
            position: relative;
            width: auto;
            height: min(80vh, 720px);
            aspect-ratio: 9/16;
            max-width: 92vw;
            overflow: hidden;
            cursor: pointer;
            background: #26344a;
            box-shadow: 0 40px 90px -40px rgba(0, 24, 70, .6)
          }

          .mom-reel-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .8s cubic-bezier(.22, 1, .36, 1)
          }

          .mom-reel-card:hover .mom-reel-img {
            transform: scale(1.04)
          }

          .mom-reel-ov {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 34px 30px;
            background: linear-gradient(to top, rgba(8, 18, 44, .94), rgba(8, 18, 44, .15) 50%, transparent)
          }

          .mom-reel-role {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #5DBB64
          }

          .mom-reel-name {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 30px;
            color: #fff;
            line-height: 1.12;
            margin: 8px 0 0
          }

          .mom-reel-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14.5px;
            font-weight: 300;
            color: rgba(255, 255, 255, .85);
            margin: 16px 0 0
          }

          .mom-reel-meta svg {
            width: 16px;
            height: 16px;
            flex: 0 0 auto
          }

          .mom-reel-badge {
            position: absolute;
            top: 18px;
            left: 18px;
            z-index: 2;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(6px);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
            padding: 6px 13px;
            text-transform: uppercase
          }

          /* scroll hint on first reel */
          .mom-reel-hint {
            position: absolute;
            bottom: 22px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: rgba(255, 255, 255, .7);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            animation: reelBounce 1.8s ease-in-out infinite
          }

          .mom-reel-hint svg {
            width: 20px;
            height: 20px
          }

          @keyframes reelBounce {

            0%,
            100% {
              transform: translate(-50%, 0)
            }

            50% {
              transform: translate(-50%, 7px)
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .mom-reel-hint {
              animation: none
            }

            .mom-reels {
              scroll-behavior: auto
            }
          }

          /* image panel - natural height gives the staggered masonry look */
          .mom-thumb {
            position: relative;
            overflow: hidden;
            background: #26344a
          }

          .mom-thumb img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .mom-card:hover .mom-thumb img {
            transform: scale(1.06)
          }

          .mom-badge {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(6px);
            color: #C08552;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 6px 13px;
            border-radius: 30px
          }

          .mom-thumb-cap {
            position: absolute;
            bottom: 14px;
            left: 14px;
            z-index: 2;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .06em;
            text-shadow: 0 2px 8px rgba(0, 0, 0, .4)
          }

          /* hover overlay over the photo */
          .mom-thumb-hover {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, rgba(20, 14, 8, .05), rgba(20, 14, 8, .55));
            opacity: 0;
            transition: opacity .4s ease
          }

          .mom-card:hover .mom-thumb-hover {
            opacity: 1
          }

          .mom-relive {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #fff;
            color: #3A2E22;
            font-family: 'Inter', sans-serif;
            font-weight: 100;
            font-size: 14px;
            padding: 12px 22px;
            border-radius: 0;
            box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .5);
            transform: translateY(12px) scale(.96);
            transition: transform .45s cubic-bezier(.22, 1, .36, 1)
          }

          .mom-card:hover .mom-relive {
            transform: none
          }

          .mom-relive svg {
            width: 18px;
            height: 18px;
            color: #C08552
          }

          /* body */
          .mom-card-body {
            display: flex;
            flex-direction: column;
            padding: 20px 22px 22px
          }

          .mom-card-date {
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 800;
            color: #C08552;
            letter-spacing: .04em;
            text-transform: uppercase
          }

          .mom-card-h {
            font-family: 'Inter', sans-serif;
            font-size: 20px;
            line-height: 1.18;
            color: #07275d;
            margin: 9px 0 0
          }

          .mom-card-loc {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13.5px;
            color: #9A8B77;
            margin: 12px 0 0
          }

          .mom-card-loc svg {
            width: 15px;
            height: 15px
          }

          .mom-card-go {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 100;
            color: #0b1220;
            margin: 16px 0 0;
            transition: gap .25s
          }

          .mom-card:hover .mom-card-go {
            gap: 11px
          }

          /* load more */
          .mom-more-wrap {
            text-align: center;
            margin-top: 40px
          }

          .mom-loadmore {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #1b2b4b;
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 15px 34px;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: .22s;
            box-shadow: 0 16px 34px -18px rgba(58, 46, 34, .7)
          }

          .mom-loadmore:hover {
            background: #1b2b4b;
            transform: translateY(-2px)
          }

          .mom-loadmore svg {
            width: 18px;
            height: 18px;
            transition: transform .25s
          }

          .mom-loadmore:hover svg {
            transform: translateY(3px)
          }

          /* ===== detail overlay ===== */
          .mom-detail {
            position: fixed;
            inset: 0;
            z-index: 200;
            display: none
          }

          .mom-detail.is-open {
            display: block
          }

          .mom-detail-scrim {
            position: absolute;
            inset: 0;
            background: rgba(40, 30, 20, .5);
            backdrop-filter: blur(4px);
            opacity: 0;
            transition: opacity .45s ease
          }

          .mom-detail.is-open .mom-detail-scrim {
            opacity: 1
          }

          .mom-detail-card {
            position: absolute;
            left: 50%;
            top: 50%;
            width: min(960px, 92vw);
            max-height: 90vh;
            transform: translate(-50%, -50%);
            background: #fff;
            border-radius: 0;
            overflow: hidden;
            display: grid;
            grid-template-rows: auto 1fr;
            box-shadow: 0 50px 120px -40px rgba(40, 30, 20, .7);
            opacity: 0;
            transform: translate(-50%, -46%) scale(.96);
            transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1)
          }

          .mom-detail.is-open .mom-detail-card {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1)
          }

          .mom-detail-card {
            overflow-y: auto
          }

          .mom-detail-media {
            position: relative;
            width: 100%;
            height: 340px;
            background: #EADFCD
          }

          .mom-detail-media img,
          .mom-detail-media iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border: 0
          }

          .mom-detail-media .mom-vbadge {
            position: absolute;
            bottom: 14px;
            left: 18px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, .55);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 700;
            padding: 7px 13px;
            border-radius: 30px
          }

          .mom-detail-media .mom-vbadge svg {
            width: 14px;
            height: 14px
          }

          .mom-detail-body {
            padding: 30px 38px 40px
          }

          .mom-d-date {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .04em;
            color: #C08552;
            text-transform: uppercase
          }

          .mom-d-h {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: clamp(26px, 3.4vw, 38px);
            line-height: 1.1;
            color: #3A2E22;
            margin: 10px 0 0
          }

          .mom-d-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 22px;
            margin: 18px 0 0
          }

          .mom-d-meta .mi {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 14px;
            color: #7A6A57
          }

          .mom-d-meta .mi svg {
            width: 16px;
            height: 16px;
            color: #C08552
          }

          .mom-d-content {
            font-size: 16px;
            line-height: 1.75;
            color: #5C4F40;
            margin: 24px 0 0
          }

          .mom-d-content p {
            margin: 0 0 14px
          }

          .mom-d-quote {
            margin: 26px 0 0;
            padding: 22px 26px;
            background: #FBF4EA;
            border-left: 4px solid #C08552;
            border-radius: 0 16px 16px 0;
            font-family: 'Inter', sans-serif;
            font-style: italic;
            font-size: 19px;
            line-height: 1.5;
            color: #3A2E22
          }

          .mom-d-quote cite {
            display: block;
            margin-top: 12px;
            font-style: normal;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: #9A8B77
          }

          .mom-d-guests {
            margin: 26px 0 0
          }

          .mom-d-guests h4 {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #9A8B77;
            margin: 0 0 12px
          }

          .mom-d-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 9px
          }

          .mom-d-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #FBF4EA;
            border: 1px solid #EFE0CC;
            border-radius: 0;
            padding: 6px 14px 6px 6px;
            font-size: 13.5px;
            color: #5C4F40;
            font-weight: 600
          }

          .mom-d-chip .av {
            width: 26px;
            height: 26px;
            border-radius: 0;
            background: #C08552;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 800
          }

          .mom-close {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 3;
            width: 42px;
            height: 42px;
            border-radius: 0;
            border: none;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(6px);
            color: #3A2E22;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4);
            transition: .2s
          }

          .mom-close:hover {
            background: #fff;
            transform: rotate(90deg)
          }

          .mom-close svg {
            width: 20px;
            height: 20px
          }

          @media(max-width:880px) {
            .mom-list {
              grid-template-columns: 1fr
            }

            .mom-detail-media {
              height: 240px
            }

            .mom-detail-body {
              padding: 24px 22px 32px
            }
          }

          @media(max-width:560px) {
            .mom-wrap {
              padding: 0 22px
            }

            .mom-list {
              grid-template-columns: 1fr
            }

            .mom-card {
              height: 380px
            }

            .mom-card-h {
              font-size: 20px
            }

            /* on touch devices show the relive overlay so it isn't hover-locked */
            .mom-thumb-hover {
              opacity: 1;
              background: linear-gradient(180deg, rgba(20, 14, 8, .05), rgba(20, 14, 8, .5))
            }

            .mom-relive {
              transform: none
            }
          }










          .gal2 {
            background: #F7F8FA;
            min-height: 90vh;
            padding: 0 0 0px
          }

          .gal2-wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 40px
          }

          /* ===== HERO ===== */
          .gal2-hero {
            display: grid;
            grid-template-columns: 1fr 1.05fr;
            gap: 50px;
            align-items: center;
            padding: 56px 0 64px;
            min-height: calc(100vh - 80px)
          }

          .gal2-hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 9px 18px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--navy);
            box-shadow: 0 10px 26px -20px rgba(0, 24, 70, .5)
          }

          .gal2-hero-pill svg {
            width: 18px;
            height: 18px;
            color: var(--teal)
          }

          .gal2-hero-h {
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(28px, 3.6vw, 42px);
            letter-spacing: -.025em;
            color: #1B1464;
            line-height: 1.05
          }


          .gal2-hero-sub {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.65;
            margin: 16px 0 0;
            max-width: 440px
          }

          .gal2-hero-btns {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin: 34px 0 0
          }

          .gal2-btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            border-radius: 0;
            padding: 15px 32px;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: .22s;
            border: 1.5px solid transparent
          }

          .gal2-btn.primary {
            background: var(--teal-dark);
            color: #fff;
            box-shadow: 0 16px 34px -16px rgba(10, 143, 137, .7)
          }

          .gal2-btn.primary:hover {
            background: var(--navy);
            transform: translateY(-2px)
          }

          .gal2-btn.ghost {
            background: #fff;
            color: var(--navy);
            border-color: var(--line)
          }

          .gal2-btn.ghost:hover {
            border-color: var(--teal);
            transform: translateY(-2px)
          }

          .gal2-btn.ghost svg {
            width: 15px;
            height: 15px;
            color: var(--teal-dark)
          }

          /* hero collage */
          .gal2-hero-right {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            align-items: center;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%)
          }

          .gal2-col {
            display: flex;
            flex-direction: column;
            gap: 14px
          }

          .gal2-col:nth-child(2) {
            margin-top: -26px
          }

          .gal2-col:nth-child(3) {
            margin-top: 18px
          }

          .gal2-h-img {
            border-radius: 0;
            overflow: hidden;
            background: var(--line);
            box-shadow: 0 22px 50px -34px rgba(0, 24, 70, .55)
          }

          .gal2-h-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .gal2-h-img:hover img {
            transform: scale(1.06)
          }

          .gal2-h-img.tall {
            aspect-ratio: 3/4
          }

          .gal2-h-img:not(.tall) {
            aspect-ratio: 1
          }

          /* slow, randomised vertical drift for the Life at Saveer hero tiles */
          @keyframes gal2FloatA {

            0%,
            100% {
              transform: translateY(0)
            }

            50% {
              transform: translateY(-16px)
            }
          }

          @keyframes gal2FloatB {

            0%,
            100% {
              transform: translateY(0)
            }

            50% {
              transform: translateY(14px)
            }
          }

          @keyframes gal2FloatC {

            0%,
            100% {
              transform: translateY(-6px)
            }

            50% {
              transform: translateY(12px)
            }
          }

          .gal2-hero-right .gal2-h-img {
            will-change: transform;
            animation: gal2FloatA 7s ease-in-out infinite
          }

          .gal2-hero-right .gal2-col:nth-child(1) .gal2-h-img:nth-child(1) {
            animation: gal2FloatA 8.5s ease-in-out infinite;
            animation-delay: -1.2s
          }

          .gal2-hero-right .gal2-col:nth-child(1) .gal2-h-img:nth-child(2) {
            animation: gal2FloatB 6.4s ease-in-out infinite;
            animation-delay: -3.1s
          }

          .gal2-hero-right .gal2-col:nth-child(2) .gal2-h-img:nth-child(1) {
            animation: gal2FloatC 9.2s ease-in-out infinite;
            animation-delay: -0.6s
          }

          .gal2-hero-right .gal2-col:nth-child(2) .gal2-h-img:nth-child(3) {
            animation: gal2FloatA 7.6s ease-in-out infinite;
            animation-delay: -4.3s
          }

          .gal2-hero-right .gal2-col:nth-child(3) .gal2-h-img:nth-child(1) {
            animation: gal2FloatB 8.1s ease-in-out infinite;
            animation-delay: -2.4s
          }

          .gal2-hero-right .gal2-col:nth-child(3) .gal2-h-img:nth-child(2) {
            animation: gal2FloatC 6.8s ease-in-out infinite;
            animation-delay: -5.0s
          }

          .gal2-hero-right .gal2-col:nth-child(3) .gal2-h-img:nth-child(3) {
            animation: gal2FloatA 9.5s ease-in-out infinite;
            animation-delay: -1.8s
          }

          @media(prefers-reduced-motion:reduce) {
            .gal2-hero-right .gal2-h-img {
              animation: none
            }
          }

          .gal2-h-stat {
            border-radius: 0;
            background: linear-gradient(20deg, #084699, #010a46);
            color: #fff;
            padding: 10px 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            aspect-ratio: 1;
            box-shadow: 0 22px 50px -30px rgba(1, 10, 70, .7)
          }

          .gal2-h-stat .big {
            font-family: 'Inter', sans-serif;
            font-style: italic;
            font-size: clamp(20px, 2vw, 26px);
            line-height: 1.1;
            font-weight: 400
          }

          .gal2-stat-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px
          }

          .gal2-avs {
            display: flex
          }

          .gal2-avs .av {
            width: 30px;
            height: 30px;
            border-radius: 0;
            border: 2px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 800;
            color: #fff;
            margin-left: -9px
          }

          .gal2-avs .av:first-child {
            margin-left: 0
          }

          .gal2-avs .a1 {
            background: #3A4654
          }

          .gal2-avs .a2 {
            background: #0A8F89
          }

          .gal2-avs .a3 {
            background: #C0392B
          }

          .gal2-stat-num {
            background: rgba(255, 255, 255, .22);
            border-radius: 0;
            padding: 5px 13px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 800
          }

          .gal2-head {
            max-width: 680px;
            margin: 0 0 40px
          }

          .gal2-eyebrow {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 13px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .gal2-title {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(30px, 4.5vw, 48px);
            line-height: 1.04;
            letter-spacing: -.025em;
            color: var(--navy);
            margin: 12px 0 0
          }

          .gal2-lead {
            font-size: 17px;
            line-height: 1.6;
            color: var(--muted);
            margin: 14px 0 0
          }

          /* ===== Coverflow slider (cvf-) ===== */
          .cvf {
            position: relative;
            margin: 64px auto 0;
            max-width: 1100px;
            padding: 0 60px
          }

          .cvf-stage {
            position: relative;
            height: 440px;
            transform-style: preserve-3d;
            perspective: 1600px
          }

          .cvf-slide {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 360px;
            height: 420px;
            margin: -210px 0 0 -180px;
            overflow: hidden;
            cursor: pointer;
            transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .55s cubic-bezier(.22, 1, .36, 1), filter .55s;
            box-shadow: 0 30px 60px -28px rgba(0, 24, 70, .55);
            will-change: transform, opacity;
            background: #0a1224
          }

          .cvf-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none
          }

          .cvf-slide .cvf-cap {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 40px 22px 18px;
            background: linear-gradient(to top, rgba(0, 24, 70, .88), rgba(0, 24, 70, 0));
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 600;
            letter-spacing: -.01em;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity .4s .1s, transform .4s .1s
          }

          .cvf-slide.is-active .cvf-cap {
            opacity: 1;
            transform: translateY(0)
          }

          /* depth positions set inline by JS via data; base states here */
          .cvf-slide.is-active {
            filter: none;
            opacity: 1;
            z-index: 5
          }

          .cvf-slide.is-near {
            filter: saturate(.85) brightness(.78);
            opacity: .92;
            z-index: 4
          }

          .cvf-slide.is-far {
            filter: saturate(.65) brightness(.6);
            opacity: .6;
            z-index: 3
          }

          .cvf-slide.is-hidden {
            opacity: 0;
            z-index: 1;
            pointer-events: none
          }

          .cvf-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #1B1464;
            border: 1px solid var(--line);
            cursor: pointer;
            transition: .2s;
            box-shadow: 0 14px 30px -16px rgba(0, 24, 70, .5)
          }

          .cvf-arrow:hover {
            background: #1B1464;
            color: #fff;
            border-color: #1B1464
          }

          .cvf-arrow svg {
            width: 22px;
            height: 22px
          }

          .cvf-arrow.prev {
            left: 0
          }

          .cvf-arrow.next {
            right: 0
          }

          .cvf-dots {
            display: flex;
            justify-content: center;
            gap: 9px;
            margin-top: 34px
          }

          .cvf-dots button {
            width: 9px;
            height: 9px;
            padding: 0;
            border: none;
            cursor: pointer;
            background: #cdd4dd;
            transition: .25s;
            border-radius: 0
          }

          .cvf-dots button.on {
            background: #1B1464;
            width: 26px
          }

          @media(max-width:720px) {
            .cvf {
              padding: 0 14px
            }

            .cvf-stage {
              height: 360px;
              perspective: 1100px
            }

            .cvf-slide {
              width: 240px;
              height: 320px;
              margin: -160px 0 0 -120px
            }

            .cvf-arrow {
              width: 42px;
              height: 42px
            }

            .cvf-arrow.prev {
              left: -2px
            }

            .cvf-arrow.next {
              right: -2px
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .cvf-slide {
              transition: opacity .3s
            }
          }

          /* masonry */
          .gal2-grid {
            column-count: 4;
            column-gap: 16px
          }

          .gal2-item {
            position: relative;
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
            width: 100%;
            margin: 0 0 18px;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            background: #fff;
            border: 1px solid var(--line);
            box-shadow: 0 14px 34px -26px rgba(0, 24, 70, .5);
            transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .25s;
            opacity: 0;
            transform: translateY(16px);
            animation: gal2In .5s cubic-bezier(.22, 1, .36, 1) forwards
          }

          @keyframes gal2In {
            to {
              opacity: 1;
              transform: none
            }
          }

          .gal2-pic {
            position: relative;
            overflow: hidden
          }

          .gal2-item img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform .55s cubic-bezier(.22, 1, .36, 1)
          }

          .gal2-item:hover img {
            transform: scale(1.05)
          }

          .gal2-tag-float {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(0, 24, 70, .55);
            backdrop-filter: blur(6px);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            padding: 5px 11px;
            border-radius: 0;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(-6px);
            transition: .3s
          }

          .gal2-item:hover .gal2-tag-float {
            opacity: 1;
            transform: none
          }

          /* always-visible caption below image */
          .gal2-cap {
            padding: 13px 15px 14px
          }

          .gal2-cap .t {
            display: block;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14.5px;
            line-height: 1.25;
            color: var(--navy)
          }

          .gal2-cap .s {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            margin-top: 3px
          }

          /* fade siblings on hover; spotlight the hovered card with a 1px teal border */
          .gal2-grid:hover .gal2-item {
            opacity: .45
          }

          .gal2-grid:hover .gal2-item:hover {
            opacity: 1;
            border-color: var(--teal);
            box-shadow: 0 22px 46px -26px rgba(15, 181, 174, .5);
            transform: translateY(-3px)
          }

          .gal2-grid:hover .gal2-item:hover .gal2-cap .s {
            color: var(--teal)
          }

          /* lightbox */
          .gal2-lb {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center
          }

          .gal2-lb.is-open {
            display: flex
          }

          .gal2-lb-scrim {
            position: absolute;
            inset: 0;
            background: rgba(8, 12, 24, .85);
            backdrop-filter: blur(8px);
            opacity: 0;
            transition: opacity .35s
          }

          .gal2-lb.is-open .gal2-lb-scrim {
            opacity: 1
          }

          .gal2-lb-card {
            position: relative;
            width: min(1000px, 94vw);
            max-height: 90vh;
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            background: #fff;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 60px 140px -50px rgba(0, 0, 0, .85);
            opacity: 0;
            transform: translateY(24px) scale(.96);
            transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1)
          }

          .gal2-lb.is-open .gal2-lb-card {
            opacity: 1;
            transform: translateY(0) scale(1)
          }

          .gal2-lb-img {
            position: relative;
            background: #0b1220;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 320px;
            max-height: 90vh
          }

          .gal2-lb-img img {
            width: 100%;
            height: 100%;
            max-height: 90vh;
            object-fit: cover;
            display: block
          }

          .gal2-lb-counter {
            position: absolute;
            bottom: 14px;
            left: 14px;
            background: rgba(0, 0, 0, .6);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 0;
            letter-spacing: .03em
          }

          /* info column */
          .gal2-lb-info {
            display: flex;
            flex-direction: column;
            max-height: 90vh
          }

          .gal2-lb-top {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 18px 22px;
            border-bottom: 1px solid var(--line)
          }

          .gal2-lb-av {
            width: 40px;
            height: 40px;
            border-radius: 0;
            background: linear-gradient(135deg, var(--teal), var(--navy));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 15px;
            flex: 0 0 auto
          }

          .gal2-lb-who {
            display: flex;
            flex-direction: column;
            min-width: 0
          }

          .gal2-lb-who b {
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 700;
            color: var(--navy)
          }

          .gal2-lb-who span {
            font-size: 12px;
            color: var(--muted)
          }

          .gal2-lb-scroll {
            padding: 20px 22px;
            overflow-y: auto;
            flex: 1 1 auto
          }

          .gal2-lb-cat {
            font-family: 'Inter', sans-serif;
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .gal2-lb-title {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 21px;
            line-height: 1.22;
            color: var(--navy);
            margin: 7px 0 0
          }

          .gal2-lb-desc {
            font-size: 14.5px;
            line-height: 1.7;
            color: var(--muted);
            margin: 13px 0 0
          }

          .gal2-lb-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin: 16px 0 0
          }

          .gal2-lb-tag {
            color: var(--teal);
            font-size: 13px;
            font-weight: 600
          }

          .gal2-lb-tag:hover {
            text-decoration: underline
          }

          .gal2-lb-foot {
            padding: 14px 22px;
            border-top: 1px solid var(--line);
            display: flex;
            align-items: center;
            gap: 8px
          }

          .gal2-like {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            padding: 8px 10px;
            border-radius: 0;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: var(--navy);
            cursor: pointer;
            transition: .18s
          }

          .gal2-like:hover {
            background: var(--offwhite)
          }

          .gal2-like svg {
            width: 21px;
            height: 21px;
            transition: .2s
          }

          .gal2-like.liked {
            color: #e0607a
          }

          .gal2-like.liked svg {
            fill: #e0607a;
            stroke: #e0607a;
            transform: scale(1.12)
          }

          .gal2-iconbtn {
            width: 38px;
            height: 38px;
            border-radius: 0;
            border: none;
            background: none;
            color: var(--navy);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .18s
          }

          .gal2-iconbtn:hover {
            background: var(--offwhite)
          }

          .gal2-iconbtn svg {
            width: 20px;
            height: 20px
          }

          .gal2-count {
            margin-left: auto;
            font-size: 13px;
            font-weight: 700;
            color: var(--navy)
          }

          .gal2-close {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 3;
            width: 40px;
            height: 40px;
            border-radius: 0;
            border: none;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(6px);
            color: var(--navy);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4);
            transition: .2s
          }

          .gal2-close:hover {
            background: #fff;
            transform: rotate(90deg)
          }

          .gal2-close svg {
            width: 19px;
            height: 19px
          }

          .gal2-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: 52px;
            height: 52px;
            border-radius: 0;
            border: none;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(6px);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .2s
          }

          .gal2-nav:hover {
            background: rgba(255, 255, 255, .32)
          }

          .gal2-nav svg {
            width: 24px;
            height: 24px
          }

          .gal2-nav.prev {
            left: 24px
          }

          .gal2-nav.next {
            right: 24px
          }

          @media(max-width:1100px) {
            .gal2-grid {
              column-count: 3
            }
          }

          @media(max-width:760px) {
            .gal2-wrap {
              padding: 0 22px
            }

            .gal2-grid {
              column-count: 2
            }

            .gal2-lb-card {
              grid-template-columns: 1fr;
              max-height: 92vh
            }

            .gal2-lb-img {
              max-height: 42vh
            }

            .gal2-nav {
              width: 42px;
              height: 42px
            }

            .gal2-nav.prev {
              left: 10px
            }

            .gal2-nav.next {
              right: 10px
            }
          }

          @media(max-width:460px) {
            .gal2-grid {
              column-count: 1
            }
          }

          /* hero responsive */
          @media(max-width:960px) {
            .gal2-hero {
              grid-template-columns: 1fr;
              gap: 36px;
              min-height: 0;
              padding: 40px 0 48px
            }

            .gal2-col:nth-child(2),
            .gal2-col:nth-child(3) {
              margin-top: 0
            }
          }

          @media(max-width:520px) {
            .gal2-hero-right {
              grid-template-columns: repeat(2, 1fr)
            }

            .gal2-col:nth-child(3) {
              display: none
            }
          }




          /* ============ OUR OFFICES PAGE ============ */


          .off {
            background: #FAFAF8;
            min-height: 90vh;
            padding: 72px 0 110px;
            font-family: 'Inter', sans-serif
          }

          .off-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px
          }

          .off-head {
            max-width: 760px;
            margin: 0 0 56px
          }

          .off-eyebrow {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 13px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .off-title {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(38px, 6vw, 72px);
            line-height: 1.02;
            letter-spacing: -.01em;
            color: #1a2433;
            margin: 18px 0 0
          }

          .off-title em {
            font-style: italic;
            font-weight: 300;
            color: var(--navy)
          }

          .off-lead {
            font-family: 'Inter', sans-serif;
            font-size: 18px;
            font-weight: 300;
            line-height: 1.65;
            color: #5a6470;
            margin: 22px 0 0;
            max-width: 600px
          }

          .off-meta {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 300;
            color: #8a929c;
            margin: 26px 0 0;
            letter-spacing: .02em
          }

          .off-meta span {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-style: italic;
            color: var(--navy);
            font-size: 18px
          }

          /* grid - editorial cards */
          .off-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px 26px
          }

          .off-card:nth-child(2) {
            grid-column: span 2
          }

          .off-card:nth-child(2) .off-card-pic {
            aspect-ratio: 21/9
          }

          .off-card {
            position: relative;
            background: #fff;
            border: 1px solid #ECEAE3;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
            transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, border-color .3s;
            opacity: 0;
            transform: translateY(20px);
            animation: offIn .6s cubic-bezier(.22, 1, .36, 1) forwards
          }

          @keyframes offIn {
            to {
              opacity: 1;
              transform: none
            }
          }

          .off-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 40px 70px -40px rgba(26, 36, 51, .45);
            border-color: #dfe5e0
          }

          .off-card-pic {
            position: relative;
            aspect-ratio: 4/3;
            overflow: hidden;
            background: #e8eef0
          }

          .off-card-pic img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: saturate(.96);
            transition: transform .8s cubic-bezier(.22, 1, .36, 1)
          }

          .off-card:hover .off-card-pic img {
            transform: scale(1.06)
          }

          .off-card-no {
            position: absolute;
            top: 16px;
            left: 18px;
            z-index: 2;
            font-family: 'Inter', sans-serif;
            font-style: italic;
            font-weight: 300;
            font-size: 34px;
            color: #fff;
            text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
            line-height: 1
          }

          .off-card-tag {
            position: absolute;
            top: 18px;
            right: 16px;
            z-index: 2;
            background: rgba(255, 255, 255, .9);
            backdrop-filter: blur(6px);
            color: #1a2433;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            padding: 6px 13px;
            border-radius: 30px
          }

          .off-card-count {
            position: absolute;
            bottom: 14px;
            right: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(26, 36, 51, .5);
            backdrop-filter: blur(6px);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 400;
            padding: 5px 11px;
            border-radius: 30px
          }

          .off-card-count svg {
            width: 14px;
            height: 14px
          }

          .off-card-body {
            padding: 22px 24px 26px
          }

          .off-card-city {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 23px;
            line-height: 1.1;
            color: #1a2433;
            margin: 0;
            letter-spacing: -.005em
          }

          .off-card-state {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: var(--teal);
            margin: 6px 0 0;
            letter-spacing: .01em
          }

          .off-card-addr {
            display: flex;
            gap: 9px;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.6;
            color: #7a828c;
            margin: 15px 0 0
          }

          .off-card-addr svg {
            width: 15px;
            height: 15px;
            color: var(--teal);
            flex: 0 0 auto;
            margin-top: 3px
          }

          .off-card-go {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 500;
            color: #1a2433;
            margin: 20px 0 0;
            transition: gap .25s, color .25s
          }

          .off-card-go svg {
            width: 16px;
            height: 16px;
            transition: transform .25s
          }

          .off-card:hover .off-card-go {
            color: var(--teal);
            gap: 11px
          }

          .off-card:hover .off-card-go svg {
            transform: translateX(2px)
          }

          /* detail modal */
          .off-lb {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            font-family: 'Inter', sans-serif
          }

          .off-lb.is-open {
            display: flex
          }

          .off-lb-scrim {
            position: absolute;
            inset: 0;
            background: rgba(20, 26, 38, .8);
            backdrop-filter: blur(10px);
            opacity: 0;
            transition: opacity .35s
          }

          .off-lb.is-open .off-lb-scrim {
            opacity: 1
          }

          .off-lb-card {
            position: relative;
            width: min(1000px, 94vw);
            max-height: 90vh;
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            background: #fff;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 60px 140px -50px rgba(0, 0, 0, .85);
            opacity: 0;
            transform: translateY(26px) scale(.96);
            transition: opacity .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1)
          }

          .off-lb.is-open .off-lb-card {
            opacity: 1;
            transform: translateY(0) scale(1)
          }

          .off-lb-media {
            position: relative;
            background: #0e1622;
            min-height: 360px;
            overflow: hidden
          }

          .off-lb-imgwrap {
            position: absolute;
            inset: 0
          }

          .off-lb-imgwrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            animation: offFade .5s ease
          }

          @keyframes offFade {
            from {
              opacity: 0;
              transform: scale(1.04)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          .off-pnav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: 42px;
            height: 42px;
            border-radius: 0;
            border: none;
            background: rgba(255, 255, 255, .2);
            backdrop-filter: blur(6px);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .2s
          }

          .off-pnav:hover {
            background: rgba(255, 255, 255, .4)
          }

          .off-pnav svg {
            width: 22px;
            height: 22px
          }

          .off-pnav.prev {
            left: 14px
          }

          .off-pnav.next {
            right: 14px
          }

          .off-dots {
            position: absolute;
            bottom: 16px;
            left: 0;
            right: 0;
            z-index: 2;
            display: flex;
            justify-content: center;
            gap: 7px
          }

          .off-dot {
            width: 8px;
            height: 8px;
            border-radius: 0;
            background: rgba(255, 255, 255, .45);
            cursor: pointer;
            transition: .2s
          }

          .off-dot.active {
            background: #fff;
            width: 22px;
            border-radius: 5px
          }

          .off-lb-info {
            display: flex;
            flex-direction: column;
            padding: 32px 30px 28px;
            overflow-y: auto;
            max-height: 90vh
          }

          .off-lb-tag {
            font-family: 'Inter', sans-serif;
            font-size: 11.5px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .off-lb-city {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 32px;
            line-height: 1.08;
            color: #1a2433;
            margin: 9px 0 0;
            letter-spacing: -.01em
          }

          .off-lb-state {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 300;
            color: #7a828c;
            margin: 5px 0 0
          }

          .off-row {
            display: flex;
            gap: 12px;
            margin: 24px 0 0
          }

          .off-row svg {
            width: 18px;
            height: 18px;
            color: var(--teal);
            flex: 0 0 auto;
            margin-top: 2px
          }

          .off-row .lab {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: #a3aab3;
            margin: 0 0 4px
          }

          .off-row .val {
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 300;
            line-height: 1.6;
            color: #34404e
          }

          .off-row a.val {
            color: var(--teal);
            text-decoration: none;
            font-weight: 400
          }

          .off-row a.val:hover {
            text-decoration: underline
          }

          .off-map {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            margin-top: auto;
            margin-top: 30px;
            background: var(--navy);
            color: #fff;
            border-radius: 0;
            padding: 14px 24px;
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 500;
            text-decoration: none;
            transition: .2s
          }

          .off-map:hover {
            background: var(--teal);
            transform: translateY(-2px)
          }

          .off-map svg {
            width: 18px;
            height: 18px
          }

          .off-close {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 3;
            width: 40px;
            height: 40px;
            border-radius: 0;
            border: none;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(6px);
            color: var(--navy);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4);
            transition: .2s
          }

          .off-close:hover {
            background: #fff;
            transform: rotate(90deg)
          }

          .off-close svg {
            width: 19px;
            height: 19px
          }

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

            .off-card:nth-child(2) {
              grid-column: span 2
            }

            .off-card:nth-child(2) .off-card-pic {
              aspect-ratio: 21/9
            }
          }

          @media(max-width:760px) {
            .off-wrap {
              padding: 0 22px
            }

            .off-grid {
              grid-template-columns: 1fr
            }

            .off-card:nth-child(2) {
              grid-column: auto
            }

            .off-card:nth-child(2) .off-card-pic {
              aspect-ratio: 4/3
            }

            .off-lb-card {
              grid-template-columns: 1fr;
              max-height: 92vh
            }

            .off-lb-media {
              min-height: 240px;
              height: 42vh
            }
          }





          /* ===== JOURNEY (zigzag circular, light) ===== */
          .jr {
            background: #fff;
            color: var(--ink);
            font-family: 'Inter', sans-serif;
            overflow: hidden
          }

          /* hero (light) */
          .jr-hero {
            position: relative;
            text-align: center;
            padding: 96px 24px 60px;
            background: radial-gradient(120% 90% at 50% 0%, #eef6f5 0%, #fff 62%)
          }

          .jr-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(15, 181, 174, .10) 1px, transparent 1px);
            background-size: 24px 24px;
            -webkit-mask-image: linear-gradient(#000, transparent);
            mask-image: linear-gradient(#000, transparent)
          }

          .jr-hero-inner {
            position: relative;
            z-index: 2;
            max-width: 740px;
            margin: 0 auto
          }

          .jr-kick {
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--teal);
            opacity: 0;
            animation: jrUp .8s .05s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .jr-hero-h {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(40px, 7vw, 78px);
            line-height: 1.02;
            letter-spacing: -.03em;
            color: var(--navy);
            margin: 16px 0 0;
            opacity: 0;
            animation: jrUp .9s .2s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .jr-hero-h em {
            font-style: italic;
            font-weight: 300;
            color: var(--teal)
          }

          .jr-hero-sub {
            font-size: clamp(16px, 2vw, 18px);
            font-weight: 300;
            line-height: 1.65;
            color: #56606e;
            margin: 22px auto 0;
            max-width: 560px;
            opacity: 0;
            animation: jrUp .9s .4s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .jr-hero-stats {
            display: flex;
            justify-content: center;
            gap: 48px;
            margin: 42px 0 0;
            flex-wrap: wrap;
            opacity: 0;
            animation: jrUp 1s .6s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .jr-hero-stats .n {
            display: block;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 38px;
            color: var(--navy);
            line-height: 1
          }

          .jr-hero-stats .l {
            display: block;
            margin-top: 6px;
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: .03em;
            color: #8a93a1
          }

          @keyframes jrUp {
            from {
              opacity: 0;
              transform: translateY(26px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          /* timeline wrap */
          .jrn-wrap {
            position: relative;
            max-width: 1500px;
            margin: 0 auto;
            padding: 70px clamp(24px, 6vw, 90px) 120px
          }

          .jrn-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: visible
          }

          .jrn-track {
            stroke: #d3e0c8;
            stroke-width: 2.5;
            stroke-dasharray: 2 9;
            stroke-linecap: round
          }

          .jrn-fill {
            stroke: #3f8b2c;
            stroke-width: 3;
            stroke-linecap: round;
            transition: none;
            filter: drop-shadow(0 0 5px rgba(63, 139, 44, .45))
          }

          .jrn-leaves,
          .jrh-leaves {
            pointer-events: none
          }

          .jrn-leaf,
          .jrh-leaf {
            color: #c3d8b2;
            opacity: .55;
            transition: opacity .5s, color .5s
          }

          .jrn-leaf.in,
          .jrh-leaf.in {
            color: #3f8b2c;
            opacity: 1
          }

          /* row: two columns split by center */
          .jrn-row {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            column-gap: 70px;
            margin: 0 0 70px;
            min-height: 300px
          }

          .jrn-row.left .jrn-media {
            grid-column: 1;
            justify-self: end
          }

          .jrn-row.left .jrn-card {
            grid-column: 2;
            justify-self: start;
            text-align: left
          }

          .jrn-row.right .jrn-media {
            grid-column: 2;
            justify-self: start;
            order: 2
          }

          .jrn-row.right .jrn-card {
            grid-column: 1;
            justify-self: end;
            text-align: right;
            order: 1
          }

          /* circular media + glow ring + badge */
          .jrn-media {
            position: relative;
            width: 300px;
            height: 300px
          }

          .jrn-circle {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            overflow: hidden;
            background: #eef2f6;
            box-shadow: 0 0 0 10px #fff, 0 0 0 12px rgba(15, 181, 174, .18), 0 30px 60px -28px rgba(0, 24, 70, .5);
            position: relative
          }

          .jrn-circle::after {
            content: "";
            position: absolute;
            inset: -26px;
            border-radius: 50%;
            background: radial-gradient(closest-side, rgba(15, 181, 174, .22), transparent 78%);
            z-index: -1;
            opacity: 0;
            transition: opacity .6s
          }

          .jrn-row.in .jrn-circle::after {
            opacity: 1
          }

          .jrn-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .9s cubic-bezier(.22, 1, .36, 1)
          }

          .jrn-row:hover .jrn-circle img {
            transform: scale(1.06)
          }

          .jrn-badge {
            position: absolute;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: var(--navy);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 26px -10px rgba(0, 24, 70, .6);
            z-index: 2
          }

          .jrn-badge svg {
            width: 24px;
            height: 24px
          }

          .jrn-row.left .jrn-badge {
            right: 6px;
            bottom: 34px
          }

          .jrn-row.right .jrn-badge {
            left: 6px;
            bottom: 34px
          }

          /* card */
          .jrn-card {
            max-width: 420px
          }

          .jrn-num {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .12em;
            color: var(--teal)
          }

          .jrn-year {
            display: block;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 15px;
            color: #8a93a1;
            margin-top: 8px;
            letter-spacing: .02em
          }

          .jrn-h {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(22px, 2.4vw, 30px);
            line-height: 1.12;
            letter-spacing: -.02em;
            color: var(--navy);
            margin: 6px 0 0
          }

          .jrn-tx {
            font-size: 15.5px;
            font-weight: 300;
            line-height: 1.72;
            color: #56606e;
            margin: 14px 0 0
          }

          /* reveal */
          .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1)
          }

          .reveal.in {
            opacity: 1;
            transform: none
          }

          .jrn-row.left.reveal {
            transform: translateY(40px) translateX(-26px)
          }

          .jrn-row.right.reveal {
            transform: translateY(40px) translateX(26px)
          }

          .jrn-row.in {
            transform: none !important
          }

          /* generic scroll-in reveal for card grids that didn't have one yet */
          .sv-scard {
            opacity: 0;
            transform: translateY(32px);
            transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
          }

          .sv-scard.in {
            opacity: 1;
            transform: none
          }

          .new-sv-scard {
            opacity: 1 !important;
          }

          @media(prefers-reduced-motion:reduce) {
            .sv-scard {
              transition: none
            }
          }

          /* end cap */
          .jrn-end {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: 24px 0 0
          }

          .jrn-end-dot {
            display: block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--teal);
            margin: 0 auto 26px;
            box-shadow: 0 0 0 8px rgba(15, 181, 174, .16)
          }

          .jrn-end-h {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(26px, 4vw, 40px);
            color: var(--navy);
            margin: 0;
            letter-spacing: -.02em
          }

          .jrn-end-sub {
            font-size: 16px;
            font-weight: 300;
            color: #56606e;
            margin: 14px auto 0;
            max-width: 460px;
            line-height: 1.6
          }

          .jrn-end-btn {
            margin-top: 28px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 14px 30px;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: .22s
          }

          .jrn-end-btn:hover {
            background: var(--teal);
            transform: translateY(-2px)
          }

          /* sunflower-bloom finale */
          .jrn-bloom {
            width: clamp(210px, 26vw, 300px);
            margin: 0 auto 6px;
            position: relative
          }

          .jrn-bloom-svg {
            width: 100%;
            height: auto;
            display: block;
            overflow: visible
          }

          .jrn-bloom-stem {
            fill: none;
            stroke: #3f8b2c;
            stroke-width: 5;
            stroke-linecap: round;
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
            transition: stroke-dashoffset 1.2s cubic-bezier(.22, 1, .36, 1)
          }

          .jrn-end.in .jrn-bloom-stem {
            stroke-dashoffset: 0
          }

          .jrn-bloom-leaf {
            fill: #4a9c34;
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(.2);
            opacity: 0;
            transition: transform .6s cubic-bezier(.34, 1.5, .64, 1), opacity .5s
          }

          .jrn-end.in .jrn-bloom-leaf1 {
            transform: scale(1);
            opacity: 1;
            transition-delay: .5s
          }

          .jrn-end.in .jrn-bloom-leaf2 {
            transform: scale(1);
            opacity: 1;
            transition-delay: .68s
          }

          .jrn-bloom-petals,
          .jrn-bloom-center {
            opacity: 0;
            transition: opacity .3s .85s
          }

          .jrn-end.in .jrn-bloom-petals,
          .jrn-end.in .jrn-bloom-center {
            opacity: 1
          }

          .jrn-petal {
            fill: url(#jrnPetalGrad);
            transform-box: fill-box;
            transform-origin: 50% 100%;
            transform: scale(.08);
            transition: transform .6s cubic-bezier(.3, 1.7, .5, 1);
            transition-delay: calc(.9s + var(--i, 0)*45ms)
          }

          .jrn-end.in .jrn-petal {
            transform: scale(1)
          }

          .jrn-bloom-center {
            fill: url(#jrnSeedGrad);
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0);
            transition: transform .5s cubic-bezier(.34, 1.5, .64, 1) 1.45s
          }

          .jrn-end.in .jrn-bloom-center {
            transform: scale(1)
          }

          @media(max-width:820px) {
            .jrn-bloom {
              width: 170px
            }

            .jrn-wrap {
              padding: 20px 20px 90px
            }

            .jrn-svg {
              left: 24px;
              width: 3px
            }

            .jrn-track,
            .jrn-fill,
            .jrn-leaves {
              display: none
            }

            .jrn-line-m {
              position: absolute;
              top: 0;
              left: 24px;
              width: 2.5px;
              height: 100%;
              background: repeating-linear-gradient(#cddec0 0 2px, transparent 2px 11px)
            }

            .jrn-row,
            .jrn-row.right,
            .jrn-row.left {
              grid-template-columns: 1fr;
              column-gap: 0;
              row-gap: 18px;
              margin: 0 0 50px;
              min-height: 0;
              padding-left: 54px
            }

            .jrn-row.left .jrn-media,
            .jrn-row.right .jrn-media {
              grid-column: 1;
              justify-self: start;
              order: 1;
              width: 180px;
              height: 180px
            }

            .jrn-circle {
              width: 180px;
              height: 180px;
              box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(15, 181, 174, .18), 0 18px 36px -18px rgba(0, 24, 70, .5)
            }

            .jrn-row.left .jrn-card,
            .jrn-row.right .jrn-card {
              grid-column: 1;
              justify-self: start;
              text-align: left;
              order: 2
            }

            .jrn-badge,
            .jrn-row.left .jrn-badge,
            .jrn-row.right .jrn-badge {
              width: 42px;
              height: 42px;
              left: auto;
              right: 8px;
              bottom: 10px
            }

            .jrn-badge svg {
              width: 19px;
              height: 19px
            }

            .jr-hero-stats {
              gap: 30px
            }
          }

          /* ===== Floating timeline/journey view toggle ===== */
          .jrv-fab {
            position: fixed;
            right: 28px;
            bottom: 28px;
            z-index: 60;
            display: none;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            background: var(--navy);
            border: none;
            border-radius: 0;
            padding: 14px 22px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #fff;
            transition: .25s cubic-bezier(.22, 1, .36, 1);
            box-shadow: 0 22px 44px -18px rgba(0, 24, 70, .6)
          }

          .jrv-fab.jrv-show {
            display: inline-flex
          }

          .jrv-fab:hover {
            background: var(--teal);
            transform: translateY(-3px);
            box-shadow: 0 28px 54px -18px rgba(0, 24, 70, .55)
          }

          .jrv-fab svg {
            width: 18px;
            height: 18px
          }

          .jrv-fab .jrv-ic-h {
            display: none
          }

          .jrv-fab.show-h .jrv-ic-v {
            display: none
          }

          .jrv-fab.show-h .jrv-ic-h {
            display: inline-block
          }

          @media(max-width:560px) {
            .jrv-fab {
              right: 16px;
              bottom: 16px;
              padding: 12px 16px;
              font-size: 13px
            }
          }

          /* ===== Book / page-turn flip ===== */
          .jrn-flip {
            position: relative;
            perspective: 2600px;
            perspective-origin: 50% 40%
          }

          .jrn-flip-inner {
            position: relative;
            transform-style: preserve-3d;
            transform-origin: center center;
            transition: transform 1.15s cubic-bezier(.7, .02, .28, 1);
            will-change: transform
          }

          .jrn-flip.is-flipped .jrn-flip-inner {
            transform: rotateY(-180deg)
          }

          .jrn-face {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden
          }

          .jrn-front {
            position: relative
          }

          .jrn-back {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            transform: rotateY(180deg);
            overflow: hidden
          }

          /* when flipped, collapse container to back height so there's no empty gap */
          .jrn-flip.is-flipped {
            height: var(--backh, 800px)
          }

          .jrn-flip.is-flipped .jrn-front {
            visibility: hidden
          }

          /* subtle page shadow during the turn */
          .jrn-flip-inner::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 60px;
            background: linear-gradient(90deg, rgba(0, 24, 70, .16), transparent);
            opacity: 0;
            transition: opacity .5s;
            pointer-events: none;
            z-index: 5
          }

          .jrn-flip.is-turning .jrn-flip-inner::after {
            opacity: 1
          }

          /* ===== Horizontal timeline (back face) ===== */
          .jrh-wrap {
            position: relative;
            background: #fff;
            padding: 40px 0 20px;
            min-height: 760px
          }

          .jrh-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            cursor: grab;
            scrollbar-width: thin;
            padding: 60px 0 40px
          }

          .jrh-scroll.drag {
            cursor: grabbing
          }

          .jrh-scroll::-webkit-scrollbar {
            height: 8px
          }

          .jrh-scroll::-webkit-scrollbar-thumb {
            background: #d7dde4;
            border-radius: 0
          }

          .jrh-track-wrap {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0;
            padding: 0 80px;
            width: max-content
          }

          .jrh-svg {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 4px;
            transform: translateY(-50%);
            overflow: visible;
            pointer-events: none
          }

          .jrh-track-line {
            stroke: #d3e0c8;
            stroke-width: 2.5;
            stroke-dasharray: 2 9;
            stroke-linecap: round
          }

          .jrh-fill-line {
            stroke: #3f8b2c;
            stroke-width: 3;
            stroke-linecap: round;
            filter: drop-shadow(0 0 5px rgba(63, 139, 44, .45))
          }

          .jrh-item {
            position: relative;
            z-index: 1;
            width: 330px;
            flex: 0 0 330px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 560px
          }

          .jrh-media {
            position: relative;
            width: 200px;
            height: 200px;
            flex: 0 0 auto
          }

          .jrh-circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            background: #eef2f6;
            box-shadow: 0 0 0 8px #fff, 0 0 0 10px rgba(15, 181, 174, .18), 0 26px 50px -26px rgba(0, 24, 70, .5)
          }

          .jrh-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .9s cubic-bezier(.22, 1, .36, 1)
          }

          .jrh-item:hover .jrh-circle img {
            transform: scale(1.06)
          }

          .jrh-badge {
            position: absolute;
            right: 2px;
            bottom: 14px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--navy);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 26px -10px rgba(0, 24, 70, .6);
            z-index: 2
          }

          .jrh-badge svg {
            width: 22px;
            height: 22px
          }

          .jrh-card {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            text-align: center
          }

          .jrh-item.up .jrh-card {
            bottom: calc(50% + 130px)
          }

          .jrh-item.down .jrh-card {
            top: calc(50% + 130px)
          }

          .jrh-num {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .12em;
            color: var(--teal)
          }

          .jrh-year {
            display: block;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 14px;
            color: #8a93a1;
            margin-top: 6px
          }

          .jrh-h {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 21px;
            line-height: 1.14;
            letter-spacing: -.02em;
            color: var(--navy);
            margin: 5px 0 0
          }

          .jrh-tx {
            font-size: 14px;
            font-weight: 300;
            line-height: 1.6;
            color: #56606e;
            margin: 10px 0 0
          }

          .jrh-item.reveal {
            opacity: 0;
            transform: translateY(30px)
          }

          .jrh-item.reveal.in {
            opacity: 1;
            transform: none;
            transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
          }

          .jrh-end {
            position: relative;
            z-index: 1;
            flex: 0 0 360px;
            width: 360px;
            height: 560px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center
          }

          .jrh-end-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--teal);
            box-shadow: 0 0 0 8px rgba(15, 181, 174, .16);
            margin-bottom: 22px
          }

          .jrh-end-tx h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 26px;
            color: var(--navy);
            margin: 0 0 18px
          }

          .jrh-hint {
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .04em;
            color: #8a93a1;
            padding: 6px 20px 10px
          }

          .jrh-prog {
            display: inline-block;
            width: 120px;
            height: 4px;
            background: #e6e8ec;
            vertical-align: middle;
            margin-left: 10px;
            position: relative
          }

          .jrh-prog::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: var(--p, 0%);
            background: var(--teal);
            transition: width .1s linear
          }

          @media(max-width:820px) {
            .jrh-item {
              width: 260px;
              flex-basis: 260px
            }

            .jrh-card {
              width: 240px
            }

            .jrh-media,
            .jrh-circle {
              width: 160px;
              height: 160px
            }
          }





          .pr {
            background: linear-gradient(88deg, #f3ffeb 0%, #e8f4ff 100%);
            padding: 84px 0 72px
          }

          .pr-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px
          }

          .pr-head {
            text-align: center;
            max-width: 780px;
            margin: 0 auto 56px;
            transition: transform .6s cubic-bezier(.6, .01, .05, 1), opacity .45s
          }

          .pr-head.is-sliding {
            transform: translateX(-40px);
            opacity: 0;
            pointer-events: none
          }

          .pr-eyebrow {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .04em;
            color: var(--muted);
            position: relative;
            padding-left: 18px;
            margin-bottom: 14px
          }

          .pr-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 10px;
            height: 10px;
            border-left: 1.5px solid var(--teal);
            border-top: 1.5px solid var(--teal);
            transform: translateY(-50%)
          }

          .pr-title {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(28px, 3.6vw, 42px);
            line-height: 1.08;
            letter-spacing: -.025em;
            color: var(--navy);
            margin: 4px 0 0
          }

          .pr-title-accent {
            color: #9aa3ad;
            font-weight: 300
          }

          .pr-lead {
            max-width: 620px;
            margin: 18px auto 0;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--muted)
          }

          /* ===== LEVEL 1: category hero panels ===== */
          .pr-cats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px
          }

          .pr-cat {
            position: relative;
            min-height: 440px;
            border: none;
            cursor: pointer;
            overflow: hidden;
            text-align: left;
            padding: 0;
            background: #0c1a40;
            color: #fff;
            display: flex;
            align-items: flex-end;
            transition: box-shadow .4s, transform .4s
          }

          .pr-cat::after {
            content: "";
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transform: scale(1);
            transition: transform .8s cubic-bezier(.22, 1, .36, 1);
            z-index: 0
          }

          .pr-cat-research::after {
            background-image: linear-gradient(120deg, rgba(3, 37, 125, .35), rgba(8, 18, 44, .4)), url('https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?auto=format&fit=crop&w=1000&h=900&q=80')
          }

          .pr-cat-comm::after {
            background-image: linear-gradient(120deg, rgba(3, 37, 125, .35), rgba(8, 18, 44, .4)), url('https://images.unsplash.com/photo-1574943320219-553eb213f72d?auto=format&fit=crop&w=1000&h=900&q=80')
          }

          .pr-cat:hover::after {
            transform: scale(1.06)
          }

          .pr-cat-ov {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(to top, rgba(6, 14, 34, .94), rgba(6, 14, 34, .4) 55%, rgba(6, 14, 34, .15))
          }

          .pr-cat:hover {
            box-shadow: 0 40px 90px -40px rgba(0, 24, 70, .6)
          }

          .pr-cat-inner {
            position: relative;
            z-index: 2;
            padding: 42px 44px
          }

          .pr-cat-tag {
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .pr-cat-name {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(26px, 2.8vw, 36px);
            line-height: 1.08;
            color: #fff;
            margin: 14px 0 0
          }

          .pr-cat-desc {
            font-size: 14.5px;
            font-weight: 300;
            line-height: 1.6;
            color: rgba(255, 255, 255, .82);
            margin: 14px 0 0;
            max-width: 380px
          }

          .pr-cat-go {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin: 22px 0 0;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #fff
          }

          .pr-cat-go svg {
            width: 17px;
            height: 17px;
            transition: transform .25s
          }

          .pr-cat:hover .pr-cat-go svg {
            transform: translateX(5px)
          }

          /* Level-1 slide-out when a category is chosen */
          .pr-cats {
            transition: transform .6s cubic-bezier(.6, .01, .05, 1), opacity .45s
          }

          .pr-cats.is-sliding {
            transform: translateX(-40px);
            opacity: 0;
            pointer-events: none
          }

          /* ===== LEVEL 2: split - rail (left) + horizontal cards (right) ===== */
          .pr-split[hidden] {
            display: none
          }

          .pr-split {
            display: grid;
            /* grid-template-columns:280px 1fr; */
            gap: 32px;
            align-items: start;
            opacity: 0;
            transform: translateX(40px);
            transition: opacity .55s ease .15s, transform .6s cubic-bezier(.6, .01, .05, 1) .15s
          }

          .pr-split.is-in {
            opacity: 1;
            transform: translateX(0)
          }

          .pr-rail {
            position: sticky;
            top: 90px;
            display: flex;
            flex-direction: column;
            gap: 14px
          }

          .pr-back {
            grid-column: 1/-1;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--navy);
            padding: 10px 16px;
            margin: 0 0 28px -16px;
            border-radius: 8px;
            transition: .2s
          }

          .pr-back svg {
            width: 17px;
            height: 17px;
            transition: transform .2s
          }

          .pr-back:hover {
            color: var(--teal-dark);
            background: rgba(15, 181, 174, .08)
          }

          .pr-back:hover svg {
            transform: translateX(-4px)
          }

          /* shrunk category panels in the rail */
          .pr-rail-cat {
            position: relative;
            overflow: hidden;
            border: none;
            cursor: pointer;
            text-align: left;
            padding: 22px 20px;
            background: #0c1a40;
            color: #fff;
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-height: 118px;
            transition: box-shadow .35s, transform .35s
          }

          .pr-rail-cat::after {
            content: "";
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            z-index: 0;
            opacity: .5;
            filter: grayscale(1) brightness(.85);
            transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .4s, opacity .4s
          }

          .pr-rail-cat[data-cat="research"]::after {
            background-image: linear-gradient(120deg, rgba(3, 37, 125, .4), rgba(8, 18, 44, .55)), url('https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?auto=format&fit=crop&w=500&h=400&q=80')
          }

          .pr-rail-cat[data-cat="commercial"]::after {
            background-image: linear-gradient(120deg, rgba(3, 37, 125, .4), rgba(8, 18, 44, .55)), url('https://images.unsplash.com/photo-1574943320219-553eb213f72d?auto=format&fit=crop&w=500&h=400&q=80')
          }

          .pr-rail-cat>span {
            position: relative;
            z-index: 1
          }

          .pr-rail-cat:hover::after {
            transform: scale(1.08)
          }

          /* inactive tab reads muted/black-&-white; its labels dim too */
          .pr-rail-cat:not(.is-active) {
            background: #1a2236
          }

          .pr-rail-cat:not(.is-active) .pr-rail-name {
            color: rgba(255, 255, 255, .62)
          }

          .pr-rail-cat:not(.is-active):hover::after {
            filter: grayscale(.4) brightness(.95)
          }

          .pr-rail-tag {
            font-family: 'Inter', sans-serif;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .6)
          }

          .pr-rail-name {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 17px;
            line-height: 1.15;
            color: #fff
          }

          .pr-rail-count {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, .6);
            margin-top: 2px
          }

          /* active tab: full colour + teal accent */
          .pr-rail-cat.is-active {
            box-shadow: inset 4px 0 0 var(--teal), 0 24px 50px -34px rgba(0, 24, 70, .6)
          }

          .pr-rail-cat.is-active::after {
            filter: grayscale(0) brightness(1);
            opacity: .75
          }

          .pr-rail-cat.is-active .pr-rail-tag {
            color: var(--teal)
          }

          .pr-rail-cat.is-active .pr-rail-name {
            color: #fff
          }

          .pr-cat-heading {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(24px, 2.8vw, 34px);
            color: var(--navy);
            margin: 0;
            letter-spacing: -.02em
          }

          .pr-cat-sub {
            font-size: 15px;
            font-weight: 300;
            color: var(--muted);
            margin: 10px 0 28px;
            max-width: 620px
          }

          /* horizontal product cards (photo left, text right) + accordion */
          .pr-list {
            display: flex;
            flex-direction: column;
            gap: 14px
          }

          .pr-card {
            display: grid;
            grid-template-columns: 200px 1fr;
            background: #f6f8fb;
            overflow: hidden;
            transition: box-shadow .35s;
            border-left: 3px solid transparent
          }

          .pr-card.is-open {
            box-shadow: 0 26px 54px -34px rgba(0, 24, 70, .5);
            border-left-color: var(--teal)
          }

          .pr-card-media {
            position: relative;
            overflow: hidden;
            min-height: 150px
          }

          .pr-card-media img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .7s cubic-bezier(.22, 1, .36, 1)
          }

          .pr-card:hover .pr-card-media img {
            transform: scale(1.06)
          }

          .pr-card-num {
            position: absolute;
            top: 12px;
            left: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .06em;
            color: #fff;
            background: rgba(3, 37, 125, .6);
            backdrop-filter: blur(6px);
            padding: 4px 9px
          }

          .pr-card-body {
            padding: 22px 26px;
            display: flex;
            flex-direction: column;
            justify-content: center
          }

          .pr-card-name {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 19px;
            line-height: 1.2;
            color: var(--navy);
            margin: 0
          }

          .pr-card-desc {
            font-size: 14px;
            font-weight: 300;
            line-height: 1.6;
            color: #5a6275;
            margin: 8px 0 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
          }

          .pr-card-toggle {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin: 14px 0 0;
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .03em;
            text-transform: uppercase;
            color: var(--teal);
            padding: 0;
            transition: .2s
          }

          .pr-card-toggle svg {
            width: 15px;
            height: 15px;
            transition: transform .3s
          }

          .pr-card.is-open .pr-card-toggle svg {
            transform: rotate(180deg)
          }

          /* expanding panel */
          .pr-card-more {
            grid-column: 1 / -1;
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s cubic-bezier(.6, .01, .05, 1)
          }

          .pr-card.is-open .pr-card-more {
            max-height: 320px
          }

          .pr-card-more-inner {
            padding: 0 26px 24px;
            border-top: 1px solid #e3e6ee;
            margin-top: 0
          }

          .pr-card-more-inner p {
            font-size: 14px;
            line-height: 1.7;
            font-weight: 300;
            color: #5a6275;
            margin: 18px 0 0
          }

          .pr-card-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 16px 0 0;
            background: var(--navy);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            padding: 11px 22px;
            cursor: pointer;
            transition: .25s
          }

          .pr-card-cta svg {
            width: 15px;
            height: 15px;
            transition: transform .25s
          }

          .pr-card-cta:hover {
            background: #03257D
          }

          .pr-card-cta:hover svg {
            transform: translateX(4px)
          }

          /* ---------- Level 2 item rail + sticky detail panel (catalogue) ---------- */
          .pr-stage {
            display: grid;
            grid-template-columns: minmax(280px, 1fr) 1.2fr;
            gap: 0;
            margin-top: 8px
          }

          .pr-railwrap {
            border-right: 1px solid var(--line);
            max-height: 560px;
            overflow-y: auto
          }

          .pr-item-row {
            width: 100%;
            display: flex;
            align-items: baseline;
            gap: 18px;
            padding: 16px 24px 16px 0;
            background: none;
            border: none;
            border-bottom: 1px solid var(--line);
            cursor: pointer;
            text-align: left;
            font-family: 'Inter', sans-serif;
            transition: padding .25s, background .25s
          }

          .pr-item-row:hover {
            padding-left: 14px;
            background: rgba(15, 181, 174, .06)
          }

          .pr-item-row[aria-selected="true"] {
            padding-left: 14px
          }

          .pr-item-row[aria-selected="true"] .pr-item-name {
            color: var(--teal-dark)
          }

          .pr-item-row[aria-selected="true"] .pr-item-num {
            color: var(--teal)
          }

          .pr-item-num {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            min-width: 22px;
            letter-spacing: .05em;
            transition: color .2s
          }

          .pr-item-name {
            flex: 1;
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: -.01em;
            color: var(--navy);
            transition: color .2s
          }

          .pr-item-arrow {
            font-size: 14px;
            color: var(--teal);
            opacity: 0;
            transform: translateX(-6px);
            transition: opacity .25s, transform .25s
          }

          .pr-item-row:hover .pr-item-arrow,
          .pr-item-row[aria-selected="true"] .pr-item-arrow {
            opacity: 1;
            transform: translateX(0)
          }

          .pr-detail {
            position: sticky;
            top: 90px;
            align-self: start;
            padding: 0 0 0 40px;
            display: flex;
            flex-direction: column;
            justify-content: center
          }

          .pr-fig {
            position: relative;
            aspect-ratio: 16/11;
            overflow: hidden;
            background: var(--navy);
            margin: 0
          }

          .pr-fig img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: opacity .4s, transform 6s ease
          }

          .pr-fig.swap img {
            opacity: 0
          }

          .pr-fig::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 55%, rgba(0, 24, 70, .4))
          }

          .pr-fig-tag {
            position: absolute;
            left: 16px;
            top: 16px;
            z-index: 2;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #fff;
            background: rgba(0, 24, 70, .55);
            backdrop-filter: blur(6px);
            padding: 6px 12px
          }

          .pr-d-name {
            font-family: 'Inter', sans-serif;
            font-size: clamp(24px, 2.4vw, 32px);
            font-weight: 400;
            letter-spacing: -.02em;
            margin: 22px 0 0;
            color: var(--navy)
          }

          .pr-d-short {
            font-size: 15px;
            font-weight: 600;
            color: var(--teal-dark);
            margin: 10px 0 0
          }

          .pr-d-long {
            font-size: 14.5px;
            line-height: 1.7;
            color: var(--muted);
            margin: 12px 0 0;
            max-width: 560px;
            font-weight: 300
          }

          .pr-d-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 22px;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 600;
            color: #fff;
            background: var(--navy);
            border: none;
            padding: 13px 24px;
            cursor: pointer;
            transition: background .25s, transform .25s;
            align-self: flex-start
          }

          .pr-d-cta svg {
            width: 15px;
            height: 15px;
            transition: transform .25s
          }

          .pr-d-cta:hover {
            background: var(--teal-dark);
            transform: translateX(4px)
          }

          @media(max-width:900px) {
            .pr-split {
              grid-template-columns: 1fr
            }

            .pr-back {
              margin-left: 0
            }

            .pr-rail {
              position: static;
              flex-direction: row;
              flex-wrap: wrap
            }

            .pr-rail-cat {
              flex: 1;
              min-width: 200px
            }

            .pr-stage {
              grid-template-columns: 1fr
            }

            .pr-railwrap {
              border-right: none;
              max-height: 320px
            }

            .pr-detail {
              position: static;
              padding: 28px 0 0
            }
          }

          @media(max-width:680px) {
            .pr-cats {
              grid-template-columns: 1fr
            }

            .pr-cat {
              min-height: 340px
            }

            .pr-card {
              grid-template-columns: 120px 1fr
            }

            .pr-card-media {
              min-height: 120px
            }

            .pr-card-body {
              padding: 16px 18px
            }
          }

          .service-sv {
            height: 100% !important;
            min-height: 100% !important;
          }


          .sv {
            background: #fff;
            padding: 84px 0 110px;
            min-height: 90vh
          }

          .sv-wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 40px
          }

          /* header - matches the About-page eyebrow/title/lead style */
          .sv-head {
            text-align: center;
            max-width: 760px;
            margin: 0 auto 60px
          }

          .sv-eyebrow {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .04em;
            color: var(--muted);
            position: relative;
            padding-left: 18px;
            margin-bottom: 14px
          }

          .sv-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 10px;
            height: 10px;
            border-left: 1.5px solid var(--teal);
            border-top: 1.5px solid var(--teal);
            transform: translateY(-50%)
          }

          .sv-title {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(28px, 3.6vw, 42px);
            line-height: 1.08;
            letter-spacing: -.025em;
            color: var(--navy);
            margin: 4px 0 0
          }

          .sv-title-accent {
            color: #9aa3ad;
            font-weight: 300
          }

          .sv-lead {
            max-width: 600px;
            margin: 18px auto 0;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--muted)
          }

          /* feature rows - alternating image / text */
          .sv-rows {
            display: flex;
            flex-direction: column;
            gap: 28px
          }

          .sv-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: #f6f8fb;
            overflow: hidden;
            align-items: stretch
          }

          .sv-row.alt {
            background: #0c1a40
          }

          .sv-media {
            position: relative;
            min-height: 340px;
            overflow: hidden
          }

          .sv-media img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .8s cubic-bezier(.22, 1, .36, 1)
          }

          .sv-row:hover .sv-media img {
            transform: scale(1.05)
          }

          .sv-num {
            position: absolute;
            top: 18px;
            left: 18px;
            z-index: 2;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .1em;
            color: #fff;
            background: rgba(3, 37, 125, .55);
            backdrop-filter: blur(6px);
            padding: 7px 13px
          }

          .sv-body {
            padding: 46px 48px;
            display: flex;
            flex-direction: column;
            justify-content: center
          }

          .sv-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--teal);
            margin: 0 0 12px
          }

          .sv-h {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(22px, 2.4vw, 30px);
            line-height: 1.12;
            color: var(--navy);
            margin: 0
          }

          .sv-row.alt .sv-h {
            color: #fff
          }

          .sv-p {
            font-size: 15px;
            line-height: 1.7;
            font-weight: 300;
            color: #5a6275;
            margin: 16px 0 0
          }

          .sv-row.alt .sv-p {
            color: rgba(255, 255, 255, .8)
          }

          /* layout: text-left on alt rows */
          .sv-row.alt .sv-media {
            order: 2
          }

          .sv-row.alt .sv-body {
            order: 1
          }

          /* CTA */
          .sv-cta-wrap {
            text-align: center;
            margin: 62px 0 0
          }

          .sv-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--navy);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 600;
            padding: 16px 38px;
            cursor: pointer;
            transition: .25s;
            box-shadow: 0 18px 40px -18px rgba(0, 24, 70, .6)
          }

          .sv-cta svg {
            width: 18px;
            height: 18px;
            transition: transform .25s
          }

          .sv-cta:hover {
            background: #03257D
          }

          .sv-cta:hover svg {
            transform: translateX(4px)
          }

          @media(max-width:860px) {

            .sv-row,
            .sv-row.alt {
              grid-template-columns: 1fr
            }

            .sv-row.alt .sv-media {
              order: 0
            }

            .sv-row.alt .sv-body {
              order: 0
            }

            .sv-media {
              min-height: 260px
            }

            .sv-body {
              padding: 34px 30px
            }
          }






          .ab {
            max-width: 1180px;
            margin: 0 auto;
            padding: 30px 6vw 0;
            font-family: 'Inter', sans-serif;
            color: var(--navy)
          }

          .ab .ab-tag,
          .ab .ab-eyebrow {
            display: inline-block;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .04em;
            color: var(--muted);
            position: relative;
            padding-left: 18px;
            margin-bottom: 14px
          }

          .ab .ab-tag::before,
          .ab .ab-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 10px;
            height: 10px;
            border-left: 1.5px solid var(--teal);
            border-top: 1.5px solid var(--teal);
            transform: translateY(-50%)
          }

          .ab .ab-tag.center {
            padding-left: 0
          }

          .ab .ab-tag.center::before {
            display: none
          }

          .ab .ab-h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(26px, 3.2vw, 38px);
            line-height: 1.1;
            letter-spacing: -.02em;
            color: #1B1464;
            margin: 0
          }

          .ab .ab-h2.center {
            text-align: center
          }

          /* HERO */
          /* ===== IMP HERO (Why-Saveer hero style) ===== */
          .imp-hero {
            text-align: center;
            padding: 30px 0 20px
          }

          .imp-eyebrow {
            display: inline-block;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .04em;
            color: var(--muted);
            position: relative;
            padding-left: 18px;
            margin-bottom: 14px
          }

          .imp-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 2px;
            background: var(--teal)
          }

          .imp-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(28px, 3.4vw, 40px);
            line-height: 1.08;
            letter-spacing: -.025em;
            margin: 4px 0 0;
            color: var(--navy)
          }

          .imp-h1-accent {
            color: #9aa3ad;
            font-weight: 300
          }

          .imp-lead {
            max-width: 560px;
            margin: 18px auto 0;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--muted)
          }

          .imp-hero-media {
            margin-top: 46px;
            overflow: hidden;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            border-radius: 16px;
            box-shadow: 0 30px 60px -34px rgba(3, 15, 77, .45);
            transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s
          }

          .imp-hero-media img {
            width: 100%;
            height: clamp(320px, 44vh, 480px);
            object-fit: cover;
            display: block;
            filter: none;
            transition: transform .7s cubic-bezier(.22, 1, .36, 1)
          }

          .imp-hero-media:hover {
            transform: translateY(-6px);
            box-shadow: 0 44px 80px -34px rgba(3, 15, 77, .55)
          }

          .imp-hero-media:hover img {
            transform: scale(1.05)
          }

          @media(max-width:760px) {
            .imp-hero-media {
              width: 100%
            }
          }

          .imp-hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            margin-top: 54px;
            max-width: 920px;
            margin-left: auto;
            margin-right: auto
          }

          .imp-hstat {
            padding: 0 28px;
            text-align: center;
            border-right: 1px solid rgba(0, 24, 70, .12)
          }

          .imp-hstat:last-child {
            border-right: none
          }

          .imp-hnum {
            font-family: 'Sora', sans-serif;
            font-weight: 300;
            font-size: clamp(40px, 5vw, 58px);
            line-height: 1;
            letter-spacing: -.03em;
            color: var(--navy);
            display: inline-block
          }

          .imp-hsuf {
            color: var(--teal);
            font-weight: 400
          }

          .imp-hlabel {
            margin: 14px 0 0;
            font-size: 14px;
            font-weight: 300;
            line-height: 1.5;
            color: var(--muted)
          }

          .imp-hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 48px;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: var(--navy);
            text-decoration: none;
            transition: gap .2s, color .2s
          }

          .imp-hero-cta svg {
            width: 18px;
            height: 18px;
            transition: transform .2s
          }

          .imp-hero-cta:hover {
            color: var(--teal)
          }

          .imp-hero-cta:hover svg {
            transform: translateX(4px)
          }

          @media(max-width:720px) {
            .imp-hero-stats {
              grid-template-columns: 1fr;
              gap: 28px
            }

            .imp-hstat {
              border-right: none;
              border-bottom: 1px solid rgba(0, 24, 70, .12);
              padding-bottom: 24px
            }

            .imp-hstat:last-child {
              border-bottom: none;
              padding-bottom: 0
            }
          }

          .ab-hero {
            text-align: center;
            padding: 30px 0 10px
          }

          .ab-eyebrow {
            text-align: center
          }

          .ab-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(28px, 3.4vw, 40px);
            line-height: 1.08;
            letter-spacing: -.025em;
            margin: 4px 0 0
          }

          .ab-h1-accent {
            color: #9aa3ad;
            font-weight: 600
          }

          .ab-h1 .ab-h1-accent {
            font-weight: 300
          }

          .ab-lead {
            max-width: 520px;
            margin: 18px auto 0;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--muted)
          }

          .ab-hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 16px;
            margin-top: 46px
          }

          .ab-hero-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(0);
            transition: filter .5s ease
          }

          .ab-hg-tall {
            grid-row: span 2;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: auto
          }

          .ab-hero-grid .ab-hg-tall:hover img,
          .ab-hero-grid .ab-hg-wide:hover img,
          .ab-hero-grid .ab-hg-sq:hover img {
            filter: grayscale(1)
          }

          .ab-hg-wide {
            border-radius: 0;
            overflow: hidden;
            height: 230px
          }

          .ab-hg-sq {
            border-radius: 0;
            overflow: hidden;
            height: 230px
          }

          /* TRUST */
          .ab-trust {
            text-align: center;
            padding: 60px 0 30px
          }

          .ab-trust-label {
            font-size: 11px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: #aab2bc;
            margin-bottom: 30px
          }

          .ab-trust-logos {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: clamp(28px, 5vw, 64px);
            flex-wrap: wrap;
            max-width: 1000px;
            margin: 0 auto
          }

          .ab-trust-logos.sm {
            gap: 36px;
            margin-top: 8px
          }

          .ab-logo {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 18px;
            color: #c2c8d0;
            letter-spacing: -.01em
          }

          .ab-logo-img {
            height: 58px;
            width: auto;
            max-width: 130px;
            object-fit: contain;
            filter: grayscale(1);
            opacity: .62;
            transition: filter .3s, opacity .3s, transform .3s
          }

          .ab-logo-img:hover {
            filter: grayscale(0);
            opacity: 1;
            transform: translateY(-3px)
          }

          .ab-trust-viewall {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #1B1464;
            text-decoration: none;
            transition: gap .2s, color .2s;
            white-space: nowrap
          }

          .ab-trust-viewall svg {
            width: 17px;
            height: 17px;
            transition: transform .2s
          }

          .ab-trust-viewall:hover {
            color: var(--teal)
          }

          .ab-trust-viewall:hover svg {
            transform: translateX(4px)
          }

          /* QUOTE */
          .ab-quote {
            text-align: center;
            max-width: 760px;
            margin: 0 auto;
            padding: 80px 0
          }

          .ab-quote-mark {
            font-family: 'Inter', sans-serif;
            font-size: 64px;
            color: var(--teal);
            line-height: 0;
            display: inline-block;
            margin-bottom: 14px
          }

          .ab-quote-mark.sm {
            font-size: 40px;
            margin-bottom: 6px
          }

          .ab-quote-tx {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: clamp(20px, 2.4vw, 28px);
            line-height: 1.4;
            color: var(--navy);
            margin: 0
          }

          .ab-quote-by {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 28px
          }

          .ab-quote-by img {
            width: 46px;
            height: 46px;
            border-radius: 0;
            object-fit: cover
          }

          .ab-quote-name {
            font-weight: 700;
            font-size: 14px;
            color: var(--navy)
          }

          .ab-quote-role {
            font-size: 12.5px;
            color: var(--muted)
          }

          /* TEAM */
          .ab-team {
            padding: 40px 0
          }

          .abm-marquee {
            position: relative;
            margin-top: 34px;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)
          }

          .abm-track {
            display: flex;
            gap: 22px;
            width: max-content;
            animation: abmScroll 48s linear infinite
          }

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

          @keyframes abmScroll {
            from {
              transform: translateX(0)
            }

            to {
              transform: translateX(-50%)
            }
          }

          .abm-card {
            flex: 0 0 auto;
            width: 200px;
            background: #fff;
            border: 1px solid var(--line);
            padding: 0;
            transition: box-shadow .3s, transform .3s, border-color .3s
          }

          .abm-card:hover {
            box-shadow: 0 22px 46px -26px rgba(0, 24, 70, .45);
            transform: translateY(-4px);
            border-color: #d4dae2
          }

          .abm-ph {
            width: 100%;
            aspect-ratio: 1;
            overflow: hidden;
            background: #eef1f4
          }

          .abm-ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .5s cubic-bezier(.22, 1, .36, 1)
          }

          .abm-card:hover .abm-ph img {
            transform: scale(1.05)
          }

          .abm-name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14.5px;
            letter-spacing: -.01em;
            color: #1B1464;
            margin: 14px 16px 2px
          }

          .abm-role {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            margin: 0 16px 16px
          }

          .abm-cta {
            text-align: center;
            margin-top: 34px
          }

          .abm-viewall {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #1B1464;
            text-decoration: none;
            border: 1px solid var(--line);
            padding: 12px 26px;
            transition: .2s
          }

          .abm-viewall svg {
            width: 17px;
            height: 17px;
            transition: transform .2s
          }

          .abm-viewall:hover {
            background: #1B1464;
            color: #fff;
            border-color: #1B1464
          }

          .abm-viewall:hover svg {
            transform: translateX(4px)
          }

          @media(prefers-reduced-motion:reduce) {
            .abm-track {
              animation: none
            }

            .abm-marquee {
              overflow-x: auto
            }
          }

          .ab-team-head {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: end;
            margin-bottom: 34px
          }

          .ab-team-intro {
            font-size: 14.5px;
            font-weight: 300;
            line-height: 1.65;
            color: var(--muted);
            max-width: 440px;
            justify-self: end
          }

          .ab-team-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            background: #F5F6F8;
            border-radius: 0;
            padding: 26px
          }

          .ab-tm-card {
            text-align: center
          }

          .ab-tm-ph {
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 1/1;
            background: #e8eef0
          }

          .ab-tm-ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(0);
            transition: filter .4s
          }

          .ab-tm-card:hover .ab-tm-ph img {
            filter: grayscale(1)
          }

          .ab-tm-name {
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            margin-top: 14px
          }

          .ab-tm-role {
            font-size: 12.5px;
            color: var(--muted);
            margin-top: 3px
          }

          /* AWARDS */
          .ab-awards {
            padding: 70px 0
          }

          .ab-awards .ab-tag.center,
          .ab-awards .ab-h2.center {
            display: block;
            text-align: center
          }

          .ab-awards .ab-tag.center {
            padding-left: 0
          }

          .abt-timeline {
            position: relative;
            max-width: 980px;
            margin: 54px auto 0;
            padding: 10px 0
          }

          .abt-cta {
            text-align: center;
            margin-top: 18px
          }

          .abt-why-btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 600;
            color: #fff;
            background: #1B1464;
            text-decoration: none;
            padding: 14px 32px;
            transition: .2s
          }

          .abt-why-btn svg {
            width: 18px;
            height: 18px;
            transition: transform .2s
          }

          .abt-why-btn:hover {
            background: #030F4D
          }

          .abt-why-btn:hover svg {
            transform: translateX(4px)
          }

          .abt-spine {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
            background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent)
          }

          .abt-item {
            position: relative;
            width: 50%;
            padding: 0 48px 46px;
            box-sizing: border-box;
            opacity: 0;
            transform: translateY(26px);
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .abt-item.in {
            opacity: 1;
            transform: none
          }

          .abt-item.left {
            left: 0;
            text-align: right
          }

          .abt-item.right {
            left: 50%;
            text-align: left
          }

          .abt-node {
            position: absolute;
            top: 2px;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1B1464;
            color: #fff;
            z-index: 2;
            box-shadow: 0 0 0 6px var(--offwhite, #f6f7f9)
          }

          .abt-item.left .abt-node {
            right: -23px
          }

          .abt-item.right .abt-node {
            left: -23px
          }

          .abt-node svg {
            width: 22px;
            height: 22px
          }

          .abt-card {
            position: relative;
            background: #fafafa;
            border: 1px solid var(--line);
            padding: 6px 24px;
            transition: box-shadow .3s, transform .3s, border-color .3s;
            box-shadow: 0 6px 0 -1px #e3e7ec, 0 16px 26px -12px rgba(0, 24, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 5px rgba(0, 24, 70, .07)
          }

          .abt-card:hover {
            box-shadow: 0 8px 0 -1px #dde2e8, 0 22px 34px -12px rgba(0, 24, 70, .34), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 5px rgba(0, 24, 70, .08);
            transform: translateY(-2px);
            border-color: var(--line)
          }

          /* little arrow connecting card to spine */
          .abt-card::before {
            content: "";
            position: absolute;
            top: 14px;
            width: 12px;
            height: 12px;
            background: #fafafa;
            border: 1px solid var(--line);
            transform: rotate(45deg)
          }

          .abt-item.left .abt-card::before {
            right: -7px;
            border-left: none;
            border-bottom: none
          }

          .abt-item.right .abt-card::before {
            left: -7px;
            border-right: none;
            border-top: none
          }

          .abt-badge {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            padding: 4px 11px;
            margin-bottom: 12px
          }

          .abt-badge.ok {
            background: #E6F7F5;
            color: #0B7C75
          }

          .abt-badge.pio {
            background: #FBF1DA;
            color: #9A7B1E
          }

          .abt-badge.yr {
            background: #1B1464;
            color: #fff;
            letter-spacing: .03em
          }

          .abt-name {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 16.5px;
            letter-spacing: -.01em;
            color: #1B1464;
            margin: 0 0 8px;
            line-height: 1.25
          }

          .abt-desc {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            margin: 0
          }

          @media(max-width:760px) {
            .abt-spine {
              left: 23px
            }

            .abt-item {
              width: 100%;
              left: 0 !important;
              text-align: left !important;
              padding: 0 0 40px 60px
            }

            .abt-item .abt-node {
              left: 0 !important;
              right: auto !important
            }

            .abt-item .abt-card::before {
              left: -7px !important;
              right: auto !important;
              border-right: none;
              border-top: none;
              border-left: 1px solid var(--line);
              border-bottom: 1px solid var(--line)
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .abt-item {
              transition: opacity .3s
            }
          }

          /* TESTIMONIALS */
          .ab-test {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 20px;
            padding: 30px 0 60px;
            align-items: start
          }

          .ab-test-stat,
          .ab-test-card {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 24px
          }

          .ab-test-stat {
            background: #fff
          }

          .ab-stat-big {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 30px;
            color: var(--navy);
            margin-bottom: 14px
          }

          .ab-stat-big span {
            font-size: 14px;
            font-weight: 400;
            color: var(--muted)
          }

          .ab-test-tx {
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.6;
            color: #4a545f;
            margin: 4px 0 0
          }

          .ab-test-by {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 18px
          }

          .ab-test-by img {
            width: 38px;
            height: 38px;
            border-radius: 0;
            object-fit: cover
          }

          .ab-test-name {
            font-weight: 700;
            font-size: 13px;
            color: var(--navy)
          }

          .ab-test-role {
            font-size: 11.5px;
            color: var(--muted)
          }

          /* WHY */
          .ab-why {
            padding: 60px 0;
            text-align: center
          }

          .ab-why-sub {
            font-size: 14.5px;
            font-weight: 300;
            color: var(--muted);
            margin: 14px 0 40px
          }

          .ab-why-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            max-width: 780px;
            margin: 0 auto;
            background: #F5F6F8;
            border-radius: 0;
            padding: 30px;
            text-align: left
          }

          .ab-why-col {
            padding: 8px 24px
          }

          .ab-why-other {
            border-right: 1px solid var(--line)
          }

          .ab-why-h {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            margin-bottom: 20px;
            justify-content: center
          }

          .ab-why-ic {
            font-size: 16px
          }

          .ab-why-col ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 16px
          }

          .ab-why-col li {
            position: relative;
            padding-left: 26px;
            font-size: 13.5px;
            font-weight: 300;
            color: #4a545f;
            line-height: 1.4
          }

          .ab-why-col li::before {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 13px
          }

          .ab-why-other li::before {
            content: "\2715";
            color: #c2c8d0
          }

          .ab-why-us li::before {
            content: "\2713";
            color: var(--teal)
          }

          /* FAQ */
          .ab-faq {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;
            gap: 50px;
            background: #F5F6F8;
            border-radius: 0;
            padding: 50px;
            margin: 40px 0
          }

          .ab-faq-soft {
            color: #9aa3ad
          }

          .ab-faq-note {
            font-size: 14px;
            font-weight: 300;
            color: var(--muted);
            margin: 16px 0 26px;
            line-height: 1.6
          }

          .ab-faq-help {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 20px
          }

          .ab-faq-help-h {
            font-weight: 700;
            font-size: 14px;
            color: var(--navy)
          }

          .ab-faq-help-p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            margin: 6px 0 14px
          }

          .ab-faq-help-btn {
            display: inline-block;
            background: var(--navy);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            padding: 10px 18px;
            border-radius: 0;
            text-decoration: none;
            transition: background .3s
          }

          .ab-faq-help-btn:hover {
            background: var(--teal)
          }

          .ab-faq-item {
            border-bottom: 1px solid var(--line)
          }

          .ab-faq-q {
            width: 100%;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 20px 0;
            font-family: 'Inter', sans-serif;
            font-size: 14.5px;
            font-weight: 500;
            color: var(--navy)
          }

          .ab-faq-x {
            flex: 0 0 auto;
            font-size: 20px;
            color: var(--muted);
            line-height: 1
          }

          .ab-faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s cubic-bezier(.22, 1, .36, 1)
          }

          .ab-faq-a p {
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--muted);
            margin: 0 0 20px;
            max-width: 90%
          }

          .ab-faq-item.open .ab-faq-a {
            max-height: 220px
          }

          /* CTA */
          .ab-cta {
            text-align: center;
            padding: 70px 0 100px
          }

          .ab-cta-sub {
            font-size: 14.5px;
            font-weight: 300;
            color: var(--muted);
            margin: 16px auto 30px;
            max-width: 420px
          }

          .ab-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--navy);
            color: #fff;
            font-weight: 600;
            font-size: 15px;
            padding: 15px 26px;
            border-radius: 0;
            text-decoration: none;
            margin-top: 26px;
            transition: transform .3s, background .3s
          }

          .ab-cta-btn:hover {
            transform: translateY(-3px);
            background: var(--teal)
          }

          .ab-cta-slots {
            font-size: 12.5px;
            color: var(--teal-dark);
            margin-top: 16px
          }

          @media(max-width:900px) {
            .ab-hero-grid {
              grid-template-columns: 1fr
            }

            .ab-hg-tall {
              grid-row: auto;
              height: 300px
            }

            .ab-team-head {
              grid-template-columns: 1fr;
              gap: 14px
            }

            .ab-team-intro {
              justify-self: start
            }

            .ab-team-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .ab-test {
              grid-template-columns: 1fr
            }

            .ab-faq {
              grid-template-columns: 1fr;
              gap: 30px;
              padding: 34px
            }

            .ab-aw-thead,
            .ab-aw-row {
              grid-template-columns: 1fr;
              gap: 6px
            }

            .ab-aw-yr {
              text-align: left
            }
          }

          @media(max-width:560px) {
            .ab-team-grid {
              grid-template-columns: 1fr
            }

            .ab-why-cols {
              grid-template-columns: 1fr
            }

            .ab-why-other {
              border-right: none;
              border-bottom: 1px solid var(--line);
              padding-bottom: 24px;
              margin-bottom: 8px
            }
          }

          /* ===== NEW SECTIONS SHARED ===== */
          .ab-section {
            padding: 80px 0;
            border-top: 1px solid var(--line)
          }

          .ab-sec-label {
            margin-bottom: 46px
          }

          /* BUSINESS OVERVIEW */
          .ab-ov-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 40px
          }

          .ab-ov-stat {
            background: #F5F6F8;
            border-radius: 0;
            padding: 28px 20px;
            text-align: center
          }

          .ab-ov-ic {
            font-size: 26px;
            margin-bottom: 10px
          }

          .ab-ov-num {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 32px;
            color: var(--navy);
            line-height: 1
          }

          .ab-ov-num span {
            font-size: 22px
          }

          .ab-ov-lbl {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            margin-top: 6px
          }

          .ab-ov-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
          }

          .ab-ov-card {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 26px
          }

          .ab-ov-card-ic {
            font-size: 28px;
            margin-bottom: 14px
          }

          .ab-ov-card-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 16px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .ab-ov-card p {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6
          }

          /* JOURNEY / TIMELINE */
          .ab-timeline {
            position: relative;
            max-width: 860px;
            margin: 0 auto
          }

          .ab-tl-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--line);
            transform: translateX(-50%)
          }

          .ab-tl-item {
            display: grid;
            grid-template-columns: 1fr 24px 1fr;
            align-items: start;
            gap: 24px;
            margin-bottom: 40px
          }

          .ab-tl-left .ab-tl-card {
            grid-column: 1;
            text-align: right
          }

          .ab-tl-left .ab-tl-dot {
            grid-column: 2
          }

          .ab-tl-left .ab-tl-card:last-child {
            grid-column: 3;
            visibility: hidden
          }

          .ab-tl-right .ab-tl-card:first-child {
            grid-column: 1;
            visibility: hidden
          }

          .ab-tl-right .ab-tl-dot {
            grid-column: 2
          }

          .ab-tl-right .ab-tl-card {
            grid-column: 3
          }

          .ab-tl-dot {
            width: 24px;
            height: 24px;
            border-radius: 0;
            background: var(--teal);
            border: 3px solid #fff;
            box-shadow: 0 0 0 2px var(--teal);
            flex-shrink: 0;
            margin-top: 6px;
            justify-self: center
          }

          .ab-tl-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 22px
          }

          .ab-tl-yr {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--teal);
            margin-bottom: 6px;
            letter-spacing: .04em
          }

          .ab-tl-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            margin-bottom: 8px
          }

          .ab-tl-card p {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            margin: 0
          }

          /* LEADERSHIP */
          .ab-lead-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: start
          }

          .ab-lead-card.ab-lead-featured {
            background: #F5F6F8;
            border-radius: 0;
            padding: 30px;
            display: grid;
            grid-template-columns: 160px 1fr;
            gap: 24px;
            align-items: start;
            grid-row: span 2
          }

          .ab-lead-ph {
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 1/1
          }

          .ab-lead-ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(0)
          }

          .ab-lead-badge {
            display: inline-block;
            background: var(--teal);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 0;
            letter-spacing: .05em;
            margin-bottom: 8px;
            text-transform: uppercase
          }

          .ab-lead-name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: var(--navy)
          }

          .ab-lead-role {
            font-size: 13px;
            font-weight: 400;
            color: var(--muted);
            margin: 4px 0 14px
          }

          .ab-lead-bio {
            font-size: 13.5px;
            font-weight: 300;
            color: #4a545f;
            line-height: 1.65
          }

          .ab-lead-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px
          }

          .ab-lead-tags span {
            font-size: 12px;
            font-weight: 500;
            background: #fff;
            border: 1px solid var(--line);
            color: var(--navy);
            padding: 4px 12px;
            border-radius: 20px
          }

          .ab-lead-mini-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px
          }

          .ab-lead-mini {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 20px
          }

          .ab-lead-mini-ph {
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 1/1;
            margin-bottom: 14px
          }

          .ab-lead-mini-ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(0);
            transition: filter .4s
          }

          .ab-lead-mini:hover .ab-lead-mini-ph img {
            filter: grayscale(1)
          }

          .ab-lead-mini-name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy)
          }

          .ab-lead-mini-role {
            font-size: 12px;
            color: var(--muted);
            margin: 3px 0 10px
          }

          .ab-lead-mini-bio {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55
          }

          /* WHY SAVEER (new) */
          .ab-ws-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
          }

          .ab-ws-card {
            background: #F5F6F8;
            border-radius: 0;
            padding: 26px;
            transition: box-shadow .2s, transform .2s
          }

          .ab-ws-card:hover {
            box-shadow: 0 12px 36px -16px rgba(0, 24, 70, .18);
            transform: translateY(-3px)
          }

          .ab-ws-ic {
            font-size: 28px;
            margin-bottom: 14px
          }

          .ab-ws-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .ab-ws-card p {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6
          }

          /* CAPABILITIES */
          .ab-cap-list {
            display: flex;
            flex-direction: column;
            gap: 0
          }

          .ab-cap-item {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 28px;
            padding: 32px 0;
            border-bottom: 1px solid var(--line);
            align-items: start
          }

          .ab-cap-item:first-child {
            border-top: 1px solid var(--line)
          }

          .ab-cap-num {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 32px;
            color: var(--line);
            padding-top: 4px
          }

          .ab-cap-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 17px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .ab-cap-body p {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.65;
            margin-bottom: 14px
          }

          .ab-cap-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
          }

          .ab-cap-tags span {
            font-size: 11.5px;
            font-weight: 500;
            background: #F5F6F8;
            border: 1px solid var(--line);
            color: var(--navy);
            padding: 4px 12px;
            border-radius: 20px
          }

          /* SOLUTIONS */
          .ab-sol-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
          }

          .ab-sol-card {
            background: #F5F6F8;
            border-radius: 0;
            padding: 22px;
            transition: background .2s, box-shadow .2s
          }

          .ab-sol-card:hover {
            background: #fff;
            box-shadow: 0 8px 28px -12px rgba(0, 24, 70, .15)
          }

          .ab-sol-ic {
            font-size: 24px;
            margin-bottom: 12px
          }

          .ab-sol-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: var(--navy);
            margin-bottom: 8px
          }

          .ab-sol-card p {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55
          }

          /* PROCESS */
          .ab-proc-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
          }

          .ab-proc-step {
            background: #F5F6F8;
            border-radius: 0;
            padding: 28px;
            position: relative
          }

          .ab-proc-num {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 11px;
            color: var(--teal);
            letter-spacing: .08em;
            margin-bottom: 14px
          }

          .ab-proc-line {
            display: none
          }

          .ab-proc-ic {
            font-size: 26px;
            margin-bottom: 14px
          }

          .ab-proc-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .ab-proc-step p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6
          }

          /* VISION & MISSION */
          .ab-vm-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 32px
          }

          .ab-vm-card {
            border-radius: 0;
            padding: 38px
          }

          .ab-vm-vision {
            background: var(--navy);
            color: #fff
          }

          .ab-vm-mission {
            background: #F5F6F8;
            color: var(--navy)
          }

          .ab-vm-ic {
            font-size: 30px;
            margin-bottom: 12px
          }

          .ab-vm-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--teal);
            margin-bottom: 10px
          }

          .ab-vm-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 18px;
            line-height: 1.3;
            margin-bottom: 16px
          }

          .ab-vm-vision .ab-vm-h {
            color: #fff
          }

          .ab-vm-mission .ab-vm-h {
            color: var(--navy)
          }

          .ab-vm-card p {
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.65
          }

          .ab-vm-vision p {
            color: rgba(255, 255, 255, .72)
          }

          .ab-vm-mission p {
            color: var(--muted)
          }

          .ab-vm-values {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            padding: 24px;
            background: #F5F6F8;
            border-radius: 18px
          }

          .ab-vm-val {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 500;
            color: var(--navy);
            background: #fff;
            border: 1px solid var(--line);
            padding: 8px 16px;
            border-radius: 30px
          }

          /* ACHIEVEMENTS */
          .ab-ach-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
          }

          .ab-ach-card {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 26px;
            transition: border-color .2s, box-shadow .2s
          }

          .ab-ach-card:hover {
            border-color: var(--teal);
            box-shadow: 0 8px 28px -12px rgba(15, 181, 174, .18)
          }

          .ab-ach-card.ab-ach-big {
            grid-column: span 1;
            background: var(--navy);
            border-color: transparent
          }

          .ab-ach-card.ab-ach-big .ab-ach-ic,
          .ab-ach-card.ab-ach-big .ab-ach-yr,
          .ab-ach-card.ab-ach-big .ab-ach-h,
          .ab-ach-card.ab-ach-big p {
            color: #fff
          }

          .ab-ach-card.ab-ach-big .ab-ach-yr {
            color: var(--teal)
          }

          .ab-ach-card.ab-ach-big p {
            color: rgba(255, 255, 255, .72)
          }

          .ab-ach-ic {
            font-size: 24px;
            margin-bottom: 12px
          }

          .ab-ach-yr {
            font-size: 12px;
            font-weight: 700;
            color: var(--teal);
            letter-spacing: .06em;
            margin-bottom: 6px;
            text-transform: uppercase
          }

          .ab-ach-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .ab-ach-card p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55
          }

          /* COMMITMENTS */
          .ab-commit-inner {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 60px;
            background: #F5F6F8;
            border-radius: 0;
            padding: 50px;
            align-items: start
          }

          .ab-commit-item {
            display: flex;
            gap: 18px;
            align-items: start;
            padding: 22px 0;
            border-bottom: 1px solid var(--line)
          }

          .ab-commit-item:last-child {
            border-bottom: none
          }

          .ab-commit-ic {
            font-size: 22px;
            flex-shrink: 0;
            margin-top: 2px
          }

          .ab-commit-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            margin-bottom: 6px
          }

          .ab-commit-item p {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            margin: 0
          }

          /* VALUE PROPOSITION */
          .ab-vp-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border-radius: 0;
            overflow: hidden;
            border: 1px solid var(--line)
          }

          .ab-vp-card {
            padding: 36px;
            border-right: 1px solid var(--line)
          }

          .ab-vp-card:last-child {
            border-right: none
          }

          .ab-vp-card.ab-vp-center {
            background: var(--navy)
          }

          .ab-vp-top {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px
          }

          .ab-vp-ic {
            font-size: 28px
          }

          .ab-vp-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: var(--navy)
          }

          .ab-vp-center .ab-vp-h {
            color: #fff
          }

          .ab-vp-card p {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.65;
            margin-bottom: 18px
          }

          .ab-vp-center p {
            color: rgba(255, 255, 255, .72)
          }

          .ab-vp-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px
          }

          .ab-vp-card ul li {
            font-size: 13px;
            font-weight: 400;
            color: #4a545f;
            padding-left: 20px;
            position: relative
          }

          .ab-vp-card ul li::before {
            content: "→";
            position: absolute;
            left: 0;
            color: var(--teal);
            font-size: 12px
          }

          .ab-vp-center ul li {
            color: rgba(255, 255, 255, .8)
          }

          .ab-vp-center ul li::before {
            color: var(--teal)
          }

          /* PARTNER CTA (detailed) */
          .ab-pcta-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            background: var(--navy);
            border-radius: 0;
            padding: 50px;
            align-items: start
          }

          .ab-pcta-l .ab-tag {
            color: var(--teal)
          }

          .ab-pcta-l .ab-tag::before {
            border-color: var(--teal)
          }

          .ab-pcta-l .ab-h2 {
            color: #fff
          }

          .ab-pcta-l p {
            color: rgba(255, 255, 255, .65)
          }

          .ab-pcta-steps {
            margin-top: 26px;
            display: flex;
            flex-direction: column;
            gap: 12px
          }

          .ab-pcta-step {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, .8)
          }

          .ab-pcta-step span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 0;
            background: var(--teal);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 12px;
            flex-shrink: 0
          }

          .ab-pcta-r .ab-pcta-types {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px
          }

          .ab-ptype {
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 0;
            padding: 20px
          }

          .ab-ptype-ic {
            font-size: 22px;
            margin-bottom: 10px
          }

          .ab-ptype-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: #fff;
            margin-bottom: 6px
          }

          .ab-ptype p {
            font-size: 12.5px;
            font-weight: 300;
            color: rgba(255, 255, 255, .6);
            line-height: 1.55;
            margin: 0
          }

          /* INVESTOR RELATIONS */
          .ab-inv-inner {
            background: #F5F6F8;
            border-radius: 0;
            padding: 50px
          }

          .ab-inv-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 36px
          }

          .ab-inv-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 22px
          }

          .ab-inv-ic {
            font-size: 24px;
            margin-bottom: 12px
          }

          .ab-inv-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: var(--navy);
            margin-bottom: 8px
          }

          .ab-inv-card p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55
          }

          .ab-inv-cta {
            text-align: center;
            border-top: 1px solid var(--line);
            padding-top: 32px
          }

          .ab-inv-cta p {
            font-size: 14px;
            font-weight: 300;
            color: var(--muted);
            margin-bottom: 20px
          }

          /* GLOBAL PRESENCE */
          .ab-globe-stats {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            background: #F5F6F8;
            border-radius: 0;
            padding: 36px;
            margin-bottom: 36px
          }

          .ab-globe-stat {
            flex: 1;
            text-align: center
          }

          .ab-globe-sep {
            width: 1px;
            height: 60px;
            background: var(--line)
          }

          .ab-globe-num {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 36px;
            color: var(--navy);
            line-height: 1
          }

          .ab-globe-num span {
            font-size: 24px
          }

          .ab-globe-lbl {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            margin-top: 6px
          }

          .ab-globe-regions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
          }

          .ab-globe-reg {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 22px
          }

          .ab-globe-reg-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: var(--navy);
            margin-bottom: 14px
          }

          .ab-globe-reg ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px
          }

          .ab-globe-reg ul li {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            padding-left: 16px;
            position: relative
          }

          .ab-globe-reg ul li::before {
            content: "·";
            position: absolute;
            left: 4px;
            color: var(--teal);
            font-weight: 700
          }

          /* RESPONSIVE */
          @media(max-width:1000px) {
            .ab-ov-stats {
              grid-template-columns: repeat(2, 1fr)
            }

            .ab-ov-cards {
              grid-template-columns: 1fr 1fr
            }

            .ab-ws-grid {
              grid-template-columns: 1fr 1fr
            }

            .ab-sol-grid {
              grid-template-columns: repeat(3, 1fr)
            }

            .ab-proc-steps {
              grid-template-columns: repeat(2, 1fr)
            }

            .ab-lead-grid {
              grid-template-columns: 1fr
            }

            .ab-lead-card.ab-lead-featured {
              grid-row: auto
            }

            .ab-inv-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .ab-globe-regions {
              grid-template-columns: repeat(2, 1fr)
            }
          }

          @media(max-width:768px) {
            .ab-tl-line {
              left: 12px
            }

            .ab-tl-item {
              grid-template-columns: 24px 1fr;
              gap: 16px
            }

            .ab-tl-left .ab-tl-card,
            .ab-tl-right .ab-tl-card {
              grid-column: 2;
              text-align: left;
              visibility: visible
            }

            .ab-tl-left .ab-tl-dot,
            .ab-tl-right .ab-tl-dot {
              grid-column: 1
            }

            .ab-tl-left .ab-tl-card:last-child {
              display: none
            }

            .ab-tl-right .ab-tl-card:first-child {
              display: none
            }

            .ab-vm-grid {
              grid-template-columns: 1fr
            }

            .ab-ach-grid {
              grid-template-columns: 1fr 1fr
            }

            .ab-vp-grid {
              grid-template-columns: 1fr
            }

            .ab-vp-card {
              border-right: none;
              border-bottom: 1px solid var(--line)
            }

            .ab-pcta-inner {
              grid-template-columns: 1fr;
              padding: 34px
            }

            .ab-commit-inner {
              grid-template-columns: 1fr;
              padding: 34px
            }

            .ab-lead-card.ab-lead-featured {
              grid-template-columns: 1fr
            }

            .ab-cap-item {
              grid-template-columns: 50px 1fr;
              gap: 16px
            }

            .ab-cap-num {
              font-size: 22px
            }

            .ab-globe-stats {
              flex-wrap: wrap;
              gap: 20px
            }

            .ab-globe-sep {
              display: none
            }

            .ab-globe-regions {
              grid-template-columns: 1fr 1fr
            }
          }

          @media(max-width:560px) {
            .ab-sol-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .ab-ach-grid {
              grid-template-columns: 1fr
            }

            .ab-ws-grid {
              grid-template-columns: 1fr
            }

            .ab-ov-cards {
              grid-template-columns: 1fr
            }

            .ab-proc-steps {
              grid-template-columns: 1fr
            }

            .ab-lead-mini-grid {
              grid-template-columns: 1fr
            }

            .ab-inv-grid {
              grid-template-columns: 1fr
            }

            .ab-globe-regions {
              grid-template-columns: 1fr
            }

            .ab-pcta-r .ab-pcta-types {
              grid-template-columns: 1fr
            }
          }

          /* ========== TABBED EXPLORER ========== */
          .ab-tabs-section {
            padding: 60px 0;
            border-top: 1px solid var(--line)
          }

          .abt-shell {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 0;
            border: 1px solid var(--line);
            border-radius: 0;
            overflow: hidden;
            min-height: 560px
          }

          /* LEFT NAV */
          .abt-nav {
            background: #F5F6F8;
            border-right: 1px solid var(--line);
            overflow-y: auto
          }

          .abt-nav-inner {
            padding: 20px 12px
          }

          .abt-nav-label {
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #aab2bc;
            padding: 4px 10px 12px
          }

          .abt-tab {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            background: none;
            border: none;
            border-radius: 0;
            padding: 11px 12px;
            cursor: pointer;
            text-align: left;
            transition: .16s;
            margin-bottom: 2px
          }

          .abt-tab:hover {
            background: #ebebeb
          }

          .abt-tab.active {
            background: #fff;
            box-shadow: 0 2px 12px -6px rgba(0, 24, 70, .18)
          }

          .abt-tab-ic {
            font-size: 16px;
            flex-shrink: 0;
            width: 22px;
            text-align: center
          }

          .abt-tab-tx {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1px
          }

          .abt-tab-tx b {
            font-size: 13px;
            font-weight: 600;
            color: var(--navy);
            line-height: 1.2
          }

          .abt-tab-tx i {
            font-size: 11px;
            font-style: normal;
            color: var(--muted);
            font-weight: 300
          }

          .abt-tab.active .abt-tab-tx b {
            color: var(--navy)
          }

          .abt-tab-arr {
            font-size: 14px;
            color: #ccc;
            flex-shrink: 0;
            transition: .16s
          }

          .abt-tab.active .abt-tab-arr {
            color: var(--teal)
          }

          /* RIGHT PANELS */
          .abt-panels {
            background: #fff;
            overflow: hidden;
            position: relative
          }

          .abt-panel {
            display: none;
            padding: 36px 38px;
            height: 100%;
            overflow-y: auto;
            animation: abtIn .22s ease
          }

          .abt-panel.active {
            display: block
          }

          @keyframes abtIn {
            from {
              opacity: 0;
              transform: translateY(8px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          /* Panel header */
          .abt-panel-head {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 22px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--line)
          }

          .abt-ph-ic {
            font-size: 28px;
            flex-shrink: 0;
            margin-top: 2px
          }

          .abt-ph-tag {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--teal);
            margin-bottom: 4px
          }

          .abt-ph-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(16px, 2vw, 22px);
            color: var(--navy);
            line-height: 1.2;
            margin: 0
          }

          .abt-panel-sub {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            margin: -8px 0 22px
          }

          /* Tag pills (shared) */
          .abt-tl-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 12px
          }

          .abt-tl-tags span {
            font-size: 11.5px;
            font-weight: 500;
            background: #F5F6F8;
            border: 1px solid var(--line);
            color: var(--navy);
            padding: 3px 10px;
            border-radius: 20px
          }

          /* ---- JOURNEY horizontal timeline ---- */
          .abt-timeline-h {
            margin-top: 4px
          }

          .abt-tl-track {
            margin-bottom: 24px
          }

          .abt-tl-yr-row {
            display: flex;
            gap: 4px;
            margin-bottom: 10px
          }

          .abt-tly {
            flex: 1;
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 12px;
            color: var(--muted);
            padding: 7px 4px;
            border-radius: 0;
            cursor: pointer;
            transition: .16s;
            border: 1px solid transparent
          }

          .abt-tly:hover {
            background: #F5F6F8;
            color: var(--navy)
          }

          .abt-tly.active {
            background: var(--navy);
            color: #fff;
            border-color: var(--navy)
          }

          .abt-tl-bar {
            height: 3px;
            background: var(--line);
            border-radius: 0;
            position: relative;
            overflow: hidden
          }

          .abt-tl-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: var(--teal);
            border-radius: 0;
            transition: width .4s cubic-bezier(.4, 0, .2, 1)
          }

          .abt-tl-slides {
            position: relative
          }

          .abt-tl-slide {
            display: none;
            animation: abtIn .22s ease
          }

          .abt-tl-slide.active {
            display: block
          }

          .abt-tl-slide-yr {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 32px;
            color: var(--teal);
            line-height: 1;
            margin-bottom: 8px
          }

          .abt-tl-slide-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 18px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .abt-tl-slide p {
            font-size: 14px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.65;
            max-width: 500px
          }

          /* ---- LEADERSHIP ---- */
          .abt-lead-feat {
            display: grid;
            grid-template-columns: 110px 1fr;
            gap: 20px;
            background: #F5F6F8;
            border-radius: 0;
            padding: 22px;
            margin-bottom: 20px
          }

          .abt-lead-img {
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 1/1
          }

          .abt-lead-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(0)
          }

          .abt-badge {
            display: inline-block;
            background: var(--teal);
            color: #fff;
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 9px;
            border-radius: 0;
            letter-spacing: .05em;
            text-transform: uppercase;
            margin-bottom: 6px
          }

          .abt-lead-name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 17px;
            color: var(--navy)
          }

          .abt-lead-role {
            font-size: 12.5px;
            color: var(--muted);
            margin: 2px 0 10px
          }

          .abt-lead-feat p {
            font-size: 13px;
            font-weight: 300;
            color: #4a545f;
            line-height: 1.6;
            margin: 0
          }

          .abt-mini-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px
          }

          .abt-mini-card {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 16px;
            text-align: center
          }

          .abt-mini-card img {
            width: 56px;
            height: 56px;
            border-radius: 0;
            object-fit: cover;
            filter: grayscale(0);
            margin: 0 auto 10px;
            display: block;
            transition: filter .3s
          }

          .abt-mini-card:hover img {
            filter: grayscale(1)
          }

          .abt-mini-name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--navy)
          }

          .abt-mini-role {
            font-size: 11.5px;
            color: var(--teal);
            margin: 2px 0 7px;
            font-weight: 500
          }

          .abt-mini-card p {
            font-size: 12px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.5
          }

          /* ---- WHY SAVEER ---- */
          .abt-why-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px
          }

          .abt-why-card {
            background: #F5F6F8;
            border-radius: 0;
            padding: 18px;
            transition: .18s
          }

          .abt-why-card:hover {
            background: #fff;
            box-shadow: 0 6px 22px -10px rgba(0, 24, 70, .16)
          }

          .abt-why-ic {
            font-size: 22px;
            margin-bottom: 10px
          }

          .abt-why-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            color: var(--navy);
            margin-bottom: 7px
          }

          .abt-why-card p {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55;
            margin: 0
          }

          /* ---- CAPABILITIES ---- */
          .abt-cap-rows {
            display: flex;
            flex-direction: column
          }

          .abt-cap-row {
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--line);
            align-items: start
          }

          .abt-cap-row:first-child {
            border-top: 1px solid var(--line)
          }

          .abt-cap-n {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 20px;
            color: #dde1e8;
            padding-top: 2px
          }

          .abt-cap-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: var(--navy);
            margin-bottom: 5px
          }

          .abt-cap-body p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55;
            margin-bottom: 8px
          }

          /* ---- SOLUTIONS ---- */
          .abt-sol-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px
          }

          .abt-sol-card {
            background: #F5F6F8;
            border-radius: 0;
            padding: 16px;
            transition: .16s
          }

          .abt-sol-card:hover {
            background: #fff;
            box-shadow: 0 4px 16px -8px rgba(0, 24, 70, .14)
          }

          .abt-sol-ic {
            font-size: 20px;
            margin-bottom: 8px
          }

          .abt-sol-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--navy);
            margin-bottom: 5px
          }

          .abt-sol-card p {
            font-size: 12px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.5;
            margin: 0
          }

          /* ---- PROCESS ---- */
          .abt-proc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px
          }

          .abt-proc-card {
            background: #F5F6F8;
            border-radius: 0;
            padding: 18px
          }

          .abt-proc-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px
          }

          .abt-proc-n {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 10.5px;
            color: var(--teal);
            letter-spacing: .08em
          }

          .abt-proc-ic {
            font-size: 20px
          }

          .abt-proc-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            color: var(--navy);
            margin-bottom: 7px
          }

          .abt-proc-card p {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55;
            margin: 0
          }

          /* ---- VISION & MISSION ---- */
          .abt-vm-pair {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-bottom: 18px
          }

          .abt-vm-dark,
          .abt-vm-light {
            border-radius: 0;
            padding: 24px
          }

          .abt-vm-dark {
            background: var(--navy)
          }

          .abt-vm-light {
            background: #F5F6F8
          }

          .abt-vm-lbl {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            margin-bottom: 10px
          }

          .abt-vm-dark .abt-vm-lbl {
            color: var(--teal)
          }

          .abt-vm-light .abt-vm-lbl {
            color: var(--teal)
          }

          .abt-vm-dark h4 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: #fff;
            line-height: 1.3;
            margin-bottom: 10px
          }

          .abt-vm-light h4 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--navy);
            line-height: 1.3;
            margin-bottom: 10px
          }

          .abt-vm-dark p {
            font-size: 13px;
            font-weight: 300;
            color: rgba(255, 255, 255, .65);
            line-height: 1.6;
            margin: 0
          }

          .abt-vm-light p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            margin: 0
          }

          .abt-values-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
          }

          .abt-val {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--navy);
            background: #F5F6F8;
            border: 1px solid var(--line);
            padding: 6px 13px;
            border-radius: 30px
          }

          /* ---- ACHIEVEMENTS ---- */
          .abt-ach-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px
          }

          .abt-ach-card {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 18px;
            transition: .18s
          }

          .abt-ach-card:hover {
            border-color: var(--teal)
          }

          .abt-ach-card.abt-ach-dark {
            background: var(--navy);
            border-color: transparent
          }

          .abt-ach-ic {
            font-size: 20px;
            margin-bottom: 8px
          }

          .abt-ach-yr {
            font-size: 10.5px;
            font-weight: 700;
            color: var(--teal);
            letter-spacing: .06em;
            text-transform: uppercase;
            margin-bottom: 5px
          }

          .abt-ach-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            color: var(--navy);
            margin-bottom: 7px
          }

          .abt-ach-card.abt-ach-dark .abt-ach-h,
          .abt-ach-card.abt-ach-dark .abt-ach-ic {
            color: #fff
          }

          .abt-ach-card.abt-ach-dark .abt-ach-yr {
            color: var(--teal)
          }

          .abt-ach-card p {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.5;
            margin: 0
          }

          .abt-ach-card.abt-ach-dark p {
            color: rgba(255, 255, 255, .65)
          }

          /* ---- COMMITMENTS ---- */
          .abt-commit-list {
            display: flex;
            flex-direction: column
          }

          .abt-commit-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 18px 0;
            border-bottom: 1px solid var(--line)
          }

          .abt-commit-item:last-child {
            border-bottom: none
          }

          .abt-commit-ic {
            font-size: 22px;
            flex-shrink: 0;
            margin-top: 2px
          }

          .abt-commit-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: var(--navy);
            margin-bottom: 5px
          }

          .abt-commit-item p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            margin: 0
          }

          /* ---- VALUE PROP ---- */
          .abt-vp-trio {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border: 1px solid var(--line);
            border-radius: 0;
            overflow: hidden
          }

          .abt-vp-card {
            padding: 26px;
            border-right: 1px solid var(--line)
          }

          .abt-vp-card:last-child {
            border-right: none
          }

          .abt-vp-card.abt-vp-mid {
            background: var(--navy)
          }

          .abt-vp-ic {
            font-size: 26px;
            margin-bottom: 10px
          }

          .abt-vp-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 17px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .abt-vp-mid .abt-vp-h {
            color: #fff
          }

          .abt-vp-card p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.6;
            margin-bottom: 14px
          }

          .abt-vp-mid p {
            color: rgba(255, 255, 255, .65)
          }

          .abt-vp-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px
          }

          .abt-vp-card ul li {
            font-size: 12.5px;
            color: #4a545f;
            padding-left: 16px;
            position: relative
          }

          .abt-vp-card ul li::before {
            content: "→";
            position: absolute;
            left: 0;
            color: var(--teal);
            font-size: 11px
          }

          .abt-vp-mid ul li {
            color: rgba(255, 255, 255, .75)
          }

          /* ---- PARTNER ---- */
          .abt-partner-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: start
          }

          .abt-ps-item {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 14px 0;
            border-bottom: 1px solid var(--line)
          }

          .abt-ps-item:last-of-type {
            border-bottom: none;
            margin-bottom: 16px
          }

          .abt-ps-n {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 0;
            background: var(--teal);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 11px;
            flex-shrink: 0;
            margin-top: 2px
          }

          .abt-ps-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            color: var(--navy);
            margin-bottom: 3px
          }

          .abt-ps-item p {
            font-size: 12.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.5;
            margin: 0
          }

          .abt-partner-types {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
          }

          .abt-ptype-card {
            background: #F5F6F8;
            border-radius: 0;
            padding: 16px
          }

          .abt-ptype-ic {
            font-size: 20px;
            margin-bottom: 8px
          }

          .abt-ptype-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--navy);
            margin-bottom: 5px
          }

          .abt-ptype-card p {
            font-size: 12px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.5;
            margin: 0
          }

          /* ---- INVESTOR ---- */
          .abt-inv-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 24px
          }

          .abt-inv-card {
            background: #F5F6F8;
            border-radius: 0;
            padding: 18px
          }

          .abt-inv-ic {
            font-size: 20px;
            margin-bottom: 8px
          }

          .abt-inv-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            color: var(--navy);
            margin-bottom: 6px
          }

          .abt-inv-card p {
            font-size: 13px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.55;
            margin: 0
          }

          .abt-inv-cta {
            border-top: 1px solid var(--line);
            padding-top: 20px;
            text-align: center
          }

          .abt-inv-cta p {
            font-size: 13.5px;
            font-weight: 300;
            color: var(--muted);
            margin-bottom: 14px
          }

          /* ---- GLOBAL ---- */
          .abt-globe-stats-row {
            display: flex;
            background: #F5F6F8;
            border-radius: 0;
            padding: 22px;
            margin-bottom: 22px
          }

          .abt-gs {
            flex: 1;
            text-align: center
          }

          .abt-gs-sep {
            width: 1px;
            background: var(--line)
          }

          .abt-gs-n {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 28px;
            color: var(--navy);
            line-height: 1
          }

          .abt-gs-n span {
            font-size: 18px
          }

          .abt-gs-l {
            font-size: 12px;
            font-weight: 300;
            color: var(--muted);
            margin-top: 4px
          }

          .abt-regions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px
          }

          .abt-reg {
            background: #F5F6F8;
            border-radius: 0;
            padding: 16px
          }

          .abt-reg-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 12.5px;
            color: var(--navy);
            margin-bottom: 10px
          }

          .abt-reg ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 6px
          }

          .abt-reg ul li {
            font-size: 12px;
            font-weight: 300;
            color: var(--muted);
            padding-left: 12px;
            position: relative
          }

          .abt-reg ul li::before {
            content: "·";
            position: absolute;
            left: 3px;
            color: var(--teal);
            font-weight: 700
          }

          /* ---- RESPONSIVE TABS ---- */
          @media(max-width:900px) {
            .abt-shell {
              grid-template-columns: 1fr;
              min-height: auto
            }

            .abt-nav {
              border-right: none;
              border-bottom: 1px solid var(--line)
            }

            .abt-nav-inner {
              display: flex;
              flex-wrap: wrap;
              gap: 6px;
              padding: 14px
            }

            .abt-nav-label {
              width: 100%;
              padding: 0 4px 6px
            }

            .abt-tab {
              width: auto;
              flex: 0 0 auto;
              padding: 8px 12px
            }

            .abt-tab-tx i,
            .abt-tab-arr {
              display: none
            }

            .abt-tab-tx b {
              font-size: 12px
            }

            .abt-mini-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .abt-why-grid,
            .abt-sol-grid,
            .abt-proc-grid,
            .abt-ach-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .abt-regions,
            .abt-globe-stats-row {
              flex-wrap: wrap
            }

            .abt-gs-sep {
              display: none
            }

            .abt-regions {
              grid-template-columns: 1fr 1fr
            }

            .abt-vm-pair,
            .abt-vp-trio {
              grid-template-columns: 1fr
            }

            .abt-vp-card {
              border-right: none;
              border-bottom: 1px solid var(--line)
            }

            .abt-partner-layout {
              grid-template-columns: 1fr
            }

            .abt-panel {
              padding: 24px
            }
          }

          @media(max-width:560px) {

            .abt-why-grid,
            .abt-sol-grid,
            .abt-ach-grid,
            .abt-proc-grid {
              grid-template-columns: 1fr
            }

            .abt-lead-feat {
              grid-template-columns: 80px 1fr
            }

            .abt-mini-grid {
              grid-template-columns: 1fr 1fr
            }

            .abt-inv-grid,
            .abt-regions,
            .abt-partner-types {
              grid-template-columns: 1fr
            }

            .abt-tl-yr-row {
              gap: 2px
            }

            .abt-tly {
              font-size: 10px;
              padding: 5px 2px
            }
          }



          /* ============ DIRECTOR'S MESSAGE PAGE ============ */


          .dm2 {
            background: #fff;
            font-family: 'Inter', sans-serif;
            padding: 60px 0 100px;
            min-height: auto;
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw
          }

          .dm2-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px
          }

          .dm2-head {
            max-width: 760px;
            margin: 0 auto 44px;
            text-align: center
          }

          .dm2-eyebrow {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 13px;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .dm2-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(32px, 5vw, 56px);
            line-height: 1.04;
            color: #1a2433;
            margin: 14px 0 0;
            letter-spacing: -.01em
          }

          .dm2-h1 em {
            font-style: italic;
            color: #1B1464
          }

          .dm2-stage {
            display: flex;
            flex-direction: column;
            gap: 32px;
            align-items: center
          }

          /* left rail */
          .dm2-rail {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center
          }

          .dm2-thumb {
            position: relative;
            border: none;
            background: none;
            padding: 0;
            cursor: pointer;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 3/4;
            width: clamp(140px, 16vw, 180px);
            flex: 0 0 auto;
            filter: grayscale(0) brightness(.92);
            opacity: .6;
            transition: filter .5s, opacity .5s, transform .5s cubic-bezier(.22, 1, .36, 1);
            box-shadow: 0 12px 30px -22px rgba(0, 24, 70, .5)
          }

          .dm2-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .dm2-thumb:hover {
            opacity: .9;
            filter: grayscale(0) brightness(1)
          }

          .dm2-thumb:hover img {
            transform: scale(1.05)
          }

          .dm2-thumb.is-active {
            opacity: 1;
            filter: none;
            transform: scale(1.03);
            box-shadow: 0 22px 44px -22px rgba(0, 24, 70, .6);
            outline: 2px solid var(--teal);
            outline-offset: 2px
          }

          .dm2-thumb-name {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20px 10px 9px;
            text-align: left;
            background: linear-gradient(to top, rgba(8, 20, 48, .9), transparent);
            opacity: 0;
            transform: translateY(6px);
            transition: .4s
          }

          .dm2-thumb.is-active .dm2-thumb-name,
          .dm2-thumb:hover .dm2-thumb-name {
            opacity: 1;
            transform: none
          }

          .dm2-thumb-name b {
            display: block;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 600;
            color: #fff;
            line-height: 1.2
          }

          .dm2-thumb-name i {
            display: block;
            font-style: normal;
            font-size: 9.5px;
            color: #5DBB64;
            margin-top: 2px
          }

          /* right panel */
          .dm2-panel {
            display: block;
            max-width: 760px;
            margin: 0 auto;
            text-align: center
          }

          .dm2-portrait {
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 4/5;
            background: #e8eef0;
            box-shadow: 0 40px 80px -44px rgba(0, 24, 70, .6);
            position: relative
          }

          .dm2-portrait img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          .dm2-portrait img.swap {
            animation: dmKen 6s ease-out forwards
          }

          @keyframes dmKen {
            from {
              transform: scale(1.12)
            }

            to {
              transform: scale(1)
            }
          }

          .dm2-body {
            padding-top: 6px;
            min-height: 300px
          }

          /* ---- Director message flip ---- */
          .dm2-flip {
            perspective: 1800px
          }

          .dm2-flip-inner {
            position: relative;
            transform-style: preserve-3d;
            transition: transform .7s cubic-bezier(.55, .06, .3, 1)
          }

          .dm2-flip.flipped .dm2-flip-inner {
            transform: rotateY(180deg)
          }

          .dm2-face {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden
          }

          .dm2-front {
            position: relative
          }

          .dm2-back {
            position: absolute;
            inset: 0;
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            gap: 14px;
            align-items: flex-start;
            justify-content: center
          }

          .dm2-flip:not(.flipped) .dm2-back {
            pointer-events: none
          }

          .dm2-video {
            width: 100%;
            max-width: 750px;
            aspect-ratio: 16/9;
            background: #ffffff;
            display: block;
            object-fit: cover;
            box-shadow: 0 26px 54px -26px rgba(0, 24, 70, .55)
          }

          .dm2-watch {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            background: #1B1464;
            color: #fff;
            border: none;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 600;
            padding: 11px 20px;
            transition: .2s;
            white-space: nowrap
          }

          .dm2-watch svg {
            width: 16px;
            height: 16px
          }

          .dm2-watch:hover {
            background: #030F4D
          }

          .dm2-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: none;
            border: 1px solid var(--line);
            color: var(--navy);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            padding: 9px 16px;
            transition: .2s
          }

          .dm2-back-btn svg {
            width: 15px;
            height: 15px
          }

          .dm2-back-btn:hover {
            background: #1B1464;
            color: #fff;
            border-color: #1B1464
          }

          @media(max-width:560px) {
            .dm2-watch {
              margin-left: 0;
              margin-top: 10px
            }

            .dm2-id.dm2-id-end {
              flex-wrap: wrap
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .dm2-flip-inner {
              transition: none
            }
          }

          .dm2-id {
            display: flex;
            align-items: center;
            gap: 16px
          }

          .dm2-id-end {
            margin-top: 28px;
            padding-top: 24px;
            border-top: 1px solid var(--line)
          }

          .dm2-avatar {
            flex: 0 0 auto;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            overflow: hidden;
            background: #e8eef0;
            box-shadow: 0 14px 30px -16px rgba(0, 24, 70, .55);
            outline: 2px solid var(--teal);
            outline-offset: 2px
          }

          .dm2-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          .dm2-id-text {
            display: flex;
            flex-direction: column
          }

          .dm2-k {
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .dm2-name {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(20px, 3.2vw, 20px);
            line-height: 1.0;
            color: #1a2433;
            margin: 8px 0 0
          }

          .dm2-role {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #7a828c;
            margin: 4px 0 0
          }

          .dm2-quote {
            font-family: 'Inter', sans-serif;
            font-style: italic;
            font-weight: 300;
            font-size: clamp(19px, 2.2vw, 24px);
            line-height: 1.4;
            color: var(--navy);
            margin: 22px 0 0;
            padding-left: 18px;
            border-left: 3px solid var(--teal)
          }

          .dm2-text {
            margin: 22px 0 0
          }

          .dm2-text p {
            font-family: 'Inter', sans-serif;
            font-size: 15.5px;
            font-weight: 300;
            line-height: 1.8;
            color: #4a545f;
            margin: 0 0 15px
          }

          .dm2-sign {
            font-family: 'Inter', sans-serif;
            font-style: italic;
            font-size: 18px;
            color: #1a2433;
            margin: 24px 0 0
          }

          /* enter animation for swapped content */
          .dm2-anim>* {
            opacity: 0;
            transform: translateY(18px);
            animation: dmIn .6s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .dm2-anim>*:nth-child(1) {
            animation-delay: .05s
          }

          .dm2-anim>*:nth-child(2) {
            animation-delay: .12s
          }

          .dm2-anim>*:nth-child(3) {
            animation-delay: .19s
          }

          .dm2-anim>*:nth-child(4) {
            animation-delay: .26s
          }

          .dm2-anim>*:nth-child(5) {
            animation-delay: .33s
          }

          .dm2-anim>*:nth-child(6) {
            animation-delay: .40s
          }

          @keyframes dmIn {
            to {
              opacity: 1;
              transform: none
            }
          }

          @media(max-width:1000px) {
            .dm2-stage {
              grid-template-columns: 1fr
            }

            .dm2-rail {
              flex-direction: row;
              position: static;
              overflow-x: auto;
              gap: 12px;
              padding-bottom: 6px
            }

            .dm2-thumb {
              flex: 0 0 110px
            }

            .dm2-panel {
              grid-template-columns: 1fr
            }

            .dm2-portrait {
              max-width: 300px
            }
          }

          @media(max-width:560px) {
            .dm2-wrap {
              padding: 0 22px
            }

            .dm2-thumb {
              flex: 0 0 92px
            }
          }




          /* ============ TEAM PAGE ============ */

          /* cinematic figure hero - light, image blended into background */
          .tv {
            padding: 26px 26px 8px
          }

          .tv-card {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            height: clamp(500px, 74vh, 720px);
            background: linear-gradient(180deg, #ffffff 0%, #F7F8FA 55%, #EEF1F6 100%)
          }

          .tv-field {
            position: absolute;
            inset: 0;
            background: radial-gradient(70% 90% at 82% 38%, rgba(15, 181, 174, .10), transparent 62%)
          }

          .tv-glow {
            position: absolute;
            right: 6%;
            top: 4%;
            width: 50%;
            height: 86%;
            z-index: 1;
            background: radial-gradient(closest-side, rgba(15, 181, 174, .10), transparent 72%);
            filter: blur(14px)
          }

          /* waves - subtle, light */
          .tv-waves {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            width: 100%;
            height: 46%;
            z-index: 1
          }

          .tv-wave {
            transform-origin: center;
            will-change: transform
          }

          .tv-wave1 {
            fill: rgba(15, 181, 174, .10);
            animation: tvWave 14s ease-in-out infinite alternate
          }

          .tv-wave2 {
            fill: rgba(15, 181, 174, .07);
            animation: tvWave 18s ease-in-out infinite alternate-reverse
          }

          .tv-wave3 {
            fill: rgba(0, 24, 70, .05);
            animation: tvWave 22s ease-in-out infinite alternate
          }

          @keyframes tvWave {
            0% {
              transform: translateX(-3%) translateY(4px)
            }

            100% {
              transform: translateX(3%) translateY(-6px)
            }
          }

          /* chairman figure - blended into the background (no hard panel) */
          .tv-figure {
            position: absolute;
            right: clamp(8px, 4vw, 70px);
            bottom: 0;
            z-index: 2;
            height: 99%;
            width: auto;
            max-width: 56%;
            object-fit: contain;
            object-position: bottom center;
            filter: drop-shadow(0 24px 44px rgba(0, 24, 70, .12));
            -webkit-mask-image:
              linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%),
              linear-gradient(to top, transparent 0%, #000 16%, #000 80%, transparent 100%);
            -webkit-mask-composite: source-in;
            mask-image:
              linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%),
              linear-gradient(to top, transparent 0%, #000 16%, #000 80%, transparent 100%);
            mask-composite: intersect;
            mix-blend-mode: multiply;
            opacity: 0;
            transform: translateY(16px);
            animation: tvRise 1s cubic-bezier(.22, 1, .36, 1) .15s forwards
          }

          @keyframes tvRise {
            to {
              opacity: 1;
              transform: translateY(0)
            }
          }

          /* extra bottom blend into the page bg */
          .tv-figure-fade {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 30%;
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(to top, #EEF1F6 0%, rgba(238, 241, 246, 0) 100%)
          }

          .tv-content {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 3;
            padding: 0 clamp(28px, 5vw, 64px) clamp(40px, 6vh, 72px);
            max-width: 600px
          }

          .tv-eyebrow {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--teal-dark);
            margin-bottom: 20px;
            border: 1px solid rgba(10, 143, 137, .30);
            border-radius: 0;
            padding: 6px 16px;
            background: rgba(255, 255, 255, .6)
          }

          .tv-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            color: #1B1464;
            line-height: 1.02;
            letter-spacing: -.015em;
            font-size: clamp(34px, 5vw, 66px);
            margin: 0
          }

          .tv-sub {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            color: #4a545f;
            font-size: clamp(15px, 1.5vw, 17px);
            line-height: 1.6;
            margin: 22px 0 30px;
            max-width: 440px
          }

          .tv-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            cursor: pointer;
            background: var(--navy);
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            padding: 15px 22px;
            border-radius: 0;
            transition: transform .3s, box-shadow .3s, background .3s, color .3s;
            box-shadow: 0 20px 44px -22px rgba(0, 24, 70, .5)
          }

          .tv-cta svg {
            width: 20px;
            height: 20px;
            transition: transform .3s
          }

          .tv-cta:hover {
            transform: translateY(-3px);
            background: var(--teal);
            color: #fff;
            box-shadow: 0 28px 54px -24px rgba(0, 24, 70, .55)
          }

          .tv-cta:hover svg {
            transform: translateX(4px)
          }

          /* journey stats row inside hero card */
          .tvj-stats {
            display: flex;
            gap: clamp(24px, 3vw, 46px);
            margin-top: 6px;
            flex-wrap: wrap
          }

          .tvj-stats .n {
            display: block;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(28px, 3.4vw, 40px);
            color: var(--navy);
            line-height: 1
          }

          .tvj-stats .l {
            display: block;
            margin-top: 6px;
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 500;
            letter-spacing: .03em;
            color: #5a6470
          }

          @media(max-width:820px) {
            .tvj-stats {
              gap: 22px
            }

            .tvj-stats .l {
              font-size: 11.5px
            }
          }

          .tv-stat {
            position: absolute;
            right: clamp(20px, 3vw, 40px);
            top: clamp(24px, 4vh, 40px);
            z-index: 3;
            background: rgba(255, 255, 255, .62);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 24, 70, .10);
            border-radius: 0;
            padding: 18px 24px;
            text-align: right
          }

          .tv-stat-num {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(34px, 4vw, 46px);
            color: var(--navy);
            line-height: 1
          }

          .tv-stat-tx {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 13.5px;
            color: #5a6470;
            line-height: 1.45;
            margin-top: 8px
          }

          @media(max-width:820px) {
            .tv-figure {
              max-width: 48%;
              height: 86%;
              opacity: .85
            }

            .tv-content {
              max-width: 100%
            }

            .tv-sub {
              display: none
            }

            .tv-stat {
              display: none
            }
          }

          @media(max-width:560px) {
            .tv {
              padding: 14px 14px 4px
            }

            .tv-card {
              border-radius: 0;
              height: clamp(420px, 60vh, 520px)
            }

            .tv-figure {
              right: 50%;
              transform: translateX(50%);
              max-width: 78%;
              height: auto;
              width: 78%;
              opacity: .32;
              bottom: auto;
              top: 6%
            }

            .tv-figure-fade {
              height: 70%;
              background: linear-gradient(to top, #EEF1F6 0%, rgba(238, 241, 246, 0) 100%)
            }
          }

          .tm {
            max-width: 100%;
            margin: 0 auto;
            padding: 50px 6vw 100px
          }

          .tm-rule {
            width: 74px;
            height: 4px;
            background: var(--navy);
            border-radius: 0;
            margin-bottom: 26px
          }

          .tm-h1 {
            font-family: 'Inter';
            font-size: 30px;
            font-weight: 300;
            letter-spacing: -.02em;
            line-height: 1.05;
            color: #062c79;
            max-width: 780px
          }

          .tm-intro {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.55;
            max-width: 560px;
            margin-top: 5px
          }

          .tm-stage {
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            gap: 56px;
            align-items: center;
            margin-top: 74px
          }

          @media(max-width:900px) {
            .tm-stage {
              grid-template-columns: 1fr;
              gap: 40px
            }
          }

          /* left: featured member */
          .tm-name {
            font-family: 'Inter';
            font-size: 30px;
            font-weight: 300;
            letter-spacing: -.02em;
            color: var(--ink);
            line-height: 1.05
          }

          .tm-role {
            color: var(--muted);
            font-size: 15px;
            margin-top: 0px
          }

          .tm-social {
            display: flex;
            gap: 18px;
            margin: 22px 0 26px
          }

          .tm-social a {
            width: 20px;
            height: 20px;
            color: var(--ink);
            opacity: .85;
            transition: .18s
          }

          .tm-social a:hover {
            opacity: 1;
            color: var(--navy);
            transform: translateY(-2px)
          }

          .tm-social svg {
            width: 20px;
            height: 20px;
            fill: currentColor
          }

          .tm-bio {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.6;
            max-width: 380px
          }

          /* right: photo strip */
          .tm-strip {
            display: flex;
            gap: 6px;
            height: 430px;
            border-radius: 0;
            overflow: hidden
          }

          @media(max-width:900px) {
            .tm-strip {
              height: 340px
            }
          }

          .tm-cell {
            flex: 1 1 0;
            min-width: 0;
            cursor: pointer;
            background-size: cover;
            background-position: center;
            filter: grayscale(0);
            transition: flex .5s cubic-bezier(.65, .05, .25, 1), filter .4s;
            position: relative
          }

          .tm-cell:hover {
            filter: grayscale(0)
          }

          .tm-cell.active {
            flex: 3 1 0;
            filter: grayscale(0)
          }

          .tm-cell::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 55%, rgba(0, 24, 70, .35));
            opacity: 0;
            transition: .4s
          }

          .tm-cell.active::after {
            opacity: 1
          }

          .tm-cell-tag {
            position: absolute;
            left: 14px;
            bottom: 12px;
            color: #fff;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 14px;
            opacity: 0;
            transform: translateY(6px);
            transition: .4s .1s;
            z-index: 2;
            text-shadow: 0 1px 6px rgba(0, 0, 0, .4)
          }

          .tm-cell.active .tm-cell-tag {
            opacity: 1;
            transform: none
          }

          /* ===== scattered "Meet Our Team" ===== */
          .mt-scatter {
            position: relative;
            max-width: 100%;
            margin: 0 auto;
            padding: 80px 6vw 140px;
            min-height: 780px;
            overflow: hidden
          }

          .mt-blob {
            position: absolute;
            top: -120px;
            left: -200px;
            width: 760px;
            height: 680px;
            background: #EAE6FB;
            border-radius: 50% 50% 46% 54%/52% 48% 52% 48%;
            z-index: 0
          }

          .mt-wave {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            fill: none;
            stroke: #3568DD;
            stroke-width: 30;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .mt-wave .mt-wave-2 {
            stroke-width: 30
          }

          .mt-copy {
            position: relative;
            z-index: 3;
            max-width: 560px;
            margin: 300px auto 0;
            text-align: center
          }

          .mt-eyebrow {
            display: inline-block;
            color: #2F62D8;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 15px;
            letter-spacing: .01em;
            margin-bottom: 14px
          }

          .mt-h2 {
            font-family: 'Inter';
            font-size: clamp(34px, 5vw, 60px);
            font-weight: 800;
            letter-spacing: -.03em;
            line-height: 1.02;
            color: var(--ink);
            margin: 0
          }

          .mt-sub {
            color: var(--muted);
            font-size: 17px;
            line-height: 1.6;
            margin: 22px auto 0
          }

          .mt-photo {
            position: absolute;
            z-index: 2;
            width: 150px;
            height: 170px;
            border-radius: 0;
            background: var(--c);
            box-shadow: 0 24px 50px -22px rgba(0, 24, 70, .4);
            overflow: hidden
          }

          .mt-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
          }

          /* p1 mustache man, mid-left */
          .mt-photo.p1 {
            top: 300px;
            left: 9%;
            width: 140px;
            height: 150px;
            transform: rotate(-4deg)
          }

          /* p2 featured Kaiya, top-center */
          .mt-photo.p2 {
            top: 70px;
            left: 50%;
            width: 160px;
            height: 188px;
            transform: translateX(-50%);
            overflow: visible
          }

          .mt-photo.p2 img {
            border-radius: 18px
          }

          /* p3 red-shirt woman, top-right */
          .mt-photo.p3 {
            top: 200px;
            right: 10%;
            width: 155px;
            height: 170px;
            transform: rotate(4deg)
          }

          /* p4 beanie man, lower-left */
          .mt-photo.p4 {
            bottom: 50px;
            left: 13%;
            width: 150px;
            height: 180px;
            transform: rotate(3deg)
          }

          /* p5 curly woman, bottom-center */
          .mt-photo.p5 {
            bottom: -40px;
            left: 48%;
            width: 160px;
            height: 195px;
            transform: translateX(-50%)
          }

          /* p6 pink-bg man, mid-right */
          .mt-photo.p6 {
            bottom: 120px;
            right: 19%;
            width: 148px;
            height: 168px;
            transform: rotate(-3deg)
          }

          .mt-feat {
            box-shadow: 0 30px 60px -20px rgba(0, 24, 70, .5)
          }

          .mt-tag {
            position: absolute;
            top: 38%;
            left: 78%;
            background: #FF4438;
            color: #fff;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 14px;
            white-space: nowrap;
            padding: 9px 16px;
            border-radius: 0;
            box-shadow: 0 10px 24px -8px rgba(255, 68, 56, .7);
            z-index: 4
          }

          .mt-play {
            position: absolute;
            bottom: 14px;
            right: 14px;
            width: 34px;
            height: 34px;
            background: #fff;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FF4438;
            box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .3)
          }

          .mt-play svg {
            width: 16px;
            height: 16px;
            margin-left: 2px
          }

          @media(max-width:760px) {
            .mt-photo {
              display: none
            }

            .mt-scatter {
              min-height: auto;
              padding: 50px 24px 60px
            }

            .mt-copy {
              margin-top: 0
            }

            .mt-blob {
              display: none
            }

            .mt-wave {
              display: none
            }
          }

          /* ===== card row ===== */
          .mt-cards-sec {
            position: relative;
            max-width: 100%;
            margin: 0 auto;
            padding: 30px 6vw 140px;
            overflow: hidden
          }

          .mt-cards-head {
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            gap: 48px;
            align-items: start;
            margin-bottom: 64px
          }

          .mt-eyebrow-o {
            color: #F0792E
          }

          .mt-h2-left {
            margin-top: 10px
          }

          .mt-sub-right {
            margin-top: 8px
          }

          @media(max-width:820px) {
            .mt-cards-head {
              grid-template-columns: 1fr;
              gap: 20px
            }
          }

          .mt-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 26px;
            position: relative;
            z-index: 2
          }

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

          @media(max-width:480px) {
            .mt-cards {
              grid-template-columns: 1fr
            }
          }

          .mt-card {
            text-align: center
          }

          .mt-card-ph {
            aspect-ratio: 1/1.12;
            border-radius: 46% 46% 47% 47%/40% 40% 60% 60%;
            overflow: hidden;
            margin-bottom: 20px;
            display: flex;
            align-items: flex-end;
            justify-content: center
          }

          .mt-card-ph img {
            width: 96%;
            height: 96%;
            object-fit: cover;
            object-position: top center;
            display: block
          }

          .mt-card-name {
            font-family: 'Inter';
            font-weight: 700;
            font-size: 18px;
            color: var(--ink)
          }

          .mt-card-role {
            color: var(--muted);
            font-size: 15px;
            margin-top: 4px
          }

          .mt-cta {
            margin-top: 72px;
            position: relative;
            z-index: 2
          }

          .mt-cta-h {
            font-family: 'Inter';
            font-weight: 800;
            font-size: clamp(22px, 2.6vw, 30px);
            letter-spacing: -.02em;
            color: var(--ink);
            margin: 0
          }

          .mt-cta-p {
            color: var(--muted);
            font-size: 16px;
            margin-top: 10px
          }

          .mt-cta-p a {
            color: var(--ink);
            text-decoration: underline;
            font-weight: 600
          }

          /* purple ribbon, bottom-right */
          .mt-ribbon {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 70%;
            height: 170px;
            z-index: 1;
            pointer-events: none;
            display: block
          }

          .mt-ribbon path {
            fill: #8E54C4
          }

          .mt-ribbon .mt-ribbon-dark {
            fill: #6E3DA6
          }

          @media(max-width:820px) {
            .mt-ribbon {
              display: none
            }
          }

          /* ===== TEAM FLIP HERO (tvf-) ===== */
          .tvf-stage {
            position: relative;
            width: 100%;
            min-height: 78vh;
            overflow: hidden
          }

          .tvf-flip {
            position: relative;
            width: 100%;
            min-height: 78vh;
          }

          .tvf-face {
            position: absolute;
            inset: 0;
            overflow: hidden;
            display: flex;
          }

          /* video sits underneath, photo shutter slides over it */
          .tvf-back {
            background: #000;
            z-index: 1;
          }

          .tvf-front {
            z-index: 2;
            clip-path: inset(0 0 0 0);
            transition: clip-path 1.6s cubic-bezier(.76, 0, .24, 1);
          }

          /* shutter open: clip from center outward to both sides -> full reveal */
          .tvf-flip.is-open .tvf-front {
            clip-path: inset(0 50% 0 50%);
          }

          /* hide the photo entirely once fully open so it can't catch clicks */
          .tvf-flip.is-open .tvf-content {
            opacity: 0;
            transition: opacity .4s;
            pointer-events: none;
          }

          /* center seam - a faint vertical line of light where the shutter splits */
          .tvf-front::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            transform: translateX(-1px);
            background: linear-gradient(180deg, transparent, rgba(15, 181, 174, .7), transparent);
            opacity: 0;
            transition: opacity .5s;
            z-index: 5;
            pointer-events: none;
          }

          .tvf-flip.is-open .tvf-front::after {
            opacity: 1;
          }

          /* front photo face */
          .tvf-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.08);
            animation: tvfKen 22s ease-in-out infinite alternate;
          }

          @keyframes tvfKen {
            0% {
              transform: scale(1.08) translate(0, 0)
            }

            100% {
              transform: scale(1.16) translate(-2%, -2%)
            }
          }

          .tvf-grade {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 24, 70, .55) 0%, rgba(0, 24, 70, .15) 35%, rgba(0, 24, 70, .55) 78%, rgba(3, 15, 77, .92) 100%);
          }

          .tvf-grade2 {
            position: absolute;
            inset: 0;
            mix-blend-mode: overlay;
            background: radial-gradient(120% 80% at 70% 30%, rgba(15, 181, 174, .35), transparent 60%);
          }

          .tvf-grain {
            position: absolute;
            inset: 0;
            opacity: .10;
            pointer-events: none;
            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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
          }

          .tvf-content {
            position: relative;
            z-index: 3;
            margin-top: auto;
            padding: clamp(28px, 5vw, 64px);
            max-width: 780px;
            color: #fff;
          }

          .tvf-eyebrow {
            display: inline-block;
            font-size: .72rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--teal);
            font-weight: 700;
            margin-bottom: 14px;
          }

          .tvf-h1 {
            font-size: clamp(2rem, 4.6vw, 3.6rem);
            line-height: 1.04;
            font-weight: 800;
            margin: 0 0 16px;
            letter-spacing: -.02em;
            text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
          }

          .tvf-sub {
            font-size: clamp(1rem, 1.4vw, 1.18rem);
            line-height: 1.6;
            color: rgba(255, 255, 255, .88);
            max-width: 620px;
            margin: 0 0 28px;
          }

          .tvf-watch {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            cursor: pointer;
            border: 0;
            background: var(--teal);
            color: #fff;
            font-family: inherit;
            font-weight: 700;
            font-size: 1rem;
            padding: 16px 26px;
            letter-spacing: .01em;
            transition: background .25s, transform .25s, box-shadow .25s;
            box-shadow: 0 16px 40px rgba(15, 181, 174, .35);
          }

          .tvf-watch:hover {
            background: var(--teal-dark);
            transform: translateY(-2px);
            box-shadow: 0 22px 54px rgba(15, 181, 174, .45);
          }

          .tvf-watch .tvf-play {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, .18);
            border: 1px solid rgba(255, 255, 255, .4);
          }

          .tvf-watch .tvf-play svg {
            width: 16px;
            height: 16px;
            margin-left: 2px;
            fill: #fff;
          }

          .tvf-watch .tvf-pulse {
            position: relative;
          }

          .tvf-watch .tvf-pulse::after {
            content: "";
            position: absolute;
            inset: -8px;
            border: 2px solid rgba(15, 181, 174, .6);
            animation: tvfPulse 2s ease-out infinite;
          }

          @keyframes tvfPulse {
            0% {
              transform: scale(.85);
              opacity: .8
            }

            100% {
              transform: scale(1.5);
              opacity: 0
            }
          }

          /* back video face */
          .tvf-back video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #000;
          }

          .tvf-vlabel {
            position: absolute;
            top: 22px;
            left: 24px;
            z-index: 4;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            font-size: .72rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            font-weight: 700;
            background: rgba(0, 0, 0, .4);
            padding: 8px 14px;
          }

          .tvf-vlabel .tvf-dot {
            width: 8px;
            height: 8px;
            background: var(--teal);
            border-radius: 50%;
            animation: tvfBlink 1.4s infinite;
          }

          @keyframes tvfBlink {

            0%,
            100% {
              opacity: 1
            }

            50% {
              opacity: .2
            }
          }

          .tvf-vstat {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            z-index: 4;
            background: rgba(255, 255, 255, .15);
          }

          .tvf-vstat span {
            display: block;
            height: 100%;
            width: 0;
            background: var(--teal);
            transition: width .2s linear;
          }


          .tt {
            max-width: 1180px;
            margin: 0 auto;
            padding: 60px 0px 60px 0px
          }

          .dm2-h2 {
            font-size: 28px !important;
            text-align: center;
          }

          /* tabs (header-style pill) */
          .tt-tabs {
            position: relative;
            display: inline-flex;
            gap: 4px;
            background: #F2F4F7;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 5px;
            margin: 0 auto 50px;
            left: 50%;
            transform: translateX(-50%)
          }

          .tt-tab {
            position: relative;
            z-index: 2;
            border: none;
            background: none;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            color: #5a6470;
            padding: 11px 26px;
            border-radius: 0;
            transition: color .3s
          }

          .tt-tab.is-active {
            color: #fff
          }

          .tt-ink {
            position: absolute;
            z-index: 1;
            top: 5px;
            bottom: 5px;
            border-radius: 0;
            background: var(--navy);
            transition: left .4s cubic-bezier(.22, 1, .36, 1), width .4s cubic-bezier(.22, 1, .36, 1);
            box-shadow: 0 10px 24px -12px rgba(0, 24, 70, .6)
          }

          .tt-panels {
            position: relative
          }

          .tt-panel {
            display: none
          }

          .tt-panel.is-active {
            display: block;
            animation: ttFade .5s cubic-bezier(.22, 1, .36, 1)
          }

          .tt-panel.is-active~.tt-panel.is-active {
            margin-top: 90px;
            padding-top: 70px;
            border-top: 1px solid var(--line)
          }

          @keyframes ttFade {
            from {
              opacity: 0;
              transform: translateY(16px)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          /* DIVISION HEADS */
          .dh {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;
            gap: 42px;
            align-items: start;
            background: #EEF0F4;
            border-radius: 0;
            padding: 40px;
            margin: 0 0 50px
          }

          .dh-intro {
            position: sticky;
            top: 96px
          }

          .dh-pill {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: #5a6470;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 7px 18px
          }

          .dh-h {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(22px, 2.6vw, 32px);
            line-height: 1.18;
            color: #1a2433;
            margin: 20px 0 0;
            letter-spacing: -.01em
          }

          .dh-sub {
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 300;
            color: #5a6470;
            margin: 16px 0 0;
            line-height: 1.6
          }

          .dh-list {
            display: flex;
            flex-direction: column;
            gap: 18px
          }

          .dh-card {
            background: #FBEEDF;
            border-radius: 0;
            padding: 18px 22px;
            cursor: pointer;
            transition: box-shadow .35s, transform .35s, background .35s;
            display: block
          }

          .dh-card.open {
            background: #fff;
            box-shadow: 0 30px 60px -34px rgba(0, 24, 70, .45)
          }

          .dh-card-top {
            display: flex;
            align-items: center;
            gap: 20px
          }

          .dh-card-ph {
            width: 96px;
            height: 104px;
            border-radius: 0;
            overflow: hidden;
            flex: 0 0 auto;
            background: #e8eef0
          }

          .dh-card-ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(0);
            transition: filter .4s
          }

          .dh-card.open .dh-card-ph img,
          .dh-card:hover .dh-card-ph img {
            filter: grayscale(0)
          }

          .dh-card-id {
            flex: 1 1 auto
          }

          .dh-card-name {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 19px;
            color: var(--navy);
            line-height: 1.15
          }

          .dh-card-role {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #5a6470;
            margin-top: 8px
          }

          .dh-card-chev {
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            border-radius: 0;
            background: rgba(0, 24, 70, .06);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            transition: transform .4s, background .3s
          }

          .dh-card.open .dh-card-chev {
            transform: rotate(180deg);
            background: var(--teal);
            color: #fff
          }

          .dh-card-chev svg {
            width: 16px;
            height: 16px
          }

          .dh-card-body {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .5s cubic-bezier(.22, 1, .36, 1), opacity .4s, margin .4s
          }

          .dh-card.open .dh-card-body {
            max-height: 460px;
            opacity: 1;
            margin-top: 18px
          }

          .dh-sec-h {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--navy);
            margin: 0 0 6px;
            padding-top: 14px;
            border-top: 1px solid var(--line)
          }

          .dh-sec-h:first-child {
            padding-top: 0;
            border-top: none
          }

          .dh-sec-p {
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.65;
            color: #4a545f;
            margin: 0 0 14px
          }

          .tt-subhead {
            font-family: 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: #9aa3ad;
            margin: 0 0 18px !important;
          }

          @media(max-width:860px) {
            .dh {
              grid-template-columns: 1fr;
              gap: 24px;
              padding: 26px
            }

            .dh-intro {
              position: static
            }
          }

          /* team grid - FLIP CARDS */
          .tt-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px
          }

          .tt-card {
            position: relative;
            border-radius: 0;
            cursor: default;
            aspect-ratio: 3/4;
            background: none;
            border: none;
            opacity: 0;
            transform: translateY(20px);
            animation: ttUp .55s cubic-bezier(.22, 1, .36, 1) forwards
          }

          @keyframes ttUp {
            to {
              opacity: 1;
              transform: none
            }
          }

          .tt-card-inner {
            position: absolute;
            inset: 0
          }

          .tt-face {
            position: absolute;
            inset: 0;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 24px 54px -34px rgba(0, 24, 70, .6);
            transition: opacity .5s ease
          }

          /* cross-fade: front visible, back hidden; swap on hover */
          .tt-front {
            opacity: 1
          }

          .tt-back {
            opacity: 0
          }

          .tt-card:hover .tt-front {
            opacity: 0
          }

          .tt-card:hover .tt-back {
            opacity: 1
          }

          .tt-front-ph {
            position: absolute;
            inset: 0;
            overflow: hidden;
            background: #e8eef0
          }

          .tt-front-ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(0);
            transition: filter .45s
          }

          .tt-front-ph::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(8, 18, 44, .92), rgba(8, 18, 44, .1) 55%, transparent)
          }

          .tt-flip-hint {
            display: none
          }

          .tt-front-body {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-end;
            text-align: left;
            padding: 22px
          }

          .tt-card-name {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 22px;
            color: #fff;
            line-height: 1.1;
            order: 2;
            margin-top: 6px
          }

          .tt-card-role {
            font-family: 'Inter', sans-serif;
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #5DBB64;
            order: 1
          }

          /* BACK */
          .tt-back {
            background: linear-gradient(155deg, var(--navy) 0%, #030F4D 70%, #06143f 100%);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 26px 22px
          }

          .tt-back::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(95, 208, 201, .10) 1px, transparent 1px);
            background-size: 18px 18px;
            opacity: .6
          }

          .tt-back-name {
            position: relative;
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 21px;
            line-height: 1.12;
            color: #fff
          }

          .tt-back-role {
            position: relative;
            font-size: 12.5px;
            font-weight: 600;
            color: #5DBB64;
            margin: 5px 0 16px;
            letter-spacing: .02em
          }

          .tt-back-row {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 9px 0;
            border-top: 1px solid rgba(255, 255, 255, .12)
          }

          .tt-back-row svg {
            width: 15px;
            height: 15px;
            color: #5DBB64;
            flex: 0 0 auto;
            margin-top: 2px
          }

          .tt-back-row .l {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .55);
            margin: 0 0 2px
          }

          .tt-back-row .v {
            font-size: 13.5px;
            font-weight: 400;
            color: #fff;
            line-height: 1.3
          }

          .tt-back-flip {
            display: none
          }

          .tt-back-flip svg {
            width: 14px;
            height: 14px
          }

          /* hierarchy / org chart */
          .tt-org {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0
          }

          .tt-org-row {
            display: flex;
            justify-content: center;
            gap: 26px;
            flex-wrap: wrap;
            position: relative
          }

          .tt-org-level {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%
          }

          .tt-org-connect {
            width: 2px;
            height: 34px;
            background: var(--line)
          }

          .tt-onode {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 16px 22px;
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 230px;
            box-shadow: 0 14px 34px -28px rgba(0, 24, 70, .5);
            transition: transform .35s, box-shadow .35s, border-color .3s;
            opacity: 0;
            transform: translateY(18px);
            animation: ttUp .5s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .tt-onode:hover {
            transform: translateY(-4px);
            border-color: var(--teal);
            box-shadow: 0 26px 50px -30px rgba(0, 24, 70, .5)
          }

          .tt-onode-av {
            width: 50px;
            height: 50px;
            border-radius: 0;
            overflow: hidden;
            flex: 0 0 auto;
            background: #e8eef0
          }

          .tt-onode-av img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(0);
            transition: filter .4s
          }

          .tt-onode:hover .tt-onode-av img {
            filter: grayscale(0)
          }

          .tt-onode.lead .tt-onode-av img,
          .tt-onode.dir .tt-onode-av img,
          .tt-onode.divhead .tt-onode-av img {
            filter: grayscale(0)
          }

          .tt-onode-tx b {
            display: block;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 400;
            color: var(--navy)
          }

          .tt-onode-tx span {
            font-size: 12.5px;
            color: var(--teal);
            font-weight: 400
          }

          .tt-org-row.multi {
            margin-top: 0
          }

          /* divisional org chart */
          .tt-onode.lead {
            border-color: var(--navy);
            box-shadow: 0 18px 40px -24px rgba(0, 24, 70, .6)
          }

          .tt-onode.lead .tt-onode-av {
            width: 60px;
            height: 60px
          }

          .tt-onode.dir .tt-onode-av {
            width: 54px;
            height: 54px
          }

          .tt-div-grid {
            display: flex;
            flex-wrap: nowrap;
            gap: 18px;
            margin-top: 34px;
            align-items: start;
            width: 100%;
            justify-content: safe center;
            padding-bottom: 14px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch
          }

          .tt-div-grid::-webkit-scrollbar {
            height: 8px
          }

          .tt-div-grid::-webkit-scrollbar-track {
            background: #EEF1F6;
            border-radius: 8px
          }

          .tt-div-grid::-webkit-scrollbar-thumb {
            background: #C9D2E0;
            border-radius: 8px
          }

          .tt-div-grid::-webkit-scrollbar-thumb:hover {
            background: #aab6c8
          }

          .tt-div-col {
            flex: 0 0 240px;
            width: 240px;
            scroll-snap-align: start;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 16px 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-shadow: 0 16px 38px -30px rgba(0, 24, 70, .5);
            opacity: 0;
            transform: translateY(18px);
            animation: ttUp .55s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .tt-div-head {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 13px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #fff;
            background: linear-gradient(135deg, var(--navy), var(--navy-2));
            border-radius: 0;
            padding: 9px 12px;
            text-align: center
          }

          .tt-div-sep {
            height: 1px;
            background: var(--line);
            margin: 2px 0
          }

          .tt-div-list {
            display: flex;
            flex-direction: column;
            gap: 10px
          }

          .tt-div-grid .tt-onode {
            min-width: 0;
            width: 100%;
            padding: 10px 12px;
            gap: 10px;
            box-shadow: none;
            border-radius: 0;
            animation: none;
            opacity: 1;
            transform: none
          }

          .tt-div-grid .tt-onode-av {
            width: 40px;
            height: 40px
          }

          .tt-div-grid .tt-onode-tx b {
            font-size: 13px
          }

          .tt-div-grid .tt-onode-tx span {
            font-size: 11px
          }

          .tt-onode.divhead {
            border-color: var(--teal);
            background: #F3FBFB
          }

          .tt-onode.divhead .tt-onode-av {
            width: 46px;
            height: 46px
          }

          .tt-onode.divhead .tt-onode-tx b {
            color: var(--teal-dark)
          }

          .tt-onode.divhead .tt-onode-tx span {
            color: var(--muted)
          }

          @media(max-width:1000px) {
            .tt-div-col {
              flex: 0 0 200px;
              width: 200px
            }
          }

          @media(max-width:560px) {
            .tt-div-col {
              flex: 0 0 180px;
              width: 180px
            }
          }

          /* directors */
          .tt-dir-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px
          }

          .tt-dir {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 3/4;
            cursor: default;
            box-shadow: 0 24px 54px -34px rgba(0, 24, 70, .6);
            opacity: 0;
            transform: translateY(22px) scale(.98);
            animation: ttUp .6s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .tt-dir img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: grayscale(0);
            transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .45s
          }

          .tt-dir:hover img {
            transform: scale(1.06);
            filter: grayscale(0)
          }

          .tt-dir-ov {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 24px;
            background: linear-gradient(to top, rgba(8, 18, 44, .92), rgba(8, 18, 44, .1) 55%, transparent)
          }

          .tt-dir-role {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #5DBB64
          }

          .tt-dir-name {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 26px;
            color: #fff;
            line-height: 1.1;
            margin: 6px 0 0
          }

          .tt-dir-q {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.5;
            color: rgba(255, 255, 255, .82);
            margin: 12px 0 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .5s, opacity .4s, margin .4s
          }

          .tt-dir:hover .tt-dir-q {
            max-height: 120px;
            opacity: 1;
            margin-top: 12px
          }

          @media(max-width:1000px) {
            .tt-grid {
              grid-template-columns: repeat(3, 1fr)
            }

            .tt-dir-grid {
              grid-template-columns: repeat(3, 1fr)
            }
          }

          @media(max-width:760px) {
            .tt {
              padding: 10px 22px 80px
            }

            .tt-grid {
              grid-template-columns: repeat(2, 1fr)
            }

            .tt-dir-grid {
              grid-template-columns: 1fr
            }

            .tt-tab {
              padding: 10px 18px;
              font-size: 14px
            }
          }






          .cxr-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: #5DBB64;
            position: relative;
            z-index: 1
          }

          .cxr-eyebrow::before {
            content: "";
            width: 22px;
            height: 1.5px;
            background: #5DBB64
          }

          .cxr-h {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(24px, 2.4vw, 30px);
            line-height: 1.14;
            letter-spacing: -.02em;
            color: #fff;
            margin: 20px 0 0;
            position: relative;
            z-index: 1
          }

          .cxr-p {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 15px;
            line-height: 1.7;
            color: rgba(255, 255, 255, .72);
            margin: 16px 0 0;
            max-width: 330px;
            position: relative;
            z-index: 1
          }

          .cxr-list {
            margin: 36px 0 0;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1
          }

          .cxr-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 17px 0;
            border-top: 1px solid rgba(255, 255, 255, .13);
            text-decoration: none;
            transition: transform .28s cubic-bezier(.22, 1, .36, 1)
          }

          .cxr-item:last-child {
            border-bottom: 1px solid rgba(255, 255, 255, .13)
          }

          a.cxr-item {
            cursor: pointer
          }

          .cxr-ic {
            width: 44px;
            height: 44px;
            flex: 0 0 auto;
            border: 1.5px solid rgba(255, 255, 255, .22);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: .25s
          }

          .cxr-ic svg {
            width: 19px;
            height: 19px
          }

          .cxr-t {
            display: flex;
            flex-direction: column
          }

          .cxr-t b {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .55)
          }

          .cxr-t em {
            font-style: normal;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 16px;
            color: #fff;
            margin-top: 4px;
            transition: color .2s
          }

          a.cxr-item:hover {
            transform: translateX(4px)
          }

          a.cxr-item:hover .cxr-ic {
            border-color: #5DBB64;
            color: #5DBB64
          }

          a.cxr-item:hover .cxr-t em {
            color: #5DBB64
          }

          .cxr-fine {
            position: relative;
            z-index: 1;
            margin: 30px 0 0;
            font-size: 13px;
            line-height: 1.7;
            color: rgba(255, 255, 255, .5)
          }

          .cxr-faq {
            color: rgba(255, 255, 255, .82);
            font-weight: 600;
            text-decoration: none;
            border-bottom: 1.5px solid rgba(255, 255, 255, .25);
            transition: .2s;
            display: inline-block;
            margin-top: 6px
          }

          .cxr-faq:hover {
            color: #5DBB64;
            border-color: #5DBB64
          }

          .cxn-rise {
            opacity: 0;
            transform: translateY(24px);
            animation: ctmIn .9s cubic-bezier(.22, 1, .36, 1) .28s forwards
          }

          @media(prefers-reduced-motion:reduce) {
            .cxn-rise {
              animation: none;
              opacity: 1;
              transform: none
            }
          }

          .ptnr {
            padding: 70px 0 90px;
            background: var(--offwhite)
          }

          .ptnr .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          .ptnr-head {
            text-align: center;
            max-width: 760px;
            margin: 0 auto 50px
          }

          /* contact thank-you popup */
          .cp-modal {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px
          }

          .cp-modal.show {
            display: flex;
            animation: cpFade .25s ease
          }

          @keyframes cpFade {
            from {
              opacity: 0
            }

            to {
              opacity: 1
            }
          }

          .cp-modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(3, 15, 77, .55);
            backdrop-filter: blur(4px)
          }

          .cp-modal-card {
            position: relative;
            z-index: 2;
            background: #fff;
            max-width: 440px;
            width: 100%;
            padding: 48px 40px 40px;
            text-align: center;
            box-shadow: 0 50px 100px -30px rgba(0, 24, 70, .6);
            border-top: 4px solid var(--teal);
            animation: cpPop .45s cubic-bezier(.22, 1.4, .4, 1)
          }

          @keyframes cpPop {
            from {
              opacity: 0;
              transform: translateY(24px) scale(.94)
            }

            to {
              opacity: 1;
              transform: none
            }
          }

          .cp-modal-x {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 34px;
            height: 34px;
            border: none;
            background: none;
            cursor: pointer;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .18s
          }

          .cp-modal-x:hover {
            color: var(--navy)
          }

          .cp-modal-x svg {
            width: 18px;
            height: 18px
          }

          .cp-modal-ic {
            width: 74px;
            height: 74px;
            margin: 0 auto 22px;
            background: rgba(15, 181, 174, .12);
            color: var(--teal-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%
          }

          .cp-modal-ic svg {
            width: 36px;
            height: 36px;
            stroke-dasharray: 28;
            stroke-dashoffset: 28;
            animation: cpCheck .6s .2s ease forwards
          }

          @keyframes cpCheck {
            to {
              stroke-dashoffset: 0
            }
          }

          .cp-modal-card h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 23px;
            color: #1B1464;
            line-height: 1.2
          }

          .cp-modal-card p {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 15px;
            color: var(--muted);
            line-height: 1.6;
            margin: 12px 0 26px
          }

          /* celebratory burst */
          .cp-modal-burst {
            position: absolute;
            top: 54px;
            left: 50%;
            width: 0;
            height: 0;
            pointer-events: none
          }

          .cp-modal-burst span {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--teal);
            opacity: 0
          }

          .cp-modal.show .cp-modal-burst span {
            animation: cpBurst .7s .25s ease-out forwards
          }

          .cp-modal-burst span:nth-child(1) {
            background: var(--teal);
            --tx: -60px;
            --ty: -46px
          }

          .cp-modal-burst span:nth-child(2) {
            background: #1B1464;
            --tx: 62px;
            --ty: -40px
          }

          .cp-modal-burst span:nth-child(3) {
            background: var(--teal);
            --tx: -78px;
            --ty: 18px
          }

          .cp-modal-burst span:nth-child(4) {
            background: #1B1464;
            --tx: 80px;
            --ty: 22px
          }

          .cp-modal-burst span:nth-child(5) {
            background: var(--teal);
            --tx: -30px;
            --ty: -70px
          }

          .cp-modal-burst span:nth-child(6) {
            background: #1B1464;
            --tx: 34px;
            --ty: -66px
          }

          @keyframes cpBurst {
            0% {
              opacity: 1;
              transform: translate(0, 0) scale(1)
            }

            100% {
              opacity: 0;
              transform: translate(var(--tx), var(--ty)) scale(.4)
            }
          }

          .ptnr-eyebrow {
            display: inline-block;
            font-size: 14px;
            font-weight: 700;
            color: var(--teal);
            margin-bottom: 14px
          }

          .ptnr-head h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(30px, 4.4vw, 46px);
            line-height: 1.08;
            letter-spacing: -.025em;
            color: #1B1464;
            margin: 0
          }

          .ptnr-head p {
            font-size: 17px;
            line-height: 1.6;
            color: #3a4254;
            margin: 18px auto 0;
            max-width: 640px
          }

          /* the moved panel keeps its global abt- styling */
          .ptnr .abt-panel {
            display: block;
            max-width: 1100px;
            margin: 0 auto;
            height: auto;
            overflow: visible;
            padding: 0
          }

          /* Floating Call + WhatsApp */
          .ctn-fab {
            position: fixed;
            right: 26px;
            bottom: 26px;
            z-index: 90;
            display: none;
            flex-direction: column;
            gap: 14px
          }

          .ctn-fab.ctn-fab-show {
            display: flex
          }

          .ctn-fab-btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            box-shadow: 0 16px 34px -12px rgba(0, 24, 70, .55);
            transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s;
            position: relative
          }

          .ctn-fab-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 22px 44px -12px rgba(0, 24, 70, .6)
          }

          .ctn-fab-btn svg {
            width: 26px;
            height: 26px
          }

          .ctn-fab-wa {
            background: #25D366
          }

          .ctn-fab-call {
            background: var(--navy)
          }

          .ctn-fab-call svg {
            width: 24px;
            height: 24px
          }

          /* gentle pulse ring on WhatsApp */
          .ctn-fab-wa::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2px solid #25D366;
            opacity: .7;
            animation: ctnPulse 2.2s ease-out infinite
          }

          @keyframes ctnPulse {
            0% {
              transform: scale(1);
              opacity: .6
            }

            80%,
            100% {
              transform: scale(1.6);
              opacity: 0
            }
          }

          @media(max-width:560px) {
            .ctn-fab {
              right: 16px;
              bottom: 16px
            }

            .ctn-fab-btn {
              width: 50px;
              height: 50px
            }
          }




          /* ===== Contact hero (FAQ-band style) ===== */
          .cth {
            position: relative;
            overflow: hidden;
            background: linear-gradient(120deg, #001846 0%, #030F4D 60%, #062a6b 100%);
            padding: 112px 40px 96px;
            text-align: center
          }

          .cth-ov {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(120deg, rgba(0, 24, 70, .72) 0%, rgba(3, 15, 77, .62) 60%, rgba(6, 42, 107, .58) 100%), radial-gradient(680px 340px at 78% -10%, rgba(15, 181, 174, .28), transparent 70%), radial-gradient(560px 320px at 12% 120%, rgba(201, 162, 75, .16), transparent 72%)
          }

          .cth-inner {
            position: relative;
            z-index: 2;
            max-width: 900px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(18px);
            animation: ctmIn .8s cubic-bezier(.22, 1, .36, 1) .12s forwards
          }

          .cth-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: #8fe6e1
          }

          .cth-eyebrow .dot {
            width: 9px;
            height: 9px;
            background: var(--teal)
          }

          .cth-title {
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 800;
            color: #fff;
            font-size: clamp(38px, 5.6vw, 68px);
            line-height: 1.03;
            letter-spacing: -.03em;
            margin: 18px 0 0
          }

          .cth-sub {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            color: rgba(255, 255, 255, .82);
            font-size: clamp(16px, 1.7vw, 19px);
            line-height: 1.65;
            margin: 20px auto 0;
            max-width: 560px
          }

          .cth-contact {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px 40px;
            flex-wrap: wrap;
            margin: 42px 0 0
          }

          .cth-citem {
            display: inline-flex;
            align-items: center;
            gap: 13px;
            text-decoration: none;
            transition: transform .25s
          }

          a.cth-citem {
            cursor: pointer
          }

          .cth-cic {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            border: 1.5px solid rgba(255, 255, 255, .28);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: .25s
          }

          .cth-cic svg {
            width: 19px;
            height: 19px
          }

          .cth-ct {
            display: flex;
            flex-direction: column;
            text-align: left
          }

          .cth-ct b {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .55)
          }

          .cth-ct em {
            font-style: normal;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            color: #fff;
            margin-top: 3px;
            transition: color .2s
          }

          a.cth-citem:hover {
            transform: translateY(-2px)
          }

          a.cth-citem:hover .cth-cic {
            border-color: var(--teal);
            color: var(--teal)
          }

          a.cth-citem:hover .cth-ct em {
            color: #8fe6e1
          }

          @media(prefers-reduced-motion:reduce) {
            .cth-inner {
              animation: none;
              opacity: 1;
              transform: none
            }
          }

          @media(max-width:640px) {
            .cth {
              padding: 82px 22px 66px
            }

            .cth-contact {
              flex-direction: column;
              gap: 22px
            }
          }

          /* ===== Our Offices ===== */
          .ofc {
            background: #fff;
            padding: 84px 0 96px
          }

          .ofc .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          .ofc-head {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 52px
          }

          .ofc-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .ofc-eyebrow::before {
            content: "";
            width: 24px;
            height: 1.5px;
            background: var(--teal)
          }

          .ofc-head h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(28px, 3.4vw, 42px);
            letter-spacing: -.02em;
            color: #1B1464;
            margin: 16px 0 0
          }

          .ofc-head p {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.65;
            margin: 14px 0 0
          }

          .ofc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border: 1px solid var(--line)
          }

          .ofc-card {
            position: relative;
            padding: 34px 30px 32px;
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            transition: .3s;
            overflow: hidden
          }

          .ofc-card:nth-child(3n) {
            border-right: none
          }

          .ofc-card:nth-child(n+4) {
            border-bottom: none
          }

          .ofc-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--teal);
            transform: scaleY(0);
            transform-origin: top;
            transition: transform .35s
          }

          .ofc-card:hover::before {
            transform: scaleY(1)
          }

          .ofc-card:hover {
            background: var(--offwhite)
          }

          .ofc-city {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 20px;
            letter-spacing: -.01em;
            color: var(--navy)
          }

          .ofc-tag {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--teal-dark);
            background: #e7f7f6;
            padding: 3px 10px;
            margin-top: 12px
          }

          .ofc-tag.hq {
            color: #8a6d20;
            background: #f7f0dc
          }

          .ofc-addr {
            font-size: 14px;
            line-height: 1.7;
            color: var(--muted);
            margin: 18px 0 0
          }

          .ofc-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 13px;
            font-size: 13.5px;
            color: var(--navy)
          }

          .ofc-row svg {
            width: 16px;
            height: 16px;
            stroke: var(--teal-dark);
            fill: none;
            stroke-width: 1.8;
            flex: 0 0 auto
          }

          .ofc-row a {
            color: var(--navy);
            font-weight: 600;
            text-decoration: none;
            transition: color .2s
          }

          .ofc-row a:hover {
            color: var(--teal)
          }

          .ofc-card.elsewhere {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(165deg, var(--navy) 0%, #030F4D 100%);
            color: #fff
          }

          .ofc-card.elsewhere:hover {
            background: linear-gradient(165deg, var(--navy) 0%, #030F4D 100%)
          }

          .ofc-card.elsewhere::before {
            display: none
          }

          .ofc-card.elsewhere h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 22px;
            line-height: 1.2;
            margin: 0
          }

          .ofc-card.elsewhere p {
            font-size: 14px;
            line-height: 1.6;
            color: rgba(255, 255, 255, .75);
            margin: 12px 0 20px
          }

          .ofc-btn {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--teal);
            color: #022;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-weight: 700;
            font-size: 13.5px;
            padding: 12px 22px;
            transition: .2s
          }

          .ofc-btn:hover {
            filter: brightness(1.07);
            transform: translateY(-2px)
          }

          .ofc-btn svg {
            width: 15px;
            height: 15px;
            stroke: #022;
            fill: none;
            stroke-width: 2
          }

          @media(max-width:980px) {
            .ofc-grid {
              grid-template-columns: 1fr 1fr
            }

            .ofc-card {
              border-right: 1px solid var(--line);
              border-bottom: 1px solid var(--line)
            }

            .ofc-card:nth-child(2n) {
              border-right: none
            }

            .ofc-card:nth-child(n+5) {
              border-bottom: none
            }
          }

          @media(max-width:640px) {
            .ofc .wrap {
              padding: 0 22px
            }

            .ofc-grid {
              grid-template-columns: 1fr
            }

            .ofc-card {
              border-right: none !important;
              border-bottom: 1px solid var(--line) !important
            }

            .ofc-card:last-child {
              border-bottom: none !important
            }
          }

          .ctnew {
            padding: 80px 0 50px;
            background: #fff
          }

          .ctnew .wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px
          }

          /* ===== Minimal contact hero (header + essentials, replaces old cards/map/strip) ===== */
          .ctm-divider {
            position: relative;
            height: 1px;
            max-width: 1100px;
            margin: 56px auto 0;
            background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent)
          }

          .ctm-divider span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--teal);
            box-shadow: 0 0 0 6px #fff
          }

          .ctm-hero {
            position: relative;
            text-align: center;
            max-width: auto;
            margin: 0 auto;
            padding: 34px 0 10px
          }

          .ctm-glow {
            position: absolute;
            top: -140px;
            left: 50%;
            transform: translateX(-50%);
            width: 680px;
            height: 460px;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(50% 50% at 50% 40%, rgba(15, 181, 174, .14), transparent 70%)
          }

          .ctm-eyebrow {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .ctm-eyebrow::before {
            content: "";
            width: 26px;
            height: 1.5px;
            background: var(--teal)
          }

          .ctm-h1 {
            position: relative;
            z-index: 1;
            font-family: 'Inter', sans-serif;
            font-weight: 100;
            font-size: clamp(36px, 5.4vw, 58px);
            line-height: 1.08;
            letter-spacing: -.025em;
            color: #1B1464;
            margin: 22px 0 0
          }

          .ctm-lead {
            position: relative;
            z-index: 1;
            font-size: 17px;
            line-height: 1.65;
            color: #3a4254;
            margin: 20px auto 0;
            max-width: 460px
          }

          .ctm-info {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin: 58px 0 0;
            flex-wrap: wrap
          }

          .ctm-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 8px 34px;
            text-decoration: none;
            transition: transform .25s
          }

          a.ctm-item {
            cursor: pointer
          }

          .ctm-ic {
            width: 40px;
            height: 40px;
            flex: 0 0 auto;
            border: 1.5px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            transition: .25s
          }

          .ctm-ic svg {
            width: 18px;
            height: 18px
          }

          .ctm-t {
            display: flex;
            flex-direction: column;
            text-align: left
          }

          .ctm-t b {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 11.5px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #8a93a1
          }

          .ctm-t em {
            font-style: normal;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15.5px;
            color: var(--navy);
            margin-top: 3px;
            transition: color .2s
          }

          .ctm-item:hover {
            transform: translateY(-2px)
          }

          .ctm-item:hover .ctm-ic {
            border-color: var(--teal);
            color: var(--teal)
          }

          .ctm-item:hover .ctm-t em {
            color: var(--teal)
          }

          .ctm-div {
            width: 1.5px;
            height: 42px;
            background: var(--line)
          }

          .ctm-fine {
            position: relative;
            z-index: 1;
            margin: 40px 0 0;
            font-size: 13.5px;
            color: #8a93a1
          }

          .ctm-fine a {
            color: var(--navy);
            font-weight: 600;
            text-decoration: none;
            border-bottom: 1.5px solid var(--line);
            transition: .2s
          }

          .ctm-fine a:hover {
            color: var(--teal);
            border-color: var(--teal)
          }

          .ctm-anim {
            opacity: 0;
            transform: translateY(18px);
            animation: ctmIn .8s cubic-bezier(.22, 1, .36, 1) forwards
          }

          .ctm-eyebrow.ctm-anim {
            animation-delay: .05s
          }

          .ctm-h1.ctm-anim {
            animation-delay: .16s
          }

          .ctm-lead.ctm-anim {
            animation-delay: .3s
          }

          .ctm-info.ctm-anim {
            animation-delay: .44s
          }

          .ctm-fine.ctm-anim {
            animation-delay: .58s
          }

          @keyframes ctmIn {
            to {
              opacity: 1;
              transform: none
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .ctm-anim {
              animation: none;
              opacity: 1;
              transform: none
            }
          }

          @media(max-width:700px) {
            .ctm-info {
              flex-direction: column;
              gap: 22px;
              margin-top: 44px
            }

            .ctm-div {
              width: 60px;
              height: 1.5px
            }
          }

          @media(max-width:560px) {
            .ctnew .wrap {
              padding: 0 20px
            }
          }






          .csf {
            background: var(--offwhite);
            padding: 70px 0 90px;
            min-height: 80vh
          }

          .csf-wrap {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center
          }

          .csf-eyebrow {
            display: inline-block;
            font-size: 14px;
            font-weight: 700;
            color: var(--teal);
            margin-bottom: 16px
          }

          .csf-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(30px, 4vw, 46px);
            line-height: 1.08;
            letter-spacing: -.025em;
            color: #1B1464;
            margin: 0
          }

          .csf-h1 em {
            font-style: italic;
            color: var(--teal)
          }

          .csf-lead {
            font-size: 16px;
            line-height: 1.65;
            color: #3a4254;
            margin: 20px 0 26px;
            max-width: 420px
          }

          .csf-points {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 12px
          }

          .csf-points li {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            color: var(--navy)
          }

          .csf-tick {
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            background: rgba(15, 181, 174, .14);
            color: var(--teal);
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700
          }

          .csf-card {
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 34px 32px;
            box-shadow: 0 30px 60px -34px rgba(0, 24, 70, .4)
          }

          .csf-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px
          }

          .csf-field {
            margin-bottom: 18px;
            display: flex;
            flex-direction: column
          }

          .csf-field label {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 7px
          }

          .csf-field label span {
            color: var(--teal)
          }

          .csf-field input {
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            color: var(--ink);
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            padding: 12px 14px;
            transition: border-color .15s, box-shadow .15s
          }

          .csf-field input:focus {
            outline: none;
            border-color: var(--teal);
            box-shadow: 0 0 0 3px rgba(15, 181, 174, .14)
          }

          .csf-field input.err {
            border-color: #e0564f;
            box-shadow: 0 0 0 3px rgba(224, 86, 79, .12)
          }

          .csf-error {
            color: #e0564f;
            font-size: 13.5px;
            min-height: 18px;
            margin: 2px 0 10px
          }

          .csf-submit {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 15px 22px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: .2s
          }

          .csf-submit:hover {
            background: var(--teal);
            transform: translateY(-2px)
          }

          .csf-submit svg {
            width: 18px;
            height: 18px
          }

          .csf-fine {
            font-size: 12px;
            color: #8a93a1;
            line-height: 1.5;
            margin: 14px 0 0;
            text-align: center
          }

          @media(max-width:860px) {
            .csf-wrap {
              grid-template-columns: 1fr;
              gap: 36px
            }

            .csf-row {
              grid-template-columns: 1fr
            }
          }

          /* ===================== END CONTACT FORM PAGE ===================== */






          .ty {
            background: var(--navy);
            color: #fff;
            min-height: 78vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 80px 24px
          }

          .ty::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(60% 90% at 20% 0%, rgba(15, 181, 174, .28), transparent 60%), radial-gradient(55% 90% at 82% 12%, rgba(40, 90, 220, .30), transparent 62%), radial-gradient(50% 80% at 60% 110%, rgba(214, 170, 70, .18), transparent 60%)
          }

          .ty::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .5;
            background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
            background-size: 54px 54px
          }

          .ty-inner {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 600px
          }

          .ty-check {
            width: 74px;
            height: 74px;
            border-radius: 50%;
            background: var(--teal);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 26px;
            box-shadow: 0 0 0 10px rgba(15, 181, 174, .18);
            animation: tyPop .5s cubic-bezier(.22, 1.4, .4, 1)
          }

          .ty-check svg {
            width: 36px;
            height: 36px
          }

          @keyframes tyPop {
            0% {
              transform: scale(.4);
              opacity: 0
            }

            100% {
              transform: scale(1);
              opacity: 1
            }
          }

          .ty-eyebrow {
            display: inline-block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--teal);
            margin-bottom: 14px
          }

          .ty-h1 {
            font-family: 'Inter', sans-serif;
            font-weight: 200;
            font-size: clamp(34px, 5vw, 56px);
            line-height: 1.04;
            letter-spacing: -.025em;
            margin: 0
          }

          .ty-lead {
            font-size: 17px;
            font-weight: 300;
            line-height: 1.65;
            color: #c7d2e4;
            margin: 20px auto 0;
            max-width: 480px
          }

          .ty-btns {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 34px
          }

          .ty-btn-solid {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--teal);
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 15px 28px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: .2s
          }

          .ty-btn-solid:hover {
            background: #fff;
            color: var(--navy);
            transform: translateY(-2px)
          }

          .ty-btn-solid svg {
            width: 18px;
            height: 18px
          }

          .ty-btn-ghost {
            background: transparent;
            color: #fff;
            border: 1.5px solid rgba(255, 255, 255, .3);
            border-radius: 0;
            padding: 15px 24px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: .2s
          }

          .ty-btn-ghost:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, .08)
          }







          /* ============================================================
         FAQ PAGE - single-scroll, bold & modern (v3 rebuild)
         ============================================================ */
          .faqpage {
            padding: 0 0 120px;
            background: #fff
          }

          @media (prefers-reduced-motion:reduce) {
            .faqpage * {
              animation: none !important
            }
          }

          /* ---- HERO HEADER BAND ---- */
          .faqx-hero {
            position: relative;
            overflow: hidden;
            background: linear-gradient(120deg, #001846 0%, #030F4D 60%, #062a6b 100%);
            padding: 118px 40px 104px;
            text-align: center;
          }

          .faqx-hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            background: url('/extracted/0fc0563c4586bf41.jpg') center/cover no-repeat;
            opacity: .42;
            will-change: transform;
            animation: faqxKen 26s ease-in-out infinite alternate;
          }

          @keyframes faqxKen {
            0% {
              transform: scale(1.04) translate(0, 0)
            }

            100% {
              transform: scale(1.14) translate(-2%, -1.5%)
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .faqx-hero-bg {
              animation: none;
              transform: scale(1.06)
            }
          }

          .faqx-hero-ov {
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
              linear-gradient(120deg, rgba(0, 24, 70, .72) 0%, rgba(3, 15, 77, .62) 60%, rgba(6, 42, 107, .58) 100%),
              radial-gradient(680px 340px at 78% -10%, rgba(15, 181, 174, .28), transparent 70%),
              radial-gradient(560px 320px at 12% 120%, rgba(201, 162, 75, .16), transparent 72%);
          }

          .faqx-hero-inner {
            position: relative;
            z-index: 2;
            max-width: 860px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .7s ease, transform .7s ease
          }

          .faqx-hero.in .faqx-hero-inner {
            opacity: 1;
            transform: translateY(0)
          }

          .faqx-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #8fe6e1
          }

          .faqx-eyebrow .dot {
            width: 10px;
            height: 10px;
            background: var(--teal)
          }

          .faqx-title {
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 800;
            color: #fff;
            font-size: clamp(40px, 6vw, 76px);
            line-height: 1.02;
            letter-spacing: -.03em;
            margin: 20px 0 0
          }

          .faqx-sub {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            color: rgba(255, 255, 255, .82);
            font-size: clamp(17px, 1.9vw, 21px);
            line-height: 1.65;
            margin: 24px auto 0;
            max-width: 620px
          }

          /* ---- SINGLE-SCROLL BODY ---- */
          .faqx-body {
            max-width: 920px;
            margin: 0 auto;
            padding: 0 40px
          }

          /* category block */
          .faqx-cat {
            margin-top: 76px
          }

          .faqx-cat:first-child {
            margin-top: 52px
          }

          .faqx-cat-head {
            display: flex;
            align-items: baseline;
            gap: 16px;
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(24px, 3vw, 32px);
            letter-spacing: -.02em;
            color: #001846;
            margin: 0 0 26px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9edf3;
          }

          .faqx-cat-num {
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 800;
            font-size: .62em;
            color: var(--teal);
            letter-spacing: .02em
          }

          /* ---- accordion (shared .faq-* restyled bigger/bolder) ---- */
          .faq-acc {
            display: flex;
            flex-direction: column;
            gap: 14px
          }

          .faq-item {
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 0;
            overflow: hidden;
            transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease, border-color .25s ease;
            opacity: 0;
            transform: translateY(20px)
          }

          .faq-item.faq-visible {
            opacity: 1;
            transform: translateY(0)
          }

          .faq-item:hover {
            border-color: #bcd9d5;
            box-shadow: 0 16px 34px -22px rgba(0, 24, 70, .20)
          }

          .faq-item.open {
            box-shadow: 0 24px 50px -28px rgba(0, 24, 70, .28);
            border-color: var(--teal)
          }

          .faq-q {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 26px 32px;
            text-align: left;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: clamp(19px, 2.1vw, 23px);
            line-height: 1.35;
            color: #001846;
            transition: color .2s ease
          }

          .faq-item.open .faq-q {
            color: #030F4D
          }

          .faq-item:hover .faq-q {
            color: #030F4D
          }

          /* animated +/x icon */
          .faq-ic {
            position: relative;
            width: 24px;
            height: 24px;
            flex-shrink: 0
          }

          .faq-ic::before,
          .faq-ic::after {
            content: "";
            position: absolute;
            background: var(--navy);
            border-radius: 0;
            transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .25s ease
          }

          .faq-ic::before {
            top: 11px;
            left: 0;
            width: 24px;
            height: 2.5px
          }

          .faq-ic::after {
            top: 0;
            left: 11px;
            width: 2.5px;
            height: 24px
          }

          .faq-item.open .faq-ic::after {
            transform: rotate(90deg);
            opacity: 0
          }

          .faq-item.open .faq-ic::before {
            background: var(--teal);
            transform: rotate(180deg)
          }

          /* answer */
          .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s cubic-bezier(.4, 0, .2, 1)
          }

          .faq-a p {
            margin: 0;
            padding: 0 32px 30px;
            color: #3a4560;
            font-size: clamp(16px, 1.8vw, 18.5px);
            line-height: 1.75;
            max-width: 760px
          }

          .faq-item.open .faq-a {
            max-height: 520px
          }

          .faq-word {
            opacity: 0;
            transition: opacity .32s ease
          }

          .faq-word.show {
            opacity: 1
          }

          /* ---- closing CTA ---- */
          .faqx-cta {
            margin-top: 88px;
            text-align: center;
            padding: 64px 40px;
            background: linear-gradient(120deg, #f6f8fb 0%, #eef3fb 100%);
            border: 1.5px solid #e3e9f2
          }

          .faqx-cta h3 {
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(26px, 3.2vw, 36px);
            color: #001846;
            letter-spacing: -.02em;
            margin: 0
          }

          .faqx-cta p {
            font-size: 18px;
            line-height: 1.6;
            color: #586178;
            margin: 14px 0 30px
          }

          .faqx-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: #001846;
            color: #fff;
            border: none;
            border-radius: 0;
            padding: 17px 34px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 16px;
            transition: background .2s ease, gap .2s ease
          }

          .faqx-cta-btn span {
            transition: transform .2s ease
          }

          .faqx-cta-btn:hover {
            background: var(--teal-dark)
          }

          .faqx-cta-btn:hover span {
            transform: translateX(5px)
          }

          @media(prefers-reduced-motion:reduce) {
            .faq-item {
              opacity: 1;
              transform: none;
              transition: box-shadow .2s, border-color .2s
            }

            .faqx-hero-inner {
              opacity: 1;
              transform: none
            }
          }

          @media(max-width:640px) {
            .faqx-hero {
              padding: 88px 22px 78px
            }

            .faqx-body {
              padding: 0 20px
            }

            .faqx-cat:first-child {
              margin-top: 40px
            }

            .faq-q {
              padding: 22px 22px;
              font-size: 18px;
              gap: 16px
            }

            .faq-a p {
              padding: 0 22px 24px;
              font-size: 16px
            }

            .faqx-cta {
              padding: 48px 24px;
              margin-top: 64px
            }
          }

          /* ---------- SERVICES STRIP (What we can do for you) ---------- */
          .svc-strip {
            padding: 90px 0 30px;
            background: #fff
          }

          .svc-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
            flex-wrap: wrap;
            margin-bottom: 46px
          }

          .svc-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #eef3fb;
            border: 1px solid #dde6f4;
            border-radius: 0;
            padding: 7px 16px;
            font-size: 13px;
            font-weight: 600;
            color: var(--navy)
          }

          .svc-pill svg {
            width: 15px;
            height: 15px;
            stroke: var(--teal);
            fill: none;
            stroke-width: 2
          }

          .svc-title {
            font-family: 'Inter', sans-serif;
            font-weight: 100;
            font-size: clamp(30px, 4.4vw, 30px);
            line-height: 1.05;
            letter-spacing: -.02em;
            color: #001846;
            margin: 16px 0 0;
            max-width: 520px
          }

          .svc-right {
            max-width: 440px;
            padding-top: 6px
          }

          .svc-right p {
            font-size: 16px;
            line-height: 1.55;
            color: #3a4254;
            margin: 0 0 24px
          }

          .svc-cta {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            background: var(--teal);
            color: #fff;
            border: none;
            cursor: pointer;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 15px;
            border-radius: 0;
            padding: 10px 12px 10px 24px;
            transition: .18s
          }

          .svc-cta:hover {
            background: var(--teal-dark)
          }

          .svc-cta .arrow {
            width: 36px;
            height: 36px;
            border-radius: 0;
            background: var(--navy);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px
          }

          .svc-cards {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px
          }

          .svc-card {
            position: relative;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 3/5;
            background: #0a1f4d;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: flex-end;
            text-decoration: none;
            cursor: pointer
          }

          .svc-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 16, 46, 0) 35%, rgba(0, 16, 46, .78) 100%);
            z-index: 1
          }

          .svc-card h4 {
            position: relative;
            z-index: 2;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 18px;
            line-height: 1.25;
            margin: 0;
            padding: 20px
          }

          .svc-card .svc-arrow {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 2;
            width: 38px;
            height: 38px;
            border-radius: 0;
            background: rgba(255, 255, 255, .85);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            font-size: 18px;
            transition: .18s
          }

          .svc-card:hover .svc-arrow {
            background: #fff
          }

          .svc-card:hover {
            transform: translateY(-4px)
          }

          .svc-card {
            transition: transform .2s
          }

          @media(max-width:1000px) {
            .svc-cards {
              grid-template-columns: repeat(2, 1fr)
            }

            .svc-card {
              aspect-ratio: 4/5
            }
          }

          @media(max-width:560px) {
            .svc-cards {
              grid-template-columns: 1fr
            }

            .svc-head {
              flex-direction: column;
              gap: 20px
            }
          }

          .sv-footer {
            font-family: 'Inter', sans-serif;
            color: #fff;
            margin-top: 80px;
            position: relative;
            padding: 64px 24px 0;
            background: #0a1020
          }

          .sv-footer * {
            box-sizing: border-box
          }

          /* full-bleed dark image backdrop (blurred), set via JS */
          .sv-footer .sv-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(18px) saturate(1.05);
            transform: scale(1.08);
            opacity: .55;
            z-index: 0;
            pointer-events: none
          }

          .sv-footer .sv-bg-tint {
            position: absolute;
            inset: 0;
            z-index: 0
          }

          /* floating card */
          .sv-card {
            position: relative;
            z-index: 2;
            max-width: 100%;
            margin: 0 auto;
            background: rgba(8, 16, 34, .55);
            border: 1px solid rgba(255, 255, 255, .08);
            backdrop-filter: blur(8px);
            padding: 64px 64px 0
          }

          .sv-card .sv-card-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .28;
            z-index: -1;
            pointer-events: none
          }

          .sv-card .sv-card-tint {
            position: absolute;
            inset: 0;
            background: linear-gradient(207deg, rgba(0, 71, 195, .44), rgba(38, 98, 235, 0));
            z-index: -1
          }

          .sv-footer a {
            color: inherit;
            text-decoration: none;
            transition: color .18s, opacity .18s
          }

          /* ---- Newsletter ---- */
          .sv-news {
            text-align: center;
            max-width: 720px;
            margin: 0 auto 56px
          }

          .sv-news h3 {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: 30px;
            letter-spacing: -.01em;
            color: #f3f1ea;
            margin: 0 0 26px
          }

          .sv-news-form {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .16);
            max-width: 520px;
            margin: 0 auto;
            padding: 7px 7px 7px 22px
          }

          .sv-news-form input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14.5px;
            color: #fff;
            background: transparent;
            padding: 12px 0;
            font-family: inherit
          }

          .sv-news-form input::placeholder {
            color: rgba(255, 255, 255, .5)
          }

          .sv-news-form button {
            background: #f3f1ea;
            color: #0a1020;
            border: none;
            padding: 13px 28px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
            transition: .18s;
            white-space: nowrap
          }

          .sv-news-form button:hover {
            background: #fff
          }

          .sv-news-fine {
            color: rgba(255, 255, 255, .55);
            font-size: 12.5px;
            margin-top: 16px
          }

          .sv-news-fine a {
            color: rgba(255, 255, 255, .85);
            text-decoration: underline;
            text-underline-offset: 2px
          }

          .sv-news-fine a:hover {
            color: #fff
          }

          /* ---- Link grid ---- */
          .sv-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr 1.2fr 1.1fr 1.3fr;
            gap: 40px 36px;
            padding: 0 0 48px;
            align-items: start
          }

          .sv-group+.sv-group {
            margin-top: 0
          }

          .sv-grid h4 {
            font-size: 13px;
            font-weight: 500;
            letter-spacing: .01em;
            color: rgba(243, 241, 234, .55);
            margin: 0 0 16px
          }

          .sv-grid ul {
            list-style: none;
            margin: 0;
            padding: 0
          }

          .sv-grid li {
            margin: 0 0 11px
          }

          .sv-grid li a {
            font-size: 14.5px;
            color: rgba(255, 255, 255, .86);
            font-weight: 400
          }

          .sv-grid li a:hover {
            color: var(--teal)
          }

          /* ---- Centered identity ---- */
          .sv-id {
            border-top: 1px solid rgba(255, 255, 255, .12);
            text-align: center;
            padding: 40px 0 8px
          }

          .sv-id .sv-logo img {
            height: 42px;
            width: auto;
            display: inline-block
          }

          .sv-id .sv-contact {
            margin: 20px 0 22px;
            color: rgba(255, 255, 255, .82);
            font-size: 14.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap
          }

          .sv-id .sv-contact .sep {
            color: rgba(255, 255, 255, .3)
          }

          .sv-id .sv-contact a:hover {
            color: var(--teal)
          }

          .sv-social {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-bottom: 30px
          }

          .sv-social a {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            transition: .18s
          }

          .sv-social a:hover {
            background: var(--teal);
            border-color: var(--teal)
          }

          .sv-social svg {
            width: 17px;
            height: 17px;
            fill: #fff
          }

          /* ---- Bottom bar ---- */
          .sv-bottom {
            position: relative;
            z-index: 2;
            max-width: 100%;
            margin: 0 auto;
            border-top: 1px solid rgba(255, 255, 255, .1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 14px;
            padding: 18px 0 26px
          }

          .sv-bottom .copy {
            color: rgba(255, 255, 255, .6);
            font-size: 13px
          }

          .sv-bottom .legal {
            display: flex;
            align-items: center;
            gap: 28px
          }

          .sv-social-bottom {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-left: 6px
          }

          .sv-social-bottom a {
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .28);
            transition: .18s
          }

          .sv-social-bottom a:hover {
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .55)
          }

          .sv-social-bottom svg {
            width: 14px;
            height: 14px;
            fill: rgba(255, 255, 255, .85)
          }

          .sv-social-bottom a:hover svg {
            fill: #fff
          }

          .sv-bottom .legal a {
            color: rgba(255, 255, 255, .78);
            font-size: 13px
          }

          .sv-bottom .legal a:hover {
            color: var(--teal)
          }

          @media(max-width:960px) {
            .sv-card {
              padding: 44px 30px 0
            }

            .sv-grid {
              grid-template-columns: 1fr 1fr;
              gap: 36px 28px
            }
          }

          @media(max-width:560px) {
            .sv-footer {
              padding: 40px 14px 0
            }

            .sv-card {
              padding: 34px 20px 0
            }

            .sv-news h3 {
              font-size: 23px
            }

            .sv-news-form {
              flex-direction: column;
              align-items: stretch;
              padding: 14px
            }

            .sv-news-form button {
              margin-top: 10px
            }

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

            .sv-bottom {
              flex-direction: column;
              align-items: flex-start
            }

            .sv-bottom .legal {
              flex-wrap: wrap;
              gap: 16px
            }
          }


          /* ===== Footer v2: nav-mirroring grid + contact + social ===== */
          .sv-grid {
            grid-template-columns: 1.1fr 1fr 1fr 1.2fr 1.3fr !important;
            gap: 44px 32px
          }

          .sv-grid .sv-foot-contact h4 {
            margin-bottom: 14px
          }

          .sv-fc-row {
            display: flex;
            gap: 11px;
            align-items: flex-start;
            margin: 0 0 14px;
            color: rgba(255, 255, 255, .86);
            font-size: 14px;
            line-height: 1.55
          }

          .sv-fc-row a {
            color: rgba(255, 255, 255, .86)
          }

          .sv-fc-row a:hover {
            color: var(--teal)
          }

          .sv-foot-logo {
            display: inline-block;
            margin-top: 22px
          }

          .sv-foot-logo img {
            height: 60px;
            width: auto;
            display: block;
            opacity: .96
          }

          .sv-fc-row svg {
            width: 17px;
            height: 17px;
            stroke: var(--teal);
            fill: none;
            stroke-width: 1.8;
            flex-shrink: 0;
            margin-top: 2px
          }

          .sv-fc-row a {
            color: rgba(255, 255, 255, .86)
          }

          .sv-fc-row a:hover {
            color: var(--teal)
          }

          .sv-id {
            padding: 34px 0 8px
          }

          .sv-id .sv-logo img {
            height: 40px
          }

          .sv-id .sv-logo {
            display: inline-flex;
            align-items: center;
            gap: 13px
          }

          .sv-id .sv-logo .sv-logo-mark {
            height: 44px;
            width: auto
          }

          .sv-id .sv-logo .sv-logo-word {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 25px;
            letter-spacing: .16em;
            color: #f3f1ea
          }

          /* creative blue social icons */
          .sv-social {
            gap: 16px;
            margin-top: 24px;
            margin-bottom: 30px
          }

          .sv-social a {
            width: 44px;
            height: 44px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(145deg, #1d63ff, #0a3bd6);
            border: 1px solid rgba(120, 170, 255, .4);
            box-shadow: 0 6px 18px -6px rgba(29, 99, 255, .6);
            transition: transform .22s ease, box-shadow .22s ease, background .22s ease
          }

          .sv-social a::after {
            content: "";
            position: absolute;
            top: -60%;
            left: -60%;
            width: 60%;
            height: 220%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
            transform: rotate(20deg);
            transition: left .5s ease
          }

          .sv-social a:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 26px -6px rgba(29, 99, 255, .8);
            background: linear-gradient(145deg, #2a72ff, #1546e6)
          }

          .sv-social a:hover::after {
            left: 130%
          }

          .sv-social svg {
            width: 19px;
            height: 19px;
            fill: #fff;
            position: relative;
            z-index: 1
          }

          @media(max-width:960px) {
            .sv-grid {
              grid-template-columns: 1fr 1fr !important
            }
          }

          @media(max-width:560px) {
            .sv-grid {
              grid-template-columns: 1fr !important
            }
          }

          /* ===================== CLIENTS PAGE ===================== */



          /* ============ CLIENT SHOWCASE PAGE (cl-) ============ */
          #view-clients {
            font-family: 'Inter', sans-serif;
            color: var(--navy);
            background: #fff
          }

          #view-media {
            margin-top: -72px
          }

          .cl-hero {
            position: relative;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 100px 28px 66px;
            text-align: center;
            overflow: hidden;
            background: radial-gradient(120% 140% at 50% -20%, #0b2a63 0%, #030F4D 42%, #001235 100%)
          }

          /* ---- animated logo constellation (built at runtime from grid logos) ---- */
          .cl-constellation {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden
          }

          .cl-node {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            will-change: transform, opacity;
            transition: opacity 1.1s ease
          }

          .cl-node.in {
            opacity: var(--o, .12)
          }

          .cl-node img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: grayscale(1) brightness(0) invert(1);
            display: block
          }

          .cl-node.float {
            animation: clNodeFloat var(--dur, 22s) ease-in-out infinite alternate
          }

          @keyframes clNodeFloat {
            0% {
              transform: translate(0, 0)
            }

            100% {
              transform: translate(var(--dx, 20px), var(--dy, -18px))
            }
          }

          /* ambient depth glows kept, refined */
          .cl-hero-glow {
            position: absolute;
            pointer-events: none;
            z-index: 0;
            will-change: transform
          }

          .cl-hero-glow::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            filter: blur(80px);
            opacity: .42
          }

          .cl-hero-glow.a {
            width: 520px;
            height: 520px;
            top: -200px;
            left: -120px
          }

          .cl-hero-glow.a::before {
            background: radial-gradient(circle, var(--teal), transparent 70%);
            animation: clGlowA 17s ease-in-out infinite alternate
          }

          .cl-hero-glow.b {
            width: 420px;
            height: 420px;
            bottom: -200px;
            right: -90px
          }

          .cl-hero-glow.b::before {
            background: radial-gradient(circle, #3b5bdb, transparent 70%);
            animation: clGlowB 19s ease-in-out infinite alternate
          }

          @keyframes clGlowA {
            0% {
              transform: translate(0, 0) scale(1)
            }

            100% {
              transform: translate(70px, 45px) scale(1.18)
            }
          }

          @keyframes clGlowB {
            0% {
              transform: translate(0, 0) scale(1)
            }

            100% {
              transform: translate(-55px, -35px) scale(1.12)
            }
          }

          /* soft vignette so text sits cleanly above the constellation */
          .cl-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(70% 90% at 50% 45%, rgba(3, 15, 77, .55) 0%, rgba(3, 15, 77, .15) 55%, transparent 100%)
          }

          .cl-hero::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 150px;
            z-index: 1;
            pointer-events: none
          }

          .cl-hero-inner {
            max-width: 940px;
            margin: 0 auto;
            position: relative;
            z-index: 3
          }

          .cl-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: #8fe9e3;
            margin-bottom: 22px;
            position: relative;
            padding-left: 20px
          }

          .cl-eyebrow::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 12px;
            height: 12px;
            border-left: 2px solid var(--teal);
            border-top: 2px solid var(--teal);
            transform: translateY(-50%)
          }

          .cl-hero h1 {
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(40px, 6vw, 66px);
            line-height: 1.0;
            letter-spacing: -.035em;
            color: #fff;
            margin: 0
          }

          .cl-hero h1 .accent {
            background: linear-gradient(100deg, #8fe9e3 0%, #5DBB64 55%, #66d6f0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800
          }

          .cl-hero .lead {
            max-width: 600px;
            margin: 24px auto 0;
            font-size: 17px;
            font-weight: 300;
            line-height: 1.65;
            color: rgba(255, 255, 255, .78)
          }

          /* Stats row - premium, with dividers */
          .cl-stats {
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 0;
            margin-top: 54px;
            flex-wrap: nowrap
          }

          .cl-stat {
            text-align: center;
            padding: 0 clamp(16px, 3vw, 44px);
            position: relative
          }

          .cl-stat+.cl-stat::before {
            content: "";
            position: absolute;
            left: 0;
            top: 14%;
            height: 72%;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(143, 233, 227, .4), transparent)
          }

          .cl-stat .num {
            font-family: 'Sora', 'Inter', sans-serif;
            font-weight: 800;
            font-size: clamp(34px, 4.8vw, 56px);
            color: #fff;
            line-height: 1;
            letter-spacing: -.03em
          }

          .cl-stat .num .plus {
            color: var(--teal)
          }

          .cl-stat .lbl {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: rgba(255, 255, 255, .62);
            margin-top: 12px
          }

          @media(prefers-reduced-motion:reduce) {

            .cl-hero-glow::before,
            .cl-node.float {
              animation: none
            }

            .cl-node.in {
              opacity: var(--o, .1)
            }
          }

          @media(max-width:640px) {
            .cl-hero {
              padding: 66px 22px 52px
            }

            .cl-stat+.cl-stat::before {
              display: none
            }

            .cl-stats {
              gap: 28px 0;
              margin-top: 40px;
              flex-wrap: wrap
            }

            .cl-stat {
              flex: 0 0 50%;
              padding: 0 10px
            }
          }

          /* Marquee strip */
          .cl-marquee-section {
            padding: 48px 0;
            background: var(--navy);
            overflow: hidden;
            position: relative
          }

          .cl-marquee-label {
            text-align: center;
            font-size: 11px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .55);
            margin-bottom: 30px;
            font-weight: 600
          }

          .cl-marquee {
            display: flex;
            width: max-content;
            animation: clScroll 40s linear infinite
          }

          .cl-marquee:hover {
            animation-play-state: paused
          }

          .cl-marquee img {
            height: 72px;
            width: auto;
            margin: 0 38px;
            object-fit: contain;
            filter: grayscale(1) brightness(0) invert(1);
            opacity: .6;
            transition: .3s
          }

          .cl-marquee img:hover {
            opacity: 1;
            filter: none
          }

          @keyframes clScroll {
            from {
              transform: translateX(0)
            }

            to {
              transform: translateX(-50%)
            }
          }

          .cl-marquee-fade {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 3;
            pointer-events: none
          }

          .cl-marquee-fade.l {
            left: 0;
            background: linear-gradient(90deg, var(--navy), transparent)
          }

          .cl-marquee-fade.r {
            right: 0;
            background: linear-gradient(270deg, var(--navy), transparent)
          }

          /* Filter + grid section */
          .cl-grid-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 72px 28px 90px
          }

          .cl-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 40px;
            flex-wrap: wrap
          }

          .cl-filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
          }

          .cl-filter {
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            background: #fff;
            border: 1.5px solid var(--line);
            padding: 9px 20px;
            cursor: pointer;
            transition: .18s;
            font-family: inherit
          }

          .cl-filter:hover {
            border-color: var(--teal);
            color: var(--navy)
          }

          .cl-filter.active {
            background: var(--navy);
            color: #fff;
            border-color: var(--navy)
          }

          .cl-search {
            position: relative;
            flex-shrink: 0
          }

          .cl-search input {
            border: 1.5px solid var(--line);
            padding: 10px 16px 10px 40px;
            font-size: 14px;
            font-family: inherit;
            color: var(--navy);
            outline: none;
            width: 240px;
            transition: .18s;
            background: #fff
          }

          .cl-search input:focus {
            border-color: var(--teal)
          }

          .cl-search svg {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            stroke: var(--muted);
            fill: none;
            stroke-width: 2
          }

          .cl-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: 20px
          }

          .cl-loader {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 40px 0 6px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: var(--muted)
          }

          .cl-spinner {
            width: 22px;
            height: 22px;
            border: 2.5px solid var(--line);
            border-top-color: #1B1464;
            border-radius: 50%;
            animation: clSpin .7s linear infinite
          }

          @keyframes clSpin {
            to {
              transform: rotate(360deg)
            }
          }

          .cl-card {
            position: relative;
            height: 220px
          }

          /* hover fade: back panel fades in sliding down from the top - no flip */
          .cl-flip {
            position: relative;
            width: 100%;
            height: 100%
          }

          .cl-face {
            position: absolute;
            inset: 0;
            border: 1.5px solid var(--line);
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px 20px;
            overflow: hidden
          }

          /* FRONT: colored logo with a diagonal dog-ear hint at the top-right corner */
          .cl-front {
            z-index: 2;
            background: #fff;
            transition: opacity .5s ease, box-shadow .3s ease
          }

          .cl-front::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 22px 22px 0;
            border-color: transparent var(--line) transparent transparent;
            opacity: .6;
            transition: .3s
          }

          .cl-card:hover .cl-front::after {
            border-width: 0 30px 30px 0;
            border-color: transparent var(--teal) transparent transparent;
            opacity: .9
          }

          .cl-card:hover .cl-front {
            box-shadow: -8px 8px 26px -14px rgba(0, 24, 70, .4)
          }

          /* BACK: navy panel, hidden above; fades+slides in from the top on hover */
          .cl-back {
            z-index: 3;
            background: #1B1464;
            border-color: #1B1464;
            color: #fff;
            opacity: 0;
            transform: translateY(-14px);
            transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
            pointer-events: none
          }

          .cl-card:hover .cl-back {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto
          }

          .cl-back::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 28px 28px;
            border-color: transparent transparent rgba(0, 0, 0, .18) transparent
          }

          .cl-back-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            position: relative;
            z-index: 1
          }

          .cl-back-name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 15px;
            line-height: 1.3;
            color: #fff;
            letter-spacing: -.01em
          }

          .cl-back-loc {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            color: var(--teal);
            font-weight: 500
          }

          .cl-back-loc svg {
            stroke: var(--teal);
            flex-shrink: 0
          }

          .cl-logo-wrap {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            width: 100%
          }

          .cl-logo-wrap img {
            max-height: 110px;
            max-width: 150px;
            width: auto;
            object-fit: contain
          }

          .cl-cat-pill {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #030F4D;
            background: #E6E8EC;
            padding: 4px 12px
          }

          .cl-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 60px 20px;
            color: var(--muted);
            font-size: 15px
          }

          /* CTA band */
          .cl-cta {
            max-width: 1200px;
            margin: 0 auto 90px;
            padding: 0 28px
          }

          .cl-cta-inner {
            background: var(--navy);
            padding: clamp(40px, 6vw, 64px);
            text-align: center;
            position: relative;
            overflow: hidden
          }

          .cl-cta-inner h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: clamp(26px, 3.6vw, 40px);
            color: #fff;
            letter-spacing: -.02em;
            line-height: 1.12;
            margin: 0 0 14px
          }

          .cl-cta-inner p {
            color: rgba(255, 255, 255, .7);
            font-size: 15.5px;
            font-weight: 300;
            max-width: 520px;
            margin: 0 auto 28px
          }

          .cl-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--teal);
            color: #fff;
            border: none;
            padding: 14px 32px;
            font-family: 'Inter';
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: .2s
          }

          .cl-cta-btn:hover {
            background: var(--teal-dark)
          }

          @media(max-width:680px) {
            .cl-controls {
              flex-direction: column;
              align-items: stretch
            }

            .cl-search input {
              width: 100%
            }

            .cl-grid {
              grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
              gap: 14px
            }

            .cl-card {
              height: 180px
            }

            .cl-logo-wrap {
              height: 90px
            }

            .cl-logo-wrap img {
              max-height: 80px;
              max-width: 110px
            }

            .cl-back-name {
              font-size: 13px
            }
          }





          /* ============ WHY SAVEER - REDESIGN (wsx-) ============ */
          #view-whysaveer {
            --wsx-navy: #001846;
            --wsx-navy2: #030F4D;
            --wsx-ink: #0B1220;
            --wsx-teal: #0FB5AE;
            --wsx-gold: #C9A227;
            --wsx-line: #e6e9ee;
            --wsx-muted: #6E7A86;
            --wsx-paper: #f6f7f9;
            font-family: 'Inter', sans-serif;
            color: var(--wsx-navy);
            background: #fff
          }

          #view-whysaveer * {
            box-sizing: border-box
          }

          .wsx-wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 6vw
          }

          .wsx-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--wsx-teal);
            margin: 0 0 16px
          }

          .wsx-eyebrow::before {
            content: "";
            width: 26px;
            height: 1.5px;
            background: var(--wsx-teal)
          }

          .wsx-eyebrow.c {
            justify-content: center
          }

          .wsx-h2 {
            font-family: 'Sora', sans-serif;
            font-weight: 600;
            font-size: clamp(28px, 3.6vw, 44px);
            line-height: 1.1;
            letter-spacing: -.02em;
            color: var(--wsx-navy);
            margin: 0
          }

          .wsx-h2 b {
            font-weight: 600;
            color: var(--wsx-teal)
          }

          .wsx-reveal {
            opacity: 0;
            transform: translateY(26px);
            transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
          }

          .wsx-reveal.in {
            opacity: 1;
            transform: none
          }

          /* ---------- 1. HERO - full-bleed image with overlay + floating stat ---------- */
          .wsx-hero {
            position: relative;
            min-height: 88vh;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            color: #fff
          }

          .wsx-hero-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            z-index: 0
          }

          .wsx-hero-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 24, 70, .35) 0%, rgba(0, 24, 70, .55) 50%, rgba(3, 15, 77, .92) 100%)
          }

          .wsx-hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 6vw 72px
          }

          .wsx-hero .wsx-eyebrow {
            color: #5DBB64
          }

          .wsx-hero .wsx-eyebrow::before {
            background: #5DBB64
          }

          .wsx-hero h1 {
            font-family: 'Sora', sans-serif;
            font-weight: 800;
            font-size: clamp(36px, 6vw, 72px);
            line-height: 1;
            letter-spacing: -.03em;
            margin: 0;
            max-width: 17ch;
            color: #fff
          }

          .wsx-hero h1 b {
            font-weight: 800;
            color: var(--wsx-teal)
          }

          .wsx-hero p {
            max-width: 540px;
            margin: 24px 0 0;
            font-size: 17px;
            font-weight: 300;
            line-height: 1.6;
            color: rgba(255, 255, 255, .82)
          }

          .wsx-hero-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 34px
          }

          .wsx-hero-badge {
            display: inline-flex;
            align-items: baseline;
            gap: 8px;
            background: rgba(255, 255, 255, .08);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, .18);
            padding: 12px 18px
          }

          .wsx-hero-badge b {
            font-size: 22px;
            font-weight: 700;
            color: #fff;
            letter-spacing: -.02em
          }

          .wsx-hero-badge span {
            font-size: 12.5px;
            color: rgba(255, 255, 255, .72)
          }

          /* ---------- 2. PROMISE - split: big statement + mini stat grid ---------- */
          .wsx-promise {
            padding: clamp(64px, 9vw, 120px) 0
          }

          .wsx-promise-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: clamp(36px, 6vw, 80px);
            align-items: center
          }

          .wsx-pquote {
            font-family: 'Sora', sans-serif;
            font-weight: 400;
            font-size: clamp(22px, 2.6vw, 32px);
            line-height: 1.3;
            letter-spacing: -.01em;
            color: var(--wsx-navy);
            margin: 18px 0 0
          }

          .wsx-pquote b {
            font-weight: 500;
            color: var(--wsx-teal)
          }

          .wsx-promise p.body {
            margin: 22px 0 0;
            font-size: 15.5px;
            font-weight: 300;
            line-height: 1.75;
            color: var(--wsx-muted)
          }

          .wsx-mini {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: var(--wsx-line);
            border: 1px solid var(--wsx-line)
          }

          .wsx-mini>div {
            background: #fff;
            padding: 26px 22px;
            transition: background .3s
          }

          .wsx-mini>div:hover {
            background: var(--wsx-paper)
          }

          .wsx-mini .n {
            font-size: 30px;
            font-weight: 700;
            letter-spacing: -.02em;
            color: var(--wsx-navy);
            line-height: 1
          }

          .wsx-mini .l {
            font-size: 12.5px;
            color: var(--wsx-muted);
            margin-top: 8px;
            line-height: 1.4
          }

          /* ---------- 3. PILLARS - big numbered cards, alternating accent ---------- */
          .wsx-pillars-sec {
            background: var(--wsx-paper);
            padding: clamp(64px, 9vw, 120px) 0
          }

          .wsx-sec-head {
            margin: 0 0 clamp(34px, 5vw, 56px)
          }

          .wsx-sec-head.c {
            text-align: center
          }

          .wsx-sec-head.c .wsx-eyebrow {
            justify-content: center
          }

          .wsx-pillars {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px
          }

          .wsx-pillar {
            position: relative;
            background: #fff;
            border: 1px solid var(--wsx-line);
            padding: 40px 36px 36px;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s
          }

          .wsx-pillar:hover {
            transform: translateY(-4px);
            box-shadow: 0 30px 60px -34px rgba(0, 24, 70, .4)
          }

          .wsx-pillar-num {
            font-family: 'Sora', sans-serif;
            font-size: 54px;
            font-weight: 600;
            line-height: 1;
            color: var(--wsx-line);
            letter-spacing: -.03em;
            transition: color .3s
          }

          .wsx-pillar:hover .wsx-pillar-num {
            color: var(--wsx-teal)
          }

          .wsx-pillar h3 {
            font-family: 'Sora', sans-serif;
            font-size: 21px;
            font-weight: 500;
            letter-spacing: -.01em;
            color: var(--wsx-navy);
            margin: 14px 0 12px
          }

          .wsx-pillar p {
            font-size: 14.5px;
            font-weight: 300;
            line-height: 1.65;
            color: var(--wsx-muted);
            margin: 0 0 18px
          }

          .wsx-pillar ul {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: 1px solid var(--wsx-line);
            padding-top: 16px
          }

          .wsx-pillar li {
            position: relative;
            padding-left: 22px;
            font-size: 13.5px;
            color: var(--wsx-navy);
            margin: 0 0 9px;
            line-height: 1.5
          }

          .wsx-pillar li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 8px;
            height: 8px;
            background: var(--wsx-teal)
          }

          .wsx-pillar::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--wsx-teal), var(--wsx-navy));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s
          }

          .wsx-pillar:hover::after {
            transform: scaleX(1)
          }

          /* ---------- 4. PROCESS - horizontal connected stepper on navy, with an animated draw-on connector ---------- */
          .wsx-proc {
            --wsx-navy: #001846;
            --wsx-teal: #0FB5AE;
            position: relative;
            background: radial-gradient(140% 100% at 100% 0%, var(--wsx-navy2) 0%, var(--wsx-navy) 60%);
            color: #fff;
            padding: clamp(64px, 9vw, 120px) 0;
            overflow: hidden
          }

          .wsx-proc::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.4px);
            background-size: 26px 26px;
            opacity: .5;
            pointer-events: none
          }

          .wsx-proc .wsx-wrap {
            position: relative;
            z-index: 1
          }

          .wsx-proc .wsx-h2 {
            color: #fff;
            font-weight: 400
          }

          .wsx-proc .wsx-eyebrow {
            color: #5DBB64
          }

          .wsx-proc .wsx-eyebrow::before {
            background: #5DBB64
          }

          .wsx-steps {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 0;
            position: relative;
            margin-top: 36px
          }

          .wsx-steps-line {
            position: absolute;
            top: 29px;
            left: calc(100%/12);
            right: calc(100%/12);
            height: 2px;
            background: rgba(255, 255, 255, .14);
            z-index: 0
          }

          .wsx-steps-line i {
            position: absolute;
            inset: 0;
            width: 100%;
            background: linear-gradient(90deg, var(--wsx-teal), #5DBB64);
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 1.6s cubic-bezier(.22, 1, .36, 1)
          }

          .wsx-steps.in .wsx-steps-line i {
            transform: scaleX(1)
          }

          .wsx-step {
            position: relative;
            padding: 0 14px;
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
          }

          .wsx-steps.in .wsx-step {
            opacity: 1;
            transform: none
          }

          .wsx-steps.in .wsx-step:nth-of-type(2) {
            transition-delay: .1s
          }

          .wsx-steps.in .wsx-step:nth-of-type(3) {
            transition-delay: .2s
          }

          .wsx-steps.in .wsx-step:nth-of-type(4) {
            transition-delay: .3s
          }

          .wsx-steps.in .wsx-step:nth-of-type(5) {
            transition-delay: .4s
          }

          .wsx-steps.in .wsx-step:nth-of-type(6) {
            transition-delay: .5s
          }

          .wsx-step-dot {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--wsx-navy);
            color: var(--wsx-teal);
            border: 2px solid var(--wsx-teal);
            border-radius: 50%;
            font-family: 'Sora', sans-serif;
            font-weight: 800;
            font-size: 17px;
            position: relative;
            z-index: 2;
            transition: background .4s, color .4s, box-shadow .4s;
            box-shadow: 0 0 0 0 rgba(15, 181, 174, .35)
          }

          .wsx-steps.in .wsx-step-dot {
            animation: wsxDotPulse 2.6s ease-out 1
          }

          .wsx-steps.in .wsx-step:nth-of-type(2) .wsx-step-dot {
            animation-delay: .1s
          }

          .wsx-steps.in .wsx-step:nth-of-type(3) .wsx-step-dot {
            animation-delay: .2s
          }

          .wsx-steps.in .wsx-step:nth-of-type(4) .wsx-step-dot {
            animation-delay: .3s
          }

          .wsx-steps.in .wsx-step:nth-of-type(5) .wsx-step-dot {
            animation-delay: .4s
          }

          .wsx-steps.in .wsx-step:nth-of-type(6) .wsx-step-dot {
            animation-delay: .5s
          }

          @keyframes wsxDotPulse {
            0% {
              box-shadow: 0 0 0 0 rgba(15, 181, 174, .55);
              background: var(--wsx-teal);
              color: var(--wsx-navy)
            }

            45% {
              box-shadow: 0 0 0 10px rgba(15, 181, 174, 0);
              background: var(--wsx-teal);
              color: var(--wsx-navy)
            }

            100% {
              box-shadow: 0 0 0 0 rgba(15, 181, 174, 0);
              background: var(--wsx-navy);
              color: var(--wsx-teal)
            }
          }

          .wsx-step:hover .wsx-step-dot {
            background: var(--wsx-teal);
            color: var(--wsx-navy);
            box-shadow: 0 0 0 8px rgba(15, 181, 174, .18)
          }

          .wsx-step-ic {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
          }

          .wsx-step-ghost {
            position: absolute;
            top: -14px;
            right: 8px;
            font-family: 'Sora', sans-serif;
            font-weight: 800;
            font-size: 44px;
            color: rgba(255, 255, 255, .06);
            letter-spacing: -.03em;
            z-index: 0
          }

          .wsx-step h4 {
            font-family: 'Sora', sans-serif;
            position: relative;
            z-index: 1;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            margin: 20px 0 8px;
            letter-spacing: -.01em
          }

          .wsx-step p {
            position: relative;
            z-index: 1;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.6;
            color: rgba(255, 255, 255, .68);
            margin: 0
          }

          .wsx-proc-foot {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: clamp(40px, 6vw, 64px);
            padding-top: 32px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            text-align: center;
            color: rgba(255, 255, 255, .9);
            font-size: 17px;
            font-weight: 400
          }

          .wsx-proc-foot b {
            font-weight: 700;
            color: #fff
          }

          /* ---------- 5. SOLUTIONS - image tiles with caption overlay ---------- */
          .wsx-sol-sec {
            padding: clamp(64px, 9vw, 120px) 0
          }

          .wsx-sol-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px
          }

          .wsx-sol {
            position: relative;
            aspect-ratio: 4/3;
            overflow: hidden;
            background: var(--wsx-navy);
            cursor: default
          }

          .wsx-sol img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .5s;
            filter: saturate(.9)
          }

          .wsx-sol:hover img {
            transform: scale(1.08);
            filter: saturate(1.05) brightness(.85)
          }

          .wsx-sol-cap {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 22px;
            background: linear-gradient(to top, rgba(0, 24, 70, .92) 0%, rgba(0, 24, 70, .25) 55%, transparent 100%);
            color: #fff
          }

          .wsx-sol-cap h4 {
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.01em;
            margin: 0
          }

          .wsx-sol-cap p {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.5;
            color: rgba(255, 255, 255, .85);
            margin: 8px 0 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height .45s, opacity .4s, margin .4s
          }

          .wsx-sol:hover .wsx-sol-cap p {
            max-height: 120px;
            opacity: 1;
            margin-top: 8px
          }

          /* ---------- 6. MILESTONES - gold-accent timeline cards ---------- */
          .wsx-mile-sec {
            background: var(--wsx-paper);
            padding: clamp(64px, 9vw, 120px) 0
          }

          .wsx-mile-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px
          }

          .wsx-mile-card {
            display: flex;
            gap: 20px;
            background: #fff;
            border: 1px solid var(--wsx-line);
            border-left: 3px solid var(--wsx-gold);
            padding: 28px 30px;
            transition: transform .3s, box-shadow .3s
          }

          .wsx-mile-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 26px 50px -32px rgba(0, 24, 70, .4)
          }

          .wsx-mile-ic {
            flex: 0 0 auto;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(201, 162, 39, .12);
            color: var(--wsx-gold)
          }

          .wsx-mile-ic svg {
            width: 26px;
            height: 26px
          }

          .wsx-mile-card h4 {
            font-family: 'Sora', sans-serif;
            font-size: 16.5px;
            font-weight: 700;
            color: var(--wsx-navy);
            margin: 0 0 7px;
            letter-spacing: -.01em
          }

          .wsx-mile-card p {
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--wsx-muted);
            margin: 0
          }

          /* ---------- 7. CERTIFICATIONS - dark band, badge cards ---------- */
          .wsx-cert {
            position: relative;
            background: var(--wsx-navy2);
            color: #fff;
            padding: clamp(64px, 9vw, 120px) 0;
            overflow: hidden
          }

          .wsx-cert .wsx-h2 {
            color: #fff
          }

          .wsx-cert .wsx-eyebrow {
            color: #5DBB64
          }

          .wsx-cert .wsx-eyebrow::before {
            background: #5DBB64
          }

          .wsx-cert-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 8px
          }

          .wsx-cert-card {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .12);
            padding: 38px 32px;
            text-align: center;
            transition: background .3s, transform .3s
          }

          .wsx-cert-card:hover {
            background: rgba(255, 255, 255, .08);
            transform: translateY(-4px)
          }

          .wsx-cert-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 96px;
            height: 96px;
            border-radius: 50%;
            border: 2px solid var(--wsx-teal);
            color: #5DBB64;
            font-size: 15px;
            font-weight: 700;
            margin: 0 auto 22px;
            letter-spacing: -.01em
          }

          .wsx-cert-card h4 {
            font-family: 'Sora', sans-serif;
            font-size: 17px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 10px
          }

          .wsx-cert-card p {
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.6;
            color: rgba(255, 255, 255, .7);
            margin: 0
          }

          /* ---------- 8. TRUST - clean 3x2 grid w/ hover line ---------- */
          .wsx-trust-sec {
            padding: clamp(64px, 9vw, 120px) 0
          }

          .wsx-trust {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--wsx-line);
            border: 1px solid var(--wsx-line)
          }

          .wsx-trust-cell {
            background: #fff;
            padding: 34px 30px;
            transition: background .3s
          }

          .wsx-trust-cell:hover {
            background: var(--wsx-paper)
          }

          .wsx-trust-cell .tn {
            font-size: 13px;
            font-weight: 700;
            color: var(--wsx-teal);
            letter-spacing: .05em
          }

          .wsx-trust-cell h4 {
            font-family: 'Sora', sans-serif;
            font-size: 16.5px;
            font-weight: 700;
            color: var(--wsx-navy);
            margin: 14px 0 8px;
            letter-spacing: -.01em
          }

          .wsx-trust-cell p {
            font-size: 13.5px;
            font-weight: 300;
            line-height: 1.6;
            color: var(--wsx-muted);
            margin: 0
          }

          /* ---------- 9. NUMBERS - big counters on image band ---------- */
          .wsx-num {
            position: relative;
            padding: clamp(64px, 9vw, 110px) 0;
            color: #fff;
            overflow: hidden
          }

          .wsx-num-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            z-index: 0
          }

          .wsx-num-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 24, 70, .9), rgba(3, 15, 77, .95))
          }

          .wsx-num .wsx-wrap {
            position: relative;
            z-index: 2
          }

          .wsx-num .wsx-h2 {
            color: #fff
          }

          .wsx-num .wsx-eyebrow {
            color: #5DBB64;
            justify-content: center
          }

          .wsx-num .wsx-eyebrow::before {
            background: #5DBB64
          }

          .wsx-num-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 48px 30px;
            margin-top: 48px;
            text-align: center
          }

          .wsx-num-v {
            font-family: 'Sora', sans-serif;
            font-size: clamp(42px, 5.4vw, 64px);
            font-weight: 600;
            letter-spacing: -.03em;
            color: #fff;
            line-height: 1
          }

          .wsx-num-v b {
            color: #5DBB64;
            font-weight: 800
          }

          .wsx-num-k {
            font-size: 13.5px;
            font-weight: 300;
            color: rgba(255, 255, 255, .72);
            margin-top: 12px
          }

          /* ---------- 10. CTA - gradient panel ---------- */
          .wsx-cta {
            padding: clamp(60px, 8vw, 100px) 6vw
          }

          .wsx-cta-inner {
            max-width: 1180px;
            margin: 0 auto;
            background: linear-gradient(120deg, var(--wsx-navy) 0%, var(--wsx-navy2) 60%, #0a2a6e 100%);
            padding: clamp(48px, 7vw, 88px);
            text-align: center;
            position: relative;
            overflow: hidden
          }

          .wsx-cta-inner::before {
            content: "";
            position: absolute;
            top: -40%;
            right: -10%;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(15, 181, 174, .25), transparent 70%)
          }

          .wsx-cta-inner>* {
            position: relative;
            z-index: 2
          }

          .wsx-cta .wsx-eyebrow {
            color: #5DBB64;
            justify-content: center
          }

          .wsx-cta .wsx-eyebrow::before {
            background: #5DBB64
          }

          .wsx-cta h2 {
            font-family: 'Sora', sans-serif;
            font-weight: 500;
            font-size: clamp(28px, 3.6vw, 46px);
            line-height: 1.1;
            letter-spacing: -.02em;
            color: #fff;
            margin: 0 auto;
            max-width: 18ch
          }

          .wsx-cta p {
            color: rgba(255, 255, 255, .78);
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            margin: 20px auto 0;
            max-width: 560px
          }

          .wsx-cta-btns {
            display: flex;
            gap: 14px;
            justify-content: center;
            margin-top: 34px;
            flex-wrap: wrap
          }

          .wsx-btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-size: 14.5px;
            font-weight: 600;
            padding: 15px 32px;
            text-decoration: none;
            transition: .2s;
            cursor: pointer
          }

          .wsx-btn svg {
            width: 17px;
            height: 17px
          }

          .wsx-btn-primary {
            background: var(--wsx-teal);
            color: var(--wsx-navy)
          }

          .wsx-btn-primary:hover {
            background: #fff
          }

          .wsx-btn-ghost {
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .4)
          }

          .wsx-btn-ghost:hover {
            background: rgba(255, 255, 255, .12);
            border-color: #fff
          }

          /* ---------- responsive ---------- */
          @media(max-width:900px) {
            .wsx-promise-grid {
              grid-template-columns: 1fr;
              gap: 40px
            }

            .wsx-pillars {
              grid-template-columns: 1fr
            }

            .wsx-steps {
              grid-template-columns: 1fr 1fr;
              gap: 30px 16px
            }

            .wsx-steps-line {
              display: none
            }

            .wsx-sol-grid {
              grid-template-columns: 1fr 1fr
            }

            .wsx-mile-grid {
              grid-template-columns: 1fr
            }

            .wsx-cert-grid {
              grid-template-columns: 1fr
            }

            .wsx-trust {
              grid-template-columns: 1fr 1fr
            }

            .wsx-num-grid {
              grid-template-columns: 1fr 1fr;
              gap: 38px 20px
            }
          }

          @media(max-width:560px) {
            .wsx-hero {
              min-height: 80vh
            }

            .wsx-mini {
              grid-template-columns: 1fr 1fr
            }

            .wsx-steps {
              grid-template-columns: 1fr
            }

            .wsx-sol-grid {
              grid-template-columns: 1fr
            }

            .wsx-trust {
              grid-template-columns: 1fr
            }

            .wsx-num-grid {
              grid-template-columns: 1fr
            }
          }

          @media(prefers-reduced-motion:reduce) {
            .wsx-reveal {
              transition: opacity .3s
            }

            .wsx-step,
            .wsx-step-dot,
            .wsx-steps-line i {
              animation: none !important;
              transition: opacity .3s !important;
              transform: none !important
            }
          }






          /* full-page flip when toggling Website / Summary */
          /* perspective only while flipping - kept off body permanently so it
         doesn't silently break position:sticky (nav, FAQ banner, etc.) elsewhere */
          body.page-flipping {
            perspective: 2200px
          }

          .page-flipping {
            animation: pageFlip .68s cubic-bezier(.55, 0, .3, 1)
          }

          @keyframes pageFlip {
            0% {
              transform: rotateY(0deg)
            }

            50% {
              transform: rotateY(90deg)
            }

            50.01% {
              transform: rotateY(-90deg)
            }

            100% {
              transform: rotateY(0deg)
            }
          }




          /* hero video overlay (added) */
          .afn-cta-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0
          }

          /* footer styles from catalogue-new.html (cx-foot), added when footer was replaced */
          .cx-foot {
            background: var(--navy);
            color: #fff;
            text-align: center;
            padding: 80px 32px;
          }

          .cx-foot h2 {
            font-family: 'Sora', sans-serif;
            font-weight: 600;
            font-size: clamp(28px, 3.4vw, 46px);
            letter-spacing: -.02em;
            margin: 0 0 14px;
            color: #fff;
          }

          .cx-foot h2 em {
            font-style: normal;
            color: var(--teal);
          }

          .cx-foot p {
            color: rgba(255, 255, 255, .72);
            max-width: 520px;
            margin: 0 auto 28px;
            line-height: 1.7;
          }

          .cx-foot a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--teal);
            color: var(--navy);
            font-family: 'Sora', sans-serif;
            font-weight: 700;
            font-size: 15px;
            padding: 16px 32px;
            text-decoration: none;
            transition: transform .25s;
          }

          .cx-foot a:hover {
            transform: translateY(-3px);
          }

          /* ===== FOOTER v3 (fz) - link columns + animated image band, from summary-new.html ===== */
          .fz {
            padding: 0 24px 40px;
            background: #ffffff;
          }

          .fz-panel {
            position: relative;
            max-width: 100%;
            margin: 0 auto;
            background: #F4F5F2;
            background-image: radial-gradient(rgba(0, 24, 70, .055) 1px, transparent 1px);
            background-size: 24px 24px;
            border-radius: 28px;
            padding: 72px 56px 30px;
            overflow: hidden;
            opacity: 0;
            transform: translateY(26px);
            transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
          }

          .fz-panel.in {
            opacity: 1;
            transform: none;
          }

          .fz-panel::before {
            display: none;
          }

          /* link grid */
          .fz-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
            gap: 36px 40px;
            padding-bottom: 52px;
          }

          .fz-brand {
            padding-right: 28px;
          }

          .fz-logo {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            margin-bottom: 26px;
          }

          .fz-logo img {
            height: 88px;
            width: auto;
            display: block;
            filter: drop-shadow(0 6px 16px rgba(0, 24, 70, .12));
            transition: transform .4s cubic-bezier(.22, 1, .36, 1);
          }

          .fz-logo:hover img {
            transform: translateY(-2px) scale(1.02);
          }

          .fz-tag {
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 450;
            line-height: 1.8;
            color: #3a4658;
            margin: 0 0 8px;
            max-width: 330px;
            letter-spacing: -.005em;
          }

          .fz-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            text-decoration: none;
            background: var(--navy);
            padding: 14px 26px;
            border-radius: 12px;
            box-shadow: 0 10px 22px -10px rgba(0, 24, 70, .5);
            transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
          }

          .fz-cta::after {
            content: '\2192';
            display: inline-block;
            transition: transform .25s ease;
          }

          .fz-cta:hover {
            background: var(--teal-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 26px -10px rgba(10, 143, 137, .5);
          }

          .fz-cta:hover::after {
            transform: translateX(3px);
          }

          .fz-col h4 {
            display: flex;
            align-items: center;
            gap: 9px;
            font-family: 'Sora', sans-serif;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--navy);
            margin: 0 0 24px;
          }

          .fz-col h4::before {
            content: '';
            width: 16px;
            height: 2px;
            border-radius: 1px;
            flex: 0 0 auto;
            background: linear-gradient(90deg, var(--teal), var(--teal2));
          }

          .fz-col a {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: 450;
            color: #5b6472;
            text-decoration: none;
            margin-bottom: 14px;
            transition: color .22s ease, transform .22s ease;
          }

          .fz-col a::after {
            content: '\2192';
            margin-left: 6px;
            opacity: 0;
            font-size: 13px;
            transform: translateX(-4px);
            transition: opacity .2s ease, transform .2s ease;
            display: none;
          }

          .fz-col a:hover {
            color: var(--teal-dark);
            transform: translateX(5px);
          }

          .fz-col a:hover::after {
            opacity: 1;
            transform: translateX(0);
          }

          .fz-address {
            font-style: normal;
            font-size: 15px;
            line-height: 2;
            color: #5b6472;
            margin: 0 0 24px;
          }

          .fz-address a {
            color: var(--navy);
            font-weight: 600;
            text-decoration: none;
            transition: color .2s ease;
          }

          .fz-address a:hover {
            color: var(--teal-dark);
          }

          .fz-social {
            display: flex;
            gap: 10px;
          }

          .fz-social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 13px;
            background: #fff;
            color: var(--navy);
            border: 1px solid var(--line);
            box-shadow: 0 1px 2px rgba(0, 24, 70, .05);
            transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
          }

          .fz-social a:hover {
            background: #001846;
            color: #fff;
            border-color: #001846;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px -8px rgba(27, 20, 100, .45);
          }

          .fz-social svg {
            width: 17px;
            height: 17px;
          }

          /* legal row (very bottom, below the scene) */
          .fz-legal {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            padding: 24px 0 0;
            margin-top: 4px;
          }

          .fz-legal>span {
            font-size: 13px;
            font-weight: 500;
            letter-spacing: .01em;
            color: var(--muted);
          }

          .fz-legal-links {
            display: flex;
            gap: 28px;
          }

          .fz-legal-links a {
            font-size: 13px;
            font-weight: 500;
            color: var(--muted);
            text-decoration: none;
            transition: color .2s ease;
          }

          .fz-legal-links a:hover {
            color: var(--navy);
          }

          /* image band - full-bleed, merged as footer bottom */
          .fz-band {
            position: relative;
            margin: -45px -55px 0;
          }

          .fz-scene {
            display: block;
            line-height: 0;
          }

          .fz-scene svg,
          .fz-scene-img {
            width: 100%;
            height: auto;
            display: block;
          }

          /* ----- footer scene animations ----- */
          .fs-windmill {
            animation: fs-spin 8s linear infinite;
          }

          @keyframes fs-spin {
            to {
              transform: rotate(360deg);
            }
          }

          .fs-rays {
            animation: fs-pulse 4s ease-in-out infinite;
          }

          @keyframes fs-pulse {

            0%,
            100% {
              opacity: .5;
              transform: scale(1);
            }

            50% {
              opacity: .8;
              transform: scale(1.06);
            }
          }

          .fs-sun {
            animation: fs-glow 4s ease-in-out infinite;
          }

          @keyframes fs-glow {

            0%,
            100% {
              opacity: .5;
            }

            50% {
              opacity: .7;
            }
          }

          .fs-clouds {
            animation: fs-drift 26s ease-in-out infinite alternate;
          }

          @keyframes fs-drift {
            from {
              transform: translateX(0);
            }

            to {
              transform: translateX(34px);
            }
          }

          .fs-birds {
            animation: fs-fly 18s linear infinite;
          }

          @keyframes fs-fly {
            0% {
              transform: translateX(0);
              opacity: .3;
            }

            90% {
              opacity: .3;
            }

            100% {
              transform: translateX(-140px);
              opacity: 0;
            }
          }

          .fs-sprouts {
            animation: fs-sway 5s ease-in-out infinite;
            transform-origin: center bottom;
          }

          @keyframes fs-sway {

            0%,
            100% {
              transform: rotate(-1.5deg);
            }

            50% {
              transform: rotate(1.5deg);
            }
          }

          .fs-flowers {
            animation: fs-fsway 6s ease-in-out infinite;
            transform-origin: center bottom;
          }

          @keyframes fs-fsway {

            0%,
            100% {
              transform: rotate(-2deg);
            }

            50% {
              transform: rotate(2deg);
            }
          }

          .fs-drops circle {
            animation: fs-drop 1.8s ease-in infinite;
          }

          .fs-drops circle:nth-child(2) {
            animation-delay: .5s;
          }

          .fs-drops circle:nth-child(3) {
            animation-delay: .9s;
          }

          .fs-drops circle:nth-child(4) {
            animation-delay: .3s;
          }

          .fs-drops circle:nth-child(5) {
            animation-delay: 1.2s;
          }

          .fs-drops circle:nth-child(6) {
            animation-delay: .7s;
          }

          @keyframes fs-drop {
            0% {
              transform: translateY(0);
              opacity: .7;
            }

            80% {
              opacity: .5;
            }

            100% {
              transform: translateY(24px);
              opacity: 0;
            }
          }

          .fs-co2 {
            animation: fs-gas 3.5s ease-in-out infinite;
          }

          .fs-o2 {
            animation: fs-gas 3.5s ease-in-out infinite .6s;
          }

          @keyframes fs-gas {

            0%,
            100% {
              transform: translateY(0);
              opacity: .6;
            }

            50% {
              transform: translateY(-6px);
              opacity: .9;
            }
          }

          /* ambient: sunlight beams shimmer */
          .fs-beams {
            animation: fs-beam 7s ease-in-out infinite;
            transform-origin: 1185px 70px;
          }

          @keyframes fs-beam {

            0%,
            100% {
              opacity: .45;
            }

            50% {
              opacity: .7;
            }
          }

          /* ambient: wind streaks drift across */
          .fs-wind {
            animation: fs-windflow 9s linear infinite;
          }

          @keyframes fs-windflow {
            0% {
              transform: translateX(-30px);
              opacity: 0;
            }

            20% {
              opacity: .16;
            }

            80% {
              opacity: .16;
            }

            100% {
              transform: translateX(60px);
              opacity: 0;
            }
          }

          /* ambient: gentle rain falling */
          .fs-rain line {
            animation: fs-fall 2.2s linear infinite;
          }

          .fs-rain line:nth-child(2) {
            animation-delay: .4s;
          }

          .fs-rain line:nth-child(3) {
            animation-delay: .9s;
          }

          .fs-rain line:nth-child(4) {
            animation-delay: .2s;
          }

          .fs-rain line:nth-child(5) {
            animation-delay: 1.3s;
          }

          .fs-rain line:nth-child(6) {
            animation-delay: .7s;
          }

          .fs-rain line:nth-child(7) {
            animation-delay: 1.6s;
          }

          .fs-rain line:nth-child(8) {
            animation-delay: 1.0s;
          }

          @keyframes fs-fall {
            0% {
              transform: translateY(-12px);
              opacity: 0;
            }

            20% {
              opacity: .22;
            }

            100% {
              transform: translateY(140px);
              opacity: 0;
            }
          }

          /* ambient: plants gently growing (subtle pulse) */
          .fs-sprouts>g {
            animation: fs-grow 6s ease-in-out infinite;
            transform-origin: center bottom;
          }

          .fs-sprouts>g:nth-child(2) {
            animation-delay: 1.5s;
          }

          .fs-sprouts>g:nth-child(3) {
            animation-delay: 3s;
          }

          .fs-sprouts>g:nth-child(4) {
            animation-delay: 4.5s;
          }

          @keyframes fs-grow {

            0%,
            100% {
              transform: scaleY(.94);
            }

            50% {
              transform: scaleY(1.04);
            }
          }

          /* new: soft glass glints sweeping across greenhouse roofs */
          .fs-glint {
            animation: fs-glint 5s ease-in-out infinite;
            transform-box: fill-box;
            transform-origin: center;
          }

          @keyframes fs-glint {

            0%,
            100% {
              opacity: .06;
            }

            50% {
              opacity: .32;
            }
          }

          .fs-glint2 circle {
            animation: fs-glint 4s ease-in-out infinite;
            transform-box: fill-box;
            transform-origin: center;
          }

          .fs-glint2 circle:nth-child(2) {
            animation-delay: 1.3s;
          }

          .fs-glint2 circle:nth-child(3) {
            animation-delay: 2.6s;
          }

          /* new: birds flap their wings while flying */
          .fs-wing {
            animation: fs-flap .6s ease-in-out infinite;
            transform-box: fill-box;
            transform-origin: center;
          }

          .fs-wing:nth-child(2) {
            animation-delay: .15s;
          }

          .fs-wing:nth-child(3) {
            animation-delay: .3s;
          }

          @keyframes fs-flap {

            0%,
            100% {
              transform: scaleY(1);
            }

            50% {
              transform: scaleY(.4);
            }
          }

          /* new: water tank ripple rings */
          .fs-ripple ellipse {
            animation: fs-ripple 3s ease-out infinite;
            transform-box: fill-box;
            transform-origin: center;
          }

          .fs-ripple ellipse:nth-child(2) {
            animation-delay: .9s;
          }

          @keyframes fs-ripple {
            0% {
              transform: scale(.5);
              opacity: .7;
            }

            100% {
              transform: scale(1.4);
              opacity: 0;
            }
          }

          /* new: sprinkler spray flowing outward */
          .fs-spray {
            stroke-dasharray: 2 4;
            animation: fs-spray-flow 1s linear infinite;
          }

          @keyframes fs-spray-flow {
            to {
              stroke-dashoffset: -12;
            }
          }

          /* new: distant tree line rustling gently */
          .fs-treeline {
            animation: fs-treesway 8s ease-in-out infinite;
            transform-box: fill-box;
            transform-origin: center bottom;
          }

          @keyframes fs-treesway {

            0%,
            100% {
              transform: scaleX(1);
            }

            50% {
              transform: scaleX(1.03);
            }
          }

          /* new: fireflies/pollinators drifting near flowers */
          .fs-pollinator {
            animation: fs-pollinate 6s ease-in-out infinite;
          }

          .fs-pollinator-b {
            animation-duration: 7s;
            animation-delay: 1.5s;
          }

          .fs-pollinator-c {
            animation-duration: 5.5s;
            animation-delay: .8s;
          }

          @keyframes fs-pollinate {

            0%,
            100% {
              transform: translate(0, 0);
              opacity: .5;
            }

            25% {
              transform: translate(10px, -8px);
              opacity: .9;
            }

            50% {
              transform: translate(-4px, -14px);
              opacity: .6;
            }

            75% {
              transform: translate(-10px, -4px);
              opacity: .9;
            }
          }

          @media(prefers-reduced-motion:reduce) {

            .fs-windmill,
            .fs-rays,
            .fs-sun,
            .fs-clouds,
            .fs-birds,
            .fs-sprouts,
            .fs-drops circle,
            .fs-co2,
            .fs-o2,
            .fs-beams,
            .fs-wind,
            .fs-rain line,
            .fs-sprouts>g,
            .fza-motes circle,
            .fza-wind,
            .fza-rain line,
            .fza-leaves>g>.fza-leaf,
            .fs-flowers,
            .fs-glint,
            .fs-glint2 circle,
            .fs-wing,
            .fs-ripple ellipse,
            .fs-spray,
            .fs-treeline,
            .fs-pollinator {
              animation: none;
            }
          }

          .fz-band-mark {
            position: absolute;
            right: 24px;
            bottom: 22px;
            width: 54px;
            height: 54px;
            background: #fff;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 18px rgba(0, 24, 70, .12);
            border: 1px solid rgba(0, 24, 70, .06);
          }

          .fz-band-mark svg {
            width: 34px;
            height: 34px;
          }

          /* responsive */
          @media(max-width:1024px) {
            .fz-grid {
              grid-template-columns: 1fr 1fr;
              gap: 32px;
            }

            .fz-brand {
              grid-column: 1 / -1;
            }
          }

          @media(max-width:560px) {
            .fz-panel {
              padding: 36px 24px 32px;
            }

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

            .fz-band {
              margin: 24px -24px 0;
            }

            .fz-legal {
              flex-direction: column;
              align-items: flex-start;
            }
          }

          @media(prefers-reduced-motion:reduce) {

            .fz-cta,
            .fz-col a {
              transition: none;
            }

            .fz-panel {
              opacity: 1 !important;
              transform: none !important;
              transition: none !important
            }
          }

          .sm-footer-wrap {
            position: relative;
            z-index: 20;
            background: #ffffff;
          }

          /* full-width footer (override Elements' inset panel) */
          .sm-footer-wrap .fz-panel {
            max-width: none;
            margin: 0;
            border-radius: 0;
            padding: 54px 0 0;
            background: #ffffff;
          }

          .sm-footer-wrap.fz,
          .sm-footer-wrap .fz {
            padding: 0;
          }

          .sm-footer-wrap {
            padding: 0;
          }

          .sm-footer-wrap .fz-grid,
          .sm-footer-wrap .fz-legal {
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 50px;
            padding-right: 50px;
          }

          .sm-footer-wrap .fz-band {
            margin: 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            opacity: .8;
          }

          .sm-footer-wrap .fz-band .fz-scene {
            width: 100%;
          }

          .sm-footer-wrap .fz-band .fz-scene svg,
          .sm-footer-wrap .fz-band .fz-scene-img {
            width: 100%;
            height: auto;
            display: block;
          }

          .sm-footer-wrap .fz-panel {
            position: relative;
            min-height: 560px;
          }

          .sm-footer-wrap .fz-grid {
            position: relative;
            z-index: 3;
          }

          /* ambient effects layer in footer content area */
          .fz-amb {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 62%;
            z-index: 0;
            pointer-events: none;
          }

          .fza-motes circle {
            animation: fza-float 9s ease-in-out infinite;
          }

          .fza-motes circle:nth-child(2) {
            animation-delay: 1.4s;
          }

          .fza-motes circle:nth-child(3) {
            animation-delay: 2.8s;
          }

          .fza-motes circle:nth-child(4) {
            animation-delay: .7s;
          }

          .fza-motes circle:nth-child(5) {
            animation-delay: 3.5s;
          }

          .fza-motes circle:nth-child(6) {
            animation-delay: 2.1s;
          }

          @keyframes fza-float {

            0%,
            100% {
              transform: translateY(0);
              opacity: .5;
            }

            50% {
              transform: translateY(-14px);
              opacity: .8;
            }
          }

          .fza-wind {
            animation: fza-windflow 11s linear infinite;
          }

          @keyframes fza-windflow {
            0% {
              transform: translateX(-40px);
              opacity: 0;
            }

            25% {
              opacity: .10;
            }

            75% {
              opacity: .10;
            }

            100% {
              transform: translateX(80px);
              opacity: 0;
            }
          }

          .fza-rain line {
            animation: fza-fall 2.6s linear infinite;
          }

          .fza-rain line:nth-child(2) {
            animation-delay: .5s;
          }

          .fza-rain line:nth-child(3) {
            animation-delay: 1.1s;
          }

          .fza-rain line:nth-child(4) {
            animation-delay: .3s;
          }

          .fza-rain line:nth-child(5) {
            animation-delay: 1.7s;
          }

          .fza-rain line:nth-child(6) {
            animation-delay: .9s;
          }

          .fza-rain line:nth-child(7) {
            animation-delay: 2.0s;
          }

          @keyframes fza-fall {
            0% {
              transform: translateY(-14px);
              opacity: 0;
            }

            25% {
              opacity: .16;
            }

            100% {
              transform: translateY(120px);
              opacity: 0;
            }
          }

          .fza-leaf {
            transform-box: fill-box;
            transform-origin: center;
          }

          .fza-leaves>g>.fza-leaf {
            animation: fza-drift 14s ease-in-out infinite;
          }

          .fza-leaves>g:nth-child(2)>.fza-leaf {
            animation-delay: 4s;
          }

          .fza-leaves>g:nth-child(3)>.fza-leaf {
            animation-delay: 8s;
          }

          @keyframes fza-drift {
            0% {
              transform: translate(0, 0) rotate(0deg);
            }

            50% {
              transform: translate(-30px, 26px) rotate(-25deg);
            }

            100% {
              transform: translate(0, 0) rotate(0deg);
            }
          }

          /* legal row overlaid on the colored scene ground */
          .fz-legal-onband {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 4;
            max-width: 100%;
            margin: 0 auto;
            padding: 18px 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 14px;
          }

          .fz-legal-onband>span {
            color: #0A8F89;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .01em;
          }

          .fz-legal-onband .fz-legal-links a {
            color: #0A8F89;
            font-weight: 600;
            font-size: 13px;
            text-decoration: none;
            transition: color .2s ease;
          }

          .fz-legal-onband .fz-legal-links a:hover {
            color: var(--navy);
          }

          @media(max-width:760px) {
            .fz-legal-onband {
              position: static;
              flex-direction: column;
              align-items: flex-start;
              padding: 14px 24px;
            }
          }

          /* ============ Why Us reveal panels (services page) ============ */
          .wu {
            --wu-ease: cubic-bezier(.22, 1, .36, 1);
            --wu-rowh: 78px;
            --wu-stick0: 88px;
            --wu-pad-collapse: 20px;
            position: relative;
            background: var(--offwhite);
            color: var(--navy);
          }

          .wu-intro {
            padding: 96px 40px 44px;
            max-width: 1180px;
            margin: 0 auto
          }

          .wu-intro-head {
            display: grid;
            grid-template-columns: 1fr 2fr;
            align-items: end;
            gap: 24px;
            padding-bottom: 28px
          }

          .wu-label {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .wu-line {
            font-family: 'Inter', sans-serif;
            font-size: clamp(18px, 1.6vw, 22px);
            font-weight: 300;
            color: var(--navy)
          }

          .wu-rule {
            height: 1px;
            background: var(--line);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 1.2s var(--wu-ease)
          }

          .wu-rule.in {
            transform: scaleX(1)
          }

          .wu-panel {
            position: sticky;
            top: var(--wu-stick);
            height: auto;
            background: var(--offwhite);
            display: grid;
            grid-template-columns: minmax(180px, 1fr) 70px minmax(0, 3fr);
            gap: 0 30px;
            align-items: start;
            max-width: 1180px;
            margin: 0 auto;
            padding: 64px 40px;
            border-top: 1px solid var(--line);
            overflow: hidden;
          }

          .wu-panel.wu-p1 {
            --wu-stick: var(--wu-stick0)
          }

          .wu-panel.wu-p2 {
            --wu-stick: calc(var(--wu-stick0) + var(--wu-rowh))
          }

          .wu-panel.wu-p3 {
            --wu-stick: calc(var(--wu-stick0) + var(--wu-rowh)*2)
          }

          .wu-panel.wu-p4 {
            --wu-stick: calc(var(--wu-stick0) + var(--wu-rowh)*3);
            margin-bottom: 140px;
          }

          .wu-icon-wrap {
            width: min(200px, 100%);
            transform-origin: top left;
            will-change: transform
          }

          .wu-icon {
            width: 100%;
            overflow: visible;
            display: block
          }

          .wu-icon path,
          .wu-icon circle,
          .wu-icon ellipse {
            fill: none;
            stroke: var(--navy);
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1300;
            stroke-dashoffset: 1300;
          }

          .wu-panel.in .wu-icon path,
          .wu-panel.in .wu-icon circle,
          .wu-panel.in .wu-icon ellipse {
            animation: wuDraw 1.4s cubic-bezier(.4, 0, .2, 1) forwards
          }

          .wu-panel.in .wu-icon .wu-d2 *,
          .wu-panel.in .wu-icon .wu-d2 {
            animation-delay: .18s
          }

          .wu-panel.in .wu-icon .wu-d3 *,
          .wu-panel.in .wu-icon .wu-d3 {
            animation-delay: .36s
          }

          @keyframes wuDraw {
            to {
              stroke-dashoffset: 0
            }
          }

          .wu-icon .wu-ring {
            transform-origin: 240px 240px
          }

          .wu-icon .wu-ring1 {
            transform: rotate(-19deg)
          }

          .wu-icon .wu-ring2 {
            transform: rotate(26deg)
          }

          .wu-panel.in .wu-icon .wu-ring1 {
            animation: wuWob1 9s ease-in-out infinite 1.4s
          }

          .wu-panel.in .wu-icon .wu-ring2 {
            animation: wuWob2 11s ease-in-out infinite 1.6s
          }

          @keyframes wuWob1 {

            0%,
            100% {
              transform: rotate(-19deg)
            }

            50% {
              transform: rotate(-27deg)
            }
          }

          @keyframes wuWob2 {

            0%,
            100% {
              transform: rotate(26deg)
            }

            50% {
              transform: rotate(18deg)
            }
          }

          .wu-panel.in .wu-icon .wu-spin {
            animation: wuSpin 26s linear infinite 1.4s;
            transform-origin: 240px 240px
          }

          @keyframes wuSpin {
            to {
              transform: rotate(360deg)
            }
          }

          .wu-icon g.wu-cube {
            transform-box: fill-box;
            transform-origin: center
          }

          .wu-panel.in .wu-icon .wu-cubeA {
            animation: wuFloatA 7s ease-in-out infinite 1.4s
          }

          .wu-panel.in .wu-icon .wu-cubeB {
            animation: wuFloatB 8s ease-in-out infinite 1.6s
          }

          .wu-panel.in .wu-icon .wu-cubeC {
            animation: wuFloatA 9s ease-in-out infinite 1.8s
          }

          @keyframes wuFloatA {

            0%,
            100% {
              transform: translateY(0)
            }

            50% {
              transform: translateY(-8px)
            }
          }

          @keyframes wuFloatB {

            0%,
            100% {
              transform: translateY(0)
            }

            50% {
              transform: translateY(7px)
            }
          }

          .wu-tag {
            position: absolute;
            left: 40px;
            top: 46%;
            z-index: 2;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--teal)
          }

          .wu-num {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .06em;
            color: var(--muted);
            padding-top: 10px;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .7s ease .1s, transform .7s var(--wu-ease) .1s
          }

          .wu-panel.in .wu-num {
            opacity: 1;
            transform: translateY(0)
          }

          .wu-content {
            min-width: 0
          }

          .wu-headline {
            font-family: 'Inter', sans-serif;
            font-size: clamp(36px, 4.4vw, 50px);
            font-weight: 200;
            letter-spacing: -.02em;
            line-height: 1;
            color: var(--navy);
            transform-origin: left top;
            will-change: transform
          }

          .wu-word {
            display: inline-block;
            overflow: hidden;
            vertical-align: top
          }

          .wu-word span {
            display: inline-block;
            transform: translateY(115%);
            transition: transform 1s var(--wu-ease)
          }

          .wu-panel.in .wu-word span {
            transform: translateY(0)
          }

          .wu-panel.in .wu-word:nth-child(2) span {
            transition-delay: .08s
          }

          .wu-sub-wrap {
            margin-top: 28px;
            overflow: hidden;
            will-change: transform, opacity, height
          }

          .wu-sub {
            font-family: 'Inter', sans-serif;
            font-size: clamp(14px, 1.3vw, 18px);
            font-weight: 300;
            line-height: 1.6;
            color: #1b2b4b;
            max-width: 100%;
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .8s ease .26s, transform .8s var(--wu-ease) .26s
          }

          .wu-panel.in .wu-sub {
            opacity: 1;
            transform: translateY(0)
          }

          .wu-outro {
            position: relative;
            z-index: 10;
            background: var(--offwhite);
            max-width: 1180px;
            margin: 0 auto;
            padding: 56px 40px 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px
          }

          .wu-outro p {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            font-size: clamp(20px, 2.4vw, 28px);
            color: var(--navy);
            margin: 0;
            max-width: 34ch
          }

          .wu-outro-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--navy);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: .04em;
            text-transform: uppercase;
            padding: 16px 26px;
            cursor: pointer;
            transition: background .2s;
            white-space: nowrap
          }

          .wu-outro-btn svg {
            width: 18px;
            height: 18px;
            transition: transform .25s
          }

          .wu-outro-btn:hover {
            background: #03257D
          }

          .wu-outro-btn:hover svg {
            transform: translateX(4px)
          }

          @media(max-width:900px) {
            .wu {
              --wu-rowh: 56px;
              --wu-stick0: 56px;
              --wu-pad-collapse: 16px
            }

            .wu-intro {
              padding: 70px 20px 30px
            }

            .wu-intro-head {
              grid-template-columns: 1fr;
              gap: 14px
            }

            .wu-panel {
              height: auto;
              grid-template-columns: 60px 1fr;
              grid-template-areas: "icon num" "content content";
              gap: 16px;
              padding: 24px 20px 36px;
            }

            .wu-icon-wrap {
              grid-area: icon;
              width: 60px
            }

            .wu-num {
              grid-area: num;
              padding-top: 4px
            }

            .wu-content {
              grid-area: content
            }

            .wu-tag {
              display: none
            }

            .wu-sub-wrap {
              margin-top: 28px
            }

            .wu-outro {
              padding: 40px 20px 50px
            }
          }

          @media(prefers-reduced-motion:reduce) {

            .wu *,
            .wu *::before,
            .wu *::after {
              animation: none !important;
              transition: none !important
            }

            .wu-word span {
              transform: none
            }

            .wu-num,
            .wu-sub {
              opacity: 1;
              transform: none
            }

            .wu-rule {
              transform: scaleX(1)
            }

            .wu-icon path,
            .wu-icon circle,
            .wu-icon ellipse {
              stroke-dashoffset: 0
            }
          }
    

      /* === BRAND: all buttons solid #1B1464 with white text === */
      .btn,
      .btn-ghost,
      .btn-dark,
      .vbtn,
      .pbtn,
      .mc-btn,
      .icon-btn,
      .fd-sug-btn,
      .pf-hero-btn,
      .cc-tb-btn,
      .cc-btn-primary,
      .cc-btn-ghost,
      .cc-btn-search,
      .cca-btn,
      .csv-btn,
      .afn-btn,
      .bp-btn,
      .bp-btn-solid,
      .bp-btn-ghost,
      .cl-cta-btn,
      .ctn-btn-solid,
      .ctn-btn-ghost,
      .ty-btn-solid,
      .ty-btn-ghost,
      .faq-call-btn,
      .gal2-btn,
      .gal2-iconbtn,
      .jrn-end-btn,
      .ab-cta-btn,
      .ab-faq-help-btn,
      .ev-kit-btn,
      .se-btn,
      .pf-btn,
      .xl-btn,
      .ws-btn,
      .ws-btn-primary,
      .ws-btn-ghost,
      .ctn-fab-btn,
      .ctn-fab-call,
      .ctn-fab-wa {
        background: #1b1464 !important;
        color: #fff !important;
        border-color: #1b1464 !important;
      }

      /* keep icon/svg strokes visible on the navy fill */
      .btn svg,
      .btn-ghost svg,
      .bp-btn svg,
      .cl-cta-btn svg,
      .ctn-btn-solid svg,
      .ty-btn-solid svg,
      .ws-btn svg,
      .afn-btn svg,
      .ab-cta-btn svg,
      .jrn-end-btn svg,
      .gal2-btn svg {
        stroke: #fff !important;
        color: #fff !important;
      }

      /* hover: subtle lift to the deep royal blue for feedback */
      .btn:hover,
      .btn-ghost:hover,
      .btn-dark:hover,
      .afn-btn:hover,
      .bp-btn:hover,
      .bp-btn-solid:hover,
      .bp-btn-ghost:hover,
      .cl-cta-btn:hover,
      .ctn-btn-solid:hover,
      .ctn-btn-ghost:hover,
      .ty-btn-solid:hover,
      .ty-btn-ghost:hover,
      .faq-call-btn:hover,
      .gal2-btn:hover,
      .jrn-end-btn:hover,
      .ab-cta-btn:hover,
      .ab-faq-help-btn:hover,
      .ws-btn:hover,
      .ws-btn-primary:hover,
      .ws-btn-ghost:hover,
      .cca-btn:hover,
      .cc-btn-primary:hover,
      .csv-btn:hover,
      .vbtn:hover,
      .pbtn:hover,
      .mc-btn:hover {
        background: #030f4d !important;
        color: #fff !important;
        border-color: #030f4d !important;
      }
    

      /* ===== Glass nav overlaying the top hero (home only) ===== */
      /* Pull the home view up so the dark hero (afn-cta) sits full behind the sticky nav */
      #view-home {
        margin-top: -72px;
      }

      /* Frosted-glass, transparent nav while it floats over the dark hero */
      /* Home hero nav now uses the same whitish glass nav as every other page (see base `nav{}` rule above) */
      /* nav-contact (navy button) reads fine on glass, so left as-is */
      @media (prefers-reduced-motion: reduce) {
        body.home-hero-nav .site-nav nav {
          transition: none;
        }
      }
    

      /* full-page cursor constellation (home only)   sits behind all content, never blocks clicks */
      .hcn-canvas {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        pointer-events: none;
        display: block;
      }

      #view-home > :not(.hcn-canvas) {
        position: relative;
        z-index: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .hcn-canvas {
          display: none;
        }
      }
    

      /* horizontal-overflow guard for home (clip = sticky-safe, doesn't create scroll container) */
      #view-home {
        overflow-x: clip;
      }

      #view-home .afn-cta,
      #view-home .afn-quote,
      #view-home .repsec {
        overflow-x: clip;
      }

      html,
      body {
        max-width: 100%;
        overflow-x: clip;
      }
    

      :root {
        --navy: #1b2b4b;
        --teal: #0a8f89;
        --teal2: #0fb5ae;
        --sun: #f2c94c;
        --sun2: #e0a92e;
        --pink: #f2a6c0;
        --cloud: #cfe3de;
        --bird: #5b6472;
        --ink-soft: #5b6472;
        --line-grey: #c7cbd1;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        background: #fff;
        font-family:
          Inter,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
      }

      .fz-band {
        width: 100%;
        overflow: hidden;
      }

      .fz-scene svg {
        width: 100%;
        height: auto;
        display: block;
      }

      /* ---- drawable strokes ---- */
      .ln {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
      }

      .play .ln {
        animation: draw 0.9s ease forwards;
        animation-delay: var(--d, 0s);
      }

      @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }

      /* ---- popped elements (dots, hubs) ---- */
      .pop {
        opacity: 0;
        transform: scale(0.4);
        transform-box: fill-box;
        transform-origin: center;
      }

      .play .pop {
        animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
        animation-delay: var(--d, 0s);
      }

      @keyframes pop {
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      /* ---- faded fills (leaves, flowers, nets, labels) ---- */
      .fade {
        opacity: 0;
      }

      .play .fade {
        animation: fade 0.6s ease forwards;
        animation-delay: var(--d, 0s);
      }

      @keyframes fade {
        to {
          opacity: 1;
        }
      }

      /* ---- ambient loops (choreographed: sun glows first, then rain, then structures sway) ---- */
      .sun {
        transform-box: fill-box;
        transform-origin: center;
        animation: pulse 4s ease-in-out infinite;
        animation-delay: 0.3s;
      }

      @keyframes pulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.85;
        }

        50% {
          transform: scale(1.12);
          opacity: 1;
        }
      }

      .rays {
        transform-box: fill-box;
        transform-origin: center;
        animation: spin 70s linear infinite;
      }

      .blades {
        transform-box: fill-box;
        transform-origin: center;
        animation: spin 7s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* structure colour fills wiping in left-to-right */
      .fzfill {
        opacity: 0;
      }

      .play .fzfill {
        animation: fzWipe 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: var(--fd, 1.6s);
      }

      @keyframes fzWipe {
        0% {
          opacity: 0;
          clip-path: inset(0 100% 0 0);
        }

        100% {
          opacity: 1;
          clip-path: inset(0 0 0 0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .play .fzfill {
          animation: none;
          opacity: 0.5;
          clip-path: none;
        }
      }

      .cloud {
        animation: drift 30s ease-in-out infinite;
      }

      .cloud.c2 {
        animation-duration: 38s;
      }

      .cloud.c3 {
        animation-duration: 34s;
        animation-direction: reverse;
      }

      .cloud.c4 {
        animation-duration: 44s;
      }

      @keyframes drift {
        0% {
          transform: translateX(-24px);
        }

        50% {
          transform: translateX(24px);
        }

        100% {
          transform: translateX(-24px);
        }
      }

      .birds {
        animation: flap 3.4s ease-in-out infinite;
      }

      @keyframes flap {
        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-7px);
        }
      }

      /* rain starts AFTER the sun has been glowing for a moment */
      .rain {
        animation: rainfall 1.1s linear infinite;
        animation-delay: 2s;
        opacity: 0;
      }

      @keyframes rainfall {
        0% {
          transform: translateY(-6px);
          opacity: 0;
        }

        30% {
          opacity: 0.5;
        }

        100% {
          transform: translateY(12px);
          opacity: 0;
        }
      }

      .drops {
        animation: dropfall 1.5s ease-in infinite;
        animation-delay: 2s;
      }

      @keyframes dropfall {
        0% {
          transform: translateY(-4px);
          opacity: 0;
        }

        30% {
          opacity: 0.7;
        }

        100% {
          transform: translateY(14px);
          opacity: 0;
        }
      }

      .sway {
        transform-box: fill-box;
        transform-origin: bottom;
        animation: sway 4.5s ease-in-out infinite;
      }

      .sway.s2 {
        animation-duration: 5.4s;
        animation-delay: 0.6s;
      }

      .sway.s3 {
        animation-duration: 4s;
        animation-delay: 1s;
      }

      @keyframes sway {
        0%,
        100% {
          transform: rotate(-3deg);
        }

        50% {
          transform: rotate(3deg);
        }
      }

      /* wind panning through the structures   gentle base-anchored lean, staggered, begins after rain */
      .wind {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: windSway 3.8s ease-in-out infinite;
        animation-delay: 3.6s;
      }

      .wind.w2 {
        animation-duration: 4.4s;
        animation-delay: 3.75s;
      }

      .wind.w3 {
        animation-duration: 4.1s;
        animation-delay: 3.9s;
      }

      .wind.w4 {
        animation-duration: 4.7s;
        animation-delay: 4.05s;
      }

      .wind.w5 {
        animation-duration: 4.2s;
        animation-delay: 4.2s;
      }

      .wind.w6 {
        animation-duration: 4.6s;
        animation-delay: 4.35s;
      }

      .wind.w7 {
        animation-duration: 4s;
        animation-delay: 4.5s;
      }

      @keyframes windSway {
        0%,
        100% {
          transform: rotate(0deg) skewX(0deg);
        }

        45% {
          transform: rotate(1.1deg) skewX(-1.2deg);
        }

        70% {
          transform: rotate(-0.7deg) skewX(0.7deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .ln {
          stroke-dashoffset: 0 !important;
          animation: none !important;
        }

        .pop,
        .fade {
          opacity: 1 !important;
          transform: none !important;
          animation: none !important;
        }

        .sun,
        .rays,
        .blades,
        .cloud,
        .birds,
        .rain,
        .drops,
        .sway,
        .wind {
          animation: none !important;
        }

        .rain {
          opacity: 0.5 !important;
        }
      }

      /* ===== horticulture icon row: outline draws, then colour fills in ===== */
      .hz-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: clamp(18px, 3vw, 40px);
        padding: 8px 24px 20px;
        position: relative;
        z-index: 4;
      }

      .hz-ic {
        width: clamp(38px, 4vw, 52px);
        height: clamp(38px, 4vw, 52px);
      }

      .hz-ic svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }

      .hz-ic .ln {
        fill: none;
        stroke: var(--teal, #0a8f89);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
      }

      /* draw the outline (staggered per icon), then let colour fill wipe up */
      .play .hz-ic .ln {
        animation: hzDraw 0.8s ease forwards;
        animation-delay: calc(var(--i) * 0.12s);
      }

      @keyframes hzDraw {
        to {
          stroke-dashoffset: 0;
        }
      }

      .hz-ic .hzf {
        opacity: 0;
      }

      .play .hz-ic .hzf {
        animation: hzFill 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: calc(var(--i) * 0.12s + 0.55s);
      }

      @keyframes hzFill {
        0% {
          opacity: 0;
          clip-path: inset(100% 0 0 0);
        }

        100% {
          opacity: 1;
          clip-path: inset(0 0 0 0);
        }
      }

      /* gentle looping shake, begins once the draw+fill has finished; staggered per icon */
      .play .hz-ic svg {
        animation: hzShake 2.6s ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.12s + 1.5s);
        transform-origin: 50% 80%;
      }

      @keyframes hzShake {
        0%,
        72%,
        100% {
          transform: rotate(0deg);
        }

        78% {
          transform: rotate(-6deg);
        }

        84% {
          transform: rotate(5deg);
        }

        90% {
          transform: rotate(-3deg);
        }

        96% {
          transform: rotate(1.5deg);
        }
      }

      .hz-ic:hover {
        transform: translateY(-4px) scale(1.08);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }

      @media (prefers-reduced-motion: reduce) {
        .hz-ic .ln {
          stroke-dashoffset: 0 !important;
          animation: none !important;
        }

        .hz-ic .hzf {
          opacity: 0.9 !important;
          clip-path: none !important;
          animation: none !important;
        }

        .hz-ic svg {
          animation: none !important;
          transform: none !important;
        }
      }
    

      /* ===== OUR PROCESS - grey panel + expanding cards ===== */
      .pc {
        padding: 64px 24px 0px 24px;
        background: #ffffff;
      }

      .pc-panel {
        max-width: 100%;
        margin: 0 auto;
        background: #fff;
        /* grey side area */
        border-radius: 0px;
        padding: 0px;
      }

      .pc-grid {
        display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        gap: 48px;
        align-items: stretch;
      }

      /* left text */
      .pc-text {
        display: flex;
        flex-direction: column;
      }

      .pc-eyebrow {
        display: inline-flex;
        align-self: flex-start;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.14em;
        color: var(--muted);
        text-transform: uppercase;
        background: #fff;
        border-radius: 999px;
        padding: 8px 16px;
        margin-bottom: 26px;
        border: 1px solid var(--muted);
      }

      .pc-heading {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: clamp(32px, 3.6vw, 45px);
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: var(--navy);
        margin: 0;
      }

      .pc-accent {
        color: var(--teal) !important;
      }

      .pc-lead {
        font-size: 16.5px;
        font-weight: 500;
        line-height: 1.6;
        color: var(--navy);
        max-width: 380px;
        margin: 24px 0 0;
      }

      .pc-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: auto;
        padding-top: 32px;
      }

      .pc-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        padding: 14px 22px;
        border-radius: 999px;
        border: 1px solid transparent;
        transition:
          transform 0.25s ease,
          background 0.25s ease,
          color 0.25s ease;
      }

      .pc-btn-primary {
        background: var(--navy);
        color: #fff;
      }

      .pc-btn-primary:hover {
        background: var(--teal-dark);
      }

      .pc-btn-primary .pc-arrow {
        transition: transform 0.25s ease;
      }

      .pc-btn-primary:hover .pc-arrow {
        transform: translateX(4px);
      }

      .pc-btn-ghost {
        background: #fff;
        color: var(--navy);
        border-color: #d9d9d9;
      }

      .pc-btn-ghost:hover {
        border-color: var(--navy);
      }

      /* expanding card cluster (the signature interaction) */
      .pc-cards {
        display: flex;
        gap: 14px;
        height: 400px;
      }

      .pc-card {
        position: relative;
        overflow: hidden;
        border-radius: 0px;
        /* round corners */
        flex: 1 1 0;
        /* equal at rest */
        cursor: pointer;
        transition: flex-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
        outline: none;
      }

      /* on hover/focus: this card grows, siblings shrink */
      .pc-cards:hover .pc-card {
        flex-grow: 0.65;
      }

      .pc-cards .pc-card:hover,
      .pc-cards .pc-card:focus-visible {
        flex-grow: 2.4;
      }

      .pc-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .pc-card:hover .pc-img,
      .pc-card:focus-visible .pc-img {
        transform: scale(1.05);
      }

      .pc-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 22px;
        background: linear-gradient(
          to top,
          rgba(0, 24, 70, 0.9) 0%,
          rgba(0, 24, 70, 0.45) 42%,
          rgba(0, 24, 70, 0) 72%
        );
      }

      .pc-num {
        position: absolute;
        top: 20px;
        left: 22px;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.9);
        font-variant-numeric: tabular-nums;
      }

      .pc-title {
        font-size: clamp(22px, 2.2vw, 28px);
        font-weight: 800;
        color: #fff;
        margin: 0;
        letter-spacing: -0.01em;
        white-space: nowrap;
      }

      /* description hidden at rest, revealed when card expands */
      .pc-desc {
        font-size: 14.5px;
        font-weight: 500;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.92);
        margin: 10px 0 0;
        max-width: 300px;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: translateY(8px);
        transition:
          opacity 0.4s ease 0.12s,
          max-height 0.5s ease,
          transform 0.45s ease 0.12s;
      }

      .pc-card:hover .pc-desc,
      .pc-card:focus-visible .pc-desc {
        opacity: 1;
        max-height: 160px;
        transform: translateY(0);
      }

      /* ---- responsive ---- */
      @media (max-width: 1024px) {
        .pc-grid {
          grid-template-columns: 1fr;
          gap: 36px;
        }

        .pc-panel {
          padding: 40px;
        }
      }

      @media (max-width: 680px) {
        .pc-panel {
          padding: 26px;
          border-radius: 18px;
        }

        .pc-cards {
          flex-direction: column;
          height: auto;
        }

        .pc-card {
          height: 260px;
          flex: none;
        }

        .pc-cards:hover .pc-card {
          flex-grow: 0;
        }

        .pc-cards .pc-card:hover {
          flex-grow: 0;
        }

        .pc-desc {
          opacity: 1;
          max-height: 160px;
          transform: none;
        }

        /* always show on mobile */
      }

      @media (prefers-reduced-motion: reduce) {
        .pc-card,
        .pc-img,
        .pc-desc,
        .pc-btn,
        .pc-arrow {
          transition: none;
        }
      }

      /* ===== BENEFITS - centered heading + 4 image cards ===== */
      .bn {
        padding: 64px 24px;
        background: #ffffff;
      }

      .bn-panel {
        max-width: 100%;
        margin: 0 auto;
        background: #fff;
        border-radius: 0px;
        padding: ox;
      }

      .bn-head {
        text-align: center;
        margin-bottom: 36px;
      }

      .bn-heading {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 45px;
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: var(--navy);
        margin: 0;
      }

      .bn-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--teal);
        margin-top: 18px;
      }

      .bn-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }

      .bn-card {
        position: relative;
        overflow: hidden;
        border-radius: 0px;
        aspect-ratio: 3/5;
        min-height: 420px;
        background: var(--navy);
        transition:
          transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.4s ease;
      }

      .bn-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .bn-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 24, 70, 0.72) 0%,
          rgba(0, 24, 70, 0.25) 30%,
          rgba(0, 24, 70, 0.3) 60%,
          rgba(0, 24, 70, 0.88) 100%
        );
      }

      .bn-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 24, 70, 0.22);
      }

      .bn-card:hover .bn-img {
        transform: scale(1.06);
      }

      .bn-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 22px;
      }

      .bn-top {
        display: flex;
        align-items: flex-start;
        gap: 12px;
      }

      .bn-num {
        font-size: 42px;
        font-weight: 600;
        color: #fff;
        line-height: 0.9;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
        flex: none;
      }

      .bn-sup {
        font-size: 13px;
        font-weight: 500;
        vertical-align: super;
        color: rgba(255, 255, 255, 0.7);
        margin-left: 2px;
      }

      .bn-title {
        font-size: 17px;
        font-weight: 700;
        color: #fff;
        margin: 4px 0 0;
        line-height: 1.22;
        letter-spacing: -0.01em;
      }

      .bn-desc {
        font-size: 13px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.82);
        margin: 0;
      }

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

        .bn-panel {
          padding: 36px 28px 40px;
        }

        .bn-heading {
          font-size: 36px;
        }
      }

      @media (max-width: 560px) {
        .bn-cards {
          grid-template-columns: 1fr;
        }

        .bn-card {
          min-height: 340px;
        }

        .bn-heading {
          font-size: 28px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .bn-card,
        .bn-img {
          transition: none;
        }
      }

      /* ===== SOLUTIONS - heading band + 3-column center feature ===== */
      .sol {
        padding: 64px 24px;
        background: #ffffff;
      }

      .sol-wrap {
        max-width: 100%;
        margin: 0 auto;
      }

      /* top band */
      .sol-band {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
        background: #f4f5f6;
        border-radius: 24px;
        padding: 48px 45px;
        margin-bottom: 14px;
      }

      .sol-heading {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 45px;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--navy);
        margin: 0;
      }

      .sol-intro {
        font-size: 15px;
        line-height: 1.7;
        color: var(--muted);
        margin: 8px 0 0;
        max-width: 420px;
        justify-self: end;
      }

      /* 3 columns */
      .sol-cols {
        display: grid;
        grid-template-columns: 1fr 1.05fr 1fr;
        gap: 14px;
        align-items: stretch;
      }

      .sol-col {
        border-radius: 24px;
      }

      /* text columns */
      .sol-col-text {
        background: #f4f5f6;
        padding: 40px 36px;
        display: flex;
        flex-direction: column;
      }

      .sol-icon {
        display: inline-flex;
        width: 46px;
        height: 46px;
        color: var(--navy);
      }

      .sol-icon svg {
        width: 100%;
        height: 100%;
      }

      .sol-col-title {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 22px;
        letter-spacing: -0.01em;
        color: var(--navy);
        margin: 0 0 12px;
      }

      .sol-graphic {
        margin: 28px 0 auto;
        width: 100%;
      }

      .sol-graphic svg {
        width: 100%;
        height: auto;
        max-width: 240px;
        display: block;
      }

      .sol-col-text:hover .sol-graphic svg [stroke="var(--teal)"] {
        stroke: var(--teal-dark);
      }

      .sol-col-desc {
        font-size: 14px;
        line-height: 1.65;
        color: var(--muted);
        margin: 0 0 22px;
      }

      .sol-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--navy);
        text-decoration: none;
        border-bottom: 1px solid var(--navy);
        padding-bottom: 3px;
        align-self: flex-start;
        transition:
          gap 0.25s ease,
          color 0.25s ease,
          border-color 0.25s ease;
      }

      .sol-link:hover {
        gap: 11px;
        color: var(--teal-dark);
        border-color: var(--teal-dark);
      }

      .sol-arrow {
        font-size: 16px;
        line-height: 1;
      }

      /* center feature */
      .sol-col-feature {
        position: relative;
        overflow: hidden;
        min-height: 560px;
        background: var(--navy);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }

      .sol-feat-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .sol-col-feature::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(0, 24, 70, 0.92) 0%,
          rgba(0, 24, 70, 0.4) 42%,
          rgba(0, 24, 70, 0.05) 72%
        );
      }

      .sol-col-feature:hover .sol-feat-img {
        transform: scale(1.05);
      }

      .sol-feat-body {
        position: relative;
        z-index: 2;
        padding: 36px;
      }

      .sol-feat-title {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 24px;
        letter-spacing: -0.01em;
        color: #fff;
        margin: 0 0 12px;
      }

      .sol-feat-desc {
        font-size: 14px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.86);
        margin: 0 0 22px;
      }

      .sol-link-feature {
        color: #fff;
        border-color: transparent;
        background: var(--teal);
        border-radius: 999px;
        padding: 11px 18px;
      }

      .sol-link-feature:hover {
        background: var(--teal-dark);
        color: #fff;
        border-color: transparent;
      }

      /* responsive */
      @media (max-width: 1024px) {
        .sol-band {
          grid-template-columns: 1fr;
          gap: 18px;
          padding: 36px 28px;
        }

        .sol-intro {
          justify-self: start;
          max-width: none;
        }

        .sol-heading {
          font-size: 36px;
        }

        .sol-cols {
          grid-template-columns: 1fr;
        }

        .sol-col-title {
          margin-top: 36px;
        }

        .sol-col-feature {
          min-height: 420px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .sol-feat-img,
        .sol-link {
          transition: none;
        }
      }

      /* ===== IMPACT - feature image + heading & stats ===== */
      .imp {
        padding: 64px 24px;
        background: #f6f4ef;
      }

      .imp-panel {
        max-width: 100%;
        margin: 0 auto;
        background:;
        border-radius: 0px;
        /* warm paper, like the reference */
        padding: 0px;
      }

      .imp-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 52px;
        align-items: center;
      }

      /* left media */
      .imp-media {
        border-radius: 18px;
        overflow: hidden;
      }

      .imp-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        aspect-ratio: 4/3.4;
        transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .imp-media:hover img {
        transform: scale(1.04);
      }

      /* right body */
      .imp-body {
        padding: 6px 0;
      }

      .imp-heading {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: clamp(30px, 3.6vw, 45px);
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: var(--navy);
        margin: 0 0 16px;
      }

      .imp-intro {
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--muted);
        margin: 0 0 32px;
        max-width: 520px;
      }

      /* stat rows */
      .imp-stats {
        margin: 0 0 34px;
      }

      .imp-stat {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        padding: 20px 0;
        border-top: 1px solid rgba(0, 24, 70, 0.12);
      }

      .imp-stat:last-child {
        border-bottom: 1px solid rgba(0, 24, 70, 0.12);
      }

      .imp-figure {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        flex: none;
        min-width: 150px;
      }

      .imp-num {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 54px;
        line-height: 0.95;
        letter-spacing: -0.03em;
        color: var(--navy);
        font-variant-numeric: tabular-nums;
      }

      .imp-suf {
        font-size: 34px;
        font-weight: 700;
        color: var(--teal-dark);
      }

      .imp-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(15, 181, 174, 0.16);
        color: var(--teal-dark);
        margin-top: 2px;
      }

      .imp-chip svg {
        width: 12px;
        height: 12px;
      }

      .imp-label {
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--navy);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 6px 0 0;
        align-self: center;
        max-width: 240px;
      }

      /* dark pill CTA */
      .imp-cta {
        display: inline-flex;
        align-items: center;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
        background: var(--navy);
        padding: 16px 30px;
        border-radius: 999px;
        transition:
          background 0.25s ease,
          transform 0.25s ease;
      }

      .imp-cta:hover {
        background: var(--teal-dark);
        transform: translateY(-2px);
      }

      /* responsive */
      @media (max-width: 1024px) {
        .imp-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }

        .imp-panel {
          padding: 32px;
        }
      }

      @media (max-width: 560px) {
        .imp-figure {
          min-width: 120px;
        }

        .imp-num {
          font-size: 42px;
        }

        .imp-label {
          max-width: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .imp-media img,
        .imp-cta {
          transition: none;
        }
      }

      /* ===== HERO - nav + headline + banner + stats ===== */
      .hero {
        padding: 0px 0px;
        background: #fff;
      }

      .hero-panel {
        max-width: 100%;
        margin: 0 auto;
        background: #f4f4f4;
        border-radius: 0px;
        padding: 18px 18px 0px;
        box-shadow: 0 30px 80px rgba(0, 24, 70, 0.1);
      }

      /* nav */
      .hero-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border-radius: 18px;
        padding: 18px 28px;
        margin-bottom: 30px;
      }

      .hero-logo {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
      }

      .hero-logo img {
        height: 34px;
        width: auto;
        display: block;
      }

      .hero-menu {
        display: flex;
        gap: 30px;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .hero-menu a {
        font-size: 13px;
        font-weight: 500;
        color: var(--muted);
        text-decoration: none;
        padding-bottom: 3px;
        transition: color 0.2s ease;
      }

      .hero-menu a:hover {
        color: var(--navy);
      }

      .hero-menu a.active {
        color: var(--navy);
        font-weight: 700;
        border-bottom: 2px solid var(--teal);
      }

      /* headline row */
      .hero-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        padding: 18px 18px 30px;
      }

      .hero-h1 {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 45px;
        line-height: 1.02;
        letter-spacing: -0.02em;
        color: #133069;
        margin: 0;
      }

      .hero-line {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
      }

      .hero-pill {
        display: inline-block;
        width: 88px;
        height: 38px;
        overflow: hidden;
        border-radius: 999px;
        vertical-align: middle;
        flex: none;
      }

      .hero-pill img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .hero-sub {
        font-size: 15px;
        line-height: 1.6;
        color: var(--muted);
        margin: 24px 0 0;
        max-width: 440px;
      }

      .hero-cta {
        display: inline-flex;
        align-items: center;
        margin-top: 28px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
        background: var(--navy);
        text-decoration: none;
        padding: 15px 26px;
        border-radius: 14px;
        transition:
          background 0.25s ease,
          transform 0.25s ease;
      }

      .hero-cta:hover {
        background: var(--teal-dark);
        transform: translateY(-2px);
      }

      /* social links */
      .hero-social {
        list-style: none;
        margin: 6px 0 0;
        padding: 0;
        min-width: 150px;
      }

      .hero-social li {
        margin-bottom: 14px;
      }

      .hero-social a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        font-weight: 600;
        color: var(--navy);
        text-decoration: none;
        transition:
          color 0.2s ease,
          gap 0.2s ease;
      }

      .hero-social a:hover {
        color: var(--teal-dark);
      }

      .hero-social svg {
        width: 14px;
        height: 14px;
        transition: transform 0.2s ease;
      }

      .hero-social a:hover svg {
        transform: translateX(3px);
      }

      /* banner + frosted caption */
      .hero-banner {
        position: relative;
        overflow: hidden;
        border-radius: 2px;
        margin: 0 0 0px;
      }

      .hero-banner img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 16/6.2;
        object-fit: cover;
      }

      .hero-caption {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 22px;
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 14px;
        padding: 20px 24px;
        font-size: 14.5px;
        line-height: 1.55;
        color: #fff;
        max-width: 680px;
      }

      /* stat cards */
      .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }

      .hero-stat {
        border-radius: 18px;
        padding: 26px 28px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .hero-stat-light {
        background: #e4e4e4;
      }

      .hero-stat-dark {
        background: var(--navy);
      }

      .hero-stat-num {
        font-family: "Inter", sans-serif;
        font-weight: 800;
        font-size: 42px;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--navy);
        font-variant-numeric: tabular-nums;
      }

      .hero-stat.hero-stat-dark .hero-stat-num {
        color: #ffffff !important;
      }

      .hero-stat-suf {
        font-size: 30px;
      }

      .hero-stat-label {
        font-size: 13px;
        color: var(--muted);
        margin-top: 10px;
      }

      .hero-stat.hero-stat-dark .hero-stat-label {
        color: rgba(255, 255, 255, 0.7) !important;
      }

      /* responsive */
      @media (max-width: 1024px) {
        .hero-top {
          flex-direction: column;
          gap: 24px;
        }

        .hero-social {
          display: flex;
          gap: 24px;
          min-width: 0;
        }

        .hero-social li {
          margin: 0;
        }
      }

      @media (max-width: 680px) {
        .hero-nav {
          padding: 14px 18px;
        }

        .hero-menu {
          display: none;
        }

        .hero-stats {
          grid-template-columns: 1fr;
        }

        .hero-caption {
          position: static;
          margin-top: -1px;
          border-radius: 0 0 20px 20px;
          background: var(--navy);
          backdrop-filter: none;
        }

        .hero-pill {
          width: 64px;
          height: 30px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-cta,
        .hero-social a,
        .hero-social svg {
          transition: none;
        }
      }

      /* ===== FEATURES - 4 cards with varied tops ===== */
      .ft {
        padding: 72px 24px;
        background: #ffffff;
      }

      .ft-wrap {
        max-width: 100%;
        margin: 0 auto;
      }

      .ft-heading {
        font-family: "Inter", sans-serif;
        font-weight: 600 !important;
        font-size: 45px;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--navy);
        text-align: center;
        margin: 0 0 44px;
      }

      .ft-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
      }

      .ft-card {
        background: #ededed;
        border-radius: 0px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        transition:
          transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
          opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        opacity: 0;
        transform: translateY(28px);
      }

      .ft-card.in {
        opacity: 1;
        transform: none;
      }

      .ft-card.in:hover {
        transform: translateY(-6px);
      }

      .ft-card-accent {
        background: #f4e7d6;
      }

      /* warm accent like the reference */

      /* top illustration area */
      .ft-top {
        flex: 1;
        min-height: 230px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 14px;
      }

      /* card1 single circle */
      .ft-circle {
        border-radius: 50%;
        overflow: hidden;
      }

      .ft-circle-lg {
        width: 150px;
        height: 150px;
      }

      .ft-circle img,
      .ft-node img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* card2 network of circles */
      .ft-network {
        position: relative;
        width: 200px;
        height: 180px;
      }

      .ft-net-lines {
        position: absolute;
        inset: 0;
      }

      .ft-node {
        position: absolute;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid #ededed;
        box-shadow: 0 4px 12px rgba(0, 24, 70, 0.12);
      }

      .ft-node-1 {
        width: 62px;
        height: 62px;
        top: 6px;
        left: 40px;
      }

      .ft-node-2 {
        width: 62px;
        height: 62px;
        top: 54px;
        right: 6px;
      }

      .ft-node-3 {
        width: 62px;
        height: 62px;
        bottom: 6px;
        left: 64px;
      }

      /* card3 checklist */
      .ft-steps-head {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--navy);
        margin: 0 0 14px;
      }

      .ft-steps {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
      }

      .ft-step {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        border-radius: 999px;
        padding: 11px 16px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--navy);
        box-shadow: 0 2px 8px rgba(0, 24, 70, 0.06);
      }

      .ft-step-muted {
        color: var(--muted);
        background: rgba(255, 255, 255, 0.7);
      }

      .ft-step-ic {
        display: inline-flex;
        width: 18px;
        height: 18px;
        flex: none;
      }

      .ft-step-ic svg {
        width: 100%;
        height: 100%;
      }

      /* card4 cta + hand */
      .ft-top-cta {
        gap: 0;
      }

      .ft-pillbtn {
        background: var(--teal);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 11px 22px;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(15, 181, 174, 0.35);
        align-self: center;
      }

      .ft-hand {
        display: inline-flex;
        width: 70px;
        height: 80px;
        margin-top: -4px;
      }

      .ft-hand svg {
        width: 100%;
        height: 100%;
      }

      /* white label card at bottom */
      .ft-label {
        background: #fff;
        border-radius: 16px;
        padding: 22px 22px 24px;
      }

      .ft-card-accent .ft-label {
        background: #fff;
      }

      .ft-title {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 19px;
        letter-spacing: -0.01em;
        color: var(--navy);
        margin: 0 0 8px;
      }

      .ft-desc {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--muted);
        margin: 0;
      }

      /* responsive */
      @media (max-width: 1024px) {
        .ft-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .ft-heading {
          font-size: 36px;
        }
      }

      @media (max-width: 560px) {
        .ft-grid {
          grid-template-columns: 1fr;
        }

        .ft-heading {
          font-size: 28px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .ft-card {
          transition: none;
        }
      }

      /* ===== FT cards reused as horizontal milestone (.mcard) style ===== */
      .ft-mile .ft-wrap {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 clamp(24px, 4vw, 60px);
      }

      .ftm-grid {
        margin-top: clamp(32px, 4vw, 48px);
      }

      .mcard.ftm {
        background: #fff;
        border: 1px solid rgba(0, 24, 70, 0.14);
      }

      .mcard.ftm .mcard-fig {
        opacity: 0.9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: visible;
      }

      /* let each existing illustration fill the fig slot */
      .mcard.ftm .ftm-fig > * {
        max-width: 100%;
      }

      .mcard.ftm .ftm-fig img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

      .mcard.ftm .ft-network {
        transform: scale(0.9);
      }

      .mcard.ftm:hover .mcard-fig {
        opacity: 1;
      }

      .mcard.ftm .mcard-body h4 {
        font-size: clamp(19px, 2vw, 23px);
      }

      /* Turnkey card: give the steps enough room so "How it works" + steps aren't truncated */
      .mcard.ftm.m-green .mcard-fig {
        width: min(300px, 50%);
        right: -1%;
      }

      .mcard.ftm.m-green .mcard-body {
        max-width: 46%;
      }

      .mcard.ftm .ft-steps-head {
        white-space: nowrap;
        margin: 0 0 12px;
      }

      .mcard.ftm .ft-steps {
        gap: 9px;
        width: 100%;
      }

      .mcard.ftm .ft-step {
        font-size: 12px;
        padding: 10px 14px;
        line-height: 1.35;
      }

      /* ===== graphic / image animations ===== */
      /* card 1 - photo: slow ambient zoom, stronger zoom on hover */
      .mcard.ftm.m-peach .ftm-fig img {
        animation: ftmDrift 9s ease-in-out infinite;
        transform-origin: center;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .mcard.ftm.m-peach:hover .ftm-fig img {
        transform: scale(1.12);
      }

      @keyframes ftmDrift {
        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.06);
        }
      }

      /* card 2 - network circles: gentle float, shake on hover */
      .mcard.ftm.m-lilac .ft-node {
        animation: ftmFloat 4.5s ease-in-out infinite;
      }

      .mcard.ftm.m-lilac .ft-node-2 {
        animation-delay: 0.6s;
      }

      .mcard.ftm.m-lilac .ft-node-3 {
        animation-delay: 1.2s;
      }

      .mcard.ftm.m-lilac:hover .ft-network {
        animation: ftmShake 0.5s ease-in-out;
      }

      @keyframes ftmFloat {
        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-6px);
        }
      }

      @keyframes ftmShake {
        0%,
        100% {
          transform: scale(0.9) rotate(0);
        }

        20% {
          transform: scale(0.9) rotate(-3deg);
        }

        40% {
          transform: scale(0.9) rotate(3deg);
        }

        60% {
          transform: scale(0.9) rotate(-2deg);
        }

        80% {
          transform: scale(0.9) rotate(2deg);
        }
      }

      /* card 3 - steps: each pill breathes in, slides right on hover */
      .mcard.ftm.m-green .ft-step {
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.35s;
      }

      .mcard.ftm.m-green:hover .ft-step {
        transform: translateX(4px);
      }

      .mcard.ftm.m-green:hover .ft-step:nth-child(2) {
        transform: translateX(8px);
      }

      .mcard.ftm.m-green:hover .ft-step:nth-child(3) {
        transform: translateX(12px);
      }

      .mcard.ftm.m-green .ft-step-ic svg {
        animation: ftmPulse 3s ease-in-out infinite;
      }

      @keyframes ftmPulse {
        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.18);
        }
      }

      /* card 4 - enquire pill + hand: pill pulses, hand taps/shakes on hover */
      .mcard.ftm.m-pink .ft-pillbtn {
        animation: ftmPillPulse 2.6s ease-in-out infinite;
      }

      .mcard.ftm.m-pink .ft-hand {
        transform-origin: 60% 20%;
        animation: ftmTap 2.6s ease-in-out infinite;
      }

      .mcard.ftm.m-pink:hover .ft-hand {
        animation: ftmShake 0.5s ease-in-out;
      }

      @keyframes ftmPillPulse {
        0%,
        100% {
          transform: scale(1);
          box-shadow: 0 6px 16px rgba(15, 181, 174, 0.35);
        }

        50% {
          transform: scale(1.06);
          box-shadow: 0 10px 26px rgba(15, 181, 174, 0.5);
        }
      }

      @keyframes ftmTap {
        0%,
        100% {
          transform: translateY(0) rotate(0);
        }

        45% {
          transform: translateY(3px) rotate(-4deg);
        }

        60% {
          transform: translateY(0) rotate(0);
        }
      }

      @media (max-width: 820px) {
        .mcard.ftm.m-green .mcard-fig {
          width: min(260px, 56%);
        }

        .mcard.ftm.m-green .mcard-body {
          max-width: 60%;
        }
      }

      /* mobile: stack the illustration BELOW the text so nothing overlaps */
      @media (max-width: 560px) {
        .mcard.ftm {
          min-height: 0;
        }

        .mcard.ftm .mcard-body {
          max-width: 100%;
        }

        .mcard.ftm .mcard-fig,
        .mcard.ftm.m-green .mcard-fig {
          position: static;
          transform: none;
          width: 100%;
          right: auto;
          top: auto;
          margin: 24px auto 0;
          opacity: 1;
          height: 150px;
          max-width: 260px;
        }

        .mcard.ftm .mcard-glow {
          display: none;
        }

        .mcard.ftm .ftm-fig img {
          height: 150px;
        }

        .mcard.ftm.m-green .mcard-fig {
          height: auto;
          max-width: 100%;
        }

        .mcard.ftm.m-green .ft-steps {
          align-items: stretch;
        }

        /* reorder so figure comes after the body visually */
        .mcard.ftm {
          display: flex;
          flex-direction: column;
        }

        .mcard.ftm .mcard-body {
          order: 1;
        }

        .mcard.ftm .mcard-fig {
          order: 2;
        }

        .mcard.ftm .mcard-glow {
          order: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .mcard.ftm .ftm-fig img,
        .mcard.ftm .ft-node,
        .mcard.ftm .ft-step-ic svg,
        .mcard.ftm .ft-pillbtn,
        .mcard.ftm .ft-hand {
          animation: none !important;
        }
      }

      /* ===== HERO 2 - pill nav + overlapping headline/image + stats ===== */
      .hx {
        padding: 40px 24px;
        background: #ffffff;
      }

      .hx-panel {
        max-width: 100%;
        margin: 0 auto;
        background: #fff;
        border-radius: 6px;
        padding: 34px 40px 40px;
      }

      /* pill nav */
      .hx-nav {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 34px;
      }

      .hx-logo {
        display: inline-flex;
        width: 36px;
        height: 36px;
      }

      .hx-logo svg {
        width: 100%;
        height: 100%;
      }

      .hx-menu {
        display: flex;
        gap: 10px;
        list-style: none;
        margin: 0 0 0 auto;
        padding: 0;
      }

      .hx-menu a {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        color: var(--navy);
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 999px;
        border: 1px solid transparent;
        transition:
          border-color 0.2s ease,
          background 0.2s ease;
      }

      .hx-menu a:hover {
        border-color: var(--line);
      }

      .hx-menu a.active {
        border-color: var(--navy);
      }

      .hx-shop {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        background: var(--navy);
        padding: 11px 22px;
        border-radius: 999px;
        transition: background 0.25s ease;
      }

      .hx-shop:hover {
        background: var(--teal-dark);
      }

      /* overlapping stage */
      .hx-stage {
        position: relative;
      }

      .hx-img {
        width: 100%;
        display: block;
        border-radius: 18px;
        aspect-ratio: 15/8.6;
        object-fit: cover;
        margin-top: 70px;
        /* room for headline to overlap top */
      }

      .hx-headblock {
        position: absolute;
        top: 0;
        left: 0;
        right: 200px;
        z-index: 2;
        background: #fff;
        border-radius: 0 0 22px 0;
        padding: 0 41px 20px 0;
      }

      .hx-h1 {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 50px;
        line-height: 1.04;
        letter-spacing: -0.03em;
        color: var(--navy);
        margin: 0;
      }

      .hx-l1,
      .hx-l2 {
        display: flex;
        align-items: center;
        gap: 18px;
      }

      .hx-l2 {
        padding-left: 30px;
      }

      .hx-flourish {
        width: 120px;
        height: 24px;
        flex: none;
      }

      .hx-underline {
        width: 80px;
        height: 10px;
        flex: none;
      }

      .hx-descblock {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        background: #fff;
        border-radius: 22px 0 0 0;
        padding: 22px 0 0 26px;
        max-width: 560px;
      }

      .hx-descblock p {
        font-size: 15px;
        line-height: 1.55;
        color: var(--navy);
        margin: 0;
      }

      /* bottom row */
      .hx-bottom {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 40px;
        margin-top: 30px;
        flex-wrap: wrap;
      }

      .hx-stats {
        display: flex;
        gap: 56px;
      }

      .hx-num {
        font-family: "Inter", sans-serif;
        font-weight: 500;
        font-size: 48px;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--navy);
        font-variant-numeric: tabular-nums;
        display: block;
      }

      .hx-suf {
        font-size: 34px;
      }

      .hx-label {
        font-size: 14px;
        color: var(--muted);
        margin-top: 8px;
        display: block;
      }

      .hx-search {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 340px;
      }

      .hx-input {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        color: var(--navy);
        padding: 15px 20px;
        border: 1px solid var(--line);
        border-radius: 12px;
        outline: none;
        transition: border-color 0.2s ease;
      }

      .hx-input:focus {
        border-color: var(--navy);
      }

      .hx-explore {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        background: var(--navy);
        text-decoration: none;
        padding: 16px 20px;
        border-radius: 12px;
        transition:
          background 0.25s ease,
          transform 0.25s ease;
      }

      .hx-explore:hover {
        background: var(--teal-dark);
        transform: translateY(-2px);
      }

      /* responsive */
      @media (max-width: 900px) {
        .hx-headblock {
          position: static;
          right: auto;
          padding: 0 0 18px;
          border-radius: 0;
        }

        .hx-img {
          margin-top: 0;
        }

        .hx-descblock {
          position: static;
          max-width: none;
          padding: 18px 0 0;
        }

        .hx-l2 {
          padding-left: 0;
        }

        .hx-bottom {
          flex-direction: column;
          align-items: stretch;
        }

        .hx-stats {
          gap: 28px;
          flex-wrap: wrap;
        }

        .hx-search {
          min-width: 0;
        }
      }

      @media (max-width: 560px) {
        .hx-menu {
          display: none;
        }

        .hx-num {
          font-size: 38px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hx-shop,
        .hx-explore {
          transition: none;
        }
      }

      /* ===== TIMELINE - wide curved track, hover-scroll + moving marker ===== */
      .tl {
        padding: 80px 0 60px;
        background: #ffffff;
      }

      .tl-wrap {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 24px;
      }

      .tl-head {
        max-width: 760px;
        margin: 0 0 8px;
      }

      .tl-heading {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-size: 38px;
        line-height: 1.12;
        letter-spacing: -0.03em;
        color: var(--navy);
        margin: 0 0 18px;
      }

      .tl-accent {
        color: var(--teal);
      }

      .tl-intro {
        font-size: 15px;
        line-height: 1.7;
        color: var(--muted);
        margin: 0;
        max-width: 640px;
      }

      .tl-viewport {
        margin-top: 30px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .tl-viewport::-webkit-scrollbar {
        display: none;
      }

      .tl-track {
        position: relative;
        height: 440px;
      }

      .tl-svg {
        display: block;
      }

      .tl-line {
        stroke: var(--teal);
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-dasharray: 6000;
        stroke-dashoffset: 6000;
        animation: tl-draw 3s ease forwards;
      }

      @keyframes tl-draw {
        to {
          stroke-dashoffset: 0;
        }
      }

      .tl-line-faint {
        stroke: var(--teal);
        stroke-width: 1.6;
        opacity: 0.25;
        stroke-linecap: round;
      }

      .tl-dot {
        fill: #fff;
        stroke: var(--teal);
        stroke-width: 2.4;
      }

      .tl-dot-lg {
        r: 10;
        fill: var(--teal);
      }

      .tl-conn {
        stroke: rgba(0, 24, 70, 0.18);
        stroke-width: 1;
        stroke-dasharray: 2 4;
      }

      /* moving marker (arrow) that blinks light/dark teal */
      .tl-marker-ring {
        fill: rgba(15, 181, 174, 0.15);
        stroke: var(--teal);
        stroke-width: 1.5;
      }

      .tl-marker-arrow {
        animation: tl-blink 1s ease-in-out infinite;
      }

      @keyframes tl-blink {
        0%,
        100% {
          fill: #0fb5ae;
        }

        /* light teal */
        50% {
          fill: #0a6e69;
        }

        /* dark teal */
      }

      .tl-labels {
        position: absolute;
        inset: 0;
      }

      .tl-label {
        position: absolute;
        width: 172px;
        transform: translateX(-14px);
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .tl-year {
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 19px;
        color: var(--teal-dark);
      }

      .tl-h {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--navy);
      }

      .tl-tx {
        font-size: 11px;
        line-height: 1.45;
        color: var(--muted);
      }

      @media (prefers-reduced-motion: reduce) {
        .tl-line {
          animation: none;
          stroke-dashoffset: 0;
        }

        .tl-marker-arrow {
          animation: none;
          fill: var(--teal);
        }
      }
    

      /* ============ FOOTER (from footer (1).html) - font kept as page default: 'Inter', sans-serif ============ */
      .sf {
        position: relative;
        background: linear-gradient(
          160deg,
          #06211b 0%,
          #0a332b 60%,
          #0d3b32 100%
        );
        padding: 0;
        font-family: "Inter", sans-serif;
        overflow: hidden;
      }

      .sf-glow {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(
            50% 60% at 15% 0%,
            rgba(15, 181, 174, 0.16),
            transparent 65%
          ),
          radial-gradient(
            40% 50% at 100% 100%,
            rgba(242, 201, 76, 0.08),
            transparent 70%
          );
      }

      .sf-card {
        position: relative;
        width: 100%;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
        background-color: #07161d;
        box-shadow: none;
        opacity: 0;
        transform: translateY(36px);
        transition:
          opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* banner art fills the card's full (content-driven) height so it always
     reaches the bottom bar with no gap, however tall the nav content is */
      .sf-media {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background-color: #07161d;

        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
      }

      .sf-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        pointer-events: none;
      }

      .sf-tint {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 24, 70, 0.6) 0%,
          rgba(0, 24, 70, 0.3) 45%,
          rgba(0, 24, 70, 0.75) 100%
        );
        mix-blend-mode: multiply;
        pointer-events: none;
      }

      .sf-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 24, 70, 0.3) 0%,
          rgba(0, 24, 70, 0.05) 45%,
          rgba(0, 24, 70, 0.45) 100%
        );
        pointer-events: none;
      }

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

      .sf-top {
        position: relative;
        z-index: 1;
        background: transparent;
        display: flex;
        justify-content: space-between;
        gap: 32px;
        max-width: 1240px;
        margin: 0 auto;
        padding: clamp(42px, 7vw, 96px) clamp(22px, 5vw, 64px) 40px;
      }

      .sf-brand {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 250px;
        flex: 1 1 250px;
      }

      .sf-logo-plate {
        display: inline-flex;
        width: fit-content;
        padding: 10px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.51);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        /*border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .3);*/
      }

      .sf-logo {
        height: 108px;
        width: auto;
        display: block;
        object-fit: contain;
      }

      .sf-tag {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.86);
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
      }

      .sf-contact {
        margin: 2px 0 0;
        font-size: 13.5px;
        line-height: 1.9;
        color: rgba(255, 255, 255, 0.86);
      }

      .sf-contact a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.38);
        transition:
          color 0.2s,
          border-color 0.2s;
      }

      .sf-contact a svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
      }

      .sf-contact a:hover {
        color: #fff;
        border-color: #fff;
      }

      .sf-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        padding: 10px 18px;
        border-radius: 999px;
        background: #fff;
        color: #10291f;
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        width: fit-content;
        transition:
          background 0.2s,
          transform 0.2s;
      }

      .sf-cta:hover {
        background: #eff9f4;
        transform: translateY(-2px);
      }

      .sf-cta svg {
        width: 13px;
        height: 13px;
        transition: transform 0.2s;
      }

      .sf-cta:hover svg {
        transform: translate(2px, -2px);
      }

      .sf-col {
        display: flex;
        flex-direction: column;
        min-width: 140px;
      }

      .sf-col h4 {
        margin: 0 0 16px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.72);
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
      }

      .sf-col a {
        position: relative;
        display: block;
        width: fit-content;
        margin-bottom: 11px;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        opacity: 0.88;
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
        transition:
          opacity 0.2s,
          color 0.2s;
      }

      .sf-col a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: #fff;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
      }

      .sf-col a:hover {
        opacity: 1;
        color: #fff;
      }

      .sf-col a:hover::after {
        transform: scaleX(1);
      }

      .sf-connect {
        display: flex;
        align-items: center;
        gap: 0;
      }

      .sf-connect-icon {
        width: 0;
        height: 22px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        overflow: hidden;
        transform: translateX(-6px) scale(0.6);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease,
          width 0.25s ease,
          margin-right 0.25s ease;
      }

      .sf-connect-icon svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
        color: #fff;
      }

      .sf-connect--x .sf-connect-icon svg,
      .sf-connect--linkedin .sf-connect-icon svg,
      .sf-connect--youtube .sf-connect-icon svg {
        fill: #fff;
      }

      .sf-connect:hover .sf-connect-icon {
        width: 22px;
        margin-right: 9px;
        opacity: 1;
        transform: translateX(0) scale(1);
      }

      .sf-connect--x .sf-connect-icon {
        background: #000;
      }
      .sf-connect--instagram .sf-connect-icon {
        background: radial-gradient(
          circle at 30% 107%,
          #fdf497 0%,
          #fdf497 5%,
          #fd5949 45%,
          #d6249f 60%,
          #285aeb 90%
        );
      }
      .sf-connect--linkedin .sf-connect-icon {
        background: #0a66c2;
      }
      .sf-connect--youtube .sf-connect-icon {
        background: #ff0000;
      }

      .sf-connect--x:hover {
        color: #fff;
      }
      .sf-connect--instagram:hover {
        color: #e1306c;
      }
      .sf-connect--linkedin:hover {
        color: #0a66c2;
      }
      .sf-connect--youtube:hover {
        color: #ff0000;
      }

      .sf-bottom {
        position: relative;
        z-index: 1;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        max-width: 1240px;
        margin: clamp(220px, 30vh, 360px) auto 0;
        padding: 24px clamp(22px, 5vw, 64px);
        border-top: 1px solid rgba(255, 255, 255, 0.22);
      }

      .sf-bottom p {
        margin: 0;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.82);
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
      }

      .sf-social {
        display: flex;
        gap: 12px;
      }

      .sf-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
        transition: background 0.2s;
      }

      .sf-social a:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .sf-social a[aria-label="Facebook"]:hover {
        color: #1877f2;
      }

      .sf-social a[aria-label="Instagram"]:hover {
        color: #e1306c;
      }

      .sf-social a[aria-label="YouTube"]:hover {
        color: #ff0000;
      }

      .sf-social a[aria-label="Facebook"]:hover {
        color: #1877f2;
      }

      .sf-social a[aria-label="Instagram"]:hover {
        color: #e1306c;
      }

      .sf-social a[aria-label="YouTube"]:hover {
        color: #ff0000;
      }

      .sf-social svg {
        width: 15px;
        height: 15px;
      }

      @media (prefers-reduced-motion: reduce) {
        .sf-card {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

      @media (max-width: 760px) {
        .sf-top {
          flex-direction: column;
          padding: 36px 24px 28px;
          gap: 28px;
        }

        .sf-brand {
          max-width: none;
        }

        .sf-bottom {
          flex-direction: column;
          margin-top: 50px;
          padding: 20px 24px;
          text-align: center;
        }
      }

      @media (max-width: 480px) {
        .sf-media {
          background-position: center top;
        }

        .sf-video {
          object-position: center top;
        }

        .sf-top {
          gap: 22px;
        }
      }