@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#05172f;
  --recruit:#b7a9d8;
  --dsp:#3dc2b1;
  --track:#f06f68;
  --accounts:#5c92c7;
  --pay-top:#4c5055;
  --pay-bottom:#d1d7de;
  --shell:1320px;
  --ease:cubic-bezier(.2,.75,.25,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--navy);background:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
.section-shell,.header-shell{width:min(var(--shell),calc(100% - 64px));margin-inline:auto}
.screen-section{min-height:100svh;position:relative;overflow:hidden}

.site-header{position:fixed;inset:20px 0 auto;z-index:100;pointer-events:none}
.header-shell{display:grid;grid-template-columns:250px minmax(0,1fr) 220px;gap:32px;align-items:center;position:relative}
.brand-lozenge,.suite-lozenge,.contact-lozenge{min-height:56px;border-radius:14px;box-shadow:0 12px 34px rgba(5,23,47,.08);pointer-events:auto}
.brand-lozenge{display:flex;align-items:center;justify-content:center;background:var(--navy);padding:11px 24px}
.brand-lozenge img{width:172px;height:auto}
.suite-lozenge{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(140%);padding:10px 24px}
.suite-lozenge img{width:min(100%,650px);height:auto}
.contact-lozenge{display:flex;align-items:center;justify-content:center;gap:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(140%);padding:8px 16px}
.icon-link{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f3f5f7;transition:.25s ease}
.icon-link:hover{background:var(--navy);transform:translateY(-2px)}
.icon-link svg{width:18px;height:18px;fill:#7b858f;transition:.25s ease}
.icon-link:hover svg{fill:#fff}
.menu-button,.mobile-menu{display:none}

.hero{background:linear-gradient(180deg,#f5f7f9 0%,#eef2f5 100%)}
.hero-grid{min-height:100svh;display:grid;grid-template-columns:minmax(0,.96fr) minmax(420px,1.04fr);gap:46px;align-items:center;padding-top:90px}
.hero-copy{position:relative;z-index:3;max-width:650px}
.eyebrow{margin:0 0 24px;font-size:12px;font-weight:800;letter-spacing:.22em}
.hero h1{margin:0;font-size:clamp(60px,6.3vw,104px);line-height:.9;letter-spacing:-.065em}
.hero h1 span{font-weight:400}
.hero-lede{margin:28px 0 0;max-width:620px;font-size:clamp(18px,1.35vw,24px);line-height:1.48;color:#53657a}
.text-link{display:inline-flex;gap:12px;align-items:center;margin-top:32px;padding-bottom:5px;border-bottom:1px solid var(--navy);font-size:14px;font-weight:700}
.hero-visual{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;position:relative;min-height:620px}
.hero-visual>img{position:relative;z-index:3;max-height:82svh;width:auto;object-fit:contain;filter:drop-shadow(0 28px 34px rgba(5,23,47,.08));animation:heroFloat 7s ease-in-out infinite}
.hero-rings{position:absolute;z-index:1;width:78%;aspect-ratio:1;right:-4%;top:18%;border:1px solid rgba(5,23,47,.06);border-radius:50%}
.hero-rings i{position:absolute;border:1px solid rgba(5,23,47,.055);border-radius:50%}.hero-rings i:nth-child(1){inset:12%}.hero-rings i:nth-child(2){inset:24%}.hero-rings i:nth-child(3){inset:36%}.hero-rings i:nth-child(4){inset:48%}

.product-section{display:flex;align-items:center;padding:100px 0 50px;color:#fff}
.product-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;min-height:calc(100svh - 80px);position:relative;z-index:2}
.product-copy{max-width:620px}
.product-copy h2{margin:30px 0 0;font-size:clamp(22px,1.8vw,31px);line-height:1.38;font-weight:400;letter-spacing:-.025em}
.product-copy p{margin:18px 0 0;font-size:17px;line-height:1.48;color:rgba(255,255,255,.9)}
.product-copy ul{margin:28px 0 0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.38;color:rgba(255,255,255,.94)}
.product-mark{display:flex;align-items:baseline;gap:0;font-family:"Posterama 2001",Posterama,Inter,Arial,sans-serif;font-weight:800;font-size:clamp(38px,3.7vw,62px);line-height:.95;letter-spacing:-.055em}
.product-mark .mark-360{font-weight:800}.product-mark sup{font-size:.26em;position:relative;top:-1.7em;margin-left:2px}
.mark-recruit .mark-360{color:var(--navy)}.mark-recruit>span:last-child{color:#fff}
.mark-dsp .mark-360{color:#fff}.mark-dsp>span:last-child{color:var(--navy)}
.mark-tms .mark-360{color:#fff}.mark-tms>span:last-child{color:var(--dsp)}
.mark-track .mark-360{color:var(--navy)}.mark-track>span:last-child{color:#fff}
.mark-accounts .mark-360{color:var(--navy)}.mark-accounts>span:last-child{color:#fff}
.mark-pay .mark-360{color:#d7dde5}.mark-pay>span:last-child{color:#fff}
.product-graphic{display:flex;align-items:center;justify-content:center;min-height:560px}
.product-graphic img{width:min(100%,650px);max-height:76svh;object-fit:contain;filter:drop-shadow(0 24px 36px rgba(5,23,47,.14));transform:translateZ(0)}
.product-recruit{background:var(--recruit)}.product-dsp{background:var(--dsp)}.product-tms{background:#071a34}.product-track{background:var(--track)}.product-accounts{background:var(--accounts)}.product-pay{background:linear-gradient(180deg,var(--pay-top),var(--pay-bottom))}
.section-rings{position:absolute;width:58vw;aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:50%;z-index:1;pointer-events:none}
.section-rings i{position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%}.section-rings i:nth-child(1){inset:12%}.section-rings i:nth-child(2){inset:24%}.section-rings i:nth-child(3){inset:36%}
.rings-right{right:-26vw;bottom:-30vw}.rings-left{left:-28vw;bottom:-32vw}

.ecosystem{background:#f4f6f8;color:var(--navy);display:flex;align-items:center}
.ecosystem-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr);gap:70px;align-items:center;min-height:100svh;padding-top:80px}
.ecosystem-copy h2{margin:0;font-size:clamp(58px,5.9vw,94px);line-height:.91;letter-spacing:-.065em}
.ecosystem-copy>p:not(.eyebrow){max-width:520px;margin:28px 0 0;font-size:20px;line-height:1.5;color:#596b80}
.primary-button{display:inline-flex;margin-top:30px;min-height:52px;align-items:center;padding:0 24px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;box-shadow:0 12px 28px rgba(5,23,47,.14)}
.orbit-wrap{display:flex;justify-content:center;align-items:center}
.orbit{width:min(640px,76vw);aspect-ratio:1;border:1px solid rgba(5,23,47,.1);border-radius:50%;position:relative;animation:orbitSpin 30s linear infinite}
.orbit::before{content:"";position:absolute;inset:14%;border:1px solid rgba(5,23,47,.06);border-radius:50%}
.orbit-core{position:absolute;inset:29%;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:clamp(52px,6vw,86px);font-weight:800;animation:counterSpin 30s linear infinite}
.orbit-core sup{font-size:.28em;vertical-align:top;margin-left:2px}
.orbit-item{position:absolute;font-size:14px;font-weight:800;animation:counterSpin 30s linear infinite}
.oi-1{left:9%;top:66%}.oi-2{left:11%;top:24%}.oi-3{left:50%;top:-1%;transform:translateX(-50%)}.oi-4{right:2%;top:43%}.oi-5{right:7%;bottom:12%}.oi-6{left:43%;bottom:-1%}

.contact-section{background:#fff;padding:120px 0 110px}
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(460px,1.2fr);gap:90px;align-items:start}
.contact-copy h2{margin:0;font-size:clamp(52px,5vw,80px);line-height:.94;letter-spacing:-.055em}
.contact-copy>p:not(.eyebrow){margin:24px 0 0;max-width:500px;font-size:19px;line-height:1.5;color:#607086}
.contact-direct{margin-top:30px;display:grid;gap:8px}.contact-direct a{font-weight:700}.contact-direct span{color:#7b8796;font-size:14px}
.contact-form{padding:30px;border-radius:26px;background:#f4f6f8;display:grid;gap:18px;box-shadow:0 24px 50px rgba(5,23,47,.06)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form label{display:grid;gap:8px}.contact-form label>span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#647285}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid #dfe5eb;border-radius:13px;background:#fff;padding:14px 15px;color:var(--navy);outline:none;transition:.2s}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#8b9aad;box-shadow:0 0 0 3px rgba(5,23,47,.05)}
.contact-form textarea{resize:vertical;min-height:130px}.contact-form button{justify-self:start;border:0;border-radius:999px;background:var(--navy);color:#fff;padding:15px 24px;font-weight:700;cursor:pointer}.contact-form button:hover{transform:translateY(-1px)}
.form-success{padding:13px 15px;border-radius:12px;background:#dff5ef;color:#16695f;font-weight:700}.honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.site-footer{background:var(--navy);color:#fff;padding:30px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer-inner img{width:150px}.footer-inner span{font-size:13px;opacity:.8}

.reveal-left,.reveal-right{opacity:0;transition:opacity .85s var(--ease),transform .85s var(--ease)}.reveal-left{transform:translateX(-42px)}.reveal-right{transform:translateX(42px)}.reveal-left.in,.reveal-right.in{opacity:1;transform:none}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes counterSpin{to{transform:rotate(-360deg)}}

@media (max-width:1180px){
  :root{--shell:1040px}.header-shell{grid-template-columns:220px minmax(0,1fr) 170px;gap:20px}.brand-lozenge img{width:158px}.contact-lozenge{gap:10px}.hero-grid{grid-template-columns:1fr 1fr}.product-grid{gap:46px}.product-copy ul{font-size:14px}.contact-grid{gap:52px}
}
@media (max-width:900px){
  .section-shell,.header-shell{width:min(100% - 36px,760px)}.header-shell{grid-template-columns:1fr auto}.suite-lozenge,.contact-lozenge{display:none}.brand-lozenge{justify-self:start;width:200px}.menu-button{display:block;pointer-events:auto;border:0;background:rgba(255,255,255,.9);border-radius:999px;padding:12px 18px;font-weight:700;color:var(--navy);box-shadow:0 10px 25px rgba(5,23,47,.08)}.mobile-menu{pointer-events:auto;position:absolute;top:68px;left:0;right:0;background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 44px rgba(5,23,47,.12);grid-column:1/-1;grid-template-columns:1fr 1fr;gap:10px}.site-header.open .mobile-menu{display:grid}.mobile-menu a{padding:10px 8px;font-weight:700}
  .hero-grid,.product-grid,.ecosystem-grid,.contact-grid{grid-template-columns:1fr}.hero-grid{padding-top:135px}.hero-copy{padding-top:35px}.hero-visual{min-height:480px}.hero-visual>img{max-height:56svh}.product-section{padding-top:120px}.product-grid{min-height:auto;padding:30px 0 60px;gap:24px}.alternate .product-graphic{order:2}.alternate .product-copy{order:1}.product-graphic{min-height:380px}.product-graphic img{max-height:52svh}.ecosystem-grid{padding:120px 0 70px}.orbit{width:min(600px,92vw)}.contact-grid{gap:40px}.footer-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  .section-shell,.header-shell{width:calc(100% - 28px)}.site-header{top:12px}.brand-lozenge{width:178px;min-height:52px}.brand-lozenge img{width:145px}.hero h1{font-size:50px}.hero-lede{font-size:18px}.product-copy h2{font-size:22px}.product-copy ul{font-size:13px;gap:7px}.product-mark{font-size:42px}.product-graphic{min-height:300px}.ecosystem-copy h2{font-size:52px}.field-row{grid-template-columns:1fr}.contact-form{padding:22px}.contact-section{padding:92px 0}.orbit-item{font-size:11px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.reveal-left,.reveal-right{opacity:1;transform:none}}

.footer-contact{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px}
.footer-contact a,.footer-phone{display:inline-flex;align-items:center;gap:7px;opacity:.88}
.footer-contact a{transition:opacity .2s ease}
.footer-contact a:hover{opacity:1}
.footer-contact-icon{font-size:13px}
.footer-products{font-size:13px;opacity:.72}
@media (max-width:860px){
  .footer-inner{align-items:flex-start;flex-direction:column}
  .footer-contact{flex-direction:column;align-items:flex-start;gap:8px}
}


/* V4.2 — wider desktop canvas + larger visual scale */
@media (min-width: 1400px){
  :root{--shell:1540px}

  .section-shell,.header-shell{
    width:min(var(--shell),calc(100% - 96px));
  }

  .header-shell{
    grid-template-columns:260px minmax(0,1fr) 220px;
    gap:28px;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:64px;
    padding-top:92px;
  }

  .hero-copy{
    max-width:790px;
  }

  .hero h1{
    font-size:clamp(72px,5.7vw,102px);
    line-height:.91;
    max-width:790px;
  }

  .hero-lede{
    max-width:690px;
    font-size:clamp(19px,1.25vw,23px);
  }

  .hero-visual{
    min-height:700px;
  }

  .hero-visual>img{
    width:min(100%,820px);
    max-height:90svh;
  }

  .hero-rings{
    width:88%;
    right:-8%;
    top:13%;
  }

  .product-grid{
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
    gap:90px;
  }

  .product-copy{
    max-width:690px;
  }

  .product-graphic{
    min-height:650px;
  }

  .product-graphic img{
    width:min(100%,760px);
    max-height:84svh;
  }

  /* Human cutouts should command more of the viewport */
  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    width:min(100%,860px);
    max-height:90svh;
  }

  .ecosystem-grid{
    grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr);
    gap:90px;
  }

  .contact-grid{
    grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);
    gap:110px;
  }
}

@media (min-width: 1800px){
  :root{--shell:1660px}

  .section-shell,.header-shell{
    width:min(var(--shell),calc(100% - 120px));
  }

  .hero-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:80px;
  }

  .hero-copy{
    max-width:860px;
  }

  .hero h1{
    font-size:108px;
    max-width:860px;
  }

  .hero-visual>img{
    width:min(100%,900px);
    max-height:92svh;
  }

  .product-grid{
    gap:110px;
  }

  .product-graphic img{
    width:min(100%,820px);
  }

  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    width:min(100%,920px);
    max-height:92svh;
  }
}


/* =========================================================
   V4.5 — header icons, larger people and progressive panels
   ========================================================= */

.contact-lozenge{
  gap:28px;
  padding:8px 26px;
}
.icon-link{
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  display:grid;
  place-items:center;
  padding:4px;
  transition:transform .22s ease, opacity .22s ease;
}
.icon-link:hover{
  background:transparent;
  transform:translateY(-2px);
  opacity:.68;
}
.icon-link svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:var(--navy);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:none;
}
.icon-link:hover svg{fill:none}

.hero-visual{
  align-items:flex-end;
}
.hero-visual>img{
  height:min(92svh,1040px);
  width:auto;
  max-width:none;
  max-height:none;
  object-position:center bottom;
}

.product-recruit,
.product-accounts{
  padding-bottom:0;
}
.product-recruit .product-grid,
.product-accounts .product-grid{
  align-items:end;
}
.product-recruit .product-copy,
.product-accounts .product-copy{
  align-self:center;
}
.product-recruit .product-graphic,
.product-accounts .product-graphic{
  align-self:end;
  height:calc(100svh - 86px);
  min-height:0;
  align-items:flex-end;
}
.product-recruit .product-graphic img,
.product-accounts .product-graphic img{
  height:min(92svh,1020px);
  width:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center bottom;
}

.product-section{
  min-height:168svh;
  padding:0;
  position:relative;
  overflow:clip;
}
.product-section .product-grid{
  position:sticky;
  top:0;
  min-height:100svh;
  height:100svh;
  padding-top:92px;
  padding-bottom:28px;
}
.product-section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:rgba(255,255,255,.26);
  box-shadow:0 -20px 44px rgba(5,23,47,.12);
  z-index:6;
  pointer-events:none;
}
#recruit{z-index:10}
#dsp{z-index:11}
#tms{z-index:12}
#track{z-index:13}
#accounts{z-index:14}
#pay{z-index:15}
.ecosystem{position:relative;z-index:16}
.contact-section{position:relative;z-index:20}

.product-sequence,
.product-visual-sequence{
  opacity:1;
  transform:none;
}
.product-sequence .product-mark,
.product-sequence h2,
.product-sequence p,
.product-sequence li,
.product-visual-sequence img{
  will-change:transform,opacity;
}
.product-sequence .product-mark,
.product-sequence h2,
.product-sequence p,
.product-sequence li{
  opacity:0;
}
.product-sequence.from-left .product-mark,
.product-sequence.from-left h2,
.product-sequence.from-left p,
.product-sequence.from-left li{
  transform:translate3d(-34px,16px,0);
}
.product-sequence.from-right .product-mark,
.product-sequence.from-right h2,
.product-sequence.from-right p,
.product-sequence.from-right li{
  transform:translate3d(34px,16px,0);
}
.product-visual-sequence img{
  opacity:0;
}
.product-visual-sequence.from-left img{transform:translate3d(-54px,18px,0) scale(.97)}
.product-visual-sequence.from-right img{transform:translate3d(54px,18px,0) scale(.97)}

.footer-phone{
  color:inherit;
  text-decoration:none;
}

@media (min-width:1400px){
  .hero-visual>img{
    height:min(95svh,1140px);
  }
  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    height:min(94svh,1120px);
  }
}
@media (min-width:1800px){
  .hero-visual>img{
    height:min(96svh,1240px);
  }
  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    height:min(95svh,1200px);
  }
}
@media (max-width:900px){
  .contact-lozenge{gap:18px;padding:8px 18px}
  .product-section{
    min-height:100svh;
    padding-top:120px;
    overflow:hidden;
  }
  .product-section .product-grid{
    position:relative;
    top:auto;
    height:auto;
    min-height:auto;
    padding-top:30px;
    padding-bottom:60px;
  }
  .product-section::after{display:none}
  .hero-visual>img,
  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    height:auto;
    width:auto;
    max-width:100%;
    max-height:56svh;
  }
  .product-recruit .product-graphic,
  .product-accounts .product-graphic{
    height:auto;
    min-height:380px;
  }
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li,
  .product-visual-sequence img{
    opacity:1 !important;
    transform:none !important;
  }
}


/* =========================================================
   V4.6 — lock each product panel until its story is complete
   ========================================================= */

/*
  Each section now has a longer scroll runway.
  The colour panel reaches the viewport, locks at top:0,
  all content reveals while it is pinned, then only after
  the complete story is visible can the following colour
  panel begin to rise over it.
*/
@media (min-width:901px){
  .product-section{
    min-height:230svh;
  }

  .product-section .product-grid{
    position:sticky;
    top:0;
    height:100svh;
    min-height:100svh;
  }
}


/* =========================================================
   V4.7 — restore true stacked colour-panel overlay
   ========================================================= */

/*
  Desktop story geometry:

  0–~90vh   Current panel is locked while its content builds.
  ~90–100vh Short fully-visible dwell.
  100–200vh The NEXT colour panel rises over the current panel.
  200vh     Next panel reaches the top and becomes the locked panel.

  Each product runway is 300vh, but the following section overlaps it
  by 100vh. This keeps the outgoing panel physically pinned underneath
  while the new colour sheet rolls up over it.
*/
@media (min-width:901px){
  .product-section{
    min-height:300svh;
    height:300svh;
    margin-top:0;
    overflow:clip;
  }

  #dsp,
  #tms,
  #track,
  #accounts,
  #pay{
    margin-top:-100svh;
  }

  .product-section .product-grid{
    position:sticky;
    top:0;
    height:100svh;
    min-height:100svh;
  }

  /*
    The final ecosystem panel also rolls up over 360PAY,
    then normal page flow resumes for the contact section.
  */
  .ecosystem{
    margin-top:-100svh;
  }
}

@media (max-width:900px){
  #dsp,
  #tms,
  #track,
  #accounts,
  #pay,
  .ecosystem{
    margin-top:0;
  }
}


/* =========================================================
   V4.8 — final stacked story sequence
   1) colour + image rise together
   2) panel locks, text animates in
   3) next panel overlays only after text is resolved
   ========================================================= */

@media (min-width:901px){

  /*
    Each panel gets:
    - 100vh arrival phase
    - 100vh locked text-build phase
    - 100vh release/overlay phase

    Following panels overlap by 100vh so their colour/image sheet
    can physically roll over the completed panel underneath.
  */
  .product-section{
    min-height:300svh;
    height:300svh;
    margin-top:0;
    overflow:clip;
  }

  #dsp,
  #tms,
  #track,
  #accounts,
  #pay{
    margin-top:-100svh;
  }

  /*
    The complete visual composition (copy + image) locks once
    the coloured section reaches the viewport top.
  */
  .product-section .product-grid{
    position:sticky;
    top:0;
    height:100svh;
    min-height:100svh;
  }

  /*
    Image is visible immediately with the colour block.
    It therefore travels naturally upward as the new coloured
    block enters, then remains fixed when the block locks.
  */
  .product-visual-sequence img{
    opacity:1 !important;
    transform:none !important;
  }

  /*
    Text begins hidden and is controlled by scroll JS only
    AFTER the panel has fully locked.
  */
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:0;
  }

  /*
    Ecosystem overlays 360PAY in the same sheet-like way,
    but then normal flow resumes into Contact.
  */
  .ecosystem{
    margin-top:-100svh;
  }
}


/* =========================================================
   V4.9 — make the locked text build unmistakably visible
   ========================================================= */

@media (min-width:901px){
  /*
    360vh total runway:
    - first 140vh after lock = text build
    - next 20vh = fully resolved dwell
    - final 100vh = next panel rolls over current one
  */
  .product-section{
    min-height:360svh;
    height:360svh;
  }

  #dsp,
  #tms,
  #track,
  #accounts,
  #pay{
    margin-top:-100svh;
  }

  .product-section .product-grid{
    position:sticky;
    top:0;
    height:100svh;
    min-height:100svh;
  }

  /* Image is already present when the coloured sheet arrives. */
  .product-visual-sequence img{
    opacity:1 !important;
    transform:none !important;
  }

  /* Text elements remain genuinely hidden until scroll progression reveals them. */
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:0;
    transition:opacity .10s linear, transform .10s ease-out;
  }
}


/* =========================================================
   V4.10 — corrected interaction geometry
   ========================================================= */

@media (min-width:901px){
  /*
    Every product occupies 200vh physically:
    - first 100vh = its own full-screen locked panel
    - second 100vh = runway for the NEXT panel to rise over it

    The next section overlaps by exactly 100vh, so as soon as the
    current text story is completed and scrolling is released, the
    next colour/image sheet begins entering from the bottom.
  */
  .product-section{
    min-height:200svh;
    height:200svh;
    margin-top:0;
    overflow:clip;
  }

  #dsp,
  #tms,
  #track,
  #accounts,
  #pay{
    margin-top:-100svh;
  }

  .product-section .product-grid{
    position:sticky;
    top:0;
    height:100svh;
    min-height:100svh;
  }

  .product-visual-sequence img{
    opacity:1 !important;
    transform:none !important;
  }

  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:0;
    transition:none;
    will-change:opacity,transform;
  }

  .ecosystem{
    margin-top:-100svh;
  }
}


/* =========================================================
   V4.11 — clean stacked panels + genuinely locked text story
   ========================================================= */

/*
  Important reset:
  earlier experimental versions added tall runways and negative margins.
  This version returns the product sheets to true 100vh sticky panels.
  JS temporarily consumes wheel/trackpad input while a panel is locked,
  so the NEXT sheet physically cannot enter until the text sequence has
  finished.
*/
@media (min-width:901px){
  .product-section{
    position:sticky !important;
    top:0 !important;
    min-height:100svh !important;
    height:100svh !important;
    margin-top:0 !important;
    padding:100px 0 50px !important;
    overflow:hidden !important;
  }

  .product-section .product-grid{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:calc(100svh - 80px) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  /* Keep the layering from the original stacked treatment. */
  #recruit{z-index:10}
  #dsp{z-index:11}
  #tms{z-index:12}
  #track{z-index:13}
  #accounts{z-index:14}
  #pay{z-index:15}

  .ecosystem{
    position:sticky !important;
    top:0 !important;
    min-height:100svh !important;
    margin-top:0 !important;
    z-index:16;
  }

  .contact-section{
    position:relative;
    z-index:20;
  }

  /*
    Image belongs to the colour sheet:
    it is visible while the sheet itself rises into view.
  */
  .product-visual-sequence,
  .product-visual-sequence img{
    opacity:1 !important;
    transform:none !important;
  }

  /*
    Text belongs to the locked story and starts hidden.
    JS adds .is-visible to each item one at a time.
  */
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:0 !important;
    transform:translate3d(0,28px,0) !important;
    filter:blur(4px);
    transition:
      opacity .48s cubic-bezier(.2,.75,.25,1),
      transform .58s cubic-bezier(.2,.75,.25,1),
      filter .58s cubic-bezier(.2,.75,.25,1) !important;
    will-change:opacity,transform,filter;
  }

  .product-sequence.from-left .product-mark,
  .product-sequence.from-left h2,
  .product-sequence.from-left p,
  .product-sequence.from-left li{
    transform:translate3d(-42px,18px,0) !important;
  }

  .product-sequence.from-right .product-mark,
  .product-sequence.from-right h2,
  .product-sequence.from-right p,
  .product-sequence.from-right li{
    transform:translate3d(42px,18px,0) !important;
  }

  .product-sequence .is-visible{
    opacity:1 !important;
    transform:translate3d(0,0,0) !important;
    filter:blur(0) !important;
  }

  /* Product 1 and 5 people remain bottom anchored. */
  .product-recruit,
  .product-accounts{
    padding-bottom:0 !important;
  }

  .product-recruit .product-grid,
  .product-accounts .product-grid{
    min-height:100svh !important;
    height:100svh !important;
    align-items:end;
    padding-top:86px !important;
  }

  .product-recruit .product-copy,
  .product-accounts .product-copy{
    align-self:center;
    padding-bottom:54px;
  }

  .product-recruit .product-graphic,
  .product-accounts .product-graphic{
    align-self:end;
    height:calc(100svh - 86px);
    min-height:0;
    align-items:flex-end;
  }

  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    height:min(94svh,1120px);
    width:auto;
    max-width:none;
    max-height:none;
    object-position:center bottom;
  }
}

