:root {
      --black: #1e2158;
      --ink: #0B1220;
      --paper: #ffffff;
      --offwhite: #F7F8FA;
      --muted: #5B6472;
      --line: #E6E8EC;
      --radius: 0px;
      --navy: #1e2158;
      --navy-2: #030F4D;
      --teal: #5DBB64;
      --teal-dark: #5DBB64;
    }

    * {
      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;

    }

    .pc,
    .dnx,
    .afn-quote,
    .dark,
    .pc,
    .tl,
    .ft,
    .bn,
    .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: 18px;
      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
    }

    /* At the top of the page the header sits over the dark hero, so the burger
       lines must be white to be visible; once scrolled (light background) they
       go back to dark via the rule above. */
    .site-nav:not(.scrolled) .nav-burger span {
      background: #fff;
    }

    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, #5fd0c9, #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, #5fd0c9, #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;
      padding-bottom: 50px;
    }

    .pvx-head {
      flex: 0 0 40%;
      max-width: 420px;
      text-align: left;
      padding: 0 10px;
      transition: opacity .4s ease;
      will-change: opacity, transform
    }

    .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;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .6s ease, transform .6s ease
    }

    .pvx-h-eyebrow::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 10px;
      height: 2px;
      background: var(--teal);
      transform: translateY(-50%)
    }

    .pvx.revealed .pvx-h-eyebrow {
      opacity: 1;
      transform: none
    }

    .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-line {
      display: block;
      overflow: hidden
    }

    .pvx-h-line-in {
      display: inline-block;
      transform: translateY(115%);
      opacity: 0;
      transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .6s ease
    }

    .pvx.revealed .pvx-h-line-in {
      transform: translateY(0);
      opacity: 1
    }

    .pvx.revealed .pvx-h-line:nth-child(1) .pvx-h-line-in {
      transition-delay: .12s
    }

    .pvx.revealed .pvx-h-line:nth-child(2) .pvx-h-line-in {
      transition-delay: .26s
    }

    .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);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .6s ease .4s, transform .6s ease .4s
    }

    .pvx.revealed .pvx-h-lead {
      opacity: 1;
      transform: none
    }

    @media(prefers-reduced-motion:reduce) {

      .pvx-h-eyebrow,
      .pvx-h-line-in,
      .pvx-h-lead {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
      }
    }

    .pvx-track {
      height: 260vh
    }

    /* usable pinned-scroll distance is (this - 100vh) since one viewport is always consumed holding the section on screen; the expand itself now auto-completes on its own so this no longer needs to cover it too */
    .pvx-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 48px;
      padding: 0 126px
    }

    .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%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 60vh;
      width: 58%;
      overflow: hidden;
      background: #fff;
      border-radius: 0;
      border: 1px solid rgba(255, 255, 255, .22);
      box-shadow: 0 40px 90px -20px rgba(10, 20, 40, .45), 0 10px 30px -10px rgba(10, 20, 40, .3);
      will-change: width, height, box-shadow, transform;
      z-index: 2
    }

    .pvx-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 50px rgba(255, 255, 255, .05)
    }

    .pvx-webgl {
      display: none !important;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 1
    }

    @media(max-width:900px) {
      .pvx-webgl {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .pvx-webgl {
        display: none
      }
    }

    .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-videofx {
      display: none !important;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .pvx-frame.pvx-fx-ready .pvx-video {
      opacity: 1
    }

    @media(max-width:900px) {
      .pvx-videofx {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .pvx-videofx {
        display: none
      }

      .pvx-frame.pvx-fx-ready .pvx-video {
        opacity: 1
      }
    }

    /* ---- cover reveal: an abstract animated swirl sits over the video until the
   card finishes expanding, then wipes away once (left -> right) to unveil the
   real footage underneath - modeled on the lusion.co "play reel" reveal ---- */
    .pvx-cover {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
      /*background:conic-gradient(from 0deg at 50% 45%, #ff5fae, #7c5cff, #1E6BFF, #3ED598, #ffb703, #ff5fae);*/
      clip-path: inset(0 0 0 0);
      transition: clip-path 1.3s cubic-bezier(.76, 0, .24, 1);
      animation: pvxCoverSpin 10s linear infinite
    }

    .pvx-cover.wiped {
      clip-path: inset(0 0 0 100%)
    }

    @keyframes pvxCoverSpin {
      to {
        filter: hue-rotate(360deg);
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .pvx-cover {
        transition: none;
        animation: none
      }
    }

    /* ---- centered "PLAY o REEL" label, always on top of the cover/video ---- */
    .pvx-reel {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: clamp(10px, 2vw, 24px);
      pointer-events: none
    }

    .pvx-reel-tx {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: clamp(22px, 4vw, 54px);
      letter-spacing: -.02em;
      color: #fff;
      text-shadow: 0 6px 26px rgba(0, 0, 0, .35)
    }

    .pvx-reel-btn {
      width: clamp(42px, 5.6vw, 68px);
      height: clamp(42px, 5.6vw, 68px);
      border-radius: 50%;
      flex: 0 0 auto;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5)
    }

    .pvx-reel-btn svg {
      width: 36%;
      height: 36%;
      fill: #0b1e3d;
      margin-left: 3px
    }

    /* ---- lusion-style plus-mark grid at the frame's corners/edges ---- */
    .pvx-plus {
      position: absolute;
      z-index: 2;
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      font-size: 16px;
      line-height: 1;
      color: rgba(255, 255, 255, .6);
      pointer-events: none;
      user-select: none
    }

    .pvx-plus.tl {
      top: 14px;
      left: 14px
    }

    .pvx-plus.tr {
      top: 14px;
      right: 14px
    }

    .pvx-plus.bl {
      bottom: 14px;
      left: 14px
    }

    .pvx-plus.br {
      bottom: 14px;
      right: 14px
    }

    .pvx-plus.tm {
      top: 14px;
      left: 50%;
      transform: translateX(-50%)
    }

    .pvx-plus.bm {
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%)
    }

    @media(max-width:900px) {
      .pvx-plus {
        display: none
      }
    }

    .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(34px, 5.3vw, 56px);
      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;
        transform: none !important
      }

      .pvx-frame {
        position: static;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 54vh !important;
        /* the scroll-expand JS writes an inline desktop transform (translate
           -50%,-50% + translateX(22vw)…) that shoves the video off-position and
           overlaps the text on mobile; neutralise it for the stacked layout */
        transform: none !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;
        transform: none !important
      }

      .pvx-frame {
        position: static;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 60vh !important;
        transform: none !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-bottom: 0px !important;
      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
    }

    .new-afn-quote {
      padding-top: 72px !important;
    }

    .afn-quote {
      position: relative;
      padding: 0px;
      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: 0px 0px 38px 0px;
      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: 0px;
      min-height: 100vh;
      display: flex;
      align-items: center
    }

    .afn-cta>.wrap {
      width: 100%
    }

    .afn-cta h2,
    .afn-cta h3 {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      letter-spacing: -.02em;
      font-size: clamp(28px, 5vw, 48px);
      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: radial-gradient(circle at center,
          rgba(255, 255, 255, .12) 0%,
          rgba(255, 255, 255, .05) 35%,
          transparent 75%);
      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 (fade + rise from below, same feel as the
   site's scroll-triggered .reveal sections, just replayed once the loader clears) */
    .afn-cta-eyebrow {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
    }

    .afn-cta-h2 .ln {
      display: block
    }

    .afn-cta-h2 .ln i {
      display: block;
      font-style: normal;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
    }

    .afn-cta-sub {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      line-height: 1.65;
      color: rgba(255, 255, 255, .82);
      max-width: 1080px;
      margin: 22px 0 0
    }

    /* note: prefixed with .afn-cta so this beats .afn-magnet's own transition shorthand below on
   specificity - both are single-class rules otherwise, and .afn-magnet comes later in source
   order, so without this it silently drops "opacity" from the button's transitioned properties
   and the button used to snap to visible instantly instead of fading in on its delay */
    .afn-cta .afn-cta-btn {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .18s ease, background .2s, color .2s, box-shadow .3s;
      margin-top: 34px
    }

    .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 - banner is revealed first (loader fades away), THEN after a short
   pause the text fades/rises in from below, heading first, subheading second, CTA last */
    .afn-cta.in .afn-cta-eyebrow {
      opacity: .6;
      transform: none;
      transition-delay: .12s
    }

    .afn-cta.in .afn-cta-h2 .ln:nth-child(1) i {
      opacity: 1;
      transform: none;
      transition-delay: .26s
    }

    .afn-cta.in .afn-cta-h2 .ln:nth-child(2) i {
      opacity: 1;
      transform: none;
      transition-delay: .38s
    }

    .afn-cta.in .afn-cta-sub {
      opacity: 1;
      transform: none;
      transition-delay: .54s
    }

    .afn-cta.in .afn-cta-btn {
      opacity: 1;
      transform: none;
      transition-delay: .7s
    }

    .afn-cta.in .afn-cta-word .shine {
      animation: afnShine 1.1s ease 1.3s 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,
      .afn-cta-btn {
        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
    }

    @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;
      padding: 20px 0px 60px 0px
    }

    .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: 100%;
      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;
      padding: 65px 0px 10px;
    }

    .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);
      background: #fff;
    }

    /* 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;
      padding-bottom: 20vh
    }

    .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, #1e2158, #1e2158);
      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: #fff;
      background: #00052c;
      border-color: #00052c
    }

    @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-content {
        padding-bottom: 0
      }

      .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(27, 43, 75, 0.42)
    }

    .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(120% 120% at 50% 0%, #0006ab 0%, #000000 42%, #032b81 100%), transparent 50%);
    }

    .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: #5DBB64;
      margin: 0;
    }

    .ltk-eyebrow::before {
      display: none;
      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: #5fd0c9
    }

    .bp-eyebrow::before {
      content: "";
      width: 26px;
      height: 1px;
      background: #5fd0c9;
      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: #5fd0c9
    }

    .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: #5fd0c9;
      transform: translateY(-2px)
    }

    .bp-btn-ghost {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .28)
    }

    .bp-btn-ghost:hover {
      border-color: #5fd0c9;
      color: #5fd0c9
    }

    /* 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: #5fd0c9;
      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: #5fd0c9;
      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: #5fd0c9
    }

    .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: #5fd0c9;
      font-weight: 600
    }

    .ja-facts svg {
      width: 15px;
      height: 15px;
      stroke: #5fd0c9;
      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: 1400px;
      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 */
    .sblog-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 36px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 0
    }

    .sblog-tab {
      font-family: 'Inter', sans-serif;
      font-weight: 100;
      font-size: 14px;
      color: #001846;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 10px 14px;
      cursor: pointer;
      transition: .2s;
      margin-bottom: -1px
    }

    .sblog-tab:hover {
      color: var(--navy)
    }

    .sblog-tab.active {
      color: var(--navy);
      border-bottom-color: var(--teal)
    }

    /* 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 */
    .sblog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px
    }

    .sblog-card {
      position: relative;
      height: 400px;
      overflow: hidden;
      background: var(--navy);
      box-shadow: 0 22px 50px -30px rgba(0, 24, 70, .45);
      cursor: pointer;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .3s
    }

    .sblog-card.sblog-visible {
      opacity: 1;
      transform: none
    }

    .sblog-card:hover {
      box-shadow: 0 34px 70px -30px rgba(0, 24, 70, .6)
    }

    .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: #7fe9e3
    }

    .sblog-front .sblog-card-h {
      color: #fff;
      font-weight: 600;
      font-size: 17px
    }

    .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, rgba(3, 15, 77, .97) 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-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)
    }

    .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
    }

    .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: #7fe9e3
    }

    .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: #5fd0c9
    }

    .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 Details page ===== */
    .md2 {
      background: linear-gradient(180deg, #fff 0%, #fff 100%);
      min-height: 90vh;
      padding: 34px 0 110px
    }

    .md2-wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px
    }

    .md2-back {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: #fff;
      border: 1px solid #EFE0CC;
      border-radius: 0;
      padding: 10px 20px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: #3A2E22;
      cursor: pointer;
      transition: .2s;
      box-shadow: 0 10px 26px -18px rgba(58, 46, 34, .5)
    }

    .md2-back:hover {
      background: #3A2E22;
      color: #fff;
      transform: translateX(-3px)
    }

    .md2-back svg {
      width: 17px;
      height: 17px
    }

    .md2-badge {
      display: inline-block;
      margin: 30px 0 0;
      background: #fff;
      color: #C08552;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .09em;
      text-transform: uppercase;
      padding: 7px 16px;
      border-radius: 0;
      box-shadow: 0 8px 20px -14px rgba(58, 46, 34, .5)
    }

    .md2-title {
      font-family: 'Inter', sans-serif;
      font-weight: 100;
      font-size: clamp(30px, 4.4vw, 48px);
      line-height: 1.06;
      color: #3A2E22;
      margin: 16px 0 0;
      letter-spacing: -.01em
    }

    .md2-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 26px;
      margin: 18px 0 0
    }

    .md2-meta .mi {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14.5px;
      color: #7A6A57;
      font-weight: 600
    }

    .md2-meta .mi svg {
      width: 17px;
      height: 17px;
      color: #C08552
    }

    /* hero / gallery */
    .md2-hero {
      margin: 28px 0 0;
      border-radius: 0;
      overflow: hidden;
      background: #26344a;
      box-shadow: 0 30px 70px -40px rgba(58, 46, 34, .6);
      aspect-ratio: 16/9;
      position: relative
    }

    .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: 46px 28px 24px;
      background: linear-gradient(to top, rgba(20, 14, 8, .82), rgba(20, 14, 8, .35) 55%, transparent);
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none
    }

    .md2-hero-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px
    }

    .md2-hc {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      font-weight: 700;
      text-shadow: 0 1px 6px rgba(0, 0, 0, .5)
    }

    .md2-hc svg {
      width: 17px;
      height: 17px;
      color: #F0C089
    }

    .md2-hero-guests {
      display: flex;
      align-items: center;
      gap: 9px;
      color: rgba(255, 255, 255, .92);
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      text-shadow: 0 1px 6px rgba(0, 0, 0, .5)
    }

    .md2-hero-guests svg {
      width: 16px;
      height: 16px;
      color: #F0C089;
      flex: 0 0 auto
    }

    .md2-gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin: 14px 0 0
    }

    .md2-thumb {
      position: relative;
      border-radius: 0;
      overflow: hidden;
      aspect-ratio: 1;
      cursor: pointer;
      border: 2px solid transparent;
      transition: .25s
    }

    .md2-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s
    }

    .md2-thumb:hover img {
      transform: scale(1.08)
    }

    .md2-thumb.is-active {
      border-color: #C08552
    }

    /* body */
    .md2-content {
      font-size: 17px;
      line-height: 1.8;
      color: #5C4F40;
      margin: 34px 0 0;
      max-width: 100%
    }

    .md2-content p {
      margin: 0 0 16px
    }

    .md2-quote {
      margin: 32px 0 0;
      padding: 26px 30px;
      background: #fff;
      border-left: 4px solid #C08552;
      border-radius: 0 18px 18px 0;
      font-family: 'Inter', sans-serif;
      font-style: italic;
      font-size: 22px;
      line-height: 1.5;
      color: #3A2E22;
      box-shadow: 0 18px 44px -34px rgba(58, 46, 34, .5)
    }

    .md2-quote cite {
      display: block;
      margin-top: 14px;
      font-style: normal;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 700;
      color: #9A8B77
    }

    /* facts grid (location + guests) */
    .md2-facts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin: 34px 0 0
    }

    .md2-fact {
      background: #fff;
      border: 1px solid #EFE6D8;
      border-radius: 0;
      padding: 22px 24px
    }

    .md2-fact h4 {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #9A8B77;
      margin: 0 0 12px
    }

    .md2-fact .loc {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 16px;
      color: #3A2E22;
      font-weight: 600
    }

    .md2-fact .loc svg {
      width: 18px;
      height: 18px;
      color: #C08552
    }

    .md2-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 9px
    }

    .md2-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
    }

    .md2-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
    }

    /* related - matches the moments page Director-style cards */
    .md2-related {
      margin: 56px 0 0
    }

    .md2-related h3 {
      font-family: 'Inter', sans-serif;
      font-weight: 100;
      font-size: 28px;
      color: #3A2E22;
      margin: 0 0 22px
    }

    .md2-rel-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .md2-rel-card {
      position: relative;
      display: block;
      overflow: hidden;
      aspect-ratio: 3/4;
      cursor: pointer;
      border-radius: 0;
      background: #26344a;
      border: none;
      box-shadow: 0 24px 54px -34px rgba(0, 24, 70, .6);
      transition: box-shadow .35s
    }

    .md2-rel-card:hover {
      box-shadow: 0 30px 64px -30px rgba(0, 24, 70, .7)
    }

    .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.06)
    }

    .md2-rel-ov {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 22px;
      background: linear-gradient(to top, rgba(8, 18, 44, .92), rgba(8, 18, 44, .1) 55%, transparent)
    }

    .md2-rel-date {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #5fd0c9
    }

    .md2-rel-h {
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      font-size: 22px;
      line-height: 1.12;
      color: #fff;
      margin: 6px 0 0
    }

    .md2-rel-loc {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 300;
      line-height: 1.5;
      color: rgba(255, 255, 255, .82);
      margin: 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .5s, opacity .4s, margin .4s
    }

    .md2-rel-loc svg {
      width: 15px;
      height: 15px;
      flex: 0 0 auto
    }

    .md2-rel-card:hover .md2-rel-loc {
      max-height: 80px;
      opacity: 1;
      margin-top: 12px
    }

    .md2-rel-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
    }

    @media(max-width:760px) {
      .md2-wrap {
        padding: 0 22px
      }

      .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: #5fd0c9
    }

    .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: #5fd0c9
    }

    .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: #3A2E22;
      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: #C08552;
      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: 860px;
      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: 100%;
      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: 100%;
      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: #5fd0c9;
      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: #5fd0c9;
      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: #5fd0c9;
      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: #5fd0c9;
      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: #5fd0c9
    }

    .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: #5fd0c9;
      position: relative;
      z-index: 1
    }

    .cxr-eyebrow::before {
      content: "";
      width: 22px;
      height: 1.5px;
      background: #5fd0c9
    }

    .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: #5fd0c9;
      color: #5fd0c9
    }

    a.cxr-item:hover .cxr-t em {
      color: #5fd0c9
    }

    .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: #5fd0c9;
      border-color: #5fd0c9
    }

    .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
    }

    .cl-hero {
      position: relative;
      padding: 86px 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, 7vw, 82px);
      line-height: 1.0;
      letter-spacing: -.035em;
      color: #fff;
      margin: 0
    }

    .cl-hero h1 .accent {
      background: linear-gradient(100deg, #8fe9e3 0%, #0FB5AE 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: #7fe9e3
    }

    .wsx-hero .wsx-eyebrow::before {
      background: #7fe9e3
    }

    .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: #7fe9e3
    }

    .wsx-proc .wsx-eyebrow::before {
      background: #7fe9e3
    }

    .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), #7fe9e3);
      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: #7fe9e3
    }

    .wsx-cert .wsx-eyebrow::before {
      background: #7fe9e3
    }

    .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: #7fe9e3;
      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: #7fe9e3;
      justify-content: center
    }

    .wsx-num .wsx-eyebrow::before {
      background: #7fe9e3
    }

    .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: #7fe9e3;
      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: #7fe9e3;
      justify-content: center
    }

    .wsx-cta .wsx-eyebrow::before {
      background: #7fe9e3
    }

    .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;
    }
  

    .intro-loader {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      z-index: 99999;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      will-change: transform, opacity;
      transform-origin: center center;
      transition: transform 1.15s cubic-bezier(.16, 1, .3, 1), opacity 1s ease .05s, visibility 1.15s
    }

    .intro-loader.is-hidden {
      transform: scale(1.045);
      opacity: 0;
      visibility: hidden;
      pointer-events: none
    }

    @media(prefers-reduced-motion:reduce) {
      .intro-loader {
        transition: opacity .4s ease, visibility .4s
      }

      .intro-loader.is-hidden {
        transform: none;
        opacity: 0
      }
    }

    .intro-loader-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .intro-loader-tap {
      position: absolute;
      left: 50%;
      bottom: 8%;
      transform: translateX(-50%);
      z-index: 2;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(6px);
      border: 1.5px solid rgba(255, 255, 255, 0.6);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 14px 32px;
      border-radius: 40px;
      cursor: pointer;
      animation: introTapPulse 1.8s ease-in-out infinite
    }

    .intro-loader-tap:hover {
      background: rgba(255, 255, 255, 0.22)
    }

    @keyframes introTapPulse {

      0%,
      100% {
        transform: translateX(-50%) scale(1);
        opacity: 1
      }

      50% {
        transform: translateX(-50%) scale(1.06);
        opacity: .75
      }
    }

    body.intro-loader-active {
      overflow: hidden
    }
  

    /* ===== 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: #1e2158;
      --teal: #5DBB64;
      --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 .9s ease forwards;
      animation-delay: var(--d, 0s);
    }

    @keyframes draw {
      to {
        stroke-dashoffset: 0
      }
    }

    /* ---- popped elements (dots, hubs) ---- */
    .pop {
      opacity: 0;
      transform: scale(.4);
      transform-box: fill-box;
      transform-origin: center;
    }

    .play .pop {
      animation: pop .5s cubic-bezier(.2, .9, .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 .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: .3s;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: .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 .7s cubic-bezier(.4, 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: .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: .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: .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: .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: 4.0s;
      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: .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 .8s ease forwards;
      animation-delay: calc(var(--i) * .12s);
    }

    @keyframes hzDraw {
      to {
        stroke-dashoffset: 0;
      }
    }

    .hz-ic .hzf {
      opacity: 0;
    }

    .play .hz-ic .hzf {
      animation: hzFill .7s cubic-bezier(.4, 0, .2, 1) forwards;
      animation-delay: calc(var(--i) * .12s + .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) * .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 .3s cubic-bezier(.22, 1, .36, 1);
    }

    @media (prefers-reduced-motion:reduce) {
      .hz-ic .ln {
        stroke-dashoffset: 0 !important;
        animation: none !important;
      }

      .hz-ic .hzf {
        opacity: .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: .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(34px, 5.3vw, 56px);
      line-height: 1.08;
      letter-spacing: -.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 .25s ease, background .25s ease, color .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 .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 .55s cubic-bezier(.22, .61, .36, 1);
      outline: none;
    }

    /* on hover/focus: this card grows, siblings shrink */
    .pc-cards:hover .pc-card {
      flex-grow: .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 .7s cubic-bezier(.22, .61, .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, .90) 0%, rgba(0, 24, 70, .45) 42%, rgba(0, 24, 70, 0) 72%);
    }

    .pc-num {
      position: absolute;
      top: 20px;
      left: 22px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .9);
      font-variant-numeric: tabular-nums;
    }

    .pc-title {
      font-size: clamp(22px, 2.2vw, 28px);
      font-weight: 800;
      color: #fff;
      margin: 0;
      letter-spacing: -.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, .92);
      margin: 10px 0 0;
      max-width: 300px;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(8px);
      transition: opacity .4s ease .12s, max-height .5s ease, transform .45s ease .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: -.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 .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
    }

    .bn-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    }

    .bn-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
          rgba(0, 24, 70, .72) 0%, rgba(0, 24, 70, .25) 30%,
          rgba(0, 24, 70, .30) 60%, rgba(0, 24, 70, .88) 100%);
    }

    .bn-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0, 24, 70, .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: .9;
      letter-spacing: -.02em;
      font-variant-numeric: tabular-nums;
      flex: none;
    }

    .bn-sup {
      font-size: 13px;
      font-weight: 500;
      vertical-align: super;
      color: rgba(255, 255, 255, .7);
      margin-left: 2px;
    }

    .bn-title {
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      margin: 4px 0 0;
      line-height: 1.22;
      letter-spacing: -.01em;
    }

    .bn-desc {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .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: -.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: -.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 .25s ease, color .25s ease, border-color .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 .7s cubic-bezier(.22, .61, .36, 1);
    }

    .sol-col-feature::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
          rgba(0, 24, 70, .92) 0%, rgba(0, 24, 70, .40) 42%, rgba(0, 24, 70, .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: -.01em;
      color: #fff;
      margin: 0 0 12px;
    }

    .sol-feat-desc {
      font-size: 14px;
      line-height: 1.65;
      color: rgba(255, 255, 255, .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 .8s cubic-bezier(.22, .61, .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: -.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, .12);
    }

    .imp-stat:last-child {
      border-bottom: 1px solid rgba(0, 24, 70, .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: .95;
      letter-spacing: -.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, .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: .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: .08em;
      text-transform: uppercase;
      text-decoration: none;
      color: #fff;
      background: var(--navy);
      padding: 16px 30px;
      border-radius: 999px;
      transition: background .25s ease, transform .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, .10);
    }

    /* 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 .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: -.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: .08em;
      text-transform: uppercase;
      color: #fff;
      background: var(--navy);
      text-decoration: none;
      padding: 15px 26px;
      border-radius: 14px;
      transition: background .25s ease, transform .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 .2s ease, gap .2s ease;
    }

    .hero-social a:hover {
      color: var(--teal-dark);
    }

    .hero-social svg {
      width: 14px;
      height: 14px;
      transition: transform .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, .14);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, .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: -.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, .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: 0px 24px 72px 24px;
      background: none;
    }

    .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: -.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 .35s cubic-bezier(.22, .61, .36, 1), opacity .6s cubic-bezier(.22, 1, .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 - globe: dotted sphere + orbit ring + location pins */
    .ft-globe {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .ft-globe-sphere,
    .ft-globe-orbit {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .ft-pin {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--navy);
      opacity: .5;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 2px #fff;
    }

    .ft-pin-active {
      background: var(--teal);
      opacity: 1;
    }

    /* card2 / card4 - radial hub-and-spoke diagram */
    .ft-hub {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
    }

    /* On narrow screens the card is short, so the full-width square hub (orbit
       diagram) overflows and overlaps the card text — cap its size so it sits
       neatly below the copy. */
    @media (max-width: 760px) {
      .mcard.ftm .ft-hub {
        width: 150px;
        height: 150px;
        margin: 4px auto 0;
      }
    }

    .ft-hub-ring,
    .ft-hub-arrows {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .ft-hub-ring circle {
      fill: none;
      stroke: var(--navy);
      stroke-opacity: .22;
      stroke-width: 1.4;
      stroke-dasharray: 2 6;
    }

    .ft-hub-arrow {
      fill: none;
      stroke: var(--teal);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-dasharray: 5 9;
    }

    .ft-hub-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 36%;
      height: 36%;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 18px -6px rgba(0, 24, 70, .25);
    }

    .ft-hub-center svg {
      width: 40%;
      height: 40%;
    }

    .ft-hub-center-cta {
      flex-direction: column;
      gap: 5px;
    }

    .ft-hub-center-cta svg {
      width: 20px;
      height: 20px;
      flex: none;
    }

    .ft-hub-pill {
      background: var(--teal);
      color: #fff;
      font-size: 8px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 999px;
      white-space: nowrap;
      box-shadow: 0 4px 10px rgba(15, 181, 174, .35);
    }

    .ft-hub-node {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .ft-hub-node.n {
      top: 9%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .ft-hub-node.s {
      top: 91%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .ft-hub-node.e {
      top: 50%;
      left: 91%;
      transform: translate(-50%, -50%);
    }

    .ft-hub-node.w {
      top: 50%;
      left: 9%;
      transform: translate(-50%, -50%);
    }

    .ft-hub-ic {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      border: 1.4px solid var(--navy);
      flex: none;
      box-shadow: 0 4px 10px -4px rgba(0, 24, 70, .3);
    }

    .ft-hub-ic svg {
      width: 12px;
      height: 12px;
    }

    .ft-hub-num {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      font-size: 7px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ft-hub-node.done .ft-hub-ic {
      background: var(--teal);
      border-color: var(--teal);
    }

    .ft-hub-label {
      font-size: 7px;
      line-height: 1.2;
      font-weight: 600;
      text-align: center;
      color: var(--muted);
      max-width: 52px;
    }

    /* 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: -.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 {
      position: relative;
      overflow: hidden;
      padding-top: clamp(56px, 7vw, 104px);
    }

    .ft-mile .ft-wrap {
      position: relative;
      z-index: 1;
      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, .14);
    }

    .mcard.ftm .mcard-fig {
      opacity: .9;
      right: 8%;
      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:hover .mcard-fig {
      opacity: 1;
    }

    .mcard.ftm .mcard-body h4 {
      font-size: clamp(19px, 2vw, 23px);
    }

    /* ===== graphic animations - every card keeps something moving ===== */
    /* card 1 - globe: sphere drifts slowly, active pins pulse */
    .mcard.ftm.m-peach .ft-globe-sphere {
      animation: mSpin 50s linear infinite;
      transform-origin: 50% 50%;
    }

    .mcard.ftm.m-peach .ft-globe-orbit {
      animation: mSpinR 26s linear infinite;
      transform-origin: 50% 50%;
    }

    .mcard.ftm.m-peach .ft-pin-active {
      animation: ftmPinPulse 2.4s ease-in-out infinite;
    }

    .mcard.ftm.m-peach .ft-pin-active:nth-of-type(3) {
      animation-delay: .8s;
    }

    @keyframes ftmPinPulse {

      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        transform: translate(-50%, -50%) scale(1.5);
      }
    }

    /* card 2, 3 & 4 - hub: ring rotates, arrows flow around it, nodes bob gently */
    .mcard.ftm.m-lilac .ft-hub-ring,
    .mcard.ftm.m-green .ft-hub-ring,
    .mcard.ftm.m-pink .ft-hub-ring {
      animation: mSpin 32s linear infinite;
      transform-origin: 50% 50%;
    }

    .mcard.ftm.m-lilac .ft-hub-arrow,
    .mcard.ftm.m-green .ft-hub-arrow,
    .mcard.ftm.m-pink .ft-hub-arrow {
      animation: ftmFlowDash 2.6s linear infinite;
    }

    .mcard.ftm.m-lilac .ft-hub-node,
    .mcard.ftm.m-green .ft-hub-node,
    .mcard.ftm.m-pink .ft-hub-node {
      animation: ftmFloat 4.5s ease-in-out infinite;
    }

    .mcard.ftm .ft-hub-node.e {
      animation-delay: .5s;
    }

    .mcard.ftm .ft-hub-node.s {
      animation-delay: 1s;
    }

    .mcard.ftm .ft-hub-node.w {
      animation-delay: 1.5s;
    }

    .mcard.ftm.m-pink .ft-hub-pill {
      animation: ftmPillPulse 2.6s ease-in-out infinite;
    }

    @keyframes ftmFloat {

      0%,
      100% {
        transform: translate(-50%, -50%) translateY(0);
      }

      50% {
        transform: translate(-50%, -50%) translateY(-5px);
      }
    }

    @keyframes ftmFlowDash {
      to {
        stroke-dashoffset: -28;
      }
    }

    @keyframes ftmPillPulse {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(15, 181, 174, .35);
      }

      50% {
        transform: scale(1.06);
        box-shadow: 0 6px 16px rgba(15, 181, 174, .5);
      }
    }

    .mcard.ftm.m-green .ft-hub-node.done .ft-hub-ic {
      animation: ftmPillPulse 2.6s ease-in-out infinite;
    }

    /* 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 {
        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;
      }

      /* 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 .ft-globe-sphere,
      .mcard.ftm .ft-globe-orbit,
      .mcard.ftm .ft-pin-active,
      .mcard.ftm .ft-hub-ring,
      .mcard.ftm .ft-hub-arrow,
      .mcard.ftm .ft-hub-node,
      .mcard.ftm .ft-hub-pill {
        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 .2s ease, background .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 .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: -.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: -.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 .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 .25s ease, transform .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: -.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: .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, .18);
      stroke-width: 1;
      stroke-dasharray: 2 4;
    }

    /* moving marker (arrow) that blinks light/dark teal */
    .tl-marker-ring {
      fill: rgba(15, 181, 174, .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);
      }
    }
  

    /* ===== WHY SAVEER — About-styled redesign (wsv2) ===== */
    #view-whysaveer {
      background: #fff;
    }

    .wsv2 .ab-hero-grid {
      grid-template-rows: auto;
    }

    .wsv2 .ab-hg-tall {
      height: 100%;
      min-height: 476px;
    }

    /* section heads (About look, usable outside .ab) */
    .wsv2-lead {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.6;
      color: var(--muted);
      max-width: 720px;
      margin: 16px auto 0;
      text-align: center;
    }

    .wsv2-tag {
      display: inline-block;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .04em;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .wsv2-h2 {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: clamp(26px, 3.2vw, 40px);
      line-height: 1.1;
      letter-spacing: -.02em;
      color: #1B1464;
      margin: 0;
    }

    /* ---- STATS: single full-width row with icons ---- */
    .wsv2-stats {
      margin-top: 8px;
      padding: clamp(42px, 5vw, 60px) 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .wsv2-stats-in {
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 60px);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
    }

    .wsv2-stat {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 4px clamp(12px, 1.5vw, 26px);
      border-right: 1px solid var(--line);
    }

    .wsv2-stat:last-child {
      border-right: none;
    }

    .wsv2-stat-ic {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 181, 174, .10);
      color: var(--teal-dark);
      transition: background .4s, color .4s, transform .4s;
    }

    .wsv2-stat:hover .wsv2-stat-ic {
      background: var(--teal);
      color: #fff;
      transform: translateY(-2px);
    }

    .wsv2-stat-ic svg {
      width: 23px;
      height: 23px;
    }

    .wsv2-stat-txt {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .wsv2-stat .n {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: clamp(22px, 2vw, 30px);
      color: #1B1464;
      letter-spacing: -.02em;
      line-height: 1;
    }

    .wsv2-stat .n .wsx-num-v {
      color: #1B1464 !important;
      font-size: inherit !important;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .wsv2-stat .l {
      margin-top: 6px;
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 500;
      line-height: 1.35;
    }

    /* ---- REASONS: full-width single row of 4 cards ---- */
    .wsv2-reasons {
      padding: 96px 0;
    }

    .wsv2-reasons-in {
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 60px);
    }

    .wsv2-rhead {
      text-align: center;
      max-width: 760px;
      margin: 0 auto clamp(40px, 5vw, 54px);
    }

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

    .wsv2-card {
      position: relative;
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid var(--line);
      padding: clamp(24px, 2.1vw, 32px);
      overflow: hidden;
      transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s, border-color .45s;
    }

    .wsv2-card::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 3px;
      width: 0;
      background: var(--teal);
      transition: width .5s cubic-bezier(.22, 1, .36, 1);
    }

    .wsv2-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 30px 60px -34px rgba(27, 20, 100, .32);
      border-color: transparent;
    }

    .wsv2-card:hover::after {
      width: 100%;
    }

    .wsv2-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .wsv2-ic {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 181, 174, .10);
      color: var(--teal-dark);
      flex-shrink: 0;
      transition: background .4s, color .4s;
    }

    .wsv2-card:hover .wsv2-ic {
      background: var(--teal);
      color: #fff;
    }

    .wsv2-ic svg {
      width: 25px;
      height: 25px;
    }

    .wsv2-card .num {
      font-family: 'Inter', sans-serif;
      font-weight: 200;
      font-size: clamp(40px, 4vw, 54px);
      color: #e6e9ee;
      letter-spacing: -.03em;
      line-height: .9;
    }

    .wsv2-card h3 {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: clamp(18px, 1.5vw, 21px);
      color: #1B1464;
      letter-spacing: -.01em;
      margin: 22px 0 0;
    }

    .wsv2-card p {
      margin: 11px 0 0;
      font-size: 14.5px;
      line-height: 1.62;
      color: var(--muted);
    }

    .wsv2-card ul {
      list-style: none;
      margin: 16px 0 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .wsv2-card li {
      position: relative;
      padding-left: 24px;
      font-size: 13.5px;
      color: #1B1464;
      font-weight: 500;
    }

    .wsv2-card li::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 4px;
      width: 7px;
      height: 11px;
      border-right: 2px solid var(--teal);
      border-bottom: 2px solid var(--teal);
      transform: rotate(42deg);
    }

    /* ===== REASONS as connected half-moon process loop ===== */
    .rp {
      position: relative;
      max-width: 1500px;
      margin: 0 auto;
    }

    .rp-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(30px, 3vw, 54px);
      align-items: stretch;
    }

    .rp-card {
      position: relative;
      background: #edfafa87;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 48px 22px 26px;
      transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s, border-color .5s;
    }

    .rp-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 34px 64px -38px rgba(27, 20, 100, .34);
      border-color: transparent;
    }

    /* half-moon header */
    .rp-moon {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 96px;
      height: 48px;
      border-radius: 96px 96px 0 0;
      background: linear-gradient(180deg, #eafaf9, #f4fbfb);
      border: 1px solid rgba(15, 181, 174, .28);
      border-bottom: none;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 9px;
      padding-bottom: 9px;
      overflow: hidden;
      transition: background .5s, border-color .5s;
    }

    .rp-moon::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--teal);
      transform: translateY(101%);
      transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    }

    .rp-card:hover .rp-moon {
      border-color: var(--teal);
    }

    .rp-card:hover .rp-moon::before {
      transform: translateY(0);
    }

    .rp-moon-n {
      position: relative;
      z-index: 1;
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 22px;
      color: var(--navy);
      letter-spacing: -.02em;
      transition: color .45s;
    }

    .rp-moon-ic {
      position: relative;
      z-index: 1;
      color: var(--teal-dark);
      display: flex;
      transition: color .45s, transform .45s;
    }

    .rp-moon-ic svg {
      width: 22px;
      height: 22px;
    }

    .rp-card:hover .rp-moon-n {
      color: #fff;
    }

    .rp-card:hover .rp-moon-ic {
      color: #fff;
      transform: rotate(-6deg) scale(1.08);
    }

    .rp-card h3 {
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      font-size: clamp(15px, 1.1vw, 17px);
      color: var(--navy);
      letter-spacing: -.01em;
      margin: 6px 0 0;
      text-align: center;
    }

    .rp-card p {
      margin: 9px 0 0;
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--muted);
      text-align: center;
    }

    .rp-card ul {
      list-style: none;
      margin: 16px 0 0;
      padding: 0;
      display: grid;
      gap: 9px;
    }

    .rp-card li {
      position: relative;
      padding-left: 20px;
      font-size: 11.5px;
      color: var(--navy);
      font-weight: 500;
    }

    .rp-card li::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 3px;
      width: 7px;
      height: 11px;
      border-right: 2px solid var(--teal);
      border-bottom: 2px solid var(--teal);
      transform: rotate(42deg);
    }

    /* connector overlay */
    .rp-links {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .rp-links .flow {
      fill: none;
      stroke: var(--teal);
      stroke-width: 1.2;
      stroke-dasharray: 6 12;
      stroke-linecap: round;
      opacity: .6;
      animation: rpFlow 5.5s linear infinite;
    }

    .rp-links .base {
      fill: none;
      stroke: rgba(15, 181, 174, .16);
      stroke-width: 1.2;
    }

    .rp-dot {
      fill: var(--teal);
    }

    @keyframes rpFlow {
      to {
        stroke-dashoffset: -40;
      }
    }

    @media(max-width:1000px) {
      .rp-grid {
        grid-template-columns: 1fr 1fr;
        gap: 52px;
      }

      .rp-links {
        display: none;
      }
    }

    @media(max-width:560px) {
      .rp-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .rp-links .flow {
        animation: none;
      }

      .rp-moon::before,
      .rp-card {
        transition: none;
      }
    }

    /* ---- CTA (dark card) ---- */
    .wsv2-cta {
      max-width: 1600px;
      margin: 76px auto 84px;
      padding: 0 clamp(24px, 4vw, 60px);
    }

    .wsv2-cta-in {
      position: relative;
      overflow: hidden;
      text-align: center;
      color: #fff;
      padding: clamp(64px, 8vw, 96px) 30px;
      background: radial-gradient(120% 150% at 12% 0%, #06205A 0%, #001846 55%, #000d2e 100%);
      border-top: 4px solid var(--teal);
    }

    .wsv2-cta-in::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .12) 1px, transparent 1.4px);
      background-size: 26px 26px;
      opacity: .4;
    }

    .wsv2-cta .glow {
      position: absolute;
      width: 460px;
      height: 460px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(15, 181, 174, .34), transparent 70%);
      filter: blur(12px);
      top: -150px;
      right: -110px;
    }

    .wsv2-cta-body {
      position: relative;
      z-index: 1;
      max-width: 660px;
      margin: 0 auto;
    }

    .wsv2-cta h2 {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: clamp(28px, 3.4vw, 44px);
      letter-spacing: -.02em;
      margin: 0;
      color: #fff;
    }

    .wsv2-cta h2 em {
      font-style: normal;
      color: var(--teal);
    }

    .wsv2-cta p {
      color: rgba(255, 255, 255, .76);
      max-width: 520px;
      margin: 16px auto 28px;
      line-height: 1.7;
      font-size: 15px;
    }

    .wsv2-cta a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--teal);
      color: #001846;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 15px;
      padding: 15px 32px;
      text-decoration: none;
      transition: transform .25s, box-shadow .25s;
    }

    .wsv2-cta a:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 34px rgba(15, 181, 174, .35);
    }

    @media(max-width:1100px) {
      .wsv2-cards {
        grid-template-columns: 1fr 1fr;
      }

      .wsv2-stats-in {
        grid-template-columns: repeat(3, 1fr);
        gap: 26px 0;
      }

      .wsv2-stat {
        border-right: none;
      }

      .wsv2 .ab-hg-tall {
        min-height: 0;
      }
    }

    @media(max-width:600px) {
      .wsv2-cards {
        grid-template-columns: 1fr;
      }

      .wsv2-stats-in {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 0;
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .wsv2-card,
      .wsv2-stat-ic,
      .wsv2-ic {
        transition: none;
      }
    }

    /* ---- Milestones (animated) ---- */
    .wsv2-mile-sec {
      background: #fff;
      padding: clamp(64px, 7vw, 96px) 0;
    }

    .wsv2-mile-in {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 60px);
    }

    .wsv2-mile-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto clamp(40px, 5vw, 56px);
    }

    .wsv2-mile-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 2vw, 30px);
    }

    .mcard {
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      border: 1px solid rgba(0, 24, 70, .12);
      min-height: 300px;
      padding: clamp(30px, 3vw, 44px);
      display: flex;
      flex-direction: column;
      isolation: isolate;
      transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s;
    }

    .mcard:hover {
      transform: translateY(-6px);
      box-shadow: 0 40px 70px -40px rgba(27, 20, 100, .30);
    }

    .mcard-fig {
      position: absolute;
      z-index: 0;
      right: -2%;
      top: 50%;
      transform: translateY(-50%);
      width: min(240px, 42%);
      aspect-ratio: 1;
      pointer-events: none;
      opacity: .6;
      transition: opacity .55s, transform .55s cubic-bezier(.22, 1, .36, 1);
    }

    /* focus glow behind icon */
    .mcard-glow {
      position: absolute;
      z-index: 0;
      right: 3%;
      top: 50%;
      transform: translate(0, -50%) scale(.9);
      width: min(220px, 40%);
      aspect-ratio: 1;
      border-radius: 50%;
      pointer-events: none;
      opacity: .45;
      filter: blur(8px);
      animation: mGlowPulse 9s ease-in-out infinite;
      transition: opacity .7s, transform .7s cubic-bezier(.22, 1, .36, 1);
    }

    .mcard-glow::after {
      content: "";
      position: absolute;
      inset: 30%;
      border-radius: 50%;
      border: 1px solid currentColor;
      opacity: .22;
    }

    .mcard:hover .mcard-glow {
      opacity: .7;
      transform: translate(0, -50%) scale(1.08);
      filter: blur(6px);
    }

    .m-peach .mcard-glow {
      background: radial-gradient(circle at 50% 46%, rgba(233, 160, 106, .5) 0%, rgba(233, 160, 106, .2) 40%, rgba(233, 160, 106, 0) 70%);
      color: #c67b4a;
    }

    .m-lilac .mcard-glow {
      background: radial-gradient(circle at 50% 46%, rgba(111, 95, 176, .46) 0%, rgba(111, 95, 176, .18) 40%, rgba(111, 95, 176, 0) 70%);
      color: #6f5fb0;
    }

    .m-green .mcard-glow {
      background: radial-gradient(circle at 50% 46%, rgba(79, 138, 82, .46) 0%, rgba(79, 138, 82, .18) 40%, rgba(79, 138, 82, 0) 70%);
      color: #4f8a52;
    }

    .m-pink .mcard-glow {
      background: radial-gradient(circle at 50% 46%, rgba(181, 88, 168, .46) 0%, rgba(181, 88, 168, .18) 40%, rgba(181, 88, 168, 0) 70%);
      color: #b558a8;
    }

    /* per-icon relevant animation */
    .mfig-leaf {
      transform-origin: 60px 72px;
      animation: mLeaf 4.5s ease-in-out infinite;
    }

    .mfig-gear-ring {
      transform-origin: 60px 60px;
      animation: mSpin 14s linear infinite;
    }

    .mcard:hover .mfig-gear-core {
      transform-origin: 60px 60px;
      animation: mSpinR 6s linear infinite;
    }

    .mfig-sway {
      transform-origin: 60px 96px;
      animation: mSway 4s ease-in-out infinite;
    }

    .mfig-bubble {
      animation: mBubble 3s ease-in-out infinite;
    }

    .mfig-bubble.b2 {
      animation-delay: 1.2s;
    }

    @keyframes mLeaf {

      0%,
      100% {
        transform: scaleY(.9) translateY(2px);
      }

      50% {
        transform: scaleY(1.06) translateY(-1px);
      }
    }

    @keyframes mSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes mSpinR {
      to {
        transform: rotate(-360deg);
      }
    }

    @keyframes mSway {

      0%,
      100% {
        transform: rotate(-3deg);
      }

      50% {
        transform: rotate(3deg);
      }
    }

    @keyframes mBubble {
      0% {
        transform: translateY(4px);
        opacity: 0;
      }

      30% {
        opacity: 1;
      }

      100% {
        transform: translateY(-14px);
        opacity: 0;
      }
    }

    @keyframes mGlowPulse {
      0% {
        opacity: .32;
        transform: translate(-3px, -52%) scale(.86);
      }

      50% {
        opacity: .55;
        transform: translate(3px, -48%) scale(1.0);
      }

      100% {
        opacity: .32;
        transform: translate(-3px, -52%) scale(.86);
      }
    }

    .mcard:hover .mcard-fig {
      opacity: .85;
      transform: translateY(-50%) scale(1.05);
    }

    .mcard-fig svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .mcard-fig svg [stroke] {
      vector-effect: non-scaling-stroke;
    }

    .mcard-body {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      height: 100%;
      max-width: 56%;
    }

    .mcard-label {
      display: inline-flex;
      align-self: flex-start;
      padding: 8px 16px;
      background: #fff;
      border-radius: 11px;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .14em;
      box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .25);
    }

    .mcard h4 {
      font-family: 'Sora', sans-serif;
      font-weight: 500;
      font-size: clamp(20px, 2.2vw, 25px);
      line-height: 1.14;
      color: #101014;
      letter-spacing: -.01em;
      margin: clamp(30px, 3vw, 48px) 0 0;
    }

    .mcard p {
      margin: 14px 0 0;
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      line-height: 1.6;
      color: #5b6472;
    }

    .mcard-more {
      margin-top: auto;
      padding-top: 22px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      align-self: flex-start;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 14.5px;
      color: #101014;
      text-decoration: none;
    }

    .mcard-more span {
      border-bottom: 1.5px solid #101014;
      padding-bottom: 2px;
    }

    .mcard-more svg {
      width: 17px;
      height: 17px;
      transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    }

    .mcard:hover .mcard-more svg {
      transform: translateX(6px);
    }

    /* tints */
    .m-peach .mcard-fig {
      color: #c67b4a;
    }

    .m-lilac .mcard-fig {
      color: #6f5fb0;
    }

    .m-green .mcard-fig {
      color: #4f8a52;
    }

    .m-pink .mcard-fig {
      color: #b558a8;
    }

    .mcard.m-peach {
      background: #fffcf8;
    }

    .m-peach .mcard-label {
      color: #c67b4a;
    }

    .mcard.m-lilac {
      background: #fcfbff;
    }

    .m-lilac .mcard-label {
      color: #6f5fb0;
    }

    .mcard.m-green {
      background: #f9fff7;
    }

    .m-green .mcard-label {
      color: #4f8a52;
    }

    .mcard.m-pink {
      background: #fffbfe;
    }

    .m-pink .mcard-label {
      color: #b558a8;
    }

    .mcard.wsx-reveal {
      transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .55s;
    }

    @media(max-width:820px) {
      .wsv2-mile-grid {
        grid-template-columns: 1fr;
      }

      .mcard-body {
        max-width: 64%;
      }
    }

    @media(max-width:520px) {
      .mcard-body {
        max-width: 100%;
      }

      .mcard-fig {
        opacity: .5;
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .mcard,
      .mcard-more svg {
        transition: none;
      }

      .mfig-leaf,
      .mfig-gear-ring,
      .mfig-gear-core,
      .mfig-sway,
      .mfig-bubble,
      .mcard-glow {
        animation: none;
      }

      .mcard-glow {
        transition: none;
      }
    }
  

      .imp-hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:8px}
      .imp-hero-cta-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:inherit}
      .imp-hero-cta-ghost:hover{border-color:currentColor}
    

    /* ============ 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, .16), transparent 65%),
        radial-gradient(40% 50% at 100% 100%, rgba(242, 201, 76, .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 .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .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, .6) 0%, rgba(0, 24, 70, .3) 45%, rgba(0, 24, 70, .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, .3) 0%, rgba(0, 24, 70, .05) 45%, rgba(0, 24, 70, .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, .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, .86);
      text-shadow: 0 3px 14px rgba(0, 0, 0, .32);
    }

    .sf-contact {
      margin: 2px 0 0;
      font-size: 13.5px;
      line-height: 1.9;
      color: rgba(255, 255, 255, .86);
    }

    .sf-contact a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, .95);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, .38);
      transition: color .2s, border-color .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 .2s, transform .2s;
    }

    .sf-cta:hover {
      background: #eff9f4;
      transform: translateY(-2px);
    }

    .sf-cta svg {
      width: 13px;
      height: 13px;
      transition: transform .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: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .72);
      text-shadow: 0 3px 14px rgba(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, .9);
      text-decoration: none;
      opacity: .88;
      text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
      transition: opacity .2s, color .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 .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(.6);
      transition: opacity .25s ease, transform .25s ease, width .25s ease, margin-right .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, .22);
    }

    .sf-bottom p {
      margin: 0;
      font-size: 13px;
      color: rgba(255, 255, 255, .82);
      text-shadow: 0 3px 14px rgba(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, .18);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      transition: background .2s;
    }

    .sf-social a:hover {
      background: rgba(255, 255, 255, .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;
      }
    }