/* Undo Bootstrap's element reboot inside the design: the pages were built against browser defaults */
#zp26 h1,#zp26 h2,#zp26 h3,#zp26 h4,#zp26 h5,#zp26 h6,#zp26 p,#zp26 ul,#zp26 ol,#zp26 dl,#zp26 dd,#zp26 blockquote,#zp26 figure,#zp26 figcaption,#zp26 hr,#zp26 pre,#zp26 address,#zp26 legend,#zp26 fieldset{margin:revert;padding:revert;font-size:revert;font-weight:revert;line-height:revert;color:revert;font-family:revert;border:revert;opacity:revert;}
#zp26 b,#zp26 strong{font-weight:revert;}
#zp26 small,#zp26 sub,#zp26 sup{font-size:revert;vertical-align:revert;position:revert;line-height:revert;}
#zp26 img,#zp26 svg{vertical-align:revert;}
#zp26 a,#zp26 a:hover{color:revert;text-decoration:revert;}
#zp26 button,#zp26 input,#zp26 select,#zp26 textarea,#zp26 label,#zp26 optgroup{margin:revert;font-family:revert;font-size:revert;line-height:revert;border-radius:revert;display:revert;text-transform:revert;appearance:revert;resize:revert;cursor:revert;}
#zp26 table,#zp26 th,#zp26 td,#zp26 caption{border-collapse:revert;caption-side:revert;text-align:revert;padding:revert;color:revert;border-color:revert;border-style:revert;border-width:revert;}
#zp26 iframe{border:revert;}
#zp26 summary{display:revert;cursor:revert;}
#zp26 abbr[title]{text-decoration:revert;cursor:revert;}
#zp26 mark{padding:revert;background-color:revert;}
#zp26 dialog{margin:revert;padding:revert;border:revert;}
/* ============================================================
       ZEROPOINT — Homepage design mockup
       Built on the Zeropoint Design System tokens (colors, type,
       spacing, radii, shadows). Light-first adaptation: the DS is
       dark-first; here we lead with its on-light surfaces and use
       navy (#101021) for the two meaningful dark sections.
       Accent rule (WCAG-verified): magenta-600 for accent text on
       white; gradient reserved for fills, the logo, and CTAs.
    ============================================================ */
#zp26{
        --zp-navy-950: #101021;
        --zp-navy-900: #1c1e3f;
        --zp-navy-800: #282d4d;
        --zp-magenta-600: #b52972;
        --zp-rose-500: #e74368;
        --zp-rose-600: #b82c75;
        --zp-slate-400: #7e7e9f;
        --zp-slate-600: #686881;
        --zp-white: #ffffff;
        --zp-gray-100: #dedede;
        --zp-gray-050: #f6f6f6;
        --brand-gradient: linear-gradient(
          257deg,
          #b52972 11.5%,
          #e74368 87.43%
        );

        --bg: #ffffff;
        --bg-alt: #f6f6f6;
        --bg-dark: #101021;
        --ink: #101021;
        --ink-2: #686881;
        --ink-3: #6f6f80;
        --on-dark: #ffffff;
        --on-dark-2: #a7a7bd;
        --accent: #b52972;
        --accent-2: #e74368;
        --hairline: rgba(16, 16, 33, 0.1);
        --hairline-2: rgba(16, 16, 33, 0.16);
        --hairline-dark: rgba(255, 255, 255, 0.14);

        --font-display:
          "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        --font-ui:
          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;

        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-6: 24px;
        --space-8: 32px;
        --space-10: 40px;
        --space-12: 48px;
        --space-16: 64px;
        --space-20: 80px;
        --space-24: 96px;

        --radius-sm: 6px;
        --radius-md: 10px;
        --radius-lg: 16px;
        --radius-full: 999px;

        --container: 1180px;
        --container-narrow: 920px;
        --gutter: clamp(22px, 5vw, 44px);
        --section-y: clamp(54px, 7vw, 5rem);

        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
      }
#zp26 *, #zp26 *::before, #zp26 *::after{
        box-sizing: border-box;
      }
html{
        -webkit-text-size-adjust: 100%;
        
      }
      @media (prefers-reduced-motion: reduce) {
html{
          scroll-behavior: auto;
        }
#zp26 *, #zp26 *::before, #zp26 *::after{
          animation-duration: 0.001ms !important;
          transition-duration: 0.001ms !important;
        }
      }
#zp26{
        margin: 0;
        font-family: var(--font-ui);
        font-size: 17px;
        line-height: 1.65;
        color: var(--ink-2);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }
#zp26 h1, #zp26 h2, #zp26 h3, #zp26 h4{
        font-family: var(--font-display);
        color: var(--ink);
        margin: 0;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.08;
      }
#zp26 p{
        margin: 0;
      }
#zp26 a{
        color: inherit;
        text-decoration: none;
      }
#zp26 ul{
        margin: 0;
        padding: 0;
        list-style: none;
      }
#zp26 button{
        font-family: inherit;
        cursor: pointer;
      }
#zp26 svg{
        display: block;
      }
#zp26 ::selection{
        background: rgba(181, 41, 114, 0.16);
      }
#zp26 :focus-visible{
        outline: 2px solid var(--accent-2);
        outline-offset: 3px;
        border-radius: 4px;
      }
#zp26 .container{
        width: 100%;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
      }
#zp26 .section{
        padding-block: var(--section-y);
      }
#zp26 .sr-only{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
#zp26 #top{
        display: block;
        height: 0;
      }
#zp26 #top:focus{
        outline: none;
      }
#zp26 .skip-link{
        position: absolute;
        left: 16px;
        top: -70px;
        z-index: 200;
        background: var(--ink);
        color: #fff;
        padding: 12px 18px;
        border-radius: var(--radius-md);
        transition: top 0.2s var(--ease);
      }
#zp26 .skip-link:focus{
        top: 16px;
      }
#zp26 .eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0;
      }
#zp26 .eyebrow.on-dark{
        color: var(--zp-rose-500);
      }
#zp26 .eyebrow.center{
        justify-content: center;
      }
#zp26 .display{
        font-size: clamp(44px, 6.2vw, 78px);
        letter-spacing: -0.035em;
        line-height: 1.04;
        text-wrap: balance;
      }
#zp26 .h2{
        font-size: clamp(29px, 4.1vw, 50px);
        letter-spacing: -0.025em;
        line-height: 1.05;
        text-wrap: balance;
      }
#zp26 .lead{
        font-size: clamp(18px, 1.55vw, 21px);
        line-height: 1.55;
        color: var(--ink-2);
        font-weight: 400;
      }
#zp26 .btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-family: var(--font-ui);
        font-weight: 600;
        font-size: 15px;
        line-height: 1;
        padding: 15px 24px;
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        transition:
          transform 0.25s var(--ease),
          box-shadow 0.25s var(--ease),
          background 0.25s var(--ease),
          border-color 0.2s var(--ease),
          color 0.2s var(--ease);
        white-space: nowrap;
      }
#zp26 .btn svg{
        width: 16px;
        height: 16px;
      }
#zp26 .btn .arrow{
        transition: transform 0.25s var(--ease);
      }
#zp26 .btn:hover .arrow{
        transform: translateX(4px);
      }
#zp26 .btn-primary{
        background: var(--brand-gradient);
        color: #fff;
        box-shadow: 0 10px 30px -12px rgba(181, 41, 114, 0.55);
      }
#zp26 .btn-primary:hover{
        transform: translateY(-2px);
        box-shadow: 0 18px 40px -14px rgba(181, 41, 114, 0.6);
      }