/* Mobile/tablet narrow fallback: all copy remains visible and normal-flow. */
@media (max-width:900px){
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}


/* =========================================================
   V4.12 — scroll-scrubbed text story + strict alignment
   ========================================================= */

@media (min-width:901px){
  /*
    Return to a simple, predictable 100vh stacked-sheet model.
    Each product sheet itself is sticky. The incoming sheet + image
    scrolls up naturally. Once it reaches top:0, JS temporarily consumes
    wheel/trackpad movement to scrub the copy animation.
  */
  .product-section{
    position:sticky !important;
    top:0 !important;
    min-height:100svh !important;
    height:100svh !important;
    margin-top:0 !important;
    padding:100px 0 0 !important;
    overflow:hidden !important;
  }

  .product-section .product-grid{
    position:relative !important;
    top:auto !important;
    height:calc(100svh - 100px) !important;
    min-height:calc(100svh - 100px) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    align-items:center;
  }

  #recruit{z-index:10}
  #dsp{z-index:11}
  #tms{z-index:12}
  #track{z-index:13}
  #accounts{z-index:14}
  #pay{z-index:15}

  /* Strong, consistent content alignment in every product column. */
  .product-copy{
    width:100%;
    max-width:680px;
    justify-self:start !important;
    align-self:center;
    text-align:left;
    margin:0 !important;
    padding:0 !important;
  }

  .product-copy .product-mark,
  .product-copy h2,
  .product-copy p,
  .product-copy ul{
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left;
  }

  .product-copy ul{
    padding-left:19px !important;
  }

  /* Image is part of the incoming coloured sheet, never part of text reveal. */
  .product-visual-sequence,
  .product-visual-sequence img{
    opacity:1 !important;
    transform:none !important;
  }

  /*
    Text is scrubbed directly by scroll progress.
    No CSS transition: there is no 'auto reveal' after a class is added.
    JS writes opacity/transform continuously from the user's scroll input.
  */
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:0;
    transform:translate3d(0,26px,0);
    filter:blur(3px);
    transition:none !important;
    will-change:opacity,transform,filter;
  }

  /* Recruit + Accounts human cutouts remain grounded on the bottom edge. */
  .product-recruit,
  .product-accounts{
    padding-bottom:0 !important;
  }

  .product-recruit .product-grid,
  .product-accounts .product-grid{
    height:calc(100svh - 86px) !important;
    min-height:calc(100svh - 86px) !important;
    align-items:end;
  }

  .product-recruit .product-copy,
  .product-accounts .product-copy{
    align-self:center;
    padding-bottom:42px !important;
  }

  .product-recruit .product-graphic,
  .product-accounts .product-graphic{
    align-self:end;
    height:calc(100svh - 86px);
    min-height:0;
    align-items:flex-end;
  }

  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    height:min(94svh,1120px);
    width:auto;
    max-width:none;
    max-height:none;
    object-position:center bottom;
  }

  /* Ecosystem remains another full-screen sheet after 360PAY. */
  .ecosystem{
    position:sticky !important;
    top:0 !important;
    min-height:100svh !important;
    margin-top:0 !important;
    z-index:16;
  }

  .contact-section{
    position:relative;
    z-index:20;
  }
}

