/* Open Sauce Sans, self hosted (SIL OFL 1.1, from @fontsource/open-sauce-sans) */
@font-face{font-family:"Open Sauce Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/open-sauce-sans-latin-400.woff") format("woff");}
@font-face{font-family:"Open Sauce Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/open-sauce-sans-latin-500.woff2") format("woff2");}
@font-face{font-family:"Open Sauce Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/open-sauce-sans-latin-600.woff2") format("woff2");}
@font-face{font-family:"Open Sauce Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/open-sauce-sans-latin-700.woff2") format("woff2");}

:root{
    --magenta:#B0126B;
    --magenta-accent:#C2187A;
    --black:#000000;
    --white:#FFFFFF;

    --bg:#F2EFEE;
    --surface:#FFFFFF;
    --surface-2:#FBF7F9;
    --nav-pill:rgba(255,255,255,.62);
    --ink:#121012;
    --ink-soft:#575054;
    --line:rgba(17,12,15,.10);
    --line-strong:rgba(17,12,15,.16);
    --bar-idle:#E6E1E4;
    --tint:linear-gradient(160deg,#FBF1F7,#F7E9F1);
    --field:#FCFBFC;
    --logo-hover:rgba(255,255,255,.65);

    --nav-h:84px;
    --maxw:1280px;
    --gutter:16px;

    --r-pill:999px;
    --shadow-sm:0 1px 2px rgba(17,12,15,.06), 0 4px 14px rgba(17,12,15,.06);
    --shadow-md:0 2px 6px rgba(17,12,15,.07), 0 14px 40px rgba(17,12,15,.10);
    --shadow-cta:0 2px 8px rgba(176,18,107,.22), 0 12px 30px rgba(176,18,107,.22);

    /* chart depth ramp: deep plum base -> brand magenta -> pale blush top */
    --bar-deep:#48051F;
    --bar-shade:#7D0A4A;
    --bar-soft:#D96AAB;
    --bar-pale:#F7DCEC;
  }

  :root[data-theme="dark"]{
    --bg:#0A0708;
    --surface:#16101300;          /* set below, kept for ordering */
    --surface:#161012;
    --surface-2:#1D1619;
    --nav-pill:rgba(20,14,17,.55);
    --ink:#F7F3F5;
    --ink-soft:#ADA3A8;
    --line:rgba(255,255,255,.12);
    --line-strong:rgba(255,255,255,.2);
    --bar-idle:rgba(255,255,255,.12);
    --tint:linear-gradient(160deg,rgba(194,24,122,.16),rgba(176,18,107,.06));
    --field:rgba(255,255,255,.07);
    --logo-hover:rgba(255,255,255,.06);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
    --shadow-md:0 2px 6px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.45);
    color-scheme:dark;
  }
  html{background:var(--bg);}

  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

  .shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
  .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;}
  :focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px;}

  /* ---------- Nav ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:60;
    padding:0 var(--gutter);
    background:transparent;
    transition:padding-top .6s cubic-bezier(.16,1,.3,1) .05s;
  }
  .nav__inner{
    height:var(--nav-h);
    max-width:var(--maxw);margin-inline:auto;
    display:flex;align-items:center;gap:28px;
    padding-inline:0;
    border:1px solid transparent;border-radius:0;
    background:transparent;
    transition:
      height .6s cubic-bezier(.16,1,.3,1) .05s,
      max-width .6s cubic-bezier(.16,1,.3,1) .05s,
      padding .6s cubic-bezier(.16,1,.3,1) .05s,
      border-radius .6s cubic-bezier(.16,1,.3,1) .05s,
      background .45s ease .05s,
      border-color .45s ease .05s,
      box-shadow .45s ease .05s;
  }
  .nav[data-stuck="true"]{padding-top:12px;}
  .nav[data-stuck="true"] .nav__inner{
    height:64px;
    max-width:1080px;
    padding-inline:14px;
    border-radius:var(--r-pill);
    background:var(--nav-pill);
    backdrop-filter:saturate(160%) blur(20px);
    -webkit-backdrop-filter:saturate(160%) blur(20px);
    border-color:rgba(17,12,15,.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 6px 24px rgba(17,12,15,.06);
  }

  .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
  .brand img{height:34px;width:auto;}
  .brand__name{
    font-family:"Inter Tight",sans-serif;font-weight:800;font-size:20px;
    letter-spacing:-.022em;color:var(--magenta);white-space:nowrap;
  }
  .brand__name span{color:var(--ink);font-weight:700;}

  .nav__links{display:flex;align-items:center;gap:10px;}
  .nav__link{
    position:relative;display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;border-radius:var(--r-pill);
    font-family:"Inter Tight",sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
    color:var(--ink);-webkit-font-smoothing:antialiased;
    transition:background .2s ease,color .2s ease;
  }
  .nav__link:hover,
  .has-menu[aria-expanded="true"]{background:rgba(176,18,107,.06);color:var(--magenta);}
  .nav__link svg{width:10px;height:10px;opacity:.5;transition:transform .2s ease;}
  .nav__actions{margin-left:auto;display:flex;align-items:center;gap:10px;}

  .has-menu[aria-expanded="true"] svg{transform:rotate(180deg);}
  .dropdown{position:relative;}
  .dropdown__panel{
    position:absolute;top:calc(100% + 10px);left:-6px;
    min-width:258px;padding:6px;
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(170%) blur(28px);
    -webkit-backdrop-filter:saturate(170%) blur(28px);
    border:1px solid rgba(17,12,15,.06);border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 40px rgba(17,12,15,.10);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .dropdown.is-open .dropdown__panel{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown__panel a{
    display:block;padding:7px 11px;border-radius:8px;
    font-size:13.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink-soft);
    transition:background .15s ease,color .15s ease;
  }
  .dropdown__panel a:hover,.dropdown__panel a:focus-visible{background:rgba(176,18,107,.06);color:var(--magenta);outline:none;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border-radius:var(--r-pill);white-space:nowrap;
    font-family:"Inter Tight",sans-serif;font-weight:700;letter-spacing:-.012em;
    transition:transform .18s ease,box-shadow .22s ease,background .18s ease,border-color .18s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn--primary{
    background:var(--magenta);color:var(--white);
    padding:13px 25px;font-size:clamp(15px,1.9svh,16.5px);
    box-shadow:var(--shadow-cta);
  }
  .btn--primary:hover{background:var(--magenta-accent);box-shadow:0 4px 12px rgba(176,18,107,.28),0 18px 44px rgba(176,18,107,.28);transform:translateY(-1px);}
  .btn--ghost{
    background:var(--surface);color:var(--ink);
    padding:12px 23px;font-size:clamp(15px,1.9svh,16.5px);
    border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);
  }
  .btn--ghost:hover{border-color:rgba(176,18,107,.38);color:var(--magenta);transform:translateY(-1px);box-shadow:var(--shadow-md);}
  .btn--nav{background:var(--surface);border:1px solid var(--line-strong);padding:9px 10px 9px 9px;font-size:15px;box-shadow:var(--shadow-sm);gap:8px;}
  .btn--nav:hover{border-color:rgba(176,18,107,.38);box-shadow:var(--shadow-md);background:#FFF8FC;}
  .btn--nav .dot{
    width:26px;height:26px;border-radius:50%;flex:0 0 auto;
    background:linear-gradient(140deg,var(--magenta-accent),var(--magenta));
    display:grid;place-items:center;
  }
  .btn--nav .dot svg{width:13px;height:13px;stroke:var(--white);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;isolation:isolate;overflow:hidden;
    min-height:100vh;
    min-height:100svh;
    display:flex;flex-direction:column;
    padding-top:calc(var(--nav-h) + clamp(18px,5.2svh,64px));
  }
  .hero::before{
    content:"";position:absolute;inset:-10% -20% 40%;z-index:-2;
    background:radial-gradient(60% 60% at 50% 22%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%);
    pointer-events:none;
  }
  .hero__content{position:relative;z-index:2;text-align:center;max-width:1040px;margin-inline:auto;flex:0 0 auto;}

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 14px 7px 16px;margin-bottom:clamp(14px,2.4svh,26px);
    border-radius:var(--r-pill);
    background:rgba(176,18,107,.08);
    color:var(--magenta);
    font-family:"Inter Tight",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:-.008em;
    transition:background .18s ease,transform .18s ease;
  }
  .eyebrow:hover{background:rgba(176,18,107,.13);transform:translateY(-1px);}
  .eyebrow svg{width:12px;height:12px;transition:transform .2s ease;}
  .eyebrow:hover svg{transform:translateX(3px);}

  .hero h1{
    margin:0 auto;
    max-width:min(100%,900px);
    font-family:"Inter Tight",sans-serif;
    font-weight:700;
    font-size:clamp(2.1rem,min(5.6vw,8.4svh),4.35rem);
    line-height:1.045;
    letter-spacing:-.038em;
    text-wrap:balance;
  }

  .hero__sub{
    margin:clamp(12px,2.1svh,24px) auto 0;
    max-width:640px;
    font-size:clamp(15.5px,min(1.3vw,2.05svh),18px);
    line-height:1.6;
    color:var(--ink-soft);
    text-wrap:pretty;
  }

  .hero__cta{
    display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
    margin-top:clamp(16px,2.9svh,32px);
  }

  .hero__note{
    margin:clamp(14px,2.4svh,26px) 0 0;
    font-size:clamp(13.5px,1.7svh,15px);color:var(--ink-soft);
  }
  .hero__note strong{color:var(--ink);font-weight:600;}

  .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:clamp(9px,1.4svh,14px);}
  .chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 14px 9px 15px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.7);
    border:1px solid rgba(176,18,107,.22);
    color:var(--magenta);
    font-family:"Inter Tight",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:-.01em;
    transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .2s ease;
  }
  .chip:hover{background:var(--surface);border-color:rgba(176,18,107,.45);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
  .chip svg{width:11px;height:11px;opacity:.7;transition:transform .2s ease;}
  .chip:hover svg{transform:translateX(3px);}

  /* ---------- Growth chart graphic ---------- */
  .chart{
    position:relative;z-index:1;
    width:100%;
    margin-top:clamp(16px,2.6svh,44px);
    margin-bottom:-2px;
    flex:1 1 auto;
    min-height:104px;
    transform:scaleY(var(--s,1));
    transform-origin:bottom center;
    opacity:var(--o,1);
    will-change:transform;
    background:linear-gradient(to top,
      rgba(72,5,31,.55) 0%,
      rgba(92,7,48,.30) 14%,
      rgba(176,18,107,.10) 30%,
      rgba(176,18,107,0) 46%);
    display:flex;align-items:stretch;justify-content:center;
    gap:clamp(3px,.5vw,9px);
    filter:blur(13px);
    pointer-events:none;
  }
  .chart span{
    flex:1 1 0;
    border-radius:16px 16px 0 0;
    background:linear-gradient(to top,
      var(--bar-deep) 0%,
      #5C0730 9%,
      var(--bar-shade) 23%,
      var(--magenta) 41%,
      var(--magenta-accent) 56%,
      #CE4390 68%,
      var(--bar-soft) 79%,
      #EDB4D3 89%,
      var(--bar-pale) 96%,
      rgba(247,220,236,0) 100%);
    transform-origin:bottom;
    transform:scaleY(var(--h));
    animation:grow 1.15s cubic-bezier(.22,.92,.3,1) backwards;
  }
  .chart span:nth-child(1),
  .chart span:nth-child(11){--h:.34;}
  .chart span:nth-child(2),
  .chart span:nth-child(10){--h:.52;}
  .chart span:nth-child(3),
  .chart span:nth-child(9){--h:.68;}
  .chart span:nth-child(4),
  .chart span:nth-child(8){--h:.82;}
  .chart span:nth-child(5),
  .chart span:nth-child(7){--h:.93;}
  .chart span:nth-child(6){--h:1;}
  .chart span:nth-child(1),.chart span:nth-child(11){animation-delay:.34s;}
  .chart span:nth-child(2),.chart span:nth-child(10){animation-delay:.28s;}
  .chart span:nth-child(3),.chart span:nth-child(9){animation-delay:.22s;}
  .chart span:nth-child(4),.chart span:nth-child(8){animation-delay:.16s;}
  .chart span:nth-child(5),.chart span:nth-child(7){animation-delay:.10s;}
  .chart span:nth-child(6){animation-delay:.04s;}
  @keyframes grow{from{transform:scaleY(calc(var(--h) * .12));opacity:0;}to{transform:scaleY(var(--h));opacity:1;}}

  /* ---------- Mobile menu ---------- */
  .burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);place-items:center;}
  .burger span{display:block;width:17px;height:1.7px;background:var(--ink);border-radius:2px;position:relative;transition:transform .22s ease,opacity .18s ease;}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .22s ease;}
  .burger span::before{top:-5.5px;}
  .burger span::after{top:5.5px;}
  body.menu-open .burger span{background:transparent;}
  body.menu-open .burger span::before{transform:translateY(5.5px) rotate(45deg);}
  body.menu-open .burger span::after{transform:translateY(-5.5px) rotate(-45deg);}

  .mobile-menu{
    position:fixed;inset:var(--nav-h) 0 0;z-index:50;
    background:var(--bg);
    padding:22px var(--gutter) 40px;
    overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:translateY(0);}
  .mobile-menu h2{
    font-family:"Inter Tight",sans-serif;font-size:12.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
    margin:0 0 6px;padding-inline:4px;
  }
  .mobile-menu a{
    display:block;padding:12px 4px;border-bottom:1px solid var(--line);
    font-family:"Inter Tight",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.015em;
  }
  .mobile-menu .group{margin-bottom:26px;}
  .mobile-menu .btn{width:100%;margin-top:4px;}

  @media (max-width:980px){
    :root{--nav-h:72px;}
    .nav__links,.nav__actions{display:none;}
    .burger{display:grid;}
    .brand img{height:30px;}
    .brand__name{font-size:18.5px;}
  }
  @media (max-width:560px){
    .hero__cta .btn{width:100%;}
    .chart{gap:5px;min-height:92px;filter:blur(9px);}
    .chart span{border-radius:12px 12px 0 0;}
    .chart span:nth-child(-n+2),
    .chart span:nth-child(n+10){display:none;}
    .chips{gap:8px;}
    .hero__sub{max-width:34ch;}
  }
  /* ---------- Section 2: trust / partners ---------- */
  .trust{padding:clamp(54px,8vw,104px) 0 clamp(40px,6vw,76px);}
  .trust__eyebrow{
    margin:0 0 14px;text-align:center;
    font-family:"Inter Tight",sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  }
  .trust__lead{
    margin:0 auto clamp(26px,3.4vw,40px);max-width:760px;text-align:center;
    font-family:"Inter Tight",sans-serif;font-weight:600;
    font-size:clamp(17px,1.65vw,21px);letter-spacing:-.018em;line-height:1.45;
    color:var(--ink);text-wrap:balance;
  }
  .trust__lead b{color:var(--magenta);font-weight:700;}

  .logos{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:18px;overflow:hidden;
  }
  .logos li{background:var(--bg);}
  .logos span{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    min-height:112px;padding:20px 14px;height:100%;
    text-align:center;
    font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(13.5px,1.05vw,15.5px);letter-spacing:-.015em;line-height:1.3;
    color:#6A6166;
    transition:color .2s ease,background .2s ease;
  }
  .logos span::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--magenta);transform:scaleX(0);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .logos li:hover span{color:var(--magenta);background:var(--logo-hover);}
  .logos li:hover span::after{transform:scaleX(1);}

  /* staggered reveal on scroll */
  .reveal{opacity:0;transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
  .reveal.is-in{opacity:1;transform:none;}

  @media (max-width:900px){
    .logos{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:520px){
    .logos{grid-template-columns:repeat(2,1fr);}
    .logos span{min-height:92px;}
  }

  /* ================= Section 3: services slideshow ================= */
  .sec{padding:clamp(60px,8vw,116px) 0;}
  .sec__head{max-width:740px;margin:0 auto clamp(30px,4vw,50px);text-align:center;}
  .sec__eyebrow{margin:0 0 12px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:13px;letter-spacing:.06em;color:var(--magenta);}
  .sec__title{margin:0;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.85rem,3.5vw,2.8rem);line-height:1.1;letter-spacing:-.032em;text-wrap:balance;}
  .sec__sub{margin:clamp(13px,1.7vw,19px) auto 0;max-width:620px;
    font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.62;color:var(--ink-soft);text-wrap:pretty;}

  /* ---- window chrome ---- */
  .mock{background:var(--surface);border-radius:14px;overflow:hidden;
    box-shadow:0 24px 60px rgba(30,2,18,.32),0 3px 10px rgba(30,2,18,.18);}
  .mock__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;
    background:#FBFAFB;border-bottom:1px solid var(--line);}
  .mock__bar i{width:9px;height:9px;border-radius:50%;background:#E2DDE0;flex:0 0 auto;}
  .mock__bar i:first-child{background:rgba(176,18,107,.38);}
  .mock__label{margin-left:6px;font-size:11.5px;letter-spacing:.02em;color:#8A8187;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
  .mock__body{padding:clamp(13px,1.5vw,18px);}

  /* ---- shared mock atoms ---- */
  .m-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px;}
  .m-h{font-family:"Inter Tight",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:-.015em;}
  .m-s{font-size:11.5px;color:var(--ink-soft);}

  .m-pill{flex:0 0 auto;padding:3.5px 9px;border-radius:999px;font-size:11px;font-weight:700;
    font-family:"Inter Tight",sans-serif;letter-spacing:.01em;white-space:nowrap;
    background:#F0ECEE;color:#6F666B;}
  .m-pill--ok{background:rgba(22,140,90,.12);color:#12734B;}

  @keyframes barGrow{from{width:0}to{width:var(--w)}}

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

  @keyframes floatIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}

  /* quarters */

  /* ring */

  /* funnel */

  @keyframes funIn{from{opacity:0;transform:scaleX(.82)}to{opacity:1;transform:none}}

  /* toggles */

  /* steps */

  /* ================= Section 4: results ================= */
  .case{display:grid;grid-template-columns:1fr 1.08fr;
    border:1px solid var(--line);border-radius:26px;overflow:hidden;
    background:var(--surface);box-shadow:var(--shadow-sm);}
  .case__body{padding:clamp(26px,3.4vw,50px);display:flex;flex-direction:column;justify-content:center;}
  .case__from{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
    font-family:"Inter Tight",sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.07em;color:var(--magenta);}
  .case__from::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--magenta);}
  .case__metric{font-family:"Inter Tight",sans-serif;font-weight:800;line-height:.95;
    font-size:clamp(3.1rem,6.4vw,5.1rem);letter-spacing:-.045em;
    background:linear-gradient(130deg,var(--magenta-accent) 10%,#7D0A4A 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  .case__metric-sub{margin:10px 0 22px;font-family:"Inter Tight",sans-serif;font-weight:600;
    font-size:clamp(16px,1.5vw,19px);letter-spacing:-.02em;line-height:1.35;}
  .case blockquote{margin:0;font-size:15.2px;line-height:1.68;color:var(--ink-soft);}
  .case blockquote p{margin:0;}
  .case__cite{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:20px;
    border-top:1px solid var(--line);}
  .case__cite cite{display:block;font-style:normal;font-family:"Inter Tight",sans-serif;
    font-weight:700;font-size:14.8px;letter-spacing:-.015em;}
  .case__cite small{display:block;margin-top:2px;font-size:13px;color:var(--ink-soft);}
  .av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(140deg,var(--magenta-accent),var(--magenta));color:var(--white);
    font-family:"Inter Tight",sans-serif;font-weight:800;font-size:14.5px;letter-spacing:-.02em;}

  .case__viz{display:grid;place-items:center;padding:clamp(20px,2.8vw,42px);
    background:
      radial-gradient(85% 70% at 18% 10%,rgba(194,24,122,.20),transparent 58%),
      radial-gradient(75% 75% at 90% 92%,rgba(72,5,31,.26),transparent 60%),
      linear-gradient(150deg,#C2187A,#8A0C54 55%,#48051F);}
  .cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);}
  .cmp__col{text-align:center;min-width:0;}
  .cmp__lab{display:block;margin-bottom:11px;font-family:"Inter Tight",sans-serif;font-weight:800;
    font-size:10.5px;letter-spacing:.12em;color:#8A8187;}
  .cmp__col--after .cmp__lab{color:var(--magenta);}
  .cmp__bars{display:flex;align-items:flex-end;justify-content:center;gap:5px;
    height:clamp(96px,11vw,140px);padding:0 4px;}
  .cmp__bars i{flex:1;max-width:26px;border-radius:5px 5px 0 0;height:var(--h);
    background:var(--bar-idle);transform-origin:bottom;}
  .cmp__col--after .cmp__bars i{background:linear-gradient(to top,#8A0C54,var(--magenta-accent));}
  .reveal.is-in .cmp__bars i{animation:cmpGrow .85s cubic-bezier(.16,1,.3,1) backwards;}
  .cmp__bars i:nth-child(2){animation-delay:.09s}
  .cmp__bars i:nth-child(3){animation-delay:.18s}
  .cmp__bars i:nth-child(4){animation-delay:.27s}
  .cmp__col--after .cmp__bars i{animation-delay:.34s}
  .cmp__col--after .cmp__bars i:nth-child(2){animation-delay:.43s}
  .cmp__col--after .cmp__bars i:nth-child(3){animation-delay:.52s}
  .cmp__col--after .cmp__bars i:nth-child(4){animation-delay:.61s}
  @keyframes cmpGrow{from{transform:scaleY(.04);opacity:0}to{transform:scaleY(1);opacity:1}}
  .cmp__cap{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
    font-size:12.2px;line-height:1.45;color:var(--ink-soft);}
  .cmp__col--after .cmp__cap{color:var(--ink);font-weight:600;}
  .cmp__axis{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-size:11.8px;color:var(--ink-soft);}
  .cmp__axis b{font-family:"Inter Tight",sans-serif;font-weight:800;color:#12734B;font-size:13px;}

  /* testimonials: one row that loops sideways; JS appends a hidden copy so -50% is seamless */
  .qloop{--qgap:clamp(12px,1.4vw,18px);margin-top:clamp(12px,1.4vw,18px);overflow:hidden;
    margin-inline:calc(var(--qgap) * -1);padding:4px 0 26px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
  .qgrid{display:flex;align-items:stretch;width:max-content;
    animation:qloop var(--qdur,70s) linear infinite;}
  .qgrid > .qcard{flex:0 0 clamp(290px,30vw,400px);margin-right:var(--qgap);}
  .qloop:hover .qgrid,.qloop:focus-within .qgrid,.qgrid.is-paused{animation-play-state:paused;}
  @keyframes qloop{to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){
    .qloop{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
    .qgrid{animation:none;}
    .qgrid > [data-clone]{display:none;}
  }
  .qcard{margin:0;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:clamp(13px,1.4vw,17px);
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:clamp(22px,2.4vw,30px);
    transition:border-color .35s ease,box-shadow .35s ease,background .35s ease;}
  .qcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:linear-gradient(90deg,var(--magenta-accent),var(--magenta));
    transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1);}
  .qcard::after{content:"\201C";position:absolute;right:16px;top:-14px;
    font:700 104px/1 Georgia,serif;color:rgba(176,18,107,.07);pointer-events:none;}
  .qcard:hover{border-color:rgba(176,18,107,.22);box-shadow:0 16px 40px -26px rgba(138,12,84,.5);}
  .qcard:hover::before{transform:scaleX(1);}
  .qcard__top .av{width:48px;height:48px;font-size:15px;}
  .qcard__top{display:flex;align-items:center;gap:13px;padding-top:clamp(14px,1.5vw,18px);border-top:1px solid var(--line);}
  .qcard__who{min-width:0;flex:1;}

  .qcard blockquote{margin:0;flex:1;}
  .qcard blockquote p{margin:0;font-size:15.4px;line-height:1.7;color:var(--ink);}
  .qcard cite{display:block;font-style:normal;font-family:"Inter Tight",sans-serif;
    font-weight:700;font-size:14.6px;letter-spacing:-.015em;}
  .qcard small{display:block;margin-top:2px;font-size:12.6px;line-height:1.35;color:var(--ink-soft);}

  /* tinted and dark variants so the wall of quotes isn't six white boxes */
  .qcard--tint{background:var(--tint);border-color:rgba(176,18,107,.16);}
  .qcard--mag{background:linear-gradient(150deg,#C2187A,#8A0C54 70%);border-color:transparent;
    box-shadow:0 18px 40px -22px rgba(138,12,84,.7);}
  .qcard--ink{background:linear-gradient(160deg,#2B1020,#140A11 70%);border-color:transparent;
    box-shadow:0 18px 40px -22px rgba(20,10,17,.8);}
  .qcard--mag::after,.qcard--ink::after{color:rgba(255,255,255,.14);}
  .qcard--mag::before,.qcard--ink::before{background:rgba(255,255,255,.65);}
  .qcard--mag blockquote p,.qcard--ink blockquote p{color:rgba(255,255,255,.92);}
  .qcard--mag cite,.qcard--ink cite{color:#fff;}
  .qcard--mag small,.qcard--ink small{color:rgba(255,255,255,.68);}
  .qcard--mag .qcard__top,.qcard--ink .qcard__top{border-top-color:rgba(255,255,255,.2);}

  .qcard--mag .av,.qcard--ink .av{background:rgba(255,255,255,.18);color:#fff;}
  .qcard--mag:hover,.qcard--ink:hover{border-color:transparent;}

  @media (max-width:1000px){
    .case{grid-template-columns:1fr;}
    .case__viz{order:-1;}
  }
  @media (max-width:560px){ .cmp{grid-template-columns:1fr;gap:16px;} }

  /* ================= Section 5: about ================= */
  .ab{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4.4vw,72px);align-items:center;}
  .ab__eyebrow{margin:0 0 12px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:13px;letter-spacing:.06em;color:var(--magenta);}
  .ab h2{margin:0 0 18px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.8rem,3.3vw,2.7rem);line-height:1.12;letter-spacing:-.032em;text-wrap:balance;}
  .ab__intro{margin:0;font-size:clamp(15.5px,1.2vw,17px);line-height:1.68;color:var(--ink-soft);}

  .ab__who{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;}
  .ab__who li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;}
  .ab__who li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;
    border-radius:50%;background:rgba(176,18,107,.13);box-shadow:inset 0 0 0 2px var(--magenta);}
  .ab__whoLabel{margin:26px 0 0;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);}

  .ab__stats{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(18px,2.6vw,38px);
    margin-top:28px;padding-top:24px;border-top:1px solid var(--line);justify-content:start;}
  .ab__stats b{display:block;font-family:"Inter Tight",sans-serif;font-weight:800;
    font-size:clamp(24px,2.4vw,31px);letter-spacing:-.035em;color:var(--magenta);line-height:1;}
  .ab__stats span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink-soft);max-width:130px;}

  /* media column */
  .ab__media{position:relative;}
  .ab__frame{position:relative;border-radius:24px;overflow:hidden;
    aspect-ratio:4/5;
    background:linear-gradient(150deg,#C2187A,#8A0C54 55%,#48051F);
    box-shadow:0 26px 64px rgba(30,2,18,.22);}
  .ab__frame img{width:100%;height:100%;object-fit:cover;display:block;}
  .ab__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(72,5,31,.55),rgba(72,5,31,0) 46%);}
  .ab__media::before{content:"";position:absolute;inset:auto auto -14px -14px;
    width:62%;height:62%;border-radius:24px;z-index:-1;
    background:linear-gradient(140deg,rgba(194,24,122,.18),rgba(176,18,107,.06));}

  .ab__badge{position:absolute;left:clamp(-8px,-.6vw,0px);bottom:clamp(18px,2.4vw,32px);
    background:var(--surface);border-radius:16px;padding:15px 18px;max-width:min(270px,78%);
    box-shadow:0 20px 48px rgba(30,2,18,.26);border:1px solid rgba(255,255,255,.7);}
  .ab__badge b{display:block;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:15px;letter-spacing:-.018em;}
  .ab__badge small{display:block;margin-top:3px;font-size:12.8px;line-height:1.45;color:var(--ink-soft);}
  .ab__badge .av{width:36px;height:36px;font-size:13px;margin-bottom:11px;}

  @media (max-width:1000px){
    .ab{grid-template-columns:1fr;gap:34px;}
    .ab__media{max-width:460px;margin-inline:auto;width:100%;}
    .ab__stats{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:560px){
    .ab__stats{grid-template-columns:1fr 1fr;gap:18px;}
    .ab__badge{position:static;max-width:none;margin-top:14px;box-shadow:var(--shadow-md);}
  }

  /* ================= Section 6: contact ================= */
  .ct{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(24px,3.4vw,56px);
    border:1px solid var(--line);border-radius:26px;overflow:hidden;
    background:var(--surface);box-shadow:var(--shadow-sm);}
  .ct__body{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center;}
  .ct__body h2{margin:0 0 14px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.85rem,3.3vw,2.7rem);line-height:1.1;letter-spacing:-.033em;text-wrap:balance;}
  .ct__body > p{margin:0 0 26px;font-size:clamp(15.5px,1.2vw,17px);line-height:1.65;color:var(--ink-soft);}
  .ct__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
  .ct__list a,.ct__list div{display:flex;align-items:center;gap:13px;padding:13px 14px;
    border-radius:13px;transition:background .2s ease;}
  .ct__list a:hover{background:rgba(176,18,107,.06);}
  .ct__ico{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
    background:rgba(176,18,107,.09);color:var(--magenta);}
  .ct__ico svg{width:17px;height:17px;}
  .ct__list a > span:last-child,.ct__list div > span:last-child{min-width:0;}
  .ct__list b{display:block;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:15px;letter-spacing:-.015em;overflow-wrap:anywhere;}
  .ct__list small{display:block;margin-top:1px;font-size:12.8px;color:var(--ink-soft);}

  .ct__form{padding:clamp(24px,3vw,44px);
    background:
      radial-gradient(85% 70% at 15% 6%,rgba(194,24,122,.16),transparent 58%),
      linear-gradient(155deg,#C2187A,#8A0C54 58%,#48051F);}
  .ct__card{background:var(--surface);border-radius:18px;padding:clamp(20px,2.4vw,28px);
    box-shadow:0 24px 60px rgba(30,2,18,.3);}
  .ct__card h3{margin:0 0 4px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:18px;letter-spacing:-.02em;}
  .ct__card > p{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
  .fld{display:grid;gap:6px;margin-bottom:13px;}
  .fld label{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:12.8px;
    letter-spacing:-.008em;color:var(--ink);}
  .fld input,.fld select,.fld textarea{
    width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:11px;
    background:var(--field);font:inherit;font-size:14.5px;color:var(--ink);
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
  .fld textarea{resize:vertical;min-height:86px;}
  .fld input:focus,.fld select:focus,.fld textarea:focus{
    outline:none;background:var(--surface);border-color:var(--magenta);
    box-shadow:0 0 0 3px rgba(176,18,107,.13);}
  .fld--row{grid-template-columns:1fr 1fr;gap:11px;}
  .fld--row > div{display:grid;gap:6px;}
  .ct__submit{width:100%;margin-top:5px;}
  .ct__fine{margin:12px 0 0;font-size:11.8px;line-height:1.5;color:var(--ink-soft);text-align:center;}

  /* footer */
  .foot{border-top:1px solid var(--line);margin-top:clamp(56px,7vw,96px);}
  .foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,3vw,48px);
    padding:clamp(38px,4.6vw,58px) 0 clamp(26px,3vw,34px);}
  .foot__brand .brand{margin-bottom:15px;}
  .foot__brand img{height:36px;width:auto;}
  .foot__brand p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-soft);max-width:320px;}
  .foot h5{margin:0 0 13px;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);}
  .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
  .foot ul a{font-size:14.5px;color:var(--ink);}
  .foot ul a:hover{color:var(--magenta);}
  .foot__bar{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;
    padding:18px 0 28px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-soft);}
  .foot__bar nav{display:flex;gap:20px;}
  .foot__bar a:hover{color:var(--magenta);}

  @media (max-width:1000px){
    .ct{grid-template-columns:1fr;}
    .foot__grid{grid-template-columns:1fr 1fr;}
    .foot__brand{grid-column:1 / -1;}
  }
  @media (max-width:560px){
    .fld--row{grid-template-columns:1fr;}
    .foot__grid{grid-template-columns:1fr;}
    /* phones: stop three layers of padding eating the field width */
    :root{--gutter:14px;}
    .ct__form{padding:14px;}
    .ct__card{padding:15px;}
    .qcard{padding:19px;}
    .case__body{padding:22px 18px;}
    .case__viz{padding:14px;}
    .mock__body{padding:14px;}
    .ct__list a,.ct__list li > div{padding:13px;}
  }

  /* short windows: compress the stack so the hero still fits one screen */
  @media (max-height:700px){
    .hero{padding-top:calc(var(--nav-h) + clamp(10px,2.6svh,28px));}
    .chart{min-height:64px;margin-top:clamp(10px,1.6svh,22px);}
    .eyebrow{margin-bottom:clamp(9px,1.7svh,16px);}
    .hero__note{margin-top:clamp(9px,1.7svh,16px);}
    .hero__cta{margin-top:clamp(12px,2svh,22px);}
  }

  /* small phones: keep the service chips on one swipeable row */
  @media (max-width:480px){
    .chips{
      flex-wrap:nowrap;justify-content:flex-start;
      overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
      margin-inline:calc(var(--gutter) * -1);
      padding:2px var(--gutter);
    }
    .chips::-webkit-scrollbar{display:none;}
    .chip{flex:0 0 auto;}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
    .reveal{opacity:1;transform:none;}
  }

  /* ================= Momentum: a black band that builds as you scroll ================= */
  .mo{position:relative;overflow:hidden;color:var(--white);
    padding:clamp(80px,9vw,150px) 0 clamp(80px,9vw,150px);
    background:
      radial-gradient(52% 44% at 82% 6%,rgba(194,24,122,.3),transparent 62%),
      radial-gradient(44% 40% at 4% 94%,rgba(226,72,159,.16),transparent 62%),
      #0B080A;}
  .mo__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(30px,4.4vw,80px);align-items:center;}
  .mo__eyebrow{margin:0 0 14px;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.07em;text-transform:uppercase;color:#F6A8D2;}
  .mo h2{margin:0;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.035em;text-wrap:balance;}
  .mo__sub{margin:18px 0 0;max-width:44ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.66;
    color:rgba(255,255,255,.72);}
  .mo__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,28px);
    margin-top:clamp(30px,3.4vw,52px);padding-top:clamp(22px,2.4vw,34px);
    border-top:1px solid rgba(255,255,255,.14);}
  .mo__stat b{display:block;font-family:"Inter Tight",sans-serif;font-weight:800;
    font-size:clamp(26px,3vw,44px);letter-spacing:-.045em;line-height:1;
    background:linear-gradient(120deg,#FF8FC6,#C2187A 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  .mo__stat span{display:block;margin-top:9px;font-size:13.4px;line-height:1.5;color:rgba(255,255,255,.6);}

  .mo__panel{position:relative;border-radius:24px;padding:clamp(20px,2.4vw,34px);
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);}
  .mo__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;}
  .mo__head b{font-family:"Inter Tight",sans-serif;font-weight:700;font-size:15px;letter-spacing:-.02em;}
  .mo__head small{display:block;margin-top:4px;font-size:12.4px;color:rgba(255,255,255,.55);}
  .mo__tag{flex:0 0 auto;padding:5px 11px;border-radius:999px;background:rgba(226,72,159,.18);
    border:1px solid rgba(226,72,159,.34);font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:11.5px;color:#FFC6E2;}

  @media (max-width:1000px){
    .mo__grid{grid-template-columns:minmax(0,1fr);}
    .mo__stats{grid-template-columns:1fr;gap:18px;}
  }

  /* ---------- Session button: a little chart grows inside the pill ---------- */
  .btn--nav{position:relative;overflow:hidden;isolation:isolate;}
  .btn-bars{position:absolute;left:44px;right:11px;bottom:6px;height:9px;
    display:flex;align-items:flex-end;gap:3px;z-index:0;opacity:0;transition:opacity .35s ease;}
  .btn-bars i{flex:1;height:100%;border-radius:2px 2px 1px 1px;
    background:linear-gradient(to top,var(--magenta),rgba(226,72,159,.5));
    transform:scaleY(.06);transform-origin:bottom;
    transition:transform .6s cubic-bezier(.16,1,.3,1) var(--d,0ms);}
  .btn--nav .dot,.btn-label{position:relative;z-index:1;}
  .btn--nav:hover .btn-bars,.btn--nav:focus-visible .btn-bars{opacity:1;}
  .btn--nav:hover .btn-bars i,.btn--nav:focus-visible .btn-bars i{transform:scaleY(var(--h,.5));}
  .btn--nav .dot{display:grid;place-items:center;overflow:hidden;}
  .btn--nav .dot svg{grid-area:1 / 1;
    transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .28s ease;}
  .btn--nav .dot__up{opacity:0;transform:translateY(70%) rotate(-8deg);}
  .btn--nav:hover .dot__cal,.btn--nav:focus-visible .dot__cal{opacity:0;transform:translateY(-70%) rotate(8deg);}
  .btn--nav:hover .dot__up,.btn--nav:focus-visible .dot__up{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    .btn-bars,.btn--nav .dot svg{transition:none;}
  }

  /* ---------- Dark / light switch ---------- */
  .theme-toggle{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
    border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);
    color:var(--ink);cursor:pointer;padding:0;
    transition:border-color .3s ease,background .3s ease,color .3s ease;}
  .theme-toggle:hover{border-color:rgba(176,18,107,.4);color:var(--magenta);}
  .theme-toggle:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;}
  .theme-toggle svg{grid-area:1 / 1;width:17px;height:17px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
  .theme-toggle .moon{opacity:0;transform:rotate(-50deg) scale(.5);}
  :root[data-theme="dark"] .theme-toggle .sun{opacity:0;transform:rotate(50deg) scale(.5);}
  :root[data-theme="dark"] .theme-toggle .moon{opacity:1;transform:none;}
  body.on-dark .nav:not([data-stuck="true"]) .theme-toggle{background:transparent;color:#fff;
    border-color:rgba(255,255,255,.34);}
  @media (max-width:980px){ .nav__actions .theme-toggle{margin-right:4px;} }
  @media (prefers-reduced-motion:reduce){ .theme-toggle svg{transition:none;} }

  /* ---------- Dark theme: places that assumed a light page ---------- */
  :root[data-theme="dark"] .hero::before{
    background:radial-gradient(58% 58% at 50% 20%,rgba(194,24,122,.20),rgba(194,24,122,0) 72%);}
  :root[data-theme="dark"] .hero{background:
    radial-gradient(70% 50% at 50% 0%,rgba(176,18,107,.14),transparent 62%);}
  :root[data-theme="dark"] .nav[data-stuck="true"] .nav__inner{border-color:rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 28px rgba(0,0,0,.28);}
  :root[data-theme="dark"] .brand__name span{color:var(--ink);}
  :root[data-theme="dark"] .mobile-menu{background:var(--surface);}
  :root[data-theme="dark"] .dropdown__panel{background:rgba(20,14,17,.68);border-color:rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 48px rgba(0,0,0,.38);}
  :root[data-theme="dark"] .dropdown__panel a{color:rgba(247,243,245,.72);}
  :root[data-theme="dark"] .dropdown__panel a:hover,
  :root[data-theme="dark"] .dropdown__panel a:focus-visible{background:rgba(240,108,176,.10);color:var(--magenta-ink);}
  :root[data-theme="dark"] .nav__link:hover,
  :root[data-theme="dark"] .has-menu[aria-expanded="true"]{background:rgba(240,108,176,.10);color:#F6A8D2;}
  :root[data-theme="dark"] .btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
  :root[data-theme="dark"] .btn--nav{background:var(--surface);}
  :root[data-theme="dark"] .btn--nav:hover{background:#1E1519;}
  :root[data-theme="dark"] .chip{background:var(--surface);border-color:var(--line-strong);color:var(--ink);}
  :root[data-theme="dark"] .eyebrow{background:rgba(226,72,159,.12);border-color:rgba(226,72,159,.3);color:#F6A8D2;}
  :root[data-theme="dark"] .logos li span{color:var(--ink-soft);}
    :root[data-theme="dark"] .qcard::after{color:rgba(255,255,255,.08);}
  :root[data-theme="dark"] .mock{background:var(--surface);border-color:var(--line-strong);}
  :root[data-theme="dark"] .mock__bar{background:var(--surface-2);border-color:var(--line);}
  :root[data-theme="dark"] .m-pill--ok{background:rgba(18,115,75,.22);color:#6FD3A6;}
  :root[data-theme="dark"] .cmp__axis b{color:#6FD3A6;}

  :root[data-theme="dark"] .nx__fig [stroke]{stroke:rgba(255,255,255,.4);}
  :root[data-theme="dark"] .nx__fig [fill]:not([stroke]){fill:rgba(255,255,255,.26);}
  :root[data-theme="dark"] .nx__no{color:#7C7276;}
  :root[data-theme="dark"] .hero-glow,
  :root[data-theme="dark"] .ab2-hero{background:
    radial-gradient(46% 50% at 82% 16%,rgba(194,24,122,.16),transparent 62%);}
  :root[data-theme="dark"] .hero-bleed::before{background:linear-gradient(180deg,rgba(194,24,122,.12),rgba(194,24,122,.03));}

  :root[data-theme="dark"] .radar .shape--now{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.28);}
  :root[data-theme="dark"] .ab2-figure__badge{background:var(--surface);}
  :root[data-theme="dark"] .ab2-row:hover,
  :root[data-theme="dark"] .nx__row:hover{background:rgba(226,72,159,.06);}

  :root[data-theme="dark"] .btn-bars i{background:linear-gradient(to top,#E2489F,rgba(226,72,159,.5));}
  :root[data-theme="dark"] .theme-toggle{background:var(--surface);}

  /* magenta as *text* is too dark on black; fills and buttons keep the brand value */
  :root[data-theme="dark"]{--magenta-ink:#F06CB0;}
  :root[data-theme="dark"] .brand__name,
  :root[data-theme="dark"] .sec__eyebrow,
  :root[data-theme="dark"] .case__from,
  :root[data-theme="dark"] .cmp__col--after .cmp__lab,
  :root[data-theme="dark"] .ab__eyebrow,
  :root[data-theme="dark"] .ab2-area__no,
  :root[data-theme="dark"] .ab2-area a,
  :root[data-theme="dark"] .ab2-row b,
  :root[data-theme="dark"] .ab2-figure__badge b,
  :root[data-theme="dark"] .svc-hero__eyebrow,
  :root[data-theme="dark"] .svc-hero__proof b,
  :root[data-theme="dark"] .step b,
  :root[data-theme="dark"] .mo__eyebrow,
  :root[data-theme="dark"] .trust__lead b,
  :root[data-theme="dark"] .nx__row:hover .nx__no,
  :root[data-theme="dark"] .foot__bar a:hover,
  :root[data-theme="dark"] .nav__link:hover,
  :root[data-theme="dark"] .more a:hover,
  :root[data-theme="dark"] .inc__list li::before{color:var(--magenta-ink);}
  :root[data-theme="dark"] .svc-hero__eyebrow::before,
  :root[data-theme="dark"] .case__from::before{background:var(--magenta-ink);}

  :root[data-theme="dark"] .m-pill{background:rgba(255,255,255,.1);color:var(--ink);}
  :root[data-theme="dark"] .m-pill--ok{background:rgba(111,211,166,.16);color:#7FE0B5;}

  :root[data-theme="dark"] .case__metric{background:linear-gradient(130deg,#FF8FC6 10%,#C2187A 70%);
    -webkit-background-clip:text;background-clip:text;}
  :root[data-theme="dark"] .ab2-hero h1 em{background:linear-gradient(120deg,#FF8FC6,#C2187A 76%);
    -webkit-background-clip:text;background-clip:text;}
  :root[data-theme="dark"] .qcard--tint cite,
  :root[data-theme="dark"] .qcard--tint blockquote p,
  :root[data-theme="dark"] .qcard--tint small{color:var(--ink);}

  :root[data-theme="dark"] .fld input::placeholder,
  :root[data-theme="dark"] .fld textarea::placeholder{color:rgba(255,255,255,.4);}
  :root[data-theme="dark"] .fld select{color:var(--ink);}
  :root[data-theme="dark"] .fld select option{background:#fff;color:#111;}
  :root[data-theme="dark"] .fld input:focus,
  :root[data-theme="dark"] .fld select:focus,
  :root[data-theme="dark"] .fld textarea:focus{background:rgba(255,255,255,.12);}
  :root[data-theme="dark"] .ct__card{background:rgba(10,7,8,.46);border:1px solid rgba(255,255,255,.14);}

  /* ================= From Lead to Client workshop ================= */
  .ws{position:relative;}
  .ws__panel{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:clamp(26px,3.6vw,64px);align-items:center;
    border:1px solid var(--line);border-radius:26px;background:var(--surface);
    padding:clamp(24px,3.2vw,56px);box-shadow:var(--shadow-sm);}
  .ws__tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 13px;
    border-radius:999px;background:rgba(176,18,107,.1);color:var(--magenta);
    font-family:"Inter Tight",sans-serif;font-weight:700;font-size:12px;letter-spacing:.05em;
    text-transform:uppercase;}
  .ws h2{margin:0 0 16px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.12;letter-spacing:-.032em;text-wrap:balance;}
  .ws p{margin:0 0 20px;font-size:clamp(15.5px,1.2vw,17px);line-height:1.66;color:var(--ink-soft);}
  .ws__modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px;}
  .ws__mode{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--surface-2);}
  .ws__mode b{display:block;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:15px;
    letter-spacing:-.02em;}
  .ws__mode span{display:block;margin-top:5px;font-size:13.4px;line-height:1.5;color:var(--ink-soft);}

  /* ================= FAQ ================= */
  .faq__list{max-width:900px;margin:clamp(30px,3.4vw,50px) auto 0;border-top:1px solid var(--line);}
  .faq__q{border-bottom:1px solid var(--line);}
  .faq__q button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;
    justify-content:space-between;gap:20px;cursor:pointer;padding:clamp(20px,2.2vw,30px) 0;
    font-family:"Inter Tight",sans-serif;font-weight:700;font-size:clamp(16px,1.45vw,20px);
    letter-spacing:-.025em;line-height:1.25;color:var(--ink);transition:color .3s ease;}
  .faq__q button:hover{color:var(--magenta);}
  .faq__q button:focus-visible{outline:2px solid var(--magenta);outline-offset:4px;}
  .faq__pm{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line-strong);transition:background .35s ease,border-color .35s ease,transform .45s ease;}
  .faq__pm::before,.faq__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;
    background:currentColor;transform:translate(-50%,-50%);border-radius:2px;
    transition:transform .45s cubic-bezier(.16,1,.3,1);}
  .faq__pm::after{transform:translate(-50%,-50%) rotate(90deg);}
  .faq__q.open .faq__pm{background:var(--magenta);border-color:var(--magenta);color:#fff;}
  .faq__q.open .faq__pm::after{transform:translate(-50%,-50%) rotate(0deg);}
  .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1);}
  .faq__q.open .faq__a{grid-template-rows:1fr;}
  .faq__a > div{overflow:hidden;}
  .faq__a p{margin:0;padding:0 54px clamp(22px,2.4vw,32px) 0;max-width:70ch;
    font-size:clamp(15px,1.15vw,16.5px);line-height:1.66;color:var(--ink-soft);}

  @media (max-width:900px){
    .ws__panel{grid-template-columns:minmax(0,1fr);}
    .ws__modes{grid-template-columns:1fr;}
    .faq__a p{padding-right:0;}
  }

  :root[data-theme="dark"] .logos li:hover span{color:var(--magenta-ink);}
  :root[data-theme="dark"] .logos span{color:#8D8489;}

  /* a version of the hero chart that climbs left to right */
  .chart--rise span:nth-child(1){--h:.26;animation-delay:.04s;}
  .chart--rise span:nth-child(2){--h:.34;animation-delay:.09s;}
  .chart--rise span:nth-child(3){--h:.3;animation-delay:.14s;}
  .chart--rise span:nth-child(4){--h:.44;animation-delay:.19s;}
  .chart--rise span:nth-child(5){--h:.52;animation-delay:.24s;}
  .chart--rise span:nth-child(6){--h:.48;animation-delay:.29s;}
  .chart--rise span:nth-child(7){--h:.62;animation-delay:.34s;}
  .chart--rise span:nth-child(8){--h:.72;animation-delay:.39s;}
  .chart--rise span:nth-child(9){--h:.8;animation-delay:.44s;}
  .chart--rise span:nth-child(10){--h:.9;animation-delay:.49s;}
  .chart--rise span:nth-child(11){--h:1;animation-delay:.54s;}

  /* ================= From Lead to Client workshop ================= */
  .ws{position:relative;}
  .ws__panel{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:clamp(26px,3.6vw,64px);align-items:center;
    border:1px solid var(--line);border-radius:26px;background:var(--surface);
    padding:clamp(24px,3.2vw,56px);box-shadow:var(--shadow-sm);}
  .ws__tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 13px;
    border-radius:999px;background:rgba(176,18,107,.1);color:var(--magenta);
    font-family:"Inter Tight",sans-serif;font-weight:700;font-size:12px;letter-spacing:.05em;
    text-transform:uppercase;}
  .ws h2{margin:0 0 16px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.12;letter-spacing:-.032em;text-wrap:balance;}
  .ws p{margin:0 0 20px;font-size:clamp(15.5px,1.2vw,17px);line-height:1.66;color:var(--ink-soft);}
  .ws__modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px;}
  .ws__mode{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--surface-2);}
  .ws__mode b{display:block;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:15px;
    letter-spacing:-.02em;}
  .ws__mode span{display:block;margin-top:5px;font-size:13.4px;line-height:1.5;color:var(--ink-soft);}

  /* ================= FAQ ================= */
  .faq__list{max-width:900px;margin:clamp(30px,3.4vw,50px) auto 0;border-top:1px solid var(--line);}
  .faq__q{border-bottom:1px solid var(--line);}
  .faq__q button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;
    justify-content:space-between;gap:20px;cursor:pointer;padding:clamp(20px,2.2vw,30px) 0;
    font-family:"Inter Tight",sans-serif;font-weight:700;font-size:clamp(16px,1.45vw,20px);
    letter-spacing:-.025em;line-height:1.25;color:var(--ink);transition:color .3s ease;}
  .faq__q button:hover{color:var(--magenta);}
  .faq__q button:focus-visible{outline:2px solid var(--magenta);outline-offset:4px;}
  .faq__pm{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line-strong);transition:background .35s ease,border-color .35s ease,transform .45s ease;}
  .faq__pm::before,.faq__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;
    background:currentColor;transform:translate(-50%,-50%);border-radius:2px;
    transition:transform .45s cubic-bezier(.16,1,.3,1);}
  .faq__pm::after{transform:translate(-50%,-50%) rotate(90deg);}
  .faq__q.open .faq__pm{background:var(--magenta);border-color:var(--magenta);color:#fff;}
  .faq__q.open .faq__pm::after{transform:translate(-50%,-50%) rotate(0deg);}
  .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1);}
  .faq__q.open .faq__a{grid-template-rows:1fr;}
  .faq__a > div{overflow:hidden;}
  .faq__a p{margin:0;padding:0 54px clamp(22px,2.4vw,32px) 0;max-width:70ch;
    font-size:clamp(15px,1.15vw,16.5px);line-height:1.66;color:var(--ink-soft);}

  @media (max-width:900px){
    .ws__panel{grid-template-columns:minmax(0,1fr);}
    .ws__modes{grid-template-columns:1fr;}
    .faq__a p{padding-right:0;}
  }

  :root[data-theme="dark"] .logos li:hover span{color:var(--magenta-ink);}
  :root[data-theme="dark"] .logos span{color:#8D8489;}

  /* a version of the hero chart that climbs left to right */
  .chart--rise span:nth-child(1){--h:.26;animation-delay:.04s;}
  .chart--rise span:nth-child(2){--h:.34;animation-delay:.09s;}
  .chart--rise span:nth-child(3){--h:.3;animation-delay:.14s;}
  .chart--rise span:nth-child(4){--h:.44;animation-delay:.19s;}
  .chart--rise span:nth-child(5){--h:.52;animation-delay:.24s;}
  .chart--rise span:nth-child(6){--h:.48;animation-delay:.29s;}
  .chart--rise span:nth-child(7){--h:.62;animation-delay:.34s;}
  .chart--rise span:nth-child(8){--h:.72;animation-delay:.39s;}
  .chart--rise span:nth-child(9){--h:.8;animation-delay:.44s;}
  .chart--rise span:nth-child(10){--h:.9;animation-delay:.49s;}
  .chart--rise span:nth-child(11){--h:1;animation-delay:.54s;}

  /* ================= Assessment invitation ================= */

  .ws__sub{margin:-8px 0 16px;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:14.5px;
    letter-spacing:.02em;color:var(--magenta);}
  .ws__list{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:9px;}
  .ws__list li{position:relative;padding-left:24px;font-size:14.8px;line-height:1.55;color:var(--ink-soft);}
  .ws__list li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
    background:rgba(176,18,107,.16);box-shadow:inset 0 0 0 2px var(--magenta);}

  /* ---------- Home: new type (The Seasons headline, Open Sauce body) ---------- */
  /* The Seasons is licensed; Fraunces (soft) stands in until the files are added. */
  .home{--f-display:"The Seasons","Fraunces",Georgia,serif;--f-sauce:"Open Sauce Sans","Inter",system-ui,sans-serif;}
  .home .nav,.home .nav__link,.home .mobile-menu,.home .mobile-menu a,.home .btn,
  .home .hero,.home .hero .eyebrow,.home .hero .chip{font-family:var(--f-sauce);}
  .home .nav__link{font-weight:500;letter-spacing:0;}
  .home .btn{font-weight:600;letter-spacing:0;}
  .home .hero .eyebrow,.home .hero .chip{font-weight:500;letter-spacing:0;}
  .home .hero h1{
    font-family:var(--f-display);font-weight:400;
    font-variation-settings:"opsz" 144,"SOFT" 100;
    letter-spacing:-.02em;line-height:1.04;
  }

  /* ---------- Shared glass: pills, chips and icon buttons match the Services dropdown ---------- */
  :root{
    --glass-bg:rgba(255,255,255,.62);
    --glass-line:rgba(17,12,15,.08);
    --glass-hl:inset 0 1px 0 rgba(255,255,255,.6);
    --glass-hover:rgba(176,18,107,.06);
    --glass-ico:var(--magenta);
    --glass-ico-bg:rgba(176,18,107,.08);
  }
  :root[data-theme="dark"]{
    --glass-bg:rgba(20,14,17,.55);
    --glass-line:rgba(255,255,255,.09);
    --glass-hl:inset 0 1px 0 rgba(255,255,255,.05);
    --glass-hover:rgba(240,108,176,.10);
    --glass-ico:#F06CB0;
    --glass-ico-bg:rgba(240,108,176,.12);
  }
  .eyebrow,.chip,.btn--ghost,.btn--nav,.theme-toggle,
  :root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .chip,:root[data-theme="dark"] .btn--ghost,
  :root[data-theme="dark"] .btn--nav,:root[data-theme="dark"] .theme-toggle{
    background:var(--glass-bg);
    -webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px);
    border:1px solid var(--glass-line);
    box-shadow:var(--glass-hl);
    color:var(--ink);
  }
  .eyebrow:hover,.chip:hover,.btn--ghost:hover,.btn--nav:hover,.theme-toggle:hover,
  :root[data-theme="dark"] .eyebrow:hover,:root[data-theme="dark"] .chip:hover,:root[data-theme="dark"] .btn--ghost:hover,
  :root[data-theme="dark"] .btn--nav:hover,:root[data-theme="dark"] .theme-toggle:hover{
    background:var(--glass-hover);
    border-color:var(--glass-line);
    box-shadow:var(--glass-hl);
    color:var(--glass-ico);
  }
  .btn--nav,:root[data-theme="dark"] .btn--nav{color:var(--ink);}

  /* icons: one thin pink line style everywhere */
  .eyebrow svg,.chip svg,.btn--ghost svg,.theme-toggle svg{color:var(--glass-ico);opacity:.85;}
  .chip svg,.eyebrow svg{width:10px;height:10px;}
  .btn--ghost svg{stroke-width:1.6;}
  .btn--nav .dot,:root[data-theme="dark"] .btn--nav .dot{background:var(--glass-ico-bg);box-shadow:none;}
  .btn--nav .dot svg{stroke:var(--glass-ico);stroke-width:2;}

  /* eyebrow keeps its pink tint on top of the glass */
  .eyebrow{background:rgba(176,18,107,.08);border-color:rgba(176,18,107,.18);color:var(--magenta);}
  .eyebrow:hover{background:rgba(176,18,107,.13);border-color:rgba(176,18,107,.26);color:var(--magenta);}
  :root[data-theme="dark"] .eyebrow{background:rgba(226,72,159,.12);border-color:rgba(226,72,159,.26);color:#F6A8D2;}
  :root[data-theme="dark"] .eyebrow:hover{background:rgba(226,72,159,.18);border-color:rgba(226,72,159,.36);color:#F6A8D2;}

  /* ---------- Home: hero type carried through every section ---------- */
  body.home{font-family:var(--f-sauce);}
  .home :is(p,li,a,span,b,strong,small,cite,em,label,button,input,select,textarea,h3,h4,h5,h6,div,figcaption,blockquote){font-family:var(--f-sauce);}
  .home :is(h3,h4,h5,h6){letter-spacing:-.01em;}
  .home :is(h1,h2){
    font-family:var(--f-display);font-weight:400;
    font-variation-settings:"opsz" 144,"SOFT" 100;
    letter-spacing:-.02em;
  }
  .home .case__metric,.home .mo__stat b,.home .ab__stats b{
    font-family:var(--f-display);font-weight:400;
    font-variation-settings:"opsz" 144,"SOFT" 100;letter-spacing:-.02em;
  }
  .home .brand__name,.home .brand__name span{font-family:"Inter Tight",sans-serif;}
  .home .mock__label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

  /* ---------- Nav: links centred between logo and actions ---------- */
  @media (min-width:981px){
    .nav__inner{display:grid;grid-template-columns:1fr auto 1fr;}
    .nav__inner > .brand{justify-self:start;}
    .nav__links{justify-self:center;}
    .nav__actions{justify-self:end;margin-left:0;}
  }

  /* hero content sits a little lower under the nav */
  .home .hero{padding-top:calc(var(--nav-h) + clamp(40px,9svh,112px));}
  @media (max-height:700px){ .home .hero{padding-top:calc(var(--nav-h) + clamp(20px,4.5svh,44px));} }

  /* ================= Services: pinned list + product style dashboards ================= */
  .svc{
    --db-stage:radial-gradient(70% 60% at 88% 0%,rgba(176,18,107,.10),transparent 65%),#F5F0F2;
    --db-card:#FFFFFF;--db-ink:#161214;--db-soft:#5D5559;--db-mute:#8D8489;
    --db-line:rgba(17,12,15,.08);--db-track:rgba(17,12,15,.06);
    --db-accent:#B0126B;--db-accent-soft:rgba(176,18,107,.08);--db-accent-2:rgba(176,18,107,.38);
    --db-ok:#17865A;--db-warn:#A86A08;
    --db-shadow:0 1px 2px rgba(17,12,15,.04),0 24px 50px rgba(17,12,15,.08);
    display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(18px,2.4vw,36px);
    border:1px solid var(--db-line);border-radius:24px;background:var(--surface);
    padding:clamp(14px,1.6vw,22px);
  }
  :root[data-theme="dark"] .svc{
    --db-stage:radial-gradient(70% 60% at 88% 0%,rgba(176,18,107,.22),transparent 65%),
               radial-gradient(60% 50% at 0% 100%,rgba(72,5,31,.40),transparent 70%),#0E090B;
    --db-card:#161013;--db-ink:#F4EFF2;--db-soft:rgba(244,239,242,.64);--db-mute:rgba(244,239,242,.42);
    --db-line:rgba(255,255,255,.07);--db-track:rgba(255,255,255,.07);
    --db-accent:#E0559F;--db-accent-soft:rgba(224,85,159,.09);--db-accent-2:rgba(224,85,159,.42);
    --db-ok:#6FCF9F;--db-warn:#E5B567;
    --db-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px rgba(0,0,0,.45);
    background:#100B0D;
  }

  /* ---- list ---- */
  .svc__tabs{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:14px;align-self:center;}
  .svc__tabs::before{content:"";position:absolute;left:4px;top:12px;bottom:12px;width:1px;background:var(--db-line);}
  .svc__ind{position:absolute;left:3px;top:0;width:3px;height:0;border-radius:3px;overflow:hidden;
    background:var(--db-track);pointer-events:none;
    transition:transform .6s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1);}
  .svc__ind i{position:absolute;inset:0;border-radius:3px;background:var(--db-accent);
    transform-origin:top;transform:scaleY(var(--f,1));transition:transform .15s linear;}
  .svc__tab{position:relative;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;
    width:100%;text-align:left;padding:11px 14px;border-radius:12px;border:1px solid transparent;
    transition:background .45s ease,border-color .45s ease;}
  .svc__tab:hover{background:var(--db-track);}
  .svc__tab[aria-selected="true"]{background:var(--db-accent-soft);border-color:var(--db-accent-soft);}
  .svc__ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
    color:var(--db-mute);border:1px solid var(--db-line);
    transition:color .45s ease,background .45s ease,border-color .45s ease;}
  .svc__ico svg{width:16px;height:16px;}
  .svc__tab[aria-selected="true"] .svc__ico{color:var(--db-accent);background:var(--db-accent-soft);border-color:var(--db-accent-2);}
  .svc__tab h3{margin:6px 0 0;font-weight:500;font-size:15px;line-height:1.3;letter-spacing:-.01em;
    color:var(--db-soft);transition:color .45s ease;}
  .svc__tab[aria-selected="true"] h3{color:var(--db-ink);font-weight:600;}
  .svc__tab p{margin:0;font-size:13.5px;line-height:1.55;color:var(--db-soft);
    max-height:0;opacity:0;overflow:hidden;transform:translateY(-4px);
    transition:max-height .55s cubic-bezier(.22,1,.36,1),opacity .4s ease,transform .55s cubic-bezier(.22,1,.36,1),margin .55s cubic-bezier(.22,1,.36,1);}
  .svc__tab[aria-selected="true"] p{max-height:96px;opacity:1;transform:none;margin-top:6px;}

  /* ---- stage ---- */
  .svc__stage{position:relative;display:grid;border-radius:18px;overflow:hidden;
    min-height:clamp(440px,38vw,520px);padding:clamp(22px,3.2vw,48px);
    background:var(--db-stage);border:1px solid var(--db-line);}
  .svc__stage .slide{grid-area:1/1;align-self:center;width:100%;position:relative;
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .22s ease,transform .3s ease,visibility 0s .3s;}
  .svc__stage .slide[hidden]{display:block;}
  .svc__stage .slide.is-active{opacity:1;visibility:visible;transform:none;
    transition:opacity .5s ease .2s,transform .7s cubic-bezier(.22,1,.36,1) .2s,visibility 0s;}

  /* ---- dashboard card ---- */
  .db{background:var(--db-card);border:1px solid var(--db-line);border-radius:16px;overflow:hidden;
    box-shadow:var(--db-shadow);color:var(--db-ink);font-size:13px;line-height:1.4;}
  .db p{margin:0;}
  .db__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 18px;border-bottom:1px solid var(--db-line);}

  .db__body{padding:18px 18px 16px;}
  .db__head{margin-bottom:12px;}
  .db__title{font-size:15px;font-weight:600;letter-spacing:-.01em;}
  .db__sub{font-size:12px;color:var(--db-mute);margin-top:2px;}

  .db__rows{display:grid;}
  .db__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
    padding:10px 0;border-top:1px solid var(--db-line);}
  .db__row:first-child{border-top:0;}
  .db__row b{display:block;font-weight:500;font-size:13px;}
  .db__row small{display:block;font-size:11.5px;color:var(--db-mute);margin-top:1px;}
  .db__row--wide{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);}
  .db__row--fun{grid-template-columns:120px minmax(0,1fr) 36px;}
  .db__row--fun .db__meter{height:8px;}
  .db__row--fun strong{text-align:right;font-weight:600;font-size:13px;}

  .db__who{display:flex;align-items:center;gap:10px;min-width:0;}
  .db__av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    font-size:10px;font-weight:600;letter-spacing:.02em;background:var(--db-track);color:var(--db-soft);}
  .db__st{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--db-soft);white-space:nowrap;}
  .db__st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--db-mute);}
  .db__st--ok::before{background:var(--db-ok);}
  .db__st--warn::before{background:var(--db-warn);}
  .db__st--acc::before{background:var(--db-accent);}

  .db__meter{display:block;height:4px;border-radius:4px;background:var(--db-track);overflow:hidden;}
  .db__meter i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--db-accent);}
  .db__meter--soft i{background:var(--db-accent-2);}
  .db__pair{display:grid;grid-template-columns:auto minmax(0,1fr) 22px;align-items:center;gap:5px 10px;font-size:11px;color:var(--db-mute);}
  .db__pair em{font-style:normal;text-align:right;color:var(--db-soft);}

  .db__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;
    margin-top:6px;padding-top:12px;border-top:1px solid var(--db-line);font-size:12px;color:var(--db-mute);}
  .db__foot b{color:var(--db-ink);font-weight:500;}

  .db__key{display:inline-flex;align-items:center;gap:7px;}
  .db__key i{width:14px;height:4px;border-radius:4px;background:var(--db-accent);}

  /* quarterly plan */

  .db__ring{width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    background:conic-gradient(var(--db-accent) calc(var(--p) * 1%),var(--db-track) 0);}
  .db__ring span{width:40px;height:40px;border-radius:50%;background:var(--db-card);display:grid;place-items:center;
    font-size:14px;font-weight:600;}
  .db__spark{width:120px;height:36px;flex:0 0 auto;overflow:visible;}
  .db__area{fill:var(--db-accent-soft);}
  .db__line{fill:none;stroke:var(--db-accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;}

  /* entrance on activation: quiet and staggered */
  .slide.is-active :is(.db__row,.db__q,.db__kpi,.db__health,.db__foot){animation:dbIn .6s cubic-bezier(.22,1,.36,1) backwards;}
  .slide.is-active :is(.db__row,.db__q,.db__kpi):first-child{animation-delay:.14s;}
  .slide.is-active :is(.db__row,.db__q,.db__kpi):nth-child(2){animation-delay:.2s;}
  .slide.is-active :is(.db__row,.db__q,.db__kpi):nth-child(3){animation-delay:.26s;}
  .slide.is-active :is(.db__row,.db__q,.db__kpi):nth-child(4){animation-delay:.32s;}
  .slide.is-active :is(.db__health,.db__foot){animation-delay:.38s;}
  .slide.is-active .db__meter i{animation:dbGrow 1s cubic-bezier(.22,1,.36,1) .25s backwards;}
  .slide.is-active .db__line{stroke-dasharray:200;animation:dbDraw 1.4s cubic-bezier(.22,1,.36,1) .3s backwards;}
  @keyframes dbIn{from{opacity:0;transform:translateY(6px);}}
  @keyframes dbGrow{from{width:0;}}
  @keyframes dbDraw{from{stroke-dashoffset:200;}}

  /* ---- pinned scroll mode (wide screens, switched on by spb.js) ---- */
  .svc-pin.is-pinned .svc{position:sticky;}

  @media (max-width:1000px){
    .svc{grid-template-columns:1fr;}
    .svc__tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px;padding:0 0 2px;}
    .svc__tabs::-webkit-scrollbar{display:none;}
    .svc__tabs::before,.svc__ind{display:none;}
    .svc__tab{grid-template-columns:1fr;flex:0 0 auto;width:auto;padding:9px 15px;border-color:var(--db-line);border-radius:999px;}
    .svc__tab .svc__ico,.svc__tab p{display:none;}
    .svc__tab h3{margin:0;white-space:nowrap;font-size:14px;}
    .svc__stage{min-height:0;}
  }
  @media (max-width:560px){
    .svc__stage{padding:14px;}
    .db__body{padding:14px;}

    .db__row--wide{grid-template-columns:1fr;}
    .db__row--fun{grid-template-columns:96px minmax(0,1fr) 32px;}

    .db__spark{display:none;}

  }
  @media (prefers-reduced-motion:reduce){
    .svc__ind,.svc__ind i,.svc__stage .slide{transition:none;}
  }

  /* ---------- Services refinement: more room, richer pink, layered cards ---------- */
  .svc{
    --db-active-bg:linear-gradient(135deg,rgba(176,18,107,.10),rgba(176,18,107,.04));
    --db-active-line:rgba(176,18,107,.20);
    --db-call-bg:linear-gradient(150deg,rgba(176,18,107,.10),rgba(176,18,107,.03));
    --db-stage:radial-gradient(75% 65% at 90% 0%,rgba(176,18,107,.16),transparent 65%),
               radial-gradient(55% 50% at 0% 100%,rgba(176,18,107,.08),transparent 70%),#F5EFF2;
    gap:clamp(24px,3.2vw,52px);padding:clamp(16px,1.8vw,24px);
  }
  :root[data-theme="dark"] .svc{
    --db-active-bg:linear-gradient(135deg,rgba(224,85,159,.17),rgba(122,12,72,.12));
    --db-active-line:rgba(224,85,159,.26);
    --db-call-bg:linear-gradient(150deg,rgba(224,85,159,.16),rgba(122,12,72,.10) 70%);
    --db-stage:radial-gradient(75% 65% at 90% 0%,rgba(176,18,107,.32),transparent 65%),
               radial-gradient(60% 55% at 0% 100%,rgba(122,12,72,.30),transparent 70%),#0E080B;
  }

  .svc__tabs{gap:4px;}
  .svc__tab{grid-template-columns:36px 1fr;gap:15px;padding:10px 16px;border-radius:14px;}
  .svc__tab[aria-selected="true"]{background:var(--db-active-bg);border-color:var(--db-active-line);
    box-shadow:0 12px 32px rgba(176,18,107,.10);padding-block:16px;}
  .svc__ico{width:36px;height:36px;border-radius:11px;
    background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);}
  .svc__ico svg{width:17px;height:17px;}
  .svc__tab[aria-selected="true"] .svc__ico{box-shadow:0 0 0 4px var(--db-accent-soft);}
  .svc__tab h3{margin-top:8px;}
  .svc__tab[aria-selected="true"] h3{font-size:16px;}
  .svc__tab[aria-selected="true"] p{max-height:110px;margin-top:7px;}
  .svc__ind{width:2px;left:3.5px;}

  .svc__stage{padding:clamp(24px,2.8vw,38px);}

  /* layered composition: main panel over a row of supporting cards */
  .dbx{display:grid;gap:12px;}
  .dbx__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .db__body{padding:16px 18px 12px;}
  .db__row{padding:8px 0;}
  .db__end{display:flex;align-items:center;gap:12px;}
  .db__tag{font-size:10.5px;color:var(--db-accent);background:var(--db-accent-soft);
    padding:2px 8px;border-radius:999px;white-space:nowrap;}

  .dbc{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;
    padding:14px 15px;border-radius:14px;background:var(--db-card);border:1px solid var(--db-line);
    box-shadow:var(--db-shadow);color:var(--db-ink);}
  .dbc__label{font-size:11px;color:var(--db-mute);}
  .dbc__value{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.15;}
  .dbc__meta{font-size:11px;color:var(--db-soft);}
  .dbc__meta.is-up{color:var(--db-ok);}
  .dbc .db__meter{margin-top:auto;transform:translateY(4px);}
  .dbc--call{background:var(--db-call-bg);border-color:var(--db-active-line);}
  .dbc--call .dbc__label{color:var(--db-accent);font-weight:500;}
  .dbc--call .dbc__label::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
    background:var(--db-accent);margin-right:7px;vertical-align:middle;box-shadow:0 0 10px var(--db-accent);}
  .dbc--call p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--db-ink);}
  .dbc--ring{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;}
  .dbc--ring .db__spark{grid-column:1 / -1;width:100%;height:26px;margin-top:6px;}

  .dbc__bars{display:flex;align-items:flex-end;gap:4px;height:24px;margin-top:auto;transform:translateY(4px);}
  .dbc__bars i{flex:1;height:calc(var(--h) * 100%);border-radius:3px 3px 1px 1px;background:var(--db-accent-2);}
  .dbc__bars i:last-child{background:var(--db-accent);}

  .slide.is-active .dbc{animation:dbIn .6s cubic-bezier(.22,1,.36,1) backwards;}
  .slide.is-active .dbc:nth-child(1){animation-delay:.3s;}
  .slide.is-active .dbc:nth-child(2){animation-delay:.38s;}
  .slide.is-active .dbc:nth-child(3){animation-delay:.46s;}
  .slide.is-active .dbc__bars i{animation:dbRise .8s cubic-bezier(.22,1,.36,1) .45s backwards;transform-origin:bottom;}
  @keyframes dbRise{from{transform:scaleY(0);}}

  @media (max-width:1180px) and (min-width:1001px){
    .db__tag{display:none;}
  }
  @media (max-width:640px){
    .dbx__row{grid-template-columns:1fr 1fr;}
    .dbc--call{grid-column:1 / -1;}
    .db__tag{display:none;}
  }
  .dbc--ring > div small{display:block;}

  /* ---------- Services hybrid: original magenta stage + glass cards ---------- */
  .svc,:root[data-theme="dark"] .svc{
    --db-stage:
      radial-gradient(90% 70% at 15% 8%,rgba(255,140,200,.22),transparent 60%),
      radial-gradient(80% 80% at 92% 95%,rgba(72,5,31,.30),transparent 62%),
      linear-gradient(150deg,#C2187A,#8A0C54 55%,#48051F);
  }
  /* cards sitting on the pink: light glass in light mode, dark glass in dark mode */
  .svc{
    --db-card:rgba(255,255,255,.86);
    --db-glass-edge:rgba(255,255,255,.7);
    --db-call-card:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,236,246,.86));
  }
  :root[data-theme="dark"] .svc{
    --db-card:rgba(22,13,18,.80);
    --db-glass-edge:rgba(255,255,255,.12);
    --db-call-card:linear-gradient(150deg,rgba(84,10,50,.78),rgba(30,10,22,.82));
    --db-accent:#F06CB0;--db-accent-soft:rgba(240,108,176,.13);--db-accent-2:rgba(240,108,176,.45);
  }
  .db,.dbc{
    background:var(--db-card);border-color:var(--db-glass-edge);
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(40,2,22,.30);
  }
  .dbc--call{background:var(--db-call-card);border-color:rgba(240,108,176,.38);}
  .svc__stage{border-color:rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}

  /* active service: close to the original, with a glassy pink edge */
  .svc__tab[aria-selected="true"],
  :root[data-theme="dark"] .svc__tab[aria-selected="true"]{
    background:linear-gradient(135deg,rgba(194,24,122,.16),rgba(194,24,122,.06));
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-color:rgba(226,72,159,.32);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(226,72,159,.06),0 12px 34px rgba(176,18,107,.16);
  }
  .svc__tab[aria-selected="true"] .svc__ico{
    background:linear-gradient(140deg,#C2187A,#B0126B);color:#fff;border-color:transparent;
    box-shadow:0 6px 16px rgba(176,18,107,.35);
  }
  :root[data-theme="dark"] .svc__ind i,.svc__ind i{background:linear-gradient(180deg,#F06CB0,#C2187A);}

  /* ---------- Dashboards: window bar with three dots, brighter type and colour ---------- */
  .db__bar{justify-content:flex-start;gap:8px;padding:12px 16px;}
  .db__dots{display:flex;gap:7px;flex:0 0 auto;}
  .db__dots i{width:10px;height:10px;border-radius:50%;background:#E2DDE0;}
  .db__dots i:first-child{background:rgba(176,18,107,.45);}
  .db__label{margin-left:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
    font-size:12px;letter-spacing:.02em;color:var(--db-mute);}

  :root[data-theme="dark"] .svc{
    --db-card:rgba(22,15,19,.94);
    --db-ink:#FFFFFF;--db-soft:rgba(255,255,255,.80);--db-mute:rgba(255,255,255,.60);
    --db-line:rgba(255,255,255,.10);--db-track:rgba(255,255,255,.10);
    --db-accent:#FF6FB8;--db-accent-soft:rgba(255,111,184,.16);--db-accent-2:rgba(255,111,184,.55);
    --db-ok:#7FE3B5;--db-warn:#FFC86B;
  }
  :root[data-theme="dark"] .db__dots i{background:rgba(255,255,255,.85);}
  :root[data-theme="dark"] .db__dots i:first-child{background:rgba(226,72,159,.5);}
  .svc{--db-ink:#121012;--db-soft:#4A4246;--db-mute:#6F666B;}

  .db{font-size:13.5px;}
  .db__title{font-size:16.5px;font-weight:700;letter-spacing:-.015em;}
  .db__sub{font-size:12.5px;color:var(--db-soft);}
  .db__row b{font-size:14px;font-weight:600;}
  .db__row small{font-size:12px;color:var(--db-soft);}
  .db__row--fun strong{font-size:14px;font-weight:700;}
  .db__st{font-size:12px;font-weight:500;color:var(--db-ink);}
  .db__st::before{width:7px;height:7px;}
  .db__tag{font-size:11px;font-weight:500;}

  .db__meter i{background:linear-gradient(90deg,#FF6FB8,#C2187A);}
  .db__meter--soft i{background:var(--db-accent-2);}
  .db__av{color:var(--db-ink);background:rgba(255,111,184,.18);}
  .svc .db__av{background:var(--db-accent-soft);}

  .dbc__label{font-size:11.5px;color:var(--db-soft);}
  .dbc__value{font-size:23px;font-weight:700;}
  .dbc__meta{font-size:11.5px;}
  .dbc--call .dbc__label{font-weight:600;}
  .dbc--call p{font-size:13px;font-weight:500;}

  /* ---------- Dashboards: graphs, icons and visual elements ---------- */
  .svc{--db-track-2:rgba(17,12,15,.12);}
  :root[data-theme="dark"] .svc{--db-track-2:rgba(255,255,255,.16);}

  .db__ico{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
    background:var(--db-accent-soft);color:var(--db-accent);border:1px solid rgba(255,111,184,.18);}
  .db__ico svg{width:15px;height:15px;}
  .db__av--grad{background:linear-gradient(140deg,#E2489F,#9A1060) !important;color:#fff !important;}

  /* quarter cards: the live quarter is a bright white card */
  .db__qcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .db__qc{display:grid;align-content:start;gap:6px;padding:11px;border-radius:12px;
    background:rgba(255,255,255,.04);border:1px solid var(--db-line);min-width:0;}
  .db__qc h6{display:flex;justify-content:space-between;margin:0 0 2px;font-size:12px;font-weight:700;color:var(--db-accent);}
  .db__qc h6 span{font-weight:600;font-size:10.5px;color:var(--db-mute);}
  .db__qc > span{font-size:11.5px;line-height:1.3;padding:6px 8px;border-radius:7px;
    background:rgba(255,255,255,.06);color:var(--db-soft);}
  .db__qc.is-done h6 span{color:var(--db-ok);}
  .db__qc.is-now{background:#FBF6F9;border-color:transparent;box-shadow:0 10px 26px rgba(194,24,122,.35);}
  .db__qc.is-now h6{color:#B0126B;}
  .db__qc.is-now h6 span{color:#B0126B;}
  .db__qc.is-now > span{background:#161013;color:#fff;}
  .svc .db__qc{background:rgba(17,12,15,.03);}
  .svc .db__qc > span{background:rgba(17,12,15,.05);}
  :root[data-theme="dark"] .svc .db__qc{background:rgba(255,255,255,.04);}
  :root[data-theme="dark"] .svc .db__qc > span{background:rgba(255,255,255,.07);}
  .svc .db__qc.is-now{background:#FBF6F9;}
  .svc .db__qc.is-now > span{background:#161013;color:#fff;}

  /* tapered funnel */
  .db__funnel{display:grid;gap:7px;}
  .db__fn{display:flex;align-items:center;justify-content:space-between;width:var(--w);margin-inline:auto;
    padding:9px 14px;border-radius:9px;color:#fff;font-size:13px;font-weight:600;
    background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
  .db__fn b{font-weight:700;}
  .slide.is-active .db__fn{animation:fnIn .7s cubic-bezier(.22,1,.36,1) backwards;}
  .slide.is-active .db__fn:nth-child(2){animation-delay:.08s;}
  .slide.is-active .db__fn:nth-child(3){animation-delay:.16s;}
  .slide.is-active .db__fn:nth-child(4){animation-delay:.24s;}
  @keyframes fnIn{from{opacity:0;transform:scaleX(.8);}}

  /* toggles */
  .db__row--tog{grid-template-columns:minmax(0,1fr) 28px 34px;}
  .db__row--tog strong{text-align:right;font-size:14px;font-weight:700;}
  .db__tog{position:relative;width:32px;height:18px;border-radius:999px;background:var(--db-track-2);}
  .db__tog::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;
    transition:transform .3s cubic-bezier(.22,1,.36,1);}
  .db__tog.is-on{background:linear-gradient(90deg,#FF6FB8,#C2187A);}
  .db__tog.is-on::after{transform:translateX(14px);}
  .db__row--tog:not(:has(.is-on)) .db__who{opacity:.55;}

  /* week strip */
  .db__week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:6px;}
  .db__day{display:grid;gap:6px;padding:9px 8px;border-radius:10px;border:1px solid var(--db-line);text-align:center;}
  .db__day small{font-size:11px;color:var(--db-mute);}
  .db__day span{font-size:11.5px;font-weight:600;padding:4px 0;border-radius:6px;background:var(--db-track);color:var(--db-soft);}
  .db__day.is-done span{background:var(--db-accent-soft);color:var(--db-accent);}
  .db__day.is-now{background:linear-gradient(160deg,rgba(255,111,184,.22),rgba(194,24,122,.10));border-color:rgba(255,111,184,.4);}
  .db__day.is-now small{color:var(--db-ink);font-weight:600;}
  .db__day.is-now span{background:linear-gradient(90deg,#FF6FB8,#C2187A);color:#fff;}

  /* before and after comparison */
  .db__row--cmp{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);}
  .db__cmp{display:grid;gap:4px;}
  .db__cmpbar{position:relative;display:block;height:7px;width:var(--w);min-width:6px;border-radius:5px;
    background:linear-gradient(90deg,#FF6FB8,#C2187A);}
  .db__cmpbar.is-before{background:var(--db-track-2);}
  .db__cmpbar em{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);
    font-style:normal;font-size:10.5px;color:var(--db-mute);white-space:nowrap;}
  .db__cmp .db__cmpbar.is-before[style*="100%"] em{left:auto;right:6px;color:var(--db-ink);}
  .db__key--grey i{background:var(--db-track-2);}
  .slide.is-active .db__cmpbar{animation:dbGrow .9s cubic-bezier(.22,1,.36,1) .25s backwards;}

  /* card graphics */
  .dbc__donutrow{display:flex;align-items:center;gap:12px;margin-top:4px;}
  .dbc__donut{width:58px;height:58px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;}
  .dbc__donut > span{width:40px;height:40px;border-radius:50%;background:var(--db-card-solid,#161013);display:grid;place-items:center;
    font-size:12.5px;font-weight:700;color:var(--db-ink);}
  .svc{--db-card-solid:#fff;}
  :root[data-theme="dark"] .svc{--db-card-solid:#181015;}
  .dbc__legend{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:11.5px;color:var(--db-soft);}
  .dbc__legend li{display:flex;align-items:center;gap:7px;}
  .dbc__legend i{width:8px;height:8px;border-radius:3px;}

  .dbc__gauge{position:relative;width:100%;max-width:150px;margin:2px 0 2px;}
  .dbc__gauge svg{display:block;width:100%;height:auto;overflow:visible;}
  .dbc__gauge path{fill:none;stroke-width:9;stroke-linecap:round;}
  .g-trk{stroke:var(--db-track-2);}
  .g-val{stroke:var(--db-accent);stroke-dasharray:var(--v) 100;}
  .dbc__gauge b{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:19px;font-weight:700;color:var(--db-ink);}
  .slide.is-active .g-val{animation:gaugeIn 1.2s cubic-bezier(.22,1,.36,1) .3s backwards;}
  @keyframes gaugeIn{from{stroke-dasharray:0 100;}}

  .dbc__segs{display:flex;gap:3px;margin-top:auto;transform:translateY(4px);}
  .dbc__segs i{flex:1;height:6px;border-radius:3px;background:var(--db-track-2);}
  .dbc__segs i.on{background:linear-gradient(90deg,#FF6FB8,#C2187A);}
  .dbc__segs--tools i{height:14px;border-radius:4px;}
  .dbc__segs--tools i.off{background:transparent;border:1px dashed var(--db-track-2);}
  .slide.is-active .dbc__segs i.on{animation:dbIn .5s ease backwards;}

  .dbc__people{display:flex;gap:5px;margin-top:auto;transform:translateY(4px);}
  .dbc__people i{width:14px;height:14px;border-radius:50%;background:var(--db-track-2);}
  .dbc__people i.on{background:linear-gradient(140deg,#FF6FB8,#C2187A);}

  .dbc--split{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;column-gap:10px;}
  .dbc--split > .dbc__matrix{grid-column:2;grid-row:1 / 4;align-self:center;}
  .dbc__matrix{display:grid;grid-template-columns:repeat(3,13px);gap:3px;}
  .dbc__matrix i{width:13px;height:13px;border-radius:3px;background:var(--db-track);}
  .dbc__matrix i.m{background:var(--db-warn);opacity:.85;}
  .dbc__matrix i.hi{background:#FF6FB8;box-shadow:0 0 10px rgba(255,111,184,.6);}

  .db__spark--card{width:100%;height:26px;margin-top:auto;transform:translateY(4px);}

  @media (max-width:640px){
    .db__qcards{grid-template-columns:1fr 1fr;}
    .db__week{grid-template-columns:repeat(5,1fr);gap:4px;}
    .db__row--cmp{grid-template-columns:1fr;}
  }
  :root .svc .db__qc.is-now,:root[data-theme] .svc .db__qc.is-now{background:#FBF6F9;border-color:transparent;}
  :root .svc .db__qc.is-now > span,:root[data-theme] .svc .db__qc.is-now > span{background:#161013;color:#fff;}

  /* ---------- Results case study: same tone as the services showcase ---------- */
  #results .case{
    --db-card:rgba(255,255,255,.86);--db-glass-edge:rgba(255,255,255,.7);
    --db-ink:#121012;--db-soft:#4A4246;--db-mute:#6F666B;
    --db-line:rgba(17,12,15,.08);--db-track:rgba(17,12,15,.06);--db-track-2:rgba(17,12,15,.12);
    --db-accent:#B0126B;--db-accent-soft:rgba(176,18,107,.08);--db-accent-2:rgba(176,18,107,.38);
    --db-ok:#17865A;--db-warn:#A86A08;
    --db-active-line:rgba(176,18,107,.20);
    --db-call-card:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,236,246,.86));
    grid-template-columns:1fr 1.1fr;gap:clamp(18px,2.4vw,36px);
    padding:clamp(16px,1.8vw,24px);border-radius:24px;
    border:1px solid var(--db-line);background:var(--surface);box-shadow:none;overflow:visible;
  }
  :root[data-theme="dark"] #results .case{
    --db-card:rgba(22,15,19,.94);--db-glass-edge:rgba(255,255,255,.12);
    --db-ink:#FFFFFF;--db-soft:rgba(255,255,255,.80);--db-mute:rgba(255,255,255,.60);
    --db-line:rgba(255,255,255,.10);--db-track:rgba(255,255,255,.10);--db-track-2:rgba(255,255,255,.16);
    --db-accent:#FF6FB8;--db-accent-soft:rgba(255,111,184,.16);--db-accent-2:rgba(255,111,184,.55);
    --db-ok:#7FE3B5;--db-warn:#FFC86B;
    --db-active-line:rgba(224,85,159,.26);
    --db-call-card:linear-gradient(150deg,rgba(84,10,50,.78),rgba(30,10,22,.82));
    background:#100B0D;border-color:rgba(255,255,255,.07);
  }

  /* left: quote and metric */
  #results .case__body{padding:clamp(18px,2.6vw,40px) clamp(14px,2vw,30px);}
  #results .case__from{gap:9px;font-weight:600;letter-spacing:.02em;}
  #results .case__from::before{width:7px;height:7px;border-radius:50%;background:var(--db-accent);
    box-shadow:0 0 12px var(--db-accent);}
  #results .case__metric{background:linear-gradient(120deg,#FF8FC6 5%,#E2489F 45%,#C2187A 90%);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  #results .case__metric-sub{color:var(--db-ink);}
  #results .case blockquote{position:relative;padding:18px 20px;border-radius:16px;
    background:linear-gradient(150deg,rgba(194,24,122,.12),rgba(194,24,122,.03));
    border:1px solid var(--db-active-line);color:var(--db-soft);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
  #results .case__cite{border-top:0;padding-top:0;margin-top:20px;}

  /* right: magenta stage with glass cards */
  #results .case__viz{border-radius:18px;padding:clamp(22px,2.8vw,38px);
    background:
      radial-gradient(90% 70% at 15% 8%,rgba(255,140,200,.22),transparent 60%),
      radial-gradient(80% 80% at 92% 95%,rgba(72,5,31,.30),transparent 62%),
      linear-gradient(150deg,#C2187A,#8A0C54 55%,#48051F);
    border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
  #results .case__viz .dbx{width:100%;}

  .dbc__value--sm{font-size:16px !important;line-height:1.3;}
  #results .db__foot{flex-wrap:wrap;}

  @media (max-width:980px){
    #results .case{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    #results .case__viz .dbx__row{grid-template-columns:1fr 1fr;}

  }

  /* performance: these cards are near opaque, so the blur adds cost without being visible */
  .db,.dbc,.svc__tab[aria-selected="true"],:root[data-theme="dark"] .svc__tab[aria-selected="true"],#results .case blockquote{
    -webkit-backdrop-filter:none;backdrop-filter:none;}

  /* ================= Mobile polish: steady nav, smooth scroll, one card system ================= */
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);}
  html,body{overflow-x:hidden;}
  @supports (overflow:clip){ html,body{overflow-x:clip;} }

  /* testimonials outside the home page loop (About) stay a plain grid */
  :not(.qloop) > .qgrid{display:grid;width:auto;animation:none;gap:clamp(12px,1.4vw,18px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
  :not(.qloop) > .qgrid > .qcard{margin-right:0;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

  @media (max-width:980px){
    :root{--nav-h:64px;--gutter:18px;--m-card-r:22px;--m-card-pad:20px;--m-inner-r:14px;}
    html{-webkit-tap-highlight-color:transparent;}

    /* nav: a fixed full width bar that only changes colour when you scroll, so nothing jumps */
    .nav,.nav[data-stuck="true"]{padding:0;transition:none;}
    .nav__inner,.nav[data-stuck="true"] .nav__inner{
      height:var(--nav-h);max-width:none;padding-inline:var(--gutter);gap:10px;
      border:0;border-bottom:1px solid transparent;border-radius:0;
      background:transparent;box-shadow:none;
      -webkit-backdrop-filter:none;backdrop-filter:none;
      transition:background .3s ease,border-color .3s ease;
    }
    .nav[data-stuck="true"] .nav__inner,
    body.menu-open .nav .nav__inner{
      background:color-mix(in srgb,var(--bg) 82%,transparent);
      -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
      border-bottom-color:var(--line);
    }
    :root[data-theme="dark"] .nav[data-stuck="true"] .nav__inner{box-shadow:none;border-bottom-color:var(--line);}

    /* top right: theme switch, then the menu button, both 42px round */
    .nav__actions{display:flex;margin-left:auto;gap:8px;}
    .nav__actions .btn--nav{display:none;}
    .nav__actions .theme-toggle{margin:0;width:42px;height:42px;}
    .burger{margin-left:0;width:42px;height:42px;border-radius:50%;
      background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-hl);}
    .burger span,.burger span::before,.burger span::after{width:16px;}

    /* full screen menu that slides down under the bar */
    .mobile-menu,:root[data-theme="dark"] .mobile-menu{
      inset:var(--nav-h) 0 0;background:var(--bg);
      padding:18px var(--gutter) calc(28px + env(safe-area-inset-bottom));
      overscroll-behavior:contain;transform:translateY(-12px);
      transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1),visibility .28s;
    }
    body.menu-open{overflow:hidden;}
    .mobile-menu .group{margin-bottom:22px;padding:6px;border:1px solid var(--line);
      border-radius:var(--m-card-r);background:var(--surface);}
    .mobile-menu h2,.home .mobile-menu h2{
      font-family:var(--f-sauce,"Inter Tight"),sans-serif;font-weight:600;font-size:11.5px;
      letter-spacing:.12em;margin:10px 12px 4px;color:var(--ink-soft);font-variation-settings:normal;}
    .mobile-menu a:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:13px 12px;border:0;border-radius:12px;font-weight:500;font-size:16px;letter-spacing:-.01em;
      transition:background .2s ease,color .2s ease;}
    .mobile-menu a:not(.btn)::after{content:"";width:7px;height:7px;flex:0 0 auto;margin-right:4px;
      border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);opacity:.35;}
    .mobile-menu a:not(.btn):active{background:var(--glass-hover);color:var(--glass-ico);}
    .mobile-menu .group a + a{background:linear-gradient(var(--line),var(--line)) 12px 0 / calc(100% - 24px) 1px no-repeat;}
    .mobile-menu .btn{display:flex;width:100%;padding:15px 20px;white-space:normal;text-align:center;}
    .mobile-menu .group,.mobile-menu > .btn{opacity:0;transform:translateY(10px);
      transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1);}
    body.menu-open .mobile-menu .group,body.menu-open .mobile-menu > .btn{opacity:1;transform:none;}
    body.menu-open .mobile-menu .group:nth-child(2){transition-delay:.05s;}
    body.menu-open .mobile-menu > .btn{transition-delay:.1s;}

    /* scroll reveal: shorter travel so long pages feel lighter */
    .reveal{transform:translateY(10px);transition-duration:.55s;}

    /* sections: one rhythm everywhere */
    .sec{padding:56px 0;}
    .trust{padding:48px 0 16px;}
    .sec__head{margin-bottom:26px;}
    .sec__title{font-size:clamp(1.75rem,7.4vw,2.1rem);}
    .sec__sub{font-size:15.5px;}

    /* cards: same radius, padding and edge for every top level card */
    .ws__panel,.ct,#results .case,.svc,.mo__panel,.ab__badge{border-radius:var(--m-card-r);}
    .ws__panel{padding:var(--m-card-pad);gap:26px;}
    .ws__mode{border-radius:var(--m-inner-r);}
    .ws__mode{padding:14px 16px;}

    .ws .btn{width:100%;}
    .faq__list{margin-top:8px;}

    /* services: no box inside a box inside a box */
    .svc,:root[data-theme="dark"] .svc{padding:0;border:0;background:none;gap:14px;}
    .svc__tabs{margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 4px;gap:8px;
      scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent);
              mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - 28px),transparent);}
    .svc__tab,.svc__tab[aria-selected="true"]{display:flex;align-items:center;flex:0 0 auto;width:auto;
      grid-template-columns:none;padding:10px 16px;border-radius:999px;scroll-snap-align:start;
      border:1px solid var(--db-line);box-shadow:none;}
    .svc__tab[aria-selected="true"],
    :root[data-theme="dark"] .svc__tab[aria-selected="true"]{background:linear-gradient(140deg,#C2187A,#9A1060);
      border-color:transparent;box-shadow:0 8px 22px rgba(176,18,107,.32);}
    .svc__tab h3,.svc__tab[aria-selected="true"] h3{margin:0;font-size:14px;font-weight:500;white-space:nowrap;}
    .svc__tab[aria-selected="true"] h3{color:#fff;}
    .svc__stage{border-radius:var(--m-card-r);padding:14px;}
    /* only the open service takes up room, so short dashboards don't leave a pink gap */
    .svc__stage .slide[hidden]{display:none;}

    /* results */
    #results .case{padding:12px;gap:8px;}
    #results .case__viz{border-radius:16px;padding:14px;}
    #results .case__body{padding:14px 8px 10px;}
    #results .case blockquote{padding:16px;border-radius:var(--m-inner-r);font-size:15px;}

    /* testimonials: a little narrower so the next card peeks in */
    .qgrid > .qcard{flex-basis:min(82vw,320px);}
    .qcard{border-radius:20px;padding:20px;}
    .qloop{padding-bottom:8px;}

    /* momentum band */
    .mo{padding:64px 0;background:
      radial-gradient(90% 40% at 100% 0%,rgba(194,24,122,.28),transparent 70%),
      radial-gradient(90% 30% at 0% 100%,rgba(226,72,159,.12),transparent 70%),#0B080A;}
    .mo__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;padding-top:20px;}
    .mo__stat b{font-size:26px;}
    .mo__stat span{font-size:12.5px;margin-top:7px;}
    .mo__panel{padding:18px;}

    /* about */
    .ab__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
    .ab__stats span{font-size:12.5px;}
    .ab__frame{border-radius:var(--m-card-r);aspect-ratio:4/4.6;}
    .ab__media::before{display:none;}

    /* contact: list sits flush with the heading instead of indented */
    .ct{gap:0;}
    .ct__body{padding:24px var(--m-card-pad) 18px;}
    .ct__list a,.ct__list div,.ct__list li > div{padding:11px 0;}
    .ct__list a:hover{background:none;}
    .ct__form{padding:12px;}
    .ct__card{border-radius:16px;padding:18px;}

    /* footer: the two link lists side by side */
    .foot{margin-top:24px;}
    .foot__grid{grid-template-columns:1fr 1fr;gap:28px 18px;padding:40px 0 26px;}
    .foot__brand{grid-column:1 / -1;}
    .foot ul a{font-size:13.8px;}
  }

  @media (max-width:560px){
    :root{--gutter:16px;--m-card-pad:18px;}

    /* hero: the long button wraps instead of running off the screen */
    .hero__cta{gap:10px;}
    .hero__cta .btn{white-space:normal;text-align:center;line-height:1.3;padding:15px 22px;}
    .hero__note{max-width:30ch;margin-inline:auto;}
    .chips{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);
              mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);
      scroll-snap-type:x proximity;}
    .chip{scroll-snap-align:start;}

    /* partner names: the odd one out spans the row instead of leaving a hole */
    .logos{border-radius:var(--m-card-r);}
    .logos li:last-child:nth-child(odd){grid-column:1 / -1;}
    .logos span{min-height:78px;font-size:14px;}

    .db__week{gap:4px;}
    .db__day{padding:8px 4px;}
  }
  @media (min-width:521px) and (max-width:900px){
    .logos{grid-template-columns:repeat(2,1fr);}
  }

  /* ================= Content pass: skip link, labels, new home sections, form ================= */
  .skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;
    background:var(--magenta);color:#fff;font-weight:600;font-size:14px;transition:top .2s ease;}
  .skip:focus{top:12px;}

  /* every chart that is not a real client result says so */
  .db__illus{margin-left:auto;flex:0 0 auto;padding:3px 9px;border-radius:999px;white-space:nowrap;
    font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--db-accent,var(--magenta));
    background:var(--db-accent-soft,rgba(176,18,107,.1));border:1px solid var(--db-accent-2,rgba(176,18,107,.3));}
  .mock__bar .db__illus{color:var(--magenta);background:rgba(176,18,107,.1);border-color:rgba(176,18,107,.3);}
  :root[data-theme="dark"] .mock__bar .db__illus{color:#F6A8D2;}

  @media (max-width:1180px) and (min-width:981px){
    /* five links plus the actions: plain flex row instead of the centred grid */
    .nav__inner{display:flex;gap:14px;}
    .nav__links{gap:0;margin-left:auto;}
    .nav__link{padding:8px 9px;}
    .nav__actions{margin-left:6px;}
  }

  /* home services: link through to each service page */
  .svc__more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 16px;border-radius:999px;
    font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
    transition:background .2s ease;}
  .svc__more:hover{background:rgba(255,255,255,.24);}
  .svc__more svg{width:10px;height:10px;}

  /* we stay for the implementation */
  .impl__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center;
    border:1px solid var(--line);border-radius:26px;background:var(--surface);padding:clamp(24px,3.4vw,52px);}
  .impl__head h2{margin:0 0 14px;
    font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.03em;text-wrap:balance;}
  .impl__head p:last-child{margin:0;font-size:clamp(15.5px,1.2vw,17px);line-height:1.66;color:var(--ink-soft);}
  .impl__list{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:impl;}
  .impl__list li{position:relative;display:grid;gap:4px;padding:18px 20px 18px 64px;border-radius:16px;
    border:1px solid var(--line);background:var(--surface-2);counter-increment:impl;}
  .impl__list li::before{content:counter(impl,decimal-leading-zero);position:absolute;left:18px;top:18px;
    width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(140deg,#C2187A,#9A1060);color:#fff;font-weight:700;font-size:12.5px;}
  .impl__list b{font-family:"Inter Tight",sans-serif;font-size:17px;font-weight:700;letter-spacing:-.015em;}
  .impl__list span{font-size:14.6px;line-height:1.5;color:var(--ink-soft);}

  /* how working with SPB starts */
  .journey__list{list-style:none;margin:0 auto;padding:0;max-width:880px;display:grid;gap:10px;}
  .journey__list li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:16px;
    padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:var(--surface);}
  .journey__list li:first-child{border-color:rgba(176,18,107,.36);background:var(--tint);}
  .journey__list b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
    background:rgba(176,18,107,.1);color:var(--magenta);font-weight:700;font-size:14px;}
  :root[data-theme="dark"] .journey__list b{color:var(--magenta-ink);background:rgba(240,108,176,.12);}
  .journey__list span{font-size:clamp(15.5px,1.3vw,17.5px);font-weight:500;line-height:1.4;}
  .journey__cta{margin:26px 0 0;text-align:center;}

  /* form: required marks and inline errors */
  .req{color:var(--magenta);font-weight:700;}
  :root[data-theme="dark"] .req{color:var(--magenta-ink);}
  .fld__err{display:block;min-height:0;font-size:12.5px;line-height:1.4;color:#C0264B;}
  .fld__err:empty{display:none;}
  :root[data-theme="dark"] .fld__err{color:#FF8FA8;}
  .fld input[aria-invalid="true"]{border-color:#C0264B;box-shadow:0 0 0 3px rgba(192,38,75,.14);}
  .ct__privacy{margin:6px 0 0;font-size:11.8px;line-height:1.5;color:var(--ink-soft);text-align:center;}
  .ct__privacy a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}

  /* technology page: partner line under the list */
  .caps__note{margin:22px 0 0;text-align:center;font-size:15px;color:var(--ink-soft);}

  /* legal pages */
  .legal{max-width:760px;margin:0 auto;padding:calc(var(--nav-h) + 48px) 0 24px;}
  .legal h1{margin:0 0 8px;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.03em;}
  .legal__meta{margin:0 0 32px;color:var(--ink-soft);font-size:14px;}
  .legal h2{margin:34px 0 10px;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em;}
  .legal p,.legal li{font-size:16px;line-height:1.7;color:var(--ink-soft);}
  .legal ul{padding-left:20px;}
  .legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}

  @media (max-width:900px){
    .impl__panel{grid-template-columns:minmax(0,1fr);padding:var(--m-card-pad,22px);border-radius:var(--m-card-r,22px);}
    .journey__list li{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:13px 14px;border-radius:14px;}
    .journey__list b{width:36px;height:36px;border-radius:10px;font-size:13px;}
    .journey__cta .btn{width:100%;white-space:normal;}
    .impl__list li{padding:15px 16px 15px 58px;border-radius:14px;}
    .impl__list li::before{left:14px;top:15px;}
  }

  /* the floating nav needs a little more room for the session label */
  @media (min-width:981px){ .nav[data-stuck="true"] .nav__inner{max-width:1220px;} }

  /* workshop: client photo in place of the step list */
  .ws__photo{position:relative;margin:0;height:100%;min-height:420px;border-radius:20px;overflow:hidden;
    background:var(--surface-2);box-shadow:0 24px 60px rgba(30,2,18,.28);}
  .ws__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
    transform:scale(1.04);transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
  .ws.is-in .ws__photo img{transform:none;}
  .ws__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(20,2,12,.55),rgba(20,2,12,0) 42%);}
  .ws__cap{position:absolute;left:16px;bottom:16px;z-index:1;padding:7px 14px;border-radius:999px;
    font-size:13px;font-weight:600;color:#fff;background:rgba(20,10,16,.55);
    border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
  .ws__panel{align-items:stretch;}
  @media (max-width:900px){
    .ws__photo{order:-1;min-height:0;height:auto;aspect-ratio:3/2;border-radius:16px;}
  }

  /* ---------- Momentum: before and after line chart with KPI cards ---------- */
  .mo__panel{background:
      radial-gradient(70% 55% at 100% 0%,rgba(226,72,159,.12),transparent 70%),
      linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    border-color:rgba(255,255,255,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -40px rgba(138,12,84,.5);}
  .mo__head{margin-bottom:14px;}
  .mo__head b{font-size:clamp(15px,1.25vw,17px);}
  .mo__head small{font-size:12.5px;color:rgba(255,255,255,.58);}
  .mo__tag{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;font-size:12px;font-weight:600;
    color:#FFD6EA;background:rgba(226,72,159,.14);border-color:rgba(255,111,184,.38);}
  .mo__tag svg{width:14px;height:14px;color:#FF8FC6;}

  .mo__chart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;}
  .mo__y{grid-row:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
    height:clamp(150px,13vw,190px);font-size:11px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;}
  .mo__y span{line-height:0;}
  .mo__plot{grid-row:1;grid-column:2;position:relative;height:clamp(150px,13vw,190px);}
  .mo__grid-lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;}
  .mo__grid-lines i{display:block;height:1px;background:rgba(255,255,255,.07);}
  .mo__grid-lines i:last-child{background:rgba(255,255,255,.16);}

  .mo__split{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.35);}
  .mo__call{position:absolute;left:50%;top:14%;transform:translateX(-50%);padding:6px 10px;border-radius:8px;
    font-size:11px;line-height:1.3;text-align:center;color:#fff;white-space:nowrap;
    background:#140C11;border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:2;
    opacity:0;transition:opacity .5s ease .9s;}
  .is-in .mo__call{opacity:1;}

  .mo__curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
  .mo__lb,.mo__la,.mo__glow{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
  .mo__lb{stroke:rgba(255,255,255,.42);stroke-width:2;}
  .mo__la{stroke-width:2.6;}
  .mo__glow{stroke-width:9;opacity:.4;filter:blur(5px);}
  .mo__lb,.mo__la,.mo__glow{stroke-dasharray:900;stroke-dashoffset:900;}
  .mo__lb{transition:stroke-dashoffset 1s ease .2s;}
  .mo__la,.mo__glow{transition:stroke-dashoffset 1.3s cubic-bezier(.45,0,.2,1) 1s;}
  .is-in :is(.mo__lb,.mo__la,.mo__glow){stroke-dashoffset:0;}
  .mo__area{opacity:0;transition:opacity 1s ease 1.6s;}
  .is-in .mo__area{opacity:1;}

  .mo__pt{position:absolute;left:var(--x);bottom:var(--y);border-radius:50%;transform:translate(-50%,50%) scale(.3);
    opacity:0;transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.25s + var(--i) * .16s);}
  .mo__pt.is-before{width:7px;height:7px;background:#8E868B;}
  .mo__pt.is-after{width:9px;height:9px;background:#FF8FC6;box-shadow:0 0 0 3px rgba(226,72,159,.28),0 0 14px 2px rgba(255,111,184,.8);}
  .mo__pt.is-after[style*="--i:8"]{width:11px;height:11px;background:#FFE1EF;}
  .is-in .mo__pt{opacity:1;transform:translate(-50%,50%);}

  .mo__x{grid-row:2;grid-column:2;position:relative;height:24px;font-size:11px;color:rgba(255,255,255,.55);}
  .mo__x span{position:absolute;left:var(--x);top:8px;transform:translateX(-50%);}
  .mo__x span:first-child{transform:none;}
  .mo__x span:last-child{transform:translateX(-100%);}
  .mo__phase{grid-row:3;grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px;font-size:11.5px;}
  .mo__phase span{display:flex;align-items:center;gap:10px;}
  .mo__phase span::before,.mo__phase span::after{content:"";flex:1;height:1px;}
  .mo__phase .is-before{color:rgba(255,255,255,.6);}
  .mo__phase .is-before::before,.mo__phase .is-before::after{background:rgba(255,255,255,.22);}
  .mo__phase .is-after{color:#FF8FC6;}
  .mo__phase .is-after::before,.mo__phase .is-after::after{background:linear-gradient(90deg,rgba(226,72,159,.3),#E2489F);}

  .mo__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;}
  .mo__kpi{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:14px;min-width:0;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);}
  .mo__kico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:rgba(226,72,159,.14);color:#FF8FC6;border:1px solid rgba(255,111,184,.2);}
  .mo__kico svg{width:16px;height:16px;}
  .mo__kval{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .mo__kval b{font-family:"Inter Tight",sans-serif;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.02em;color:#fff;}
  .mo__kval em{font-style:normal;font-size:10.5px;font-weight:600;color:#7FE3B5;padding:2px 7px;border-radius:999px;
    background:rgba(127,227,181,.12);}
  .mo__kpi span{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.82);}
  .mo__kpi small{display:block;margin-top:1px;font-size:11px;color:rgba(255,255,255,.45);}

  .mo__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:16px;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.62);}
  .mo__foot span{display:inline-flex;align-items:center;gap:8px;}
  .mo__foot i{width:9px;height:9px;border-radius:3px;background:#8E868B;}
  .mo__foot i.on{background:#E2489F;box-shadow:0 0 8px rgba(226,72,159,.7);}
  .mo__foot small{margin-left:auto;font-size:11px;color:rgba(255,255,255,.42);}

  @media (max-width:640px){
    .mo__kpis{grid-template-columns:1fr;}
    .mo__call{font-size:10px;padding:4px 7px;}
    .mo__x{font-size:10px;}
    .mo__foot small{margin-left:0;}
  }
  @media (prefers-reduced-motion:reduce){
    .mo__lb,.mo__la,.mo__glow,.mo__area,.mo__pt,.mo__call{transition:none;}
  }

  /* ---------- Momentum in light mode: white band, dark type ---------- */
  :root[data-theme="light"] .mo{color:#161214;background:
      radial-gradient(52% 44% at 82% 6%,rgba(194,24,122,.10),transparent 62%),
      radial-gradient(44% 40% at 4% 94%,rgba(226,72,159,.07),transparent 62%),
      #FBF7F9;}
  :root[data-theme="light"] .mo h2{color:#161214;}
  :root[data-theme="light"] .mo__eyebrow{color:#B0126B;}
  :root[data-theme="light"] .mo__sub{color:#4A4246;}
  :root[data-theme="light"] .mo__stats{border-top-color:rgba(17,12,15,.12);}
  :root[data-theme="light"] .mo__stat b{background:linear-gradient(120deg,#E2489F,#8A0C54 75%);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  :root[data-theme="light"] .mo__stat span{color:#5D5559;}

  :root[data-theme="light"] .mo__panel{background:
      radial-gradient(70% 55% at 100% 0%,rgba(226,72,159,.08),transparent 70%),#FFFFFF;
    border-color:rgba(17,12,15,.08);
    box-shadow:0 1px 2px rgba(17,12,15,.04),0 30px 70px -30px rgba(138,12,84,.25);}
  :root[data-theme="light"] .mo__head b{color:#161214;}
  :root[data-theme="light"] .mo__head small{color:#5D5559;}
  :root[data-theme="light"] .mo__tag{color:#B0126B;background:rgba(176,18,107,.07);border-color:rgba(176,18,107,.28);box-shadow:none;}
  :root[data-theme="light"] .mo__tag svg{color:#B0126B;}

  :root[data-theme="light"] .mo__y,
  :root[data-theme="light"] .mo__x{color:#6F666B;}
  :root[data-theme="light"] .mo__grid-lines i{background:rgba(17,12,15,.07);}
  :root[data-theme="light"] .mo__grid-lines i:last-child{background:rgba(17,12,15,.18);}
  :root[data-theme="light"] .mo__split{border-left-color:rgba(17,12,15,.3);}
  :root[data-theme="light"] .mo__call{background:#161214;color:#fff;border-color:#161214;box-shadow:0 8px 20px rgba(17,12,15,.2);}
  :root[data-theme="light"] .mo__lb{stroke:rgba(17,12,15,.35);}
  :root[data-theme="light"] .mo__glow{opacity:.22;}
  :root[data-theme="light"] .mo__pt.is-before{background:#9A9196;}
  :root[data-theme="light"] .mo__pt.is-after{background:#E2489F;box-shadow:0 0 0 3px rgba(226,72,159,.2),0 0 10px rgba(226,72,159,.45);}
  :root[data-theme="light"] .mo__pt.is-after[style*="--i:8"]{background:#C2187A;}
  :root[data-theme="light"] .mo__phase .is-before{color:#6F666B;}
  :root[data-theme="light"] .mo__phase .is-before::before,
  :root[data-theme="light"] .mo__phase .is-before::after{background:rgba(17,12,15,.2);}
  :root[data-theme="light"] .mo__phase .is-after{color:#B0126B;}

  :root[data-theme="light"] .mo__kpi{background:#FBF7F9;border-color:rgba(17,12,15,.08);}
  :root[data-theme="light"] .mo__kico{background:rgba(176,18,107,.08);color:#B0126B;border-color:rgba(176,18,107,.16);}
  :root[data-theme="light"] .mo__kval b{color:#161214;}
  :root[data-theme="light"] .mo__kval em{color:#17865A;background:rgba(23,134,90,.1);}
  :root[data-theme="light"] .mo__kpi span{color:#2A2427;}
  :root[data-theme="light"] .mo__kpi small{color:#6F666B;}

  :root[data-theme="light"] .mo__foot{border-top-color:rgba(17,12,15,.08);color:#4A4246;}
  :root[data-theme="light"] .mo__foot i{background:#9A9196;}
  :root[data-theme="light"] .mo__foot i.on{background:#E2489F;box-shadow:none;}
  :root[data-theme="light"] .mo__foot small{color:#6F666B;}

  /* small screens: long button labels wrap instead of running off the edge */
  @media (max-width:560px){
    .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.25;}
    :is(.svc-hero__cta,.band__cta,.hero__cta,.journey__cta) .btn{width:100%;justify-content:center;}
  }

  /* dashboard window bars: the file label stays on one line and trims, the chip never squashes it onto three lines */
  .db__label,.mock__label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* display face everywhere a headline appears: accent words, the About quote band, legal pages */
  .home :is(h1,h2) em,.home .creed__quote p,.home .creed__quote p em{
    font-family:var(--f-display);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 100;letter-spacing:-.02em;}
  .home .legal :is(h1,h2){font-family:var(--f-display);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 100;letter-spacing:-.02em;}
  .mock,.db,.dbx{min-width:0;max-width:100%;}

  /* ---------- Hero photograph, one per theme, crossfading ---------- */
  .hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;}
  /* tall enough to sit at full size, so no zoom is needed */
  .hero__bg-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 54%;
    opacity:0;transition:opacity 1.1s ease;
  }
  /* the photographs carry the hero now, so they show at full strength */
  :root[data-theme="dark"] .hero__bg-img.is-dark{opacity:1;}
  :root[data-theme="light"] .hero__bg-img.is-light{opacity:1;}

  /* legibility comes from a scrim that is strongest behind the words and
     clears away toward the edges, rather than washing out the whole picture */
  .hero__veil{
    position:absolute;inset:0;
    background:
      radial-gradient(60% 56% at 50% 34%,rgba(248,246,245,.93),rgba(248,246,245,.68) 52%,rgba(248,246,245,0) 86%),
      linear-gradient(180deg,rgba(248,246,245,.74) 0%,rgba(248,246,245,.2) 40%,rgba(248,246,245,0) 66%,rgba(242,239,238,.92) 100%);
    transition:background .9s ease;
  }
  :root[data-theme="dark"] .hero__veil{
    background:
      radial-gradient(60% 56% at 50% 34%,rgba(6,4,5,.9),rgba(6,4,5,.62) 52%,rgba(6,4,5,0) 86%),
      linear-gradient(180deg,rgba(6,4,5,.74) 0%,rgba(6,4,5,.22) 40%,rgba(6,4,5,0) 66%,rgba(10,7,8,.95) 100%);
  }
  /* the old glow sat under a blank hero; with a photograph it muddies it */
  .hero::before{display:none;}


  /* ---------- Thank you, after payment ---------- */
  .ty{max-width:680px;margin-inline:auto;padding:clamp(40px,7vw,90px) 0 clamp(50px,7vw,100px);text-align:center;}
  .ty__tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto clamp(20px,2.6vw,30px);
    border-radius:50%;background:linear-gradient(140deg,var(--magenta-accent),var(--magenta));color:#fff;
    box-shadow:0 18px 40px -22px rgba(138,12,84,.9);
    animation:tyPop .7s cubic-bezier(.34,1.56,.64,1) backwards;}
  .ty__tick svg{width:28px;height:28px;}
  @keyframes tyPop{from{transform:scale(.4);opacity:0;}to{transform:none;opacity:1;}}
  .ty h1{margin:0 0 16px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;letter-spacing:-.034em;text-wrap:balance;}
  .ty__lead{margin:0 auto;max-width:54ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.66;color:var(--ink-soft);}
  .ty__steps{counter-reset:ty;list-style:none;margin:clamp(30px,4vw,54px) 0 0;padding:0;text-align:left;display:grid;gap:12px;}
  .ty__steps li{counter-increment:ty;position:relative;padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px) clamp(18px,2vw,24px) clamp(56px,6vw,70px);
    border:1px solid var(--line);border-radius:18px;background:var(--surface);}
  .ty__steps li::before{content:counter(ty);position:absolute;left:clamp(16px,1.8vw,22px);top:clamp(18px,2vw,24px);
    display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
    background:rgba(176,18,107,.1);color:var(--magenta);
    font-family:"Inter Tight",sans-serif;font-weight:800;font-size:13px;}
  .ty__steps b{display:block;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em;}
  .ty__steps span{display:block;margin-top:5px;font-size:14.4px;line-height:1.55;color:var(--ink-soft);}
  .ty__meanwhile{margin:clamp(30px,3.4vw,46px) 0 14px;font-size:14.6px;color:var(--ink-soft);}
  .ty__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
  .ty__actions .btn{text-decoration:none;}
  .ty__back{margin:clamp(26px,3vw,40px) 0 0;font-size:14px;}
  .ty__back a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;}
  .ty__back a:hover{color:var(--magenta);}

  /* over a photograph the muted sub-line loses its footing, so it takes the
     full ink colour here and leans on the scrim rather than on grey */
  .hero .hero__sub{color:var(--ink);}
  :root[data-theme="dark"] .hero .hero__sub{color:rgba(255,255,255,.94);}
  .hero .hero__note{color:var(--ink);}

  /* ================= The paid session, its own moment ================= */
  .offer{padding-top:clamp(44px,5vw,78px);}
  .offer__panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    gap:clamp(24px,3.4vw,56px);align-items:center;
    border:1px solid var(--line);border-radius:26px;background:var(--surface);
    padding:clamp(24px,3.2vw,52px);box-shadow:var(--shadow-sm);}
  .offer__tag{margin:0 0 12px;font-family:"Inter Tight",sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.07em;text-transform:uppercase;color:var(--magenta);}
  .offer h2{margin:0 0 14px;font-family:"Inter Tight",sans-serif;font-weight:700;
    font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.14;letter-spacing:-.03em;text-wrap:balance;}
  .offer__lead{margin:0 0 20px;font-size:clamp(15px,1.2vw,16.8px);line-height:1.66;color:var(--ink-soft);}
  .offer__list{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
  .offer__list li{position:relative;padding-left:26px;font-size:14.8px;line-height:1.55;}
  .offer__list li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;
    border-radius:50%;background:rgba(176,18,107,.14);box-shadow:inset 0 0 0 2px var(--magenta);}
  .offer__buy{text-align:center;padding:clamp(20px,2.4vw,30px);border-radius:20px;
    background:var(--surface-2);border:1px solid var(--line);}
  .offer__price{margin:0 0 16px;display:flex;align-items:baseline;justify-content:center;gap:8px;}
  .offer__price b{font-family:"Inter Tight",sans-serif;font-weight:800;
    font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.045em;line-height:1;color:var(--magenta);}
  .offer__price span{font-size:14px;color:var(--ink-soft);}
  .offer__buy .btn{width:100%;justify-content:center;}
  .offer__note{margin:14px 0 0;font-size:12.8px;line-height:1.5;color:var(--ink-soft);}
  @media (max-width:860px){
    .offer__panel{grid-template-columns:minmax(0,1fr);}
  }

  /* ===========================================================
     Hero banner, October 2026

     Built to Alysha's banner: a magenta panel on the left, three
     diagonal slashes, then the headline on a flat field. No
     photograph, so it carries dark and light on colour alone.

     The entrance is staged on purpose: the magenta panel wipes in
     first, the slashes follow it across, and only then do the words
     and the colour inside them arrive.
     =========================================================== */
  .hb{
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;align-items:center;
    min-height:100svh;
    padding:calc(var(--nav-h) + clamp(24px,4svh,56px)) 0 clamp(36px,6svh,72px);
    background:var(--hb-field);
    transition:background-color .2s ease;
  }
  .hb h1,.hb__sub,.hb__note,.hb__chips .chip{transition:color .2s ease,border-color .2s ease,background-color .2s ease;}
  .hb__slash{transition:background-color .2s ease;}
  /* the sweep: one skewed bar crossing the hero when the theme flips */
  .hb__sweep{
    position:absolute;top:-16%;bottom:-16%;left:-62%;width:58%;z-index:2;pointer-events:none;
    background:linear-gradient(100deg,rgba(226,72,159,0) 0%,#E2489F 26%,#B0126B 62%,rgba(176,18,107,0) 100%);
    transform:skewX(-9deg) translateX(0);opacity:0;
  }
  .hb--swap .hb__sweep{animation:hbSweep .82s cubic-bezier(.66,0,.3,1);}
  @keyframes hbSweep{
    0%{opacity:1;transform:skewX(-9deg) translateX(0);}
    100%{opacity:1;transform:skewX(-9deg) translateX(290%);}
  }
  :root{--hb-field:#F4F1F0;--hb-ink:#141012;--hb-slash-2:rgba(176,18,107,.28);--hb-slash-3:rgba(176,18,107,.14);}
  :root[data-theme="dark"]{--hb-field:#000000;--hb-ink:#FFFFFF;--hb-slash-2:#5E0E38;--hb-slash-3:#39071F;}

  /* ---- the magenta panel and its stripes ----
     All three are skewed rectangles at the same angle, so the edges stay
     exactly parallel the way they do in the banner. The panel runs off the
     left edge so only its diagonal side shows. */
  .hb__panel,.hb__slash{
    position:absolute;top:-14%;bottom:-14%;z-index:-2;
    transform:skewX(-9deg) scaleX(0);transform-origin:left center;
  }
  .hb__panel{
    left:-20%;width:calc(20% + clamp(196px,24vw,372px));
    background:linear-gradient(158deg,#D92A8C,#B0126B 58%,#8A0C54);
    animation:hbWipe .8s cubic-bezier(.76,0,.24,1) forwards;
  }
  .hb__slash{z-index:-1;animation:hbWipe .72s cubic-bezier(.76,0,.24,1) forwards;}
  .hb__slash--1{left:calc(clamp(196px,24vw,372px) + clamp(12px,1.1vw,18px));
    width:clamp(20px,2.1vw,34px);background:var(--hb-slash-2);animation-delay:.3s;}
  .hb__slash--2{left:calc(clamp(196px,24vw,372px) + clamp(44px,4.2vw,72px));
    width:clamp(12px,1.4vw,22px);background:var(--hb-slash-3);animation-delay:.38s;}
  @keyframes hbWipe{to{transform:skewX(-9deg) scaleX(1);}}

  /* the words on the panel sit upright, outside the skew */
  .hb__dots{
    position:absolute;left:clamp(20px,3vw,52px);top:calc(var(--nav-h) + clamp(10px,1.6vw,26px));
    width:clamp(150px,16vw,260px);height:7px;
    background-image:radial-gradient(circle,rgba(28,6,18,.4) 2.6px,transparent 2.7px);
    background-size:34px 7px;opacity:0;
    animation:hbFade .5s ease .58s forwards;
  }
  .hb__label{
    position:absolute;left:clamp(20px,3vw,52px);top:calc(var(--nav-h) + clamp(34px,4.4vw,64px));margin:0;
    font-family:"Inter Tight",sans-serif;font-weight:800;line-height:1.14;
    font-size:clamp(15px,1.5vw,21px);letter-spacing:.14em;text-transform:uppercase;
    opacity:0;transform:translateX(-14px);
    animation:hbSlideIn .7s cubic-bezier(.16,1,.3,1) .46s forwards;
  }
  .hb__label b{display:block;color:#fff;font-weight:800;font-family:"Inter Tight",sans-serif;}
  .hb__label span{display:block;color:#2B0417;font-family:"Inter Tight",sans-serif;}
  @keyframes hbFade{to{opacity:1;}}
  @keyframes hbSlideIn{to{opacity:1;transform:none;}}

  /* ---- the words ---- */
  .hb__content{
    position:relative;z-index:1;width:100%;
    max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
    padding-left:clamp(240px,31vw,480px);
  }
  .hb h1{
    margin:0 0 clamp(16px,2vw,24px);
    font-family:"Inter Tight",sans-serif;font-weight:800;
    font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.04em;color:var(--hb-ink);
  }
  .hb__line{display:block;overflow:hidden;padding-bottom:.04em;}
  .hb__line > span{display:block;transform:translateY(110%);
    animation:hbRise .85s cubic-bezier(.16,1,.3,1) forwards;}
  .hb__line:nth-child(1) > span{animation-delay:.62s;}
  .hb__line:nth-child(2) > span{animation-delay:.72s;}
  @keyframes hbRise{to{transform:none;}}
  /* the magenta in the headline arrives last, after the line has settled */
  .hb h1,.home .hb h1,.hb h1 em{font-family:"Inter Tight",sans-serif;font-weight:800;
    font-variation-settings:normal;letter-spacing:-.04em;}
  .hb h1 em{font-style:normal;color:var(--hb-ink);
    animation:hbInk .6s ease 1.5s forwards;}
  @keyframes hbInk{to{color:#E2489F;}}

  .hb__sub{
    margin:0 0 clamp(20px,2.4vw,28px);max-width:52ch;
    font-size:clamp(15px,1.2vw,17.5px);line-height:1.66;color:var(--ink-soft);
    opacity:0;animation:hbFade .7s ease 1.02s forwards;
  }
  :root[data-theme="dark"] .hb__sub{color:rgba(255,255,255,.72);}

  .hb__chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(22px,2.6vw,32px);}
  .hb__chips .chip{
    border:1.6px solid var(--magenta);background:transparent;color:var(--hb-ink);
    opacity:0;transform:translateY(10px);
    animation:hbPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:calc(1.14s + var(--i,0) * .07s);
  }
  .hb__chips .chip:hover{background:var(--magenta);color:#fff;}
  @keyframes hbPop{to{opacity:1;transform:none;}}

  .hb__cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.6vw,22px);
    opacity:0;animation:hbFade .7s ease 1.46s forwards;}
  .hb__note{margin:0;font-size:14.4px;line-height:1.5;color:var(--ink-soft);}
  :root[data-theme="dark"] .hb__note{color:rgba(255,255,255,.66);}
  :root[data-theme="dark"] .hb__note strong{color:#fff;}

  @media (max-width:900px){
    /* the panel lies down as a band, the words fill the rest of the screen */
    .hb{display:flex;align-items:center;min-height:100svh;
      padding-top:calc(var(--nav-h) + clamp(96px,26vw,150px));padding-bottom:clamp(40px,12vw,76px);}
    .hb__panel{left:-8%;right:-8%;width:auto;top:0;bottom:auto;
      height:calc(var(--nav-h) + clamp(78px,20vw,116px));
      clip-path:polygon(0 0,100% 0,100% calc(100% - clamp(18px,5vw,34px)),0 100%);
      transform:scaleY(0);transform-origin:top;animation-name:hbPanelDown;}
    @keyframes hbPanelDown{to{transform:scaleY(1);}}
    .hb__slash{top:0;bottom:auto;height:calc(var(--nav-h) + clamp(78px,20vw,116px));
      width:clamp(18px,5vw,30px);transform:skewX(-9deg) scaleX(0);}
    .hb__slash--1{left:60%;} .hb__slash--2{left:73%;}
    .hb__dots{display:none;}
    .hb__label{left:var(--gutter);top:calc(var(--nav-h) + clamp(10px,2.6vw,18px));bottom:auto;
      font-size:clamp(13px,3.2vw,16px);letter-spacing:.11em;}
    .hb__content{padding-left:var(--gutter);padding-top:0;}
    .hb h1{font-size:clamp(2.1rem,8.6vw,3.2rem);}
    .hb__sub{max-width:none;margin-bottom:clamp(18px,4.4vw,26px);}
    .hb__chips{gap:8px;margin-bottom:clamp(20px,5vw,28px);}
    .hb__chips .chip{font-size:13.6px;padding:8px 13px;}
    .hb__cta{flex-direction:column;align-items:stretch;gap:12px;}
    .hb__cta .btn{width:100%;justify-content:center;}
    .hb__note{text-align:center;}
    .hb__sweep{top:0;bottom:0;}
  }

  @media (prefers-reduced-motion:reduce){
    .hb__panel,.hb__slash,.hb__dots,.hb__label,.hb__line > span,.hb h1 em,
    .hb__sub,.hb__chips .chip,.hb__cta,.hb__sweep{animation:none;opacity:1;transform:none;}
    .hb__sweep{display:none;}
    .hb__panel{transform:scaleX(1);}
    .hb__slash{transform:skewX(-14deg);}
    .hb h1 em{color:#E2489F;}
  }

  /* the brand sits over the magenta panel on the home page, so it reverses
     out until the nav forms its pill */
  body.home .nav:not([data-stuck="true"]) .brand__name,
  body.home .nav:not([data-stuck="true"]) .brand__name span{color:#fff;}
  body.home .nav:not([data-stuck="true"]) .brand img{filter:brightness(0) invert(1);}
  body.home .nav .brand img{transition:filter .4s ease;}
  @media (max-width:900px){
    .hb__dots{display:none;}
  }

  /* the banner's chips are outlines, not filled pills, in both themes */
  .hb .hb__chips .chip,
  :root[data-theme="dark"] .hb .hb__chips .chip,
  body.home .hb .hb__chips .chip{
    background:transparent;border:1.6px solid var(--magenta);color:var(--hb-ink);
    font-family:"Inter Tight",sans-serif;font-weight:600;
  }
  .hb .hb__chips .chip:hover,
  :root[data-theme="dark"] .hb .hb__chips .chip:hover{
    background:var(--magenta);border-color:var(--magenta);color:#fff;transform:none;
  }