#zp26 .btn-secondary{
        background: transparent;
        color: var(--ink);
        border-color: var(--hairline-2);
      }
#zp26 .btn-secondary:hover{
        background: var(--bg-alt);
        border-color: var(--ink);
      }
#zp26 .btn-ghost-dark{
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        border-color: var(--hairline-dark);
      }
#zp26 .btn-ghost-dark:hover{
        background: rgba(255, 255, 255, 0.12);
        transform: translateY(-2px);
      }
#zp26 .btn-sm{
        padding: 11px 18px;
        font-size: 14px;
      }
#zp26 .link-arrow{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: 15px;
        color: var(--ink);
        padding: 12px 2px;
        transition: color 0.2s var(--ease);
      }
#zp26 .link-arrow svg{
        width: 16px;
        height: 16px;
        transition: transform 0.25s var(--ease);
      }
#zp26 .link-arrow:hover{
        color: var(--accent);
      }
#zp26 .link-arrow:hover svg{
        transform: translateX(4px);
      }
#zp26 .brand-logo{
        height: 26px;
        width: auto;
        display: block;
      }
#zp26 .brand-logo.sm{
        height: 24px;
      }/* HEADER */
#zp26 .site-header{
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 100;
        transition:
          background 0.3s var(--ease),
          border-color 0.3s var(--ease),
          box-shadow 0.3s var(--ease);
        border-bottom: 1px solid transparent;
      }
#zp26 .site-header.scrolled{
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-bottom-color: var(--hairline);
      }
#zp26 .nav{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 74px;
        gap: 24px;
      }
#zp26 .nav-links{
        display: flex;
        align-items: center;
        gap: 2px;
      }
#zp26 .nav-links a{
        font-size: 14.5px;
        font-weight: 500;
        color: var(--ink-2);
        padding: 9px 13px;
        border-radius: 8px;
        white-space: nowrap;
        transition:
          color 0.2s var(--ease),
          background 0.2s var(--ease);
      }
#zp26 .nav-links a:hover{
        color: var(--ink);
        background: var(--bg-alt);
      }
#zp26 .nav-links a[aria-current="page"]{
        color: var(--ink);
      }
#zp26 .nav-right{
        display: flex;
        align-items: center;
        gap: 14px;
      }
#zp26 .lang{
        display: inline-flex;
        align-items: center;
        gap: 1px;
        border: 1px solid var(--hairline-2);
        border-radius: var(--radius-full);
        padding: 3px;
      }
#zp26 .lang a{
        border: 0;
        background: transparent;
        color: var(--ink-3);
        font-size: 12.5px;
        font-weight: 600;
        padding: 5px 11px;
        border-radius: var(--radius-full);
        transition: all 0.2s var(--ease);
      }
#zp26 .lang a[aria-pressed="true"]{
        background: var(--ink);
        color: #fff;
      }
#zp26 .nav-toggle{
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid var(--hairline-2);
        background: transparent;
        color: var(--ink);
        align-items: center;
        justify-content: center;
      }
#zp26 .nav-toggle svg{
        width: 22px;
        height: 22px;
      }
#zp26 .mobile-nav{
        position: fixed;
        inset: 74px 0 0 0;
        z-index: 99;
        background: var(--bg);
        padding: 20px var(--gutter) 40px;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition:
          opacity 0.3s var(--ease),
          transform 0.3s var(--ease),
          visibility 0.3s;
        overflow-y: auto;
        border-top: 1px solid var(--hairline);
      }
#zp26 .mobile-nav.open{
        opacity: 1;
        transform: none;
        pointer-events: auto;
        visibility: visible;
      }
#zp26 .mobile-nav a{
        display: block;
        text-align: left;
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 500;
        color: var(--ink);
        padding: 15px 16px;
        border-bottom: 1px solid var(--hairline);
        transition:
          background 0.2s var(--ease),
          color 0.2s var(--ease);
      }/* the menu sits on white, so white text needs a fill behind it */
#zp26 .mobile-nav a:not(.btn):hover, #zp26 .mobile-nav a:not(.btn):focus-visible{
        background: var(--brand-gradient);
        color: #fff;
      }/* .mobile-nav a outranks .btn-primary, so the CTA needs its own colour
       and flex centring handing back */
#zp26 .mobile-nav a.btn{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
      }
#zp26 .mobile-nav .btn{
        margin-top: 24px;
        width: 100%;
      }/* HERO */
#zp26 .hero-space{
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        background:
          radial-gradient(
            85% 80% at 63% 40%,
            rgba(231, 67, 104, 0.045),
            transparent 58%
          ),
          radial-gradient(
            70% 85% at 28% 26%,
            rgba(126, 126, 159, 0.05),
            transparent 64%
          );
      }
#zp26 .hero-lines{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
#zp26 .hero-lines--far{
        opacity: 0.7;
        filter: blur(7px);
        -webkit-mask-image: linear-gradient(
          to bottom,
          #000 0%,
          #000 50%,
          transparent 76%
        );
        mask-image: linear-gradient(
          to bottom,
          #000 0%,
          #000 50%,
          transparent 76%
        );
      }
#zp26 .hero-lines--near{
        filter: blur(2px);
        -webkit-mask-image: linear-gradient(
          to bottom,
          transparent 46%,
          #000 74%,
          #000 100%
        );
        mask-image: linear-gradient(
          to bottom,
          transparent 46%,
          #000 74%,
          #000 100%
        );
      }
#zp26 .hero .container{
        position: relative;
        z-index: 1;
      }
#zp26 .hero{
        position: relative;
        padding-top: 150px;
        padding-bottom: calc(var(--section-y) / 2);
        overflow: hidden;
      }
#zp26 .cap-strip{
        padding-block: var(--section-y);
      }
#zp26 .hero-inner{
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: clamp(20px, 2.2vw, 30px);
        align-items: center;
      }
#zp26 .hero-copy{
        position: relative;
        z-index: 1;
      }
#zp26 .hero-eyebrow{
        margin-bottom: 22px;
      }
#zp26 .hero h1{
        margin: 0;
      }
#zp26 .hero .display{
        font-size: clamp(34px, 4.4vw, 55px);
        line-height: 1.05;
      }
#zp26 .hero .lead{
        margin-top: 20px;
        max-width: none;
        font-size: clamp(15px, 1.12vw, 16.5px);
        line-height: 1.5;
      }
#zp26 .hero-proof{
        margin-top: 16px;
        font-size: clamp(12px, 0.95vw, 13.5px);
        color: var(--ink-3);
        max-width: none;
      }
#zp26 .hero-proof b{
        color: var(--ink-2);
        font-weight: 600;
      }
#zp26 .hero-cta{
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 32px;
        align-items: center;
      }
#zp26 .hero-visual{
        position: relative;
      }
#zp26 .hero-bento{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, minmax(92px, auto));
        gap: 12px;
        grid-template-areas: "s1 img1" "img2 img1" "img2 s2" "s3 s4";
      }
#zp26 .hb{
        border-radius: 16px;
        padding: 15px 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 14px;
        min-height: 92px;
      }
#zp26 .hb-tag{
        font-family: var(--font-ui);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        opacity: 0.74;
        line-height: 1.3;
      }
#zp26 .hb-num{
        font-family: var(--font-display);
        font-weight: 600;
        font-size: clamp(23px, 2.3vw, 31px);
        letter-spacing: -0.03em;
        line-height: 0.9;
      }
#zp26 .hb-num .u{
        font-size: 0.5em;
        font-weight: 500;
        opacity: 0.74;
        margin-left: 0.03em;
      }
#zp26 .hb.s1{
        grid-area: s1;
        background: var(--brand-gradient);
        color: #fff;
      }