@media (max-width:900px){
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}


/* =========================================================
   V4.13 — robust scroll-lock + scroll-scrub storytelling
   ========================================================= */

@media (min-width:901px){

  /* Clean stacked 100vh sheets. */
  .product-section{
    position:sticky !important;
    top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    margin:0 !important;
    padding:100px 0 0 !important;
    overflow:hidden !important;
  }

  .product-section .product-grid{
    position:relative !important;
    top:auto !important;
    height:calc(100svh - 100px) !important;
    min-height:calc(100svh - 100px) !important;
    padding:0 !important;
    align-items:center !important;
  }

  #recruit{z-index:10}
  #dsp{z-index:11}
  #tms{z-index:12}
  #track{z-index:13}
  #accounts{z-index:14}
  #pay{z-index:15}

  /* Strict copy alignment. */
  .product-copy{
    width:100% !important;
    max-width:680px !important;
    justify-self:start !important;
    align-self:center !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .product-copy .product-mark,
  .product-copy h2,
  .product-copy p,
  .product-copy ul{
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  .product-copy ul{
    padding-left:20px !important;
  }

  /* Graphic is visible as the coloured sheet itself arrives. */
  .product-visual-sequence,
  .product-visual-sequence img{
    opacity:1 !important;
    transform:none !important;
  }

  /*
    Copy is not class-animated.
    JS writes opacity / transform continuously from the user's wheel delta.
  */
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:0;
    transform:translate3d(0,28px,0);
    filter:blur(3px);
    transition:none !important;
    will-change:opacity,transform,filter;
  }

  /* Recruit + Accounts remain grounded to bottom. */
  .product-recruit,
  .product-accounts{
    padding-bottom:0 !important;
  }

  .product-recruit .product-grid,
  .product-accounts .product-grid{
    height:calc(100svh - 86px) !important;
    min-height:calc(100svh - 86px) !important;
    align-items:end !important;
  }

  .product-recruit .product-copy,
  .product-accounts .product-copy{
    align-self:center !important;
    padding-bottom:42px !important;
  }

  .product-recruit .product-graphic,
  .product-accounts .product-graphic{
    align-self:end !important;
    height:calc(100svh - 86px) !important;
    min-height:0 !important;
    align-items:flex-end !important;
  }

  .product-recruit .product-graphic img,
  .product-accounts .product-graphic img{
    height:min(94svh,1120px) !important;
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    object-position:center bottom !important;
  }

  .ecosystem{
    position:sticky !important;
    top:0 !important;
    min-height:100svh !important;
    margin:0 !important;
    z-index:16;
  }

  .contact-section{
    position:relative !important;
    z-index:20;
  }
}

@media (max-width:900px){
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}


/* =========================================================
   V4.14 — visibility conflict fix
   ========================================================= */

@media (min-width:901px){
  /*
    Text visibility is now authored by inline scroll-scrub values.
    These declarations only define the initial state; live inline
    !important values from JS override them as the user scrolls.
  */
  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p,
  .product-sequence li{
    visibility:visible !important;
    display:list-item;
  }

  .product-sequence .product-mark,
  .product-sequence h2,
  .product-sequence p{
    display:block;
  }
}