:root {
         --black: #001846;
         --ink: #0B1220;
         --paper: #ffffff;
         --offwhite: #F7F8FA;
         --muted: #5B6472;
         --line: #E6E8EC;
         --radius: 0px;
         --navy: #001846;
         --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;

       }

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

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

       h1,
       h2 {
         color: #1B1464
       }

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

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

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

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

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

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

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

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

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


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

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

       .navlinks a:hover {
         color: #fff
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

       @media(min-width:821px) {

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

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

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


       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

       .avatars {
         display: flex
       }

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

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

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

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

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

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

       .hero-banner {
         position: relative;
         border-radius: 0;
         overflow: hidden;
         min-height: 660px;
         margin: 14px 0 50px;
         background: linear-gradient(135deg, #0a1f4d 0%, #103a6b 45%, #5DBB64 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: #5DBB64
       }

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

       .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, #5DBB64);
         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: #5DBB64;
         color: #5DBB64;
         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: #5DBB64
       }

       .a-indigo::after {
         background: #5DBB64
       }

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

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

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

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

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

       .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, #5DBB64)
       }

       #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, #5DBB64)
       }

       .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, #5DBB64)
       }

       .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, #5DBB64)
       }

       .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, #5DBB64)
       }

       .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: #5DBB64;
         --teal-dark: #5DBB64;
       }

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

       #view-cases {
         scroll-behavior: smooth
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

       #view-cases

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

       #view-cases .selectwrap {
         position: relative
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

       #view-cases .selwrap {
         position: relative
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

         #view-cases .scrim {
           display: none;
           position: fixed;
           inset: 0;
           background: rgba(0, 0, 0, .35);
           z-index: 55
         }

         #view-cases .scrim.show {
           display: block
         }
       }

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

         #view-cases .cs-media {
           min-height: 160px
         }

         #view-cases .cs-search {
           margin-left: 0;
           flex-basis: 100%;
           order: 5
         }
       }

       @media(prefers-reduced-motion:reduce) {
         #view-cases .cs-card {
           animation: none;
           opacity: 1;
           transform: none
         }

         #view-cases {
           transition: none !important
         }
       }

       /* ===== scoped: connections ===== */
       #view-connections {
         --black: #0d0d0d;
         --ink: #1a1a1a;
         --paper: #ffffff;
         --offwhite: #f4f4f2;
         --muted: #6b6b6b;
         --line: #e6e6e3;
         --navy: #002671;
         --green: #1f9d57;
         --radius: 18px;
       }

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

       #view-connections {
         scroll-behavior: smooth
       }

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

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

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

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

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

       #view-connections

       /* NAV */
       header.site {
         border-bottom: 1.5px solid var(--line)
       }

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

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

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

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

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

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

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

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

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

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

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

       #view-connections

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

       #view-connections .cn-banner-inner {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 24px;
         flex-wrap: wrap;
         padding: 34px 0
       }

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

       #view-connections .cn-banner p {
         color: var(--muted);
         font-size: 15px;
         margin-top: 0px;
         max-width: 540px
       }

       #view-connections .cn-search {
         position: relative;
         flex: 0 1 340px;
         min-width: 240px
       }

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

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

       #view-connections .cn-search input::placeholder {
         color: #a3a3a0
       }

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

       #view-connections

       /* TOOLBAR */
       .cn-toolbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 14px;
         flex-wrap: wrap;
         padding: 26px 0 6px
       }

       #view-connections .cn-tabs {
         display: flex;
         gap: 4px
       }

       #view-connections .cn-tab {
         background: none;
         border: none;
         cursor: pointer;
         font-size: 14px;
         font-weight: 600;
         color: var(--muted);
         padding: 9px 18px;
         border-radius: 0;
         transition: .18s
       }

       #view-connections .cn-tab:hover {
         color: var(--ink)
       }

       #view-connections .cn-tab.active {
         background: var(--black);
         color: #fff
       }

       #view-connections .cn-count {
         font-size: 14px;
         color: var(--muted)
       }

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

       #view-connections

       /* GRID */
       .cn-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
         padding: 4px 0 40px
       }

       /* connections layout */
       #view-connections .cn-layout {
         display: grid;
         grid-template-columns: 268px 1fr;
         gap: 34px;
         align-items: start;
         padding: 24px 0 0
       }

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

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

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

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

       #view-connections .cn-clear:hover {
         color: var(--ink)
       }

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

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

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

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

       #view-connections .cn-chip button svg {
         width: 12px;
         height: 12px;
         stroke: currentColor;
         stroke-width: 2.4;
         fill: none
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

       #view-connections .selwrap {
         position: relative
       }

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

       #view-connections .side-select:focus {
         outline: none;
         border-color: var(--navy);
         box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
       }

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

       #view-connections .cn-resbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 14px;
         flex-wrap: wrap;
         margin-bottom: 18px;
         padding-top: 8px
       }

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

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

       #view-connections .cn-count {
         margin-left: auto;
         text-align: right
       }

       #view-connections .cn-scrim {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .35);
         z-index: 55
       }

       #view-connections .cn-scrim.show {
         display: block
       }

       #view-connections .mc {
         border: 1.5px solid var(--line);
         border-radius: var(--radius);
         background: #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s, border-color .25s;
         opacity: 0;
         transform: translateY(14px);
         animation: cardIn .5s forwards
       }

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

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

       #view-connections .mc-cover {
         height: 72px;
         background: linear-gradient(120deg, var(--navy), #3a52a8)
       }

       #view-connections .mc-body {
         padding: 0 22px 22px;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         flex: 1
       }

       #view-connections .mc-av {
         width: 104px;
         height: 104px;
         border-radius: 0;
         border: 4px solid #fff;
         margin-top: -52px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 32px;
         color: #fff;
         box-shadow: 0 4px 14px -3px rgba(0, 0, 0, .25);
         overflow: hidden;
         position: relative
       }

       #view-connections .mc-av img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 50%
       }

       #view-connections .mc-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 17px;
         color: var(--ink);
         margin-top: 12px
       }

       #view-connections .mc-role {
         font-size: 13px;
         color: #444;
         margin-top: 4px;
         line-height: 1.4
       }

       #view-connections .mc-loc {
         display: inline-flex;
         align-items: center;
         gap: 5px;
         font-size: 12.5px;
         color: var(--muted);
         margin-top: 8px
       }

       #view-connections .mc-loc svg {
         width: 13px;
         height: 13px;
         stroke: var(--muted);
         fill: none
       }

       #view-connections .mc-mutual {
         display: flex;
         align-items: center;
         gap: 8px;
         margin-top: 14px;
         font-size: 12px;
         color: var(--muted)
       }

       #view-connections .mc-mutual .dots {
         display: flex
       }

       #view-connections .mc-mutual .dots span {
         width: 20px;
         height: 20px;
         border-radius: 0;
         border: 2px solid #fff;
         margin-left: -7px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 8px;
         font-weight: 700;
         color: #fff
       }

       #view-connections .mc-mutual .dots span:first-child {
         margin-left: 0
       }

       #view-connections .mc-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         justify-content: center;
         margin-top: 14px
       }

       #view-connections .mc-tag {
         font-size: 11px;
         font-weight: 600;
         color: #4d4d4d;
         background: var(--offwhite);
         border-radius: 0;
         padding: 4px 10px
       }

       #view-connections .mc-actions {
         display: flex;
         gap: 8px;
         margin-top: 18px;
         width: 100%
       }

       #view-connections .mc-btn {
         flex: 1;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 6px;
         border-radius: 0;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         padding: 9px 12px;
         transition: .18s;
         border: 1.5px solid var(--line);
         background: #fff;
         color: var(--ink)
       }

       #view-connections .mc-btn svg {
         width: 15px;
         height: 15px;
         stroke: currentColor;
         fill: none
       }

       #view-connections .mc-btn:hover {
         border-color: #c9c9c4;
         background: #fafafa
       }

       #view-connections .mc-btn.primary {
         background: var(--navy);
         color: #fff;
         border-color: var(--navy)
       }

       #view-connections .mc-btn.primary:hover {
         background: #001c5e
       }

       #view-connections .mc-btn.pending {
         background: #fff6ee;
         color: #e07a1a;
         border-color: #f3dcc2
       }

       #view-connections .mc-btn.connected {
         background: #e9f6ef;
         color: var(--green);
         border-color: #cfe9d9
       }

       #view-connections .mc-btn.following {
         background: var(--offwhite);
         color: var(--ink);
         border-color: var(--line)
       }

       #view-connections .cn-more-wrap {
         display: flex;
         justify-content: center;
         padding: 10px 0 80px
       }

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

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

       #view-connections .cn-more.is-done {
         display: none
       }

       #view-connections .cn-empty {
         grid-column: 1/-1;
         text-align: center;
         padding: 60px 20px;
         color: var(--muted)
       }

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

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

       @media(max-width:1100px) {
         #view-connections .cn-grid {
           grid-template-columns: repeat(2, 1fr)
         }
       }

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

         #view-connections .cn-banner-inner {
           flex-direction: column;
           align-items: flex-start
         }

         #view-connections .cn-search {
           flex-basis: 100%
         }

         #view-connections .cn-layout {
           grid-template-columns: 1fr
         }

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

         #view-connections .cn-sidebar.open {
           transform: translateX(0)
         }

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

       @media(max-width:560px) {
         #view-connections .wrap {
           padding: 0 20px
         }

         #view-connections .cn-grid {
           grid-template-columns: 1fr
         }
       }

       @media(prefers-reduced-motion:reduce) {
         #view-connections .mc {
           animation: none;
           opacity: 1;
           transform: none
         }

         #view-connections {
           transition: none !important
         }
       }

       /* ===== scoped: case study view ===== */
       #view-casestudy {
         --black: #0d0d0d;
         --ink: #1a1a1a;
         --paper: #ffffff;
         --offwhite: #f4f4f2;
         --muted: #6b6b6b;
         --line: #e6e6e3;
         --navy: #002671;
         --radius: 18px;
         --green: #1f9d57;
         --amber: #e07a1a;
         --red: #d4373a;
         --indigo: #5546d6;
       }

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

       #view-casestudy {
         scroll-behavior: smooth
       }

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

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

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

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

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

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

       #view-casestudy

       /* NAV */
       header.site {
         border-bottom: 1.5px solid var(--line)
       }

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

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

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

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

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

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

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

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

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

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

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

       #view-casestudy

       /* LAYOUT: toc | article | buy */
       .layout {
         display: grid;
         grid-template-columns: 240px minmax(0, 1fr) 340px;
         gap: 48px;
         align-items: start;
         padding: 30px 0 80px
       }

       #view-casestudy

       /* TOC */
       .toc {
         position: sticky;
         top: 24px
       }

       #view-casestudy .toc .toc-label {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px;
         display: flex;
         align-items: center;
         gap: 8px;
         margin-bottom: 20px
       }

       #view-casestudy .toc .toc-label svg {
         width: 17px;
         height: 17px;
         stroke: var(--ink);
         fill: none
       }

       #view-casestudy .toc .eyebrow {
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .14em;
         color: #b0b0ab;
         margin-bottom: 14px
       }

       #view-casestudy .toc ol {
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: 3px
       }

       #view-casestudy .toc a {
         display: flex;
         gap: 12px;
         align-items: baseline;
         padding: 8px 12px;
         border-radius: 0;
         font-size: 13.5px;
         color: #5a5a5a;
         transition: .15s
       }

       #view-casestudy .toc a .n {
         font-size: 11.5px;
         font-weight: 700;
         color: #b8b8b3;
         min-width: 16px
       }

       #view-casestudy .toc a:hover {
         background: var(--offwhite);
         color: var(--ink)
       }

       #view-casestudy .toc a.active {
         background: #eef0fb;
         color: var(--navy);
         font-weight: 600
       }

       #view-casestudy .toc a.active .n {
         color: var(--navy)
       }

       #view-casestudy

       /* ARTICLE */
       .article {
         min-width: 0;
         max-width: 920px
       }

       #view-casestudy .cstabs {
         display: flex;
         gap: 4px;
         border-bottom: 1px solid var(--line);
         margin: 0 0 24px;
         overflow-x: auto;
         scrollbar-width: none
       }

       #view-casestudy .cstabs::-webkit-scrollbar {
         display: none
       }

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

       #view-casestudy .cstab svg {
         width: 17px;
         height: 17px;
         stroke: currentColor;
         fill: none;
         stroke-width: 1.7;
         stroke-linecap: round;
         stroke-linejoin: round
       }

       #view-casestudy .cstab:hover {
         color: var(--ink)
       }

       #view-casestudy .cstab.active {
         color: var(--ink)
       }

       #view-casestudy .cstab.active::after {
         content: "";
         position: absolute;
         left: 12px;
         right: 12px;
         bottom: -1px;
         height: 2px;
         background: var(--ink)
       }

       /* ===== SUGGEST EDIT MODE ===== */
       #view-casestudy.suggest-mode .article .block [data-editable] {
         outline: 1px dashed rgba(200, 30, 40, .35);
         outline-offset: 4px;
         border-radius: 0;
         cursor: text;
         transition: outline-color .15s ease
       }

       #view-casestudy.suggest-mode .article .block [data-editable]:hover {
         outline-color: rgba(200, 30, 40, .7)
       }

       #view-casestudy.suggest-mode .article .block [data-editable]:focus {
         outline: 2px solid rgba(200, 30, 40, .85);
         background: rgba(200, 30, 40, .04)
       }

       #view-casestudy .se-del {
         color: #9a9a9a;
         text-decoration: line-through;
         text-decoration-color: #c81e28;
         margin-right: .35em
       }

       #view-casestudy .se-ins {
         color: #c81e28;
         font-weight: 600
       }

       #view-casestudy .se-bar {
         position: sticky;
         top: 0;
         z-index: 20;
         display: none;
         align-items: center;
         gap: 14px;
         padding: 12px 16px;
         margin: 0 0 18px;
         border: 1px solid rgba(200, 30, 40, .25);
         border-radius: 0;
         background: rgba(200, 30, 40, .05);
         backdrop-filter: blur(4px)
       }

       #view-casestudy.suggest-mode .se-bar {
         display: flex
       }

       #view-casestudy .se-bar .se-msg {
         font-size: 13px;
         color: var(--ink);
         flex: 1
       }

       #view-casestudy .se-bar .se-msg b {
         font-family: 'Inter';
         font-weight: 700
       }

       #view-casestudy .se-bar .se-count {
         color: #c81e28;
         font-weight: 600
       }

       #view-casestudy .se-btn {
         font-size: 13px;
         font-weight: 600;
         padding: 9px 18px;
         border-radius: 0;
         border: none;
         cursor: pointer
       }

       #view-casestudy .se-btn.save {
         background: #c81e28;
         color: #fff
       }

       #view-casestudy .se-btn.save:hover {
         background: #a8151e
       }

       #view-casestudy .se-btn.cancel {
         background: transparent;
         color: #666;
         border: 1px solid var(--line)
       }

       #view-casestudy .se-btn.cancel:hover {
         color: var(--ink)
       }

       /* ===== BUY TO USE PANEL ===== */
       #view-casestudy .buyx {
         display: none
       }

       #view-casestudy.buy-mode .buyx {
         display: block
       }

       #view-casestudy.buy-mode .article>.block,
       #view-casestudy.buy-mode .article>.hero,
       #view-casestudy.buy-mode .article>.crumbs,
       #view-casestudy.buy-mode .article>.head,
       #view-casestudy.buy-mode .article>.metastrip {
         display: none
       }

       #view-casestudy.buy-mode .buy {
         display: none
       }

       #view-casestudy.buy-mode .layout {
         grid-template-columns: 240px minmax(0, 1fr)
       }

       #view-casestudy.buy-mode .article {
         max-width: none
       }

       /* header */
       #view-casestudy .bx-head {
         display: flex;
         gap: 28px;
         align-items: flex-start;
         justify-content: space-between;
         flex-wrap: wrap;
         padding-bottom: 26px;
         border-bottom: 1px solid var(--line)
       }

       #view-casestudy .bx-head-l {
         flex: 1;
         min-width: 280px
       }

       #view-casestudy .bx-cat {
         display: inline-block;
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .08em;
         text-transform: uppercase;
         color: var(--navy);
         background: rgba(0, 38, 113, .07);
         padding: 5px 12px;
         border-radius: 0;
         margin-bottom: 14px
       }

       #view-casestudy .bx-title {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 30px;
         line-height: 1.15;
         color: var(--ink);
         letter-spacing: -.01em
       }

       #view-casestudy .bx-sub {
         color: var(--muted);
         font-size: 15px;
         line-height: 1.55;
         margin-top: 12px;
         max-width: 640px
       }

       #view-casestudy .bx-meta {
         display: flex;
         flex-wrap: wrap;
         gap: 18px;
         margin-top: 18px
       }

       #view-casestudy .bx-meta span {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         font-size: 13px;
         color: var(--muted);
         font-weight: 500
       }

       #view-casestudy .bx-meta svg {
         width: 16px;
         height: 16px;
         stroke: var(--muted);
         fill: none;
         stroke-width: 1.8;
         stroke-linecap: round;
         stroke-linejoin: round
       }

       #view-casestudy .bx-meta .rate {
         color: #b8860b
       }

       #view-casestudy .bx-meta .rate svg {
         stroke: none;
         fill: #e0a000;
         width: 15px;
         height: 15px
       }

       #view-casestudy .bx-id {
         background: var(--offwhite);
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 16px 18px;
         min-width: 200px
       }

       #view-casestudy .bx-id-row {
         display: flex;
         justify-content: space-between;
         gap: 16px;
         font-size: 13px;
         padding: 6px 0
       }

       #view-casestudy .bx-id-row span {
         color: var(--muted)
       }

       #view-casestudy .bx-id-row b {
         font-family: 'Inter';
         font-weight: 600;
         color: var(--ink)
       }

       #view-casestudy .bx-id-row b.ok {
         color: #1f9d57
       }

       /* about grid */
       #view-casestudy .bx-grid {
         display: grid;
         grid-template-columns: 1.4fr 1fr;
         gap: 16px;
         margin-top: 24px
       }

       #view-casestudy .bx-cardp {
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 20px 22px;
         background: #fff
       }

       #view-casestudy .bx-cardp.about {
         grid-row: span 2
       }

       #view-casestudy .bx-ph {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 13px;
         letter-spacing: .04em;
         text-transform: uppercase;
         color: var(--ink);
         margin-bottom: 12px
       }

       #view-casestudy .bx-ph.big {
         font-size: 18px;
         text-transform: none;
         letter-spacing: -.01em;
         margin-bottom: 18px
       }

       #view-casestudy .bx-cardp.about p {
         font-size: 14px;
         line-height: 1.6;
         color: #3a3a3a
       }

       #view-casestudy .bx-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 16px
       }

       #view-casestudy .bx-tags span {
         font-size: 12px;
         color: var(--navy);
         background: rgba(0, 38, 113, .06);
         padding: 5px 11px;
         border-radius: 0;
         font-weight: 500
       }

       #view-casestudy .bx-list {
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: 12px
       }

       #view-casestudy .bx-list li {
         display: flex;
         align-items: center;
         gap: 11px;
         font-size: 14px;
         color: #3a3a3a
       }

       #view-casestudy .bx-list svg {
         width: 18px;
         height: 18px;
         stroke: var(--navy);
         fill: none;
         stroke-width: 1.8;
         stroke-linecap: round;
         stroke-linejoin: round;
         flex-shrink: 0
       }

       #view-casestudy .bx-schools {
         display: flex;
         flex-wrap: wrap;
         gap: 8px
       }

       #view-casestudy .bx-schools span {
         font-size: 12.5px;
         font-weight: 600;
         color: var(--ink);
         background: var(--offwhite);
         border: 1px solid var(--line);
         padding: 6px 12px;
         border-radius: 8px
       }

       #view-casestudy .bx-where-foot {
         margin-top: 14px;
         font-size: 13px;
         color: var(--muted)
       }

       #view-casestudy .bx-where-foot b {
         color: var(--ink)
       }

       #view-casestudy .bx-cardp.subs {
         display: flex;
         flex-direction: column;
         align-items: flex-start
       }

       #view-casestudy .bx-subs-num {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 32px;
         color: var(--ink);
         line-height: 1
       }

       #view-casestudy .bx-subs-lbl {
         font-size: 13px;
         color: var(--muted);
         margin-top: 2px
       }

       #view-casestudy .bx-avs {
         display: flex;
         margin-top: 16px
       }

       #view-casestudy .bx-avs span {
         width: 34px;
         height: 34px;
         border-radius: 0;
         border: 2px solid #fff;
         margin-left: -8px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 11px;
         font-weight: 700;
         font-family: 'Inter'
       }

       #view-casestudy .bx-avs span:first-child {
         margin-left: 0
       }

       #view-casestudy .bx-avs .more {
         background: var(--ink);
         font-size: 10px
       }

       #view-casestudy .bx-subs-foot {
         margin-top: 14px;
         font-size: 13px;
         color: #1f9d57;
         font-weight: 500
       }

       /* writer */
       #view-casestudy .bx-writer {
         display: flex;
         gap: 20px;
         margin-top: 24px;
         padding: 24px;
         border: 1px solid var(--line);
         border-radius: 0;
         background: linear-gradient(135deg, #fafafa, #f4f4f2)
       }

       #view-casestudy .bx-writer-av {
         width: 64px;
         height: 64px;
         border-radius: 0;
         background: var(--navy);
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 22px;
         flex-shrink: 0
       }

       #view-casestudy .bx-writer-body {
         flex: 1;
         min-width: 0
       }

       #view-casestudy .bx-writer-top {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         gap: 16px
       }

       #view-casestudy .bx-writer-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 18px;
         color: var(--ink);
         display: flex;
         align-items: center;
         gap: 7px
       }

       #view-casestudy .bx-writer-name .verif {
         width: 18px;
         height: 18px;
         fill: #2563eb
       }

       #view-casestudy .bx-writer-role {
         font-size: 13px;
         color: var(--muted);
         margin-top: 3px
       }

       #view-casestudy .bx-follow {
         font-size: 13px;
         font-weight: 600;
         padding: 8px 18px;
         border-radius: 0;
         border: 1.5px solid var(--ink);
         background: #fff;
         color: var(--ink);
         cursor: pointer;
         transition: .15s;
         flex-shrink: 0
       }

       #view-casestudy .bx-follow:hover {
         background: var(--ink);
         color: #fff
       }

       #view-casestudy .bx-writer-bio {
         font-size: 13.5px;
         line-height: 1.55;
         color: #3a3a3a;
         margin-top: 12px;
         max-width: 620px
       }

       #view-casestudy .bx-writer-stats {
         display: flex;
         gap: 32px;
         margin-top: 18px
       }

       #view-casestudy .bx-writer-stats div {
         display: flex;
         flex-direction: column
       }

       #view-casestudy .bx-writer-stats b {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 20px;
         color: var(--ink)
       }

       #view-casestudy .bx-writer-stats span {
         font-size: 12px;
         color: var(--muted);
         margin-top: 2px
       }

       /* pricing */
       #view-casestudy .bx-pricewrap {
         margin-top: 34px
       }

       #view-casestudy .bx-tiers {
         display: flex;
         flex-direction: column;
         gap: 14px
       }

       #view-casestudy .bx-tier {
         position: relative;
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 20px 24px;
         cursor: pointer;
         transition: .18s;
         background: #fff;
         display: grid;
         grid-template-columns: 230px 1fr 150px;
         align-items: center;
         gap: 24px
       }

       #view-casestudy .bx-tier:hover {
         border-color: #bcbcbc
       }

       #view-casestudy .bx-tier.active {
         border-color: var(--navy);
         box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
       }

       #view-casestudy .bx-tier-lead {
         display: flex;
         flex-direction: column
       }

       #view-casestudy .bx-tier-tag {
         display: inline-block;
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .05em;
         text-transform: uppercase;
         padding: 5px 11px;
         border-radius: 0;
         margin-bottom: 10px;
         align-self: flex-start
       }

       #view-casestudy .bx-tier-tag.use {
         color: #0f9aa0;
         background: rgba(15, 154, 160, .1)
       }

       #view-casestudy .bx-tier-tag.edit {
         color: #7c3aed;
         background: rgba(124, 58, 237, .1)
       }

       #view-casestudy .bx-tier-tag.dist {
         color: #e07a1a;
         background: rgba(224, 122, 26, .1)
       }

       #view-casestudy .bx-tier-price {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 28px;
         color: var(--ink);
         line-height: 1
       }

       #view-casestudy .bx-tier-price span {
         font-size: 13px;
         font-weight: 500;
         color: var(--muted)
       }

       #view-casestudy .bx-tier-desc {
         font-size: 13px;
         color: var(--muted);
         line-height: 1.5;
         margin-top: 8px;
         min-height: 0
       }

       #view-casestudy .bx-tier-feat {
         list-style: none;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px 22px;
         margin-top: 0
       }

       #view-casestudy .bx-tier-feat li {
         font-size: 12.5px;
         color: #3a3a3a;
         padding-left: 22px;
         position: relative
       }

       #view-casestudy .bx-tier-feat li::before {
         position: absolute;
         left: 0;
         top: 0;
         font-weight: 700
       }

       #view-casestudy .bx-tier-feat li.y::before {
         content: "✓";
         color: #1f9d57
       }

       #view-casestudy .bx-tier-feat li.n {
         color: #aaa
       }

       #view-casestudy .bx-tier-feat li.n::before {
         content: "✕";
         color: #cbcbcb
       }

       #view-casestudy .bx-tier-pick {
         text-align: center;
         font-size: 13px;
         font-weight: 600;
         padding: 12px;
         border-radius: 0;
         background: var(--offwhite);
         color: var(--muted)
       }

       #view-casestudy .bx-tier.active .bx-tier-pick {
         background: #265700;
         color: #fff
       }

       #view-casestudy .bx-tier-detail {
         grid-column: 1 / -1;
         display: none;
         margin-top: 4px;
         padding-top: 10px;
         border-top: 1px solid var(--line)
       }

       #view-casestudy .bx-tier.active .bx-tier-detail {
         display: block;
         animation: bxExpand .22s ease
       }

       @keyframes bxExpand {
         from {
           opacity: 0;
           transform: translateY(-4px)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       @media(max-width:720px) {
         #view-casestudy .bx-tier {
           grid-template-columns: 1fr;
           gap: 14px
         }

         #view-casestudy .bx-tier-feat {
           grid-template-columns: 1fr
         }
       }

       /* summary / dynamic area */
       #view-casestudy .bx-tier-detail .bx-sum-head {
         background: transparent;
         border-bottom: none;
         padding: 0
       }

       #view-casestudy .bx-tier-detail .bx-sum-body {
         padding: 0
       }

       #view-casestudy .bx-summary {
         margin-top: 20px;
         border: 1px solid var(--line);
         border-radius: 0;
         overflow: hidden
       }

       #view-casestudy .bx-sum-head {
         padding: 18px 22px;
         background: var(--offwhite);
         border-bottom: 1px solid var(--line);
         display: flex;
         align-items: center;
         gap: 12px
       }

       #view-casestudy .bx-sum-head .ic {
         width: 38px;
         height: 38px;
         border-radius: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0
       }

       #view-casestudy .bx-sum-head svg {
         width: 20px;
         height: 20px;
         stroke: #fff;
         fill: none;
         stroke-width: 2;
         stroke-linecap: round;
         stroke-linejoin: round
       }

       #view-casestudy .bx-sum-head h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         color: var(--ink)
       }

       #view-casestudy .bx-sum-head p {
         font-size: 13px;
         color: var(--muted);
         margin-top: 2px
       }

       #view-casestudy .bx-sum-body {
         padding: 22px
       }

       /* qty stepper */
       #view-casestudy .bx-qty {
         display: flex;
         align-items: center;
         gap: 0;
         border: 1.5px solid var(--line);
         border-radius: 0;
         overflow: hidden;
         width: fit-content
       }

       #view-casestudy .bx-qty button {
         width: 40px;
         height: 42px;
         border: none;
         background: #fff;
         font-size: 20px;
         cursor: pointer;
         color: var(--ink)
       }

       #view-casestudy .bx-qty button:hover {
         background: var(--offwhite)
       }

       #view-casestudy .bx-qty input {
         width: 70px;
         height: 42px;
         border: none;
         border-left: 1.5px solid var(--line);
         border-right: 1.5px solid var(--line);
         text-align: center;
         font-family: 'Inter';
         font-weight: 600;
         font-size: 16px;
         color: var(--ink)
       }

       #view-casestudy .bx-qty input:focus {
         outline: none
       }

       #view-casestudy .bx-field-row {
         display: flex;
         align-items: center;
         gap: 18px;
         flex-wrap: wrap
       }

       #view-casestudy .bx-field-row label {
         font-size: 13px;
         font-weight: 600;
         color: var(--ink)
       }

       /* royalty breakdown */
       #view-casestudy .bx-royalty {
         margin-top: 22px;
         background: linear-gradient(135deg, #0a1628, #13284a);
         border-radius: 0;
         padding: 22px;
         color: #fff
       }

       #view-casestudy .bx-royalty .rh {
         display: flex;
         align-items: center;
         gap: 9px;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px;
         margin-bottom: 4px
       }

       #view-casestudy .bx-royalty .rh svg {
         width: 18px;
         height: 18px;
         stroke: #7fd1a8;
         fill: none;
         stroke-width: 2
       }

       #view-casestudy .bx-royalty .rsub {
         font-size: 12.5px;
         color: rgba(255, 255, 255, .6);
         margin-bottom: 18px
       }

       #view-casestudy .bx-flow {
         display: flex;
         align-items: stretch;
         gap: 0;
         flex-wrap: wrap
       }

       #view-casestudy .bx-flow .node {
         flex: 1;
         min-width: 120px;
         text-align: center;
         padding: 14px 10px
       }

       #view-casestudy .bx-flow .node .nlbl {
         font-size: 11px;
         text-transform: uppercase;
         letter-spacing: .05em;
         color: rgba(255, 255, 255, .55);
         margin-bottom: 6px
       }

       #view-casestudy .bx-flow .node .nval {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 22px
       }

       #view-casestudy .bx-flow .node .npct {
         font-size: 11px;
         color: rgba(255, 255, 255, .6);
         margin-top: 3px
       }

       #view-casestudy .bx-flow .node.writer .nval {
         color: #7fd1a8
       }

       #view-casestudy .bx-flow .arr {
         display: flex;
         align-items: center;
         color: rgba(255, 255, 255, .35);
         font-size: 20px;
         padding: 0 4px
       }

       #view-casestudy .bx-rsplit {
         display: flex;
         height: 8px;
         border-radius: 0;
         overflow: hidden;
         margin: 16px 0 4px
       }

       #view-casestudy .bx-rsplit i {
         display: block;
         height: 100%
       }

       #view-casestudy .bx-rlegend {
         display: flex;
         gap: 18px;
         flex-wrap: wrap;
         font-size: 12px;
         color: rgba(255, 255, 255, .7)
       }

       #view-casestudy .bx-rlegend span {
         display: inline-flex;
         align-items: center;
         gap: 6px
       }

       #view-casestudy .bx-rlegend i {
         width: 10px;
         height: 10px;
         border-radius: 3px
       }

       #view-casestudy .bx-assure {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-top: 18px;
         padding: 12px 14px;
         background: rgba(127, 209, 168, .12);
         border: 1px solid rgba(127, 209, 168, .3);
         border-radius: 0;
         font-size: 12.5px;
         color: #cfeede
       }

       #view-casestudy .bx-assure svg {
         width: 18px;
         height: 18px;
         stroke: #7fd1a8;
         fill: none;
         stroke-width: 2;
         flex-shrink: 0
       }

       #view-casestudy .bx-assure b {
         color: #fff
       }

       /* totals + cta */
       #view-casestudy .bx-total {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 10px;
         padding-top: 0;
         border-top: 1px dashed var(--line)
       }

       #view-casestudy .bx-total .tl {
         font-size: 13px;
         color: var(--muted)
       }

       #view-casestudy .bx-total .tv {
         font-family: 'Inter';
         font-weight: 500;
         font-size: 20px;
         color: #002671
       }

       #view-casestudy .bx-cta {
         display: flex;
         width: fit-content;
         margin-left: auto;
         margin-top: 14px;
         padding: 10px 18px;
         border: none;
         border-radius: 0;
         background: #002671;
         color: #fff;
         font-family: 'Inter';
         font-weight: 400;
         font-size: 12px;
         cursor: pointer;
         align-items: center;
         justify-content: center;
         gap: 9px;
         transition: .15s
       }

       #view-casestudy .bx-cta:hover {
         background: #000
       }

       #view-casestudy .bx-cta svg {
         width: 18px;
         height: 18px;
         stroke: #fff;
         fill: none;
         stroke-width: 2
       }

       /* guardrails (edit tier) */
       #view-casestudy .bx-guard {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px;
         margin-top: 4px
       }

       #view-casestudy .bx-guard .gcol {
         border-radius: 0;
         padding: 18px
       }

       #view-casestudy .bx-guard .gcan {
         background: rgba(31, 157, 87, .06);
         border: 1px solid rgba(31, 157, 87, .25)
       }

       #view-casestudy .bx-guard .gcant {
         background: rgba(200, 30, 40, .05);
         border: 1px solid rgba(200, 30, 40, .22)
       }

       #view-casestudy .bx-guard .gh {
         display: flex;
         align-items: center;
         gap: 8px;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14px;
         margin-bottom: 12px
       }

       #view-casestudy .bx-guard .gcan .gh {
         color: #1f9d57
       }

       #view-casestudy .bx-guard .gcant .gh {
         color: #c81e28
       }

       #view-casestudy .bx-guard ul {
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: 10px
       }

       #view-casestudy .bx-guard li {
         font-size: 13px;
         line-height: 1.45;
         color: #3a3a3a;
         padding-left: 22px;
         position: relative
       }

       #view-casestudy .bx-guard li::before {
         position: absolute;
         left: 0;
         top: 0;
         font-weight: 700
       }

       #view-casestudy .bx-guard .gcan li::before {
         content: "✓";
         color: #1f9d57
       }

       #view-casestudy .bx-guard .gcant li::before {
         content: "✕";
         color: #c81e28
       }

       @media(max-width:760px) {
         #view-casestudy .bx-grid {
           grid-template-columns: 1fr
         }

         #view-casestudy .bx-cardp.about {
           grid-row: auto
         }

         #view-casestudy .bx-tiers {
           grid-template-columns: 1fr
         }

         #view-casestudy .bx-guard {
           grid-template-columns: 1fr
         }

         #view-casestudy .bx-title {
           font-size: 24px
         }
       }

       #view-casestudy

       /* hero */
       .hero {
         position: relative;
         border-radius: var(--radius);
         overflow: hidden;
         aspect-ratio: 16/7;
         margin-bottom: 30px;
         background: linear-gradient(135deg, #0a1a3a, #1b2f5e)
       }

       #view-casestudy .hero img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-casestudy .hero::after {
         content: "";
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .62))
       }

       #view-casestudy .hero-back {
         position: absolute;
         top: 18px;
         left: 18px;
         z-index: 3;
         width: 40px;
         height: 40px;
         border-radius: 0;
         background: rgba(0, 0, 0, .4);
         backdrop-filter: blur(6px);
         border: none;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         justify-content: center
       }

       #view-casestudy .hero-back svg {
         width: 18px;
         height: 18px;
         stroke: #fff;
         fill: none
       }

       #view-casestudy .hero-meta {
         position: absolute;
         left: 24px;
         bottom: 22px;
         right: 24px;
         z-index: 3;
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 16px
       }

       #view-casestudy .hero-author {
         display: flex;
         align-items: center;
         gap: 12px;
         color: #fff
       }

       #view-casestudy .hero-author .av {
         width: 46px;
         height: 46px;
         border-radius: 0;
         background: rgba(255, 255, 255, .18);
         backdrop-filter: blur(6px);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px
       }

       #view-casestudy .hero-author .lbl {
         font-size: 12px;
         opacity: .85
       }

       #view-casestudy .hero-author .nm {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px
       }

       #view-casestudy .hero-rating {
         display: flex;
         align-items: center;
         gap: 7px;
         color: #fff;
         background: rgba(0, 0, 0, .32);
         backdrop-filter: blur(6px);
         padding: 7px 12px;
         border-radius: 30px
       }

       #view-casestudy .hero-rating .stars {
         display: inline-flex;
         gap: 1px
       }

       #view-casestudy .hero-rating .stars svg {
         width: 14px;
         height: 14px
       }

       #view-casestudy .hero-rating b {
         font-size: 14px
       }

       #view-casestudy .hero-rating span {
         font-size: 12px;
         opacity: .85
       }

       #view-casestudy

       /* breadcrumb + title */
       .crumb {
         display: flex;
         align-items: center;
         gap: 8px;
         font-size: 13px;
         color: var(--muted);
         margin-bottom: 18px;
         flex-wrap: wrap
       }

       #view-casestudy .crumb a:hover {
         color: var(--ink)
       }

       #view-casestudy .crumb .sep {
         color: #cfcfca
       }

       #view-casestudy .crumb .cur {
         color: var(--navy);
         font-weight: 600
       }

       #view-casestudy .cat-pill {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         background: #eef0fb;
         color: var(--navy);
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .08em;
         padding: 6px 13px;
         border-radius: 0;
         margin-bottom: 16px
       }

       #view-casestudy .cat-pill svg {
         width: 14px;
         height: 14px;
         stroke: var(--navy);
         fill: none
       }

       #view-casestudy .article h1.title {
         font-size: clamp(25px, 3.4vw, 25px);
         font-weight: 200;
         color: #051e8c;
         margin-bottom: 5px
       }

       #view-casestudy .lead {
         font-size: 17px;
         color: #444;
         line-height: 1.6;
         margin-bottom: 24px;
         max-width: 62ch
       }

       #view-casestudy

       /* meta strip */
       .meta-strip {
         display: flex;
         align-items: center;
         gap: 22px;
         flex-wrap: wrap;
         padding: 16px 0;
         border-top: 1.5px solid var(--line);
         border-bottom: 1.5px solid var(--line);
         font-size: 13px;
         color: var(--muted);
         margin-bottom: 44px
       }

       #view-casestudy .meta-strip .m {
         display: inline-flex;
         align-items: center;
         gap: 7px
       }

       #view-casestudy .meta-strip .m svg {
         width: 15px;
         height: 15px;
         stroke: var(--muted);
         fill: none
       }

       #view-casestudy .meta-strip .m b {
         color: var(--ink);
         font-weight: 600
       }

       #view-casestudy

       /* sections */
       section.block {
         margin-bottom: 52px;
         scroll-margin-top: 24px
       }

       #view-casestudy .eyebrow {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .14em;
         color: #a8a8a3;
         margin-bottom: 10px
       }

       #view-casestudy .article h2 {
         font-size: 20px;
         font-weight: 300;
         color: #001c7b;
         margin-bottom: 10px
       }

       #view-casestudy .article h3 {
         font-size: 18px;
         font-weight: 700;
         color: var(--ink);
         margin: 28px 0 12px
       }

       #view-casestudy .article p {
         font-size: 12.5px;
         color: #3f3f3f;
         margin-bottom: 16px
       }

       #view-casestudy .article p strong {
         color: var(--ink);
         font-weight: 700
       }

       #view-casestudy .article em {
         font-style: italic
       }

       #view-casestudy

       /* stat cards */
       .stat-row {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 14px;
         margin: 24px 0
       }

       #view-casestudy .stat {
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 20px 18px;
         background: #fff
       }

       #view-casestudy .stat.dark {
         background: var(--black);
         border-color: var(--black)
       }

       #view-casestudy .stat .v {
         font-family: 'Inter';
         font-weight: 800;
         font-size: 26px;
         color: var(--ink);
         margin-bottom: 6px
       }

       #view-casestudy .stat.dark .v {
         color: #fff
       }

       #view-casestudy .stat .l {
         font-size: 11.5px;
         font-weight: 600;
         letter-spacing: .04em;
         color: var(--muted);
         line-height: 1.35;
         margin-bottom: 8px;
         text-transform: uppercase
       }

       #view-casestudy .stat.dark .l {
         color: #b9b9b9
       }

       #view-casestudy .stat .src {
         font-size: 12px;
         font-weight: 700
       }

       #view-casestudy .stat .src.up {
         color: var(--green)
       }

       #view-casestudy .stat .src.amber {
         color: var(--amber)
       }

       #view-casestudy

       /* pull quote */
       .pullquote {
         background: #eef0fb;
         border-left: 4px solid var(--navy);
         border-radius: 0 12px 12px 0;
         padding: 22px 26px;
         margin: 24px 0
       }

       #view-casestudy .pullquote.warm {
         background: #fff6ee;
         border-left-color: var(--amber)
       }

       #view-casestudy .pullquote.rose {
         background: #fdeef0;
         border-left-color: var(--red)
       }

       #view-casestudy .pullquote p {
         font-size: 17px;
         font-style: italic;
         font-weight: 500;
         color: var(--ink);
         margin-bottom: 8px;
         line-height: 1.5
       }

       #view-casestudy .pullquote cite {
         font-style: normal;
         font-size: 13px;
         color: var(--muted)
       }

       #view-casestudy

       /* exhibit wrapper */
       .exhibit {
         border: 1.5px solid var(--line);
         border-radius: var(--radius);
         overflow: hidden;
         margin: 24px 0
       }

       #view-casestudy .exhibit-head {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 16px 22px;
         border-bottom: 1.5px solid var(--line);
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px
       }

       #view-casestudy .exhibit-head svg {
         width: 18px;
         height: 18px;
         stroke: var(--navy);
         fill: none
       }

       #view-casestudy .exhibit-body {
         padding: 22px
       }

       #view-casestudy .exhibit-note {
         font-size: 12.5px;
         color: #9a9a95;
         padding: 0 22px 18px
       }

       #view-casestudy

       /* tables */
       table {
         width: 100%;
         border-collapse: collapse;
         font-size: 14px
       }

       #view-casestudy thead th {
         background: var(--black);
         color: #fff;
         text-align: left;
         padding: 13px 16px;
         font-weight: 600;
         font-size: 13px
       }

       #view-casestudy thead th:first-child {
         border-radius: 8px 0 0 8px
       }

       #view-casestudy thead th:last-child {
         border-radius: 0 8px 8px 0
       }

       #view-casestudy tbody td {
         padding: 14px 16px;
         border-bottom: 1px solid var(--line);
         vertical-align: top
       }

       #view-casestudy tbody tr:last-child td {
         border-bottom: none
       }

       #view-casestudy tbody td:first-child {
         font-weight: 700;
         color: var(--ink)
       }

       #view-casestudy .dot {
         display: inline-flex;
         align-items: center;
         gap: 7px
       }

       #view-casestudy .dot::before {
         content: "";
         width: 9px;
         height: 9px;
         border-radius: 0;
         background: currentColor
       }

       #view-casestudy .c-red {
         color: var(--red)
       }

       #view-casestudy .c-amber {
         color: var(--amber)
       }

       #view-casestudy .c-green {
         color: var(--green)
       }

       #view-casestudy .c-yellow {
         color: #d8a200
       }

       #view-casestudy td .crit {
         color: var(--red);
         font-weight: 700
       }

       #view-casestudy td .hi {
         color: var(--amber);
         font-weight: 700
       }

       #view-casestudy td .up {
         color: var(--green);
         font-weight: 700
       }

       #view-casestudy td .down {
         color: var(--red);
         font-weight: 700
       }

       #view-casestudy td .mid {
         color: var(--amber);
         font-weight: 700
       }

       #view-casestudy td .neutral {
         color: var(--muted);
         font-weight: 700
       }

       #view-casestudy

       /* bar chart */
       .bars {
         display: flex;
         flex-direction: column;
         gap: 13px
       }

       #view-casestudy .bar-row {
         display: grid;
         grid-template-columns: 150px 1fr 48px;
         align-items: center;
         gap: 14px
       }

       #view-casestudy .bar-row .lab {
         font-size: 13px;
         color: #3f3f3f;
         text-align: right
       }

       #view-casestudy .bar-track {
         height: 11px;
         background: var(--offwhite);
         border-radius: 0;
         overflow: hidden
       }

       #view-casestudy .bar-fill {
         height: 100%;
         border-radius: 20px
       }

       #view-casestudy .bar-row .pct {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14px;
         text-align: right
       }

       #view-casestudy .bar-src {
         font-size: 12px;
         color: #9a9a95;
         margin-top: 14px
       }

       #view-casestudy

       /* wave / option cards */
       .cardgrid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 16px;
         margin: 24px 0
       }

       #view-casestudy .ic {
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 20px;
         background: #fff
       }

       #view-casestudy .ic .tag {
         display: inline-block;
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .08em;
         padding: 5px 11px;
         border-radius: 0;
         margin-bottom: 14px
       }

       #view-casestudy .ic.indigo .tag {
         background: #eef0fb;
         color: var(--indigo)
       }

       #view-casestudy .ic.amber .tag {
         background: #fff6ee;
         color: var(--amber)
       }

       #view-casestudy .ic.green .tag {
         background: #e9f6ef;
         color: var(--green)
       }

       #view-casestudy .ic h4 {
         font-size: 16px;
         font-weight: 700;
         margin-bottom: 8px
       }

       #view-casestudy .ic p {
         font-size: 13.5px;
         color: #555;
         margin: 0;
         line-height: 1.5
       }

       #view-casestudy

       /* timeline */
       .tl {
         position: relative;
         padding-left: 30px;
         margin: 8px 0
       }

       #view-casestudy .tl::before {
         content: "";
         position: absolute;
         left: 7px;
         top: 6px;
         bottom: 6px;
         width: 2px;
         background: var(--line)
       }

       #view-casestudy .tl-item {
         position: relative;
         margin-bottom: 26px
       }

       #view-casestudy .tl-item:last-child {
         margin-bottom: 0
       }

       #view-casestudy .tl-item::before {
         content: "";
         position: absolute;
         left: -30px;
         top: 3px;
         width: 16px;
         height: 16px;
         border-radius: 0;
         border: 3px solid var(--navy);
         background: #fff
       }

       #view-casestudy .tl-item.amber::before {
         border-color: var(--amber)
       }

       #view-casestudy .tl-item.green::before {
         border-color: var(--green)
       }

       #view-casestudy .tl-year {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 13px;
         color: var(--navy);
         margin-bottom: 3px
       }

       #view-casestudy .tl-item.amber .tl-year {
         color: var(--amber)
       }

       #view-casestudy .tl-item.green .tl-year {
         color: var(--green)
       }

       #view-casestudy .tl-title {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         margin-bottom: 5px
       }

       #view-casestudy .tl-desc {
         font-size: 14px;
         color: #555
       }

       #view-casestudy

       /* questions */
       .q {
         display: flex;
         gap: 16px;
         background: var(--offwhite);
         border-radius: 0;
         padding: 18px 20px;
         margin-bottom: 14px
       }

       #view-casestudy .q .num {
         flex-shrink: 0;
         width: 30px;
         height: 30px;
         border-radius: 0;
         background: var(--black);
         color: #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-weight: 700;
         font-size: 14px
       }

       #view-casestudy .q p {
         font-size: 15px;
         color: #333;
         margin: 0
       }

       #view-casestudy

       /* references */
       .ref {
         display: flex;
         gap: 14px;
         padding: 14px 0;
         border-bottom: 1px solid var(--line);
         font-size: 14.5px
       }

       #view-casestudy .ref:last-child {
         border-bottom: none
       }

       #view-casestudy .ref .rn {
         color: var(--navy);
         font-weight: 700;
         min-width: 28px
       }

       #view-casestudy .ref .rt em {
         color: #555
       }

       #view-casestudy

       /* key terms */
       .terms {
         display: flex;
         flex-wrap: wrap;
         gap: 9px;
         margin-top: 8px
       }

       #view-casestudy .term {
         font-size: 12.5px;
         font-weight: 600;
         padding: 7px 14px;
         border-radius: 0;
         border: 1.5px solid var(--line);
         color: #4d4d4d
       }

       #view-casestudy .term.i {
         background: #eef0fb;
         border-color: #dfe2f7;
         color: var(--indigo)
       }

       #view-casestudy .term.a {
         background: #fff6ee;
         border-color: #f5e3cf;
         color: var(--amber)
       }

       #view-casestudy .term.g {
         background: #e9f6ef;
         border-color: #cfe9d9;
         color: var(--green)
       }

       #view-casestudy

       /* ===== BUY PANEL ===== */
       .buy {
         position: sticky;
         top: 24px;
         display: flex;
         flex-direction: column;
         gap: 0
       }

       #view-casestudy .buy-card {
         border: 1.5px solid var(--line);
         border-radius: var(--radius);
         padding: 24px;
         background: #fff
       }

       #view-casestudy .price {
         display: flex;
         align-items: baseline;
         gap: 6px;
         font-family: 'Inter'
       }

       #view-casestudy .price .amt {
         font-weight: 200;
         font-size: 25px;
         color: #111f41
       }

       #view-casestudy .price .cur {
         font-size: 14px;
         font-weight: 600;
         color: var(--muted)
       }

       #view-casestudy .price-sub {
         font-size: 12.5px;
         color: var(--green);
         font-weight: 600;
         margin: 4px 0 18px
       }

       #view-casestudy .buy-actions {
         display: flex;
         gap: 10px;
         align-items: stretch
       }

       #view-casestudy .buy-now {
         flex: 1;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         background: var(--black);
         color: #fff;
         border: none;
         border-radius: 0;
         padding: 14px 16px;
         font-weight: 700;
         font-size: 14px;
         cursor: pointer;
         transition: .18s
       }

       #view-casestudy .buy-now:hover {
         background: #2a2a2a
       }

       #view-casestudy .buy-now svg {
         width: 16px;
         height: 16px;
         stroke: currentColor;
         fill: none
       }

       #view-casestudy .icon-btn {
         width: 46px;
         border: 1.5px solid var(--line);
         border-radius: 0;
         background: #fff;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         transition: .18s;
         color: var(--ink)
       }

       #view-casestudy .icon-btn:hover {
         border-color: var(--ink);
         background: #fafafa
       }

       #view-casestudy .icon-btn.flag:hover {
         color: var(--red);
         border-color: var(--red)
       }

       #view-casestudy .icon-btn svg {
         width: 18px;
         height: 18px;
         stroke: currentColor;
         fill: none
       }

       #view-casestudy .icon-btn.saved {
         color: var(--navy);
         border-color: var(--navy)
       }

       #view-casestudy .icon-btn.saved svg {
         fill: var(--navy)
       }

       #view-casestudy .subs {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 18px 0 4px;
         border-top: 1.5px solid var(--line);
         margin-top: 20px
       }

       #view-casestudy .avs {
         display: flex
       }

       #view-casestudy .avs .a {
         width: 30px;
         height: 30px;
         border-radius: 0;
         border: 2px solid #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 10px;
         font-weight: 700;
         color: #fff;
         margin-left: -8px
       }

       #view-casestudy .avs .a:first-child {
         margin-left: 0
       }

       #view-casestudy .subs .stxt {
         font-size: 14px
       }

       #view-casestudy .subs .stxt b {
         font-family: 'Inter';
         font-weight: 700
       }

       #view-casestudy .details-card {
         border: 1.5px solid var(--line);
         border-radius: var(--radius);
         padding: 22px 24px;
         background: #fff;
         margin-top: 16px
       }

       #view-casestudy .details-card .dh {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .14em;
         color: #a8a8a3;
         margin-bottom: 16px
       }

       #view-casestudy .dgrid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 18px 16px
       }

       #view-casestudy .dcell .k {
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .1em;
         color: #b0b0ab;
         margin-bottom: 4px;
         text-transform: uppercase
       }

       #view-casestudy .dcell .v {
         font-size: 14px;
         font-weight: 700;
         color: var(--ink)
       }

       #view-casestudy .dcell .v.navy {
         color: var(--navy)
       }

       #view-casestudy .dcell .v.green {
         color: var(--green)
       }

       #view-casestudy .dcell .v.amber {
         color: var(--amber)
       }

       #view-casestudy .detail-list {
         margin-top: 4px;
         display: flex;
         flex-direction: column;
         gap: 2px
       }

       #view-casestudy .dl-row {
         display: flex;
         align-items: center;
         gap: 10px;
         font-size: 12.5px;
         color: #666;
         padding: 5px 0;
         border-bottom: 1px solid var(--line)
       }

       #view-casestudy .dl-row:last-child {
         border-bottom: none
       }

       #view-casestudy .dl-row svg {
         width: 16px;
         height: 16px;
         stroke: var(--muted);
         fill: none;
         flex-shrink: 0
       }

       #view-casestudy .dl-row .lbl {
         color: #666
       }

       #view-casestudy .dl-row b {
         margin-left: auto;
         text-align: right;
         color: var(--ink);
         font-weight: 700
       }

       #view-casestudy .dl-row b.navy {
         color: var(--navy)
       }

       #view-casestudy .dl-row b.green {
         color: var(--green)
       }

       #view-casestudy .dl-row b.amber {
         color: var(--amber)
       }

       #view-casestudy .sect-block {
         border-top: 1.5px solid var(--line);
         margin-top: 18px;
         padding-top: 16px
       }

       #view-casestudy .sect-block .dh {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .14em;
         color: #a8a8a3;
         margin-bottom: 11px
       }

       #view-casestudy .prereq {
         font-size: 13px;
         color: #555;
         line-height: 1.55;
         margin: 0
       }

       #view-casestudy .materials {
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: 10px;
         margin: 0;
         padding: 0
       }

       #view-casestudy .materials li {
         display: flex;
         align-items: flex-start;
         gap: 9px;
         font-size: 13px;
         color: #3f3f3f
       }

       #view-casestudy .materials li svg {
         width: 15px;
         height: 15px;
         stroke: var(--green);
         fill: none;
         flex-shrink: 0;
         margin-top: 2px
       }

       #view-casestudy .materials li .muted {
         color: #9a9a95;
         font-size: 12px
       }

       #view-casestudy .taught {
         border-top: 1.5px solid var(--line);
         margin-top: 18px;
         padding-top: 16px
       }

       #view-casestudy .taught .dh {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .14em;
         color: #a8a8a3;
         margin-bottom: 12px
       }

       #view-casestudy .taught .schools {
         display: flex;
         flex-wrap: wrap;
         gap: 8px
       }

       #view-casestudy .school {
         font-size: 12px;
         font-weight: 600;
         color: #4d4d4d;
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 6px 13px
       }

       #view-casestudy

       /* CHECKOUT MODAL */
       .modal-scrim {
         position: fixed;
         inset: 0;
         background: rgba(10, 12, 24, .55);
         backdrop-filter: blur(3px);
         display: none;
         align-items: center;
         justify-content: center;
         z-index: 200;
         padding: 24px
       }

       #view-casestudy .modal-scrim.open {
         display: flex;
         animation: fadeIn .2s ease
       }

       @keyframes fadeIn {
         from {
           opacity: 0
         }

         to {
           opacity: 1
         }
       }

       #view-casestudy .modal {
         background: #fff;
         border-radius: 0;
         width: 100%;
         max-width: 440px;
         padding: 28px;
         position: relative;
         max-height: 92vh;
         overflow-y: auto;
         animation: popIn .25s cubic-bezier(.2, .7, .3, 1)
       }

       #view-casestudy .modal-wide {
         max-width: 500px
       }

       @keyframes popIn {
         from {
           opacity: 0;
           transform: translateY(12px) scale(.98)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       #view-casestudy .modal-close {
         position: absolute;
         top: 16px;
         right: 18px;
         background: none;
         border: none;
         font-size: 26px;
         line-height: 1;
         color: #999;
         cursor: pointer;
         transition: .15s;
         z-index: 2
       }

       #view-casestudy .modal-close:hover {
         color: var(--ink)
       }

       #view-casestudy .modal h3 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 20px;
         color: var(--ink);
         margin-bottom: 18px
       }

       #view-casestudy

       /* stepper */
       .co-steps {
         display: flex;
         align-items: center;
         gap: 8px;
         margin-bottom: 22px;
         padding-right: 30px
       }

       #view-casestudy .co-step {
         display: flex;
         align-items: center;
         gap: 7px;
         font-size: 12.5px;
         font-weight: 600;
         color: #b0b0ab;
         white-space: nowrap
       }

       #view-casestudy .co-step .dot {
         width: 22px;
         height: 22px;
         border-radius: 0;
         border: 1.5px solid var(--line);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 11px;
         color: #b0b0ab;
         background: #fff;
         transition: .2s
       }

       #view-casestudy .co-step.active {
         color: var(--navy)
       }

       #view-casestudy .co-step.active .dot {
         background: var(--navy);
         border-color: var(--navy);
         color: #fff
       }

       #view-casestudy .co-step.done .dot {
         background: var(--green);
         border-color: var(--green);
         color: #fff
       }

       #view-casestudy .co-step.done {
         color: var(--green)
       }

       #view-casestudy .co-bar {
         flex: 1;
         height: 1.5px;
         background: var(--line)
       }

       #view-casestudy

       /* summary */
       .co-summary {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 14px;
         background: var(--offwhite);
         border-radius: 0;
         padding: 14px 16px;
         margin-bottom: 18px
       }

       #view-casestudy .co-summary.compact {
         padding: 12px 16px;
         margin-bottom: 18px
       }

       #view-casestudy .co-sum-title {
         font-weight: 700;
         font-size: 13.5px;
         color: var(--ink);
         line-height: 1.35
       }

       #view-casestudy .co-sum-meta {
         font-size: 12px;
         color: var(--muted);
         margin-top: 3px
       }

       #view-casestudy .co-sum-price {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 20px;
         color: var(--navy);
         white-space: nowrap
       }

       #view-casestudy

       /* review blocks */
       .co-block {
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 15px 16px;
         margin-bottom: 14px
       }

       #view-casestudy .co-block-h {
         display: flex;
         align-items: center;
         gap: 8px;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 13.5px;
         color: var(--ink);
         margin-bottom: 11px
       }

       #view-casestudy .co-block-h svg {
         width: 16px;
         height: 16px;
         stroke: var(--navy);
         fill: none
       }

       #view-casestudy .co-kv {
         display: flex;
         justify-content: space-between;
         gap: 12px;
         font-size: 13px;
         padding: 5px 0;
         color: #666
       }

       #view-casestudy .co-kv b {
         color: var(--ink);
         font-weight: 600;
         text-align: right
       }

       #view-casestudy .co-list {
         list-style: none;
         display: flex;
         flex-direction: column;
         gap: 9px;
         margin: 0;
         padding: 0
       }

       #view-casestudy .co-list li {
         display: flex;
         align-items: flex-start;
         gap: 9px;
         font-size: 13px;
         color: #3f3f3f
       }

       #view-casestudy .co-list li svg {
         width: 15px;
         height: 15px;
         stroke: var(--green);
         fill: none;
         flex-shrink: 0;
         margin-top: 2px
       }

       #view-casestudy .co-list .muted {
         color: #9a9a95;
         font-size: 12px
       }

       #view-casestudy .co-ol {
         margin: 0;
         padding-left: 18px;
         display: flex;
         flex-direction: column;
         gap: 7px
       }

       #view-casestudy .co-ol li {
         font-size: 13px;
         color: #555;
         line-height: 1.5
       }

       #view-casestudy .co-terms {
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 0 16px;
         margin-bottom: 16px
       }

       #view-casestudy .co-terms summary {
         cursor: pointer;
         font-size: 13px;
         font-weight: 600;
         color: var(--ink);
         padding: 14px 0;
         list-style: none
       }

       #view-casestudy .co-terms summary::-webkit-details-marker {
         display: none
       }

       #view-casestudy .co-terms summary::before {
         content: "+ ";
         color: var(--navy);
         font-weight: 700
       }

       #view-casestudy .co-terms[open] summary::before {
         content: "– "
       }

       #view-casestudy .co-terms p {
         font-size: 12.5px;
         color: #666;
         line-height: 1.6;
         padding-bottom: 14px;
         margin: 0
       }

       #view-casestudy .co-agree {
         display: flex;
         align-items: flex-start;
         gap: 10px;
         font-size: 13px;
         color: #444;
         margin-bottom: 18px;
         cursor: pointer
       }

       #view-casestudy .co-agree input {
         margin-top: 2px;
         width: 16px;
         height: 16px;
         accent-color: var(--navy);
         flex-shrink: 0
       }

       #view-casestudy .co-agree.shake {
         animation: shake .4s
       }

       @keyframes shake {

         0%,
         100% {
           transform: translateX(0)
         }

         25% {
           transform: translateX(-5px)
         }

         75% {
           transform: translateX(5px)
         }
       }

       #view-casestudy

       /* payment methods */
       .co-pm-label {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .1em;
         color: #a8a8a3;
         margin-bottom: 10px;
         text-transform: uppercase
       }

       #view-casestudy .co-pmlist {
         display: flex;
         flex-direction: column;
         gap: 10px;
         margin-bottom: 12px
       }

       #view-casestudy .co-pm {
         display: flex;
         align-items: center;
         gap: 12px;
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 13px 15px;
         cursor: pointer;
         transition: .15s
       }

       #view-casestudy .co-pm:hover {
         border-color: #c9c9c4
       }

       #view-casestudy .co-pm.selected {
         border-color: var(--navy);
         background: #f6f7fd
       }

       #view-casestudy .co-pm input {
         display: none
       }

       #view-casestudy .pm-radio {
         width: 18px;
         height: 18px;
         border-radius: 0;
         border: 1.6px solid #cfcfca;
         flex-shrink: 0;
         position: relative;
         transition: .15s
       }

       #view-casestudy .co-pm.selected .pm-radio {
         border-color: var(--navy)
       }

       #view-casestudy .co-pm.selected .pm-radio::after {
         content: "";
         position: absolute;
         inset: 3px;
         border-radius: 0;
         background: var(--navy)
       }

       #view-casestudy .pm-brand {
         font-family: 'Inter';
         font-weight: 800;
         font-size: 11px;
         color: #fff;
         padding: 5px 8px;
         border-radius: 0;
         min-width: 42px;
         text-align: center;
         flex-shrink: 0
       }

       #view-casestudy .pm-brand.visa {
         background: #1a1f71
       }

       #view-casestudy .pm-brand.mc {
         background: #eb001b
       }

       #view-casestudy .pm-brand.upi {
         background: #0f9d58
       }

       #view-casestudy .pm-info {
         display: flex;
         flex-direction: column;
         line-height: 1.3
       }

       #view-casestudy .pm-info b {
         font-size: 13.5px;
         color: var(--ink);
         font-weight: 600
       }

       #view-casestudy .pm-info span {
         font-size: 11.5px;
         color: var(--muted)
       }

       #view-casestudy .co-add {
         display: flex;
         align-items: center;
         gap: 8px;
         width: 100%;
         justify-content: center;
         border: 1.5px dashed var(--line);
         background: #fff;
         border-radius: 0;
         padding: 12px;
         font-size: 13.5px;
         font-weight: 600;
         color: var(--navy);
         cursor: pointer;
         transition: .15s;
         margin-bottom: 16px
       }

       #view-casestudy .co-add:hover {
         border-color: var(--navy);
         background: #f6f7fd
       }

       #view-casestudy .co-add svg {
         width: 16px;
         height: 16px;
         stroke: currentColor;
         fill: none
       }

       #view-casestudy .co-addform {
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 16px;
         margin-bottom: 16px
       }

       #view-casestudy .co-addbtns {
         display: flex;
         gap: 10px;
         margin-top: 4px
       }

       #view-casestudy .co-ghost {
         flex: 1;
         background: #fff;
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 10px;
         font-size: 13.5px;
         font-weight: 600;
         color: var(--ink);
         cursor: pointer;
         transition: .15s
       }

       #view-casestudy .co-ghost:hover {
         border-color: var(--ink)
       }

       #view-casestudy .co-solid {
         flex: 1;
         background: var(--navy);
         border: none;
         border-radius: 0;
         padding: 10px;
         font-size: 13.5px;
         font-weight: 600;
         color: #fff;
         cursor: pointer;
         transition: .15s
       }

       #view-casestudy .co-solid:hover {
         background: #001c5e
       }

       #view-casestudy

       /* form inputs */
       .co-label {
         display: block;
         font-size: 12px;
         font-weight: 600;
         color: #555;
         margin-bottom: 6px
       }

       #view-casestudy .co-input {
         width: 100%;
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 11px 13px;
         font-size: 14px;
         font-family: inherit;
         color: var(--ink);
         transition: .15s;
         margin-bottom: 15px
       }

       #view-casestudy .co-input::placeholder {
         color: #b3b3ae
       }

       #view-casestudy .co-input:focus {
         outline: none;
         border-color: var(--navy);
         box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
       }

       #view-casestudy .co-card-wrap {
         position: relative;
         margin-bottom: 15px
       }

       #view-casestudy .co-card-wrap svg {
         position: absolute;
         left: 13px;
         top: 13px;
         width: 18px;
         height: 18px;
         stroke: var(--muted);
         fill: none
       }

       #view-casestudy .co-input.has-icon {
         padding-left: 40px;
         margin-bottom: 0
       }

       #view-casestudy .co-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 14px
       }

       #view-casestudy .co-error {
         color: var(--red);
         font-size: 13px;
         font-weight: 600;
         margin-bottom: 12px;
         min-height: 18px
       }

       #view-casestudy

       /* pay row */
       .co-payrow {
         display: flex;
         gap: 10px;
         align-items: stretch;
         margin-top: 4px
       }

       #view-casestudy .co-back {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         background: #fff;
         border: 1.5px solid var(--line);
         border-radius: 0;
         padding: 0 16px;
         font-size: 13.5px;
         font-weight: 600;
         color: var(--ink);
         cursor: pointer;
         transition: .15s
       }

       #view-casestudy .co-back:hover {
         border-color: var(--ink)
       }

       #view-casestudy .co-pay {
         width: 100%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         background: var(--black);
         color: #fff;
         border: none;
         border-radius: 0;
         padding: 14px;
         font-weight: 700;
         font-size: 15px;
         cursor: pointer;
         transition: .18s;
         margin-top: 4px
       }

       #view-casestudy .co-pay:hover {
         background: #2a2a2a
       }

       #view-casestudy .co-pay:disabled {
         opacity: .7;
         cursor: default
       }

       #view-casestudy .co-spinner {
         width: 16px;
         height: 16px;
         border: 2px solid rgba(255, 255, 255, .35);
         border-top-color: #fff;
         border-radius: 0;
         animation: spin .7s linear infinite
       }

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

       #view-casestudy .co-secure {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 7px;
         font-size: 12px;
         color: var(--muted);
         margin-top: 14px;
         text-align: center
       }

       #view-casestudy .co-secure svg {
         width: 14px;
         height: 14px;
         stroke: var(--muted);
         fill: none
       }

       #view-casestudy

       /* thank you */
       .co-check {
         width: 64px;
         height: 64px;
         border-radius: 0;
         background: #e9f6ef;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 6px auto 18px
       }

       #view-casestudy .co-check svg {
         width: 30px;
         height: 30px;
         stroke: var(--green);
         fill: none
       }

       #view-casestudy .co-success-msg {
         font-size: 14px;
         color: #555;
         text-align: center;
         line-height: 1.6;
         margin: 0 0 22px
       }

       #view-casestudy .co-success-msg b {
         color: var(--ink)
       }

       #view-casestudy .co-done-btns {
         display: flex;
         flex-direction: column;
         gap: 10px
       }

       #view-casestudy .co-solid.wide,
       #view-casestudy .co-ghost.wide {
         flex: none;
         width: 100%;
         padding: 13px
       }

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

       #view-casestudy

       /* RESPONSIVE */
       @media(max-width:1180px) {
         .layout {
           grid-template-columns: minmax(0, 1fr) 300px;
           gap: 32px
         }

         .toc {
           display: none
         }
       }

       @media(max-width:900px) {
         #view-casestudy .layout {
           grid-template-columns: 1fr;
           gap: 0
         }

         #view-casestudy .buy {
           position: static;
           order: -1;
           margin-bottom: 30px
         }

         #view-casestudy .stat-row {
           grid-template-columns: repeat(2, 1fr)
         }

         #view-casestudy .cardgrid {
           grid-template-columns: 1fr
         }

         #view-casestudy .navlinks {
           display: none
         }
       }

       @media(max-width:560px) {
         #view-casestudy .meta-strip {
           gap: 14px
         }

         #view-casestudy .bar-row {
           grid-template-columns: 110px 1fr 40px;
           gap: 10px
         }

         #view-casestudy table {
           font-size: 12.5px
         }

         #view-casestudy thead th,
         #view-casestudy tbody td {
           padding: 10px 10px
         }
       }

       @media(prefers-reduced-motion:reduce) {
         #view-casestudy {
           transition: none !important
         }
       }

       /* ===== VIRTUAL ME ===== */
       #view-virtualme .wrap {
         max-width: 100%;
         margin: 0 auto;
         padding: 0 28px
       }

       #view-virtualme .vm-eyebrow {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .16em;
         color: #a8a8a3;
         display: block;
         margin-bottom: 14px
       }

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

       #view-virtualme .btn-ghost {
         background: #fff;
         border: 1.5px solid #1a1a1a;
         color: #1a1a1a
       }

       #view-virtualme .btn-ghost:hover {
         background: #1a1a1a;
         color: #fff
       }

       #view-virtualme .btn-dark {
         background: #0d0d0d;
         color: #fff
       }

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

       /* hero */
       #view-virtualme .vm-hero {
         background: #f4f4f2;
         border-bottom: 1.5px solid #e6e6e3;
         padding: 60px 0
       }

       #view-virtualme .vm-hero-grid {
         display: grid;
         grid-template-columns: 1.05fr .95fr;
         gap: 48px;
         align-items: center
       }

       #view-virtualme .vm-hero-text h1 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: clamp(28px, 3.8vw, 42px);
         letter-spacing: -0.02em;
         line-height: 1.1;
         color: #1a1a1a
       }

       #view-virtualme .vm-hero-text p {
         font-size: 16.5px;
         color: #555;
         line-height: 1.6;
         margin-top: 18px;
         max-width: 54ch
       }

       #view-virtualme .vm-hero-btns {
         display: flex;
         gap: 12px;
         margin-top: 26px;
         flex-wrap: wrap
       }

       /* chat card (shared look) */
       #view-virtualme .vm-hero-card,
       #view-virtualme .vm-demo-wrap {
         background: #0d0d0d;
         border-radius: 0;
         padding: 22px;
         color: #fff
       }

       #view-virtualme .vm-demo-wrap {
         max-width: 620px;
         margin: 0 auto
       }

       #view-virtualme .vm-chat-head {
         display: flex;
         align-items: center;
         gap: 12px;
         padding-bottom: 16px;
         margin-bottom: 16px;
         border-bottom: 1.5px solid #262626
       }

       #view-virtualme .vm-chat-av {
         width: 40px;
         height: 40px;
         border-radius: 0;
         background: #002671;
         color: #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14px;
         flex-shrink: 0
       }

       #view-virtualme .vm-chat-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px;
         color: #fff
       }

       #view-virtualme .vm-chat-sub {
         font-size: 12px;
         color: #9a9a9a;
         display: flex;
         align-items: center;
         gap: 6px;
         margin-top: 2px
       }

       #view-virtualme .vm-dot {
         width: 7px;
         height: 7px;
         border-radius: 0;
         background: #1f9d57;
         box-shadow: 0 0 0 3px rgba(31, 157, 87, .25)
       }

       #view-virtualme .vm-bubble {
         max-width: 84%;
         font-size: 14px;
         line-height: 1.5;
         padding: 11px 15px;
         border-radius: 0;
         margin-bottom: 11px
       }

       #view-virtualme .vm-bubble.student {
         background: #262626;
         color: #e6e6e6;
         margin-left: auto;
         border-bottom-right-radius: 4px
       }

       #view-virtualme .vm-bubble.avatar {
         background: #eef0fb;
         color: #1a2a52;
         border-bottom-left-radius: 4px
       }

       #view-virtualme .vm-chat-foot {
         font-size: 11.5px;
         color: #777;
         text-align: center;
         margin-top: 14px;
         padding-top: 14px;
         border-top: 1.5px solid #262626
       }

       /* heads */
       #view-virtualme .vm-head {
         text-align: center;
         max-width: 680px;
         margin: 0 auto 36px
       }

       #view-virtualme .vm-block {
         padding: 64px 0 0
       }

       #view-virtualme .vm-head h2 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: clamp(24px, 3vw, 32px);
         letter-spacing: -0.02em;
         color: #1a1a1a
       }

       #view-virtualme .vm-head p {
         font-size: 16px;
         color: #6b6b6b;
         line-height: 1.6;
         margin-top: 12px
       }

       #view-virtualme .vm-ic {
         width: 44px;
         height: 44px;
         border-radius: 0;
         background: #eef0fb;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 14px
       }

       #view-virtualme .vm-ic svg {
         width: 22px;
         height: 22px;
         stroke: #002671;
         fill: none
       }

       #view-virtualme .vm-ic.dark {
         background: rgba(255, 255, 255, .08)
       }

       #view-virtualme .vm-ic.dark svg {
         stroke: #fff
       }

       /* what is it */
       #view-virtualme .vm-what {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px
       }

       #view-virtualme .vm-what-card {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 22px;
         transition: .2s
       }

       #view-virtualme .vm-what-card:hover {
         border-color: #d6d6d1;
         transform: translateY(-2px);
         box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
       }

       #view-virtualme .vm-what-card h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15.5px;
         color: #1a1a1a;
         margin-bottom: 7px
       }

       #view-virtualme .vm-what-card p {
         font-size: 13.5px;
         color: #555;
         line-height: 1.55
       }

       /* bands */
       #view-virtualme .vm-band {
         background: #0d0d0d;
         color: #fff;
         margin-top: 64px;
         padding: 64px 0
       }

       #view-virtualme .vm-band .vm-head h2 {
         color: #fff
       }

       #view-virtualme .vm-band .vm-head p {
         color: #b9b9b9
       }

       #view-virtualme .vm-band .vm-eyebrow {
         color: #777
       }

       #view-virtualme .vm-band.light {
         background: #f4f4f2;
         color: #1a1a1a;
         border-top: 1.5px solid #e6e6e3;
         border-bottom: 1.5px solid #e6e6e3
       }

       #view-virtualme .vm-band.light .vm-head h2,
       #view-virtualme .vm-band.light .vm-setup-text h2 {
         color: #1a1a1a
       }

       #view-virtualme .vm-band.light .vm-eyebrow {
         color: #a8a8a3
       }

       /* avatar types */
       #view-virtualme .vm-types {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px
       }

       #view-virtualme .vm-type {
         background: #161616;
         border: 1.5px solid #262626;
         border-radius: 0;
         padding: 28px;
         position: relative
       }

       #view-virtualme .vm-type-tag {
         display: inline-block;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .1em;
         color: #1f9d57;
         background: rgba(31, 157, 87, .12);
         padding: 5px 11px;
         border-radius: 0;
         margin-bottom: 16px
       }

       #view-virtualme .vm-type-tag.future {
         color: #e0a23a;
         background: rgba(224, 162, 58, .12)
       }

       #view-virtualme .vm-type h3 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 20px;
         color: #fff;
         margin-bottom: 8px
       }

       #view-virtualme .vm-type p {
         font-size: 14.5px;
         color: #b0b0b0;
         line-height: 1.55;
         margin-bottom: 16px
       }

       #view-virtualme .vm-ticks {
         list-style: none;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
         gap: 10px
       }

       #view-virtualme .vm-ticks li {
         display: flex;
         gap: 10px;
         align-items: flex-start;
         font-size: 14px;
         color: #cfcfcf
       }

       #view-virtualme .vm-ticks li svg {
         width: 18px;
         height: 18px;
         flex-shrink: 0;
         fill: none;
         margin-top: 1px
       }

       /* build steps */
       #view-virtualme .vm-steps {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px
       }

       #view-virtualme .vm-step {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 22px;
         position: relative;
         transition: .2s
       }

       #view-virtualme .vm-step:hover {
         border-color: #d6d6d1;
         transform: translateY(-2px);
         box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
       }

       #view-virtualme .vm-step-n {
         position: absolute;
         top: 18px;
         right: 20px;
         font-family: 'Inter';
         font-weight: 800;
         font-size: 30px;
         color: #eef0fb
       }

       #view-virtualme .vm-step h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15.5px;
         color: #1a1a1a;
         margin-bottom: 7px
       }

       #view-virtualme .vm-step p {
         font-size: 13.5px;
         color: #555;
         line-height: 1.55
       }

       /* setup */
       #view-virtualme .vm-setup-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 48px;
         align-items: center
       }

       #view-virtualme .vm-setup-text p {
         font-size: 16px;
         color: #6b6b6b;
         line-height: 1.6;
         margin: 14px 0 20px
       }

       #view-virtualme .vm-chips {
         display: flex;
         flex-wrap: wrap;
         gap: 9px
       }

       #view-virtualme .vm-chip {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 7px 13px;
         font-size: 12.5px;
         font-weight: 600;
         color: #444
       }

       #view-virtualme .vm-chip svg {
         width: 14px;
         height: 14px;
         fill: none
       }

       #view-virtualme .vm-setup-panel {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 8px 22px
       }

       #view-virtualme .vm-panel-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 16px;
         padding: 15px 0;
         border-bottom: 1px solid #f0f0ee
       }

       #view-virtualme .vm-panel-row:last-child {
         border-bottom: none
       }

       #view-virtualme .vm-panel-row label {
         font-size: 12.5px;
         font-weight: 700;
         color: #8a8a86;
         letter-spacing: .04em
       }

       #view-virtualme .vm-field {
         font-size: 14px;
         font-weight: 600;
         color: #1a1a1a;
         text-align: right
       }

       #view-virtualme .vm-field.locked {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         color: #1f9d57
       }

       #view-virtualme .vm-field.locked svg {
         width: 15px;
         height: 15px;
         stroke: #1f9d57;
         fill: none
       }

       #view-virtualme .vm-toggle {
         display: inline-flex;
         background: #f4f4f2;
         border-radius: 0;
         padding: 3px
       }

       #view-virtualme .vm-toggle-opt {
         font-size: 12.5px;
         font-weight: 600;
         color: #8a8a86;
         padding: 6px 13px;
         border-radius: 30px
       }

       #view-virtualme .vm-toggle-opt.active {
         background: #002671;
         color: #fff
       }

       /* who */
       #view-virtualme .vm-who {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px
       }

       #view-virtualme .vm-who-card {
         background: #161616;
         border: 1.5px solid #262626;
         border-radius: 0;
         padding: 24px;
         transition: .2s
       }

       #view-virtualme .vm-who-card:hover {
         border-color: #3a3a3a;
         background: #1b1b1b
       }

       #view-virtualme .vm-who-card h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         color: #fff;
         margin-bottom: 7px
       }

       #view-virtualme .vm-who-card p {
         font-size: 13.5px;
         color: #b0b0b0;
         line-height: 1.55
       }

       /* insights */
       #view-virtualme .vm-insights {
         display: grid;
         grid-template-columns: 1fr 1.1fr;
         gap: 40px;
         align-items: center;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 40px
       }

       #view-virtualme .vm-insights-text h2 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: clamp(22px, 2.6vw, 28px);
         color: #1a1a1a;
         letter-spacing: -0.02em
       }

       #view-virtualme .vm-insights-text p {
         font-size: 15px;
         color: #6b6b6b;
         line-height: 1.6;
         margin-top: 12px
       }

       #view-virtualme .vm-insights-stats {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 14px
       }

       #view-virtualme .vm-stat {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 18px;
         text-align: center
       }

       #view-virtualme .vm-stat .v {
         width: 42px;
         height: 42px;
         border-radius: 0;
         background: #eef0fb;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 12px
       }

       #view-virtualme .vm-stat .v svg {
         width: 21px;
         height: 21px;
         stroke: #002671;
         fill: none
       }

       #view-virtualme .vm-stat h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 13.5px;
         color: #1a1a1a;
         margin-bottom: 5px
       }

       #view-virtualme .vm-stat p {
         font-size: 12px;
         color: #6b6b6b;
         line-height: 1.45
       }

       /* cta */
       #view-virtualme .vm-cta {
         text-align: center;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 54px 30px;
         margin: 64px 0 80px;
         background: #f4f4f2
       }

       #view-virtualme .vm-cta h2 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: clamp(24px, 3vw, 34px);
         color: #1a1a1a
       }

       #view-virtualme .vm-cta p {
         font-size: 16px;
         color: #6b6b6b;
         margin-top: 12px;
         max-width: 54ch;
         margin-left: auto;
         margin-right: auto;
         line-height: 1.6
       }

       #view-virtualme .vm-cta-btns {
         display: flex;
         gap: 12px;
         justify-content: center;
         margin-top: 26px;
         flex-wrap: wrap
       }

       @media(max-width:1000px) {

         #view-virtualme .vm-what,
         #view-virtualme .vm-steps,
         #view-virtualme .vm-who {
           grid-template-columns: repeat(2, 1fr)
         }
       }

       @media(max-width:900px) {

         #view-virtualme .vm-hero-grid,
         #view-virtualme .vm-setup-grid,
         #view-virtualme .vm-insights {
           grid-template-columns: 1fr;
           gap: 30px
         }

         #view-virtualme .vm-types {
           grid-template-columns: 1fr
         }

         #view-virtualme .vm-insights-stats {
           grid-template-columns: repeat(3, 1fr)
         }
       }

       @media(max-width:560px) {

         #view-virtualme .vm-what,
         #view-virtualme .vm-steps,
         #view-virtualme .vm-who {
           grid-template-columns: 1fr
         }

         #view-virtualme .vm-insights-stats {
           grid-template-columns: 1fr
         }

         #view-virtualme .wrap {
           padding: 0 20px
         }
       }

       /* ===== FEED ===== */
       #view-feed {
         background: #f4f4f2;
         min-height: 100vh
       }

       #view-feed .fd-wrap {
         max-width: 1180px;
         margin: 0 auto;
         padding: 0 28px
       }

       #view-feed .fd-layout {
         display: grid;
         grid-template-columns: 248px minmax(0, 1fr) 280px;
         gap: 24px;
         align-items: start;
         padding: 26px 0 70px
       }

       #view-feed .fd-left,
       #view-feed .fd-right {
         position: sticky;
         top: 20px;
         display: flex;
         flex-direction: column;
         gap: 16px
       }

       /* profile mini */
       #view-feed .fd-profile {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         text-align: center;
         padding-bottom: 18px
       }

       #view-feed .fd-prof-cover {
         height: 56px;
         background: linear-gradient(120deg, #002671, #3a52a8)
       }

       #view-feed .fd-prof-av {
         width: 64px;
         height: 64px;
         border-radius: 0;
         border: 3px solid #fff;
         background: #002671;
         color: #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         margin-top: -32px;
         overflow: hidden
       }

       #view-feed .fd-prof-av img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 50%
       }

       #view-feed .fd-prof-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         color: #1a1a1a;
         margin-top: 10px
       }

       #view-feed .fd-prof-role {
         font-size: 12.5px;
         color: #6b6b6b;
         margin-top: 3px
       }

       #view-feed .fd-prof-stats {
         display: flex;
         justify-content: center;
         gap: 26px;
         margin: 16px 0 14px;
         padding: 14px 0;
         border-top: 1px solid #f0f0ee;
         border-bottom: 1px solid #f0f0ee
       }

       #view-feed .fd-prof-stats b {
         display: block;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         color: #002671
       }

       #view-feed .fd-prof-stats span {
         font-size: 11px;
         color: #8a8a86
       }

       #view-feed .fd-prof-link {
         background: none;
         border: none;
         color: #002671;
         font-size: 12.5px;
         font-weight: 600;
         cursor: pointer
       }

       #view-feed .fd-prof-link:hover {
         text-decoration: underline
       }

       /* shortcuts */
       #view-feed .fd-shortcuts {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 16px
       }

       #view-feed .fd-sc-title {
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .1em;
         color: #a8a8a3;
         text-transform: uppercase;
         margin-bottom: 10px
       }

       #view-feed .fd-shortcuts a {
         display: flex;
         align-items: center;
         gap: 10px;
         font-size: 13.5px;
         color: #444;
         padding: 9px 8px;
         border-radius: 0;
         transition: .15s
       }

       #view-feed .fd-shortcuts a:hover {
         background: #f4f4f2;
         color: #1a1a1a
       }

       #view-feed .fd-shortcuts a svg {
         width: 17px;
         height: 17px;
         stroke: #002671;
         fill: none
       }

       /* center */
       #view-feed .fd-center {
         min-width: 0;
         display: flex;
         flex-direction: column;
         gap: 16px
       }

       /* composer */
       #view-feed .fd-composer {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 16px
       }

       #view-feed .fd-comp-top {
         display: flex;
         align-items: center;
         gap: 12px
       }

       #view-feed .fd-comp-av {
         width: 46px;
         height: 46px;
         border-radius: 0;
         background: #002671;
         color: #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 13px;
         flex-shrink: 0;
         overflow: hidden
       }

       #view-feed .fd-comp-av img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 50%
       }

       #view-feed .fd-comp-trigger {
         flex: 1;
         text-align: left;
         background: #f4f4f2;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 13px 20px;
         font-size: 14px;
         color: #8a8a86;
         cursor: pointer;
         transition: .15s;
         font-family: inherit
       }

       #view-feed .fd-comp-trigger:hover {
         background: #ececeb;
         border-color: #d6d6d1
       }

       #view-feed .fd-comp-actions {
         display: flex;
         gap: 6px;
         margin-top: 12px
       }

       #view-feed .fd-comp-act {
         flex: 1;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         background: none;
         border: none;
         border-radius: 0;
         padding: 9px;
         font-size: 13px;
         font-weight: 600;
         color: #5a5a5a;
         cursor: pointer;
         transition: .15s
       }

       #view-feed .fd-comp-act:hover {
         background: #f4f4f2;
         color: #1a1a1a
       }

       #view-feed .fd-comp-act svg {
         width: 18px;
         height: 18px;
         stroke: #002671;
         fill: none
       }

       #view-feed .fd-comp-edit {
         margin-top: 14px;
         border-top: 1px solid #f0f0ee;
         padding-top: 14px
       }

       #view-feed .fd-comp-edit textarea {
         width: 100%;
         min-height: 90px;
         border: none;
         resize: vertical;
         font-family: inherit;
         font-size: 15px;
         color: #1a1a1a;
         line-height: 1.5
       }

       #view-feed .fd-comp-edit textarea:focus {
         outline: none
       }

       #view-feed .fd-comp-edit textarea::placeholder {
         color: #b3b3ae
       }

       #view-feed .fd-comp-foot {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 14px;
         margin-top: 10px
       }

       #view-feed .fd-comp-hint {
         font-size: 12px;
         color: #8a8a86
       }

       #view-feed .fd-comp-hint b {
         color: #444
       }

       #view-feed .fd-comp-btns {
         display: flex;
         gap: 8px
       }

       #view-feed .fd-ghost {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 8px 18px;
         font-size: 13px;
         font-weight: 600;
         color: #444;
         cursor: pointer
       }

       #view-feed .fd-ghost:hover {
         border-color: #1a1a1a
       }

       #view-feed .fd-solid {
         background: #0d0d0d;
         border: none;
         border-radius: 0;
         padding: 8px 22px;
         font-size: 13px;
         font-weight: 600;
         color: #fff;
         cursor: pointer;
         transition: .15s
       }

       #view-feed .fd-solid:hover {
         background: #2a2a2a
       }

       #view-feed .fd-solid:disabled {
         opacity: .4;
         cursor: default
       }

       /* sort bar */
       #view-feed .fd-sortbar {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 0 4px
       }

       #view-feed .fd-line {
         flex: 1;
         height: 1px;
         background: #e0e0dc
       }

       #view-feed .fd-sort {
         font-size: 12.5px;
         font-weight: 600;
         color: #6b6b6b;
         cursor: pointer
       }

       /* post card */
       #view-feed .fd-post {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         animation: fdIn .4s ease
       }

       @keyframes fdIn {
         from {
           opacity: 0;
           transform: translateY(10px)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       #view-feed .fd-post-head {
         display: flex;
         align-items: flex-start;
         gap: 12px;
         padding: 16px 18px 0
       }

       #view-feed .fd-post-av {
         width: 46px;
         height: 46px;
         border-radius: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14px;
         color: #fff;
         flex-shrink: 0;
         overflow: hidden
       }

       #view-feed .fd-post-av img {
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-feed .fd-post-id {
         flex: 1;
         min-width: 0
       }

       #view-feed .fd-post-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14.5px;
         color: #1a1a1a;
         display: flex;
         align-items: center;
         gap: 7px
       }

       #view-feed .fd-badge {
         font-size: 9.5px;
         font-weight: 700;
         letter-spacing: .06em;
         color: #002671;
         background: #eef0fb;
         padding: 2px 7px;
         border-radius: 20px
       }

       #view-feed .fd-post-role {
         font-size: 12px;
         color: #6b6b6b;
         margin-top: 1px
       }

       #view-feed .fd-post-time {
         font-size: 11.5px;
         color: #a0a09a;
         margin-top: 1px
       }

       #view-feed .fd-post-more {
         background: none;
         border: none;
         color: #a0a09a;
         cursor: pointer;
         font-size: 20px;
         line-height: 1;
         padding: 0 6px
       }

       #view-feed .fd-post-body {
         padding: 12px 18px 0;
         font-size: 14.5px;
         color: #2f2f2f;
         line-height: 1.6;
         white-space: pre-wrap
       }

       #view-feed .fd-post-body b {
         color: #1a1a1a
       }

       #view-feed .fd-post-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         padding: 10px 18px 0
       }

       #view-feed .fd-ptag {
         font-size: 12px;
         font-weight: 600;
         color: #002671
       }

       /* attached case preview */
       #view-feed .fd-case {
         margin: 14px 18px 0;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         cursor: pointer;
         transition: .15s
       }

       #view-feed .fd-case:hover {
         border-color: #c9c9c4;
         background: #fafafa
       }

       #view-feed .fd-case-media {
         height: 150px;
         background-size: cover;
         background-position: center
       }

       #view-feed .fd-case-info {
         padding: 13px 15px
       }

       #view-feed .fd-case-cat {
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .08em;
         color: #002671;
         text-transform: uppercase
       }

       #view-feed .fd-case-title {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px;
         color: #1a1a1a;
         margin: 5px 0 4px
       }

       #view-feed .fd-case-meta {
         font-size: 12px;
         color: #6b6b6b
       }

       /* image attachment */
       #view-feed .fd-post-img {
         margin-top: 14px;
         width: 100%;
         max-height: 380px;
         object-fit: cover
       }

       /* engagement bar */
       #view-feed .fd-post-stats {
         display: flex;
         align-items: center;
         justify-content: space-between;
         font-size: 12px;
         color: #8a8a86;
         padding: 12px 18px 10px
       }

       #view-feed .fd-post-stats .likes {
         display: flex;
         align-items: center;
         gap: 6px
       }

       #view-feed .fd-likeic {
         width: 16px;
         height: 16px;
         border-radius: 0;
         background: #002671;
         display: inline-flex;
         align-items: center;
         justify-content: center
       }

       #view-feed .fd-likeic svg {
         width: 9px;
         height: 9px;
         stroke: #fff;
         fill: none;
         stroke-width: 2.5
       }

       #view-feed .fd-post-actions {
         display: flex;
         border-top: 1px solid #f0f0ee
       }

       #view-feed .fd-act {
         flex: 1;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         background: none;
         border: none;
         padding: 11px;
         font-size: 13px;
         font-weight: 600;
         color: #5a5a5a;
         cursor: pointer;
         transition: .15s
       }

       #view-feed .fd-act:hover {
         background: #f4f4f2
       }

       #view-feed .fd-act svg {
         width: 18px;
         height: 18px;
         stroke: currentColor;
         fill: none
       }

       #view-feed .fd-act.liked {
         color: #002671
       }

       #view-feed .fd-act.liked svg {
         fill: #002671;
         stroke: #002671
       }

       /* comments */
       #view-feed .fd-comments {
         padding: 6px 18px 16px;
         border-top: 1px solid #f0f0ee;
         display: none
       }

       #view-feed .fd-comments.open {
         display: block
       }

       #view-feed .fd-comment-box {
         display: flex;
         gap: 10px;
         align-items: center;
         padding: 12px 0
       }

       #view-feed .fd-comment-av {
         width: 34px;
         height: 34px;
         border-radius: 0;
         background: #002671;
         color: #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-weight: 700;
         font-size: 11px;
         flex-shrink: 0;
         overflow: hidden
       }

       #view-feed .fd-comment-av img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 50%
       }

       #view-feed .fd-comment-input {
         flex: 1;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 9px 16px;
         font-size: 13.5px;
         font-family: inherit
       }

       #view-feed .fd-comment-input:focus {
         outline: none;
         border-color: #002671
       }

       #view-feed .fd-comment {
         display: flex;
         gap: 10px;
         margin-top: 10px
       }

       #view-feed .fd-comment .fd-c-body {
         background: #f4f4f2;
         border-radius: 0;
         padding: 9px 14px;
         flex: 1
       }

       #view-feed .fd-comment .fd-c-name {
         font-weight: 700;
         font-size: 12.5px;
         color: #1a1a1a
       }

       #view-feed .fd-comment .fd-c-text {
         font-size: 13px;
         color: #444;
         margin-top: 2px
       }

       /* right rail */
       #view-feed .fd-panel {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 16px
       }

       #view-feed .fd-panel-title {
         font-size: 13px;
         font-weight: 700;
         color: #1a1a1a;
         font-family: 'Inter';
         margin-bottom: 14px
       }

       #view-feed .fd-sug {
         display: flex;
         align-items: center;
         gap: 11px;
         padding: 9px 0
       }

       #view-feed .fd-sug-av {
         width: 40px;
         height: 40px;
         border-radius: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-weight: 700;
         font-size: 12px;
         flex-shrink: 0;
         overflow: hidden
       }

       #view-feed .fd-sug-av img {
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-feed .fd-sug-id {
         flex: 1;
         min-width: 0
       }

       #view-feed .fd-sug-name {
         font-size: 13px;
         font-weight: 700;
         color: #1a1a1a;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
       }

       #view-feed .fd-sug-role {
         font-size: 11.5px;
         color: #6b6b6b;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
       }

       #view-feed .fd-sug-btn {
         border: 1.5px solid #002671;
         color: #002671;
         background: #fff;
         border-radius: 0;
         font-size: 12px;
         font-weight: 600;
         padding: 5px 13px;
         cursor: pointer;
         transition: .15s;
         flex-shrink: 0
       }

       #view-feed .fd-sug-btn:hover {
         background: #002671;
         color: #fff
       }

       #view-feed .fd-sug-btn.done {
         border-color: #e6e6e3;
         color: #8a8a86;
         background: #f4f4f2
       }

       #view-feed .fd-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 8px
       }

       #view-feed .fd-trend {
         font-size: 12.5px;
         font-weight: 600;
         color: #002671;
         background: #eef0fb;
         border-radius: 0;
         padding: 6px 12px;
         cursor: pointer
       }

       #view-feed .fd-foot-note {
         font-size: 11.5px;
         color: #a0a09a;
         text-align: center;
         padding: 4px
       }

       #view-feed .fd-more-wrap {
         display: flex;
         justify-content: center;
         padding: 6px 0 0
       }

       #view-feed .fd-more {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         cursor: pointer;
         background: #fff;
         border: 1.5px solid #1a1a1a;
         border-radius: 0;
         padding: 12px 28px;
         font-size: 13.5px;
         font-weight: 600;
         color: #1a1a1a;
         transition: .2s
       }

       #view-feed .fd-more:hover {
         background: #1a1a1a;
         color: #fff
       }

       #view-feed .fd-more.is-done {
         display: none
       }

       @media(max-width:1080px) {
         #view-feed .fd-layout {
           grid-template-columns: minmax(0, 1fr) 280px
         }

         #view-feed .fd-left {
           display: none
         }
       }

       @media(max-width:860px) {
         #view-feed .fd-layout {
           grid-template-columns: 1fr
         }

         #view-feed .fd-right {
           display: none
         }
       }

       @media(max-width:560px) {
         #view-feed .fd-wrap {
           padding: 0 14px
         }

         #view-feed .fd-comp-act span {
           display: none
         }
       }

       /* ===== HOME: new sections (How Works / Who / Benefits) ===== */
       .hx-eyebrow {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .16em;
         color: #a8a8a3;
         display: block;
         margin-bottom: 14px
       }

       .hx-eyebrow.light {
         color: #888
       }

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

       .hx-head h2 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: clamp(26px, 3.4vw, 38px);
         letter-spacing: -0.02em;
         color: #0d0d0d;
         line-height: 1.12
       }

       .hx-head p {
         font-size: 16.5px;
         color: #6b6b6b;
         line-height: 1.6;
         margin-top: 14px
       }

       /* How works flow */
       .hx-works {
         padding: 80px 0px 80px 0px;
         background: #fff;
         /* border-top:1.5px solid #e6e6e3 */
       }

       .hx-flow {
         display: flex;
         align-items: stretch;
         justify-content: center;
         gap: 6px;
         flex-wrap: wrap
       }

       .hx-node {
         flex: 1 1 0;
         min-width: 200px;
         max-width: 250px;
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 26px 22px;
         position: relative;
         transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s
       }

       .hx-node:hover {
         transform: translateY(-5px);
         box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .25);
         border-color: #002671
       }

       .hx-node-ic {
         width: 50px;
         height: 50px;
         border-radius: 0;
         background: #eef0fb;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 16px;
         transition: .3s
       }

       .hx-node:hover .hx-node-ic {
         background: #002671
       }

       .hx-node-ic svg {
         width: 24px;
         height: 24px;
         stroke: #002671;
         fill: none;
         transition: .3s
       }

       .hx-node:hover .hx-node-ic svg {
         stroke: #fff
       }

       .hx-node-n {
         position: absolute;
         top: 22px;
         right: 24px;
         font-family: 'Inter';
         font-weight: 800;
         font-size: 26px;
         color: #eef0fb
       }

       .hx-node h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 17px;
         color: #0d0d0d;
         margin-bottom: 8px
       }

       .hx-node p {
         font-size: 13.5px;
         color: #555;
         line-height: 1.55
       }

       .hx-arrow {
         display: flex;
         align-items: center;
         color: #c9c9c4;
         flex: 0 0 auto
       }

       .hx-arrow svg {
         width: 26px;
         height: 26px;
         stroke: currentColor;
         fill: none
       }

       /* Who benefits */
       .hx-who {
         padding: 80px 0;
         background: #f4f4f2;
         border-top: 1.5px solid #e6e6e3
       }

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

       .hx-who-card {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 28px 24px;
         transition: transform .3s, box-shadow .3s, border-color .3s
       }

       .hx-who-card:hover {
         transform: translateY(-4px);
         box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .22);
         border-color: #d6d6d1
       }

       .hx-who-ic {
         width: 54px;
         height: 54px;
         border-radius: 0;
         background: linear-gradient(135deg, #002671, #3a52a8);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 18px
       }

       .hx-who-ic svg {
         width: 26px;
         height: 26px;
         stroke: #fff;
         fill: none
       }

       .hx-who-card h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 18px;
         color: #0d0d0d;
         margin-bottom: 9px
       }

       .hx-who-card p {
         font-size: 14px;
         color: #555;
         line-height: 1.55;
         margin-bottom: 16px
       }

       .hx-who-tag {
         display: inline-block;
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .04em;
         color: #002671;
         background: #eef0fb;
         border-radius: 0;
         padding: 6px 13px
       }

       /* Benefits (dark) */
       .hx-benefits {
         padding: 80px 0;
         background: #0d0d0d;
         color: #fff
       }

       .hx-benefits .hx-head h2 {
         color: #fff
       }

       .hx-benefits .hx-head p {
         color: #b9b9b9
       }

       .hx-ben-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px
       }

       .hx-ben-card {
         background: #161616;
         border: 1.5px solid #262626;
         border-radius: 0;
         padding: 24px 22px;
         transition: transform .3s, background .3s, border-color .3s
       }

       .hx-ben-card:hover {
         transform: translateY(-4px);
         background: #1b1b1b;
         border-color: #3a3a3a
       }

       .hx-ben-ic {
         width: 46px;
         height: 46px;
         border-radius: 0;
         background: rgba(255, 255, 255, .08);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 15px;
         transition: .3s
       }

       .hx-ben-card:hover .hx-ben-ic {
         background: #002671
       }

       .hx-ben-ic svg {
         width: 22px;
         height: 22px;
         stroke: #fff;
         fill: none
       }

       .hx-ben-card h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15.5px;
         color: #fff;
         margin-bottom: 8px
       }

       .hx-ben-card p {
         font-size: 13px;
         color: #aeaeae;
         line-height: 1.55
       }

       @media(max-width:1000px) {

         .hx-who-grid,
         .hx-ben-grid {
           grid-template-columns: repeat(2, 1fr)
         }

         .hx-flow {
           gap: 14px
         }

         .hx-arrow {
           display: none
         }

         .hx-node {
           max-width: none;
           flex-basis: calc(50% - 8px)
         }
       }

       @media(max-width:560px) {

         .hx-who-grid,
         .hx-ben-grid {
           grid-template-columns: 1fr
         }

         .hx-node {
           flex-basis: 100%
         }
       }

       /* ===== PROFILE ===== */
       #view-profile {
         background: #f4f4f2;
         min-height: 100vh
       }

       #view-profile .pf-wrap {
         max-width: 1180px;
         margin: 0 auto;
         padding: 0 28px 70px
       }

       /* hero */
       #view-profile .pf-hero {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         margin: 24px 0 22px
       }

       #view-profile .pf-hero-cover {
         height: 96px;
         background: linear-gradient(120deg, #002671, #3a52a8)
       }

       #view-profile .pf-hero-row {
         display: flex;
         align-items: flex-end;
         gap: 20px;
         padding: 0 28px 22px;
         margin-top: -40px
       }

       #view-profile .pf-hero-av {
         width: 104px;
         height: 104px;
         border-radius: 0;
         border: 4px solid #fff;
         background: #002671;
         overflow: hidden;
         flex-shrink: 0
       }

       #view-profile .pf-hero-av img {
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-profile .pf-hero-id {
         flex: 1;
         padding-bottom: 4px
       }

       #view-profile .pf-hero-id h1 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: 26px;
         color: #1a1a1a
       }

       #view-profile .pf-hero-id p {
         font-size: 13.5px;
         color: #6b6b6b;
         margin-top: 3px
       }

       #view-profile .pf-hero-stats {
         display: flex;
         align-items: center;
         gap: 14px;
         margin-top: 12px;
         font-size: 13px;
         color: #6b6b6b
       }

       #view-profile .pf-hero-stats b {
         color: #002671;
         font-family: 'Inter'
       }

       #view-profile .pf-sep {
         width: 1px;
         height: 14px;
         background: #e0e0dc
       }

       #view-profile .pf-hero-btn {
         align-self: center;
         border: 1.5px solid #1a1a1a;
         background: #fff;
         color: #1a1a1a;
         border-radius: 0;
         padding: 9px 18px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         transition: .18s;
         flex-shrink: 0
       }

       #view-profile .pf-hero-btn:hover {
         background: #1a1a1a;
         color: #fff
       }

       /* layout */
       #view-profile .pf-layout {
         display: grid;
         grid-template-columns: 240px 1fr;
         gap: 24px;
         align-items: start
       }

       /* tabs */
       #view-profile .pf-tabs {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 10px;
         position: sticky;
         top: 18px;
         display: flex;
         flex-direction: column;
         gap: 2px
       }

       #view-profile .pf-tab {
         display: flex;
         align-items: center;
         gap: 11px;
         width: 100%;
         text-align: left;
         background: none;
         border: none;
         border-radius: 0;
         padding: 11px 13px;
         font-size: 13.5px;
         font-weight: 600;
         color: #4a4a4a;
         cursor: pointer;
         transition: .15s;
         font-family: inherit
       }

       #view-profile .pf-tab svg {
         width: 18px;
         height: 18px;
         stroke: #8a8a86;
         fill: none;
         flex-shrink: 0;
         transition: .15s
       }

       #view-profile .pf-tab:hover {
         background: #f4f4f2;
         color: #1a1a1a
       }

       #view-profile .pf-tab.active {
         background: #002671;
         color: #fff
       }

       #view-profile .pf-tab.active svg {
         stroke: #fff
       }

       #view-profile .pf-tab.danger {
         color: #d4373a
       }

       #view-profile .pf-tab.danger svg {
         stroke: #d4373a
       }

       #view-profile .pf-tab.danger:hover {
         background: #fdecec
       }

       #view-profile .pf-tab-sep {
         height: 1px;
         background: #f0f0ee;
         margin: 6px 8px
       }

       /* content */
       #view-profile .pf-content {
         min-width: 0
       }

       #view-profile .pf-panel {
         display: none;
         animation: pfIn .35s ease
       }

       #view-profile .pf-panel.active {
         display: block
       }

       @keyframes pfIn {
         from {
           opacity: 0;
           transform: translateY(8px)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       #view-profile .pf-phead {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         gap: 6px 14px;
         margin-bottom: 20px
       }

       #view-profile .pf-phead h2 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: 24px;
         color: #1a1a1a;
         width: 100%
       }

       #view-profile .pf-phead p {
         font-size: 14px;
         color: #6b6b6b;
         margin-top: -2px
       }

       #view-profile .pf-card {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 24px;
         margin-bottom: 18px
       }

       #view-profile .pf-card-t {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px;
         color: #1a1a1a;
         margin-bottom: 18px
       }

       #view-profile .pf-grid2 {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px;
         margin-bottom: 16px
       }

       #view-profile .pf-field {
         display: flex;
         flex-direction: column;
         gap: 7px;
         margin-bottom: 16px
       }

       #view-profile .pf-field:last-child {
         margin-bottom: 0
       }

       #view-profile .pf-grid2 .pf-field {
         margin-bottom: 0
       }

       #view-profile .pf-field label {
         font-size: 12px;
         font-weight: 700;
         color: #8a8a86;
         letter-spacing: .03em
       }

       #view-profile .pf-field input,
       #view-profile .pf-field textarea {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 11px 14px;
         font-size: 14px;
         font-family: inherit;
         color: #1a1a1a;
         resize: vertical
       }

       #view-profile .pf-field input:focus,
       #view-profile .pf-field textarea:focus {
         outline: none;
         border-color: #002671;
         box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
       }

       #view-profile .pf-actions {
         display: flex;
         justify-content: flex-end;
         gap: 10px;
         margin-top: 18px
       }

       #view-profile .pf-btn {
         border-radius: 0;
         padding: 10px 22px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         font-family: inherit;
         transition: .18s
       }

       #view-profile .pf-btn.sm {
         padding: 8px 16px
       }

       #view-profile .pf-btn.ghost {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         color: #444
       }

       #view-profile .pf-btn.ghost:hover {
         border-color: #1a1a1a
       }

       #view-profile .pf-btn.solid {
         background: #0d0d0d;
         border: none;
         color: #fff
       }

       #view-profile .pf-btn.solid:hover {
         background: #2a2a2a
       }

       /* chips */
       #view-profile .pf-chips {
         display: flex;
         flex-wrap: wrap;
         gap: 9px
       }

       #view-profile .pf-chip {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         background: #eef0fb;
         color: #002671;
         border-radius: 0;
         padding: 7px 13px;
         font-size: 13px;
         font-weight: 600
       }

       #view-profile .pf-chip svg {
         stroke: #002671;
         cursor: pointer
       }

       #view-profile .pf-chip.add {
         background: #fff;
         border: 1.5px dashed #cfcfca;
         color: #6b6b6b;
         cursor: pointer
       }

       /* row lines */
       #view-profile .pf-rowline {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 14px;
         padding: 14px 0;
         border-bottom: 1px solid #f0f0ee
       }

       #view-profile .pf-rowline:last-child {
         border-bottom: none
       }

       #view-profile .pf-rl-t {
         font-size: 14px;
         font-weight: 600;
         color: #1a1a1a
       }

       #view-profile .pf-rl-s {
         font-size: 12.5px;
         color: #6b6b6b;
         margin-top: 2px
       }

       #view-profile .pf-pill {
         font-size: 11.5px;
         font-weight: 700;
         border-radius: 0;
         padding: 4px 11px
       }

       #view-profile .pf-pill.on {
         background: #e9f6ef;
         color: #1f9d57
       }

       #view-profile .pf-pill.pend {
         background: #fdf2e3;
         color: #c47d1a
       }

       /* stats */
       #view-profile .pf-stats4 {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 16px;
         margin-bottom: 18px
       }

       #view-profile .pf-stat {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 20px
       }

       #view-profile .pf-stat-v {
         font-family: 'Inter';
         font-weight: 800;
         font-size: 26px;
         color: #002671
       }

       #view-profile .pf-stat-l {
         font-size: 12.5px;
         color: #6b6b6b;
         margin-top: 5px
       }

       /* table */
       #view-profile .pf-table .pf-tr {
         display: grid;
         grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;
         align-items: center;
         gap: 12px;
         padding: 13px 0;
         border-bottom: 1px solid #f0f0ee;
         font-size: 13.5px;
         color: #3a3a3a
       }

       #view-profile .pf-table .pf-tr:last-child {
         border-bottom: none
       }

       #view-profile .pf-table .pf-th {
         font-size: 11.5px;
         font-weight: 700;
         color: #8a8a86;
         letter-spacing: .04em;
         text-transform: uppercase;
         border-bottom: 1.5px solid #e6e6e3
       }

       #view-profile .pf-mcell {
         display: flex;
         align-items: center;
         gap: 10px;
         font-weight: 600;
         color: #1a1a1a
       }

       #view-profile .pf-mcell i {
         width: 30px;
         height: 30px;
         border-radius: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-style: normal;
         font-size: 11px;
         font-weight: 700;
         flex-shrink: 0
       }

       #view-profile .pf-strong {
         font-weight: 600;
         color: #1a1a1a
       }

       #view-profile .pf-mlink {
         color: #002671;
         font-weight: 600;
         cursor: pointer;
         font-size: 13px
       }

       #view-profile .pf-mlink:hover {
         text-decoration: underline
       }

       /* support help links */
       #view-profile .pf-help {
         display: flex;
         align-items: center;
         gap: 11px;
         padding: 12px 0;
         border-bottom: 1px solid #f0f0ee;
         font-size: 14px;
         color: #3a3a3a;
         cursor: pointer
       }

       #view-profile .pf-help:last-child {
         border-bottom: none
       }

       #view-profile .pf-help:hover {
         color: #002671
       }

       #view-profile .pf-help svg {
         width: 18px;
         height: 18px;
         stroke: #8a8a86;
         fill: none
       }

       #view-profile .pf-help:hover svg {
         stroke: #002671
       }

       /* refer */
       #view-profile .pf-refer {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 40px;
         text-align: center
       }

       #view-profile .pf-refer-ic {
         width: 64px;
         height: 64px;
         border-radius: 0;
         background: #eef0fb;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 18px
       }

       #view-profile .pf-refer-ic svg {
         width: 32px;
         height: 32px;
         stroke: #002671;
         fill: none
       }

       #view-profile .pf-refer h3 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: 22px;
         color: #1a1a1a
       }

       #view-profile .pf-refer p {
         font-size: 14.5px;
         color: #6b6b6b;
         margin: 10px auto 22px;
         max-width: 46ch;
         line-height: 1.6
       }

       #view-profile .pf-refer-link {
         display: flex;
         gap: 10px;
         max-width: 440px;
         margin: 0 auto 22px
       }

       #view-profile .pf-refer-link input {
         flex: 1;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 11px 14px;
         font-size: 13.5px;
         color: #1a1a1a;
         font-family: inherit
       }

       #view-profile .pf-refer-stats {
         display: flex;
         justify-content: center;
         gap: 34px;
         font-size: 13.5px;
         color: #6b6b6b
       }

       #view-profile .pf-refer-stats b {
         display: block;
         font-family: 'Inter';
         font-weight: 800;
         font-size: 22px;
         color: #002671
       }

       @media(max-width:900px) {
         #view-profile .pf-layout {
           grid-template-columns: 1fr
         }

         #view-profile .pf-tabs {
           position: static;
           flex-direction: row;
           overflow-x: auto;
           flex-wrap: nowrap
         }

         #view-profile .pf-tab span {
           white-space: nowrap
         }

         #view-profile .pf-tab-sep {
           display: none
         }

         #view-profile .pf-grid2,
         #view-profile .pf-stats4 {
           grid-template-columns: 1fr 1fr
         }

         #view-profile .pf-table .pf-tr {
           grid-template-columns: 1.5fr 1fr 1fr;
           font-size: 12.5px
         }

         #view-profile .pf-hero-row {
           flex-direction: column;
           align-items: flex-start
         }
       }

       @media(max-width:560px) {

         #view-profile .pf-grid2,
         #view-profile .pf-stats4 {
           grid-template-columns: 1fr
         }

         #view-profile .pf-wrap {
           padding: 0 16px 50px
         }
       }

       /* ===== CREATE CASE STUDY ===== */
       #view-createcasestudy {
         background: #f6f6f4
       }

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

       #view-createcasestudy .cc-stage {
         padding: 100px 0 100px
       }

       #view-createcasestudy .cc-eyebrow {
         font-size: 12px;
         font-weight: 700;
         letter-spacing: .16em;
         color: #6b6b61;
         display: block;
         margin-bottom: 2px
       }

       #view-createcasestudy .cc-head h1 {
         font-family: 'Inter';
         font-weight: 200;
         font-size: clamp(24px, 3vw, 25px);
         letter-spacing: -0.02em;
         color: #453a9c
       }

       #view-createcasestudy .cc-head p {
         font-size: 14px;
         color: #6b6b6b;
         margin-top: 0px
       }

       /* selection cards */
       #view-createcasestudy .cc-cards {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 14px;
         margin-top: 20px
       }

       #view-createcasestudy .cc-card {
         position: relative;
         display: flex;
         flex-direction: column;
         text-align: left;
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         cursor: pointer;
         transition: transform .25s, box-shadow .25s, border-color .25s;
         font-family: inherit;
         padding: 0
       }

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

       #view-createcasestudy .cc-card-media {
         height: 104px;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: hidden
       }

       #view-createcasestudy .cc-card-media svg {
         width: 58%;
         height: auto
       }

       #view-createcasestudy .cc-card-media.purple {
         background: #eae6fb
       }

       #view-createcasestudy .cc-card-media.green {
         background: #d9f2e6
       }

       #view-createcasestudy .cc-card-media.amber {
         background: #fbeccb
       }

       #view-createcasestudy .cc-card-media.pink {
         background: #f9e0e9
       }

       #view-createcasestudy .cc-card-body {
         padding: 14px 15px 16px
       }

       #view-createcasestudy .cc-card-body h3 {
         font-family: 'Inter';
         font-weight: 300;
         font-size: 15px;
         color: #1a1a1a;
         margin-bottom: 6px
       }

       #view-createcasestudy .cc-card-body p {
         font-size: 12.5px;
         color: #5a5a5a;
         line-height: 1.45
       }

       #view-createcasestudy .cc-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         margin-top: 12px
       }

       #view-createcasestudy .cc-tag {
         font-size: 11px;
         font-weight: 600;
         color: #6b6b6b;
         background: #f1f1ef;
         border-radius: 0;
         padding: 4px 10px
       }

       #view-createcasestudy .cc-tag.accent {
         background: #eae6fb;
         color: #5b4bc4
       }

       #view-createcasestudy .cc-tag.accent.green {
         background: #d9f2e6;
         color: #1f8d5e
       }

       #view-createcasestudy .cc-tag.accent.amber {
         background: #fbeccb;
         color: #b3781a
       }

       #view-createcasestudy .cc-tag.accent.pink {
         background: #f9e0e9;
         color: #bd3e68
       }

       /* hover explanation overlay (covers whole card) */
       #view-createcasestudy .cc-hover {
         position: absolute;
         inset: 0;
         z-index: 2;
         background: rgba(13, 13, 13, .94);
         color: #fff;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 22px 26px;
         opacity: 0;
         transition: opacity .2s;
         pointer-events: none
       }

       #view-createcasestudy .cc-card:hover .cc-hover {
         opacity: 1
       }

       #view-createcasestudy .cc-hover-t {
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .12em;
         text-transform: uppercase;
         color: #b9b2f0;
         margin-bottom: 12px
       }

       #view-createcasestudy .cc-hover ul {
         list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
         flex-direction: column;
         gap: 9px
       }

       #view-createcasestudy .cc-hover li {
         position: relative;
         padding-left: 20px;
         font-size: 14px;
         line-height: 1.4;
         color: #eaeaea
       }

       #view-createcasestudy .cc-hover li::before {
         content: "";
         position: absolute;
         left: 0;
         top: 7px;
         width: 6px;
         height: 6px;
         border-radius: 0;
         background: #8b7df0
       }

       #view-createcasestudy .cc-hover-go {
         margin-top: 16px;
         font-size: 14px;
         font-weight: 700;
         color: #a99cf2
       }

       /* chat bar */
       #view-createcasestudy .cc-chatbar {
         background: #fff;
         border-bottom: 1.5px solid #e6e6e3;
         position: sticky;
         top: 0;
         z-index: 20
       }

       #view-createcasestudy .cc-chatbar-in {
         display: flex;
         align-items: center;
         gap: 18px;
         padding: 14px 28px
       }

       #view-createcasestudy .cc-back {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         background: none;
         border: none;
         cursor: pointer;
         font-size: 13.5px;
         font-weight: 600;
         color: #5a5a5a;
         font-family: inherit
       }

       #view-createcasestudy .cc-back:hover {
         color: #1a1a1a
       }

       #view-createcasestudy .cc-back svg {
         width: 17px;
         height: 17px;
         stroke: currentColor;
         fill: none
       }

       #view-createcasestudy .cc-chatbar-title {
         display: flex;
         align-items: center;
         gap: 9px;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14.5px;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-chip-ai {
         width: 28px;
         height: 28px;
         border-radius: 0;
         background: #eae6fb;
         display: inline-flex;
         align-items: center;
         justify-content: center
       }

       #view-createcasestudy .cc-chip-ai svg {
         width: 16px;
         height: 16px;
         stroke: #5b4bc4;
         fill: none
       }

       #view-createcasestudy .cc-progress {
         margin-left: auto;
         width: 160px;
         height: 6px;
         background: #eee;
         border-radius: 0;
         overflow: hidden
       }

       #view-createcasestudy .cc-progress-fill {
         display: block;
         height: 100%;
         width: 0;
         background: #5b4bc4;
         border-radius: 0;
         transition: width .4s
       }

       /* chat */
       #view-createcasestudy .cc-chatwrap {
         padding: 28px 28px 40px;
         max-width: 820px
       }

       #view-createcasestudy .cc-chat {
         display: flex;
         flex-direction: column;
         gap: 18px
       }

       #view-createcasestudy .cc-msg {
         display: flex;
         gap: 13px;
         max-width: 100%;
         animation: ccIn .35s ease
       }

       @keyframes ccIn {
         from {
           opacity: 0;
           transform: translateY(8px)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       #view-createcasestudy .cc-msg-av {
         width: 34px;
         height: 34px;
         border-radius: 0;
         flex-shrink: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         overflow: hidden
       }

       #view-createcasestudy .cc-msg.ai .cc-msg-av {
         background: #eae6fb
       }

       #view-createcasestudy .cc-msg.ai .cc-msg-av svg {
         width: 18px;
         height: 18px;
         stroke: #5b4bc4;
         fill: none
       }

       #view-createcasestudy .cc-msg.me .cc-msg-av {
         background: #002671;
         color: #fff
       }

       #view-createcasestudy .cc-msg.me .cc-msg-av img {
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-createcasestudy .cc-msg.me {
         flex-direction: row-reverse;
         margin-left: auto
       }

       #view-createcasestudy .cc-bubble {
         font-size: 15px;
         line-height: 1.6;
         padding: 13px 17px;
         border-radius: 0;
         max-width: 560px
       }

       #view-createcasestudy .cc-msg.ai .cc-bubble {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         color: #2a2a2a;
         border-top-left-radius: 5px
       }

       #view-createcasestudy .cc-msg.me .cc-bubble {
         background: #002671;
         color: #fff;
         border-top-right-radius: 5px
       }

       #view-createcasestudy .cc-bubble b {
         font-weight: 700
       }

       #view-createcasestudy .cc-bubble .cc-q-sub {
         display: block;
         font-size: 13px;
         color: #8a8a86;
         margin-top: 6px
       }

       /* input zone */
       #view-createcasestudy .cc-inputzone {
         margin-top: 22px;
         padding-left: 47px
       }

       #view-createcasestudy .cc-opts {
         display: flex;
         flex-wrap: wrap;
         gap: 9px
       }

       #view-createcasestudy .cc-opt {
         background: #fff;
         border: 1.5px solid #d6d6d1;
         border-radius: 0;
         padding: 10px 17px;
         font-size: 14px;
         font-weight: 600;
         color: #3a3a3a;
         cursor: pointer;
         transition: .15s;
         font-family: inherit
       }

       #view-createcasestudy .cc-opt:hover {
         border-color: #5b4bc4;
         color: #5b4bc4
       }

       #view-createcasestudy .cc-opt.sel {
         background: #5b4bc4;
         border-color: #5b4bc4;
         color: #fff
       }

       #view-createcasestudy .cc-opt .ck {
         display: none
       }

       #view-createcasestudy .cc-opt.sel .ck {
         display: inline
       }

       #view-createcasestudy .cc-multi-foot {
         margin-top: 14px;
         display: flex;
         align-items: center;
         gap: 12px
       }

       #view-createcasestudy .cc-hint {
         font-size: 12.5px;
         color: #9a9a96
       }

       #view-createcasestudy .cc-textwrap {
         position: relative;
         max-width: 620px
       }

       #view-createcasestudy .cc-textwrap textarea {
         width: 100%;
         min-height: 54px;
         border: 1.5px solid #d6d6d1;
         border-radius: 0;
         padding: 14px 56px 14px 16px;
         font-size: 15px;
         font-family: inherit;
         color: #1a1a1a;
         resize: vertical;
         line-height: 1.5
       }

       #view-createcasestudy .cc-textwrap textarea:focus {
         outline: none;
         border-color: #5b4bc4;
         box-shadow: 0 0 0 3px rgba(91, 75, 196, .12)
       }

       #view-createcasestudy .cc-send {
         position: absolute;
         right: 9px;
         bottom: 9px;
         width: 38px;
         height: 38px;
         border-radius: 0;
         background: #5b4bc4;
         border: none;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         transition: .15s
       }

       #view-createcasestudy .cc-send:hover {
         background: #4a3ba8
       }

       #view-createcasestudy .cc-send:disabled {
         opacity: .4;
         cursor: default
       }

       #view-createcasestudy .cc-send svg {
         width: 18px;
         height: 18px;
         stroke: #fff;
         fill: none
       }

       #view-createcasestudy .cc-upload {
         border: 1.8px dashed #cfcfca;
         border-radius: 0;
         padding: 26px;
         text-align: center;
         cursor: pointer;
         background: #fff;
         max-width: 560px;
         transition: .15s
       }

       #view-createcasestudy .cc-upload:hover {
         border-color: #5b4bc4;
         background: #faf9ff
       }

       #view-createcasestudy .cc-upload svg {
         width: 30px;
         height: 30px;
         stroke: #5b4bc4;
         fill: none;
         margin-bottom: 8px
       }

       #view-createcasestudy .cc-upload .ut {
         font-size: 14.5px;
         font-weight: 600;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-upload .us {
         font-size: 12.5px;
         color: #8a8a86;
         margin-top: 3px
       }

       #view-createcasestudy .cc-btn {
         border-radius: 0;
         padding: 11px 22px;
         font-size: 14px;
         font-weight: 600;
         cursor: pointer;
         font-family: inherit;
         transition: .18s;
         border: none
       }

       #view-createcasestudy .cc-btn.solid {
         background: #5b4bc4;
         color: #fff
       }

       #view-createcasestudy .cc-btn.solid:hover {
         background: #4a3ba8
       }

       #view-createcasestudy .cc-btn.solid:disabled {
         opacity: .4;
         cursor: default
       }

       #view-createcasestudy .cc-btn.ghost {
         background: #fff;
         border: 1.5px solid #d6d6d1;
         color: #3a3a3a
       }

       #view-createcasestudy .cc-btn.ghost:hover {
         border-color: #1a1a1a
       }

       /* brief card */
       #view-createcasestudy .cc-brief {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 26px;
         max-width: 640px;
         margin-top: 6px
       }

       #view-createcasestudy .cc-brief-t {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .1em;
         color: #a8a8a3;
         text-transform: uppercase;
         margin-bottom: 18px
       }

       #view-createcasestudy .cc-brief-row {
         display: flex;
         align-items: flex-start;
         gap: 14px;
         padding: 9px 0
       }

       #view-createcasestudy .cc-brief-ck {
         width: 22px;
         height: 22px;
         border-radius: 0;
         background: #e9f6ef;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         margin-top: 1px
       }

       #view-createcasestudy .cc-brief-ck svg {
         width: 13px;
         height: 13px;
         stroke: #1f9d57;
         fill: none;
         stroke-width: 3
       }

       #view-createcasestudy .cc-brief-k {
         width: 130px;
         flex-shrink: 0;
         font-size: 14px;
         color: #8a8a86
       }

       #view-createcasestudy .cc-brief-v {
         font-size: 14.5px;
         font-weight: 700;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-brief-foot {
         display: flex;
         gap: 12px;
         margin-top: 20px;
         padding-top: 20px;
         border-top: 1.5px solid #f0f0ee
       }

       /* blueprint */
       #view-createcasestudy .cc-blueprint {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 28px;
         max-width: 680px;
         margin-top: 6px
       }

       #view-createcasestudy .cc-bp-h {
         font-family: 'Inter';
         font-weight: 800;
         font-size: 20px;
         color: #1a1a1a;
         margin-bottom: 4px
       }

       #view-createcasestudy .cc-bp-sub {
         font-size: 13.5px;
         color: #6b6b6b;
         margin-bottom: 20px
       }

       #view-createcasestudy .cc-bp-sec {
         padding: 16px 0;
         border-top: 1px solid #f0f0ee
       }

       #view-createcasestudy .cc-bp-sec:first-of-type {
         border-top: none
       }

       #view-createcasestudy .cc-bp-label {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .06em;
         color: #5b4bc4;
         text-transform: uppercase;
         margin-bottom: 7px
       }

       #view-createcasestudy .cc-bp-sec p {
         font-size: 14.5px;
         color: #2f2f2f;
         line-height: 1.6
       }

       #view-createcasestudy .cc-bp-list {
         list-style: none;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
         gap: 8px
       }

       #view-createcasestudy .cc-bp-list li {
         display: flex;
         gap: 9px;
         font-size: 14px;
         color: #3a3a3a;
         align-items: flex-start
       }

       #view-createcasestudy .cc-bp-list li::before {
         content: "";
         width: 6px;
         height: 6px;
         border-radius: 0;
         background: #5b4bc4;
         margin-top: 7px;
         flex-shrink: 0
       }

       #view-createcasestudy .cc-bp-list.warn li::before {
         background: #d98a2b
       }

       #view-createcasestudy .cc-bp-foot {
         display: flex;
         gap: 12px;
         margin-top: 22px;
         flex-wrap: wrap
       }

       @media(max-width:920px) {
         #view-createcasestudy .cc-cards {
           grid-template-columns: 1fr 1fr
         }
       }

       @media(max-width:820px) {
         #view-createcasestudy .cc-inputzone {
           padding-left: 0
         }

         #view-createcasestudy .cc-progress {
           display: none
         }
       }

       @media(max-width:520px) {
         #view-createcasestudy .cc-cards {
           grid-template-columns: 1fr
         }
       }

       /* ===== CASE BUILDER WORKSPACE ===== */
       #view-createcasestudy .cc-workspace {
         padding: 0
       }

       #view-createcasestudy .cc-topbar {
         display: flex;
         align-items: center;
         gap: 18px;
         padding: 5px 24px;
         background: #fff;
         border-bottom: 1.5px solid #e6e6e3;
         position: sticky;
         top: 0;
         z-index: 30;
         min-height: 52px
       }

       #view-createcasestudy .cc-topbar-title {
         display: flex;
         align-items: center;
         gap: 9px;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14.5px;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-saved {
         font-weight: 500;
         font-size: 12px;
         color: #9a9a96
       }

       #view-createcasestudy .cc-topbar-actions {
         margin-left: auto;
         display: flex;
         gap: 9px
       }

       #view-createcasestudy .cc-tb-btn {
         border: 1.5px solid #d6d6d1;
         background: #fff;
         color: #3a3a3a;
         border-radius: 0;
         padding: 8px 18px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         font-family: inherit;
         transition: .15s
       }

       #view-createcasestudy .cc-tb-btn:hover {
         border-color: #1a1a1a
       }

       #view-createcasestudy .cc-tb-btn.primary {
         background: #5b4bc4;
         border-color: #5b4bc4;
         color: #fff
       }

       #view-createcasestudy .cc-tb-btn.primary:hover {
         background: #4a3ba8
       }

       /* grid */
       #view-createcasestudy .cc-ws-grid {
         display: grid;
         grid-template-columns: 228px 1fr 300px;
         gap: 0;
         align-items: stretch;
         min-height: calc(100vh - 110px)
       }

       /* left stages */
       #view-createcasestudy .cc-stages {
         border-right: 1.5px solid #e6e6e3;
         background: #fafafa;
         padding: 20px 14px;
         display: flex;
         flex-direction: column
       }

       #view-createcasestudy .cc-stages-h {
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .1em;
         text-transform: uppercase;
         color: #a8a8a3;
         padding: 0 8px;
         margin-bottom: 12px
       }

       #view-createcasestudy .cc-stage-list {
         display: flex;
         flex-direction: column;
         gap: 1px;
         flex: 1
       }

       #view-createcasestudy .cc-stg {
         display: flex;
         align-items: center;
         gap: 11px;
         padding: 9px 10px;
         border-radius: 0;
         cursor: pointer;
         font-size: 13.5px;
         font-weight: 600;
         color: #5a5a5a;
         transition: .15s;
         border: none;
         background: none;
         text-align: left;
         font-family: inherit;
         width: 100%
       }

       #view-createcasestudy .cc-stg:hover {
         background: #efeef6;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-stg.active {
         background: #eae6fb;
         color: #5b4bc4
       }

       #view-createcasestudy .cc-stg-ic {
         width: 22px;
         height: 22px;
         border-radius: 0;
         border: 1.8px solid #cfcfca;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         font-size: 11px;
         font-weight: 700;
         color: #a8a8a3;
         transition: .15s
       }

       #view-createcasestudy .cc-stg.active .cc-stg-ic {
         border-color: #5b4bc4;
         color: #5b4bc4
       }

       #view-createcasestudy .cc-stg.done .cc-stg-ic {
         background: #1f9d57;
         border-color: #1f9d57;
         color: #fff
       }

       #view-createcasestudy .cc-stg.done .cc-stg-ic svg {
         width: 11px;
         height: 11px;
         stroke: #fff;
         fill: none;
         stroke-width: 3
       }

       #view-createcasestudy .cc-stage-prog {
         height: 5px;
         background: #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         margin: 14px 8px 6px
       }

       #view-createcasestudy .cc-stage-prog-bar {
         height: 100%;
         width: 0;
         background: #5b4bc4;
         border-radius: 0;
         transition: width .4s
       }

       #view-createcasestudy .cc-stage-prog-t {
         font-size: 11.5px;
         color: #9a9a96;
         padding: 0 8px
       }

       /* center */
       #view-createcasestudy .cc-center {
         padding: 30px 36px 60px;
         overflow-y: auto;
         max-width: 860px;
         width: 100%;
         margin: 0 auto
       }

       #view-createcasestudy .cc-stg-head {
         margin-bottom: 22px
       }

       #view-createcasestudy .cc-stg-head h2 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 24px;
         color: #1a1a1a;
         letter-spacing: -0.01em
       }

       #view-createcasestudy .cc-stg-head p {
         font-size: 14.5px;
         color: #6b6b6b;
         margin-top: 7px;
         line-height: 1.55
       }

       /* chat (inside discover stage) */
       #view-createcasestudy .cc-chat {
         display: flex;
         flex-direction: column;
         gap: 16px
       }

       #view-createcasestudy .cc-msg {
         display: flex;
         gap: 12px;
         animation: ccIn .35s ease
       }

       #view-createcasestudy .cc-msg-av {
         width: 32px;
         height: 32px;
         border-radius: 0;
         flex-shrink: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         overflow: hidden
       }

       #view-createcasestudy .cc-msg.ai .cc-msg-av {
         background: #eae6fb
       }

       #view-createcasestudy .cc-msg.ai .cc-msg-av svg {
         width: 17px;
         height: 17px;
         stroke: #5b4bc4;
         fill: none
       }

       #view-createcasestudy .cc-msg.me {
         flex-direction: row-reverse
       }

       #view-createcasestudy .cc-msg.me .cc-msg-av {
         background: #002671;
         color: #fff
       }

       #view-createcasestudy .cc-msg.me .cc-msg-av img {
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-createcasestudy .cc-bubble {
         font-size: 14.5px;
         line-height: 1.6;
         padding: 12px 16px;
         border-radius: 0;
         max-width: 520px
       }

       #view-createcasestudy .cc-msg.ai .cc-bubble {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         color: #2a2a2a;
         border-top-left-radius: 5px
       }

       #view-createcasestudy .cc-msg.me .cc-bubble {
         background: #002671;
         color: #fff;
         border-top-right-radius: 5px
       }

       #view-createcasestudy .cc-bubble b {
         font-weight: 700
       }

       #view-createcasestudy .cc-q-sub {
         display: block;
         font-size: 13px;
         color: #8a8a86;
         margin-top: 6px
       }

       #view-createcasestudy .cc-inputzone {
         margin-top: 18px;
         padding-left: 44px
       }

       #view-createcasestudy .cc-opts {
         display: flex;
         flex-wrap: wrap;
         gap: 9px
       }

       #view-createcasestudy .cc-opt {
         background: #fff;
         border: 1.5px solid #d6d6d1;
         border-radius: 0;
         padding: 9px 16px;
         font-size: 13.5px;
         font-weight: 600;
         color: #3a3a3a;
         cursor: pointer;
         transition: .15s;
         font-family: inherit
       }

       #view-createcasestudy .cc-opt:hover {
         border-color: #5b4bc4;
         color: #5b4bc4
       }

       #view-createcasestudy .cc-opt.sel {
         background: #5b4bc4;
         border-color: #5b4bc4;
         color: #fff
       }

       #view-createcasestudy .cc-multi-foot {
         margin-top: 14px;
         display: flex;
         align-items: center;
         gap: 12px
       }

       #view-createcasestudy .cc-hint {
         font-size: 12.5px;
         color: #9a9a96
       }

       #view-createcasestudy .cc-textwrap {
         position: relative;
         max-width: 600px
       }

       #view-createcasestudy .cc-textwrap textarea {
         width: 100%;
         min-height: 50px;
         border: 1.5px solid #d6d6d1;
         border-radius: 0;
         padding: 13px 54px 13px 15px;
         font-size: 14.5px;
         font-family: inherit;
         color: #1a1a1a;
         resize: vertical;
         line-height: 1.5
       }

       #view-createcasestudy .cc-textwrap textarea:focus {
         outline: none;
         border-color: #5b4bc4;
         box-shadow: 0 0 0 3px rgba(91, 75, 196, .12)
       }

       #view-createcasestudy .cc-send {
         position: absolute;
         right: 8px;
         bottom: 8px;
         width: 36px;
         height: 36px;
         border-radius: 0;
         background: #5b4bc4;
         border: none;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         transition: .15s
       }

       #view-createcasestudy .cc-send:hover {
         background: #4a3ba8
       }

       #view-createcasestudy .cc-send:disabled {
         opacity: .4;
         cursor: default
       }

       #view-createcasestudy .cc-send svg {
         width: 18px;
         height: 18px;
         stroke: #fff;
         fill: none
       }

       /* generic builder buttons */
       #view-createcasestudy .cc-btn {
         border-radius: 0;
         padding: 10px 20px;
         font-size: 13.5px;
         font-weight: 600;
         cursor: pointer;
         font-family: inherit;
         transition: .18s;
         border: none
       }

       #view-createcasestudy .cc-btn.solid {
         background: #5b4bc4;
         color: #fff
       }

       #view-createcasestudy .cc-btn.solid:hover {
         background: #4a3ba8
       }

       #view-createcasestudy .cc-btn.ghost {
         background: #fff;
         border: 1.5px solid #d6d6d1;
         color: #3a3a3a
       }

       #view-createcasestudy .cc-btn.ghost:hover {
         border-color: #1a1a1a
       }

       /* brief card */
       #view-createcasestudy .cc-brief {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 24px
       }

       #view-createcasestudy .cc-brief-t {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .1em;
         color: #a8a8a3;
         text-transform: uppercase;
         margin-bottom: 16px
       }

       #view-createcasestudy .cc-brief-row {
         display: flex;
         align-items: flex-start;
         gap: 13px;
         padding: 8px 0
       }

       #view-createcasestudy .cc-brief-ck {
         width: 20px;
         height: 20px;
         border-radius: 0;
         background: #e9f6ef;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         margin-top: 1px
       }

       #view-createcasestudy .cc-brief-ck svg {
         width: 12px;
         height: 12px;
         stroke: #1f9d57;
         fill: none;
         stroke-width: 3
       }

       #view-createcasestudy .cc-brief-k {
         width: 130px;
         flex-shrink: 0;
         font-size: 13.5px;
         color: #8a8a86
       }

       #view-createcasestudy .cc-brief-v {
         font-size: 14px;
         font-weight: 700;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-brief-foot {
         display: flex;
         gap: 11px;
         margin-top: 18px;
         padding-top: 18px;
         border-top: 1.5px solid #f0f0ee
       }

       /* editable doc sections */
       #view-createcasestudy .cc-doc-sec {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 20px 22px;
         margin-bottom: 16px;
         transition: border-color .15s
       }

       #view-createcasestudy .cc-doc-sec:focus-within {
         border-color: #5b4bc4
       }

       #view-createcasestudy .cc-doc-sec-h {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 10px
       }

       #view-createcasestudy .cc-doc-label {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .06em;
         color: #5b4bc4;
         text-transform: uppercase
       }

       #view-createcasestudy .cc-doc-tools {
         margin-left: auto;
         display: flex;
         gap: 6px
       }

       #view-createcasestudy .cc-doc-tool {
         display: inline-flex;
         align-items: center;
         gap: 5px;
         border: 1.5px solid #e6e6e3;
         background: #fff;
         border-radius: 0;
         padding: 4px 10px;
         font-size: 11.5px;
         font-weight: 600;
         color: #6b6b6b;
         cursor: pointer;
         transition: .15s
       }

       #view-createcasestudy .cc-doc-tool:hover {
         border-color: #5b4bc4;
         color: #5b4bc4
       }

       #view-createcasestudy .cc-doc-tool svg {
         width: 12px;
         height: 12px;
         stroke: currentColor;
         fill: none
       }

       #view-createcasestudy .cc-doc-body {
         font-size: 14.5px;
         line-height: 1.7;
         color: #2a2a2a;
         border: none;
         outline: none;
         width: 100%;
         resize: none;
         font-family: inherit;
         min-height: 40px
       }

       #view-createcasestudy .cc-doc-body[contenteditable]:focus {
         outline: none
       }

       #view-createcasestudy .cc-doc-body p {
         margin-bottom: 10px
       }

       #view-createcasestudy .cc-ai-suggest {
         margin-top: 12px;
         background: #faf9ff;
         border: 1.5px solid #e7e2fb;
         border-radius: 0;
         padding: 12px 14px;
         font-size: 13px;
         color: #5b4bc4;
         display: flex;
         align-items: flex-start;
         gap: 9px
       }

       #view-createcasestudy .cc-ai-suggest svg {
         width: 15px;
         height: 15px;
         stroke: #5b4bc4;
         fill: none;
         flex-shrink: 0;
         margin-top: 1px
       }

       /* upload */
       #view-createcasestudy .cc-upload {
         border: 1.8px dashed #cfcfca;
         border-radius: 0;
         padding: 28px;
         text-align: center;
         cursor: pointer;
         background: #fff;
         transition: .15s
       }

       #view-createcasestudy .cc-upload:hover {
         border-color: #5b4bc4;
         background: #faf9ff
       }

       #view-createcasestudy .cc-upload svg {
         width: 30px;
         height: 30px;
         stroke: #5b4bc4;
         fill: none;
         margin-bottom: 8px
       }

       #view-createcasestudy .cc-upload .ut {
         font-size: 14.5px;
         font-weight: 600;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-upload .us {
         font-size: 12.5px;
         color: #8a8a86;
         margin-top: 3px
       }

       /* exhibits / table */
       #view-createcasestudy .cc-exhibit {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 16px 18px;
         margin-bottom: 12px;
         display: flex;
         align-items: center;
         gap: 14px
       }

       #view-createcasestudy .cc-exhibit-ic {
         width: 40px;
         height: 40px;
         border-radius: 0;
         background: #eef0fb;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0
       }

       #view-createcasestudy .cc-exhibit-ic svg {
         width: 20px;
         height: 20px;
         stroke: #5b4bc4;
         fill: none
       }

       #view-createcasestudy .cc-exhibit-t {
         font-weight: 700;
         font-size: 14px;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-exhibit-s {
         font-size: 12.5px;
         color: #6b6b6b;
         margin-top: 2px
       }

       /* checklist */
       #view-createcasestudy .cc-check {
         display: flex;
         align-items: flex-start;
         gap: 12px;
         padding: 13px 0;
         border-bottom: 1px solid #f0f0ee
       }

       #view-createcasestudy .cc-check:last-child {
         border-bottom: none
       }

       #view-createcasestudy .cc-check-ic {
         width: 22px;
         height: 22px;
         border-radius: 0;
         flex-shrink: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center
       }

       #view-createcasestudy .cc-check-ic.ok {
         background: #e9f6ef
       }

       #view-createcasestudy .cc-check-ic.ok svg {
         stroke: #1f9d57
       }

       #view-createcasestudy .cc-check-ic.warn {
         background: #fdf2e3
       }

       #view-createcasestudy .cc-check-ic.warn svg {
         stroke: #d98a2b
       }

       #view-createcasestudy .cc-check-ic svg {
         width: 13px;
         height: 13px;
         fill: none;
         stroke-width: 2.6
       }

       #view-createcasestudy .cc-check-t {
         font-size: 14px;
         font-weight: 600;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-check-s {
         font-size: 12.5px;
         color: #6b6b6b;
         margin-top: 2px
       }

       /* right side agents/activity */
       #view-createcasestudy .cc-side {
         border-left: 1.5px solid #e6e6e3;
         background: #fafafa;
         padding: 18px 16px;
         display: flex;
         flex-direction: column;
         gap: 18px;
         overflow-y: auto
       }

       #view-createcasestudy .cc-side-panel {}

       #view-createcasestudy .cc-side-h {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: #8a8a86;
         margin-bottom: 12px;
         display: flex;
         align-items: baseline;
         gap: 8px
       }

       #view-createcasestudy .cc-side-sub {
         font-size: 10px;
         font-weight: 600;
         letter-spacing: 0;
         text-transform: none;
         color: #b3b3ae
       }

       #view-createcasestudy .cc-agents {
         display: flex;
         flex-direction: column;
         gap: 9px
       }

       #view-createcasestudy .cc-agent {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 12px 13px;
         cursor: pointer;
         transition: .15s
       }

       #view-createcasestudy .cc-agent:hover {
         border-color: #5b4bc4;
         box-shadow: 0 8px 20px -14px rgba(91, 75, 196, .5)
       }

       #view-createcasestudy .cc-agent-top {
         display: flex;
         align-items: center;
         gap: 9px
       }

       #view-createcasestudy .cc-agent-ic {
         width: 30px;
         height: 30px;
         border-radius: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0
       }

       #view-createcasestudy .cc-agent-ic svg {
         width: 16px;
         height: 16px;
         fill: none
       }

       #view-createcasestudy .cc-agent-name {
         font-size: 12.5px;
         font-weight: 700;
         color: #1a1a1a;
         line-height: 1.25
       }

       #view-createcasestudy .cc-agent-desc {
         font-size: 11.5px;
         color: #7a7a76;
         margin-top: 7px;
         line-height: 1.4
       }

       #view-createcasestudy .cc-agent-status {
         margin-left: auto;
         font-size: 10px;
         font-weight: 700;
         border-radius: 0;
         padding: 3px 8px
       }

       #view-createcasestudy .cc-agent-status.idle {
         background: #f1f1ef;
         color: #9a9a96
       }

       #view-createcasestudy .cc-agent-status.run {
         background: #fdf2e3;
         color: #c47d1a
       }

       #view-createcasestudy .cc-agent-status.done {
         background: #e9f6ef;
         color: #1f9d57
       }

       #view-createcasestudy .cc-activity {
         display: flex;
         flex-direction: column;
         gap: 0
       }

       #view-createcasestudy .cc-act {
         display: flex;
         gap: 10px;
         padding: 10px 0;
         border-bottom: 1px solid #ededeb
       }

       #view-createcasestudy .cc-act:last-child {
         border-bottom: none
       }

       #view-createcasestudy .cc-act-dot {
         width: 26px;
         height: 26px;
         border-radius: 0;
         flex-shrink: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 9px;
         font-weight: 700;
         color: #fff;
         overflow: hidden
       }

       #view-createcasestudy .cc-act-dot img {
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-createcasestudy .cc-act-dot.ai {
         background: #5b4bc4
       }

       #view-createcasestudy .cc-act-dot.ai svg {
         width: 14px;
         height: 14px;
         stroke: #fff;
         fill: none
       }

       #view-createcasestudy .cc-act-txt {
         font-size: 12px;
         color: #3a3a3a;
         line-height: 1.4
       }

       #view-createcasestudy .cc-act-txt b {
         font-weight: 700;
         color: #1a1a1a
       }

       #view-createcasestudy .cc-act-time {
         font-size: 10.5px;
         color: #b3b3ae;
         margin-top: 2px
       }

       @media(max-width:1100px) {
         #view-createcasestudy .cc-ws-grid {
           grid-template-columns: 200px 1fr
         }

         #view-createcasestudy .cc-side {
           display: none
         }
       }

       @media(max-width:760px) {
         #view-createcasestudy .cc-ws-grid {
           grid-template-columns: 1fr
         }

         #view-createcasestudy .cc-stages {
           display: none
         }
       }

       /* ===== CLONE CONNECT ON HOME (copied from Virtual Me) ===== */
       /* ===== VIRTUAL ME ===== */
       #view-virtualme .cc-vm-sections .wrap {
         max-width: 100%;
         margin: 0 auto;
         padding: 0 28px
       }

       #view-virtualme .cc-vm-sections .vm-eyebrow {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .16em;
         color: #a8a8a3;
         display: block;
         margin-bottom: 14px
       }

       #view-virtualme .cc-vm-sections .btn {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         border: none;
         cursor: pointer;
         font-family: 'Inter';
         font-weight: 600;
         font-size: 13px;
         border-radius: 0;
         padding: 11px 22px;
         transition: .2s
       }

       #view-virtualme .cc-vm-sections .btn-ghost {
         background: #fff;
         border: 1.5px solid #1a1a1a;
         color: #1a1a1a
       }

       #view-virtualme .cc-vm-sections .btn-ghost:hover {
         background: #1a1a1a;
         color: #fff
       }

       #view-virtualme .cc-vm-sections .btn-dark {
         background: #0d0d0d;
         color: #fff
       }

       #view-virtualme .cc-vm-sections .btn-dark:hover {
         background: #2a2a2a
       }

       /* hero */
       #view-virtualme .cc-vm-sections .vm-hero {
         background: #f4f4f2;
         border-bottom: 1.5px solid #e6e6e3;
         padding: 60px 0
       }

       #view-virtualme .cc-vm-sections .vm-hero-grid {
         display: grid;
         grid-template-columns: 1.05fr .95fr;
         gap: 48px;
         align-items: center
       }

       #view-virtualme .cc-vm-sections .vm-hero-text h1 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: clamp(28px, 3.8vw, 42px);
         letter-spacing: -0.02em;
         line-height: 1.1;
         color: #1a1a1a
       }

       #view-virtualme .cc-vm-sections .vm-hero-text p {
         font-size: 16.5px;
         color: #555;
         line-height: 1.6;
         margin-top: 18px;
         max-width: 54ch
       }

       #view-virtualme .cc-vm-sections .vm-hero-btns {
         display: flex;
         gap: 12px;
         margin-top: 26px;
         flex-wrap: wrap
       }

       /* chat card (shared look) */
       #view-virtualme .cc-vm-sections .vm-hero-card,
       #view-virtualme .cc-vm-sections .vm-demo-wrap {
         background: #0d0d0d;
         border-radius: 0;
         padding: 22px;
         color: #fff
       }

       #view-virtualme .cc-vm-sections .vm-demo-wrap {
         max-width: 620px;
         margin: 0 auto
       }

       #view-virtualme .cc-vm-sections .vm-chat-head {
         display: flex;
         align-items: center;
         gap: 12px;
         padding-bottom: 16px;
         margin-bottom: 16px;
         border-bottom: 1.5px solid #262626
       }

       #view-virtualme .cc-vm-sections .vm-chat-av {
         width: 40px;
         height: 40px;
         border-radius: 0;
         background: #002671;
         color: #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14px;
         flex-shrink: 0
       }

       #view-virtualme .cc-vm-sections .vm-chat-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15px;
         color: #fff
       }

       #view-virtualme .cc-vm-sections .vm-chat-sub {
         font-size: 12px;
         color: #9a9a9a;
         display: flex;
         align-items: center;
         gap: 6px;
         margin-top: 2px
       }

       #view-virtualme .cc-vm-sections .vm-dot {
         width: 7px;
         height: 7px;
         border-radius: 0;
         background: #1f9d57;
         box-shadow: 0 0 0 3px rgba(31, 157, 87, .25)
       }

       #view-virtualme .cc-vm-sections .vm-bubble {
         max-width: 84%;
         font-size: 14px;
         line-height: 1.5;
         padding: 11px 15px;
         border-radius: 0;
         margin-bottom: 11px
       }

       #view-virtualme .cc-vm-sections .vm-bubble.student {
         background: #262626;
         color: #e6e6e6;
         margin-left: auto;
         border-bottom-right-radius: 4px
       }

       #view-virtualme .cc-vm-sections .vm-bubble.avatar {
         background: #eef0fb;
         color: #1a2a52;
         border-bottom-left-radius: 4px
       }

       #view-virtualme .cc-vm-sections .vm-chat-foot {
         font-size: 11.5px;
         color: #777;
         text-align: center;
         margin-top: 14px;
         padding-top: 14px;
         border-top: 1.5px solid #262626
       }

       /* heads */
       #view-virtualme .cc-vm-sections .vm-head {
         text-align: center;
         max-width: 680px;
         margin: 0 auto 36px
       }

       #view-virtualme .cc-vm-sections .vm-block {
         padding: 64px 0 0
       }

       #view-virtualme .cc-vm-sections .vm-head h2 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: clamp(24px, 3vw, 32px);
         letter-spacing: -0.02em;
         color: #1a1a1a
       }

       #view-virtualme .cc-vm-sections .vm-head p {
         font-size: 16px;
         color: #6b6b6b;
         line-height: 1.6;
         margin-top: 12px
       }

       #view-virtualme .cc-vm-sections .vm-ic {
         width: 44px;
         height: 44px;
         border-radius: 0;
         background: #eef0fb;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 14px
       }

       #view-virtualme .cc-vm-sections .vm-ic svg {
         width: 22px;
         height: 22px;
         stroke: #002671;
         fill: none
       }

       #view-virtualme .cc-vm-sections .vm-ic.dark {
         background: rgba(255, 255, 255, .08)
       }

       #view-virtualme .cc-vm-sections .vm-ic.dark svg {
         stroke: #fff
       }

       /* what is it */
       #view-virtualme .cc-vm-sections .vm-what {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px
       }

       #view-virtualme .cc-vm-sections .vm-what-card {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 22px;
         transition: .2s
       }

       #view-virtualme .cc-vm-sections .vm-what-card:hover {
         border-color: #d6d6d1;
         transform: translateY(-2px);
         box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
       }

       #view-virtualme .cc-vm-sections .vm-what-card h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15.5px;
         color: #1a1a1a;
         margin-bottom: 7px
       }

       #view-virtualme .cc-vm-sections .vm-what-card p {
         font-size: 13.5px;
         color: #555;
         line-height: 1.55
       }

       /* bands */
       #view-virtualme .cc-vm-sections .vm-band {
         background: #0d0d0d;
         color: #fff;
         margin-top: 64px;
         padding: 64px 0
       }

       #view-virtualme .cc-vm-sections .vm-band .vm-head h2 {
         color: #fff
       }

       #view-virtualme .cc-vm-sections .vm-band .vm-head p {
         color: #b9b9b9
       }

       #view-virtualme .cc-vm-sections .vm-band .vm-eyebrow {
         color: #777
       }

       #view-virtualme .cc-vm-sections .vm-band.light {
         background: #f4f4f2;
         color: #1a1a1a;
         border-top: 1.5px solid #e6e6e3;
         border-bottom: 1.5px solid #e6e6e3
       }

       #view-virtualme .cc-vm-sections .vm-band.light .vm-head h2,
       #view-virtualme .cc-vm-sections .vm-band.light .vm-setup-text h2 {
         color: #1a1a1a
       }

       #view-virtualme .cc-vm-sections .vm-band.light .vm-eyebrow {
         color: #a8a8a3
       }

       /* avatar types */
       #view-virtualme .cc-vm-sections .vm-types {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px
       }

       #view-virtualme .cc-vm-sections .vm-type {
         background: #161616;
         border: 1.5px solid #262626;
         border-radius: 0;
         padding: 28px;
         position: relative
       }

       #view-virtualme .cc-vm-sections .vm-type-tag {
         display: inline-block;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .1em;
         color: #1f9d57;
         background: rgba(31, 157, 87, .12);
         padding: 5px 11px;
         border-radius: 0;
         margin-bottom: 16px
       }

       #view-virtualme .cc-vm-sections .vm-type-tag.future {
         color: #e0a23a;
         background: rgba(224, 162, 58, .12)
       }

       #view-virtualme .cc-vm-sections .vm-type h3 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 20px;
         color: #fff;
         margin-bottom: 8px
       }

       #view-virtualme .cc-vm-sections .vm-type p {
         font-size: 14.5px;
         color: #b0b0b0;
         line-height: 1.55;
         margin-bottom: 16px
       }

       #view-virtualme .cc-vm-sections .vm-ticks {
         list-style: none;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
         gap: 10px
       }

       #view-virtualme .cc-vm-sections .vm-ticks li {
         display: flex;
         gap: 10px;
         align-items: flex-start;
         font-size: 14px;
         color: #cfcfcf
       }

       #view-virtualme .cc-vm-sections .vm-ticks li svg {
         width: 18px;
         height: 18px;
         flex-shrink: 0;
         fill: none;
         margin-top: 1px
       }

       /* build steps */
       #view-virtualme .cc-vm-sections .vm-steps {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px
       }

       #view-virtualme .cc-vm-sections .vm-step {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 22px;
         position: relative;
         transition: .2s
       }

       #view-virtualme .cc-vm-sections .vm-step:hover {
         border-color: #d6d6d1;
         transform: translateY(-2px);
         box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .18)
       }

       #view-virtualme .cc-vm-sections .vm-step-n {
         position: absolute;
         top: 18px;
         right: 20px;
         font-family: 'Inter';
         font-weight: 800;
         font-size: 30px;
         color: #eef0fb
       }

       #view-virtualme .cc-vm-sections .vm-step h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 15.5px;
         color: #1a1a1a;
         margin-bottom: 7px
       }

       #view-virtualme .cc-vm-sections .vm-step p {
         font-size: 13.5px;
         color: #555;
         line-height: 1.55
       }

       /* setup */
       #view-virtualme .cc-vm-sections .vm-setup-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 48px;
         align-items: center
       }

       #view-virtualme .cc-vm-sections .vm-setup-text p {
         font-size: 16px;
         color: #6b6b6b;
         line-height: 1.6;
         margin: 14px 0 20px
       }

       #view-virtualme .cc-vm-sections .vm-chips {
         display: flex;
         flex-wrap: wrap;
         gap: 9px
       }

       #view-virtualme .cc-vm-sections .vm-chip {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 7px 13px;
         font-size: 12.5px;
         font-weight: 600;
         color: #444
       }

       #view-virtualme .cc-vm-sections .vm-chip svg {
         width: 14px;
         height: 14px;
         fill: none
       }

       #view-virtualme .cc-vm-sections .vm-setup-panel {
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 8px 22px
       }

       #view-virtualme .cc-vm-sections .vm-panel-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 16px;
         padding: 15px 0;
         border-bottom: 1px solid #f0f0ee
       }

       #view-virtualme .cc-vm-sections .vm-panel-row:last-child {
         border-bottom: none
       }

       #view-virtualme .cc-vm-sections .vm-panel-row label {
         font-size: 12.5px;
         font-weight: 700;
         color: #8a8a86;
         letter-spacing: .04em
       }

       #view-virtualme .cc-vm-sections .vm-field {
         font-size: 14px;
         font-weight: 600;
         color: #1a1a1a;
         text-align: right
       }

       #view-virtualme .cc-vm-sections .vm-field.locked {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         color: #1f9d57
       }

       #view-virtualme .cc-vm-sections .vm-field.locked svg {
         width: 15px;
         height: 15px;
         stroke: #1f9d57;
         fill: none
       }

       #view-virtualme .cc-vm-sections .vm-toggle {
         display: inline-flex;
         background: #f4f4f2;
         border-radius: 0;
         padding: 3px
       }

       #view-virtualme .cc-vm-sections .vm-toggle-opt {
         font-size: 12.5px;
         font-weight: 600;
         color: #8a8a86;
         padding: 6px 13px;
         border-radius: 30px
       }

       #view-virtualme .cc-vm-sections .vm-toggle-opt.active {
         background: #002671;
         color: #fff
       }

       /* who */
       #view-virtualme .cc-vm-sections .vm-who {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 18px
       }

       #view-virtualme .cc-vm-sections .vm-who-card {
         background: #161616;
         border: 1.5px solid #262626;
         border-radius: 0;
         padding: 24px;
         transition: .2s
       }

       #view-virtualme .cc-vm-sections .vm-who-card:hover {
         border-color: #3a3a3a;
         background: #1b1b1b
       }

       #view-virtualme .cc-vm-sections .vm-who-card h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         color: #fff;
         margin-bottom: 7px
       }

       #view-virtualme .cc-vm-sections .vm-who-card p {
         font-size: 13.5px;
         color: #b0b0b0;
         line-height: 1.55
       }

       /* insights */
       #view-virtualme .cc-vm-sections .vm-insights {
         display: grid;
         grid-template-columns: 1fr 1.1fr;
         gap: 40px;
         align-items: center;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 40px
       }

       #view-virtualme .cc-vm-sections .vm-insights-text h2 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: clamp(22px, 2.6vw, 28px);
         color: #1a1a1a;
         letter-spacing: -0.02em
       }

       #view-virtualme .cc-vm-sections .vm-insights-text p {
         font-size: 15px;
         color: #6b6b6b;
         line-height: 1.6;
         margin-top: 12px
       }

       #view-virtualme .cc-vm-sections .vm-insights-stats {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 14px
       }

       #view-virtualme .cc-vm-sections .vm-stat {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 18px;
         text-align: center
       }

       #view-virtualme .cc-vm-sections .vm-stat .v {
         width: 42px;
         height: 42px;
         border-radius: 0;
         background: #eef0fb;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 12px
       }

       #view-virtualme .cc-vm-sections .vm-stat .v svg {
         width: 21px;
         height: 21px;
         stroke: #002671;
         fill: none
       }

       #view-virtualme .cc-vm-sections .vm-stat h4 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 13.5px;
         color: #1a1a1a;
         margin-bottom: 5px
       }

       #view-virtualme .cc-vm-sections .vm-stat p {
         font-size: 12px;
         color: #6b6b6b;
         line-height: 1.45
       }

       /* cta */
       #view-virtualme .cc-vm-sections .vm-cta {
         text-align: center;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 54px 30px;
         margin: 64px 0 80px;
         background: #f4f4f2
       }

       #view-virtualme .cc-vm-sections .vm-cta h2 {
         font-family: 'Inter';
         font-weight: 800;
         font-size: clamp(24px, 3vw, 34px);
         color: #1a1a1a
       }

       #view-virtualme .cc-vm-sections .vm-cta p {
         font-size: 16px;
         color: #6b6b6b;
         margin-top: 12px;
         max-width: 54ch;
         margin-left: auto;
         margin-right: auto;
         line-height: 1.6
       }

       #view-virtualme .cc-vm-sections .vm-cta-btns {
         display: flex;
         gap: 12px;
         justify-content: center;
         margin-top: 26px;
         flex-wrap: wrap
       }

       @media(max-width:1000px) {

         #view-virtualme .cc-vm-sections .vm-what,
         #view-virtualme .cc-vm-sections .vm-steps,
         #view-virtualme .cc-vm-sections .vm-who {
           grid-template-columns: repeat(2, 1fr)
         }
       }

       @media(max-width:900px) {

         #view-virtualme .cc-vm-sections .vm-hero-grid,
         #view-virtualme .cc-vm-sections .vm-setup-grid,
         #view-virtualme .cc-vm-sections .vm-insights {
           grid-template-columns: 1fr;
           gap: 30px
         }

         #view-virtualme .cc-vm-sections .vm-types {
           grid-template-columns: 1fr
         }

         #view-virtualme .cc-vm-sections .vm-insights-stats {
           grid-template-columns: repeat(3, 1fr)
         }
       }

       @media(max-width:560px) {

         #view-virtualme .cc-vm-sections .vm-what,
         #view-virtualme .cc-vm-sections .vm-steps,
         #view-virtualme .cc-vm-sections .vm-who {
           grid-template-columns: 1fr
         }

         #view-virtualme .cc-vm-sections .vm-insights-stats {
           grid-template-columns: 1fr
         }

         #view-virtualme .cc-vm-sections .wrap {
           padding: 0 20px
         }
       }

       /* ===== CLONE CONNECT (avatar directory) ===== */
       #view-virtualme {
         background: #fff;
         font-family: 'Inter', sans-serif;
         color: #1a1a1a
       }

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

       #view-virtualme .cca-banner {
         width: 100%;
         background: #f4f4f2;
         border-bottom: 1.5px solid #e6e6e3
       }

       #view-virtualme .cca-banner-in {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 24px;
         flex-wrap: wrap;
         padding: 34px 0
       }

       #view-virtualme .cca-banner h1 {
         font-family: 'Inter';
         font-weight: 200;
         font-size: clamp(25px, 5vw, 25px);
         letter-spacing: -0.02em
       }

       #view-virtualme .cca-banner p {
         color: #6b6b6b;
         font-size: 15px;
         margin-top: 0;
         max-width: 560px
       }

       #view-virtualme .cca-search {
         position: relative;
         min-width: 300px
       }

       #view-virtualme .cca-search svg {
         position: absolute;
         left: 16px;
         top: 50%;
         transform: translateY(-50%);
         width: 17px;
         height: 17px;
         stroke: #9a9a9a;
         fill: none
       }

       #view-virtualme .cca-search input {
         width: 100%;
         border: 1.5px solid #e6e6e3;
         background: #fff;
         border-radius: 0;
         padding: 12px 18px 12px 42px;
         font-size: 14px;
         font-family: inherit
       }

       #view-virtualme .cca-search input:focus {
         outline: none;
         border-color: #002671;
         box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
       }

       /* ===== Reels-format avatar hero ===== */
       #view-virtualme .cc-hero {
         background: radial-gradient(120% 120% at 12% 8%, rgba(40, 78, 180, .55) 0%, rgba(13, 16, 32, .6) 42%, rgba(8, 8, 10, 1) 70%), radial-gradient(90% 90% at 92% 100%, rgba(214, 180, 70, .32) 0%, rgba(120, 95, 30, 0) 48%), #08080a;
         color: #fff;
         border-bottom: 1.5px solid #1c1c1c
       }

       #view-virtualme .cc-hero-in {
         display: grid;
         grid-template-columns: 300px minmax(0, 560px);
         gap: 48px;
         align-items: center;
         justify-content: center;
         padding: 54px 0
       }

       /* 9:16 vertical reel */
       #view-virtualme .cc-reel {
         position: relative;
         width: 100%;
         max-width: 300px;
         aspect-ratio: 9/16;
         margin: 0 auto;
         border-radius: 0;
         overflow: hidden;
         background: #1a1a1a;
         box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8)
       }

       #view-virtualme .cc-reel-col {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 16px
       }

       #view-virtualme .cc-reel-connect {
         width: 100%;
         max-width: 300px;
         justify-content: center
       }

       #view-virtualme .cc-reel video {
         width: 150%;
         height: 100%;
         object-fit: cover;
         display: block
       }

       #view-virtualme .cc-reel-grad {
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .78) 100%);
         pointer-events: none
       }

       #view-virtualme .cc-reel-live {
         position: absolute;
         top: 14px;
         left: 14px;
         display: inline-flex;
         align-items: center;
         gap: 7px;
         background: rgba(0, 0, 0, .55);
         backdrop-filter: blur(6px);
         border-radius: 0;
         padding: 5px 12px;
         font-size: 11.5px;
         font-weight: 600;
         letter-spacing: .02em
       }

       #view-virtualme .cc-reel-live .dot {
         width: 7px;
         height: 7px;
         border-radius: 0;
         background: #1f9d57;
         box-shadow: 0 0 0 3px rgba(31, 157, 87, .3);
         animation: ccPulse 1.8s infinite
       }

       @keyframes ccPulse {

         0%,
         100% {
           opacity: 1
         }

         50% {
           opacity: .4
         }
       }

       #view-virtualme .cc-reel-cap {
         position: absolute;
         left: 16px;
         right: 16px;
         bottom: 16px
       }

       #view-virtualme .cc-reel-cap .nm {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px
       }

       #view-virtualme .cc-reel-cap .rl {
         font-size: 12px;
         color: #cfcfcf;
         margin-top: 2px
       }

       #view-virtualme .cc-reel-side {
         position: absolute;
         right: 12px;
         bottom: 84px;
         display: flex;
         flex-direction: column;
         gap: 16px;
         align-items: center
       }

       #view-virtualme .cc-reel-side .ic {
         width: 38px;
         height: 38px;
         border-radius: 0;
         background: rgba(255, 255, 255, .12);
         backdrop-filter: blur(6px);
         display: inline-flex;
         align-items: center;
         justify-content: center
       }

       #view-virtualme .cc-reel-side .ic svg {
         width: 18px;
         height: 18px;
         stroke: #fff;
         fill: none;
         stroke-width: 2
       }

       /* hero text */
       #view-virtualme .cc-hero-eyebrow {
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .16em;
         color: #8c8c8c;
         display: block;
         margin-bottom: 14px
       }

       #view-virtualme .cc-hero-text h1 {
         font-family: 'Inter';
         font-weight: 300;
         font-size: clamp(25px, 3.8vw, 25px);
         letter-spacing: -0.02em;
         line-height: 1.12
       }

       #view-virtualme .cc-hero-text h1 .grad {
         background: linear-gradient(90deg, #7d9bff, #c8b3ff);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent
       }

       #view-virtualme .cc-role {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         margin-top: 14px;
         font-size: 13.5px;
         font-weight: 600;
         color: #dcdcdc
       }

       #view-virtualme .cc-role .sep {
         width: 4px;
         height: 4px;
         border-radius: 0;
         background: #666
       }

       #view-virtualme .cc-tone {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 18px
       }

       #view-virtualme .cc-tone span {
         font-size: 12px;
         font-weight: 600;
         color: #cfcfcf;
         background: rgba(255, 255, 255, .08);
         border: 1px solid rgba(255, 255, 255, .12);
         border-radius: 0;
         padding: 5px 12px
       }

       #view-virtualme .cc-bio {
         font-size: 15.5px;
         color: #b8b8b8;
         line-height: 1.65;
         margin-top: 20px;
         max-width: 52ch
       }

       #view-virtualme .cc-hero-btns {
         display: flex;
         gap: 12px;
         margin-top: 26px;
         flex-wrap: wrap
       }

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

       #view-virtualme .cc-btn svg {
         width: 16px;
         height: 16px;
         stroke: currentColor;
         fill: none;
         stroke-width: 2
       }

       #view-virtualme .cc-btn-primary {
         background: #fff;
         color: #0d0d0d
       }

       #view-virtualme .cc-btn-primary:hover {
         background: #e8e8e8;
         transform: translateY(-1px)
       }

       #view-virtualme .cc-btn-ghost {
         background: transparent;
         border: 1.5px solid rgba(255, 255, 255, .3);
         color: #fff
       }

       #view-virtualme .cc-btn-ghost:hover {
         border-color: #fff;
         background: rgba(255, 255, 255, .06)
       }

       @media(max-width:820px) {
         #view-virtualme .cc-hero-in {
           grid-template-columns: 1fr;
           gap: 34px;
           padding: 40px 0;
           text-align: center
         }

         #view-virtualme .cc-role,
         #view-virtualme .cc-tone,
         #view-virtualme .cc-hero-btns {
           justify-content: center
         }

         #view-virtualme .cc-bio {
           margin-left: auto;
           margin-right: auto
         }
       }

       /* ===== flip stage ===== */
       #view-virtualme .cc-stage {
         perspective: 2200px
       }

       #view-virtualme .cc-flip {
         position: relative;
         transform-style: preserve-3d;
         transition: transform .8s cubic-bezier(.7, .05, .2, 1)
       }

       #view-virtualme .cc-flip.flipped {
         transform: rotateY(180deg)
       }

       #view-virtualme .cc-face {
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden
       }

       #view-virtualme .cc-front {
         position: relative
       }

       #view-virtualme .cc-back {
         position: absolute;
         inset: 0 0 auto 0;
         transform: rotateY(180deg);
         overflow: visible
       }

       /* search button on hero */
       #view-virtualme .cc-btn-search {
         background: linear-gradient(90deg, #3a63d8, #7d9bff);
         color: #fff
       }

       #view-virtualme .cc-btn-search:hover {
         filter: brightness(1.08);
         transform: translateY(-1px)
       }

       /* ===== TED-style back face ===== */
       #view-virtualme .ccs {
         background: #f4f4f2;
         min-height: 100%
       }

       #view-virtualme .ccs .wrap {
         padding: 34px 28px 70px
       }

       #view-virtualme .ccs-back {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: none;
         border: none;
         cursor: pointer;
         font-family: 'Inter';
         font-weight: 600;
         font-size: 13.5px;
         color: #555;
         padding: 0;
         margin-bottom: 26px
       }

       #view-virtualme .ccs-back:hover {
         color: #0d0d0d
       }

       #view-virtualme .ccs-back svg {
         width: 17px;
         height: 17px;
         stroke: currentColor;
         fill: none;
         stroke-width: 2
       }

       #view-virtualme .ccs-title {
         font-family: 'Inter';
         font-weight: 200;
         font-size: clamp(25px, 3.6vw, 25px);
         letter-spacing: -0.02em;
         line-height: 1.12;
         text-align: center;
         color: #1a1a1a;
         max-width: 760px;
         margin: -4px auto 30px
       }

       #view-virtualme .ccs-title span {
         color: #6b6b6b;
         font-weight: 400
       }

       #view-virtualme .ccs-searchrow {
         display: flex;
         gap: 14px;
         max-width: 760px;
         margin: 0 auto;
         flex-wrap: wrap
       }

       #view-virtualme .ccs-search {
         position: relative;
         flex: 1;
         min-width: 240px
       }

       #view-virtualme .ccs-search svg {
         position: absolute;
         left: 18px;
         top: 50%;
         transform: translateY(-50%);
         width: 18px;
         height: 18px;
         stroke: #9a9a9a;
         fill: none;
         stroke-width: 2
       }

       #view-virtualme .ccs-search input {
         width: 100%;
         border: 1.5px solid #d8d8d3;
         background: #fff;
         border-radius: 0;
         padding: 15px 18px 15px 46px;
         font-size: 15px;
         font-family: inherit
       }

       #view-virtualme .ccs-search input:focus {
         outline: none;
         border-color: #002671;
         box-shadow: 0 0 0 3px rgba(0, 38, 113, .1)
       }

       #view-virtualme .ccs-sort {
         position: relative
       }

       #view-virtualme .ccs-sort select {
         -webkit-appearance: none;
         border: 1.5px solid #d8d8d3;
         background: #fff;
         border-radius: 0;
         padding: 15px 42px 15px 18px;
         font-size: 12px;
         font-family: inherit;
         font-weight: 600;
         color: #333;
         cursor: pointer
       }

       #view-virtualme .ccs-sort select:focus {
         outline: none;
         border-color: #002671
       }

       #view-virtualme .ccs-sort svg {
         position: absolute;
         right: 16px;
         top: 50%;
         transform: translateY(-50%);
         width: 16px;
         height: 16px;
         stroke: #6b6b6b;
         fill: none;
         stroke-width: 2;
         pointer-events: none
       }

       #view-virtualme .ccs-pills {
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
         justify-content: center;
         max-width: 820px;
         margin: 28px auto 0
       }

       #view-virtualme .ccs-pill {
         border: 1.5px solid #d8d8d3;
         background: #fff;
         border-radius: 0;
         padding: 10px 22px;
         font-size: 12px;
         font-weight: 200;
         color: #1a1a1a;
         cursor: pointer;
         transition: .18s
       }

       #view-virtualme .ccs-pill:hover {
         border-color: #1a1a1a
       }

       #view-virtualme .ccs-pill.active {
         background: #0d0d0d;
         color: #fff;
         border-color: #0d0d0d
       }

       #view-virtualme .ccs-seeall {
         text-align: center;
         margin-top: 18px
       }

       #view-virtualme .ccs-seeall button {
         background: none;
         border: none;
         cursor: pointer;
         font-family: 'Inter';
         font-weight: 600;
         font-size: 14px;
         color: #1a1a1a;
         text-decoration: underline;
         text-underline-offset: 5px
       }

       #view-virtualme .ccs-sec {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 24px;
         letter-spacing: -0.02em;
         color: #1a1a1a;
         margin: 48px 0 4px
       }

       #view-virtualme .ccs-count {
         font-size: 13px;
         color: #6b6b6b;
         margin-bottom: 20px
       }

       /* reels card grid */
       #view-virtualme .ccs-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 22px
       }

       #view-virtualme .ccs-rcard {
         cursor: pointer;
         display: grid;
         grid-template-columns: 180px 1fr;
         gap: 0;
         background: #fff;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         transition: transform .22s, box-shadow .22s, border-color .22s
       }

       #view-virtualme .ccs-rcard:hover {
         transform: translateY(-3px);
         box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .32);
         border-color: #d6d6d1
       }

       #view-virtualme .ccs-reel {
         position: relative;
         width: 100%;
         height: 100%;
         min-height: 240px;
         overflow: hidden;
         background: linear-gradient(150deg, #1a2b52, #0d0d0d)
       }

       #view-virtualme .ccs-reel img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block
       }

       #view-virtualme .ccs-reel-grad {
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .82) 100%)
       }

       #view-virtualme .ccs-reel-live {
         position: absolute;
         top: 12px;
         left: 12px;
         display: inline-flex;
         align-items: center;
         gap: 6px;
         background: rgba(0, 0, 0, .5);
         backdrop-filter: blur(5px);
         border-radius: 0;
         padding: 4px 10px;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .04em;
         color: #fff
       }

       #view-virtualme .ccs-reel-live .d {
         width: 6px;
         height: 6px;
         border-radius: 0;
         background: #1f9d57;
         box-shadow: 0 0 0 3px rgba(31, 157, 87, .3)
       }

       #view-virtualme .ccs-reel-cap {
         position: absolute;
         left: 14px;
         right: 14px;
         bottom: 14px;
         color: #fff
       }

       #view-virtualme .ccs-reel-cap .al {
         font-size: 12.5px;
         font-style: italic;
         color: #eaeaea;
         line-height: 1.3
       }

       #view-virtualme .ccs-rcard-info {
         padding: 18px 20px;
         display: flex;
         flex-direction: column
       }

       #view-virtualme .ccs-rcard-head {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 12px;
         margin-bottom: 14px
       }

       #view-virtualme .ccs-rcard-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 17px;
         color: #1a1a1a;
         line-height: 1.2;
         margin: 0
       }

       #view-virtualme .ccs-rcard-desig {
         font-size: 12.5px;
         color: #6b6b6b;
         line-height: 1.4;
         margin-top: 3px
       }

       #view-virtualme .ccs-rcard-rating {
         flex-shrink: 0;
         display: inline-flex;
         align-items: center;
         gap: 4px;
         background: #fff7e6;
         color: #9a6b00;
         border-radius: 0;
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 700
       }

       #view-virtualme .ccs-rcard-rating svg {
         width: 12px;
         height: 12px;
         fill: #f5b50a;
         stroke: none
       }

       #view-virtualme .ccs-rcard-rows {
         display: flex;
         flex-direction: column;
         gap: 7px;
         margin-bottom: 14px
       }

       #view-virtualme .ccs-rcard-row {
         display: grid;
         grid-template-columns: 104px 1fr;
         gap: 10px;
         align-items: start
       }

       #view-virtualme .ccs-rcard-row .lbl {
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .05em;
         text-transform: uppercase;
         color: #a8a8a3;
         padding-top: 1px
       }

       #view-virtualme .ccs-rcard-row .val {
         font-size: 12.5px;
         color: #333;
         line-height: 1.4;
         font-weight: 500
       }

       #view-virtualme .ccs-rcard-topics {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         margin-bottom: 16px
       }

       #view-virtualme .ccs-rcard-topics span {
         font-size: 11px;
         font-weight: 600;
         color: #33415c;
         background: #eef0fb;
         border-radius: 0;
         padding: 3px 10px
       }

       #view-virtualme .ccs-rcard-foot {
         display: flex;
         gap: 9px;
         margin-top: auto
       }

       #view-virtualme .ccs-rcard-talk {
         flex: 1;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 7px;
         background: #002671;
         color: #fff;
         border: none;
         border-radius: 0;
         padding: 10px 14px;
         font-family: 'Inter';
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         transition: .15s
       }

       #view-virtualme .ccs-rcard-talk:hover {
         background: #001c54
       }

       #view-virtualme .ccs-rcard-talk svg {
         width: 15px;
         height: 15px
       }

       #view-virtualme .ccs-rcard-secondary {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         background: #fff;
         color: #1a1a1a;
         border: 1.5px solid #d8d8d3;
         border-radius: 0;
         padding: 10px 16px;
         font-family: 'Inter';
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         transition: .15s
       }

       #view-virtualme .ccs-rcard-secondary:hover {
         border-color: #1a1a1a
       }

       #view-virtualme .ccs-more-wrap {
         text-align: center;
         margin-top: 36px
       }

       #view-virtualme .ccs-more {
         background: #fff;
         border: 1.5px solid #1a1a1a;
         border-radius: 0;
         padding: 12px 28px;
         font-family: 'Inter';
         font-weight: 600;
         font-size: 14px;
         cursor: pointer;
         transition: .2s
       }

       #view-virtualme .ccs-more:hover {
         background: #1a1a1a;
         color: #fff
       }

       #view-virtualme .ccs-more.is-done {
         display: none
       }

       #view-virtualme .ccs-empty {
         grid-column: 1/-1;
         text-align: center;
         padding: 50px 0;
         color: #6b6b6b
       }

       #view-virtualme .ccs-empty h3 {
         font-family: 'Inter';
         font-size: 18px;
         color: #1a1a1a;
         margin-bottom: 6px
       }

       @media(max-width:1100px) {
         #view-virtualme .ccs-grid {
           grid-template-columns: 1fr
         }
       }

       @media(max-width:560px) {
         #view-virtualme .ccs-rcard {
           grid-template-columns: 1fr
         }

         #view-virtualme .ccs-reel {
           min-height: 200px;
           aspect-ratio: 16/10
         }
       }

       /* layout */
       #view-virtualme .cca-layout {
         display: grid;
         grid-template-columns: 268px 1fr;
         gap: 34px;
         align-items: start;
         padding: 24px 0 70px
       }

       #view-virtualme .cca-sidebar {
         position: sticky;
         top: 18px
       }

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

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

       #view-virtualme .cca-clear {
         background: none;
         border: none;
         color: #6b6b6b;
         font-size: 12.5px;
         font-weight: 600;
         cursor: pointer;
         text-decoration: underline
       }

       #view-virtualme .cca-clear:hover {
         color: #1a1a1a
       }

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

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

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

       #view-virtualme .cca-chip button:hover {
         color: #000
       }

       #view-virtualme .cca-chip button svg {
         width: 12px;
         height: 12px;
         stroke: currentColor;
         stroke-width: 2.4;
         fill: none
       }

       #view-virtualme .ccafg {
         border-top: 1.5px solid #e6e6e3;
         padding: 16px 0 14px
       }

       #view-virtualme .ccafg:first-of-type {
         border-top: none
       }

       #view-virtualme .ccafg .ccaft {
         display: flex;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
         user-select: none;
         font-size: 13px;
         font-weight: 700;
         margin-bottom: 2px
       }

       #view-virtualme .ccaft .chev {
         width: 14px;
         height: 14px;
         stroke: #9a9a9a;
         fill: none;
         transition: transform .2s
       }

       #view-virtualme .ccafg.collapsed .chev {
         transform: rotate(-90deg)
       }

       #view-virtualme .ccafb {
         display: flex;
         flex-direction: column;
         gap: 9px;
         padding-top: 11px;
         overflow: hidden;
         transition: max-height .25s;
         max-height: 600px
       }

       #view-virtualme .ccafg.collapsed .ccafb {
         max-height: 0;
         padding-top: 0
       }

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

       #view-virtualme .cca-check:hover {
         color: #1a1a1a
       }

       #view-virtualme .cca-check input {
         display: none
       }

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

       #view-virtualme .cca-cbox svg {
         width: 11px;
         height: 11px;
         stroke: #fff;
         stroke-width: 3.2;
         fill: none;
         opacity: 0
       }

       #view-virtualme .cca-check input:checked+.cca-cbox {
         background: #002671;
         border-color: #002671
       }

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

       #view-virtualme .cca-check .cnt {
         margin-left: auto;
         font-size: 11px;
         font-weight: 600;
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         padding: 1px 8px;
         color: #8a8a86
       }

       #view-virtualme .cca-resbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 14px;
         flex-wrap: wrap;
         margin-bottom: 18px;
         padding-top: 8px
       }

       #view-virtualme .cca-filter-toggle {
         display: none;
         align-items: center;
         gap: 8px;
         background: #fff;
         border: 1.5px solid #1a1a1a;
         border-radius: 0;
         padding: 10px 18px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer
       }

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

       #view-virtualme .cca-count {
         margin-left: auto;
         text-align: right;
         font-size: 14px;
         color: #6b6b6b
       }

       #view-virtualme .cca-count b {
         color: #1a1a1a
       }

       #view-virtualme .cca-scrim {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .35);
         z-index: 55
       }

       #view-virtualme .cca-scrim.show {
         display: block
       }

       /* grid + cards */
       #view-virtualme .cca-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
         padding: 4px 0 36px
       }

       #view-virtualme .cca-card {
         border: 1.5px solid #e6e6e3;
         border-radius: 0;
         overflow: hidden;
         background: #fff;
         display: flex;
         flex-direction: column;
         transition: transform .25s, box-shadow .25s, border-color .25s
       }

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

       #view-virtualme .cca-card-top {
         position: relative;
         background: linear-gradient(120deg, #0d0d0d, #1c2b52);
         padding: 18px 20px;
         color: #fff
       }

       #view-virtualme .cca-live {
         position: absolute;
         top: 14px;
         right: 14px;
         display: inline-flex;
         align-items: center;
         gap: 6px;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .04em;
         background: rgba(31, 157, 87, .18);
         color: #5fe0a0;
         border-radius: 0;
         padding: 4px 10px
       }

       #view-virtualme .cca-live::before {
         content: "";
         width: 6px;
         height: 6px;
         border-radius: 0;
         background: #2fe08a;
         box-shadow: 0 0 0 3px rgba(47, 224, 138, .25)
       }

       #view-virtualme .cca-av {
         width: 62px;
         height: 62px;
         border-radius: 0;
         border: 3px solid rgba(255, 255, 255, .2);
         overflow: hidden;
         background: #002671;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 18px;
         color: #fff
       }

       #view-virtualme .cca-av img {
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       #view-virtualme .cca-name {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16.5px;
         margin-top: 12px
       }

       #view-virtualme .cca-alias {
         font-size: 12.5px;
         color: #a9b6d6;
         display: flex;
         align-items: center;
         gap: 6px;
         margin-top: 2px
       }

       #view-virtualme .cca-alias svg {
         width: 13px;
         height: 13px;
         stroke: #8b7df0;
         fill: none
       }

       #view-virtualme .cca-desig {
         font-size: 12.5px;
         color: #c9d2e8;
         margin-top: 8px
       }

       #view-virtualme .cca-body {
         padding: 16px 20px 20px;
         display: flex;
         flex-direction: column;
         flex: 1
       }

       #view-virtualme .cca-avail-l {
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .08em;
         color: #a8a8a3;
         text-transform: uppercase;
         margin-bottom: 8px
       }

       #view-virtualme .cca-avail {
         display: flex;
         flex-wrap: wrap;
         gap: 7px
       }

       #view-virtualme .cca-pill {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         font-size: 12px;
         font-weight: 600;
         border-radius: 0;
         padding: 5px 11px;
         background: #eef0fb;
         color: #3a4ba0
       }

       #view-virtualme .cca-pill svg {
         width: 13px;
         height: 13px;
         stroke: currentColor;
         fill: none
       }

       #view-virtualme .cca-meta {
         display: flex;
         gap: 18px;
         margin: 16px 0;
         padding: 14px 0;
         border-top: 1px solid #f0f0ee;
         border-bottom: 1px solid #f0f0ee
       }

       #view-virtualme .cca-meta .m {
         font-size: 12px;
         color: #8a8a86
       }

       #view-virtualme .cca-meta .m b {
         display: block;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 16px;
         color: #002671
       }

       #view-virtualme .cca-topics {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         margin-bottom: 16px
       }

       #view-virtualme .cca-topic {
         font-size: 11.5px;
         font-weight: 600;
         color: #6b6b6b;
         background: #f4f4f2;
         border-radius: 0;
         padding: 4px 10px
       }

       #view-virtualme .cca-actions {
         display: flex;
         gap: 8px;
         margin-top: auto
       }

       #view-virtualme .cca-btn {
         flex: 1;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 7px;
         border-radius: 0;
         padding: 10px;
         font-size: 13px;
         font-weight: 600;
         cursor: pointer;
         font-family: inherit;
         transition: .15s;
         border: 1.5px solid #e6e6e3;
         background: #fff;
         color: #1a1a1a
       }

       #view-virtualme .cca-btn:hover {
         border-color: #1a1a1a
       }

       #view-virtualme .cca-btn.primary {
         background: #002671;
         border-color: #002671;
         color: #fff
       }

       #view-virtualme .cca-btn.primary:hover {
         background: #001c54
       }

       #view-virtualme .cca-btn svg {
         width: 15px;
         height: 15px;
         stroke: currentColor;
         fill: none
       }

       #view-virtualme .cca-more-wrap {
         display: flex;
         justify-content: center;
         padding: 6px 0
       }

       #view-virtualme .cca-more {
         cursor: pointer;
         background: #fff;
         border: 1.5px solid #1a1a1a;
         border-radius: 0;
         padding: 12px 28px;
         font-size: 13.5px;
         font-weight: 600;
         color: #1a1a1a;
         transition: .2s
       }

       #view-virtualme .cca-more:hover {
         background: #1a1a1a;
         color: #fff
       }

       #view-virtualme .cca-more.is-done {
         display: none
       }

       #view-virtualme .cca-empty {
         grid-column: 1/-1;
         text-align: center;
         padding: 60px 20px;
         color: #6b6b6b
       }

       #view-virtualme .cca-empty h3 {
         font-family: 'Inter';
         font-weight: 700;
         font-size: 18px;
         color: #1a1a1a;
         margin-bottom: 8px
       }

       @media(max-width:1100px) {
         #view-virtualme .cca-grid {
           grid-template-columns: repeat(2, 1fr)
         }
       }

       @media(max-width:900px) {
         #view-virtualme .cca-layout {
           grid-template-columns: 1fr
         }

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

         #view-virtualme .cca-sidebar.open {
           transform: translateX(0)
         }

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

         #view-virtualme .cca-banner-in {
           flex-direction: column;
           align-items: flex-start
         }

         #view-virtualme .cca-search {
           width: 100%
         }
       }

       @media(max-width:560px) {
         #view-virtualme .wrap {
           padding: 0 20px
         }

         #view-virtualme .cca-grid {
           grid-template-columns: 1fr
         }
       }







       .pvx {
         position: relative;
         background: #fff
       }

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

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

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

       .pvx-h-title {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: clamp(28px, 3.6vw, 46px);
         line-height: 1.08;
         letter-spacing: -.025em;
         margin: 4px 0 0;
         color: var(--navy)
       }

       .pvx-h-accent {
         color: #9aa3ad;
         font-weight: 600
       }

       .pvx-h-lead {
         max-width: 420px;
         margin: 18px 0 0;
         font-size: 17px;
         font-weight: 500;
         line-height: 1.6;
         color: var(--muted)
       }

       .pvx-track {
         height: 180vh
       }

       /* scroll distance for the expand */
       .pvx-stage {
         position: sticky;
         top: 0;
         height: 100vh;
         display: flex;
         align-items: center;
         justify-content: flex-end;
         gap: 48px;
         padding: 0 126px;
         overflow: hidden
       }

       /* ---- flowing colored waves behind video card + heading ---- */
       .pvx-waves {
         position: absolute;
         inset: -8% -6%;
         z-index: 0;
         pointer-events: none;
         will-change: transform;
         transition: transform 1.1s cubic-bezier(.22, 1, .36, 1)
       }

       .pvx-waves svg {
         width: 100%;
         height: 100%;
         display: block;
         overflow: visible
       }

       .pvx-wave {
         fill: none;
         stroke-linecap: round
       }

       .pvx-wave.w1 {
         stroke: var(--teal);
         stroke-width: 34;
         opacity: .8
       }

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

         .pvx-waves,
         .pvx-wave {
           transition: none
         }
       }

       .pvx-head {
         flex: 0 0 38%;
         max-width: 430px;
         text-align: left;
         padding: 0 4px;
         transition: opacity .35s ease;
         position: relative;
         z-index: 1
       }

       .pvx-frame {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         height: 62vh;
         left: 40px;
         width: 52%;
         overflow: hidden;
         background: #000;
         will-change: height, left, width;
         z-index: 2
       }

       .pvx-video {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center;
         display: block;
         transform: scale(1.35);
         transform-origin: center center
       }

       .pvx-overlay {
         position: absolute;
         left: 0;
         bottom: 0;
         z-index: 2;
         padding: 34px 40px;
         color: #fff;
         background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent);
         width: 100%;
         opacity: 0;
         transform: translateY(14px);
         transition: opacity .6s, transform .6s
       }

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

       .pvx-eyebrow {
         display: inline-block;
         color: #fff;
         opacity: .85;
         margin-bottom: 8px
       }

       .pvx-title {
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         letter-spacing: -.015em;
         line-height: 1.05;
         font-size: clamp(22px, 3vw, 40px);
         margin: 0;
         color: #fff
       }

       .pvx-play {
         position: absolute;
         top: 18px;
         right: 18px;
         z-index: 3;
         width: 46px;
         height: 46px;
         border: 0;
         cursor: pointer;
         background: rgba(0, 0, 0, .45);
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         backdrop-filter: blur(4px);
         transition: background .2s
       }

       .pvx-play:hover {
         background: rgba(0, 0, 0, .7)
       }

       .pvx-play svg {
         width: 18px;
         height: 18px;
         fill: #fff
       }

       .pvx-play .pvx-ic-play {
         display: none
       }

       .pvx-play.paused .pvx-ic-pause {
         display: none
       }

       .pvx-play.paused .pvx-ic-play {
         display: block
       }

       @media(max-width:860px) {
         .pvx-track {
           height: auto
         }

         .pvx-stage {
           position: static;
           height: auto;
           flex-direction: column;
           align-items: stretch;
           gap: 20px;
           padding: 48px 22px
         }

         .pvx-head {
           flex: none;
           max-width: none;
           opacity: 1 !important
         }

         .pvx-frame {
           position: static;
           top: auto !important;
           right: auto !important;
           width: 100% !important;
           height: 54vh !important
         }

         .pvx-overlay {
           padding: 22px 22px
         }
       }

       @media(prefers-reduced-motion:reduce) {
         .pvx-track {
           height: auto
         }

         .pvx-stage {
           position: static;
           height: auto;
           flex-direction: column;
           align-items: stretch;
           gap: 24px;
           padding: 48px 40px
         }

         .pvx-head {
           flex: none;
           max-width: none;
           opacity: 1 !important
         }

         .pvx-frame {
           position: static;
           top: auto !important;
           right: auto !important;
           width: 100% !important;
           height: 60vh !important
         }
       }




       /* ===== AFTERNOW-STYLE HOME SECTIONS ===== */

       .afn {
         --afn-ink: #0a0a0a;
         --afn-paper: #fff;
         --afn-soft: #f2f2f0;
         --afn-line: #e3e3df;
         --afn-muted: #6b6b66;
         --afn-teal: #5DBB64
       }

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

       .afn-mono {
         font-family: 'SFMono-Regular', ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace;
         text-transform: uppercase;
         letter-spacing: .14em;
         font-size: 12px;
         color: var(--afn-ink)
       }

       .afn-h1 {
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         letter-spacing: -.02em;
         line-height: .98;
         font-size: clamp(40px, 7vw, 100px);
         margin: 0;
         color: var(--afn-ink)
       }

       .afn-h2 {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         letter-spacing: -.015em;
         line-height: 1.04;
         font-size: clamp(28px, 4vw, 50px);
         margin: 0;
         color: var(--afn-ink)
       }

       .afn-btn {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         border: 1.5px solid var(--afn-ink);
         background: var(--afn-ink);
         color: #fff;
         padding: 13px 22px;
         border-radius: 0;
         cursor: pointer;
         font-family: 'SFMono-Regular', ui-monospace, monospace;
         text-transform: uppercase;
         letter-spacing: .12em;
         font-size: 12px;
         transition: .2s;
         text-decoration: none
       }

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

       .afn-btn .ar,
       .afn-link .ar {
         transition: transform .2s
       }

       .afn-btn:hover .ar,
       .afn-link:hover .ar {
         transform: translateX(4px)
       }

       .afn-link {
         font-family: 'SFMono-Regular', ui-monospace, monospace;
         text-transform: uppercase;
         letter-spacing: .12em;
         font-size: 12px;
         color: var(--afn-ink);
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         cursor: pointer
       }

       .afn-hero {
         padding: 34px 0 50px;
         background: var(--afn-paper)
       }

       .afn-hero-stage {
         height: min(42vw, 520px);
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 6px 0 34px
       }

       .afn-tile {
         width: min(48%, 560px);
         aspect-ratio: 16/10;
         position: relative;
         overflow: hidden;
         display: none
       }

       .afn-tile.on {
         display: block;
         animation: afntilein .6s cubic-bezier(.22, 1, .36, 1)
       }

       @keyframes afntilein {
         from {
           opacity: 0;
           transform: scale(.97)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       .afn-tile .lbl {
         position: absolute;
         left: 14px;
         bottom: 12px
       }

       .afn-stmt {
         padding: 64px 0 70px;
         border-top: 1px solid var(--afn-line);
         background: var(--afn-paper)
       }

       .afn-stmt .row {
         display: grid;
         grid-template-columns: 1fr auto;
         gap: 30px;
         align-items: start
       }

       .afn-stmt p {
         font-family: 'Inter', sans-serif;
         font-weight: 300;
         letter-spacing: -.01em;
         line-height: 1.16;
         font-size: clamp(24px, 3.2vw, 40px);
         margin: 0;
         color: #1b1464
       }

       .afn-work {
         padding: 18px 0 70px;
         background: var(--afn-paper)
       }

       .afn-headrow {
         display: none;
         justify-content: space-between;
         align-items: flex-end;
         margin-bottom: 26px
       }

       .afn-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 26px
       }

       .afn-card {
         display: block;
         text-decoration: none;
         color: inherit;
         cursor: pointer
       }

       .afn-card .thumb {
         aspect-ratio: 4/3;
         position: relative;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center
       }

       .afn-card .thumb .logo {
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         font-size: 30px;
         letter-spacing: -.02em
       }

       .afn-card .thumb::after {
         content: "";
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, 0);
         transition: .25s
       }

       .afn-card:hover .thumb::after {
         background: rgba(0, 0, 0, .06)
       }

       .afn-card .nm {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 18px;
         margin: 14px 2px 6px;
         color: var(--afn-ink)
       }

       .afn-card .ds {
         color: var(--afn-muted);
         font-size: 14px;
         line-height: 1.5;
         margin: 0 2px 12px;
         max-width: 34ch
       }

       .afn-card .go {
         padding: 0 2px
       }

       .afn-cap {
         padding: 0px 0 64px;
         background: var(--afn-paper)
       }

       .afn-capgrid {
         display: flex;
         border-top: 1px solid var(--afn-line);
         border-bottom: 1px solid var(--afn-line)
       }

       .afn-col {
         flex: 1 1 0;
         min-width: 0;
         border-right: 1px solid var(--afn-line);
         padding: 30px 24px 26px;
         position: relative;
         transition: flex .45s cubic-bezier(.22, 1, .36, 1), background .3s;
         min-height: 320px
       }

       .afn-col:last-child {
         border-right: 0
       }

       .afn-col h3 {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 22px;
         letter-spacing: -.01em;
         margin: 0 0 18px;
         color: var(--afn-ink)
       }

       .afn-col .body {
         color: var(--afn-muted);
         font-size: 14px;
         line-height: 1.58;
         max-width: 34ch;
         transition: opacity .35s
       }

       .afn-col .more {
         position: absolute;
         left: 24px;
         bottom: 24px;
         opacity: 0;
         transition: opacity .3s
       }

       .afn-capgrid:hover .afn-col {
         flex: .6 1 0
       }

       .afn-capgrid .afn-col:hover {
         flex: 2.4 1 0;
         background: var(--afn-soft)
       }

       .afn-capgrid .afn-col:hover .more {
         opacity: 1
       }

       .afn-quote {
         position: relative;
         padding: 84px 0 48px;
         border-top: 1px solid var(--afn-line);
         background: var(--afn-soft)
       }

       .afn-quote>.wrap {
         display: flex;
         flex-direction: column
       }

       .afn-quote-card {
         order: 2;
         position: relative;
         max-width: 100%;
         padding: 0 0 0 26px;
         border-left: 3px solid var(--afn-teal);
         opacity: 0;
         transform: translateY(24px);
         transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1)
       }

       .afn-quote.in .afn-quote-card {
         opacity: 1;
         transform: none
       }

       .afn-quote-card::before {
         content: '\201C';
         position: absolute;
         top: -40px;
         left: 14px;
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         font-size: 80px;
         line-height: 1;
         color: var(--afn-teal);
         opacity: .25
       }

       .afn-quote blockquote {
         position: relative;
         font-family: 'Inter', sans-serif;
         margin: 0;
         font-weight: 400;
         letter-spacing: -.01em;
         line-height: 1.22;
         font-size: clamp(22px, 3vw, 38px);
         max-width: 100%;
         color: var(--afn-ink)
       }

       .afn-quote .by {
         margin-top: 26px;
         display: flex;
         align-items: center;
         gap: 12px;
       }

       .afn-quote .by img {
         width: 42px;
         height: 42px;
         object-fit: cover;
         border-radius: 50%
       }

       .afn-quote .by .n {
         font-weight: 700;
         font-size: 14px;
         color: var(--afn-ink)
       }

       .afn-quote .by .r {
         color: var(--afn-muted);
         font-size: 13px
       }

       .afn-quote-clients {
         order: 1;
         margin-bottom: 60px;
         padding-bottom: 38px;
         border-bottom: 1px solid var(--afn-line)
       }

       .afn-quote-clients>.afn-mono {
         display: block;
         margin-bottom: 22px;
         color: var(--afn-muted)
       }

       @media(max-width:880px) {
         .afn-quote {
           padding: 56px 0 40px
         }

         .afn-quote-card::before {
           font-size: 60px;
           top: -30px
         }

         .afn-quote-clients {
           margin-bottom: 44px;
           padding-bottom: 28px
         }
       }

       @media(prefers-reduced-motion:reduce) {
         .afn-quote-card {
           opacity: 1 !important;
           transform: none !important;
           transition: none !important
         }
       }

       .afn-clients {
         padding: 8px 0 64px;
         background: var(--afn-soft)
       }

       .afn-clients .row {
         display: grid;
         grid-template-columns: 1fr 3fr;
         gap: 30px;
         align-items: center
       }

       .afn-marks {
         display: flex;
         flex-wrap: wrap;
         gap: 34px 50px;
         align-items: center
       }

       .afn-marks span {
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         font-size: 20px;
         color: #111;
         opacity: .5;
         letter-spacing: -.01em
       }

       .afn-journal {
         padding: 18px 0 76px;
         border-top: 1px solid var(--afn-line);
         background: var(--afn-paper)
       }

       .afn-journal.hm-news {
         border-top: none
       }

       .afn-jhead {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin: 34px 0 26px;
         gap: 24px
       }

       .afn-jgrid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 26px
       }

       .afn-jcard {
         text-decoration: none;
         color: inherit;
         display: block;
         cursor: pointer
       }

       .afn-jcard .img {
         aspect-ratio: 5/4;
         overflow: hidden
       }

       .afn-jcard h4 {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 17px;
         line-height: 1.3;
         margin: 14px 0 6px;
         color: var(--afn-ink)
       }

       .afn-cta {
         color: #fff;
         padding: 0;
         margin-bottom: -3px;
         min-height: 100vh;
         display: flex;
         align-items: center
       }

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

       .afn-cta h2 {
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         letter-spacing: -.02em;
         font-size: clamp(34px, 5vw, 50px);
         line-height: 1.20;
         margin: 20px 0 0;
         color: #fff
       }

       .afn-cta .sub {
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         gap: 30px;
         margin-top: 30px
       }

       .afn-cta .word {
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         letter-spacing: -.02em;
         line-height: .8;
         font-size: clamp(60px, 16vw, 220px);
         margin: 18px 0 0;
         color: #fff;
         overflow: hidden
       }

       .afn-cta .afn-btn {
         border-color: #fff;
         background: #fff;
         color: #0a0a0a
       }

       .afn-cta .afn-btn:hover {
         background: transparent;
         color: #fff
       }

       /* tagline + stat row */
       .afn-cta-facts {
         display: flex;
         flex-wrap: wrap;
         align-items: baseline;
         gap: 14px 40px;
         margin-top: 26px;
         padding-top: 20px;
         border-top: 1px solid rgba(255, 255, 255, .12);
         opacity: 0;
         transform: translateY(16px);
         transition: opacity .7s, transform .7s
       }

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

       .afn-cta-tag {
         color: #9fb2c9;
         opacity: .9
       }

       .afn-cta-stat {
         color: #cfd8e6;
         font-size: 15px
       }

       .afn-cta-stat b {
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         font-size: 26px;
         color: #fff;
         letter-spacing: -.01em;
         margin-right: 8px
       }

       /* ===== CTA impressive animation ===== */
       .afn-cta {
         position: relative;
         overflow: hidden
       }

       .afn-cta>.wrap {
         position: relative;
         z-index: 2
       }

       /* ambient moving glow behind everything */
       .afn-cta-bg {
         position: absolute;
         inset: 0;
         z-index: 0;
         pointer-events: none;
         overflow: hidden
       }

       .afn-cta-bg::before {
         content: "";
         position: absolute;
         inset: -6%;
         background-image: url('/extracted/5056cda494e353ee.jpg');
         background-size: cover;
         background-position: center;
         opacity: 0;
         transition: opacity 1.4s ease;
         animation: afnBgDrift 15s ease-in-out infinite alternate;
         will-change: transform, opacity
       }

       .afn-cta.in .afn-cta-bg::before {
         opacity: .45
       }

       /* dark navy wash so white text stays readable over the image */
       .afn-cta-bg::after {
         content: "";
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgba(0, 5, 44, .86), rgba(0, 5, 44, .74) 45%, rgba(0, 5, 44, .92));
       }

       @keyframes afnBgDrift {
         0% {
           transform: scale(1.06) translate3d(0, 0, 0)
         }

         50% {
           transform: scale(1.12) translate3d(-1.5%, -1%, 0)
         }

         100% {
           transform: scale(1.08) translate3d(1.5%, 1%, 0)
         }
       }

       .afn-cta-glow {
         position: absolute;
         inset: -30% -10% auto -10%;
         height: 140%;
         z-index: 1;
         pointer-events: none;
         background:
           radial-gradient(40% 55% at 18% 12%, rgba(15, 181, 174, .30), transparent 70%),
           radial-gradient(38% 50% at 86% 30%, rgba(74, 91, 208, .22), transparent 72%),
           radial-gradient(45% 60% at 60% 95%, rgba(242, 201, 69, .14), transparent 70%);
         filter: blur(8px);
         opacity: .0;
         transition: opacity 1.1s ease;
         animation: afnGlowDrift 16s ease-in-out infinite alternate
       }

       .afn-cta.in .afn-cta-glow {
         opacity: 1
       }

       @keyframes afnGlowDrift {
         0% {
           transform: translate3d(0, 0, 0) scale(1)
         }

         50% {
           transform: translate3d(2.5%, -2%, 0) scale(1.06)
         }

         100% {
           transform: translate3d(-2%, 2.5%, 0) scale(1.03)
         }
       }

       /* faint grid overlay */
       .afn-cta::before {
         content: "";
         position: absolute;
         inset: 0;
         z-index: 1;
         pointer-events: none;
         opacity: .06;
         background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
         background-size: 64px 64px;
         -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
         mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%)
       }

       /* staged entrance - initial states */
       .afn-cta-eyebrow {
         opacity: 0;
         transform: translateY(14px);
         transition: opacity .6s, transform .6s
       }

       .afn-cta-h2 .ln {
         display: block;
         overflow: hidden
       }

       .afn-cta-h2 .ln i {
         display: block;
         font-style: normal;
         transform: translateY(108%);
         transition: transform .85s cubic-bezier(.19, 1, .22, 1)
       }

       .afn-cta-sub {
         opacity: 0;
         transform: translateY(16px);
         transition: opacity .7s, transform .7s
       }

       .afn-cta-word {
         display: block;
         position: relative
       }

       .afn-liquid {
         width: 100%;
         height: auto;
         display: block;
         overflow: visible;
         vertical-align: bottom;
         margin-bottom: 0
       }

       .afn-liquid-txt {
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         letter-spacing: -.02em;
         font-size: 180px
       }

       .afn-liquid-outline {
         fill: #fff;
         stroke: none
       }

       .afn-liquid-fill {
         fill: #fff;
         opacity: 0;
         transition: opacity .8s ease
       }

       /* the rising liquid body; translateY animated 0(low)..-1(high) via class */
       .afn-liquid-rise {
         transform: translateY(188px);
         transition: none
       }

       /* shine sweep across the wordmark */
       .afn-cta-word .shine {
         position: absolute;
         top: 0;
         left: -40%;
         width: 35%;
         height: 100%;
         pointer-events: none;
         background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
         transform: skewX(-18deg);
         opacity: 0
       }

       /* triggered states (added when section scrolls in) */
       .afn-cta.in .afn-cta-eyebrow {
         opacity: .6;
         transform: none;
         transition-delay: .05s
       }

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

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

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

       .afn-cta.in .afn-cta-word .shine {
         animation: afnShine 1.1s ease 1.5s 1 forwards
       }

       @keyframes afnShine {
         0% {
           left: -40%;
           opacity: 0
         }

         12% {
           opacity: 1
         }

         100% {
           left: 120%;
           opacity: 0
         }
       }

       /* magnetic / glow hover on contact button */
       .afn-magnet {
         position: relative;
         will-change: transform;
         transition: transform .18s ease, background .2s, color .2s, box-shadow .3s
       }

       .afn-cta.in .afn-magnet {
         box-shadow: 0 0 0 0 rgba(255, 255, 255, .0)
       }

       .afn-magnet:hover {
         box-shadow: 0 12px 40px -12px rgba(255, 255, 255, .45)
       }

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

         .afn-cta-eyebrow,
         .afn-cta-h2 .ln i,
         .afn-cta-sub {
           transition: none !important;
           transform: none !important;
           opacity: 1 !important
         }

         .afn-cta-glow {
           animation: none
         }

         .afn-cta-bg::before {
           animation: none
         }

         .afn-cta-word .shine {
           display: none
         }

         .afn-liquid-fill {
           opacity: 1 !important
         }

         .afn-liquid-rise {
           display: none
         }
       }

       /* liquid wave drift while filled */
       @keyframes afnWaveA {
         from {
           transform: translateX(0)
         }

         to {
           transform: translateX(-500px)
         }
       }

       @keyframes afnWaveB {
         from {
           transform: translateX(0)
         }

         to {
           transform: translateX(-500px)
         }
       }

       .afn-cta.in .afn-liquid-rise .afn-wave-a {
         animation: afnWaveA 3.2s linear infinite
       }

       .afn-cta.in .afn-liquid-rise .afn-wave-b {
         animation: afnWaveB 4.6s linear infinite
       }

       @media(max-width:880px) {
         .afn-cta {
           min-height: 56vh
         }

         .afn .wrap {
           padding: 0 22px
         }

         .afn-grid,
         .afn-jgrid {
           grid-template-columns: 1fr
         }

         .afn-tile {
           width: 84%
         }

         .afn-capgrid {
           flex-direction: column
         }

         .afn-col {
           border-right: 0;
           border-bottom: 1px solid var(--afn-line);
           min-height: auto;
           flex: none !important;
           background: transparent !important
         }

         .afn-col:last-child {
           border-bottom: 0
         }

         .afn-col .more {
           position: static;
           opacity: 1;
           margin-top: 14px;
           display: inline-flex
         }

         .afn-stmt .row,
         .afn-clients .row,
         .afn-jhead,
         .afn-cta .sub {
           grid-template-columns: 1fr;
           flex-direction: column;
           align-items: flex-start
         }
       }





       /* ===== CENTER-OPEN VIDEO WINDOW ===== */

       .vwx {
         position: relative;
         background: #00052c
       }

       .vwx-track {
         height: 170vh
       }

       .vwx-stage {
         position: sticky;
         top: 0;
         height: 100vh;
         overflow: hidden;
         background: #00052c
       }

       .vwx-bg {
         position: absolute;
         inset: -6%;
         z-index: 0;
         background-size: cover;
         background-position: center;
         animation: afnBgDrift 24s ease-in-out infinite;
         will-change: transform
       }

       .vwx-veil {
         position: absolute;
         inset: 0;
         z-index: 1;
         pointer-events: none;
         background: linear-gradient(90deg, rgba(0, 5, 44, .86) 0%, rgba(0, 5, 44, .52) 42%, rgba(0, 5, 44, .34) 100%), linear-gradient(0deg, rgba(0, 5, 44, .55), transparent 50%)
       }

       .vwx-line {
         position: absolute;
         left: clamp(24px, 5vw, 72px);
         top: 50%;
         transform: translateY(-50%);
         z-index: 2;
         max-width: 46%;
         will-change: opacity, transform
       }

       .vwx-eyebrow {
         display: inline-block;
         font-size: 13px;
         font-weight: 700;
         letter-spacing: .22em;
         color: var(--teal);
         margin-bottom: 16px
       }

       .vwx-line h2 {
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         font-size: clamp(30px, 4.4vw, 60px);
         line-height: 1.04;
         letter-spacing: -.025em;
         color: #fff;
         margin: 0
       }

       .vwx-line h2 .accent {
         color: var(--teal)
       }

       .vwx-window {
         position: absolute;
         inset: 0;
         z-index: 3;
         clip-path: inset(50% 50% 50% 50%);
         will-change: clip-path;
         background: #000
       }

       .vwx-video {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block
       }

       .vwx-cap {
         position: absolute;
         left: 0;
         bottom: 0;
         z-index: 2;
         width: 100%;
         padding: 34px clamp(24px, 5vw, 56px);
         color: #fff;
         background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: clamp(20px, 2.3vw, 32px);
         letter-spacing: -.01em;
         opacity: 0;
         transform: translateY(12px);
         transition: opacity .6s, transform .6s
       }

       .vwx.full .vwx-cap {
         opacity: 1;
         transform: none
       }

       .vwx-hint {
         position: absolute;
         left: 50%;
         bottom: 34px;
         transform: translateX(-50%);
         z-index: 2;
         font-family: 'Inter', sans-serif;
         font-size: 12px;
         font-weight: 600;
         letter-spacing: .22em;
         color: rgba(255, 255, 255, .72);
         display: flex;
         align-items: center;
         gap: 9px;
         will-change: opacity
       }

       .vwx-hint span {
         display: inline-block;
         animation: vwxBob 1.6s ease-in-out infinite
       }

       @keyframes vwxBob {

         0%,
         100% {
           transform: translateY(0)
         }

         50% {
           transform: translateY(5px)
         }
       }

       @media(max-width:860px) {
         .vwx-track {
           height: auto
         }

         .vwx-stage {
           position: static;
           height: auto;
           min-height: auto
         }

         .vwx-bg {
           display: none
         }

         .vwx-veil {
           display: none
         }

         .vwx-line {
           position: static;
           transform: none !important;
           max-width: none;
           padding: 48px 22px 20px;
           background: #00052c
         }

         .vwx-window {
           position: relative;
           clip-path: none !important;
           height: 56vh
         }

         .vwx-hint {
           display: none
         }

         .vwx-cap {
           opacity: 1;
           transform: none
         }
       }

       @media(prefers-reduced-motion:reduce) {
         .vwx-track {
           height: auto
         }

         .vwx-stage {
           position: static;
           height: auto
         }

         .vwx-bg {
           animation: none
         }

         .vwx-line {
           position: static;
           transform: none !important;
           max-width: none;
           padding: 44px 40px 18px
         }

         .vwx-window {
           position: relative;
           clip-path: none !important;
           height: 64vh
         }

         .vwx-hint {
           display: none
         }

         .vwx-cap {
           opacity: 1;
           transform: none
         }
       }






       .dnx {
         position: relative;
         width: 100%;
         background: #001846
       }

       .dnx-track {
         position: relative;
         height: 160vh
       }

       .dnx-stage {
         position: sticky;
         top: 0;
         height: 100vh;
         width: 100%;
         overflow: hidden
       }

       /* day/night split image fills the section */
       .dnx-img {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         z-index: 1
       }

       /* video sits above, revealed from center via clip-path that widens on hover */
       .dnx-video {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         z-index: 2;
         clip-path: inset(0 calc(50% * (1 - var(--rev, 0))) 0 calc(50% * (1 - var(--rev, 0))))
       }

       /* center divider line (only when not hovered) */
       .dnx-divider {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 50%;
         width: 1.5px;
         background: rgba(255, 255, 255, .45);
         z-index: 4;
         transform: translateX(-50%);
         transition: opacity .4s
       }

       .dnx.is-open .dnx-divider {
         opacity: 0
       }

       /* the two side headings (On default) */
       .dnx-side {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         z-index: 5;
         font-family: 'Inter', sans-serif;
         font-weight: 300;
         font-size: clamp(34px, 6vw, 84px);
         line-height: 1;
         letter-spacing: -.03em;
         transition: opacity .5s, transform .8s cubic-bezier(.7, 0, .2, 1);
         pointer-events: none
       }

       .dnx-side.left {
         left: 6vw;
         color: rgba(255, 255, 255, .92)
       }

       .dnx-side.right {
         right: 6vw;
         color: rgba(255, 255, 255, .92);
         text-align: right
       }

       .dnx.is-open .dnx-side.left {
         opacity: 0;
         transform: translate(-30px, -50%)
       }

       .dnx.is-open .dnx-side.right {
         opacity: 0;
         transform: translate(30px, -50%)
       }

       /* center heading (revealed on hover) */
       .dnx-center {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: 6;
         text-align: center;
         opacity: 0;
         transition: opacity .6s ease .15s;
         pointer-events: none;
         width: 90%
       }

       .dnx.is-open .dnx-center {
         opacity: 1
       }

       .dnx-center h2 {
         font-family: 'Inter', sans-serif;
         font-weight: 200;
         font-size: clamp(34px, 6vw, 84px);
         line-height: 1;
         letter-spacing: -.03em;
         color: rgba(255, 255, 255, .95);
         margin: 0;
         text-shadow: 0 4px 30px rgba(0, 12, 40, .5)
       }

       /* small day/night tags */
       .dnx-tag {
         position: absolute;
         top: 26px;
         z-index: 5;
         font-family: 'Inter', sans-serif;
         font-size: 12px;
         font-weight: 600;
         letter-spacing: .18em;
         text-transform: uppercase;
         transition: opacity .4s
       }

       .dnx-tag.t-night {
         left: 6vw;
         color: rgba(255, 255, 255, .8)
       }

       .dnx-tag.t-day {
         right: 6vw;
         color: rgba(255, 255, 255, .95)
       }

       .dnx.is-open .dnx-tag {
         opacity: 0
       }

       /* info card bottom-right (revealed on hover, like reference) */
       .dnx-card {
         position: absolute;
         right: 6vw;
         bottom: clamp(34px, 5vw, 56px);
         z-index: 7;
         max-width: 340px;
         background: rgba(20, 28, 44, .62);
         backdrop-filter: blur(10px);
         padding: 24px 26px;
         color: #fff;
         opacity: 0;
         transform: translateY(16px);
         transition: opacity .5s ease .25s, transform .5s ease .25s;
         pointer-events: none
       }

       .dnx.is-open .dnx-card {
         opacity: 1;
         transform: none
       }

       .dnx-card p {
         font-size: 14.5px;
         font-weight: 300;
         line-height: 1.65;
         margin: 0;
         color: rgba(255, 255, 255, .9)
       }

       /* hover hint */
       .dnx-hint {
         position: absolute;
         left: 50%;
         bottom: clamp(28px, 4vw, 44px);
         transform: translateX(-50%);
         z-index: 5;
         display: inline-flex;
         align-items: center;
         gap: 9px;
         font-family: 'Inter', sans-serif;
         font-size: 12px;
         font-weight: 500;
         letter-spacing: .1em;
         text-transform: uppercase;
         color: rgba(255, 255, 255, .8);
         transition: opacity .4s
       }

       .dnx.is-open .dnx-hint {
         opacity: 0
       }

       .dnx-hint svg {
         width: 15px;
         height: 15px
       }

       @media(max-width:640px) {
         .dnx-card {
           max-width: none;
           left: 6vw;
           right: 6vw
         }

         .dnx-side {
           font-size: 34px
         }
       }

       @media(prefers-reduced-motion:reduce) {
         .dnx-video {
           transition: clip-path .3s
         }
       }






       .hcl-sec {
         padding: 8px 0 64px;
         background: var(--afn-soft);
       }

       .hcl-head {
         margin-bottom: 24px
       }

       .hcl-marquee {
         position: relative;
         overflow: hidden;
         -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
         mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent)
       }

       .hcl-track {
         display: flex;
         align-items: center;
         gap: clamp(40px, 5vw, 72px);
         width: max-content;
         animation: hclScroll 55s linear infinite
       }

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

       @keyframes hclScroll {
         from {
           transform: translateX(0)
         }

         to {
           transform: translateX(-50%)
         }
       }

       .hcl-logo {
         height: 72px;
         width: auto;
         max-width: 170px;
         object-fit: contain;
         flex: 0 0 auto;
         filter: none;
         opacity: 1;
         transition: transform .4s cubic-bezier(.22, 1, .36, 1), filter .3s ease
       }

       .hcl-logo:hover {
         transform: scale(1.28);
         filter: drop-shadow(0 10px 18px rgba(10, 10, 10, .16))
       }

       @media(prefers-reduced-motion:reduce) {
         .hcl-track {
           animation: none
         }

         .hcl-marquee {
           overflow-x: auto
         }
       }

       /* ===== Trusted by - eyebrow heading + rounded pill container (moving logos inside) ===== */
       .trust-pillsec {
         text-align: center
       }

       .trust-pill-head {
         font-family: 'Sora', sans-serif;
         font-weight: 300;
         font-size: clamp(24px, 2.6vw, 34px);
         letter-spacing: -.02em;
         color: var(--navy);
         margin: 0 0 26px
       }

       .trust-pill {
         position: relative;
         display: block;
         background: #fff;
         border-radius: 999px;
         padding: 24px clamp(20px, 3vw, 40px);
         box-shadow: 0 24px 60px -30px rgba(0, 24, 70, .28), 0 2px 0 rgba(0, 24, 70, .02);
         overflow: hidden;
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
       }

       .trust-pillsec .wrap {
         padding-left: 16px;
         padding-right: 16px;
       }

       .trust-pill .hcl-marquee {
         overflow: hidden
       }

       .trust-pill .hcl-track {
         padding: 6px 0
       }

       @media(max-width:720px) {
         .trust-pill {
           border-radius: 44px;
           padding: 18px 14px
         }

         .trust-pill .hcl-logo {
           height: 52px;
           max-width: 120px
         }

         .trust-pill .hcl-track {
           gap: 36px
         }
       }












       /* ===== WHO GETS BENEFITS ===== */

       /* ===== WHO WE SERVE - full-bleed sticky scroll-sync (alt media + hero bg) ===== */
       .wsv {
         position: relative;
         background: #00052c
       }

       .wsv-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 0
       }

       /* LEFT - full-bleed, full-height media (image <-> video crossfade) */
       .wsv-media {
         position: relative
       }

       .wsv-stage {
         position: sticky;
         top: 0;
         height: 100vh;
         overflow: hidden;
         background: var(--navy)
       }

       .wsv-img {
         position: absolute;
         inset: 0;
         z-index: 0;
         background-size: cover;
         background-position: center;
         opacity: 0;
         transition: opacity .8s ease;
         animation: wsvKen 20s ease-in-out infinite alternate;
         will-change: transform, opacity
       }

       .wsv-video {
         position: absolute;
         left: 0;
         top: -5%;
         width: 100%;
         height: 110%;
         z-index: 0;
         object-fit: cover;
         display: block;
         opacity: 0;
         will-change: transform, opacity;
         transition: opacity .8s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1)
       }

       @keyframes wsvKen {
         0% {
           transform: scale(1.04)
         }

         100% {
           transform: scale(1.13)
         }
       }

       .wsv-veil {
         position: absolute;
         inset: 0;
         z-index: 1;
         pointer-events: none;
         background: linear-gradient(120deg, rgba(0, 5, 44, .55) 0%, rgba(0, 5, 44, .18) 42%, rgba(0, 5, 44, .05) 60%), linear-gradient(0deg, rgba(0, 5, 44, .85), transparent 55%)
       }

       .wsv-tint {
         position: absolute;
         inset: 0;
         z-index: 1;
         pointer-events: none;
         mix-blend-mode: multiply;
         opacity: .22;
         background: linear-gradient(140deg, var(--teal), transparent 70%);
         transition: opacity .7s, background .7s
       }

       .wsv-stage[data-active="1"] .wsv-tint {
         opacity: .16;
         background: linear-gradient(140deg, #f6c945, transparent 70%)
       }

       .wsv-stage[data-active="2"] .wsv-tint {
         opacity: .24;
         background: linear-gradient(140deg, var(--teal), transparent 72%)
       }

       .wsv-stage[data-active="3"] .wsv-tint {
         opacity: .30;
         background: linear-gradient(140deg, #3a52a8, transparent 72%)
       }

       .wsv-idx {
         position: absolute;
         top: 42px;
         left: 48px;
         z-index: 3;
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14px;
         letter-spacing: .32em;
         color: rgba(255, 255, 255, .82)
       }

       .wsv-label {
         position: absolute;
         bottom: 46px;
         left: 48px;
         right: 48px;
         z-index: 3;
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13px;
         letter-spacing: .3em;
         color: rgba(255, 255, 255, .94)
       }

       .wsv-idx.swap,
       .wsv-label.swap {
         animation: wsvUp .55s cubic-bezier(.22, 1, .36, 1) both
       }

       @keyframes wsvUp {
         from {
           opacity: 0;
           transform: translateY(14px)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       /* RIGHT - hero-style background panel with moving bg image */
       .wsv-panel {
         position: relative;
         overflow: hidden;
         background: radial-gradient(120% 90% at 80% 0%, rgba(0, 12, 60, 1), rgba(0, 5, 44, 1) 60%)
       }

       .wsv-bgimg {
         position: absolute;
         inset: -6%;
         z-index: 0;
         pointer-events: none;
         background-size: cover;
         background-position: center;
         opacity: .16;
         animation: afnBgDrift 24s ease-in-out infinite
       }

       .wsv-panel::after {
         content: "";
         position: absolute;
         inset: 0;
         z-index: 0;
         pointer-events: none;
         background: linear-gradient(180deg, rgba(0, 5, 44, .78), rgba(0, 5, 44, .6) 45%, rgba(0, 5, 44, .88))
       }

       .wsv-panel::before {
         content: "";
         position: absolute;
         inset: 0;
         z-index: 1;
         pointer-events: none;
         opacity: .06;
         background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
         background-size: 64px 64px;
         -webkit-mask-image: radial-gradient(circle at 60% 30%, #000, transparent 80%);
         mask-image: radial-gradient(circle at 60% 30%, #000, transparent 80%)
       }

       .wsv-glow {
         position: absolute;
         inset: -20% -10%;
         z-index: 1;
         pointer-events: none;
         filter: blur(10px);
         background:
           radial-gradient(40% 50% at 22% 14%, rgba(15, 181, 174, .30), transparent 70%),
           radial-gradient(38% 48% at 88% 34%, rgba(74, 91, 208, .22), transparent 72%),
           radial-gradient(46% 60% at 64% 96%, rgba(242, 201, 69, .12), transparent 70%);
         animation: afnGlowDrift 16s ease-in-out infinite alternate
       }

       .wsv-inner {
         position: relative;
         z-index: 2;
         display: flex;
         gap: 30px;
         padding: 0 clamp(40px, 5vw, 84px)
       }

       /* vertical progress rail (ticks, no radius) */
       .wsv-rail {
         flex: 0 0 auto;
         position: sticky;
         top: 0;
         height: 100vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
         gap: 9px;
         align-items: center
       }

       .wsv-rail i {
         display: block;
         width: 2px;
         height: 22px;
         background: rgba(255, 255, 255, .22);
         transition: height .45s cubic-bezier(.22, 1, .36, 1), background .45s
       }

       .wsv-rail i.on {
         height: 42px;
         background: var(--teal)
       }

       .wsv-content {
         flex: 1 1 auto;
         min-width: 0
       }

       .wsv-intro {
         min-height: 60vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 80px 0
       }

       .wsv-eyebrow {
         display: inline-block;
         font-size: 13px;
         font-weight: 700;
         letter-spacing: .22em;
         color: var(--teal);
         margin-bottom: 18px
       }

       .wsv-h2 {
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         font-size: clamp(32px, 3.6vw, 52px);
         line-height: 1.06;
         letter-spacing: -.025em;
         color: #fff;
         margin: 0
       }

       .wsv-h2 .accent {
         color: var(--teal);
         font-weight: 600
       }

       .wsv-intro-p {
         max-width: 40ch;
         margin: 22px 0 0;
         font-size: 17px;
         font-weight: 600;
         line-height: 1.62;
         color: #c3d2e6
       }

       .wsv-block {
         position: relative;
         min-height: 56vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 50px 0;
         border-top: 1px solid rgba(255, 255, 255, .10);
         opacity: .32;
         transition: opacity .55s
       }

       .wsv-block[data-on] {
         opacity: 1
       }

       /* giant faint index numeral - fills the empty space behind the text with a subtle editorial accent */
       .wsv-num {
         position: absolute;
         z-index: -1;
         top: -.1em;
         right: 0;
         margin: 0;
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         font-size: clamp(100px, 11vw, 170px);
         line-height: 1;
         letter-spacing: -.04em;
         color: rgba(255, 255, 255, .04);
         transition: color .6s;
         pointer-events: none;
       }

       .wsv-block[data-on] .wsv-num {
         color: rgba(15, 181, 174, .10)
       }

       .wsv-ic {
         width: 58px;
         height: 58px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 22px;
         background: rgba(255, 255, 255, .05);
         border: 1px solid rgba(255, 255, 255, .14);
         transition: background .5s, border-color .5s, transform .5s
       }

       .wsv-block[data-on] .wsv-ic {
         background: linear-gradient(135deg, #5DBB64, #5DBB64);
         border-color: transparent;
         transform: translateY(-3px)
       }

       .wsv-ic svg {
         width: 27px;
         height: 27px;
         stroke: #fff;
         fill: none
       }

       .wsv-block h3 {
         font-family: 'Inter', sans-serif;
         font-weight: 500;
         font-size: clamp(26px, 2.8vw, 38px);
         letter-spacing: -.02em;
         color: #fff;
         margin: 0 0 14px
       }

       .wsv-block p {
         font-size: 16.5px;
         font-weight: 500;
         line-height: 1.62;
         color: #c2cfe2;
         max-width: 44ch;
         margin: 0 0 22px
       }

       .wsv-chip {
         display: inline-block;
         font-family: 'Inter', sans-serif;
         font-size: 11.5px;
         font-weight: 700;
         letter-spacing: .05em;
         color: var(--teal);
         background: rgba(15, 181, 174, .12);
         border: 1px solid rgba(15, 181, 174, .32);
         padding: 9px 15px;
         transition: .45s
       }

       .wsv-block[data-on] .wsv-chip {
         color: #00052c;
         background: var(--teal);
         border-color: var(--teal)
       }

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

         .wsv-stage {
           height: 42vh;
           min-height: 240px
         }

         .wsv-idx {
           top: 22px;
           left: 24px
         }

         .wsv-label {
           bottom: 22px;
           left: 24px;
           right: 24px
         }

         .wsv-inner {
           padding: 0 22px;
           gap: 0
         }

         .wsv-rail {
           display: none
         }

         .wsv-intro,
         .wsv-block {
           min-height: auto;
           padding: 54px 0
         }

         .wsv-intro {
           padding-top: 46px
         }

         .wsv-num {
           font-size: 88px
         }
       }

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

         .wsv-video,
         .wsv-glow,
         .wsv-bgimg,
         .wsv-img {
           animation: none;
           transition: opacity .4s
         }

         .wsv-idx.swap,
         .wsv-label.swap {
           animation: none
         }
       }

       /* ===== WHO WE SERVE - white panel variant (readable dark text, faint grey grid) ===== */
       .wsv-panel {
         background: #ffffff
       }

       .wsv-panel::after {
         display: none
       }

       .wsv-bgimg {
         display: none
       }

       .wsv-glow {
         opacity: .35;
         filter: blur(24px)
       }

       /* keep the grid but as a very light grey, slightly more visible on white */
       .wsv-panel::before {
         opacity: .9;
         background-image: linear-gradient(rgba(0, 24, 70, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 24, 70, .06) 1px, transparent 1px);
       }

       /* text + accents recolored for light background */
       .wsv-h2 {
         color: var(--navy)
       }

       .wsv-intro-p {
         color: var(--muted)
       }

       .wsv-block {
         border-top-color: rgba(0, 24, 70, .10)
       }

       .wsv-block h3 {
         color: var(--navy)
       }

       .wsv-block p {
         color: var(--muted)
       }

       .wsv-num {
         color: rgba(0, 24, 70, .05)
       }

       .wsv-block[data-on] .wsv-num {
         color: rgba(15, 181, 174, .12)
       }

       .wsv-ic {
         background: rgba(0, 24, 70, .04);
         border-color: rgba(0, 24, 70, .12)
       }

       .wsv-rail i {
         background: rgba(0, 24, 70, .18)
       }

       .wsv-rail i.on {
         background: var(--teal)
       }






       .repsec {
         padding: 80px 0 80px;
         background: #fff;
         overflow: hidden
       }

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

       .repsec .rep-head {
         margin-bottom: 18px
       }

       .repsec .rep-head h2 {
         color: #1B1464
       }

       .repsec .rep-head p {
         color: var(--muted)
       }

       .rep-stage {
         position: relative;
         display: grid;
         grid-template-columns: 1fr 320px 1fr;
         align-items: stretch
       }

       .rep-mid {
         grid-column: 2;
         position: relative
       }

       .rep-mid svg {
         width: 100%;
         height: auto;
         display: block
       }

       .rep-col {
         grid-column: auto;
         position: relative
       }

       .rep-left {
         grid-column: 1
       }

       .rep-right {
         grid-column: 3
       }

       .rep-item {
         position: absolute;
         max-width: 288px;
         padding: 4px 2px;
         opacity: 0;
         transform: translateY(18px);
         transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
         display: flex;
         flex-direction: column
       }

       .rep-left .rep-item {
         right: 26px;
         text-align: right;
         align-items: flex-end
       }

       .rep-right .rep-item {
         left: 26px;
         text-align: left;
         align-items: flex-start
       }

       .rep-item.in {
         opacity: 1;
         transform: translateY(0)
       }

       .rep-ic {
         width: 48px;
         height: 48px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 6px
       }

       .rep-ic svg {
         width: 34px;
         height: 34px;
         fill: none;
         stroke-width: 2.1;
         stroke-linecap: round;
         stroke-linejoin: round
       }

       .rep-title {
         font-family: 'Inter', sans-serif;
         font-weight: 800;
         font-size: 17px;
         letter-spacing: .09em;
         text-transform: uppercase;
         margin: 0 0 9px
       }

       .rep-tx {
         font-size: 13px;
         line-height: 1.62;
         color: #6b7280;
         margin: 0;
         text-align: justify
       }

       .rep-left .rep-tx {
         text-align: right
       }

       .rep-right .rep-tx {
         text-align: left
       }

       @media(max-width:860px) {
         .rep-mid {
           display: none
         }

         .rep-stage {
           display: block;
           padding-left: 26px;
           position: relative
         }

         .rep-stage::before {
           content: "";
           position: absolute;
           left: 6px;
           top: 8px;
           bottom: 20px;
           width: 4px;
           background: linear-gradient(180deg, #33a3a0, #5ab4e0, #3f6fb3, #b07a52, #9a6fc0, #e26fa3)
         }

         .rep-col {
           display: block
         }

         .rep-item {
           position: static;
           max-width: none;
           margin: 0 0 26px;
           text-align: left;
           align-items: flex-start
         }

         .rep-left .rep-item,
         .rep-right .rep-item {
           right: auto;
           left: auto;
           text-align: left;
           align-items: flex-start
         }

         .rep-left .rep-tx,
         .rep-right .rep-tx {
           text-align: left
         }

         .rep-item::before {
           content: "";
           position: absolute;
           left: -26px;
           margin-top: 14px;
           width: 15px;
           height: 15px;
           background: var(--acc);
           box-shadow: 0 0 0 4px #fff
         }
       }



       /* ============ LET'S TALK - full-screen immersive ============ */
       .ltk {
         position: relative;
         min-height: 100vh;
         display: flex;
         align-items: center;
         overflow: hidden;
         background: radial-gradient(120% 120% at 50% 0%, #0006ab 0%, #000000 42%, #032b81 100%);
         font-family: 'Inter', sans-serif;
         color: #fff;
         padding: clamp(56px, 8vh, 96px) 50px;
       }

       .ltk-canvas {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         z-index: 0;
         display: block;
       }

       .ltk-veil {
         position: absolute;
         inset: 0;
         z-index: 1;
         pointer-events: none;
         background: radial-gradient(60% 60% at 50% 50%, rgba(15, 181, 174, .10), transparent 70%);
       }

       .ltk-inner {
         position: relative;
         z-index: 2;
         max-width: none;
         margin: 0;
         width: 100%;
         pointer-events: none;
       }

       .ltk-inner a,
       .ltk-inner button {
         pointer-events: auto;
       }

       .ltk-eyebrow {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         font-size: 15px;
         font-weight: 600;
         letter-spacing: .14em;
         text-transform: uppercase;
         color: #8fe6e1;
         margin: 0;
       }

       .ltk-eyebrow::before {
         content: "";
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background: var(--teal, #5DBB64);
         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, #5DBB64, #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: #5DBB64
       }

       .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-svg-over {
         z-index: 3
       }

       .jrn-track {
         display: none
       }

       .jrn-fill {
         opacity: 0
       }

       .jrn-helix-a,
       .jrn-helix-b {
         display: none
       }

       .jrn-seg {
         stroke-linecap: round;
         fill: none
       }

       .jrn-seg.a {
         stroke: #5DBB64
       }

       .jrn-seg.b {
         stroke: #1e2158
       }

       .jrn-helix3d {
         filter: drop-shadow(2px 6px 9px rgba(20, 24, 60, .30))
       }

       .jrn-settle-glow {
         filter: blur(6px);
         pointer-events: none
       }

       .jrn-seg,
       .jrn-seg-hi {
         stroke-linecap: round;
         fill: none
       }

       .jrn-rungs,
       .jrn-weaves,
       .jrh-leaves {
         pointer-events: none
       }

       .jrn-rung {
         display: block
       }

       .jrn-weave {
         display: none
       }

       .jrn-connector {
         display: none
       }

       .jrn-connector-dot {
         display: none
       }

       .jrh-leaf {
         color: #c3d8b2;
         opacity: .55;
         transition: opacity .5s, color .5s
       }

       .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: 300px;
         margin: 0 0 40px;
         min-height: 150px
       }

       .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: 150px;
         height: 150px
       }

       .jrn-circle {
         width: 150px;
         height: 150px;
         border-radius: 50%;
         overflow: hidden;
         background: #eef2f6;

         box-shadow: 0 0 0 10px #fff, 0 0 0 13px rgba(93, 187, 100, .50), 0 30px 60px -28px rgba(0, 24, 70, .5) !important;;
         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: 44px;
         height: 44px;
         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: 20px;
         height: 20px
       }

       .jrn-row.left .jrn-badge {
         right: 2px;
         bottom: 10px
       }

       .jrn-row.right .jrn-badge {
         left: 2px;
         bottom: 10px
       }

       /* 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: #1e2158;
         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: 90px 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: #1e2158;
         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)
       }

       /* video-reveal finale   CSS 3D plane: gentle float + mouse/scroll parallax tilt inside a soft glow halo */
       .jrn-bloom {
         width: clamp(300px, 34vw, 460px);
         margin: 0 auto 14px
       }

       .jrn-bloom-3d {
         position: relative;
         perspective: 1000px
       }

       .jrn-bloom-glow {
         display: none
       }

       .jrn-end.in .jrn-bloom-glow {
         opacity: 0
       }

       @keyframes jrnGlowPulse {

         0%,
         100% {
           transform: scale(1)
         }

         50% {
           transform: scale(1.14)
         }
       }

       .jrn-bloom-inner {
         position: relative;
         z-index: 1;
         transform: translateY(20px) scale(.5);
         opacity: 0;
         transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) .3s, opacity .6s ease .3s
       }

       .jrn-end.in .jrn-bloom-inner {
         transform: translateY(0) scale(1);
         opacity: 1
       }

       .jrn-bloom-tilt {
         width: 100%;
         transform-style: preserve-3d;
         will-change: transform
       }

       .jrn-bloom-tilt video {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover
       }

       .jrn-bloom-tilt img {
         display: block;
         width: 100%;
         height: auto;
         object-fit: contain
       }

       /* ===== new end-piece: navy box + Hindi logo + Since 1978 ===== */
       .jrn-endlogo {
         width: 100%;
         display: flex;
         justify-content: center;
       }

       .jrn-endlogo-img {
         display: block;
         width: 180px;
         height: auto;
         /* slow, calm load-in: fade + gentle grow */
         opacity: 0;
         transform: scale(.9);
         transform-origin: center 60%;
         transition:
           opacity 2.6s ease,
           transform 2.6s cubic-bezier(.22, 1, .36, 1);
       }

       .jrn-end.in .jrn-endlogo-img {
         opacity: 1;
         transform: scale(1);
       }

       .jrn-endbox {
         position: relative;
         width: 100%;
         aspect-ratio: 1098 / 960;
         background:
           radial-gradient(120% 120% at 50% 12%, #2a2170 0%, #1b1464 46%, #12103f 100%);
         border: 1px solid rgba(255, 255, 255, .06);
         box-shadow:
           0 40px 90px -40px rgba(3, 15, 77, .7),
           inset 0 1px 0 rgba(255, 255, 255, .05);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 4%;
         overflow: hidden;
         /* box grows in first */
         transform: translateY(24px) scale(.86);
         opacity: 0;
         transition: transform 1s cubic-bezier(.22, 1, .36, 1), opacity .7s ease;
       }

       .jrn-end.in .jrn-endbox {
         transform: translateY(0) scale(1);
         opacity: 1;
       }

       /* subtle corner sparkle like the reference */
       .jrn-endbox::after {
         content: "";
         position: absolute;
         right: 8%;
         bottom: 9%;
         width: 14px;
         height: 14px;
         background:
           radial-gradient(closest-side, rgba(255, 255, 255, .8), transparent 70%),
           linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, .55) 50%, transparent 54%),
           linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, .55) 50%, transparent 54%);
         opacity: 0;
         transition: opacity .8s ease 1.1s;
       }

       .jrn-end.in .jrn-endbox::after {
         opacity: .55;
       }

       .jrn-endbox-logo,
       .jrn-endbox-since {
         display: block;
         width: auto;
         /* text appears last, after the box + strands have settled */
         opacity: 0;
         transform: translateY(10px);
         transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
       }

       .jrn-endbox-logo {
         height: 26%;
         max-width: 74%;
         object-fit: contain;
         margin-top: 4%;
         transition-delay: 1.15s;
       }

       .jrn-endbox-since {
         height: 8.5%;
         max-width: 60%;
         object-fit: contain;
         margin-bottom: 5%;
         transition-delay: 1.35s;
       }

       .jrn-end.in .jrn-endbox-logo,
       .jrn-end.in .jrn-endbox-since {
         opacity: .96;
         transform: translateY(0);
       }

       .jrn-endbox-rule {
         width: 26%;
         height: 2px;
         background: linear-gradient(90deg, transparent, #C9A24B, transparent);
         opacity: 0;
         transition: opacity .7s ease 1.25s;
       }

       .jrn-end.in .jrn-endbox-rule {
         opacity: .85;
       }

       @media(prefers-reduced-motion:reduce) {
         .jrn-bloom-glow {
           animation: none
         }

         .jrn-endlogo-img {
           transition: none !important;
           transform: none !important;
           filter: none !important;
           opacity: 1 !important
         }

         .jrn-endbox,
         .jrn-endbox-logo,
         .jrn-endbox-since,
         .jrn-endbox-rule,
         .jrn-endbox::after {
           transition: none !important;
           transition-delay: 0s !important;
           transform: none !important;
           opacity: 1 !important
         }
       }

       @media(max-width:820px) {
         .jrn-bloom {
           width: min(40vw, 160px)
         }

         .jrn-wrap {
           padding: 20px 20px 90px
         }

         .jrn-svg {
           left: 24px;
           width: 3px
         }

         .jrn-track,
         .jrn-fill,
         .jrn-helix-a,
         .jrn-helix-b,
         .jrn-rungs,
         .jrn-weaves,
         .jrn-connectors {
           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: 820px
       }

       .jrh-scroll {
         overflow-x: auto;
         overflow-y: hidden;
         cursor: grab;
         scrollbar-width: thin;
         padding: 30px 0 30px
       }

       .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: 70px;
         transform: translateY(-50%);
         overflow: visible;
         pointer-events: none
       }

       .jrh-track-line,
       .jrh-fill-line {
         display: none
       }

       .jrh-helix3d {
         filter: drop-shadow(1px 3px 5px rgba(20, 24, 60, .28))
       }

       .jrh-seg,
       .jrh-seg-hi {
         stroke-linecap: round;
         fill: none
       }

       .jrh-rung {
         stroke-linecap: round
       }

       .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: 680px
       }

       .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: #1e2158;
         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: #1e2158;
         margin: 0 0 18px
       }

       .jrh-hint {
         text-align: center;
         font-size: 13px;
         font-weight: 600;
         letter-spacing: .04em;
         color: #8a93a1;
         padding: 6px 20px 10px
       }

       .jrh-prog {
         display: inline-block;
         width: 120px;
         height: 4px;
         background: #e6e8ec;
         vertical-align: middle;
         margin-left: 10px;
         position: relative
       }

       .jrh-prog::after {
         content: "";
         position: absolute;
         left: 0;
         top: 0;
         height: 100%;
         width: var(--p, 0%);
         background: var(--teal);
         transition: width .1s linear
       }

       @media(max-width:820px) {
         .jrh-item {
           width: 260px;
           flex-basis: 260px
         }

         .jrh-card {
           width: 240px
         }

         .jrh-media,
         .jrh-circle {
           width: 160px;
           height: 160px
         }
       }





       .pr {
         background: linear-gradient(88deg, #f3ffeb 0%, #e8f4ff 100%);
         padding: 84px 0 72px
       }

       .pr-wrap {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 40px
       }

       .pr-head {
         text-align: center;
         max-width: 780px;
         margin: 0 auto 56px;
         transition: transform .6s cubic-bezier(.6, .01, .05, 1), opacity .45s
       }

       .pr-head.is-sliding {
         transform: translateX(-40px);
         opacity: 0;
         pointer-events: none
       }

       .pr-eyebrow {
         display: inline-block;
         font-family: 'Inter', sans-serif;
         font-size: 15px;
         font-weight: 500;
         letter-spacing: .04em;
         color: var(--muted);
         position: relative;
         padding-left: 18px;
         margin-bottom: 14px
       }

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

       .pr-title {
         font-family: 'Inter', sans-serif;
         font-weight: 200;
         font-size: clamp(28px, 3.6vw, 42px);
         line-height: 1.08;
         letter-spacing: -.025em;
         color: var(--navy);
         margin: 4px 0 0
       }

       .pr-title-accent {
         color: #9aa3ad;
         font-weight: 300
       }

       .pr-lead {
         max-width: 620px;
         margin: 18px auto 0;
         font-size: 16px;
         font-weight: 300;
         line-height: 1.6;
         color: var(--muted)
       }

       /* ===== LEVEL 1: category hero panels ===== */
       .pr-cats {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 24px
       }

       .pr-cat {
         position: relative;
         min-height: 440px;
         border: none;
         cursor: pointer;
         overflow: hidden;
         text-align: left;
         padding: 0;
         background: #0c1a40;
         color: #fff;
         display: flex;
         align-items: flex-end;
         transition: box-shadow .4s, transform .4s
       }

       .pr-cat::after {
         content: "";
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         transform: scale(1);
         transition: transform .8s cubic-bezier(.22, 1, .36, 1);
         z-index: 0
       }

       .pr-cat-research::after {
         background-image: linear-gradient(120deg, rgba(3, 37, 125, .35), rgba(8, 18, 44, .4)), url('https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?auto=format&fit=crop&w=1000&h=900&q=80')
       }

       .pr-cat-comm::after {
         background-image: linear-gradient(120deg, rgba(3, 37, 125, .35), rgba(8, 18, 44, .4)), url('https://images.unsplash.com/photo-1574943320219-553eb213f72d?auto=format&fit=crop&w=1000&h=900&q=80')
       }

       .pr-cat:hover::after {
         transform: scale(1.06)
       }

       .pr-cat-ov {
         position: absolute;
         inset: 0;
         z-index: 1;
         background: linear-gradient(to top, rgba(6, 14, 34, .94), rgba(6, 14, 34, .4) 55%, rgba(6, 14, 34, .15))
       }

       .pr-cat:hover {
         box-shadow: 0 40px 90px -40px rgba(0, 24, 70, .6)
       }

       .pr-cat-inner {
         position: relative;
         z-index: 2;
         padding: 42px 44px
       }

       .pr-cat-tag {
         font-family: 'Inter', sans-serif;
         font-size: 12.5px;
         font-weight: 600;
         letter-spacing: .08em;
         text-transform: uppercase;
         color: var(--teal)
       }

       .pr-cat-name {
         font-family: 'Inter', sans-serif;
         font-weight: 200;
         font-size: clamp(26px, 2.8vw, 36px);
         line-height: 1.08;
         color: #fff;
         margin: 14px 0 0
       }

       .pr-cat-desc {
         font-size: 14.5px;
         font-weight: 300;
         line-height: 1.6;
         color: rgba(255, 255, 255, .82);
         margin: 14px 0 0;
         max-width: 380px
       }

       .pr-cat-go {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         margin: 22px 0 0;
         font-family: 'Inter', sans-serif;
         font-size: 14px;
         font-weight: 600;
         color: #fff
       }

       .pr-cat-go svg {
         width: 17px;
         height: 17px;
         transition: transform .25s
       }

       .pr-cat:hover .pr-cat-go svg {
         transform: translateX(5px)
       }

       /* Level-1 slide-out when a category is chosen */
       .pr-cats {
         transition: transform .6s cubic-bezier(.6, .01, .05, 1), opacity .45s
       }

       .pr-cats.is-sliding {
         transform: translateX(-40px);
         opacity: 0;
         pointer-events: none
       }

       /* ===== LEVEL 2: split - rail (left) + horizontal cards (right) ===== */
       .pr-split[hidden] {
         display: none
       }

       .pr-split {
         display: grid;
         /* grid-template-columns:280px 1fr; */
         gap: 32px;
         align-items: start;
         opacity: 0;
         transform: translateX(40px);
         transition: opacity .55s ease .15s, transform .6s cubic-bezier(.6, .01, .05, 1) .15s
       }

       .pr-split.is-in {
         opacity: 1;
         transform: translateX(0)
       }

       .pr-rail {
         position: sticky;
         top: 90px;
         display: flex;
         flex-direction: column;
         gap: 14px
       }

       .pr-back {
         grid-column: 1/-1;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         width: fit-content;
         background: none;
         border: none;
         cursor: pointer;
         font-family: 'Inter', sans-serif;
         font-size: 13.5px;
         font-weight: 600;
         color: var(--navy);
         padding: 10px 16px;
         margin: 0 0 28px -16px;
         border-radius: 8px;
         transition: .2s
       }

       .pr-back svg {
         width: 17px;
         height: 17px;
         transition: transform .2s
       }

       .pr-back:hover {
         color: var(--teal-dark);
         background: rgba(15, 181, 174, .08)
       }

       .pr-back:hover svg {
         transform: translateX(-4px)
       }

       /* shrunk category panels in the rail */
       .pr-rail-cat {
         position: relative;
         overflow: hidden;
         border: none;
         cursor: pointer;
         text-align: left;
         padding: 22px 20px;
         background: #0c1a40;
         color: #fff;
         display: flex;
         flex-direction: column;
         gap: 5px;
         min-height: 118px;
         transition: box-shadow .35s, transform .35s
       }

       .pr-rail-cat::after {
         content: "";
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         z-index: 0;
         opacity: .5;
         filter: grayscale(1) brightness(.85);
         transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .4s, opacity .4s
       }

       .pr-rail-cat[data-cat="research"]::after {
         background-image: linear-gradient(120deg, rgba(3, 37, 125, .4), rgba(8, 18, 44, .55)), url('https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?auto=format&fit=crop&w=500&h=400&q=80')
       }

       .pr-rail-cat[data-cat="commercial"]::after {
         background-image: linear-gradient(120deg, rgba(3, 37, 125, .4), rgba(8, 18, 44, .55)), url('https://images.unsplash.com/photo-1574943320219-553eb213f72d?auto=format&fit=crop&w=500&h=400&q=80')
       }

       .pr-rail-cat>span {
         position: relative;
         z-index: 1
       }

       .pr-rail-cat:hover::after {
         transform: scale(1.08)
       }

       /* inactive tab reads muted/black-&-white; its labels dim too */
       .pr-rail-cat:not(.is-active) {
         background: #1a2236
       }

       .pr-rail-cat:not(.is-active) .pr-rail-name {
         color: rgba(255, 255, 255, .62)
       }

       .pr-rail-cat:not(.is-active):hover::after {
         filter: grayscale(.4) brightness(.95)
       }

       .pr-rail-tag {
         font-family: 'Inter', sans-serif;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .07em;
         text-transform: uppercase;
         color: rgba(255, 255, 255, .6)
       }

       .pr-rail-name {
         font-family: 'Inter', sans-serif;
         font-weight: 300;
         font-size: 17px;
         line-height: 1.15;
         color: #fff
       }

       .pr-rail-count {
         font-family: 'Inter', sans-serif;
         font-size: 12px;
         font-weight: 500;
         color: rgba(255, 255, 255, .6);
         margin-top: 2px
       }

       /* active tab: full colour + teal accent */
       .pr-rail-cat.is-active {
         box-shadow: inset 4px 0 0 var(--teal), 0 24px 50px -34px rgba(0, 24, 70, .6)
       }

       .pr-rail-cat.is-active::after {
         filter: grayscale(0) brightness(1);
         opacity: .75
       }

       .pr-rail-cat.is-active .pr-rail-tag {
         color: var(--teal)
       }

       .pr-rail-cat.is-active .pr-rail-name {
         color: #fff
       }

       .pr-cat-heading {
         font-family: 'Inter', sans-serif;
         font-weight: 200;
         font-size: clamp(24px, 2.8vw, 34px);
         color: var(--navy);
         margin: 0;
         letter-spacing: -.02em
       }

       .pr-cat-sub {
         font-size: 15px;
         font-weight: 300;
         color: var(--muted);
         margin: 10px 0 28px;
         max-width: 620px
       }

       /* horizontal product cards (photo left, text right) + accordion */
       .pr-list {
         display: flex;
         flex-direction: column;
         gap: 14px
       }

       .pr-card {
         display: grid;
         grid-template-columns: 200px 1fr;
         background: #f6f8fb;
         overflow: hidden;
         transition: box-shadow .35s;
         border-left: 3px solid transparent
       }

       .pr-card.is-open {
         box-shadow: 0 26px 54px -34px rgba(0, 24, 70, .5);
         border-left-color: var(--teal)
       }

       .pr-card-media {
         position: relative;
         overflow: hidden;
         min-height: 150px
       }

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

       .pr-card:hover .pr-card-media img {
         transform: scale(1.06)
       }

       .pr-card-num {
         position: absolute;
         top: 12px;
         left: 12px;
         font-family: 'Inter', sans-serif;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .06em;
         color: #fff;
         background: rgba(3, 37, 125, .6);
         backdrop-filter: blur(6px);
         padding: 4px 9px
       }

       .pr-card-body {
         padding: 22px 26px;
         display: flex;
         flex-direction: column;
         justify-content: center
       }

       .pr-card-name {
         font-family: 'Inter', sans-serif;
         font-weight: 400;
         font-size: 19px;
         line-height: 1.2;
         color: var(--navy);
         margin: 0
       }

       .pr-card-desc {
         font-size: 14px;
         font-weight: 300;
         line-height: 1.6;
         color: #5a6275;
         margin: 8px 0 0;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden
       }

       .pr-card-toggle {
         align-self: flex-start;
         display: inline-flex;
         align-items: center;
         gap: 7px;
         margin: 14px 0 0;
         background: none;
         border: none;
         cursor: pointer;
         font-family: 'Inter', sans-serif;
         font-size: 12.5px;
         font-weight: 600;
         letter-spacing: .03em;
         text-transform: uppercase;
         color: var(--teal);
         padding: 0;
         transition: .2s
       }

       .pr-card-toggle svg {
         width: 15px;
         height: 15px;
         transition: transform .3s
       }

       .pr-card.is-open .pr-card-toggle svg {
         transform: rotate(180deg)
       }

       /* expanding panel */
       .pr-card-more {
         grid-column: 1 / -1;
         max-height: 0;
         overflow: hidden;
         transition: max-height .5s cubic-bezier(.6, .01, .05, 1)
       }

       .pr-card.is-open .pr-card-more {
         max-height: 320px
       }

       .pr-card-more-inner {
         padding: 0 26px 24px;
         border-top: 1px solid #e3e6ee;
         margin-top: 0
       }

       .pr-card-more-inner p {
         font-size: 14px;
         line-height: 1.7;
         font-weight: 300;
         color: #5a6275;
         margin: 18px 0 0
       }

       .pr-card-cta {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         margin: 16px 0 0;
         background: var(--navy);
         color: #fff;
         border: none;
         font-family: 'Inter', sans-serif;
         font-size: 13px;
         font-weight: 600;
         padding: 11px 22px;
         cursor: pointer;
         transition: .25s
       }

       .pr-card-cta svg {
         width: 15px;
         height: 15px;
         transition: transform .25s
       }

       .pr-card-cta:hover {
         background: #03257D
       }

       .pr-card-cta:hover svg {
         transform: translateX(4px)
       }

       /* ---------- Level 2 item rail + sticky detail panel (catalogue) ---------- */
       .pr-stage {
         display: grid;
         grid-template-columns: minmax(280px, 1fr) 1.2fr;
         gap: 0;
         margin-top: 8px
       }

       .pr-railwrap {
         border-right: 1px solid var(--line);
         max-height: 560px;
         overflow-y: auto
       }

       .pr-item-row {
         width: 100%;
         display: flex;
         align-items: baseline;
         gap: 18px;
         padding: 16px 24px 16px 0;
         background: none;
         border: none;
         border-bottom: 1px solid var(--line);
         cursor: pointer;
         text-align: left;
         font-family: 'Inter', sans-serif;
         transition: padding .25s, background .25s
       }

       .pr-item-row:hover {
         padding-left: 14px;
         background: rgba(15, 181, 174, .06)
       }

       .pr-item-row[aria-selected="true"] {
         padding-left: 14px
       }

       .pr-item-row[aria-selected="true"] .pr-item-name {
         color: var(--teal-dark)
       }

       .pr-item-row[aria-selected="true"] .pr-item-num {
         color: var(--teal)
       }

       .pr-item-num {
         font-size: 11px;
         font-weight: 700;
         color: var(--muted);
         min-width: 22px;
         letter-spacing: .05em;
         transition: color .2s
       }

       .pr-item-name {
         flex: 1;
         font-family: 'Inter', sans-serif;
         font-size: 16px;
         font-weight: 400;
         letter-spacing: -.01em;
         color: var(--navy);
         transition: color .2s
       }

       .pr-item-arrow {
         font-size: 14px;
         color: var(--teal);
         opacity: 0;
         transform: translateX(-6px);
         transition: opacity .25s, transform .25s
       }

       .pr-item-row:hover .pr-item-arrow,
       .pr-item-row[aria-selected="true"] .pr-item-arrow {
         opacity: 1;
         transform: translateX(0)
       }

       .pr-detail {
         position: sticky;
         top: 90px;
         align-self: start;
         padding: 0 0 0 40px;
         display: flex;
         flex-direction: column;
         justify-content: center
       }

       .pr-fig {
         position: relative;
         aspect-ratio: 16/11;
         overflow: hidden;
         background: var(--navy);
         margin: 0
       }

       .pr-fig img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: opacity .4s, transform 6s ease
       }

       .pr-fig.swap img {
         opacity: 0
       }

       .pr-fig::after {
         content: "";
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, transparent 55%, rgba(0, 24, 70, .4))
       }

       .pr-fig-tag {
         position: absolute;
         left: 16px;
         top: 16px;
         z-index: 2;
         font-size: 10.5px;
         font-weight: 600;
         letter-spacing: .1em;
         text-transform: uppercase;
         color: #fff;
         background: rgba(0, 24, 70, .55);
         backdrop-filter: blur(6px);
         padding: 6px 12px
       }

       .pr-d-name {
         font-family: 'Inter', sans-serif;
         font-size: clamp(24px, 2.4vw, 32px);
         font-weight: 400;
         letter-spacing: -.02em;
         margin: 22px 0 0;
         color: var(--navy)
       }

       .pr-d-short {
         font-size: 15px;
         font-weight: 600;
         color: var(--teal-dark);
         margin: 10px 0 0
       }

       .pr-d-long {
         font-size: 14.5px;
         line-height: 1.7;
         color: var(--muted);
         margin: 12px 0 0;
         max-width: 560px;
         font-weight: 300
       }

       .pr-d-cta {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         margin-top: 22px;
         font-family: 'Inter', sans-serif;
         font-size: 13.5px;
         font-weight: 600;
         color: #fff;
         background: var(--navy);
         border: none;
         padding: 13px 24px;
         cursor: pointer;
         transition: background .25s, transform .25s;
         align-self: flex-start
       }

       .pr-d-cta svg {
         width: 15px;
         height: 15px;
         transition: transform .25s
       }

       .pr-d-cta:hover {
         background: var(--teal-dark);
         transform: translateX(4px)
       }

       @media(max-width:900px) {
         .pr-split {
           grid-template-columns: 1fr
         }

         .pr-back {
           margin-left: 0
         }

         .pr-rail {
           position: static;
           flex-direction: row;
           flex-wrap: wrap
         }

         .pr-rail-cat {
           flex: 1;
           min-width: 200px
         }

         .pr-stage {
           grid-template-columns: 1fr
         }

         .pr-railwrap {
           border-right: none;
           max-height: 320px
         }

         .pr-detail {
           position: static;
           padding: 28px 0 0
         }
       }

       @media(max-width:680px) {
         .pr-cats {
           grid-template-columns: 1fr
         }

         .pr-cat {
           min-height: 340px
         }

         .pr-card {
           grid-template-columns: 120px 1fr
         }

         .pr-card-media {
           min-height: 120px
         }

         .pr-card-body {
           padding: 16px 18px
         }
       }

       .service-sv {
         height: 100% !important;
         min-height: 100% !important;
       }


       .sv {
         background: #fff;
         padding: 84px 0 110px;
         min-height: 90vh
       }

       .sv-wrap {
         max-width: 1180px;
         margin: 0 auto;
         padding: 0 40px
       }

       /* header - matches the About-page eyebrow/title/lead style */
       .sv-head {
         text-align: center;
         max-width: 760px;
         margin: 0 auto 60px
       }

       .sv-eyebrow {
         display: inline-block;
         font-family: 'Inter', sans-serif;
         font-size: 15px;
         font-weight: 500;
         letter-spacing: .04em;
         color: var(--muted);
         position: relative;
         padding-left: 18px;
         margin-bottom: 14px
       }

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

       .sv-title {
         font-family: 'Inter', sans-serif;
         font-weight: 200;
         font-size: clamp(28px, 3.6vw, 42px);
         line-height: 1.08;
         letter-spacing: -.025em;
         color: var(--navy);
         margin: 4px 0 0
       }

       .sv-title-accent {
         color: #9aa3ad;
         font-weight: 300
       }

       .sv-lead {
         max-width: 600px;
         margin: 18px auto 0;
         font-size: 16px;
         font-weight: 300;
         line-height: 1.6;
         color: var(--muted)
       }

       /* feature rows - alternating image / text */
       .sv-rows {
         display: flex;
         flex-direction: column;
         gap: 28px
       }

       .sv-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
         background: #f6f8fb;
         overflow: hidden;
         align-items: stretch
       }

       .sv-row.alt {
         background: #0c1a40
       }

       .sv-media {
         position: relative;
         min-height: 340px;
         overflow: hidden
       }

       .sv-media img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform .8s cubic-bezier(.22, 1, .36, 1)
       }

       .sv-row:hover .sv-media img {
         transform: scale(1.05)
       }

       .sv-num {
         position: absolute;
         top: 18px;
         left: 18px;
         z-index: 2;
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13px;
         letter-spacing: .1em;
         color: #fff;
         background: rgba(3, 37, 125, .55);
         backdrop-filter: blur(6px);
         padding: 7px 13px
       }

       .sv-body {
         padding: 46px 48px;
         display: flex;
         flex-direction: column;
         justify-content: center
       }

       .sv-kicker {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         font-family: 'Inter', sans-serif;
         font-size: 12.5px;
         font-weight: 600;
         letter-spacing: .08em;
         text-transform: uppercase;
         color: var(--teal);
         margin: 0 0 12px
       }

       .sv-h {
         font-family: 'Inter', sans-serif;
         font-weight: 300;
         font-size: clamp(22px, 2.4vw, 30px);
         line-height: 1.12;
         color: var(--navy);
         margin: 0
       }

       .sv-row.alt .sv-h {
         color: #fff
       }

       .sv-p {
         font-size: 15px;
         line-height: 1.7;
         font-weight: 300;
         color: #5a6275;
         margin: 16px 0 0
       }

       .sv-row.alt .sv-p {
         color: rgba(255, 255, 255, .8)
       }

       /* layout: text-left on alt rows */
       .sv-row.alt .sv-media {
         order: 2
       }

       .sv-row.alt .sv-body {
         order: 1
       }

       /* CTA */
       .sv-cta-wrap {
         text-align: center;
         margin: 62px 0 0
       }

       .sv-cta {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         background: var(--navy);
         color: #fff;
         border: none;
         font-family: 'Inter', sans-serif;
         font-size: 15px;
         font-weight: 600;
         padding: 16px 38px;
         cursor: pointer;
         transition: .25s;
         box-shadow: 0 18px 40px -18px rgba(0, 24, 70, .6)
       }

       .sv-cta svg {
         width: 18px;
         height: 18px;
         transition: transform .25s
       }

       .sv-cta:hover {
         background: #03257D
       }

       .sv-cta:hover svg {
         transform: translateX(4px)
       }

       @media(max-width:860px) {

         .sv-row,
         .sv-row.alt {
           grid-template-columns: 1fr
         }

         .sv-row.alt .sv-media {
           order: 0
         }

         .sv-row.alt .sv-body {
           order: 0
         }

         .sv-media {
           min-height: 260px
         }

         .sv-body {
           padding: 34px 30px
         }
       }






       .ab {
         max-width: 1180px;
         margin: 0 auto;
         padding: 30px 6vw 0;
         font-family: 'Inter', sans-serif;
         color: var(--navy)
       }

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

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

       .ab .ab-tag.center {
         padding-left: 0
       }

       .ab .ab-tag.center::before {
         display: none
       }

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

       .ab .ab-h2.center {
         text-align: center
       }

       /* HERO */
       /* ===== IMP HERO (Why-Saveer hero style) ===== */
       .imp-hero {
         text-align: center;
         padding: 30px 0 20px
       }

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

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

       .imp-h1 {
         font-family: 'Inter', sans-serif;
         font-weight: 200;
         font-size: clamp(28px, 3.4vw, 40px);
         line-height: 1.08;
         letter-spacing: -.025em;
         margin: 4px 0 0;
         color: var(--navy)
       }

       .imp-h1-accent {
         color: #9aa3ad;
         font-weight: 300
       }

       .imp-lead {
         max-width: 560px;
         margin: 18px auto 0;
         font-size: 16px;
         font-weight: 300;
         line-height: 1.6;
         color: var(--muted)
       }

       .imp-hero-media {
         margin-top: 46px;
         overflow: hidden;
         width: 60%;
         margin-left: auto;
         margin-right: auto;
         border-radius: 16px;
         box-shadow: 0 30px 60px -34px rgba(3, 15, 77, .45);
         transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s
       }

       .imp-hero-media img {
         width: 100%;
         height: clamp(320px, 44vh, 480px);
         object-fit: cover;
         display: block;
         filter: none;
         transition: transform .7s cubic-bezier(.22, 1, .36, 1)
       }

       .imp-hero-media:hover {
         transform: translateY(-6px);
         box-shadow: 0 44px 80px -34px rgba(3, 15, 77, .55)
       }

       .imp-hero-media:hover img {
         transform: scale(1.05)
       }

       @media(max-width:760px) {
         .imp-hero-media {
           width: 100%
         }
       }

       .imp-hero-stats {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0;
         margin-top: 54px;
         max-width: 920px;
         margin-left: auto;
         margin-right: auto
       }

       .imp-hstat {
         padding: 0 28px;
         text-align: center;
         border-right: 1px solid rgba(0, 24, 70, .12)
       }

       .imp-hstat:last-child {
         border-right: none
       }

       .imp-hnum {
         font-family: 'Sora', sans-serif;
         font-weight: 300;
         font-size: clamp(40px, 5vw, 58px);
         line-height: 1;
         letter-spacing: -.03em;
         color: var(--navy);
         display: inline-block
       }

       .imp-hsuf {
         color: var(--teal);
         font-weight: 400
       }

       .imp-hlabel {
         margin: 14px 0 0;
         font-size: 14px;
         font-weight: 300;
         line-height: 1.5;
         color: var(--muted)
       }

       .imp-hero-cta {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         margin-top: 48px;
         font-family: 'Inter', sans-serif;
         font-size: 15px;
         font-weight: 600;
         color: var(--navy);
         text-decoration: none;
         transition: gap .2s, color .2s
       }

       .imp-hero-cta svg {
         width: 18px;
         height: 18px;
         transition: transform .2s
       }

       .imp-hero-cta:hover {
         color: var(--teal)
       }

       .imp-hero-cta:hover svg {
         transform: translateX(4px)
       }

       @media(max-width:720px) {
         .imp-hero-stats {
           grid-template-columns: 1fr;
           gap: 28px
         }

         .imp-hstat {
           border-right: none;
           border-bottom: 1px solid rgba(0, 24, 70, .12);
           padding-bottom: 24px
         }

         .imp-hstat:last-child {
           border-bottom: none;
           padding-bottom: 0
         }
       }

       .ab-hero {
         text-align: center;
         padding: 30px 0 10px
       }

       .ab-eyebrow {
         text-align: center
       }

       .ab-h1 {
         font-family: 'Inter', sans-serif;
         font-weight: 200;
         font-size: clamp(28px, 3.4vw, 40px);
         line-height: 1.08;
         letter-spacing: -.025em;
         margin: 4px 0 0
       }

       .ab-h1-accent {
         color: #9aa3ad;
         font-weight: 600
       }

       .ab-h1 .ab-h1-accent {
         font-weight: 300
       }

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

       .ab-hero-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: auto auto;
         gap: 16px;
         margin-top: 46px
       }

       .ab-hero-grid img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         filter: grayscale(0);
         transition: filter .5s ease
       }

       .ab-hg-tall {
         grid-row: span 2;
         border-radius: 0;
         overflow: hidden;
         aspect-ratio: auto
       }

       .ab-hero-grid .ab-hg-tall:hover img,
       .ab-hero-grid .ab-hg-wide:hover img,
       .ab-hero-grid .ab-hg-sq:hover img {
         filter: grayscale(1)
       }

       .ab-hg-wide {
         border-radius: 0;
         overflow: hidden;
         height: 230px
       }

       .ab-hg-sq {
         border-radius: 0;
         overflow: hidden;
         height: 230px
       }

       /* TRUST */
       .ab-trust {
         text-align: center;
         padding: 60px 0 30px
       }

       .ab-trust-label {
         font-size: 11px;
         letter-spacing: .18em;
         text-transform: uppercase;
         color: #aab2bc;
         margin-bottom: 30px
       }

       .ab-trust-logos {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: clamp(28px, 5vw, 64px);
         flex-wrap: wrap;
         max-width: 1000px;
         margin: 0 auto
       }

       .ab-trust-logos.sm {
         gap: 36px;
         margin-top: 8px
       }

       .ab-logo {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 18px;
         color: #c2c8d0;
         letter-spacing: -.01em
       }

       .ab-logo-img {
         height: 58px;
         width: auto;
         max-width: 130px;
         object-fit: contain;
         filter: grayscale(1);
         opacity: .62;
         transition: filter .3s, opacity .3s, transform .3s
       }

       .ab-logo-img:hover {
         filter: grayscale(0);
         opacity: 1;
         transform: translateY(-3px)
       }

       .ab-trust-viewall {
         display: inline-flex;
         align-items: center;
         gap: 7px;
         font-family: 'Inter', sans-serif;
         font-size: 14px;
         font-weight: 600;
         color: #1B1464;
         text-decoration: none;
         transition: gap .2s, color .2s;
         white-space: nowrap
       }

       .ab-trust-viewall svg {
         width: 17px;
         height: 17px;
         transition: transform .2s
       }

       .ab-trust-viewall:hover {
         color: var(--teal)
       }

       .ab-trust-viewall:hover svg {
         transform: translateX(4px)
       }

       /* QUOTE */
       .ab-quote {
         text-align: center;
         max-width: 760px;
         margin: 0 auto;
         padding: 80px 0
       }

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

       .ab-quote-mark.sm {
         font-size: 40px;
         margin-bottom: 6px
       }

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

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

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

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

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

       /* TEAM */
       .ab-team {
         padding: 40px 0
       }

       .abm-marquee {
         position: relative;
         margin-top: 34px;
         overflow: hidden;
         -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
         mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)
       }

       .abm-track {
         display: flex;
         gap: 22px;
         width: max-content;
         animation: abmScroll 48s linear infinite
       }

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

       @keyframes abmScroll {
         from {
           transform: translateX(0)
         }

         to {
           transform: translateX(-50%)
         }
       }

       .abm-card {
         flex: 0 0 auto;
         width: 200px;
         background: #fff;
         border: 1px solid var(--line);
         padding: 0;
         transition: box-shadow .3s, transform .3s, border-color .3s
       }

       .abm-card:hover {
         box-shadow: 0 22px 46px -26px rgba(0, 24, 70, .45);
         transform: translateY(-4px);
         border-color: #d4dae2
       }

       .abm-ph {
         width: 100%;
         aspect-ratio: 1;
         overflow: hidden;
         background: #eef1f4
       }

       .abm-ph img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform .5s cubic-bezier(.22, 1, .36, 1)
       }

       .abm-card:hover .abm-ph img {
         transform: scale(1.05)
       }

       .abm-name {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14.5px;
         letter-spacing: -.01em;
         color: #1B1464;
         margin: 14px 16px 2px
       }

       .abm-role {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         margin: 0 16px 16px
       }

       .abm-cta {
         text-align: center;
         margin-top: 34px
       }

       .abm-viewall {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         font-family: 'Inter', sans-serif;
         font-size: 14px;
         font-weight: 600;
         color: #1B1464;
         text-decoration: none;
         border: 1px solid var(--line);
         padding: 12px 26px;
         transition: .2s
       }

       .abm-viewall svg {
         width: 17px;
         height: 17px;
         transition: transform .2s
       }

       .abm-viewall:hover {
         background: #1B1464;
         color: #fff;
         border-color: #1B1464
       }

       .abm-viewall:hover svg {
         transform: translateX(4px)
       }

       @media(prefers-reduced-motion:reduce) {
         .abm-track {
           animation: none
         }

         .abm-marquee {
           overflow-x: auto
         }
       }

       .ab-team-head {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 40px;
         align-items: end;
         margin-bottom: 34px
       }

       .ab-team-intro {
         font-size: 14.5px;
         font-weight: 300;
         line-height: 1.65;
         color: var(--muted);
         max-width: 440px;
         justify-self: end
       }

       .ab-team-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 20px;
         background: #F5F6F8;
         border-radius: 0;
         padding: 26px
       }

       .ab-tm-card {
         text-align: center
       }

       .ab-tm-ph {
         border-radius: 0;
         overflow: hidden;
         aspect-ratio: 1/1;
         background: #e8eef0
       }

       .ab-tm-ph img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         filter: grayscale(0);
         transition: filter .4s
       }

       .ab-tm-card:hover .ab-tm-ph img {
         filter: grayscale(1)
       }

       .ab-tm-name {
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         margin-top: 14px
       }

       .ab-tm-role {
         font-size: 12.5px;
         color: var(--muted);
         margin-top: 3px
       }

       /* AWARDS */
       .ab-awards {
         padding: 70px 0
       }

       .ab-awards .ab-tag.center,
       .ab-awards .ab-h2.center {
         display: block;
         text-align: center
       }

       .ab-awards .ab-tag.center {
         padding-left: 0
       }

       .abt-timeline {
         position: relative;
         max-width: 980px;
         margin: 54px auto 0;
         padding: 10px 0
       }

       .abt-cta {
         text-align: center;
         margin-top: 18px
       }

       .abt-why-btn {
         display: inline-flex;
         align-items: center;
         gap: 9px;
         font-family: 'Inter', sans-serif;
         font-size: 14.5px;
         font-weight: 600;
         color: #fff;
         background: #1B1464;
         text-decoration: none;
         padding: 14px 32px;
         transition: .2s
       }

       .abt-why-btn svg {
         width: 18px;
         height: 18px;
         transition: transform .2s
       }

       .abt-why-btn:hover {
         background: #030F4D
       }

       .abt-why-btn:hover svg {
         transform: translateX(4px)
       }

       .abt-spine {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 50%;
         width: 2px;
         transform: translateX(-50%);
         background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent)
       }

       .abt-item {
         position: relative;
         width: 50%;
         padding: 0 48px 46px;
         box-sizing: border-box;
         opacity: 0;
         transform: translateY(26px);
         transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
       }

       .abt-item.in {
         opacity: 1;
         transform: none
       }

       .abt-item.left {
         left: 0;
         text-align: right
       }

       .abt-item.right {
         left: 50%;
         text-align: left
       }

       .abt-node {
         position: absolute;
         top: 2px;
         width: 46px;
         height: 46px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #1B1464;
         color: #fff;
         z-index: 2;
         box-shadow: 0 0 0 6px var(--offwhite, #f6f7f9)
       }

       .abt-item.left .abt-node {
         right: -23px
       }

       .abt-item.right .abt-node {
         left: -23px
       }

       .abt-node svg {
         width: 22px;
         height: 22px
       }

       .abt-card {
         position: relative;
         background: #fafafa;
         border: 1px solid var(--line);
         padding: 6px 24px;
         transition: box-shadow .3s, transform .3s, border-color .3s;
         box-shadow: 0 6px 0 -1px #e3e7ec, 0 16px 26px -12px rgba(0, 24, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 5px rgba(0, 24, 70, .07)
       }

       .abt-card:hover {
         box-shadow: 0 8px 0 -1px #dde2e8, 0 22px 34px -12px rgba(0, 24, 70, .34), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 5px rgba(0, 24, 70, .08);
         transform: translateY(-2px);
         border-color: var(--line)
       }

       /* little arrow connecting card to spine */
       .abt-card::before {
         content: "";
         position: absolute;
         top: 14px;
         width: 12px;
         height: 12px;
         background: #fafafa;
         border: 1px solid var(--line);
         transform: rotate(45deg)
       }

       .abt-item.left .abt-card::before {
         right: -7px;
         border-left: none;
         border-bottom: none
       }

       .abt-item.right .abt-card::before {
         left: -7px;
         border-right: none;
         border-top: none
       }

       .abt-badge {
         display: inline-block;
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .05em;
         text-transform: uppercase;
         padding: 4px 11px;
         margin-bottom: 12px
       }

       .abt-badge.ok {
         background: #E6F7F5;
         color: #0B7C75
       }

       .abt-badge.pio {
         background: #FBF1DA;
         color: #9A7B1E
       }

       .abt-badge.yr {
         background: #1B1464;
         color: #fff;
         letter-spacing: .03em
       }

       .abt-name {
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         font-size: 16.5px;
         letter-spacing: -.01em;
         color: #1B1464;
         margin: 0 0 8px;
         line-height: 1.25
       }

       .abt-desc {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6;
         margin: 0
       }

       @media(max-width:760px) {
         .abt-spine {
           left: 23px
         }

         .abt-item {
           width: 100%;
           left: 0 !important;
           text-align: left !important;
           padding: 0 0 40px 60px
         }

         .abt-item .abt-node {
           left: 0 !important;
           right: auto !important
         }

         .abt-item .abt-card::before {
           left: -7px !important;
           right: auto !important;
           border-right: none;
           border-top: none;
           border-left: 1px solid var(--line);
           border-bottom: 1px solid var(--line)
         }
       }

       @media(prefers-reduced-motion:reduce) {
         .abt-item {
           transition: opacity .3s
         }
       }

       /* TESTIMONIALS */
       .ab-test {
         display: grid;
         grid-template-columns: 1.4fr 1fr 1fr;
         gap: 20px;
         padding: 30px 0 60px;
         align-items: start
       }

       .ab-test-stat,
       .ab-test-card {
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 24px
       }

       .ab-test-stat {
         background: #fff
       }

       .ab-stat-big {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 30px;
         color: var(--navy);
         margin-bottom: 14px
       }

       .ab-stat-big span {
         font-size: 14px;
         font-weight: 400;
         color: var(--muted)
       }

       .ab-test-tx {
         font-size: 13.5px;
         font-weight: 300;
         line-height: 1.6;
         color: #4a545f;
         margin: 4px 0 0
       }

       .ab-test-by {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-top: 18px
       }

       .ab-test-by img {
         width: 38px;
         height: 38px;
         border-radius: 0;
         object-fit: cover
       }

       .ab-test-name {
         font-weight: 700;
         font-size: 13px;
         color: var(--navy)
       }

       .ab-test-role {
         font-size: 11.5px;
         color: var(--muted)
       }

       /* WHY */
       .ab-why {
         padding: 60px 0;
         text-align: center
       }

       .ab-why-sub {
         font-size: 14.5px;
         font-weight: 300;
         color: var(--muted);
         margin: 14px 0 40px
       }

       .ab-why-cols {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 0;
         max-width: 780px;
         margin: 0 auto;
         background: #F5F6F8;
         border-radius: 0;
         padding: 30px;
         text-align: left
       }

       .ab-why-col {
         padding: 8px 24px
       }

       .ab-why-other {
         border-right: 1px solid var(--line)
       }

       .ab-why-h {
         display: flex;
         align-items: center;
         gap: 8px;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         margin-bottom: 20px;
         justify-content: center
       }

       .ab-why-ic {
         font-size: 16px
       }

       .ab-why-col ul {
         list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
         flex-direction: column;
         gap: 16px
       }

       .ab-why-col li {
         position: relative;
         padding-left: 26px;
         font-size: 13.5px;
         font-weight: 300;
         color: #4a545f;
         line-height: 1.4
       }

       .ab-why-col li::before {
         position: absolute;
         left: 0;
         top: 0;
         font-size: 13px
       }

       .ab-why-other li::before {
         content: "\2715";
         color: #c2c8d0
       }

       .ab-why-us li::before {
         content: "\2713";
         color: var(--teal)
       }

       /* FAQ */
       .ab-faq {
         display: grid;
         grid-template-columns: 0.85fr 1.15fr;
         gap: 50px;
         background: #F5F6F8;
         border-radius: 0;
         padding: 50px;
         margin: 40px 0
       }

       .ab-faq-soft {
         color: #9aa3ad
       }

       .ab-faq-note {
         font-size: 14px;
         font-weight: 300;
         color: var(--muted);
         margin: 16px 0 26px;
         line-height: 1.6
       }

       .ab-faq-help {
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 20px
       }

       .ab-faq-help-h {
         font-weight: 700;
         font-size: 14px;
         color: var(--navy)
       }

       .ab-faq-help-p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         margin: 6px 0 14px
       }

       .ab-faq-help-btn {
         display: inline-block;
         background: var(--navy);
         color: #fff;
         font-size: 13px;
         font-weight: 600;
         padding: 10px 18px;
         border-radius: 0;
         text-decoration: none;
         transition: background .3s
       }

       .ab-faq-help-btn:hover {
         background: var(--teal)
       }

       .ab-faq-item {
         border-bottom: 1px solid var(--line)
       }

       .ab-faq-q {
         width: 100%;
         background: none;
         border: none;
         cursor: pointer;
         text-align: left;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 16px;
         padding: 20px 0;
         font-family: 'Inter', sans-serif;
         font-size: 14.5px;
         font-weight: 500;
         color: var(--navy)
       }

       .ab-faq-x {
         flex: 0 0 auto;
         font-size: 20px;
         color: var(--muted);
         line-height: 1
       }

       .ab-faq-a {
         max-height: 0;
         overflow: hidden;
         transition: max-height .4s cubic-bezier(.22, 1, .36, 1)
       }

       .ab-faq-a p {
         font-size: 13.5px;
         font-weight: 300;
         line-height: 1.6;
         color: var(--muted);
         margin: 0 0 20px;
         max-width: 90%
       }

       .ab-faq-item.open .ab-faq-a {
         max-height: 220px
       }

       /* CTA */
       .ab-cta {
         text-align: center;
         padding: 70px 0 100px
       }

       .ab-cta-sub {
         font-size: 14.5px;
         font-weight: 300;
         color: var(--muted);
         margin: 16px auto 30px;
         max-width: 420px
       }

       .ab-cta-btn {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: var(--navy);
         color: #fff;
         font-weight: 600;
         font-size: 15px;
         padding: 15px 26px;
         border-radius: 0;
         text-decoration: none;
         margin-top: 26px;
         transition: transform .3s, background .3s
       }

       .ab-cta-btn:hover {
         transform: translateY(-3px);
         background: var(--teal)
       }

       .ab-cta-slots {
         font-size: 12.5px;
         color: var(--teal-dark);
         margin-top: 16px
       }

       @media(max-width:900px) {
         .ab-hero-grid {
           grid-template-columns: 1fr
         }

         .ab-hg-tall {
           grid-row: auto;
           height: 300px
         }

         .ab-team-head {
           grid-template-columns: 1fr;
           gap: 14px
         }

         .ab-team-intro {
           justify-self: start
         }

         .ab-team-grid {
           grid-template-columns: repeat(2, 1fr)
         }

         .ab-test {
           grid-template-columns: 1fr
         }

         .ab-faq {
           grid-template-columns: 1fr;
           gap: 30px;
           padding: 34px
         }

         .ab-aw-thead,
         .ab-aw-row {
           grid-template-columns: 1fr;
           gap: 6px
         }

         .ab-aw-yr {
           text-align: left
         }
       }

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

         .ab-why-cols {
           grid-template-columns: 1fr
         }

         .ab-why-other {
           border-right: none;
           border-bottom: 1px solid var(--line);
           padding-bottom: 24px;
           margin-bottom: 8px
         }
       }

       /* ===== NEW SECTIONS SHARED ===== */
       .ab-section {
         padding: 80px 0;
         border-top: 1px solid var(--line)
       }

       .ab-sec-label {
         margin-bottom: 46px
       }

       /* BUSINESS OVERVIEW */
       .ab-ov-stats {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 16px;
         margin-bottom: 40px
       }

       .ab-ov-stat {
         background: #F5F6F8;
         border-radius: 0;
         padding: 28px 20px;
         text-align: center
       }

       .ab-ov-ic {
         font-size: 26px;
         margin-bottom: 10px
       }

       .ab-ov-num {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 32px;
         color: var(--navy);
         line-height: 1
       }

       .ab-ov-num span {
         font-size: 22px
       }

       .ab-ov-lbl {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         margin-top: 6px
       }

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

       .ab-ov-card {
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 26px
       }

       .ab-ov-card-ic {
         font-size: 28px;
         margin-bottom: 14px
       }

       .ab-ov-card-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 16px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .ab-ov-card p {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6
       }

       /* JOURNEY / TIMELINE */
       .ab-timeline {
         position: relative;
         max-width: 860px;
         margin: 0 auto
       }

       .ab-tl-line {
         position: absolute;
         left: 50%;
         top: 0;
         bottom: 0;
         width: 2px;
         background: var(--line);
         transform: translateX(-50%)
       }

       .ab-tl-item {
         display: grid;
         grid-template-columns: 1fr 24px 1fr;
         align-items: start;
         gap: 24px;
         margin-bottom: 40px
       }

       .ab-tl-left .ab-tl-card {
         grid-column: 1;
         text-align: right
       }

       .ab-tl-left .ab-tl-dot {
         grid-column: 2
       }

       .ab-tl-left .ab-tl-card:last-child {
         grid-column: 3;
         visibility: hidden
       }

       .ab-tl-right .ab-tl-card:first-child {
         grid-column: 1;
         visibility: hidden
       }

       .ab-tl-right .ab-tl-dot {
         grid-column: 2
       }

       .ab-tl-right .ab-tl-card {
         grid-column: 3
       }

       .ab-tl-dot {
         width: 24px;
         height: 24px;
         border-radius: 0;
         background: var(--teal);
         border: 3px solid #fff;
         box-shadow: 0 0 0 2px var(--teal);
         flex-shrink: 0;
         margin-top: 6px;
         justify-self: center
       }

       .ab-tl-card {
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 22px
       }

       .ab-tl-yr {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13px;
         color: var(--teal);
         margin-bottom: 6px;
         letter-spacing: .04em
       }

       .ab-tl-title {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         margin-bottom: 8px
       }

       .ab-tl-card p {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6;
         margin: 0
       }

       /* LEADERSHIP */
       .ab-lead-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 24px;
         align-items: start
       }

       .ab-lead-card.ab-lead-featured {
         background: #F5F6F8;
         border-radius: 0;
         padding: 30px;
         display: grid;
         grid-template-columns: 160px 1fr;
         gap: 24px;
         align-items: start;
         grid-row: span 2
       }

       .ab-lead-ph {
         border-radius: 0;
         overflow: hidden;
         aspect-ratio: 1/1
       }

       .ab-lead-ph img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         filter: grayscale(0)
       }

       .ab-lead-badge {
         display: inline-block;
         background: var(--teal);
         color: #fff;
         font-size: 11px;
         font-weight: 700;
         padding: 3px 10px;
         border-radius: 0;
         letter-spacing: .05em;
         margin-bottom: 8px;
         text-transform: uppercase
       }

       .ab-lead-name {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 20px;
         color: var(--navy)
       }

       .ab-lead-role {
         font-size: 13px;
         font-weight: 400;
         color: var(--muted);
         margin: 4px 0 14px
       }

       .ab-lead-bio {
         font-size: 13.5px;
         font-weight: 300;
         color: #4a545f;
         line-height: 1.65
       }

       .ab-lead-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 16px
       }

       .ab-lead-tags span {
         font-size: 12px;
         font-weight: 500;
         background: #fff;
         border: 1px solid var(--line);
         color: var(--navy);
         padding: 4px 12px;
         border-radius: 20px
       }

       .ab-lead-mini-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px
       }

       .ab-lead-mini {
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 20px
       }

       .ab-lead-mini-ph {
         border-radius: 0;
         overflow: hidden;
         aspect-ratio: 1/1;
         margin-bottom: 14px
       }

       .ab-lead-mini-ph img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         filter: grayscale(0);
         transition: filter .4s
       }

       .ab-lead-mini:hover .ab-lead-mini-ph img {
         filter: grayscale(1)
       }

       .ab-lead-mini-name {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy)
       }

       .ab-lead-mini-role {
         font-size: 12px;
         color: var(--muted);
         margin: 3px 0 10px
       }

       .ab-lead-mini-bio {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55
       }

       /* WHY SAVEER (new) */
       .ab-ws-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px
       }

       .ab-ws-card {
         background: #F5F6F8;
         border-radius: 0;
         padding: 26px;
         transition: box-shadow .2s, transform .2s
       }

       .ab-ws-card:hover {
         box-shadow: 0 12px 36px -16px rgba(0, 24, 70, .18);
         transform: translateY(-3px)
       }

       .ab-ws-ic {
         font-size: 28px;
         margin-bottom: 14px
       }

       .ab-ws-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .ab-ws-card p {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6
       }

       /* CAPABILITIES */
       .ab-cap-list {
         display: flex;
         flex-direction: column;
         gap: 0
       }

       .ab-cap-item {
         display: grid;
         grid-template-columns: 80px 1fr;
         gap: 28px;
         padding: 32px 0;
         border-bottom: 1px solid var(--line);
         align-items: start
       }

       .ab-cap-item:first-child {
         border-top: 1px solid var(--line)
       }

       .ab-cap-num {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 32px;
         color: var(--line);
         padding-top: 4px
       }

       .ab-cap-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 17px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .ab-cap-body p {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.65;
         margin-bottom: 14px
       }

       .ab-cap-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 8px
       }

       .ab-cap-tags span {
         font-size: 11.5px;
         font-weight: 500;
         background: #F5F6F8;
         border: 1px solid var(--line);
         color: var(--navy);
         padding: 4px 12px;
         border-radius: 20px
       }

       /* SOLUTIONS */
       .ab-sol-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 16px
       }

       .ab-sol-card {
         background: #F5F6F8;
         border-radius: 0;
         padding: 22px;
         transition: background .2s, box-shadow .2s
       }

       .ab-sol-card:hover {
         background: #fff;
         box-shadow: 0 8px 28px -12px rgba(0, 24, 70, .15)
       }

       .ab-sol-ic {
         font-size: 24px;
         margin-bottom: 12px
       }

       .ab-sol-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14px;
         color: var(--navy);
         margin-bottom: 8px
       }

       .ab-sol-card p {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55
       }

       /* PROCESS */
       .ab-proc-steps {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px
       }

       .ab-proc-step {
         background: #F5F6F8;
         border-radius: 0;
         padding: 28px;
         position: relative
       }

       .ab-proc-num {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 11px;
         color: var(--teal);
         letter-spacing: .08em;
         margin-bottom: 14px
       }

       .ab-proc-line {
         display: none
       }

       .ab-proc-ic {
         font-size: 26px;
         margin-bottom: 14px
       }

       .ab-proc-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .ab-proc-step p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6
       }

       /* VISION & MISSION */
       .ab-vm-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 24px;
         margin-bottom: 32px
       }

       .ab-vm-card {
         border-radius: 0;
         padding: 38px
       }

       .ab-vm-vision {
         background: var(--navy);
         color: #fff
       }

       .ab-vm-mission {
         background: #F5F6F8;
         color: var(--navy)
       }

       .ab-vm-ic {
         font-size: 30px;
         margin-bottom: 12px
       }

       .ab-vm-label {
         font-size: 11px;
         font-weight: 700;
         letter-spacing: .12em;
         text-transform: uppercase;
         color: var(--teal);
         margin-bottom: 10px
       }

       .ab-vm-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 18px;
         line-height: 1.3;
         margin-bottom: 16px
       }

       .ab-vm-vision .ab-vm-h {
         color: #fff
       }

       .ab-vm-mission .ab-vm-h {
         color: var(--navy)
       }

       .ab-vm-card p {
         font-size: 13.5px;
         font-weight: 300;
         line-height: 1.65
       }

       .ab-vm-vision p {
         color: rgba(255, 255, 255, .72)
       }

       .ab-vm-mission p {
         color: var(--muted)
       }

       .ab-vm-values {
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
         justify-content: center;
         padding: 24px;
         background: #F5F6F8;
         border-radius: 18px
       }

       .ab-vm-val {
         display: flex;
         align-items: center;
         gap: 8px;
         font-size: 13.5px;
         font-weight: 500;
         color: var(--navy);
         background: #fff;
         border: 1px solid var(--line);
         padding: 8px 16px;
         border-radius: 30px
       }

       /* ACHIEVEMENTS */
       .ab-ach-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px
       }

       .ab-ach-card {
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 26px;
         transition: border-color .2s, box-shadow .2s
       }

       .ab-ach-card:hover {
         border-color: var(--teal);
         box-shadow: 0 8px 28px -12px rgba(15, 181, 174, .18)
       }

       .ab-ach-card.ab-ach-big {
         grid-column: span 1;
         background: var(--navy);
         border-color: transparent
       }

       .ab-ach-card.ab-ach-big .ab-ach-ic,
       .ab-ach-card.ab-ach-big .ab-ach-yr,
       .ab-ach-card.ab-ach-big .ab-ach-h,
       .ab-ach-card.ab-ach-big p {
         color: #fff
       }

       .ab-ach-card.ab-ach-big .ab-ach-yr {
         color: var(--teal)
       }

       .ab-ach-card.ab-ach-big p {
         color: rgba(255, 255, 255, .72)
       }

       .ab-ach-ic {
         font-size: 24px;
         margin-bottom: 12px
       }

       .ab-ach-yr {
         font-size: 12px;
         font-weight: 700;
         color: var(--teal);
         letter-spacing: .06em;
         margin-bottom: 6px;
         text-transform: uppercase
       }

       .ab-ach-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .ab-ach-card p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55
       }

       /* COMMITMENTS */
       .ab-commit-inner {
         display: grid;
         grid-template-columns: .85fr 1.15fr;
         gap: 60px;
         background: #F5F6F8;
         border-radius: 0;
         padding: 50px;
         align-items: start
       }

       .ab-commit-item {
         display: flex;
         gap: 18px;
         align-items: start;
         padding: 22px 0;
         border-bottom: 1px solid var(--line)
       }

       .ab-commit-item:last-child {
         border-bottom: none
       }

       .ab-commit-ic {
         font-size: 22px;
         flex-shrink: 0;
         margin-top: 2px
       }

       .ab-commit-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         margin-bottom: 6px
       }

       .ab-commit-item p {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6;
         margin: 0
       }

       /* VALUE PROPOSITION */
       .ab-vp-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0;
         border-radius: 0;
         overflow: hidden;
         border: 1px solid var(--line)
       }

       .ab-vp-card {
         padding: 36px;
         border-right: 1px solid var(--line)
       }

       .ab-vp-card:last-child {
         border-right: none
       }

       .ab-vp-card.ab-vp-center {
         background: var(--navy)
       }

       .ab-vp-top {
         display: flex;
         align-items: center;
         gap: 12px;
         margin-bottom: 18px
       }

       .ab-vp-ic {
         font-size: 28px
       }

       .ab-vp-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 20px;
         color: var(--navy)
       }

       .ab-vp-center .ab-vp-h {
         color: #fff
       }

       .ab-vp-card p {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.65;
         margin-bottom: 18px
       }

       .ab-vp-center p {
         color: rgba(255, 255, 255, .72)
       }

       .ab-vp-card ul {
         list-style: none;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
         gap: 10px
       }

       .ab-vp-card ul li {
         font-size: 13px;
         font-weight: 400;
         color: #4a545f;
         padding-left: 20px;
         position: relative
       }

       .ab-vp-card ul li::before {
         content: "→";
         position: absolute;
         left: 0;
         color: var(--teal);
         font-size: 12px
       }

       .ab-vp-center ul li {
         color: rgba(255, 255, 255, .8)
       }

       .ab-vp-center ul li::before {
         color: var(--teal)
       }

       /* PARTNER CTA (detailed) */
       .ab-pcta-inner {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 50px;
         background: var(--navy);
         border-radius: 0;
         padding: 50px;
         align-items: start
       }

       .ab-pcta-l .ab-tag {
         color: var(--teal)
       }

       .ab-pcta-l .ab-tag::before {
         border-color: var(--teal)
       }

       .ab-pcta-l .ab-h2 {
         color: #fff
       }

       .ab-pcta-l p {
         color: rgba(255, 255, 255, .65)
       }

       .ab-pcta-steps {
         margin-top: 26px;
         display: flex;
         flex-direction: column;
         gap: 12px
       }

       .ab-pcta-step {
         display: flex;
         align-items: center;
         gap: 14px;
         font-size: 14px;
         font-weight: 400;
         color: rgba(255, 255, 255, .8)
       }

       .ab-pcta-step span {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 28px;
         height: 28px;
         border-radius: 0;
         background: var(--teal);
         color: #fff;
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 12px;
         flex-shrink: 0
       }

       .ab-pcta-r .ab-pcta-types {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 14px
       }

       .ab-ptype {
         background: rgba(255, 255, 255, .07);
         border: 1px solid rgba(255, 255, 255, .12);
         border-radius: 0;
         padding: 20px
       }

       .ab-ptype-ic {
         font-size: 22px;
         margin-bottom: 10px
       }

       .ab-ptype-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14px;
         color: #fff;
         margin-bottom: 6px
       }

       .ab-ptype p {
         font-size: 12.5px;
         font-weight: 300;
         color: rgba(255, 255, 255, .6);
         line-height: 1.55;
         margin: 0
       }

       /* INVESTOR RELATIONS */
       .ab-inv-inner {
         background: #F5F6F8;
         border-radius: 0;
         padding: 50px
       }

       .ab-inv-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 16px;
         margin-bottom: 36px
       }

       .ab-inv-card {
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 22px
       }

       .ab-inv-ic {
         font-size: 24px;
         margin-bottom: 12px
       }

       .ab-inv-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14px;
         color: var(--navy);
         margin-bottom: 8px
       }

       .ab-inv-card p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55
       }

       .ab-inv-cta {
         text-align: center;
         border-top: 1px solid var(--line);
         padding-top: 32px
       }

       .ab-inv-cta p {
         font-size: 14px;
         font-weight: 300;
         color: var(--muted);
         margin-bottom: 20px
       }

       /* GLOBAL PRESENCE */
       .ab-globe-stats {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0;
         background: #F5F6F8;
         border-radius: 0;
         padding: 36px;
         margin-bottom: 36px
       }

       .ab-globe-stat {
         flex: 1;
         text-align: center
       }

       .ab-globe-sep {
         width: 1px;
         height: 60px;
         background: var(--line)
       }

       .ab-globe-num {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 36px;
         color: var(--navy);
         line-height: 1
       }

       .ab-globe-num span {
         font-size: 24px
       }

       .ab-globe-lbl {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         margin-top: 6px
       }

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

       .ab-globe-reg {
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 22px
       }

       .ab-globe-reg-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14px;
         color: var(--navy);
         margin-bottom: 14px
       }

       .ab-globe-reg ul {
         list-style: none;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
         gap: 8px
       }

       .ab-globe-reg ul li {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         padding-left: 16px;
         position: relative
       }

       .ab-globe-reg ul li::before {
         content: "·";
         position: absolute;
         left: 4px;
         color: var(--teal);
         font-weight: 700
       }

       /* RESPONSIVE */
       @media(max-width:1000px) {
         .ab-ov-stats {
           grid-template-columns: repeat(2, 1fr)
         }

         .ab-ov-cards {
           grid-template-columns: 1fr 1fr
         }

         .ab-ws-grid {
           grid-template-columns: 1fr 1fr
         }

         .ab-sol-grid {
           grid-template-columns: repeat(3, 1fr)
         }

         .ab-proc-steps {
           grid-template-columns: repeat(2, 1fr)
         }

         .ab-lead-grid {
           grid-template-columns: 1fr
         }

         .ab-lead-card.ab-lead-featured {
           grid-row: auto
         }

         .ab-inv-grid {
           grid-template-columns: repeat(2, 1fr)
         }

         .ab-globe-regions {
           grid-template-columns: repeat(2, 1fr)
         }
       }

       @media(max-width:768px) {
         .ab-tl-line {
           left: 12px
         }

         .ab-tl-item {
           grid-template-columns: 24px 1fr;
           gap: 16px
         }

         .ab-tl-left .ab-tl-card,
         .ab-tl-right .ab-tl-card {
           grid-column: 2;
           text-align: left;
           visibility: visible
         }

         .ab-tl-left .ab-tl-dot,
         .ab-tl-right .ab-tl-dot {
           grid-column: 1
         }

         .ab-tl-left .ab-tl-card:last-child {
           display: none
         }

         .ab-tl-right .ab-tl-card:first-child {
           display: none
         }

         .ab-vm-grid {
           grid-template-columns: 1fr
         }

         .ab-ach-grid {
           grid-template-columns: 1fr 1fr
         }

         .ab-vp-grid {
           grid-template-columns: 1fr
         }

         .ab-vp-card {
           border-right: none;
           border-bottom: 1px solid var(--line)
         }

         .ab-pcta-inner {
           grid-template-columns: 1fr;
           padding: 34px
         }

         .ab-commit-inner {
           grid-template-columns: 1fr;
           padding: 34px
         }

         .ab-lead-card.ab-lead-featured {
           grid-template-columns: 1fr
         }

         .ab-cap-item {
           grid-template-columns: 50px 1fr;
           gap: 16px
         }

         .ab-cap-num {
           font-size: 22px
         }

         .ab-globe-stats {
           flex-wrap: wrap;
           gap: 20px
         }

         .ab-globe-sep {
           display: none
         }

         .ab-globe-regions {
           grid-template-columns: 1fr 1fr
         }
       }

       @media(max-width:560px) {
         .ab-sol-grid {
           grid-template-columns: repeat(2, 1fr)
         }

         .ab-ach-grid {
           grid-template-columns: 1fr
         }

         .ab-ws-grid {
           grid-template-columns: 1fr
         }

         .ab-ov-cards {
           grid-template-columns: 1fr
         }

         .ab-proc-steps {
           grid-template-columns: 1fr
         }

         .ab-lead-mini-grid {
           grid-template-columns: 1fr
         }

         .ab-inv-grid {
           grid-template-columns: 1fr
         }

         .ab-globe-regions {
           grid-template-columns: 1fr
         }

         .ab-pcta-r .ab-pcta-types {
           grid-template-columns: 1fr
         }
       }

       /* ========== TABBED EXPLORER ========== */
       .ab-tabs-section {
         padding: 60px 0;
         border-top: 1px solid var(--line)
       }

       .abt-shell {
         display: grid;
         grid-template-columns: 260px 1fr;
         gap: 0;
         border: 1px solid var(--line);
         border-radius: 0;
         overflow: hidden;
         min-height: 560px
       }

       /* LEFT NAV */
       .abt-nav {
         background: #F5F6F8;
         border-right: 1px solid var(--line);
         overflow-y: auto
       }

       .abt-nav-inner {
         padding: 20px 12px
       }

       .abt-nav-label {
         font-size: 10.5px;
         font-weight: 600;
         letter-spacing: .1em;
         text-transform: uppercase;
         color: #aab2bc;
         padding: 4px 10px 12px
       }

       .abt-tab {
         width: 100%;
         display: flex;
         align-items: center;
         gap: 10px;
         background: none;
         border: none;
         border-radius: 0;
         padding: 11px 12px;
         cursor: pointer;
         text-align: left;
         transition: .16s;
         margin-bottom: 2px
       }

       .abt-tab:hover {
         background: #ebebeb
       }

       .abt-tab.active {
         background: #fff;
         box-shadow: 0 2px 12px -6px rgba(0, 24, 70, .18)
       }

       .abt-tab-ic {
         font-size: 16px;
         flex-shrink: 0;
         width: 22px;
         text-align: center
       }

       .abt-tab-tx {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 1px
       }

       .abt-tab-tx b {
         font-size: 13px;
         font-weight: 600;
         color: var(--navy);
         line-height: 1.2
       }

       .abt-tab-tx i {
         font-size: 11px;
         font-style: normal;
         color: var(--muted);
         font-weight: 300
       }

       .abt-tab.active .abt-tab-tx b {
         color: var(--navy)
       }

       .abt-tab-arr {
         font-size: 14px;
         color: #ccc;
         flex-shrink: 0;
         transition: .16s
       }

       .abt-tab.active .abt-tab-arr {
         color: var(--teal)
       }

       /* RIGHT PANELS */
       .abt-panels {
         background: #fff;
         overflow: hidden;
         position: relative
       }

       .abt-panel {
         display: none;
         padding: 36px 38px;
         height: 100%;
         overflow-y: auto;
         animation: abtIn .22s ease
       }

       .abt-panel.active {
         display: block
       }

       @keyframes abtIn {
         from {
           opacity: 0;
           transform: translateY(8px)
         }

         to {
           opacity: 1;
           transform: none
         }
       }

       /* Panel header */
       .abt-panel-head {
         display: flex;
         align-items: flex-start;
         gap: 14px;
         margin-bottom: 22px;
         padding-bottom: 20px;
         border-bottom: 1px solid var(--line)
       }

       .abt-ph-ic {
         font-size: 28px;
         flex-shrink: 0;
         margin-top: 2px
       }

       .abt-ph-tag {
         font-size: 11px;
         font-weight: 600;
         letter-spacing: .08em;
         text-transform: uppercase;
         color: var(--teal);
         margin-bottom: 4px
       }

       .abt-ph-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: clamp(16px, 2vw, 22px);
         color: var(--navy);
         line-height: 1.2;
         margin: 0
       }

       .abt-panel-sub {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6;
         margin: -8px 0 22px
       }

       /* Tag pills (shared) */
       .abt-tl-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         margin-top: 12px
       }

       .abt-tl-tags span {
         font-size: 11.5px;
         font-weight: 500;
         background: #F5F6F8;
         border: 1px solid var(--line);
         color: var(--navy);
         padding: 3px 10px;
         border-radius: 20px
       }

       /* ---- JOURNEY horizontal timeline ---- */
       .abt-timeline-h {
         margin-top: 4px
       }

       .abt-tl-track {
         margin-bottom: 24px
       }

       .abt-tl-yr-row {
         display: flex;
         gap: 4px;
         margin-bottom: 10px
       }

       .abt-tly {
         flex: 1;
         text-align: center;
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         font-size: 12px;
         color: var(--muted);
         padding: 7px 4px;
         border-radius: 0;
         cursor: pointer;
         transition: .16s;
         border: 1px solid transparent
       }

       .abt-tly:hover {
         background: #F5F6F8;
         color: var(--navy)
       }

       .abt-tly.active {
         background: var(--navy);
         color: #fff;
         border-color: var(--navy)
       }

       .abt-tl-bar {
         height: 3px;
         background: var(--line);
         border-radius: 0;
         position: relative;
         overflow: hidden
       }

       .abt-tl-fill {
         position: absolute;
         left: 0;
         top: 0;
         height: 100%;
         background: var(--teal);
         border-radius: 0;
         transition: width .4s cubic-bezier(.4, 0, .2, 1)
       }

       .abt-tl-slides {
         position: relative
       }

       .abt-tl-slide {
         display: none;
         animation: abtIn .22s ease
       }

       .abt-tl-slide.active {
         display: block
       }

       .abt-tl-slide-yr {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 32px;
         color: var(--teal);
         line-height: 1;
         margin-bottom: 8px
       }

       .abt-tl-slide-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 18px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .abt-tl-slide p {
         font-size: 14px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.65;
         max-width: 500px
       }

       /* ---- LEADERSHIP ---- */
       .abt-lead-feat {
         display: grid;
         grid-template-columns: 110px 1fr;
         gap: 20px;
         background: #F5F6F8;
         border-radius: 0;
         padding: 22px;
         margin-bottom: 20px
       }

       .abt-lead-img {
         border-radius: 0;
         overflow: hidden;
         aspect-ratio: 1/1
       }

       .abt-lead-img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         filter: grayscale(0)
       }

       .abt-badge {
         display: inline-block;
         background: var(--teal);
         color: #fff;
         font-size: 10.5px;
         font-weight: 700;
         padding: 2px 9px;
         border-radius: 0;
         letter-spacing: .05em;
         text-transform: uppercase;
         margin-bottom: 6px
       }

       .abt-lead-name {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 17px;
         color: var(--navy)
       }

       .abt-lead-role {
         font-size: 12.5px;
         color: var(--muted);
         margin: 2px 0 10px
       }

       .abt-lead-feat p {
         font-size: 13px;
         font-weight: 300;
         color: #4a545f;
         line-height: 1.6;
         margin: 0
       }

       .abt-mini-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 12px
       }

       .abt-mini-card {
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 16px;
         text-align: center
       }

       .abt-mini-card img {
         width: 56px;
         height: 56px;
         border-radius: 0;
         object-fit: cover;
         filter: grayscale(0);
         margin: 0 auto 10px;
         display: block;
         transition: filter .3s
       }

       .abt-mini-card:hover img {
         filter: grayscale(1)
       }

       .abt-mini-name {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13px;
         color: var(--navy)
       }

       .abt-mini-role {
         font-size: 11.5px;
         color: var(--teal);
         margin: 2px 0 7px;
         font-weight: 500
       }

       .abt-mini-card p {
         font-size: 12px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.5
       }

       /* ---- WHY SAVEER ---- */
       .abt-why-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 12px
       }

       .abt-why-card {
         background: #F5F6F8;
         border-radius: 0;
         padding: 18px;
         transition: .18s
       }

       .abt-why-card:hover {
         background: #fff;
         box-shadow: 0 6px 22px -10px rgba(0, 24, 70, .16)
       }

       .abt-why-ic {
         font-size: 22px;
         margin-bottom: 10px
       }

       .abt-why-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13.5px;
         color: var(--navy);
         margin-bottom: 7px
       }

       .abt-why-card p {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55;
         margin: 0
       }

       /* ---- CAPABILITIES ---- */
       .abt-cap-rows {
         display: flex;
         flex-direction: column
       }

       .abt-cap-row {
         display: grid;
         grid-template-columns: 44px 1fr;
         gap: 16px;
         padding: 16px 0;
         border-bottom: 1px solid var(--line);
         align-items: start
       }

       .abt-cap-row:first-child {
         border-top: 1px solid var(--line)
       }

       .abt-cap-n {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 20px;
         color: #dde1e8;
         padding-top: 2px
       }

       .abt-cap-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14px;
         color: var(--navy);
         margin-bottom: 5px
       }

       .abt-cap-body p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55;
         margin-bottom: 8px
       }

       /* ---- SOLUTIONS ---- */
       .abt-sol-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 10px
       }

       .abt-sol-card {
         background: #F5F6F8;
         border-radius: 0;
         padding: 16px;
         transition: .16s
       }

       .abt-sol-card:hover {
         background: #fff;
         box-shadow: 0 4px 16px -8px rgba(0, 24, 70, .14)
       }

       .abt-sol-ic {
         font-size: 20px;
         margin-bottom: 8px
       }

       .abt-sol-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13px;
         color: var(--navy);
         margin-bottom: 5px
       }

       .abt-sol-card p {
         font-size: 12px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.5;
         margin: 0
       }

       /* ---- PROCESS ---- */
       .abt-proc-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 12px
       }

       .abt-proc-card {
         background: #F5F6F8;
         border-radius: 0;
         padding: 18px
       }

       .abt-proc-top {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 10px
       }

       .abt-proc-n {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 10.5px;
         color: var(--teal);
         letter-spacing: .08em
       }

       .abt-proc-ic {
         font-size: 20px
       }

       .abt-proc-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13.5px;
         color: var(--navy);
         margin-bottom: 7px
       }

       .abt-proc-card p {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55;
         margin: 0
       }

       /* ---- VISION & MISSION ---- */
       .abt-vm-pair {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 14px;
         margin-bottom: 18px
       }

       .abt-vm-dark,
       .abt-vm-light {
         border-radius: 0;
         padding: 24px
       }

       .abt-vm-dark {
         background: var(--navy)
       }

       .abt-vm-light {
         background: #F5F6F8
       }

       .abt-vm-lbl {
         font-size: 12px;
         font-weight: 700;
         letter-spacing: .06em;
         text-transform: uppercase;
         margin-bottom: 10px
       }

       .abt-vm-dark .abt-vm-lbl {
         color: var(--teal)
       }

       .abt-vm-light .abt-vm-lbl {
         color: var(--teal)
       }

       .abt-vm-dark h4 {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: #fff;
         line-height: 1.3;
         margin-bottom: 10px
       }

       .abt-vm-light h4 {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         color: var(--navy);
         line-height: 1.3;
         margin-bottom: 10px
       }

       .abt-vm-dark p {
         font-size: 13px;
         font-weight: 300;
         color: rgba(255, 255, 255, .65);
         line-height: 1.6;
         margin: 0
       }

       .abt-vm-light p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6;
         margin: 0
       }

       .abt-values-row {
         display: flex;
         flex-wrap: wrap;
         gap: 8px
       }

       .abt-val {
         display: flex;
         align-items: center;
         gap: 6px;
         font-size: 12.5px;
         font-weight: 500;
         color: var(--navy);
         background: #F5F6F8;
         border: 1px solid var(--line);
         padding: 6px 13px;
         border-radius: 30px
       }

       /* ---- ACHIEVEMENTS ---- */
       .abt-ach-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 12px
       }

       .abt-ach-card {
         border: 1px solid var(--line);
         border-radius: 0;
         padding: 18px;
         transition: .18s
       }

       .abt-ach-card:hover {
         border-color: var(--teal)
       }

       .abt-ach-card.abt-ach-dark {
         background: var(--navy);
         border-color: transparent
       }

       .abt-ach-ic {
         font-size: 20px;
         margin-bottom: 8px
       }

       .abt-ach-yr {
         font-size: 10.5px;
         font-weight: 700;
         color: var(--teal);
         letter-spacing: .06em;
         text-transform: uppercase;
         margin-bottom: 5px
       }

       .abt-ach-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13.5px;
         color: var(--navy);
         margin-bottom: 7px
       }

       .abt-ach-card.abt-ach-dark .abt-ach-h,
       .abt-ach-card.abt-ach-dark .abt-ach-ic {
         color: #fff
       }

       .abt-ach-card.abt-ach-dark .abt-ach-yr {
         color: var(--teal)
       }

       .abt-ach-card p {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.5;
         margin: 0
       }

       .abt-ach-card.abt-ach-dark p {
         color: rgba(255, 255, 255, .65)
       }

       /* ---- COMMITMENTS ---- */
       .abt-commit-list {
         display: flex;
         flex-direction: column
       }

       .abt-commit-item {
         display: flex;
         gap: 16px;
         align-items: flex-start;
         padding: 18px 0;
         border-bottom: 1px solid var(--line)
       }

       .abt-commit-item:last-child {
         border-bottom: none
       }

       .abt-commit-ic {
         font-size: 22px;
         flex-shrink: 0;
         margin-top: 2px
       }

       .abt-commit-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 14px;
         color: var(--navy);
         margin-bottom: 5px
       }

       .abt-commit-item p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6;
         margin: 0
       }

       /* ---- VALUE PROP ---- */
       .abt-vp-trio {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0;
         border: 1px solid var(--line);
         border-radius: 0;
         overflow: hidden
       }

       .abt-vp-card {
         padding: 26px;
         border-right: 1px solid var(--line)
       }

       .abt-vp-card:last-child {
         border-right: none
       }

       .abt-vp-card.abt-vp-mid {
         background: var(--navy)
       }

       .abt-vp-ic {
         font-size: 26px;
         margin-bottom: 10px
       }

       .abt-vp-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 17px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .abt-vp-mid .abt-vp-h {
         color: #fff
       }

       .abt-vp-card p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.6;
         margin-bottom: 14px
       }

       .abt-vp-mid p {
         color: rgba(255, 255, 255, .65)
       }

       .abt-vp-card ul {
         list-style: none;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
         gap: 8px
       }

       .abt-vp-card ul li {
         font-size: 12.5px;
         color: #4a545f;
         padding-left: 16px;
         position: relative
       }

       .abt-vp-card ul li::before {
         content: "→";
         position: absolute;
         left: 0;
         color: var(--teal);
         font-size: 11px
       }

       .abt-vp-mid ul li {
         color: rgba(255, 255, 255, .75)
       }

       /* ---- PARTNER ---- */
       .abt-partner-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 24px;
         align-items: start
       }

       .abt-ps-item {
         display: flex;
         gap: 14px;
         align-items: flex-start;
         padding: 14px 0;
         border-bottom: 1px solid var(--line)
       }

       .abt-ps-item:last-of-type {
         border-bottom: none;
         margin-bottom: 16px
       }

       .abt-ps-n {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 26px;
         height: 26px;
         border-radius: 0;
         background: var(--teal);
         color: #fff;
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 11px;
         flex-shrink: 0;
         margin-top: 2px
       }

       .abt-ps-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13.5px;
         color: var(--navy);
         margin-bottom: 3px
       }

       .abt-ps-item p {
         font-size: 12.5px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.5;
         margin: 0
       }

       .abt-partner-types {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px
       }

       .abt-ptype-card {
         background: #F5F6F8;
         border-radius: 0;
         padding: 16px
       }

       .abt-ptype-ic {
         font-size: 20px;
         margin-bottom: 8px
       }

       .abt-ptype-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13px;
         color: var(--navy);
         margin-bottom: 5px
       }

       .abt-ptype-card p {
         font-size: 12px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.5;
         margin: 0
       }

       /* ---- INVESTOR ---- */
       .abt-inv-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 12px;
         margin-bottom: 24px
       }

       .abt-inv-card {
         background: #F5F6F8;
         border-radius: 0;
         padding: 18px
       }

       .abt-inv-ic {
         font-size: 20px;
         margin-bottom: 8px
       }

       .abt-inv-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 13.5px;
         color: var(--navy);
         margin-bottom: 6px
       }

       .abt-inv-card p {
         font-size: 13px;
         font-weight: 300;
         color: var(--muted);
         line-height: 1.55;
         margin: 0
       }

       .abt-inv-cta {
         border-top: 1px solid var(--line);
         padding-top: 20px;
         text-align: center
       }

       .abt-inv-cta p {
         font-size: 13.5px;
         font-weight: 300;
         color: var(--muted);
         margin-bottom: 14px
       }

       /* ---- GLOBAL ---- */
       .abt-globe-stats-row {
         display: flex;
         background: #F5F6F8;
         border-radius: 0;
         padding: 22px;
         margin-bottom: 22px
       }

       .abt-gs {
         flex: 1;
         text-align: center
       }

       .abt-gs-sep {
         width: 1px;
         background: var(--line)
       }

       .abt-gs-n {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 28px;
         color: var(--navy);
         line-height: 1
       }

       .abt-gs-n span {
         font-size: 18px
       }

       .abt-gs-l {
         font-size: 12px;
         font-weight: 300;
         color: var(--muted);
         margin-top: 4px
       }

       .abt-regions {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px
       }

       .abt-reg {
         background: #F5F6F8;
         border-radius: 0;
         padding: 16px
       }

       .abt-reg-h {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 12.5px;
         color: var(--navy);
         margin-bottom: 10px
       }

       .abt-reg ul {
         list-style: none;
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: column;
         gap: 6px
       }

       .abt-reg ul li {
         font-size: 12px;
         font-weight: 300;
         color: var(--muted);
         padding-left: 12px;
         position: relative
       }

       .abt-reg ul li::before {
         content: "·";
         position: absolute;
         left: 3px;
         color: var(--teal);
         font-weight: 700
       }

       /* ---- RESPONSIVE TABS ---- */
       @media(max-width:900px) {
         .abt-shell {
           grid-template-columns: 1fr;
           min-height: auto
         }

         .abt-nav {
           border-right: none;
           border-bottom: 1px solid var(--line)
         }

         .abt-nav-inner {
           display: flex;
           flex-wrap: wrap;
           gap: 6px;
           padding: 14px
         }

         .abt-nav-label {
           width: 100%;
           padding: 0 4px 6px
         }

         .abt-tab {
           width: auto;
           flex: 0 0 auto;
           padding: 8px 12px
         }

         .abt-tab-tx i,
         .abt-tab-arr {
           display: none
         }

         .abt-tab-tx b {
           font-size: 12px
         }

         .abt-mini-grid {
           grid-template-columns: repeat(2, 1fr)
         }

         .abt-why-grid,
         .abt-sol-grid,
         .abt-proc-grid,
         .abt-ach-grid {
           grid-template-columns: repeat(2, 1fr)
         }

         .abt-regions,
         .abt-globe-stats-row {
           flex-wrap: wrap
         }

         .abt-gs-sep {
           display: none
         }

         .abt-regions {
           grid-template-columns: 1fr 1fr
         }

         .abt-vm-pair,
         .abt-vp-trio {
           grid-template-columns: 1fr
         }

         .abt-vp-card {
           border-right: none;
           border-bottom: 1px solid var(--line)
         }

         .abt-partner-layout {
           grid-template-columns: 1fr
         }

         .abt-panel {
           padding: 24px
         }
       }

       @media(max-width:560px) {

         .abt-why-grid,
         .abt-sol-grid,
         .abt-ach-grid,
         .abt-proc-grid {
           grid-template-columns: 1fr
         }

         .abt-lead-feat {
           grid-template-columns: 80px 1fr
         }

         .abt-mini-grid {
           grid-template-columns: 1fr 1fr
         }

         .abt-inv-grid,
         .abt-regions,
         .abt-partner-types {
           grid-template-columns: 1fr
         }

         .abt-tl-yr-row {
           gap: 2px
         }

         .abt-tly {
           font-size: 10px;
           padding: 5px 2px
         }
       }



       /* ============ DIRECTOR'S MESSAGE PAGE ============ */


       .dm2 {
         background: #fff;
         font-family: 'Inter', sans-serif;
         padding: 60px 0 100px;
         min-height: auto;
         width: 100vw;
         position: relative;
         left: 50%;
         right: 50%;
         margin-left: -50vw;
         margin-right: -50vw
       }

       .dm2-wrap {
         max-width: 1400px;
         margin: 0 auto;
         padding: 0 40px
       }

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

       .dm2-eyebrow {
         font-family: 'Inter', sans-serif;
         font-weight: 500;
         font-size: 13px;
         letter-spacing: .16em;
         text-transform: uppercase;
         color: var(--teal)
       }

       .dm2-h1 {
         font-family: 'Inter', sans-serif;
         font-weight: 300;
         font-size: clamp(32px, 5vw, 56px);
         line-height: 1.04;
         color: #1a2433;
         margin: 14px 0 0;
         letter-spacing: -.01em
       }

       .dm2-h1 em {
         font-style: italic;
         color: #1B1464
       }

       .dm2-stage {
         display: flex;
         flex-direction: column;
         gap: 32px;
         align-items: center
       }

       /* left rail */
       .dm2-rail {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         gap: 16px;
         justify-content: center
       }

       .dm2-thumb {
         position: relative;
         border: none;
         background: none;
         padding: 0;
         cursor: pointer;
         border-radius: 0;
         overflow: hidden;
         aspect-ratio: 3/4;
         width: clamp(140px, 16vw, 180px);
         flex: 0 0 auto;
         filter: grayscale(0) brightness(.92);
         opacity: .6;
         transition: filter .5s, opacity .5s, transform .5s cubic-bezier(.22, 1, .36, 1);
         box-shadow: 0 12px 30px -22px rgba(0, 24, 70, .5)
       }

       .dm2-thumb img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform .6s cubic-bezier(.22, 1, .36, 1)
       }

       .dm2-thumb:hover {
         opacity: .9;
         filter: grayscale(0) brightness(1)
       }

       .dm2-thumb:hover img {
         transform: scale(1.05)
       }

       .dm2-thumb.is-active {
         opacity: 1;
         filter: none;
         transform: scale(1.03);
         box-shadow: 0 22px 44px -22px rgba(0, 24, 70, .6);
         outline: 2px solid var(--teal);
         outline-offset: 2px
       }

       .dm2-thumb-name {
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
         padding: 20px 10px 9px;
         text-align: left;
         background: linear-gradient(to top, rgba(8, 20, 48, .9), transparent);
         opacity: 0;
         transform: translateY(6px);
         transition: .4s
       }

       .dm2-thumb.is-active .dm2-thumb-name,
       .dm2-thumb:hover .dm2-thumb-name {
         opacity: 1;
         transform: none
       }

       .dm2-thumb-name b {
         display: block;
         font-family: 'Inter', sans-serif;
         font-size: 11px;
         font-weight: 600;
         color: #fff;
         line-height: 1.2
       }

       .dm2-thumb-name i {
         display: block;
         font-style: normal;
         font-size: 9.5px;
         color: #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: 0
       }

       .tv-card {
         position: relative;
         border-radius: 0;
         overflow: hidden;
         height: 100vh;
         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: 100px;
         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 #5dbb64;
         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: 0
         }

         .tv-card {
           border-radius: 0;
           height: 100vh
         }

         .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%, #5DBB64 55%, #66d6f0 100%);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         font-weight: 800
       }

       .cl-hero .lead {
         max-width: 600px;
         margin: 24px auto 0;
         font-size: 17px;
         font-weight: 300;
         line-height: 1.65;
         color: rgba(255, 255, 255, .78)
       }

       /* Stats row - premium, with dividers */
       .cl-stats {
         display: flex;
         justify-content: center;
         align-items: stretch;
         gap: 0;
         margin-top: 54px;
         flex-wrap: nowrap
       }

       .cl-stat {
         text-align: center;
         padding: 0 clamp(16px, 3vw, 44px);
         position: relative
       }

       .cl-stat+.cl-stat::before {
         content: "";
         position: absolute;
         left: 0;
         top: 14%;
         height: 72%;
         width: 1px;
         background: linear-gradient(180deg, transparent, rgba(143, 233, 227, .4), transparent)
       }

       .cl-stat .num {
         font-family: 'Sora', 'Inter', sans-serif;
         font-weight: 800;
         font-size: clamp(34px, 4.8vw, 56px);
         color: #fff;
         line-height: 1;
         letter-spacing: -.03em
       }

       .cl-stat .num .plus {
         color: var(--teal)
       }

       .cl-stat .lbl {
         font-size: 12px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: .08em;
         color: rgba(255, 255, 255, .62);
         margin-top: 12px
       }

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

         .cl-hero-glow::before,
         .cl-node.float {
           animation: none
         }

         .cl-node.in {
           opacity: var(--o, .1)
         }
       }

       @media(max-width:640px) {
         .cl-hero {
           padding: 66px 22px 52px
         }

         .cl-stat+.cl-stat::before {
           display: none
         }

         .cl-stats {
           gap: 28px 0;
           margin-top: 40px;
           flex-wrap: wrap
         }

         .cl-stat {
           flex: 0 0 50%;
           padding: 0 10px
         }
       }

       /* Marquee strip */
       .cl-marquee-section {
         padding: 48px 0;
         background: var(--navy);
         overflow: hidden;
         position: relative
       }

       .cl-marquee-label {
         text-align: center;
         font-size: 11px;
         letter-spacing: .2em;
         text-transform: uppercase;
         color: rgba(255, 255, 255, .55);
         margin-bottom: 30px;
         font-weight: 600
       }

       .cl-marquee {
         display: flex;
         width: max-content;
         animation: clScroll 40s linear infinite
       }

       .cl-marquee:hover {
         animation-play-state: paused
       }

       .cl-marquee img {
         height: 72px;
         width: auto;
         margin: 0 38px;
         object-fit: contain;
         filter: grayscale(1) brightness(0) invert(1);
         opacity: .6;
         transition: .3s
       }

       .cl-marquee img:hover {
         opacity: 1;
         filter: none
       }

       @keyframes clScroll {
         from {
           transform: translateX(0)
         }

         to {
           transform: translateX(-50%)
         }
       }

       .cl-marquee-fade {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 120px;
         z-index: 3;
         pointer-events: none
       }

       .cl-marquee-fade.l {
         left: 0;
         background: linear-gradient(90deg, var(--navy), transparent)
       }

       .cl-marquee-fade.r {
         right: 0;
         background: linear-gradient(270deg, var(--navy), transparent)
       }

       /* Filter + grid section */
       .cl-grid-section {
         max-width: 1200px;
         margin: 0 auto;
         padding: 72px 28px 90px
       }

       .cl-controls {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 40px;
         flex-wrap: wrap
       }

       .cl-filters {
         display: flex;
         gap: 10px;
         flex-wrap: wrap
       }

       .cl-filter {
         font-size: 13px;
         font-weight: 600;
         color: var(--muted);
         background: #fff;
         border: 1.5px solid var(--line);
         padding: 9px 20px;
         cursor: pointer;
         transition: .18s;
         font-family: inherit
       }

       .cl-filter:hover {
         border-color: var(--teal);
         color: var(--navy)
       }

       .cl-filter.active {
         background: var(--navy);
         color: #fff;
         border-color: var(--navy)
       }

       .cl-search {
         position: relative;
         flex-shrink: 0
       }

       .cl-search input {
         border: 1.5px solid var(--line);
         padding: 10px 16px 10px 40px;
         font-size: 14px;
         font-family: inherit;
         color: var(--navy);
         outline: none;
         width: 240px;
         transition: .18s;
         background: #fff
       }

       .cl-search input:focus {
         border-color: var(--teal)
       }

       .cl-search svg {
         position: absolute;
         left: 14px;
         top: 50%;
         transform: translateY(-50%);
         width: 16px;
         height: 16px;
         stroke: var(--muted);
         fill: none;
         stroke-width: 2
       }

       .cl-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
         gap: 20px
       }

       .cl-loader {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 12px;
         padding: 40px 0 6px;
         font-family: 'Inter', sans-serif;
         font-size: 14px;
         font-weight: 500;
         color: var(--muted)
       }

       .cl-spinner {
         width: 22px;
         height: 22px;
         border: 2.5px solid var(--line);
         border-top-color: #1B1464;
         border-radius: 50%;
         animation: clSpin .7s linear infinite
       }

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

       .cl-card {
         position: relative;
         height: 220px
       }

       /* hover fade: back panel fades in sliding down from the top - no flip */
       .cl-flip {
         position: relative;
         width: 100%;
         height: 100%
       }

       .cl-face {
         position: absolute;
         inset: 0;
         border: 1.5px solid var(--line);
         background: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 24px 20px;
         overflow: hidden
       }

       /* FRONT: colored logo with a diagonal dog-ear hint at the top-right corner */
       .cl-front {
         z-index: 2;
         background: #fff;
         transition: opacity .5s ease, box-shadow .3s ease
       }

       .cl-front::after {
         content: "";
         position: absolute;
         top: 0;
         right: 0;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 22px 22px 0;
         border-color: transparent var(--line) transparent transparent;
         opacity: .6;
         transition: .3s
       }

       .cl-card:hover .cl-front::after {
         border-width: 0 30px 30px 0;
         border-color: transparent var(--teal) transparent transparent;
         opacity: .9
       }

       .cl-card:hover .cl-front {
         box-shadow: -8px 8px 26px -14px rgba(0, 24, 70, .4)
       }

       /* BACK: navy panel, hidden above; fades+slides in from the top on hover */
       .cl-back {
         z-index: 3;
         background: #1B1464;
         border-color: #1B1464;
         color: #fff;
         opacity: 0;
         transform: translateY(-14px);
         transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
         pointer-events: none
       }

       .cl-card:hover .cl-back {
         opacity: 1;
         transform: translateY(0);
         pointer-events: auto
       }

       .cl-back::after {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 0 28px 28px;
         border-color: transparent transparent rgba(0, 0, 0, .18) transparent
       }

       .cl-back-inner {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 14px;
         position: relative;
         z-index: 1
       }

       .cl-back-name {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 15px;
         line-height: 1.3;
         color: #fff;
         letter-spacing: -.01em
       }

       .cl-back-loc {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         font-size: 12.5px;
         color: var(--teal);
         font-weight: 500
       }

       .cl-back-loc svg {
         stroke: var(--teal);
         flex-shrink: 0
       }

       .cl-logo-wrap {
         height: 120px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 14px;
         width: 100%
       }

       .cl-logo-wrap img {
         max-height: 110px;
         max-width: 150px;
         width: auto;
         object-fit: contain
       }

       .cl-cat-pill {
         font-size: 10.5px;
         font-weight: 700;
         letter-spacing: .04em;
         text-transform: uppercase;
         color: #030F4D;
         background: #E6E8EC;
         padding: 4px 12px
       }

       .cl-empty {
         grid-column: 1/-1;
         text-align: center;
         padding: 60px 20px;
         color: var(--muted);
         font-size: 15px
       }

       /* CTA band */
       .cl-cta {
         max-width: 1200px;
         margin: 0 auto 90px;
         padding: 0 28px
       }

       .cl-cta-inner {
         background: var(--navy);
         padding: clamp(40px, 6vw, 64px);
         text-align: center;
         position: relative;
         overflow: hidden
       }

       .cl-cta-inner h2 {
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: clamp(26px, 3.6vw, 40px);
         color: #fff;
         letter-spacing: -.02em;
         line-height: 1.12;
         margin: 0 0 14px
       }

       .cl-cta-inner p {
         color: rgba(255, 255, 255, .7);
         font-size: 15.5px;
         font-weight: 300;
         max-width: 520px;
         margin: 0 auto 28px
       }

       .cl-cta-btn {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: var(--teal);
         color: #fff;
         border: none;
         padding: 14px 32px;
         font-family: 'Inter';
         font-weight: 700;
         font-size: 14px;
         cursor: pointer;
         transition: .2s
       }

       .cl-cta-btn:hover {
         background: var(--teal-dark)
       }

       @media(max-width:680px) {
         .cl-controls {
           flex-direction: column;
           align-items: stretch
         }

         .cl-search input {
           width: 100%
         }

         .cl-grid {
           grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
           gap: 14px
         }

         .cl-card {
           height: 180px
         }

         .cl-logo-wrap {
           height: 90px
         }

         .cl-logo-wrap img {
           max-height: 80px;
           max-width: 110px
         }

         .cl-back-name {
           font-size: 13px
         }
       }





       /* ============ WHY SAVEER - REDESIGN (wsx-) ============ */
       #view-whysaveer {
         --wsx-navy: #001846;
         --wsx-navy2: #030F4D;
         --wsx-ink: #0B1220;
         --wsx-teal: #5DBB64;
         --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: #5DBB64;
         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: #5DBB64;
         font-weight: 600;
         font-size: 13px;
         letter-spacing: .01em;
       }

       .fz-legal-onband .fz-legal-links a {
         color: #5DBB64;
         font-weight: 600;
         font-size: 13px;
         text-decoration: none;
         transition: color .2s ease;
       }

       .fz-legal-onband .fz-legal-links a:hover {
         color: var(--navy);
       }

       @media(max-width:760px) {
         .fz-legal-onband {
           position: static;
           flex-direction: column;
           align-items: flex-start;
           padding: 14px 24px;
         }
       }

       /* ============ Why Us reveal panels (services page) ============ */
       .wu {
         --wu-ease: cubic-bezier(.22, 1, .36, 1);
         --wu-rowh: 78px;
         --wu-stick0: 88px;
         --wu-pad-collapse: 20px;
         position: relative;
         background: var(--offwhite);
         color: var(--navy);
       }

       .wu-intro {
         padding: 96px 40px 44px;
         max-width: 1180px;
         margin: 0 auto
       }

       .wu-intro-head {
         display: grid;
         grid-template-columns: 1fr 2fr;
         align-items: end;
         gap: 24px;
         padding-bottom: 28px
       }

       .wu-label {
         font-family: 'Inter', sans-serif;
         font-size: 13px;
         font-weight: 600;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: var(--teal)
       }

       .wu-line {
         font-family: 'Inter', sans-serif;
         font-size: clamp(18px, 1.6vw, 22px);
         font-weight: 300;
         color: var(--navy)
       }

       .wu-rule {
         height: 1px;
         background: var(--line);
         transform: scaleX(0);
         transform-origin: left;
         transition: transform 1.2s var(--wu-ease)
       }

       .wu-rule.in {
         transform: scaleX(1)
       }

       .wu-panel {
         position: sticky;
         top: var(--wu-stick);
         height: auto;
         background: var(--offwhite);
         display: grid;
         grid-template-columns: minmax(180px, 1fr) 70px minmax(0, 3fr);
         gap: 0 30px;
         align-items: start;
         max-width: 1180px;
         margin: 0 auto;
         padding: 64px 40px;
         border-top: 1px solid var(--line);
         overflow: hidden;
       }

       .wu-panel.wu-p1 {
         --wu-stick: var(--wu-stick0)
       }

       .wu-panel.wu-p2 {
         --wu-stick: calc(var(--wu-stick0) + var(--wu-rowh))
       }

       .wu-panel.wu-p3 {
         --wu-stick: calc(var(--wu-stick0) + var(--wu-rowh)*2)
       }

       .wu-panel.wu-p4 {
         --wu-stick: calc(var(--wu-stick0) + var(--wu-rowh)*3);
         margin-bottom: 140px;
       }

       .wu-icon-wrap {
         width: min(200px, 100%);
         transform-origin: top left;
         will-change: transform
       }

       .wu-icon {
         width: 100%;
         overflow: visible;
         display: block
       }

       .wu-icon path,
       .wu-icon circle,
       .wu-icon ellipse {
         fill: none;
         stroke: var(--navy);
         stroke-width: 2.4;
         stroke-linecap: round;
         stroke-linejoin: round;
         stroke-dasharray: 1300;
         stroke-dashoffset: 1300;
       }

       .wu-panel.in .wu-icon path,
       .wu-panel.in .wu-icon circle,
       .wu-panel.in .wu-icon ellipse {
         animation: wuDraw 1.4s cubic-bezier(.4, 0, .2, 1) forwards
       }

       .wu-panel.in .wu-icon .wu-d2 *,
       .wu-panel.in .wu-icon .wu-d2 {
         animation-delay: .18s
       }

       .wu-panel.in .wu-icon .wu-d3 *,
       .wu-panel.in .wu-icon .wu-d3 {
         animation-delay: .36s
       }

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

       .wu-icon .wu-ring {
         transform-origin: 240px 240px
       }

       .wu-icon .wu-ring1 {
         transform: rotate(-19deg)
       }

       .wu-icon .wu-ring2 {
         transform: rotate(26deg)
       }

       .wu-panel.in .wu-icon .wu-ring1 {
         animation: wuWob1 9s ease-in-out infinite 1.4s
       }

       .wu-panel.in .wu-icon .wu-ring2 {
         animation: wuWob2 11s ease-in-out infinite 1.6s
       }

       @keyframes wuWob1 {

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

         50% {
           transform: rotate(-27deg)
         }
       }

       @keyframes wuWob2 {

         0%,
         100% {
           transform: rotate(26deg)
         }

         50% {
           transform: rotate(18deg)
         }
       }

       .wu-panel.in .wu-icon .wu-spin {
         animation: wuSpin 26s linear infinite 1.4s;
         transform-origin: 240px 240px
       }

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

       .wu-icon g.wu-cube {
         transform-box: fill-box;
         transform-origin: center
       }

       .wu-panel.in .wu-icon .wu-cubeA {
         animation: wuFloatA 7s ease-in-out infinite 1.4s
       }

       .wu-panel.in .wu-icon .wu-cubeB {
         animation: wuFloatB 8s ease-in-out infinite 1.6s
       }

       .wu-panel.in .wu-icon .wu-cubeC {
         animation: wuFloatA 9s ease-in-out infinite 1.8s
       }

       @keyframes wuFloatA {

         0%,
         100% {
           transform: translateY(0)
         }

         50% {
           transform: translateY(-8px)
         }
       }

       @keyframes wuFloatB {

         0%,
         100% {
           transform: translateY(0)
         }

         50% {
           transform: translateY(7px)
         }
       }

       .wu-tag {
         position: absolute;
         left: 40px;
         top: 46%;
         z-index: 2;
         font-family: 'Inter', sans-serif;
         font-size: 11px;
         font-weight: 600;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: var(--teal)
       }

       .wu-num {
         font-family: 'Inter', sans-serif;
         font-size: 13px;
         font-weight: 600;
         letter-spacing: .06em;
         color: var(--muted);
         padding-top: 10px;
         opacity: 0;
         transform: translateY(16px);
         transition: opacity .7s ease .1s, transform .7s var(--wu-ease) .1s
       }

       .wu-panel.in .wu-num {
         opacity: 1;
         transform: translateY(0)
       }

       .wu-content {
         min-width: 0
       }

       .wu-headline {
         font-family: 'Inter', sans-serif;
         font-size: clamp(36px, 4.4vw, 50px);
         font-weight: 200;
         letter-spacing: -.02em;
         line-height: 1;
         color: var(--navy);
         transform-origin: left top;
         will-change: transform
       }

       .wu-word {
         display: inline-block;
         overflow: hidden;
         vertical-align: top
       }

       .wu-word span {
         display: inline-block;
         transform: translateY(115%);
         transition: transform 1s var(--wu-ease)
       }

       .wu-panel.in .wu-word span {
         transform: translateY(0)
       }

       .wu-panel.in .wu-word:nth-child(2) span {
         transition-delay: .08s
       }

       .wu-sub-wrap {
         margin-top: 28px;
         overflow: hidden;
         will-change: transform, opacity, height
       }

       .wu-sub {
         font-family: 'Inter', sans-serif;
         font-size: clamp(14px, 1.3vw, 18px);
         font-weight: 300;
         line-height: 1.6;
         color: #1b2b4b;
         max-width: 100%;
         opacity: 0;
         transform: translateY(22px);
         transition: opacity .8s ease .26s, transform .8s var(--wu-ease) .26s
       }

       .wu-panel.in .wu-sub {
         opacity: 1;
         transform: translateY(0)
       }

       .wu-outro {
         position: relative;
         z-index: 10;
         background: var(--offwhite);
         max-width: 1180px;
         margin: 0 auto;
         padding: 56px 40px 70px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
         gap: 20px
       }

       .wu-outro p {
         font-family: 'Inter', sans-serif;
         font-weight: 300;
         font-size: clamp(20px, 2.4vw, 28px);
         color: var(--navy);
         margin: 0;
         max-width: 34ch
       }

       .wu-outro-btn {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         background: var(--navy);
         color: #fff;
         border: none;
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         font-size: 13px;
         letter-spacing: .04em;
         text-transform: uppercase;
         padding: 16px 26px;
         cursor: pointer;
         transition: background .2s;
         white-space: nowrap
       }

       .wu-outro-btn svg {
         width: 18px;
         height: 18px;
         transition: transform .25s
       }

       .wu-outro-btn:hover {
         background: #03257D
       }

       .wu-outro-btn:hover svg {
         transform: translateX(4px)
       }

       @media(max-width:900px) {
         .wu {
           --wu-rowh: 56px;
           --wu-stick0: 56px;
           --wu-pad-collapse: 16px
         }

         .wu-intro {
           padding: 70px 20px 30px
         }

         .wu-intro-head {
           grid-template-columns: 1fr;
           gap: 14px
         }

         .wu-panel {
           height: auto;
           grid-template-columns: 60px 1fr;
           grid-template-areas: "icon num" "content content";
           gap: 16px;
           padding: 24px 20px 36px;
         }

         .wu-icon-wrap {
           grid-area: icon;
           width: 60px
         }

         .wu-num {
           grid-area: num;
           padding-top: 4px
         }

         .wu-content {
           grid-area: content
         }

         .wu-tag {
           display: none
         }

         .wu-sub-wrap {
           margin-top: 28px
         }

         .wu-outro {
           padding: 40px 20px 50px
         }
       }

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

         .wu *,
         .wu *::before,
         .wu *::after {
           animation: none !important;
           transition: none !important
         }

         .wu-word span {
           transform: none
         }

         .wu-num,
         .wu-sub {
           opacity: 1;
           transform: none
         }

         .wu-rule {
           transform: scaleX(1)
         }

         .wu-icon path,
         .wu-icon circle,
         .wu-icon ellipse {
           stroke-dashoffset: 0
         }
       }
    

      /* === BRAND: all buttons solid #1B1464 with white text === */
      .btn,
      .btn-ghost,
      .btn-dark,
      .vbtn,
      .pbtn,
      .mc-btn,
      .icon-btn,
      .fd-sug-btn,
      .pf-hero-btn,
      .cc-tb-btn,
      .cc-btn-primary,
      .cc-btn-ghost,
      .cc-btn-search,
      .cca-btn,
      .csv-btn,
      .afn-btn,
      .bp-btn,
      .bp-btn-solid,
      .bp-btn-ghost,
      .cl-cta-btn,
      .ctn-btn-solid,
      .ctn-btn-ghost,
      .ty-btn-solid,
      .ty-btn-ghost,
      .faq-call-btn,
      .gal2-btn,
      .gal2-iconbtn,
      .jrn-end-btn,
      .ab-cta-btn,
      .ab-faq-help-btn,
      .ev-kit-btn,
      .se-btn,
      .pf-btn,
      .xl-btn,
      .ws-btn,
      .ws-btn-primary,
      .ws-btn-ghost,
      .ctn-fab-btn,
      .ctn-fab-call,
      .ctn-fab-wa {
        background: #1b1464 !important;
        color: #fff !important;
        border-color: #1b1464 !important;
      }

      /* keep icon/svg strokes visible on the navy fill */
      .btn svg,
      .btn-ghost svg,
      .bp-btn svg,
      .cl-cta-btn svg,
      .ctn-btn-solid svg,
      .ty-btn-solid svg,
      .ws-btn svg,
      .afn-btn svg,
      .ab-cta-btn svg,
      .jrn-end-btn svg,
      .gal2-btn svg {
        stroke: #fff !important;
        color: #fff !important;
      }

      /* hover: subtle lift to the deep royal blue for feedback */
      .btn:hover,
      .btn-ghost:hover,
      .btn-dark:hover,
      .afn-btn:hover,
      .bp-btn:hover,
      .bp-btn-solid:hover,
      .bp-btn-ghost:hover,
      .cl-cta-btn:hover,
      .ctn-btn-solid:hover,
      .ctn-btn-ghost:hover,
      .ty-btn-solid:hover,
      .ty-btn-ghost:hover,
      .faq-call-btn:hover,
      .gal2-btn:hover,
      .jrn-end-btn:hover,
      .ab-cta-btn:hover,
      .ab-faq-help-btn:hover,
      .ws-btn:hover,
      .ws-btn-primary:hover,
      .ws-btn-ghost:hover,
      .cca-btn:hover,
      .cc-btn-primary:hover,
      .csv-btn:hover,
      .vbtn:hover,
      .pbtn:hover,
      .mc-btn:hover {
        background: #030f4d !important;
        color: #fff !important;
        border-color: #030f4d !important;
      }
    

      /* ===== Glass nav overlaying the top hero (home only) ===== */
      /* Pull the home view up so the dark hero (afn-cta) sits full behind the sticky nav */
      #view-home {
        margin-top: -72px;
      }

      /* Frosted-glass, transparent nav while it floats over the dark hero */
      /* Home hero nav now uses the same whitish glass nav as every other page (see base `nav{}` rule above) */
      /* nav-contact (navy button) reads fine on glass, so left as-is */
      @media (prefers-reduced-motion: reduce) {
        body.home-hero-nav .site-nav nav {
          transition: none;
        }
      }
    

      /* full-page cursor constellation (home only)   sits behind all content, never blocks clicks */
      .hcn-canvas {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        pointer-events: none;
        display: block;
      }

      #view-home > :not(.hcn-canvas) {
        position: relative;
        z-index: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .hcn-canvas {
          display: none;
        }
      }
    

      /* horizontal-overflow guard for home (clip = sticky-safe, doesn't create scroll container) */
      #view-home {
        overflow-x: clip;
      }

      #view-home .afn-cta,
      #view-home .afn-quote,
      #view-home .repsec {
        overflow-x: clip;
      }

      html,
      body {
        max-width: 100%;
        overflow-x: clip;
      }
    

      :root {
        --navy: #1b2b4b;
        --teal: #5dbb64;
        --teal2: #5dbb64;
        --sun: #f2c94c;
        --sun2: #e0a92e;
        --pink: #f2a6c0;
        --cloud: #cfe3de;
        --bird: #5b6472;
        --ink-soft: #5b6472;
        --line-grey: #c7cbd1;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        background: #fff;
        font-family:
          Inter,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
      }

      .fz-band {
        width: 100%;
        overflow: hidden;
      }

      .fz-scene svg {
        width: 100%;
        height: auto;
        display: block;
      }

      /* ---- drawable strokes ---- */
      .ln {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
      }

      .play .ln {
        animation: draw 0.9s ease forwards;
        animation-delay: var(--d, 0s);
      }

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

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

      .play .pop {
        animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
        animation-delay: var(--d, 0s);
      }

      @keyframes pop {
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      /* ---- faded fills (leaves, flowers, nets, labels) ---- */
      .fade {
        opacity: 0;
      }

      .play .fade {
        animation: fade 0.6s ease forwards;
        animation-delay: var(--d, 0s);
      }

      @keyframes fade {
        to {
          opacity: 1;
        }
      }

      /* ---- ambient loops (choreographed: sun glows first, then rain, then structures sway) ---- */
      .sun {
        transform-box: fill-box;
        transform-origin: center;
        animation: pulse 4s ease-in-out infinite;
        animation-delay: 0.3s;
      }

      @keyframes pulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.85;
        }

        50% {
          transform: scale(1.12);
          opacity: 1;
        }
      }

      .rays {
        transform-box: fill-box;
        transform-origin: center;
        animation: spin 70s linear infinite;
      }

      .blades {
        transform-box: fill-box;
        transform-origin: center;
        animation: spin 7s linear infinite;
      }

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

      /* structure colour fills wiping in left-to-right */
      .fzfill {
        opacity: 0;
      }

      .play .fzfill {
        animation: fzWipe 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: var(--fd, 1.6s);
      }

      @keyframes fzWipe {
        0% {
          opacity: 0;
          clip-path: inset(0 100% 0 0);
        }

        100% {
          opacity: 1;
          clip-path: inset(0 0 0 0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .play .fzfill {
          animation: none;
          opacity: 0.5;
          clip-path: none;
        }
      }

      .cloud {
        animation: drift 30s ease-in-out infinite;
      }

      .cloud.c2 {
        animation-duration: 38s;
      }

      .cloud.c3 {
        animation-duration: 34s;
        animation-direction: reverse;
      }

      .cloud.c4 {
        animation-duration: 44s;
      }

      @keyframes drift {
        0% {
          transform: translateX(-24px);
        }

        50% {
          transform: translateX(24px);
        }

        100% {
          transform: translateX(-24px);
        }
      }

      .birds {
        animation: flap 3.4s ease-in-out infinite;
      }

      @keyframes flap {
        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-7px);
        }
      }

      /* rain starts AFTER the sun has been glowing for a moment */
      .rain {
        animation: rainfall 1.1s linear infinite;
        animation-delay: 2s;
        opacity: 0;
      }

      @keyframes rainfall {
        0% {
          transform: translateY(-6px);
          opacity: 0;
        }

        30% {
          opacity: 0.5;
        }

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

      .drops {
        animation: dropfall 1.5s ease-in infinite;
        animation-delay: 2s;
      }

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

        30% {
          opacity: 0.7;
        }

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

      .sway {
        transform-box: fill-box;
        transform-origin: bottom;
        animation: sway 4.5s ease-in-out infinite;
      }

      .sway.s2 {
        animation-duration: 5.4s;
        animation-delay: 0.6s;
      }

      .sway.s3 {
        animation-duration: 4s;
        animation-delay: 1s;
      }

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

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

      /* wind panning through the structures   gentle base-anchored lean, staggered, begins after rain */
      .wind {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: windSway 3.8s ease-in-out infinite;
        animation-delay: 3.6s;
      }

      .wind.w2 {
        animation-duration: 4.4s;
        animation-delay: 3.75s;
      }

      .wind.w3 {
        animation-duration: 4.1s;
        animation-delay: 3.9s;
      }

      .wind.w4 {
        animation-duration: 4.7s;
        animation-delay: 4.05s;
      }

      .wind.w5 {
        animation-duration: 4.2s;
        animation-delay: 4.2s;
      }

      .wind.w6 {
        animation-duration: 4.6s;
        animation-delay: 4.35s;
      }

      .wind.w7 {
        animation-duration: 4s;
        animation-delay: 4.5s;
      }

      @keyframes windSway {
        0%,
        100% {
          transform: rotate(0deg) skewX(0deg);
        }

        45% {
          transform: rotate(1.1deg) skewX(-1.2deg);
        }

        70% {
          transform: rotate(-0.7deg) skewX(0.7deg);
        }
      }

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

        .pop,
        .fade {
          opacity: 1 !important;
          transform: none !important;
          animation: none !important;
        }

        .sun,
        .rays,
        .blades,
        .cloud,
        .birds,
        .rain,
        .drops,
        .sway,
        .wind {
          animation: none !important;
        }

        .rain {
          opacity: 0.5 !important;
        }
      }

      /* ===== horticulture icon row: outline draws, then colour fills in ===== */
      .hz-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: clamp(18px, 3vw, 40px);
        padding: 8px 24px 20px;
        position: relative;
        z-index: 4;
      }

      .hz-ic {
        width: clamp(38px, 4vw, 52px);
        height: clamp(38px, 4vw, 52px);
      }

      .hz-ic svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }

      .hz-ic .ln {
        fill: none;
        stroke: var(--teal, #5dbb64);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
      }

      /* draw the outline (staggered per icon), then let colour fill wipe up */
      .play .hz-ic .ln {
        animation: hzDraw 0.8s ease forwards;
        animation-delay: calc(var(--i) * 0.12s);
      }

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

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

      .play .hz-ic .hzf {
        animation: hzFill 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: calc(var(--i) * 0.12s + 0.55s);
      }

      @keyframes hzFill {
        0% {
          opacity: 0;
          clip-path: inset(100% 0 0 0);
        }

        100% {
          opacity: 1;
          clip-path: inset(0 0 0 0);
        }
      }

      /* gentle looping shake, begins once the draw+fill has finished; staggered per icon */
      .play .hz-ic svg {
        animation: hzShake 2.6s ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.12s + 1.5s);
        transform-origin: 50% 80%;
      }

      @keyframes hzShake {
        0%,
        72%,
        100% {
          transform: rotate(0deg);
        }

        78% {
          transform: rotate(-6deg);
        }

        84% {
          transform: rotate(5deg);
        }

        90% {
          transform: rotate(-3deg);
        }

        96% {
          transform: rotate(1.5deg);
        }
      }

      .hz-ic:hover {
        transform: translateY(-4px) scale(1.08);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }

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

        .hz-ic .hzf {
          opacity: 0.9 !important;
          clip-path: none !important;
          animation: none !important;
        }

        .hz-ic svg {
          animation: none !important;
          transform: none !important;
        }
      }
    

      /* ============ FOOTER (from footer (1).html) - font kept as page default: 'Inter', sans-serif ============ */
      .sf {
        position: relative;
        background: linear-gradient(
          160deg,
          #06211b 0%,
          #0a332b 60%,
          #0d3b32 100%
        );
        padding: 0;
        font-family: "Inter", sans-serif;
        overflow: hidden;
      }

      .sf-glow {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(
            50% 60% at 15% 0%,
            rgba(15, 181, 174, 0.16),
            transparent 65%
          ),
          radial-gradient(
            40% 50% at 100% 100%,
            rgba(242, 201, 76, 0.08),
            transparent 70%
          );
      }

      .sf-card {
        position: relative;
        width: 100%;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
        background-color: #07161d;
        box-shadow: none;
        opacity: 0;
        transform: translateY(36px);
        transition:
          opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* banner art fills the card's full (content-driven) height so it always
     reaches the bottom bar with no gap, however tall the nav content is */
      .sf-media {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background-color: #07161d;
        background-image: url("footer 1.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
      }

      .sf-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        pointer-events: none;
      }

      .sf-tint {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 24, 70, 0.6) 0%,
          rgba(0, 24, 70, 0.3) 45%,
          rgba(0, 24, 70, 0.75) 100%
        );
        mix-blend-mode: multiply;
        pointer-events: none;
      }

      .sf-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 24, 70, 0.3) 0%,
          rgba(0, 24, 70, 0.05) 45%,
          rgba(0, 24, 70, 0.45) 100%
        );
        pointer-events: none;
      }

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

      .sf-top {
        position: relative;
        z-index: 1;
        background: transparent;
        display: flex;
        justify-content: space-between;
        gap: 32px;
        max-width: 1240px;
        margin: 0 auto;
        padding: clamp(42px, 7vw, 96px) clamp(22px, 5vw, 64px) 40px;
      }

      .sf-brand {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 250px;
        flex: 1 1 250px;
      }

      .sf-logo-plate {
        display: inline-flex;
        width: fit-content;
        padding: 10px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.51);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        /*border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .3);*/
      }

      .sf-logo {
        height: 108px;
        width: auto;
        display: block;
        object-fit: contain;
      }

      .sf-tag {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.86);
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
      }

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

      .sf-contact a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.38);
        transition:
          color 0.2s,
          border-color 0.2s;
      }

      .sf-contact a svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
      }

      .sf-contact a:hover {
        color: #fff;
        border-color: #fff;
      }

      .sf-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        padding: 10px 18px;
        border-radius: 999px;
        background: #fff;
        color: #10291f;
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        width: fit-content;
        transition:
          background 0.2s,
          transform 0.2s;
      }

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

      .sf-cta svg {
        width: 13px;
        height: 13px;
        transition: transform 0.2s;
      }

      .sf-cta:hover svg {
        transform: translate(2px, -2px);
      }

      .sf-col {
        display: flex;
        flex-direction: column;
        min-width: 140px;
      }

      .sf-col h4 {
        margin: 0 0 16px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.72);
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
      }

      .sf-col a {
        position: relative;
        display: block;
        width: fit-content;
        margin-bottom: 11px;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        opacity: 0.88;
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
        transition:
          opacity 0.2s,
          color 0.2s;
      }

      .sf-col a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: #fff;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
      }

      .sf-col a:hover {
        opacity: 1;
        color: #fff;
      }

      .sf-col a:hover::after {
        transform: scaleX(1);
      }

      .sf-connect {
        display: flex;
        align-items: center;
        gap: 0;
      }

      .sf-connect-icon {
        width: 0;
        height: 22px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        overflow: hidden;
        transform: translateX(-6px) scale(0.6);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease,
          width 0.25s ease,
          margin-right 0.25s ease;
      }

      .sf-connect-icon svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
        color: #fff;
      }

      .sf-connect--x .sf-connect-icon svg,
      .sf-connect--linkedin .sf-connect-icon svg,
      .sf-connect--youtube .sf-connect-icon svg {
        fill: #fff;
      }

      .sf-connect:hover .sf-connect-icon {
        width: 22px;
        margin-right: 9px;
        opacity: 1;
        transform: translateX(0) scale(1);
      }

      .sf-connect--x .sf-connect-icon {
        background: #000;
      }
      .sf-connect--instagram .sf-connect-icon {
        background: radial-gradient(
          circle at 30% 107%,
          #fdf497 0%,
          #fdf497 5%,
          #fd5949 45%,
          #d6249f 60%,
          #285aeb 90%
        );
      }
      .sf-connect--linkedin .sf-connect-icon {
        background: #0a66c2;
      }
      .sf-connect--youtube .sf-connect-icon {
        background: #ff0000;
      }

      .sf-connect--x:hover {
        color: #fff;
      }
      .sf-connect--instagram:hover {
        color: #e1306c;
      }
      .sf-connect--linkedin:hover {
        color: #0a66c2;
      }
      .sf-connect--youtube:hover {
        color: #ff0000;
      }

      .sf-bottom {
        position: relative;
        z-index: 1;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        max-width: 1240px;
        margin: clamp(220px, 30vh, 360px) auto 0;
        padding: 24px clamp(22px, 5vw, 64px);
        border-top: 1px solid rgba(255, 255, 255, 0.22);
      }

      .sf-bottom p {
        margin: 0;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.82);
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
      }

      .sf-social {
        display: flex;
        gap: 12px;
      }

      .sf-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
        transition: background 0.2s;
      }

      .sf-social a:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .sf-social a[aria-label="Facebook"]:hover {
        color: #1877f2;
      }

      .sf-social a[aria-label="Instagram"]:hover {
        color: #e1306c;
      }

      .sf-social a[aria-label="YouTube"]:hover {
        color: #ff0000;
      }

      .sf-social a[aria-label="Facebook"]:hover {
        color: #1877f2;
      }

      .sf-social a[aria-label="Instagram"]:hover {
        color: #e1306c;
      }

      .sf-social a[aria-label="YouTube"]:hover {
        color: #ff0000;
      }

      .sf-social svg {
        width: 15px;
        height: 15px;
      }

      @media (prefers-reduced-motion: reduce) {
        .sf-card {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

      @media (max-width: 760px) {
        .sf-top {
          flex-direction: column;
          padding: 36px 24px 28px;
          gap: 28px;
        }

        .sf-brand {
          max-width: none;
        }

        .sf-bottom {
          flex-direction: column;
          margin-top: 50px;
          padding: 20px 24px;
          text-align: center;
        }
      }

      @media (max-width: 480px) {
        .sf-media {
          background-position: center top;
        }

        .sf-video {
          object-position: center top;
        }

        .sf-top {
          gap: 22px;
        }
      }