#zp26 .hb.s2{
        grid-area: s2;
        background: var(--zp-navy-950);
        color: #fff;
      }
#zp26 .hb.s3{
        grid-area: s3;
        background: var(--bg-alt);
        color: var(--ink);
        border: 1px solid var(--hairline);
      }
#zp26 .hb.s4{
        grid-area: s4;
        background: linear-gradient(210deg, #e74368, #b52972);
        color: #fff;
      }
#zp26 .hb-img{
        border-radius: 16px;
        overflow: hidden;
        background: var(--bg-alt);
        min-height: 150px;
        position: relative;
      }
#zp26 .hb-img.img1{
        grid-area: img1;
      }
#zp26 .hb-img.img2{
        grid-area: img2;
      }
#zp26 .hb-photo{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }/* centred rather than spread, so a wrapped second row centres too instead of
         stranding items at the edges; the gap keeps the desktop row near full width */
#zp26 .cap-inner{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 14px clamp(18px, 2.5vw, 36px);
      }
#zp26 .cap-inner li{
        font-family: var(--font-display);
        font-size: clamp(14px, 1.35vw, 17px);
        font-weight: 500;
        color: var(--ink-3);
        white-space: nowrap;
      }/* METRICS */
#zp26 .metrics-grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(24px, 4vw, 20px);
      }
#zp26 .metric{
        padding-top: 26px;
        border-top: 1px solid var(--hairline-2);
      }
#zp26 .metric .num{
        font-family: var(--font-display);
        font-weight: 600;
        font-size: clamp(44px, 5.6vw, 64px);
        letter-spacing: -0.04em;
        line-height: 1;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }
#zp26 .metric .num em{
        font-style: normal;
        color: var(--ink);
      }
#zp26 .metric .lbl{
        margin-top: 16px;
        font-size: 14.5px;
        line-height: 1.5;
        color: var(--ink-2);
        max-width: 22ch;
      }/* ---- STATS row ---- */
#zp26 .stats-panel{
        padding: 0;
      }
#zp26 .stats-intro{
        font-size: clamp(15px, 1.35vw, 18px);
        color: var(--ink-2);
        letter-spacing: -0.01em;
        line-height: 1.55;
        max-width: 56ch;
        margin-bottom: clamp(56px, 9vw, 132px);
      }
#zp26 .stats-row{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 24px;
      }
#zp26 .stat{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: clamp(210px, 24vw, 288px);
        padding: clamp(20px, 3vw, 44px) clamp(30px, 3vw, 52px) 0
          clamp(18px, 1.8vw, 28px);
        border-left: 1px solid var(--hairline-2);
      }
#zp26 .stat:last-child{
        padding-right: 0;
      }
#zp26 .stat-lbl{
        font-family: var(--font-ui);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.5;
        text-transform: uppercase;
        color: var(--ink-2);
      }
#zp26 .stat-num{
        font-family: var(--font-display);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 0.85;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        font-size: clamp(42px, 5.4vw, 78px);
        white-space: nowrap;
      }
#zp26 .stat-num .u{
        font-size: 0.36em;
        letter-spacing: 0;
        color: var(--accent);
        font-weight: 500;
        margin-left: 0.03em;
      }
      @media (max-width: 760px) {
#zp26 .stats-intro{
          margin-bottom: 36px;
        }
#zp26 .stats-row{
          display: grid;
          grid-template-columns: 1fr 1fr;
          row-gap: 40px;
          column-gap: 24px;
        }
#zp26 .stat{
          min-height: auto;
          padding-top: 0;
          padding-right: 0;
          gap: 22px;
        }
      }/* PILLARS */
#zp26 .head-row{
        display: flex;
        flex-direction: column;
        gap: 18px;
        max-width: var(--container-narrow);
      }
#zp26 .head-row .h2{
        margin: 0;
      }
#zp26 .pillars{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, auto);
        gap: 0 clamp(16px, 1.8vw, 24px);
        margin-top: clamp(48px, 6vw, 80px);
      }
#zp26 .pillar{
        position: relative;
        grid-row: span 5;
        display: grid;
        grid-template-rows: subgrid;
        background: #f1f4fb;
        border-radius: var(--radius-lg);
        padding: clamp(26px, 2.2vw, 34px);
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-image:
          linear-gradient(#f1f4fb, #f1f4fb), linear-gradient(#f1f4fb, #f1f4fb);
        background-origin: border-box;
        transition:
          transform 0.3s var(--ease),
          box-shadow 0.3s var(--ease),
          background-image 0.3s var(--ease);
      }
#zp26 .pillars .pillar:hover{
        transform: translateY(-4px) scale(1.015);
        box-shadow: 0 24px 48px -24px rgba(16, 16, 33, 0.22);
        background-image:
          linear-gradient(#f1f4fb, #f1f4fb), var(--brand-gradient);
      }
#zp26 .pillar .idx{
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        color: var(--accent);
        letter-spacing: 0.02em;
      }
#zp26 .pillar-icon{
        width: 40px;
        height: 40px;
        border-radius: 11px;
        background: rgba(16, 16, 33, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
      }
#zp26 .pillar-icon svg{
        width: 19px;
        height: 19px;
        color: var(--accent);
      }
#zp26 .pillar h3{
        font-size: 22px;
        margin-top: 0;
        letter-spacing: -0.02em;
      }
#zp26 .pillar .desc{
        margin-top: 12px;
        font-size: 15.5px;
        line-height: 1.55;
        color: var(--ink-2);
      }
#zp26 .pillar ul{
        margin-top: 24px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 13px;
      }
#zp26 .pillar li{
        display: flex;
        gap: 11px;
        font-size: 14.5px;
        line-height: 1.45;
        color: var(--ink);
      }
#zp26 .pillar li svg{
        width: 16px;
        height: 16px;
        color: var(--accent);
        flex: none;
        margin-top: 3px;
      }
#zp26 .pillar-quote{
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 16px;
        border-top: 1px solid rgba(16, 16, 33, 0.1);
        padding-top: 22px;
      }
#zp26 .pillar-quote blockquote{
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--ink);
      }
#zp26 .pillar-quote .cite{
        font-size: 14px;
      }
#zp26 .pillar-quote .cite span{
        font-size: 13px;
      }/* margin:0 so a <figure> variant is not indented by the UA default (1em 40px).
         Accent rule down the left, matching .story-quote: every quote that is not
         inside a card carries it. */
#zp26 .pullquote{
        margin: 0;
        max-width: var(--container-narrow);
        border-left: 2px solid var(--accent);
        padding-left: clamp(22px, 2.6vw, 34px);
      }/* One attribution format for every quote on the site: name on its own line,
         company beneath it in muted grey, no avatar. Only the size varies by context. */
#zp26 .cite b{
        display: block;
        color: var(--ink);
        font-weight: 600;
        letter-spacing: -0.01em;
      }
#zp26 .cite span{
        display: block;
        margin-top: 4px;
        color: var(--ink-3);
      }
#zp26 .pullquote blockquote{
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(22px, 2.7vw, 32px);
        line-height: 1.32;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 0;
      }
#zp26 .pullquote .cite{
        margin-top: 24px;
        font-size: 17px;
      }
#zp26 .pullquote .cite span{
        font-size: 15px;
      }
#zp26 .stories-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .story-card{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 26px;
        background: var(--bg);
        border: 1px solid var(--hairline);
        border-radius: var(--radius-lg);
        padding: clamp(24px, 2.4vw, 32px);
        transition:
          border-color 0.25s var(--ease),
          box-shadow 0.25s var(--ease),
          transform 0.25s var(--ease);
      }
#zp26 .story-card:hover{
        border-color: var(--hairline-2);
        box-shadow: 0 18px 40px -26px rgba(16, 16, 33, 0.22);
        transform: translateY(-2px);
      }
#zp26 .story-card blockquote{
        margin: 0;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(16px, 1.3vw, 19px);
        line-height: 1.44;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
#zp26 .story-card .cite{
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14.5px;
      }
#zp26 .story-card .av{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--brand-gradient);
        flex: none;
      }
#zp26 .story-card:nth-child(2) .av{
        background: linear-gradient(210deg, #282d4d, #1c1e3f);
      }
#zp26 .story-card:nth-child(3) .av{
        background: linear-gradient(210deg, #7e7e9f, #282d4d);
      }
#zp26 .story-card .cite b{
        color: var(--ink);
        font-weight: 600;
      }
#zp26 .story-card .cite span{
        color: var(--ink-3);
      }
      @media (max-width: 880px) {
#zp26 .stories-grid{
          grid-template-columns: 1fr;
        }
      }/* DARK — Problem */
#zp26 .dark{
        background: var(--bg-dark);
        color: var(--on-dark-2);
      }
#zp26 .dark h2, #zp26 .dark h3{
        color: #fff;
      }
#zp26 .problem-head{
        max-width: var(--container-narrow);
      }
#zp26 .problem-head .h2{
        margin-top: 18px;
      }
#zp26 .problem-head p:not(.eyebrow){
        margin-top: 20px;
        font-size: clamp(17px, 1.5vw, 20px);
        color: var(--on-dark-2);
      }
#zp26 .problem-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        margin-top: clamp(48px, 6vw, 72px);
        background: var(--hairline-dark);
        border: 1px solid var(--hairline-dark);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
#zp26 .problem{
        background: var(--bg-dark);
        padding: clamp(26px, 3vw, 38px);
        transition: background 0.3s var(--ease);
      }
#zp26 .problem:hover{
        background: var(--zp-navy-900);
      }
#zp26 .problem h3{
        font-family: var(--font-ui);
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 10px;
      }
#zp26 .problem h3::before{
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-gradient);
        flex: none;
      }
#zp26 .problem p{
        margin-top: 12px;
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--on-dark-2);
      }/* OPERATING MODEL */
#zp26 .tend-head{
        max-width: var(--container-narrow);
      }
#zp26 .tend-head .eyebrow{
        margin-bottom: 20px;
      }
#zp26 .tend-head .h2{
        margin: 0;
      }
#zp26 .philo-panel{
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        background: var(--zp-navy-950);
        padding: clamp(44px, 7vw, 104px) clamp(30px, 5vw, 80px);
      }
#zp26 .philo-panel::before, #zp26 .philo-panel::after{
        content: "";
        position: absolute;
        top: -30%;
        bottom: -30%;
        pointer-events: none;
      }
#zp26 .philo-panel::before{
        right: -6%;
        width: 46%;
        background: linear-gradient(
          115deg,
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0.02) 55%,
          transparent
        );
        transform: skewX(-14deg);
      }
#zp26 .philo-panel::after{
        right: 22%;
        width: 16%;
        background: linear-gradient(
          115deg,
          rgba(255, 255, 255, 0.06),
          transparent 70%
        );
        transform: skewX(-14deg);
      }
#zp26 .philo-panel .tend-head{
        position: relative;
        z-index: 1;
        max-width: none;
      }
#zp26 .philo-panel .tend-statement{
        color: #fff;
        margin-top: 0;
        font-size: clamp(28px, 3.4vw, 44px);
      }
#zp26 .philo-panel .tend-statement .soft{
        color: #fff;
      }
#zp26 .philo-panel .tend-sub{
        color: var(--zp-slate-400);
        font-size: clamp(14.5px, 1.15vw, 16px);
        line-height: 1.6;
        max-width: 62ch;
        margin-top: 28px;
      }
#zp26 .tend-statement{
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(24px, 3vw, 38px);
        line-height: 1.28;
        letter-spacing: -0.025em;
        color: var(--ink);
        margin-top: 20px;
      }
#zp26 .tend-statement .soft{
        color: var(--ink-2);
      }
#zp26 .tend-sub{
        margin-top: 24px;
        font-size: clamp(17px, 1.5vw, 19px);
        color: var(--ink-2);
        max-width: 56ch;
      }
#zp26 .tend-note{
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: 28px;
        font-size: 14px;
        font-weight: 500;
        color: var(--accent);
      }
#zp26 .tend-note svg{
        width: 16px;
        height: 16px;
      }
#zp26 .lanes{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(24px, 3vw, 40px);
        margin-top: clamp(48px, 6vw, 80px);
      }
#zp26 .lane{
        padding-top: 24px;
        border-top: 2px solid var(--ink);
      }
#zp26 .lane h3{
        font-size: 19px;
        letter-spacing: -0.02em;
      }
#zp26 .lane p{
        margin-top: 12px;
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--ink-2);
      }
#zp26 .tend-quotes{
        margin-top: clamp(64px, 14vw, 200px);
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 20px;
      }
#zp26 .tend-quote{
        margin: 0;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: clamp(380px, 34vw, 460px);
        background: var(--bg-alt);
        border: 1px solid var(--hairline);
        border-radius: 20px;
        padding: clamp(30px, 3.2vw, 46px);
      }
#zp26 .tend-quote .qmark{
        position: absolute;
        bottom: -12%;
        right: -4%;
        width: 52%;
        height: auto;
        color: var(--ink);
        opacity: 0.045;
      }
#zp26 .tend-quote blockquote{
        position: relative;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(17px, 1.45vw, 20px);
        line-height: 1.5;
        letter-spacing: -0.015em;
        color: var(--ink);
        margin: 0;
      }
#zp26 .tend-quote .cite{
        position: relative;
        margin-top: 32px;
        font-size: clamp(17px, 1.4vw, 20px);
      }
#zp26 .tend-quote .cite span{
        font-size: 15px;
      }
      @media (max-width: 760px) {
#zp26 .tend-quotes{
          grid-template-columns: 1fr;
        }
      }
#zp26 .tend-head.center{
        max-width: 880px;
        margin-inline: auto;
        text-align: center;
      }
#zp26 .tend-head.center .eyebrow{
        justify-content: center;
        margin-bottom: 22px;
      }
#zp26 .tend-head.center .tend-sub{
        margin-inline: auto;
      }
#zp26 .tend-title{
        font-family: var(--font-display);
        font-weight: 600;
        font-size: clamp(29px, 4.1vw, 50px);
        letter-spacing: -0.025em;
        line-height: 1.05;
        color: var(--ink);
        text-wrap: balance;
        margin: 0;
      }
#zp26 .tend-title em{
        font-style: normal;
        color: var(--ink);
      }
#zp26 .lane-panel{
        margin-top: clamp(40px, 5vw, 64px);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
      }
#zp26 .lane-row{
        display: block;
      }
#zp26 .lane-bar{
        height: 100%;
        border-radius: var(--radius-md);
        padding: 22px;
        background: #f1f4fb;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-image:
          linear-gradient(#f1f4fb, #f1f4fb), linear-gradient(#f1f4fb, #f1f4fb);
        background-origin: border-box;
        transition:
          transform 0.3s var(--ease),
          box-shadow 0.3s var(--ease),
          background-image 0.3s var(--ease);
      }
#zp26 .lane-row:hover .lane-bar{
        transform: translateY(-4px) scale(1.015);
        box-shadow: 0 24px 48px -24px rgba(16, 16, 33, 0.22);
        background-image:
          linear-gradient(#f1f4fb, #f1f4fb), var(--brand-gradient);
      }
#zp26 .lane-icon{
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--brand-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
      }
#zp26 .lane-icon svg{
        width: 17px;
        height: 17px;
        color: #fff;
      }
#zp26 .lane-name{
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--ink);
        display: block;
        margin-bottom: 8px;
      }
#zp26 .lane-bar p{
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink-2);
      }
      @media (max-width: 860px) {
#zp26 .lane-panel{
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 560px) {
#zp26 .lane-panel{
          grid-template-columns: 1fr;
        }
      }/* CTA *//* the CTA band carries less copy than a normal section, so it needs less
         vertical padding to avoid reading as empty space */
#zp26 .cta{
        position: relative;
        overflow: hidden;
        text-align: center;
        padding-block: calc(var(--section-y) * 1.25);
        /* 7rem (112px) of white before the dark end-of-page band; the section
           above already contributes --section-y, so only add the remainder */
        margin-top: max(0px, calc(clamp(4.5rem, 9vw, 7rem) - var(--section-y)));
      }
#zp26 .cta .glow{
        position: absolute;
        left: 50%;
        top: -46%;
        width: min(1500px, 150%);
        height: 820px;
        transform: translateX(-50%);
        background: radial-gradient(
          ellipse at center,
          rgba(181, 41, 114, 0.42),
          rgba(231, 67, 104, 0.14) 46%,
          transparent 72%
        );
        filter: blur(46px);
        pointer-events: none;
      }
#zp26 .cta-inner{
        position: relative;
        z-index: 1;
        max-width: 900px;
        margin-inline: auto;
      }
#zp26 .cta .h2{
        margin-top: 12px;
      }
#zp26 .cta p:not(.eyebrow){
        margin: 22px auto 0;
        max-width: 78ch;
        font-size: clamp(17px, 1.5vw, 20px);
        line-height: 1.6;
        color: var(--on-dark-2);
      }
#zp26 .cta-buttons{
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
        margin-top: 34px;
      }/* FOOTER */
#zp26 .site-footer{
        background: var(--bg-dark);
        color: var(--on-dark-2);
        padding-block: clamp(60px, 7vw, 90px) 36px;
        border-top: 1px solid var(--hairline-dark);
      }
#zp26 .foot-top{
        display: grid;
        grid-template-columns: 1.7fr 1fr 1fr 1fr;
        gap: 40px;
      }
#zp26 .foot-brand .brand-logo{
        margin-bottom: 22px;
      }
#zp26 .foot-brand p{
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--on-dark-2);
        max-width: 32ch;
      }
#zp26 .foot-contact{
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
#zp26 .foot-contact a{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 14.5px;
        color: #fff;
        width: fit-content;
        transition: color 0.2s var(--ease);
      }
#zp26 .foot-contact a:hover{
        color: var(--zp-rose-500);
      }
#zp26 .foot-contact svg{
        width: 15px;
        height: 15px;
        color: var(--on-dark-2);
      }
#zp26 .foot-col h4{
        font-family: var(--font-ui);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--zp-slate-400);
        margin-bottom: 16px;
      }
#zp26 .foot-col a{
        display: block;
        font-size: 14.5px;
        color: var(--on-dark-2);
        padding: 8px 0;
        transition: color 0.2s var(--ease);
      }/* these are descriptions, not destinations — no link, no hover, no pointer */
#zp26 .foot-plain{
        margin: 0;
        padding: 0;
        list-style: none;
      }
#zp26 .foot-plain li{
        display: block;
        font-size: 14.5px;
        line-height: 1.5;
        color: var(--on-dark-2);
        padding: 8px 0;
        cursor: default;
      }
#zp26 .foot-col a:hover{
        color: #fff;
      }
#zp26 .foot-bottom{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
        margin-top: clamp(48px, 6vw, 72px);
        padding-top: 26px;
        border-top: 1px solid var(--hairline-dark);
      }
#zp26 .foot-bottom p{
        font-size: 13px;
        color: var(--zp-slate-400);
      }
#zp26 .foot-bottom .legal{
        display: flex;
        gap: 22px;
      }
#zp26 .foot-bottom .legal a{
        font-size: 13px;
        color: var(--zp-slate-400);
        transition: color 0.2s var(--ease);
      }
#zp26 .foot-bottom .legal a:hover{
        color: #fff;
      }
#zp26 [data-reveal]{
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.5s var(--ease),
          transform 0.5s var(--ease);
      }
#zp26 [data-reveal].vis{
        opacity: 1;
        transform: none;
      }
#zp26 [data-reveal][data-d="1"]{
        transition-delay: 0.06s;
      }
#zp26 [data-reveal][data-d="2"]{
        transition-delay: 0.12s;
      }
#zp26 [data-reveal][data-d="3"]{
        transition-delay: 0.18s;
      }
      @media (prefers-reduced-motion: reduce) {
#zp26 [data-reveal]{
          opacity: 1;
          transform: none;
        }
#zp26 .cap-marquee{
          animation: none;
        }
      }

      @media (max-width: 960px) {
#zp26 .nav-links, #zp26 .nav-right .lang, #zp26 .nav-right .btn{
          display: none;
        }
#zp26 .nav-toggle{
          display: inline-flex;
        }
#zp26 .hero{
          padding-top: 120px;
        }
#zp26 .hero-inner{
          grid-template-columns: 1fr;
          gap: 8px;
        }
#zp26 .hero-visual{
          max-width: 340px;
          margin: 8px auto 0;
          width: 100%;
        }
#zp26 .hero .lead, #zp26 .hero-proof{
          max-width: 56ch;
        }
#zp26 .metrics-grid{
          grid-template-columns: 1fr 1fr;
          gap: 36px 28px;
        }
#zp26 .pillars{
          grid-template-columns: 1fr;
          grid-template-rows: none;
          gap: 16px;
        }
#zp26 .pillar{
          padding: clamp(22px, 5vw, 28px);
          display: flex;
          flex-direction: column;
          grid-row: auto;
        }
#zp26 .pillar:first-child{
          margin-top: 0;
        }
#zp26 .problem-grid{
          grid-template-columns: 1fr 1fr;
        }
#zp26 .lanes{
          grid-template-columns: 1fr 1fr;
          gap: 34px 28px;
        }
#zp26 .foot-top{
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
#zp26 .foot-brand{
          grid-column: 1/-1;
        }
      }
      @media (max-width: 560px) {
#zp26{
          font-size: 16px;
        }
#zp26 .metrics-grid{
          grid-template-columns: 1fr;
          gap: 28px;
        }
#zp26 .problem-grid{
          grid-template-columns: 1fr;
        }
#zp26 .lanes{
          grid-template-columns: 1fr;
          gap: 30px;
        }
#zp26 .foot-top{
          grid-template-columns: 1fr;
        }
#zp26 .foot-bottom{
          flex-direction: column;
          align-items: flex-start;
        }
#zp26 .cap-inner{
          justify-content: center;
          gap: 12px 22px;
        }
#zp26 .hero-cta .btn, #zp26 .hero-cta .link-arrow{
          width: 100%;
        }/* the button goes full width here, so the link under it centres to match
           instead of hanging off the left edge */
#zp26 .hero-cta .btn, #zp26 .hero-cta .link-arrow{
          justify-content: center;
        }
      }/* ---- HOW WE WORK page ---- */
#zp26 .page-hero{
        padding-top: 190px;
        padding-bottom: clamp(60px, 9vw, 132px);
        text-align: center;
      }
#zp26 .page-hero .hero-bg{
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: url("/web/image/29924-871cd8f6/zp26-lines.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        opacity: 0.55;
      }
#zp26 .page-hero .hero-bg::after{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 55%, #fff 100%);
      }
#zp26 .page-hero .container{
        position: relative;
        z-index: 1;
      }
#zp26 .page-hero .hero-copy{
        max-width: var(--container-narrow);
        margin-inline: auto;
      }
#zp26 .page-hero .eyebrow{
        justify-content: center;
        margin-bottom: 22px;
      }
#zp26 .page-hero .display{
        font-size: clamp(38px, 5.4vw, 64px);
        line-height: 1.04;
        max-width: 18ch;
        margin-inline: auto;
      }
#zp26 .page-hero .lead{
        margin: 26px auto 0;
        max-width: 62ch;
        font-size: clamp(16px, 1.4vw, 19px);
      }
#zp26 .head-sub{
        margin-top: 20px;
        font-size: clamp(16px, 1.35vw, 18px);
        line-height: 1.6;
        color: var(--ink-2);
        max-width: 70ch;
      }
#zp26 .prose-2col{
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: clamp(28px, 4.5vw, 64px);
        align-items: stretch;
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .prose-2col .tend-quote{
        min-height: 0;
        padding: clamp(26px, 2.4vw, 34px);
      }
#zp26 .prose-2col .tend-quote blockquote{
        font-size: clamp(17px, 1.5vw, 20px);
      }
#zp26 .prose-2col .tend-quote .cite{
        margin-top: 24px;
      }
#zp26 .prose p{
        font-size: clamp(16px, 1.3vw, 17.5px);
        line-height: 1.68;
        color: var(--ink-2);
        margin: 0 0 18px;
      }
#zp26 .prose p:last-child{
        margin-bottom: 0;
      }
#zp26 .prose strong{
        color: var(--ink);
        font-weight: 600;
      }
#zp26 .lane-sub{
        display: block;
        margin: -4px 0 10px;
        font-family: var(--font-ui);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--accent);
      }
#zp26 .lane-points{
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(16, 16, 33, 0.1);
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
#zp26 .lane-points li{
        display: flex;
        gap: 9px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--ink-2);
      }
#zp26 .lane-points svg{
        width: 14px;
        height: 14px;
        color: var(--accent);
        flex: none;
        margin-top: 3px;
      }
#zp26 .roles{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(16px, 1.8vw, 24px);
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .role{
        position: relative;
        background: var(--bg);
        border: 1px solid var(--hairline);
        border-radius: var(--radius-lg);
        padding: clamp(26px, 2.2vw, 34px);
        transition:
          transform 0.3s var(--ease),
          box-shadow 0.3s var(--ease),
          border-color 0.3s var(--ease);
      }
#zp26 .roles .role:hover{
        transform: translateY(-4px);
        box-shadow: 0 24px 48px -24px rgba(16, 16, 33, 0.2);
        border-color: var(--hairline-2);
      }
#zp26 .role-top{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
      }
#zp26 .role-num{
        font-family: var(--font-display);
        font-size: clamp(38px, 4.4vw, 54px);
        font-weight: 700;
        line-height: 0.85;
        letter-spacing: -0.03em;
        color: rgba(181, 41, 114, 0.22);
      }
#zp26 .role-face{
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        flex: none;
        text-align: center;
      }
#zp26 .role-face img{
        width: 58px;
        height: 58px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center top;
        border: 2px solid var(--accent);
        background: #fff;
        display: block;
      }
#zp26 .role-face figcaption{
        font-family: var(--font-display);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.01em;
      }
#zp26 .role-title{
        font-family: var(--font-display);
        font-size: 21px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 16px 0 0;
      }
#zp26 .role p{
        margin-top: 13px;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--ink-2);
      }
#zp26 .contact-map{
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .contact-map svg{
        display: block;
        width: 100%;
        height: auto;
        max-width: 860px;
        margin-inline: auto;
      }
#zp26 .contact-map .cm-line{
        fill: none;
        stroke: rgba(16, 16, 33, 0.18);
        stroke-width: 1.5;
      }
#zp26 .contact-map .cm-node{
        fill: #fff;
        stroke: var(--accent);
        stroke-width: 2;
      }
#zp26 .contact-map .cm-orbit{
        fill: none;
        stroke: rgba(16, 16, 33, 0.12);
        stroke-width: 1;
        stroke-dasharray: 2 7;
      }
#zp26 .contact-map .cm-hub{
        fill: var(--zp-navy-950);
      }
#zp26 .contact-map .cm-hub-star{
        fill: #fff;
        opacity: 0.09;
      }
#zp26 .contact-map .cm-hub-inner{
        fill: none;
        stroke: rgba(255, 255, 255, 0.12);
        stroke-width: 1;
      }
#zp26 .contact-map .cm-hub-k{
        fill: rgba(255, 255, 255, 0.55);
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.22em;
      }
#zp26 .contact-map .cm-hub-t{
        fill: #fff;
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: 0.01em;
      }
#zp26 .contact-map .cm-hub-rule{
        stroke: var(--accent);
        stroke-width: 2;
        stroke-linecap: round;
      }
#zp26 .contact-map .cm-pill{
        fill: #fdeef5;
        stroke: rgba(181, 41, 114, 0.35);
        stroke-width: 1.5;
      }
#zp26 .contact-map .cm-role-t{
        fill: var(--ink);
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.01em;
      }
#zp26 .contact-map .cm-role-s{
        fill: var(--accent);
        font-family: var(--font-ui);
        font-size: 12.5px;
      }
#zp26 .contact-map .cm-annot{
        fill: var(--ink-3);
        font-family: var(--font-ui);
        font-size: 13px;
        font-style: italic;
      }
#zp26 .roles-note{
        margin-top: clamp(28px, 3vw, 40px);
        font-size: clamp(16px, 1.35vw, 18px);
        line-height: 1.6;
        color: var(--ink-2);
        max-width: 64ch;
      }
#zp26 .roles-note strong{
        color: var(--ink);
        font-weight: 600;
      }
#zp26 .mechs{
        margin-top: clamp(40px, 5vw, 60px);
        border-top: 1px solid var(--hairline);
      }
#zp26 .mech{
        display: grid;
        grid-template-columns: auto 1fr;
        gap: clamp(18px, 3vw, 40px);
        padding: 26px 0;
        border-bottom: 1px solid var(--hairline);
        align-items: start;
      }
#zp26 .mech .idx{
        font-family: var(--font-display);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--accent);
        padding-top: 4px;
        font-variant-numeric: tabular-nums;
      }
#zp26 .mech h3{
        font-size: 17.5px;
        letter-spacing: -0.015em;
        margin: 0;
      }
#zp26 .mech h3 .meta{
        margin-left: 10px;
        font-family: var(--font-ui);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
#zp26 .mech p{
        margin-top: 9px;
        font-size: 14.5px;
        line-height: 1.62;
        color: var(--ink-2);
        max-width: 80ch;
      }
#zp26 .steps{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(20px, 2.4vw, 32px);
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .step{
        padding-top: 22px;
        border-top: 2px solid var(--ink);
      }
#zp26 .step .meta{
        font-family: var(--font-ui);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0;
      }
#zp26 .step h3{
        margin-top: 12px;
        font-size: 18px;
        letter-spacing: -0.02em;
      }
#zp26 .step p{
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink-2);
      }
#zp26 .stmt{
        max-width: var(--container-narrow);
      }/* same eyebrow-to-heading gap as .head-row's 18px, so tags sit
         identically whichever block a section uses */
#zp26 .stmt .eyebrow{
        margin-bottom: 18px;
      }
#zp26 .philo-panel .tend-sub strong{
        color: #fff;
        font-weight: 600;
      }
#zp26 .philo-panel{
        text-align: center;
      }
#zp26 .philo-panel .tend-head{
        max-width: var(--container-narrow);
        margin-inline: auto;
      }
#zp26 .philo-panel .tend-statement{
        margin-inline: auto;
      }
#zp26 .philo-panel .tend-sub{
        margin-inline: auto;
      }
      @media (max-width: 960px) {
#zp26 .prose-2col{
          grid-template-columns: 1fr;
        }
#zp26 .roles{
          grid-template-columns: 1fr;
        }
#zp26 .steps{
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 760px) {
#zp26 .contact-map{
          display: none;
        }
      }
      @media (max-width: 640px) {
#zp26 .page-hero{
          padding-top: 130px;
        }
#zp26 .role-diagram{
          display: none;
        }
#zp26 .steps{
          grid-template-columns: 1fr;
        }
#zp26 .mech{
          grid-template-columns: 1fr;
          gap: 4px;
        }
#zp26 .mech h3 .meta{
          display: block;
          margin: 6px 0 0;
        }
      }/* ---- CAREERS page ---- */
#zp26 .page-hero .display em{
        font-style: normal;
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
#zp26 .page-hero .hero-cta{
        justify-content: center;
        margin-top: 34px;
      }/* video */
#zp26 .video-wrap{
        position: relative;
        margin-top: clamp(32px, 4vw, 52px);
        border-radius: 20px;
        overflow: hidden;
        background: var(--zp-navy-950);
        aspect-ratio: 16 / 9;
        box-shadow: 0 40px 90px -40px rgba(16, 16, 33, 0.5);
      }
#zp26 .video-wrap iframe{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
      }/* how you'll work */
#zp26 .work-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(16px, 1.8vw, 24px);
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .work-card{
        background: #f1f4fb;
        border-radius: var(--radius-lg);
        padding: clamp(26px, 2.2vw, 34px);
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-image:
          linear-gradient(#f1f4fb, #f1f4fb), linear-gradient(#f1f4fb, #f1f4fb);
        background-origin: border-box;
        transition:
          transform 0.3s var(--ease),
          box-shadow 0.3s var(--ease),
          background-image 0.3s var(--ease);
      }
#zp26 .work-grid .work-card:hover{
        transform: translateY(-4px) scale(1.015);
        box-shadow: 0 24px 48px -24px rgba(16, 16, 33, 0.22);
        background-image:
          linear-gradient(#f1f4fb, #f1f4fb), var(--brand-gradient);
      }
#zp26 .work-card h3{
        font-size: 19px;
        letter-spacing: -0.02em;
        margin-top: 18px;
        line-height: 1.25;
      }
#zp26 .work-card p{
        margin-top: 13px;
        font-size: 14.5px;
        line-height: 1.65;
        color: var(--ink-2);
      }/* values */
#zp26 .values-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(24px, 3vw, 40px);
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .values-grid{
        list-style: none;
        padding: 0;
      }
#zp26 .value .lane-icon{
        width: 46px;
        height: 46px;
        border-radius: 14px;
        margin-bottom: 22px;
      }
#zp26 .value .lane-icon svg{
        width: 21px;
        height: 21px;
      }
#zp26 .value h3{
        font-size: 21px;
        letter-spacing: -0.02em;
      }
#zp26 .value p{
        margin-top: 13px;
        font-size: 15px;
        line-height: 1.68;
        color: var(--ink-2);
        max-width: 34ch;
      }/* matches .own-note on the partnership page: UI font, body colour,
         full width, centred */
#zp26 .value-close{
        margin-top: clamp(26px, 3vw, 38px);
        font-size: clamp(16px, 1.35vw, 18px);
        line-height: 1.6;
        color: var(--ink-2);
        max-width: none;
        text-align: center;
        text-wrap: pretty;
      }
#zp26 .value-close strong{
        color: var(--ink);
        font-weight: 600;
      }/* what we offer */
#zp26 .offer-grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(14px, 1.6vw, 20px);
        margin-top: clamp(40px, 5vw, 64px);
      }
#zp26 .offer{
        background: var(--bg);
        border: 1px solid var(--hairline);
        border-radius: var(--radius-lg);
        padding: clamp(22px, 2vw, 28px);
        transition:
          border-color 0.25s var(--ease),
          box-shadow 0.25s var(--ease),
          transform 0.25s var(--ease);
      }
#zp26 .offer:hover{
        border-color: var(--hairline-2);
        box-shadow: 0 18px 40px -26px rgba(16, 16, 33, 0.22);
        transform: translateY(-2px);
      }
#zp26 .offer h3{
        font-size: 16.5px;
        letter-spacing: -0.02em;
        margin-top: 16px;
      }
#zp26 .offer p{
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink-2);
      }/* openings empty state */
#zp26 .openings{
        margin-top: clamp(36px, 4.5vw, 56px);
        border: 1px dashed var(--hairline-2);
        border-radius: var(--radius-lg);
        background: var(--bg-alt);
        padding: clamp(36px, 5vw, 60px) clamp(24px, 3vw, 40px);
        text-align: center;
      }
#zp26 .openings .pillar-icon{
        margin: 0 auto 18px;
      }
#zp26 .openings h3{
        font-size: 21px;
        letter-spacing: -0.02em;
      }
#zp26 .openings p{
        margin: 12px auto 0;
        max-width: 48ch;
        font-size: 15px;
        line-height: 1.6;
        color: var(--ink-2);
      }
#zp26 .openings .btn{
        margin-top: 26px;
      }/* apply form */
#zp26 .apply{
        background: var(--bg-alt);
        /* this band runs straight into the dark block, so it carries the 7rem
           run-up itself; a white margin there would read as a seam */
        padding-bottom: clamp(4.5rem, 9vw, 7rem);
      }
#zp26 .apply-head{
        max-width: var(--container-narrow);
        margin-inline: auto;
        text-align: center;
      }
#zp26 .apply-head .eyebrow{
        justify-content: center;
      }
#zp26 .apply-head .head-sub{
        margin-inline: auto;
      }
#zp26 .apply-shell{
        max-width: 760px;
        margin-inline: auto;
      }
#zp26 .apply-form{
        margin-top: clamp(32px, 4vw, 48px);
        background: var(--bg);
        border: 1px solid var(--hairline);
        border-radius: 20px;
        padding: clamp(26px, 3vw, 44px);
      }
#zp26 .form-legend{
        margin: 0 0 clamp(20px, 2.2vw, 26px);
        font-size: 13px;
        color: var(--ink-3);
      }
#zp26 .form-legend .req{
        color: var(--accent);
        font-weight: 700;
      }
#zp26 .form-row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(16px, 1.8vw, 22px);
      }
#zp26 .field{
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin-top: clamp(16px, 1.8vw, 22px);
      }
#zp26 .form-row .field{
        margin-top: 0;
      }
#zp26 .apply-form .form-row + .form-row{
        margin-top: clamp(16px, 1.8vw, 22px);
      }
#zp26 .field label{
        font-family: var(--font-ui);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--ink);
      }
#zp26 .field label .req{
        color: var(--accent);
      }
#zp26 .field label .opt{
        font-weight: 400;
        color: var(--ink-3);
      }
#zp26 .field .hint{
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--ink-3);
      }
#zp26 .field input, #zp26 .field textarea{
        font-family: var(--font-ui);
        font-size: 15px;
        color: var(--ink);
        background: var(--bg);
        border: 1px solid var(--hairline-2);
        border-radius: var(--radius-md);
        padding: 13px 15px;
        width: 100%;
        transition:
          border-color 0.2s var(--ease),
          box-shadow 0.2s var(--ease);
      }
#zp26 .field textarea{
        min-height: 130px;
        resize: vertical;
        line-height: 1.6;
      }
#zp26 .field input::placeholder, #zp26 .field textarea::placeholder{
        color: #a6a6b8;
      }
#zp26 .field input:focus, #zp26 .field textarea:focus{
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(181, 41, 114, 0.12);
      }/* error state — colour is never the only signal: icon + text carry it too */
#zp26 .field-error{
        display: none;
        align-items: flex-start;
        gap: 7px;
        font-size: 12.5px;
        line-height: 1.5;
        font-weight: 500;
        color: #c02640;
      }
#zp26 .field-error svg{
        width: 14px;
        height: 14px;
        flex: none;
        margin-top: 2px;
      }
#zp26 .field.has-error .field-error{
        display: flex;
      }
#zp26 .field.has-error input, #zp26 .field.has-error textarea, #zp26 .field.has-error .dropzone{
        border-color: #c02640;
      }
#zp26 .field.has-error input:focus, #zp26 .field.has-error textarea:focus{
        box-shadow: 0 0 0 3px rgba(192, 38, 64, 0.14);
      }/* error summary — sits above the form, where it can actually be seen */
#zp26 .form-errors{
        margin-bottom: clamp(20px, 2.2vw, 26px);
        padding: 16px 18px;
        border-radius: var(--radius-md);
        background: rgba(192, 38, 64, 0.06);
        border: 1px solid rgba(192, 38, 64, 0.3);
      }
#zp26 .form-errors[hidden]{
        display: none;
      }
#zp26 .fe-title{
        margin: 0;
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: #a81f36;
      }
#zp26 .fe-title svg{
        width: 17px;
        height: 17px;
        flex: none;
      }
#zp26 .form-errors ul{
        margin: 10px 0 0;
        padding-left: 26px;
        list-style: disc;
      }
#zp26 .form-errors li{
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink-2);
      }
#zp26 .form-errors a{
        color: #a81f36;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
      }/* CV dropzone */
#zp26 .dropzone{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        padding: clamp(24px, 3vw, 34px) 20px;
        border: 1.5px dashed var(--hairline-2);
        border-radius: var(--radius-lg);
        background: var(--bg-alt);
        transition:
          border-color 0.2s var(--ease),
          background 0.2s var(--ease);
        cursor: pointer;
      }
#zp26 .dropzone:hover{
        border-color: var(--accent);
        background: rgba(181, 41, 114, 0.04);
      }
#zp26 .dropzone:focus-within{
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(181, 41, 114, 0.12);
      }
#zp26 .dropzone.is-dragging{
        border-color: var(--accent);
        border-style: solid;
        background: rgba(181, 41, 114, 0.07);
      }
#zp26 .dropzone input[type="file"]{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
#zp26 .dz-icon{
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: rgba(16, 16, 33, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
      }
#zp26 .dz-icon svg{
        width: 18px;
        height: 18px;
        color: var(--accent);
      }
#zp26 .dz-main{
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
#zp26 .dz-main u{
        color: var(--accent);
        text-underline-offset: 3px;
      }
#zp26 .dz-sub{
        font-size: 12.5px;
        color: var(--ink-3);
      }/* chosen file */
#zp26 .file-chip{
        display: none;
        align-items: center;
        gap: 12px;
        padding: 13px 15px;
        border-radius: var(--radius-md);
        background: var(--bg-alt);
        border: 1px solid var(--hairline-2);
      }
#zp26 .file-chip.is-shown{
        display: flex;
      }
#zp26 .fc-icon{
        width: 34px;
        height: 34px;
        flex: none;
        border-radius: 9px;
        background: var(--brand-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
      }
#zp26 .fc-icon svg{
        width: 16px;
        height: 16px;
        color: #fff;
      }
#zp26 .fc-meta{
        min-width: 0;
        flex: 1;
      }
#zp26 .fc-name{
        display: block;
        font-family: var(--font-ui);
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
#zp26 .fc-size{
        display: block;
        margin-top: 2px;
        font-size: 12.5px;
        color: var(--ink-3);
      }
#zp26 .fc-remove{
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid var(--hairline-2);
        background: var(--bg);
        color: var(--ink-2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition:
          color 0.2s var(--ease),
          border-color 0.2s var(--ease);
      }
#zp26 .fc-remove:hover{
        color: #c02640;
        border-color: rgba(192, 38, 64, 0.4);
      }
#zp26 .fc-remove svg{
        width: 15px;
        height: 15px;
      }
#zp26 .apply-form .btn{
        margin-top: clamp(24px, 2.6vw, 32px);
        width: 100%;
        justify-content: center;
      }/* success panel */
#zp26 .apply-success{
        margin-top: clamp(32px, 4vw, 48px);
        background: var(--bg);
        border: 1px solid rgba(181, 41, 114, 0.28);
        border-radius: 20px;
        padding: clamp(32px, 4vw, 52px) clamp(26px, 3vw, 44px);
        text-align: center;
      }
#zp26 .apply-success[hidden]{
        display: none;
      }
#zp26 .as-tick{
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--brand-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 22px;
      }
#zp26 .as-tick svg{
        width: 26px;
        height: 26px;
        color: #fff;
      }
#zp26 .apply-success h3{
        font-size: clamp(21px, 2.2vw, 26px);
        letter-spacing: -0.02em;
      }
#zp26 .apply-success p{
        margin: 14px auto 0;
        max-width: 46ch;
        font-size: 15px;
        line-height: 1.65;
        color: var(--ink-2);
      }
#zp26 .apply-success .btn{
        margin-top: 26px;
      }/* stay in touch */
#zp26 .stay{
        text-align: center;
        margin-top: 0;
      }
#zp26 .stay p:not(.eyebrow){
        margin: 20px auto 0;
        max-width: 46ch;
        font-size: clamp(16px, 1.4vw, 18px);
        color: var(--ink-2);
      }

      @media (max-width: 960px) {
#zp26 .work-grid{
          grid-template-columns: 1fr;
        }
#zp26 .values-grid{
          grid-template-columns: 1fr;
          gap: 28px;
        }
#zp26 .offer-grid{
          grid-template-columns: 1fr 1fr;
        }
#zp26 .value p{
          max-width: 100%;
        }
      }
      @media (max-width: 640px) {
#zp26 .offer-grid{
          grid-template-columns: 1fr;
        }
#zp26 .form-row{
          grid-template-columns: 1fr;
          gap: 0;
        }
#zp26 .form-row .field{
          margin-top: clamp(16px, 1.8vw, 22px);
        }
#zp26 .apply-form .form-row:first-child .field:first-child{
          margin-top: 0;
        }
#zp26 .page-hero .hero-cta .btn{
          width: 100%;
          justify-content: center;
        }
      }
    
/* Odoo/Bootstrap leak guards */
#zp26 .lang a{text-decoration:none;}
#zp26 .nav{flex-wrap:nowrap;padding-left:0;margin-bottom:0;list-style:none;}
#zp26 .btn-primary:hover,#zp26 .btn-primary:focus-visible,#zp26 .btn-primary:active{color:#fff;}
#zp26 .btn-secondary:hover,#zp26 .btn-secondary:focus-visible,#zp26 .btn-secondary:active{color:var(--ink);}
#zp26 .btn:focus-visible{box-shadow:none;}
#zp26 a:hover{text-decoration:none;}