/* ═══════════════════════════════════════════════════════════
   SAPOTR Business — styles for index.html and about.html
   The brand system (tokens, header, buttons, arrows, motion) is
   the frozen Staff Partner site's; the sections are Business's own.
    1 Tokens       · 2 Base        · 3 Ambient/FX   · 4 Header
    5 Buttons      · 6 Hero shell  · 7 Banners 1–6  · 8 Ticker
    9 Benefits     · 10 Industries · 11 Safety      · 12 Testimonials
   13 Growth       · 14 Hire steps · 15 FAQ         · 16 CTA
   17 Footer       · 18 About page · 19 Motion      · 20 Responsive
   21 Reduced motion
   ═══════════════════════════════════════════════════════════ */

/* ───── 1 · Tokens ───── */
:root{
  color-scheme:only light;   /* one fixed light brand design: browsers must not auto-darken it */
  --navy:#0F1738; --navy-2:#182252; --navy-deep:#0A1030;
  --yellow:#FFC107; --red:#FF4B2B; --cyan:#12C7C7;
  --cyan-ink:#0a8f8f; --yellow-ink:#8a6400; --red-ink:#c2361c;

  --ink:#0F1738; --ink-2:#3f486a; --ink-3:#6b7391;
  --line:#e7e9f1; --line-2:#d9dce8;
  --bg:#fff; --tint:#f5f6fa;

  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --sh-s:0 1px 2px rgba(15,23,56,.05);
  --sh-m:0 10px 34px rgba(15,23,56,.08);
  --sh-l:0 26px 70px rgba(15,23,56,.16);

  --pad:clamp(80px,8.4vw,128px);
  --title-gap:clamp(44px,4.6vw,64px);
  --ease:cubic-bezier(.22,.68,.28,1);
  --head-top:12px;      /* empty space above the header row */
  --head-h:88px;
  --box-title:21px;     /* important card/box titles across the page */
}

/* ───── 2 · Base ───── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font:400 16px/1.62 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;word-spacing:.02em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
main{overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
h1,h2,h3{margin:0 0 .44em;color:var(--ink);font-weight:800;letter-spacing:-.02em;word-spacing:.08em;line-height:1.08}
h2{font-size:clamp(28px,3.2vw,44px)}
h3{font-size:17px;font-weight:700;letter-spacing:-.012em;line-height:1.3}
mark{background:none;color:inherit}
figure{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px}
.skip-link:focus{left:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wrap{width:min(1240px,100% - 48px);margin-inline:auto}

.hl{color:var(--cyan)}
.section{position:relative;padding:var(--pad) 0}
.section--tint{background:var(--tint);border-block:1px solid var(--line)}

.sec-title{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.025em;word-spacing:.1em;line-height:1.12;max-width:26ch;margin:0;text-wrap:balance}
/* designed line breaks: each phrase on its own line, never split mid-phrase where it fits */
.sec-title .ln{display:block}
.sec-title--center{text-align:center;margin-inline:auto}
.sec-sub{margin:20px auto 0;max-width:46ch;text-align:center;font-size:clamp(18px,1.6vw,21.5px);line-height:1.5;color:var(--ink-2);font-weight:500;text-wrap:balance}

/* icon tints, shared by every section */
.ic-cyan  {background:rgba(18,199,199,.12);color:var(--cyan-ink)}
.ic-yellow{background:rgba(255,193,7,.18); color:var(--yellow-ink)}
.ic-red   {background:rgba(255,75,43,.1);  color:var(--red)}

/* ───── 3 · Ambient + page FX ───── */
.scroll-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none}
.scroll-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--red));
  box-shadow:0 0 12px rgba(18,199,199,.5)}

.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform}
.orb--cyan  {width:44vw;height:44vw;left:-14vw;top:8vh;   background:radial-gradient(circle,rgba(18,199,199,.16),transparent 68%);animation:drift-a 40s var(--ease) infinite alternate}
.orb--navy  {width:52vw;height:52vw;right:-18vw;top:34vh; background:radial-gradient(circle,rgba(15,23,56,.1),transparent 68%);animation:drift-b 52s var(--ease) infinite alternate}
.orb--yellow{width:30vw;height:30vw;left:26vw;bottom:-6vh;background:radial-gradient(circle,rgba(255,193,7,.11),transparent 68%);animation:drift-c 46s var(--ease) infinite alternate}
.cursor-glow{position:absolute;width:520px;height:520px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(18,199,199,.12),transparent 62%);
  transform:translate3d(-50%,-50%,0);transition:opacity .5s var(--ease);will-change:transform}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}   to{transform:translate3d(6vw,8vh,0)  scale(1.12)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-7vw,-6vh,0) scale(.94)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(.96)} to{transform:translate3d(8vw,-9vh,0) scale(1.16)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}

/* ───── 4 · Header ───── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:80;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.header-inner{height:var(--head-h);padding-top:var(--head-top);display:flex;align-items:center;gap:28px}
/* the plain SAPOTR wordmark, set larger than the two-line Partner lock-up */
.brand{position:relative;display:block;height:46px;flex:none}
.brand img{height:46px;width:auto;object-fit:contain;transition:opacity .3s var(--ease)}
.brand-light{position:absolute;inset:0}

.nav{margin-inline:auto}
.nav-list{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:600}
.nav-list > li{position:relative;display:flex;align-items:center}
.nav-list > li > a{position:relative;padding:7px 0;white-space:nowrap;transition:color .25s var(--ease)}
.nav-list > li > a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--cyan);border-radius:2px;transition:right .3s var(--ease)}
.nav-list > li > a:hover::after,.nav-list > li > a[aria-current="true"]::after{right:0}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav + .header-actions{margin-left:0}

/* About Us: the link goes to the page, the chevron opens its four sections */
.drop-btn{display:grid;place-items:center;width:26px;height:26px;margin-left:3px;padding:0;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;
  transition:background .25s var(--ease)}
.drop-btn .ic{width:14px;height:14px;stroke-width:2.4;transition:transform .3s var(--ease)}
.drop-btn:hover{background:rgba(127,135,170,.16)}
.drop-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 16px);left:50%;z-index:2;width:290px;padding:8px;translate:-50% 0;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(15,23,56,.18);color:var(--ink);
  animation:drop-in .28s var(--ease) both}
.drop[hidden]{display:none}
.drop::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}   /* a bridge so the pointer can cross the gap */
.drop a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease)}
.drop a:hover,.drop a:focus-visible{background:var(--tint);color:var(--ink)}
.drop-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none}
.drop-ic .ic{width:17px;height:17px}
@keyframes drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* over the hero: the header takes the tone of the banner beneath it */
.site-header[data-mode="over"]{color:#fff}
.site-header[data-mode="over"] .brand-dark{opacity:0}
.site-header[data-mode="over"] .nav-list > li > a{color:rgba(255,255,255,.92)}
.site-header[data-mode="over"] .burger span{background:#fff}
.site-header[data-mode="over"][data-tone="light"]{color:var(--ink)}
.site-header[data-mode="over"][data-tone="light"] .brand-dark{opacity:1}
.site-header[data-mode="over"][data-tone="light"] .brand-light{opacity:0}
.site-header[data-mode="over"][data-tone="light"] .nav-list > li > a{color:var(--ink-2)}
.site-header[data-mode="over"][data-tone="light"] .burger span{background:var(--ink)}
.site-header[data-mode="solid"]{color:var(--ink);background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(15,23,56,.06)}
.site-header[data-mode="solid"] .brand-light{opacity:0}
.site-header[data-mode="solid"] .nav-list > li > a{color:var(--ink-2)}
.site-header[data-mode="solid"] .nav-list > li > a:hover,.site-header[data-mode="solid"] .nav-list > li > a[aria-current="true"]{color:var(--ink)}

/* the approved three-line menu icon: equal lines, equal spacing; opens into an X */
.burger{display:none;width:46px;height:46px;padding:14px 11px;margin-right:-6px;background:none;border:0;border-radius:12px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;width:100%;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease),background .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.25px) rotate(-45deg)}
.mobile-nav{display:flex;flex-direction:column;max-height:calc(100svh - var(--head-h));overflow-y:auto;overscroll-behavior:contain;
  padding:8px 24px 28px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(15,23,56,.12)}
.mobile-nav[hidden]{display:none}
.mobile-nav > a:not(.btn){display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:16px 2px;
  font-weight:700;font-size:17px;color:var(--ink);border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.mobile-nav > a:not(.btn)::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid var(--cyan);border-top:2px solid var(--cyan);transform:rotate(45deg)}
.mobile-nav .btn{margin-top:22px}
.mobile-nav > a[aria-current="true"]{text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:7px}
.mobile-nav:not([hidden]) > *{animation:mnav-in .38s var(--ease) both}
.mobile-nav > :nth-child(2){animation-delay:.04s}.mobile-nav > :nth-child(3){animation-delay:.08s}
.mobile-nav > :nth-child(4){animation-delay:.12s}.mobile-nav > :nth-child(5){animation-delay:.16s}.mobile-nav > :nth-child(6){animation-delay:.2s}
@keyframes mnav-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ───── 5 · Buttons ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;word-spacing:.04em;
  padding:14px 24px;border:1px solid transparent;border-radius:var(--r-m);
  font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.2;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease),border-color .24s var(--ease);will-change:transform}
.btn .ic{width:17px;height:17px;stroke-width:2.2;transition:transform .3s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn .ic--lead{width:18px;height:18px}
.btn:hover .ic--lead{transform:none}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--lg{padding:15px 26px;font-size:15.5px}
.btn--xl{padding:17px 30px;font-size:16px;border-radius:15px}
.btn--primary{background:var(--navy);color:#fff;box-shadow:0 6px 20px rgba(15,23,56,.2)}
.btn--primary:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,56,.26)}
.btn--accent{background:var(--red);color:#fff;box-shadow:0 10px 26px rgba(255,75,43,.32)}
.btn--accent:hover{background:#ff5c40;transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,75,43,.42)}
.btn--gold{background:var(--yellow);color:var(--navy);box-shadow:0 12px 30px rgba(255,193,7,.34)}
.btn--gold:hover{background:#ffcb2e;transform:translateY(-2px);box-shadow:0 18px 40px rgba(255,193,7,.44)}
.btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.34)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* sheen sweep on hover */
.btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%) skewX(-18deg)}

/* small carousel arrow, shared by the hero and the testimonials */
.c-arrow{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--navy);border:1px solid rgba(15,23,56,.12);
  box-shadow:0 4px 14px rgba(15,23,56,.12);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.c-arrow .ic{width:16px;height:16px;stroke-width:2.4}
.c-arrow:hover{background:#fff;border-color:rgba(18,199,199,.65);box-shadow:0 8px 22px rgba(15,23,56,.16);transform:translateY(-1px)}
.c-arrow:active{transform:scale(.94)}
.c-arrow--lg{width:44px;height:44px}
.c-arrow--lg .ic{width:18px;height:18px}

/* store badges */
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 13px;border-radius:12px;
  background:var(--navy);border:1px solid var(--navy);color:#fff;
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.store .ic{width:24px;height:24px;fill:currentColor;stroke:none}
.store span{display:flex;flex-direction:column;line-height:1.1}
.store small{font-size:10px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.store b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.store:hover{background:#000;border-color:#000;transform:translateY(-2px)}
.store--dark{background:#05081A;border-color:rgba(255,255,255,.22)}
.store--dark:hover{border-color:rgba(255,255,255,.5)}

/* the little card used across banners, the phone and the CTA */
.ocard{display:flex;align-items:center;gap:11px;padding:10px 16px 10px 10px;background:#fff;color:var(--ink);
  border:1px solid rgba(15,23,56,.06);border-radius:16px;box-shadow:0 16px 40px rgba(15,23,56,.16)}
.ocard-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}
.ocard-ic .ic{width:21px;height:21px}
.ocard-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ocard-t small{font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.01em;white-space:nowrap}
.ocard-t b{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}

/* ───── 6 · Hero shell — six stacked banners, one cross-dissolve ───── */
.hero{--ui-h:48px;--ht:clamp(32px,min(3.9vw,6.6vh),52px);
  position:relative;isolation:isolate;background:var(--navy-deep);color:#fff}
.hero-stage{position:relative;overflow:hidden;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.hero-stage img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
/* a definite height, so every banner composes inside the frame instead of growing it */
.hero-slides{display:grid;grid-template-areas:"s";grid-template-columns:minmax(0,1fr);height:max(640px,100vh);height:max(640px,100svh)}

.hs{grid-area:s;min-width:0;min-height:0;position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:scale(1.03);
  transition:opacity .9s var(--ease),transform 1.15s var(--ease),visibility 0s linear .9s}
.hs[hidden]{display:none}
/* banners neither showing nor fading out skip rendering: the browser's lazy loading then leaves their
   photos to script.js (15), which fetches them after banner 1's photo, while the hero is in view */
.hs:not(.is-active):not(.is-out){content-visibility:hidden}
.hs.is-active{z-index:2;opacity:1;visibility:visible;transform:translate3d(var(--hdx,0px),0,0);
  transition:opacity .9s var(--ease),transform 1.15s var(--ease),visibility 0s}
/* the outgoing banner keeps painting while it fades and eases slightly away */
.hs.is-out{z-index:1;opacity:0;visibility:visible;transform:scale(1.015);
  transition:opacity .8s var(--ease),transform 1s var(--ease),visibility 0s}
.hero-stage.is-dragging .hs{transition:none}
@media (hover:hover) and (pointer:fine){.hero-stage{cursor:grab}.hero-stage a,.hero-stage button{cursor:pointer}}
.hero-stage.is-dragging,.hero-stage.is-dragging a{cursor:grabbing}
.hero-stage.is-dragging{-webkit-user-select:none;user-select:none}

.hs-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-scrim{position:absolute;inset:0;pointer-events:none}
.hs-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(22px,3.4vh,36px);
  padding-top:calc(var(--head-h) + clamp(18px,4vh,48px));
  padding-bottom:calc(var(--ui-h) + clamp(22px,4vh,44px))}
.hs-copy{display:flex;flex-direction:column;gap:clamp(22px,3.4vh,34px);max-width:min(600px,48%)}
.hs-title{margin:0;font-size:var(--ht);line-height:1.08;letter-spacing:-.025em;word-spacing:.1em;font-weight:800;color:#fff;text-wrap:balance}
.hs-title em{font-style:normal}
.hs-cta{display:flex;flex-wrap:wrap;gap:12px}
.hs-art{position:relative;min-width:0}

/* light banners */
.hs[data-tone="light"]{color:var(--ink)}
.hs[data-tone="light"] .hs-title{color:var(--ink)}

/* entrance choreography, re-run every time a banner comes round */
.js .hs [data-seq]{opacity:0}
.hs.is-active [data-seq]{animation:hs-rise .85s var(--ease) both;animation-delay:calc(var(--seq,0ms) + 240ms)}
[data-seq="2"]{--seq:170ms} [data-seq="3"]{--seq:340ms} [data-seq="4"]{--seq:520ms}
@keyframes hs-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* the arrow row: two small arrows around a quiet counter and dwell bar */
.hero-ui{position:absolute;z-index:6;left:0;right:0;bottom:clamp(16px,2.6vh,28px);pointer-events:none}
.hero-ui-in{display:flex;align-items:center;gap:12px}
.hero-ui .c-arrow{pointer-events:auto}
.hero-meter{display:flex;flex-direction:column;gap:7px;width:64px;padding-top:2px}
.hero-count{display:flex;align-items:baseline;justify-content:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.hero-count b{font-weight:800;color:#fff;transition:color .4s var(--ease)}
.hero-count i{font-style:normal;opacity:.6}
.hero-prog{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.24);overflow:hidden;transition:background .4s var(--ease)}
.hero-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:var(--cyan)}
.hero.is-auto .hero-prog i.run{animation:prog var(--dwell,7000ms) linear forwards}
.hero.is-paused .hero-prog i{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}
.hero[data-tone="light"] .hero-count{color:var(--ink-3)}
.hero[data-tone="light"] .hero-count b{color:var(--ink)}
.hero[data-tone="light"] .hero-prog{background:rgba(15,23,56,.14)}

/* ───── 7 · Banners ───── */
/* 1 · the café that is a pair of hands short */
/* the SAPOTR team (a transparent cut-out) in front of a soft glow — above the scrim, so the
   people keep their colour. The headline fills the left half of the 1240px content column;
   the group's box is exactly the right half, in the same band the headline is centred in
   (header → slider controls), and the picture is drawn in the middle of that box. So the group
   stays centred in the right half whatever the screen's size or shape. Phones and tablets
   stack it above the copy instead (see the portrait hero rules). */
.hs--cafe{--b1-gap:clamp(16px,2vw,40px);--b1-top:calc(var(--head-h) + clamp(18px,4vh,48px));--b1-bottom:calc(var(--ui-h) + clamp(22px,4vh,44px))}
.hs--cafe .hs-bg{background:radial-gradient(ellipse 50% 70% at 75% 52%,#1B2862 0%,#0F1738 55%,#080D26 100%)}
.hs--cafe .b1-photo{z-index:1;inset:auto;left:calc(50% + var(--b1-gap) / 2);top:var(--b1-top);
  width:calc(50% - var(--b1-gap) - max(24px,(100% - 1240px) / 2));height:calc(100% - var(--b1-top) - var(--b1-bottom));
  object-fit:contain;object-position:50% 50%;transform-origin:50% 50%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))}
.hs--cafe.is-active .hs-photo{animation:kb 12s var(--ease) both}
.hs--cafe .hs-scrim{background:
  linear-gradient(90deg,rgba(10,16,48,.95) 0%,rgba(10,16,48,.86) 28%,rgba(10,16,48,.42) 52%,rgba(10,16,48,.06) 72%),
  linear-gradient(180deg,rgba(10,16,48,.6) 0%,rgba(10,16,48,0) 22%,rgba(10,16,48,0) 70%,rgba(10,16,48,.7) 100%)}
.b1-title{font-size:calc(var(--ht) * 1.04)}
.b1-line{display:block;margin-top:.1em}


/* 2 · your instant staff */
.hs--instant .hs-bg{background:linear-gradient(160deg,#FFFFFF 0%,#F5FAFB 48%,#E2F5F5 100%)}
.b2-glow{position:absolute;right:max(2vw,calc((100% - 1240px) / 2 - 60px));top:50%;width:min(86vh,52vw);aspect-ratio:1;translate:0 -46%;border-radius:50%;
  background:radial-gradient(circle,rgba(18,199,199,.26),rgba(18,199,199,.08) 52%,rgba(18,199,199,0) 70%)}
.b2-dots{position:absolute;left:0;top:0;width:46%;height:62%;opacity:.55;
  background-image:radial-gradient(rgba(15,23,56,.14) 1.2px,transparent 1.2px);background-size:22px 22px;
  mask-image:radial-gradient(ellipse at 0 0,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 0 0,#000,transparent 70%)}
.b2-inner,.b3-inner,.b5-inner,.b6-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,80px)}
.b2-inner .hs-copy,.b3-inner .hs-copy,.b5-inner .hs-copy,.b6-inner .hs-copy{max-width:600px}
.b2-title{font-size:calc(var(--ht) * 1.12)}
.b2-ln{display:block}
/* the last line is ~12.75em wide: kept whole, it takes the largest size its column allows (never larger than the heading) */
@supports (container-type:inline-size){
  .b2-title{container-type:inline-size}
  .b2-title .b2-ln:last-child{white-space:nowrap;font-size:min(1em,100cqw / 12.9)}
}
/* the headline arrives a word at a time (each .wd carries its turn in --w), then the button */
.b2-title .wd{display:inline-block}
.js .hs .b2-title .wd{opacity:0}
.hs.is-active .b2-title .wd{animation:hs-rise .7s var(--ease) both;animation-delay:calc(240ms + var(--w) * 150ms)}
.b2-inner .hs-cta{--seq:1060ms}
.b2-art{display:flex;justify-content:center}
.b2-stage{position:relative;height:min(64vh,560px);aspect-ratio:4/5}
.b2-frame{position:absolute;inset:0;border-radius:28px;overflow:hidden;border:8px solid #fff;background:#e9eef4;
  box-shadow:0 40px 90px rgba(15,23,56,.22)}
.b2-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hs--instant.is-active .b2-frame img{animation:kb 11s var(--ease) both}
.b2-timer{position:absolute;right:-34px;top:-26px;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--navy);
  box-shadow:0 18px 40px rgba(15,23,56,.3)}
.b2-timer > svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);transform:rotate(-90deg)}
.b2-timer circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:6}
.b2-timer .b2-run{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:277;stroke-dashoffset:277}
.hs--instant.is-active .b2-run{animation:b2-run 2.2s var(--ease) .9s both}
@keyframes b2-run{to{stroke-dashoffset:40}}
.b2-timer span{display:grid;place-items:center;color:var(--yellow)}
.b2-timer .ic{width:30px;height:30px;fill:currentColor;stroke-width:1.2}
.b2-note{position:absolute}
.b2-note--a{left:-30%;top:22%}
.b2-note--b{right:-22%;bottom:16%}
.hs--instant.is-active .b2-note{animation:pop .6s var(--ease) both,bob 7s ease-in-out infinite}
.hs--instant.is-active .b2-note--a{animation-delay:.9s,1.6s}
.hs--instant.is-active .b2-note--b{animation-delay:1.8s,2.6s}

/* 3 · nearby, on time — a light street map, a live route and the work waiting */
.hs--nearby .hs-bg{background:#EEF1F7}
.b3-map{position:absolute;inset:-40%;transform:rotate(-12deg);
  background-color:#E8ECF4;
  background-image:
    linear-gradient(90deg,transparent calc(100% - 22px),#fff calc(100% - 22px)),
    linear-gradient(0deg,transparent calc(100% - 22px),#fff calc(100% - 22px)),
    linear-gradient(90deg,transparent calc(100% - 10px),#fff calc(100% - 10px)),
    linear-gradient(0deg,transparent calc(100% - 10px),#fff calc(100% - 10px)),
    radial-gradient(circle at 70% 40%,rgba(18,199,199,.12),transparent 30%),
    radial-gradient(circle at 30% 70%,rgba(255,193,7,.12),transparent 26%);
  background-size:560px 420px,560px 420px,140px 105px,140px 105px,100% 100%,100% 100%}
.b3-fade{position:absolute;inset:0;background:linear-gradient(90deg,#F6F8FB 0%,rgba(246,248,251,.96) 32%,rgba(246,248,251,.55) 52%,rgba(246,248,251,0) 70%)}
.b3-line{display:block;margin-top:.14em}
.b3-art{display:flex;justify-content:center}
.b3-stage{position:relative;width:min(560px,100%);aspect-ratio:520/420}
.b3-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b3-road{fill:none;stroke:#fff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 8px 14px rgba(15,23,56,.1))}
.b3-path{fill:none;stroke:var(--cyan);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 12}
.hs--nearby.is-active .b3-path{animation:route 1.4s linear infinite}
@keyframes route{to{stroke-dashoffset:-28}}
.b3-dot{fill:var(--navy);stroke:#fff;stroke-width:3}
.b3-pin{position:absolute;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:4px solid #fff;
  box-shadow:0 14px 30px rgba(15,23,56,.24)}
.b3-pin--staff{left:12.7%;top:83.8%;background:var(--navy)}
.b3-pin--staff img{width:28px;height:auto}
.b3-pin--biz{left:86.9%;top:23.3%;background:var(--red);color:#fff}
.b3-pin--biz .ic{width:26px;height:26px}
.b3-pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0}
.b3-pin--staff::after{color:var(--cyan)}
.b3-pin--biz::after{color:var(--red)}
.hs--nearby.is-active .b3-pin::after{animation:pulse 2.6s var(--ease) infinite}
.b3-eta{position:absolute;left:2%;top:30%}
.b3-todo{position:absolute;right:-4%;bottom:0;display:flex;flex-direction:column;gap:7px;width:206px;padding:14px;background:#fff;border-radius:18px;
  box-shadow:0 22px 50px rgba(15,23,56,.16);font-size:13px;font-weight:700;color:var(--ink-2)}
.b3-todo-h{display:flex;align-items:center;gap:7px;margin-bottom:3px;font-size:13.5px;font-weight:800;color:var(--ink)}
.b3-todo-h .ic{width:17px;height:17px;color:var(--red)}
.b3-todo span{display:flex;align-items:center;gap:9px}
.b3-todo span i{position:relative;width:18px;height:18px;flex:none;border-radius:6px;border:2px solid var(--line-2);transition:background .3s,border-color .3s}
.b3-todo span i::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg);opacity:0}
.hs--nearby.is-active .b3-todo span i{animation:todo .4s var(--ease) both;animation-delay:calc(2.2s + var(--i) * .7s)}
.hs--nearby.is-active .b3-todo span i::after{animation:todo-tick .3s var(--ease) both;animation-delay:calc(2.3s + var(--i) * .7s)}
@keyframes todo{to{background:var(--cyan);border-color:var(--cyan)}}
@keyframes todo-tick{to{opacity:1}}
.hs--nearby.is-active .b3-eta,.hs--nearby.is-active .b3-todo{animation:pop .6s var(--ease) both,bob 7s ease-in-out infinite}
.hs--nearby.is-active .b3-eta{animation-delay:.9s,1.6s}
.hs--nearby.is-active .b3-todo{animation-delay:1.3s,2.4s}

/* 4 · last-minute support for urgent work */
.hs--urgent .hs-bg{background:var(--navy)}
/* Banner6.jpg puts the SAPOTR mid-frame with a checklist on the right. The photo
   keeps to the right two-thirds, and the cut follows the headline (page margin +
   headline width + a gap) rather than a fixed share of the screen, so the
   headline, the bands and his face never meet at any width. */
.hs--urgent{--b4-cut:calc(max(24px,(100% - 1240px) / 2) + min(470px,35%) + 16px)}
/* the photo fills the area right of the slanted navy panel (its left edge tucked under the panel),
   cropped from the centre so the team stays in view whatever the screen's shape */
.hs--urgent .b4-photo{left:calc(var(--b4-cut) - 3%);width:calc(100% - var(--b4-cut) + 3%);object-fit:cover;object-position:50% 46%;transform-origin:60% 50%}
.hs--urgent.is-active .hs-photo{animation:kb 12s var(--ease) both}
.b4-panel{position:absolute;inset:0;background:linear-gradient(125deg,#0A1030 0%,#0F1738 55%,#17225A 100%);
  clip-path:polygon(0 0,calc(var(--b4-cut) + 2.5%) 0,calc(var(--b4-cut) - 2.5%) 100%,0 100%)}
/* three brand bands along the cut, drawn like the mark's swooshes */
.b4-stripe{position:absolute;inset:0;pointer-events:none;
  mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--head-h) + 6px),#000 calc(var(--head-h) + 90px));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--head-h) + 6px),#000 calc(var(--head-h) + 90px))}
.hs--urgent .hs-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:180px;background:linear-gradient(180deg,rgba(10,16,48,.8),rgba(10,16,48,0))}
.b4-stripe--y{background:var(--yellow);clip-path:polygon(calc(var(--b4-cut) + 3.1%) 0,calc(var(--b4-cut) + 4.3%) 0,calc(var(--b4-cut) - .7%) 100%,calc(var(--b4-cut) - 1.9%) 100%)}
.b4-stripe--r{background:var(--red);clip-path:polygon(calc(var(--b4-cut) + 5.1%) 0,calc(var(--b4-cut) + 6.3%) 0,calc(var(--b4-cut) + 1.3%) 100%,calc(var(--b4-cut) + .1%) 100%)}
.b4-stripe--c{background:var(--cyan);clip-path:polygon(calc(var(--b4-cut) + 7.1%) 0,calc(var(--b4-cut) + 8.3%) 0,calc(var(--b4-cut) + 3.3%) 100%,calc(var(--b4-cut) + 2.1%) 100%)}
.hs--urgent.is-active .b4-stripe{animation:b4-band 1s var(--ease) both}
.hs--urgent.is-active .b4-stripe--r{animation-delay:.12s}
.hs--urgent.is-active .b4-stripe--c{animation-delay:.24s}
@keyframes b4-band{from{opacity:0;translate:0 -40px}to{opacity:1;translate:0 0}}
.b4-inner .hs-copy{max-width:min(470px,35%)}
.b4-title{font-size:calc(var(--ht) * .92);line-height:1.2}
.b4-name{display:block}
.b4-line{display:block}
.b4-card{position:absolute;z-index:3;width:300px;right:max(24px,calc((100% - 1240px) / 2));bottom:calc(var(--ui-h) + clamp(18px,3.2vh,40px));
  display:flex;flex-direction:column;gap:12px;padding:16px;background:rgba(255,255,255,.97);color:var(--ink);border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.4)}
.hs--urgent.is-active .b4-card{animation:pop .7s var(--ease) .8s both}
.b4-card-top{display:flex;align-items:center;justify-content:space-between}
.b4-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.b4-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.hs--urgent.is-active .b4-tag::before{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.b4-when{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--ink-3)}
.b4-when .ic{width:14px;height:14px}
.b4-role{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px}
.b4-state{position:relative;height:44px}
.b4-find,.b4-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;font-size:13.5px;font-weight:800}
.b4-find{background:var(--tint);color:var(--ink-2)}
.b4-find i{width:15px;height:15px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--navy);animation:spin .8s linear infinite}
.b4-done{background:var(--navy);color:#fff;opacity:0}
.b4-done .ic{width:18px;height:18px;padding:3px;box-sizing:content-box;border-radius:50%;background:var(--cyan);color:var(--navy);stroke-width:3}
.hs--urgent.is-active .b4-done{animation:fade-in .45s var(--ease) 2.6s both}
@keyframes fade-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* 5 · the technology that finds verified staff */
.hs--tech .hs-bg{background:radial-gradient(ellipse 70% 85% at 74% 52%,#1B2862 0%,#0F1738 52%,#080D26 100%)}
.b5-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 60% 70% at 74% 50%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 74% 50%,#000 10%,transparent 70%)}
.b5-glow{position:absolute;left:-10%;bottom:-30%;width:60vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,75,43,.12),transparent 64%)}
.b5-line{display:block}
.b5-art{display:flex;justify-content:center}
.b5-radar{--size:min(500px,38vw,58vh);position:relative;width:var(--size);aspect-ratio:1}
.rd-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(18,199,199,.3)}
.rd-ring--2{inset:17%;border-color:rgba(18,199,199,.24)}
.rd-ring--3{inset:34%;border-color:rgba(18,199,199,.2);background:rgba(18,199,199,.05)}
.rd-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(18,199,199,0) 0deg,rgba(18,199,199,0) 290deg,rgba(18,199,199,.32) 358deg,rgba(18,199,199,0) 360deg)}
.hs--tech.is-active .rd-sweep{animation:spin 3.6s linear infinite}
.rd-core{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:20%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:#0F1738;border:1px solid rgba(18,199,199,.6);box-shadow:0 0 0 10px rgba(18,199,199,.08),0 0 50px rgba(18,199,199,.4)}
.rd-core img{width:56%;height:auto}
.rd-node{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:linear-gradient(160deg,#2A3779,#1A2457);color:rgba(255,255,255,.8);border:2px solid rgba(255,255,255,.16)}
.rd-node .ic{width:22px;height:22px}
.rd-node::after{content:"";position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;border:2px solid #0F1738;
  background:var(--cyan) center/10px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1738' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.4)}
.hs--tech.is-active .rd-node{animation:pop .5s var(--ease) both;animation-delay:calc(500ms + var(--i) * 140ms)}
.hs--tech.is-active .rd-node::after{animation:tick-in .35s var(--ease) both;animation-delay:calc(1.4s + var(--i) * 180ms)}
@keyframes tick-in{to{opacity:1;transform:none}}
.rd-node--match{background:var(--yellow);color:var(--navy);border-color:#fff}
.hs--tech.is-active .rd-node--match{animation:pop .5s var(--ease) 1.2s both,match 2.4s var(--ease) 2.6s infinite}
@keyframes match{0%,100%{box-shadow:0 0 0 0 rgba(255,193,7,.55)}60%{box-shadow:0 0 0 16px rgba(255,193,7,0)}}
.rd-status{position:absolute;left:50%;top:-6px;translate:-50% 0;height:34px;min-width:190px}
.rd-searching,.rd-found{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:999px;
  font-size:12.5px;font-weight:800;white-space:nowrap}
.rd-searching{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.86)}
.rd-searching i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--cyan);animation:spin .8s linear infinite}
.rd-found{background:var(--cyan);color:var(--navy);opacity:0}
.rd-found .ic{width:15px;height:15px;stroke-width:3}
.hs--tech.is-active .rd-searching{animation:fade-out .3s var(--ease) 2.5s both}
.hs--tech.is-active .rd-found{animation:fade-in .4s var(--ease) 2.6s both}
@keyframes fade-out{to{opacity:0}}
.rd-card{position:absolute;right:-6%;bottom:2%}
.hs--tech.is-active .rd-card{animation:pop .6s var(--ease) 2.9s both}

/* 6 · the loop */
.hs--loop .hs-bg{background:linear-gradient(170deg,#FFFFFF 0%,#FCFBF7 55%,#FFF5D9 100%)}
.b6-glow{position:absolute;right:-12%;bottom:-36%;width:min(110vh,72vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,193,7,.34),rgba(255,193,7,.1) 46%,transparent 68%)}
.b6-arcs{position:absolute;right:-20%;bottom:-60%;width:min(160vh,110vw);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 64px,rgba(15,23,56,.05) 64px 65px);
  mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%)}
.b6-title > span{display:block}
.b6-art{display:flex;justify-content:center}
.b6-board{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c c";gap:16px;width:min(560px,100%)}
.b6-card{position:relative;aspect-ratio:5/4;border-radius:20px;overflow:hidden;background:#eee;border:4px solid #fff;
  box-shadow:0 20px 44px rgba(15,23,56,.14);transition:transform .4s var(--ease)}
.b6-card:nth-child(1){grid-area:a}.b6-card:nth-child(2){grid-area:b}
.b6-card:nth-child(3){grid-area:c;justify-self:center;width:calc(50% - 8px)}
.b6-card img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.b6-card::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 3px var(--red);opacity:0}
.hs--loop.is-active .b6-card::after{animation:b6-on 6s linear infinite;animation-delay:calc(1.2s + var(--i) * 2s)}
@keyframes b6-on{0%{opacity:0}4%,29%{opacity:1}33%,100%{opacity:0}}
.b6-tag{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:#fff;border-radius:12px;
  font-size:13.5px;font-weight:800;color:var(--ink);box-shadow:0 8px 20px rgba(15,23,56,.16);white-space:nowrap}
.b6-tag b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;font-size:11px;font-weight:800}
.b6-cycle{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
  background:var(--yellow);color:var(--navy);border:6px solid #fff;box-shadow:0 14px 34px rgba(15,23,56,.2)}
.b6-cycle .ic{width:26px;height:26px;stroke-width:2.2}
.hs--loop.is-active .b6-cycle .ic{animation:spin 8s linear infinite}

/* ───── 8 · Ticker — the businesses SAPOTR supports ───── */
.ticker{position:relative;overflow:hidden;background:var(--navy-2);
  border-top:1px solid rgba(18,199,199,.35);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 14px 26px -18px rgba(0,0,0,.7)}
.ticker-row{display:flex;padding:18px 0;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-inner{display:flex;width:max-content;animation:marquee 64s linear infinite;will-change:transform}
.ticker-track{display:flex;align-items:center;gap:26px;flex:none;padding-right:26px}
.ticker-track li{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:clamp(16px,1.3vw,18.5px);font-weight:700;color:rgba(255,255,255,.94)}
.tk-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:rgba(18,199,199,.14);color:var(--cyan)}
.tk-ic .ic{width:18px;height:18px}
.ticker-track li:nth-child(6n+3) .tk-ic{background:rgba(255,193,7,.14);color:var(--yellow)}
.ticker-track li:nth-child(6n+5) .tk-ic{background:rgba(255,75,43,.16);color:#ff7a60}
.ticker-track .tk-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);opacity:.55}
.ticker-row:hover .ticker-inner{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ───── 9 · Sections 2–5 — the frozen site's benefit bento ─────
   Four sections (support, time, growth, costs), each its own heading over a
   bento of key-point cards, spaced like every other .section. The
   cards, grid and breakpoints are the frozen #benefits: white tiles with a
   tinted icon chip, a cyan pointer spotlight and a lift on hover, plus the
   frozen feature cards (navy, the SAPOTR on a cyan wash, the app loop). Four
   columns, three from 1180px, two up on phones with the big cards full width. */
/* the section heading is a .sec-title, the same scale as the Industries heading */
.bf-title{max-width:30ch}
/* a hairline where one benefit section ends and the next begins — content width, fading at the ends */
.bf-sec + .bf-sec > .wrap{position:relative}
.bf-sec + .bf-sec > .wrap::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--pad));height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}

/* the bento: each group's template places its cards (.p1–.p6, in reading order) */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(196px,auto);gap:16px;margin-top:var(--title-gap)}
.p1{grid-area:p1}.p2{grid-area:p2}.p3{grid-area:p3}.p4{grid-area:p4}.p5{grid-area:p5}.p6{grid-area:p6}
.bf--crisis .bento{grid-template-areas:"p1 p1 p3 p2" "p5 p6 p3 p4"}
.bf--time   .bento{grid-template-areas:"p1 p2 p4 p4" "p3 p5 p4 p4"}
.bf--grow   .bento{grid-template-areas:"p1 p1 p2 p3" "p1 p1 p2 p4"}
.bf--cost   .bento{grid-template-areas:"p1 p1 p3 p3" "p2 p2 p3 p3"}

/* the card — the frozen .tile */
.tile{position:relative;display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;isolation:isolate;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease)}
.tile:hover,.js .tile[data-r].in:hover{box-shadow:var(--sh-m);border-color:var(--line-2);transform:translateY(-3px)}
/* cursor spotlight — the card lights up under the pointer */
.tile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(18,199,199,.1),transparent 62%)}
.tile:hover::before{opacity:1}
/* a key point: a short heading, then the rest of the point */
.tile h4{margin:0 0 6px;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--ink);text-wrap:balance}
.tile p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-3);max-width:34ch}
.tile-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:16px;flex:none;transition:transform .3s var(--ease)}
.tile-ic .ic{width:21px;height:21px}
.tile:hover .tile-ic{transform:scale(1.08) rotate(-4deg)}
.viz{display:block;margin-top:auto;padding-top:20px}
/* the feature cards carry a feature-sized title */
.tile--navy h4,.tile--rise h4,.tile--week h4,.loop-copy h4{font-size:clamp(22px,2vw,28px);font-weight:800;line-height:1.16;letter-spacing:-.025em}

/* navy — the frozen earnings card */
.tile--navy{background:radial-gradient(ellipse 80% 70% at 100% 0%,#1E2A63,var(--navy) 60%);border-color:transparent;padding:30px}
.tile--navy::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,193,7,.14),transparent 62%)}
.tile--navy .tile-ic{background:rgba(255,193,7,.16);color:var(--yellow)}
.tile--navy h4{color:#fff}
.tile--navy p{color:rgba(255,255,255,.72);font-size:15.5px}
.viz-toggles{display:flex;flex-wrap:wrap;gap:10px}
.viz-toggles i{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;font-style:normal;font-size:13.5px;font-weight:800;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.16);transition:background .4s var(--ease),color .4s var(--ease)}
.viz-toggles .ic{width:16px;height:16px}
.tile.in .viz-toggles i{animation:bf-tog 6s var(--ease) infinite}
.tile.in .viz-toggles i:nth-child(2){animation-delay:3s}
@keyframes bf-tog{0%,4%{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}8%,44%{background:var(--cyan);border-color:var(--cyan);color:#fff}50%,100%{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}}

/* a SAPOTR rising out of a cyan card — the frozen "Work Flexibly" card */
.tile--pic{padding-bottom:0;background:linear-gradient(180deg,#EFFAFA 0%,#D8F3F3 100%);border-color:rgba(18,199,199,.22)}
.tile--pic .tile-ic{background:#fff}
.pic-person{display:block;width:auto;max-width:100%;height:clamp(230px,24vw,300px);margin:auto auto 0;padding-top:16px;object-fit:contain;object-position:50% 100%;
  mask-image:linear-gradient(180deg,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
  transform:translateY(10px);transition:transform .6s var(--ease)}
.tile--pic:hover .pic-person{transform:translateY(0)}

/* "our tech finds staff" — the frozen radar */
.viz-radar{position:absolute;right:-34px;top:-34px;width:150px;height:150px;margin:0;padding:0;pointer-events:none}
.viz-radar i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(18,199,199,.22)}
.viz-radar i:nth-child(2){inset:24px}
.viz-radar i:nth-child(3){inset:48px;background:rgba(18,199,199,.08)}
.viz-radar b{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(18,199,199,.18)}
.viz-radar b:nth-of-type(1){left:44px;top:92px;background:var(--red);box-shadow:0 0 0 4px rgba(255,75,43,.16)}
.viz-radar b:nth-of-type(2){left:92px;top:108px}
.viz-radar b:nth-of-type(3){left:30px;top:56px;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,193,7,.2)}
.tile.in .viz-radar b{animation:bf-blink 2.6s var(--ease) infinite}
.tile.in .viz-radar b:nth-of-type(2){animation-delay:.8s}
.tile.in .viz-radar b:nth-of-type(3){animation-delay:1.6s}
@keyframes bf-blink{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

/* the business loop — the frozen app card */
.tile--loop{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px;padding:30px;
  background:linear-gradient(150deg,#FFFFFF 0%,#F2FBFB 100%)}
.loop{--size:260px;position:relative;width:var(--size);height:var(--size);justify-self:center}
.loop-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.loop-ring circle{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 5}
.loop-ring .loop-run{stroke:var(--cyan);stroke-width:3;stroke-dasharray:490;stroke-dashoffset:490;stroke-linecap:round}
.tile.in .loop-run{animation:bf-run 6s linear infinite}
@keyframes bf-run{to{stroke-dashoffset:0}}
.loop-mark{position:absolute;left:50%;top:50%;width:30%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 24px rgba(15,23,56,.16))}
.loop-n{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;margin:-22px 0 0 -52px;
  transform:rotate(var(--a)) translate(calc(var(--size) * .39)) rotate(calc(var(--a) * -1))}
.loop-n .ic{box-sizing:content-box;width:20px;height:20px;padding:11px;border-radius:14px;background:#fff;color:var(--navy);
  border:1px solid var(--line);box-shadow:var(--sh-m);transition:background .3s,color .3s}
.loop-n b{font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.86)}
.tile.in .loop-n .ic{animation:bf-hl 6s linear infinite;animation-delay:calc(var(--i) * 1.5s)}
/* "Hire. SAPOTR Arrives. Work Done. Repeat." — one step per line, each arriving in turn */
.loop-steps > span{display:block}
.js .loop-steps > span{opacity:0;transform:translateY(10px)}
.tile.in .loop-steps > span{animation:bf-step .5s var(--ease) forwards;animation-delay:calc(.25s + var(--l) * .32s)}
@keyframes bf-step{to{opacity:1;transform:none}}
@keyframes bf-hl{0%,22%{background:var(--cyan);color:#fff;border-color:var(--cyan)}25%,100%{background:#fff;color:var(--navy)}}

/* "increase revenue" — the frozen weekly bars, rising */
.viz-rise{display:flex;gap:10px;align-items:flex-end;height:96px;padding-top:28px;box-sizing:content-box}
.viz-rise i{flex:1;height:0;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--yellow),rgba(255,193,7,.18));transition:height .9s var(--ease) var(--d)}
.tile.in .viz-rise i{height:var(--h,100%)}

/* "hire for a few hours, a day, every week" — a week of shifts */
.viz-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:250px}
.viz-days i{display:grid;place-items:center;height:30px;border-radius:9px;background:var(--tint);font-style:normal;font-size:11.5px;font-weight:800;color:var(--ink-3);
  transition:background .4s var(--ease),color .4s var(--ease)}
.tile.in .viz-days i.on{background:rgba(18,199,199,.14);color:var(--cyan-ink)}
.tile.in .viz-days i:nth-child(2){transition-delay:.2s}.tile.in .viz-days i:nth-child(4){transition-delay:.3s}
.tile.in .viz-days i:nth-child(5){transition-delay:.4s}.tile.in .viz-days i:nth-child(6){transition-delay:.5s}

/* "permanent hiring for occasional demands" — the same week, twice */
.viz-week2{display:grid;gap:10px}
.wk-days,.wk-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wk-days{margin-left:var(--wk-lab,150px)}
.wk-days i{font-style:normal;font-size:11px;font-weight:800;color:var(--ink-3);text-align:center}
.wk-row{display:grid;grid-template-columns:var(--wk-lab,150px) minmax(0,1fr);align-items:center}
.wk-row b{font-size:13px;font-weight:800;color:var(--ink-2)}
.wk-cells i{height:30px;border-radius:8px;background:var(--tint);border:1px dashed var(--line-2);transition:background .5s var(--ease),border-color .5s var(--ease)}
.tile.in .wk-cells i.on{background:rgba(15,23,56,.72);border-color:transparent}
.tile.in .wk-row--sap .wk-cells i.on{background:var(--cyan)}
.tile.in .wk-cells i:nth-child(2){transition-delay:.06s}.tile.in .wk-cells i:nth-child(3){transition-delay:.12s}
.tile.in .wk-cells i:nth-child(4){transition-delay:.18s}.tile.in .wk-cells i:nth-child(5){transition-delay:.24s}
.tile.in .wk-cells i:nth-child(6){transition-delay:.3s}.tile.in .wk-cells i:nth-child(7){transition-delay:.36s}
.wk-row--sap b{color:var(--cyan-ink)}
/* two rows tall from tablets up: a fuller week */
@media (min-width:681px){
  /* the cost card's picture takes whatever height the card has left */
  .tile--fill .pic-person{flex:1 1 0;width:100%;height:auto;min-height:240px}
  .tile--week{padding:30px}
  .tile--week .viz-week2{gap:14px}
  .tile--week .wk-cells i{height:44px;border-radius:10px}
  .tile--week .wk-row b{font-size:14px}
}

/* ───── 10 · Businesses across NZ — the frozen site's card rail ─────
   The rail (also used by the safety cards on phones) is the frozen
   site's work-types carousel: three cards on a desktop, two on a
   tablet, one wide card with the next peeking in on a phone. The
   track moves by transform, one card at a time (script.js §9). */
.rail-vp{--rail-gap:24px;--rail-per:3;margin-top:var(--title-gap);padding:12px 0 22px;overflow:hidden;overflow:clip}
.rail-track{display:flex;align-items:flex-start;gap:var(--rail-gap);touch-action:pan-y pinch-zoom;will-change:transform;transition:transform .75s var(--ease)}
.rail-track > *{flex:0 0 calc((100% - (var(--rail-per) - 1) * var(--rail-gap)) / var(--rail-per));min-width:0}
.rail-vp.is-dragging .rail-track{-webkit-user-select:none;user-select:none}
@media (hover:hover) and (pointer:fine){.rail-vp:not(.is-static) .rail-track{cursor:grab}.rail-vp.is-dragging .rail-track{cursor:grabbing}}
.rail-track img{-webkit-user-drag:none;user-drag:none}
.rail-ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.rail-ui[hidden]{display:none}
/* nothing to move (everything fits): a plain row, shadows free to show */
.rail-vp.is-static{overflow:visible}
/* without the script the rail is a native, snapping scroller */
.no-js .rail-vp{overflow-x:auto;scroll-snap-type:x mandatory}
.no-js .rail-track > *{scroll-snap-align:start}
.no-js .rail-ui{display:none}

.ind-title{max-width:30ch}
.ind{--acc:var(--cyan);--acc-soft:rgba(18,199,199,.12);--acc-ink:var(--cyan-ink);
  position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,56,.04),0 8px 24px rgba(15,23,56,.04);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s var(--ease)}
.ind--yellow{--acc:var(--yellow);--acc-soft:rgba(255,193,7,.16);--acc-ink:var(--yellow-ink)}
.ind--red{--acc:var(--red);--acc-soft:rgba(255,75,43,.09);--acc-ink:var(--red-ink)}
/* an accent rule that draws across the top on hover, and stays while open */
.ind::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.ind:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(15,23,56,.04),0 24px 50px rgba(15,23,56,.11);border-color:rgba(15,23,56,.1)}
.ind:hover::before,.ind.is-open::before{transform:scaleX(1)}
.ind.is-open{border-color:rgba(15,23,56,.12)}
.ind-media{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.ind-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1s var(--ease)}
.ind-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,23,56,.45) 0%,rgba(15,23,56,0) 55%)}
.ind:hover .ind-media img{transform:scale(1.05)}
.ind-flag{position:absolute;z-index:2;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 11px;border-radius:9px;
  background:rgba(255,255,255,.95);color:var(--ink);font-size:12.5px;font-weight:800;box-shadow:0 8px 20px rgba(15,23,56,.2)}
.ind-flag .ic{width:16px;height:16px}
.ind-body{display:flex;flex-direction:column;padding:0 22px 22px}
.ind-head{display:flex;align-items:flex-end;justify-content:space-between;margin:-26px 0 12px}
.ind-ic{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#fff;color:var(--acc-ink);
  border:1px solid var(--line);box-shadow:0 10px 24px rgba(15,23,56,.14);
  transition:transform .45s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.ind-ic .ic{width:24px;height:24px}
.ind:hover .ind-ic,.ind.is-open .ind-ic{background:var(--navy);border-color:var(--navy);color:var(--acc)}
.ind:hover .ind-ic{transform:translateY(-3px) rotate(-6deg)}
.ind-n{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color .35s var(--ease)}
.ind:hover .ind-n{color:var(--acc-ink)}
/* the card title is the dropdown: the name on the left, a chevron chip on the right */
.ind-name{margin:0;font-size:var(--box-title);font-weight:800;line-height:1.3}
.ind-q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:calc(2.6em + 16px);padding:8px 0;
  border:0;border-bottom:1px dashed var(--line-2);background:none;font:inherit;letter-spacing:inherit;word-spacing:inherit;color:inherit;text-align:left;cursor:pointer;text-wrap:balance}
.ind-q:hover{color:var(--ink)}
.ind-q[aria-expanded="true"]{border-bottom-color:transparent}
.ind-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.ind-tags li{padding:7px 12px;border-radius:9px;background:var(--acc-soft);font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.ind-p{margin:0;padding-top:14px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.ind.is-open .ind-tags li{animation:pop .4s var(--ease) both}
.ind.is-open .ind-tags li:nth-child(2){animation-delay:.04s}.ind.is-open .ind-tags li:nth-child(3){animation-delay:.08s}
.ind.is-open .ind-tags li:nth-child(4){animation-delay:.12s}.ind.is-open .ind-tags li:nth-child(5){animation-delay:.16s}
.ind.is-open .ind-tags li:nth-child(6){animation-delay:.2s}.ind.is-open .ind-tags li:nth-child(7){animation-delay:.24s}

/* chevron in a soft chip: points down closed, flips up open (industries + FAQ) */
.ind-x,.acc-x{position:relative;width:32px;height:32px;flex:none;margin-left:auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(15,23,56,.06);transition:transform .38s var(--ease),background .3s var(--ease)}
.ind-x::before,.acc-x::before{content:"";width:8px;height:8px;margin-top:-3px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  border-bottom-right-radius:1.5px;transform:rotate(45deg);transition:border-color .3s var(--ease)}
.ind-q:hover .ind-x{background:var(--acc-soft)}
.ind-q[aria-expanded="true"] .ind-x,.acc-q[aria-expanded="true"] .acc-x{transform:rotate(180deg)}
.ind-q[aria-expanded="true"] .ind-x{background:var(--navy)}
.ind-q[aria-expanded="true"] .ind-x::before{border-color:#fff}
.acc-q[aria-expanded="true"] .acc-x{background:rgba(18,199,199,.14)}
.acc-q[aria-expanded="true"] .acc-x::before{border-color:var(--cyan-ink)}
/* the open/close itself: rows from 0fr to 1fr, and hidden from assistive tech while shut */
.ind-a,.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.ind-a > div,.acc-a > div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .4s}
.ind.is-open .ind-a,.acc-i.is-open .acc-a{grid-template-rows:1fr}
.ind.is-open .ind-a > div,.acc-i.is-open .acc-a > div{visibility:visible;transition-delay:0s}
.no-js .ind-a,.no-js .acc-a{grid-template-rows:1fr}
.no-js .ind-a > div,.no-js .acc-a > div{visibility:visible}

/* ───── 11 · Safety & trust — the frozen site's heading and cards ───── */
.safe-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px}
.safe-title{max-width:none;line-height:1.16}
/* the two lines under the headline read like the site's sublines (.sec-sub) */
.sec-title .ln--sub{font-size:clamp(18px,1.6vw,21.5px);font-weight:500;line-height:1.5;letter-spacing:normal;word-spacing:.02em;color:var(--ink-2)}
.sec-title .ln:not(.ln--sub) + .ln--sub{margin-top:18px}
.safe-badge{position:relative;display:grid;place-items:center;flex:none;width:96px;height:96px;margin:0 12px 12px 0;border-radius:28px;
  background:linear-gradient(150deg,var(--navy-2),var(--navy));color:var(--cyan);box-shadow:0 24px 50px rgba(15,23,56,.24)}
.safe-badge .ic{width:44px;height:44px;stroke-width:1.5}
.safe-badge::before{content:"";position:absolute;inset:-12px;border-radius:40px;border:1.5px dashed rgba(18,199,199,.4);animation:spin 40s linear infinite}
/* desktop: four cards in a row; tablet: two by two; phone: a one-card rail */
.safe-title .ln:not(.ln--sub) + .ln--sub{margin-top:28px}
.safe-vp{--rail-per:4;--rail-gap:20px;margin-top:clamp(40px,4.4vw,64px)}
.safe-grid{align-items:stretch}
.safe{position:relative;display:flex;flex-direction:column;padding:12px 12px 28px;background:#fff;border:1px solid var(--line);border-radius:22px;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease)}
.safe:hover{box-shadow:var(--sh-l);border-color:var(--line-2);transform:translateY(-4px)}
.safe h3{margin:0 14px 10px;font-size:19px;font-weight:800;line-height:1.28}
.safe p{margin:0 14px;font-size:15px;line-height:1.6;color:var(--ink-3)}
.safe-ic{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;margin:-25px 14px 18px;border-radius:15px;border:3px solid #fff;box-shadow:var(--sh-m)}
.safe-ic .ic{width:23px;height:23px}
.safe-viz{position:relative;height:164px;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.sv-id{background:linear-gradient(160deg,#EFFAFA,#DDF3F3)}
.sv-nz{background:linear-gradient(160deg,#FFF8E6,#FFEFC2)}
.sv-police{background:linear-gradient(160deg,#FFF1EE,#FFDCD4)}
.sv-track{background:linear-gradient(160deg,#EEF1FA,#E1E6F4)}
.sv-card{display:flex;align-items:center;gap:14px;width:176px;padding:16px;background:#fff;border-radius:14px;box-shadow:0 14px 30px rgba(15,23,56,.12)}
.sv-av{position:relative;width:48px;height:48px;flex:none;overflow:hidden;border-radius:12px;background:rgba(18,199,199,.14)}
.sv-av::before{content:"";position:absolute;left:50%;top:10px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--cyan-ink);opacity:.55}
.sv-av::after{content:"";position:absolute;left:50%;bottom:-10px;width:32px;height:24px;margin-left:-16px;border-radius:50%;background:var(--cyan-ink);opacity:.55}
.sv-lines{display:flex;flex-direction:column;gap:7px;flex:1}
.sv-lines i{height:7px;border-radius:4px;background:var(--line)}
.sv-lines i:nth-child(1){width:90%;background:var(--navy);opacity:.8}.sv-lines i:nth-child(2){width:70%}.sv-lines i:nth-child(3){width:50%}
.sv-lic{position:absolute;left:calc(50% - 104px);bottom:34px;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--navy);color:var(--cyan);
  box-shadow:0 10px 22px rgba(15,23,56,.28)}
.sv-lic .ic{width:21px;height:21px}
.sv-tick{position:absolute;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#fff;
  box-shadow:0 6px 16px rgba(18,199,199,.4);opacity:0;transform:scale(.4);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.sv-tick .ic{width:16px;height:16px;stroke-width:3}
.sv-tick--1{left:calc(50% + 70px);top:36px;transition-delay:.4s}
.sv-tick--2{left:calc(50% + 70px);bottom:36px;transition-delay:.7s}
.safe-vp.in .sv-tick{opacity:1;transform:none}
.sv-doc{position:relative;display:flex;flex-direction:column;gap:9px;width:104px;height:128px;padding:18px 14px;background:#fff;border-radius:10px;box-shadow:0 14px 30px rgba(15,23,56,.12)}
.sv-doc i{height:6px;border-radius:3px;background:var(--line)}
.sv-doc i:first-child{width:60%;background:var(--navy);opacity:.75}
.sv-doc i:nth-child(3){width:80%}.sv-doc i:nth-child(4){width:50%}
.sv-nz .sv-doc b{align-self:flex-start;padding:3px 8px;border-radius:6px;background:var(--navy);color:var(--yellow);font-size:11px;font-weight:800;letter-spacing:.08em}
.sv-nz .sv-doc i:first-of-type{width:80%;background:var(--line)}
.sv-stamp{position:absolute;left:calc(50% + 26px);bottom:24px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:3px solid var(--yellow-ink);color:var(--yellow-ink);background:rgba(255,255,255,.7);opacity:0;transform:scale(1.6) rotate(-14deg);
  transition:opacity .35s var(--ease) .5s,transform .45s var(--ease) .5s}
.sv-stamp .ic{width:22px;height:22px;stroke-width:3}
.safe-vp.in .sv-stamp{opacity:1;transform:rotate(-14deg)}
.sv-scan{position:absolute;left:calc(50% - 64px);width:128px;height:3px;top:26px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);box-shadow:0 0 16px rgba(255,75,43,.6)}
.safe-vp.in .sv-scan{animation:scan 2.6s var(--ease) infinite alternate}
@keyframes scan{to{top:146px}}
.sv-shield{position:absolute;left:calc(50% + 30px);bottom:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--navy);color:#ff7a60;box-shadow:0 10px 24px rgba(15,23,56,.3)}
.sv-shield .ic{width:24px;height:24px}
.sv-route{position:absolute;left:6%;top:12%;width:88%;height:48%;overflow:visible}
.sv-route path{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-dasharray:5 7;stroke-linecap:round;opacity:.35;vector-effect:non-scaling-stroke}
.sv-stop{position:absolute;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--ink-2);
  white-space:nowrap;transform:translate(-50%,-9px)}
.sv-stop i{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--line-2)}
.sv-stop--1{left:13.5%;top:52%}
.sv-stop--2{left:50%;top:24%}
.sv-stop--3{left:86.5%;top:52%}
.safe-vp.in .sv-stop i{animation:stop 4.5s var(--ease) infinite}
.safe-vp.in .sv-stop--2 i{animation-delay:1.5s}
.safe-vp.in .sv-stop--3 i{animation-delay:3s}
@keyframes stop{0%,30%{background:var(--cyan);border-color:#fff;box-shadow:0 0 0 5px rgba(18,199,199,.25)}36%,100%{background:#fff;border-color:var(--line-2);box-shadow:none}}
.sv-stars{position:absolute;left:50%;bottom:14px;display:flex;gap:3px;padding:6px 10px;translate:-50% 0;border-radius:10px;background:#fff;color:var(--yellow);
  box-shadow:0 8px 20px rgba(15,23,56,.1)}
.sv-stars .ic{width:15px;height:15px;fill:currentColor;stroke-width:1}

/* ───── 12 · Testimonials — one at a time ───── */
.tm-title{max-width:24ch}
.tm-stage{position:relative;max-width:1060px;margin:var(--title-gap) auto 0;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.tm-slides{display:grid;grid-template-areas:"s";grid-template-columns:minmax(0,1fr)}
.tm-slide{grid-area:s;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:30px;overflow:hidden;box-shadow:0 30px 70px rgba(15,23,56,.08);
  opacity:0;visibility:hidden;transform:translateX(30px);
  transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s linear .6s}
.tm-slide.is-active{z-index:2;opacity:1;visibility:visible;transform:translateX(var(--hdx,0px));transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s}
.tm-slide.is-out{z-index:1;opacity:0;visibility:visible;transform:translateX(-30px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.tm-stage.is-dragging .tm-slide{transition:none}
.tm-stage.is-dragging{-webkit-user-select:none;user-select:none}
.tm-stage img{-webkit-user-drag:none;user-drag:none}
.tm-photo{position:relative;min-height:380px;background:var(--tint)}
.tm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.tm-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,23,56,.18),transparent 40%)}
.tm-body{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,4.4vw,60px)}
.tm-mark{display:block;height:46px;margin-bottom:12px;font-size:110px;line-height:.9;font-weight:800;color:var(--cyan);font-family:Georgia,"Times New Roman",serif}
.tm-body blockquote{margin:0}
.tm-body blockquote p{margin:0;font-size:clamp(20px,1.95vw,26px);font-weight:700;line-height:1.5;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.tm-body figcaption{display:flex;flex-direction:column;gap:3px;margin-top:clamp(24px,3vw,34px);padding-top:20px;border-top:1px solid var(--line)}
.tm-body figcaption b{font-size:17.5px;font-weight:800;color:var(--ink)}
.tm-body figcaption span{font-size:15px;font-style:italic;font-weight:500;color:var(--ink-3)}
.tm-ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px}
.tm-count{min-width:62px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tm-count b{font-weight:800;color:var(--ink)}
.dots{display:flex;justify-content:center;gap:7px}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line-2);cursor:pointer;
  transition:width .28s var(--ease),background .28s var(--ease)}
.dots button[aria-selected="true"]{width:24px;border-radius:4px;background:var(--cyan)}

/* ───── 13 · Growing across NZ ───── */
/* the navy band spans the full viewport; .grow-panel inside .wrap only holds the content,
   so the heading and stats keep the same alignment as every other section */
.grow{overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(ellipse 60% 100% at 100% 0%,#1E2A63 0%,var(--navy) 55%,#0A1030 100%)}
.grow::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background-image:radial-gradient(rgba(18,199,199,.22) 1.3px,transparent 1.3px);background-size:20px 20px;
  mask-image:radial-gradient(ellipse 40% 70% at 92% 10%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 40% 70% at 92% 10%,#000,transparent 70%)}
/* the mark's three swooshes, as a quiet corner flourish */
.grow-stripes,.cta-stripes{position:absolute;z-index:-1;pointer-events:none}
.grow-stripes{right:-60px;top:-40px;width:360px;height:260px;transform:rotate(-24deg)}
.grow-stripes i,.cta-stripes i{position:absolute;right:0;height:26px;border-radius:999px;opacity:.22}
.grow-stripes i:nth-child(1),.cta-stripes i:nth-child(1){top:40px;width:100%;background:var(--yellow)}
.grow-stripes i:nth-child(2),.cta-stripes i:nth-child(2){top:84px;width:86%;background:var(--red)}
.grow-stripes i:nth-child(3),.cta-stripes i:nth-child(3){top:128px;width:72%;background:var(--cyan)}
/* the heading leads; the subtitle supports it, clearly readable but well below it */
.grow-head{display:flex;flex-direction:column;gap:20px}
.grow-head h2{margin:0;color:#fff;font-size:clamp(30px,3.3vw,46px);line-height:1.1}
.grow-sub{margin:0;max-width:44ch;font-size:clamp(18.5px,1.75vw,23px);font-weight:600;line-height:1.45;color:rgba(255,255,255,.82)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:clamp(40px,4.6vw,60px) 0 0}
.stat{--acc:var(--cyan);position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;padding:24px 22px 22px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:background .3s var(--ease),border-color .3s var(--ease)}
.stat:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.stat::before{content:"";position:absolute;left:22px;top:0;width:40px;height:3px;border-radius:0 0 3px 3px;background:var(--acc);box-shadow:0 0 16px var(--acc)}
.stat--y{--acc:var(--yellow)} .stat--r{--acc:var(--red)} .stat--w{--acc:#fff}
.stat dd{margin:0;font-size:clamp(32px,3vw,44px);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat dd i{font-style:normal;color:var(--acc);margin-left:2px}
.stat dt{font-size:14.5px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.74)}

/* ───── 14 · Hire a SAPOTR — the frozen site's three steps ─────
   Same cards, road and mini phones as "Become a SAPOTR"; the screens
   carry the first Business version's app screens. */
.journey{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px);margin-top:var(--title-gap)}
/* the dashed road between the three step badges, filled as it enters view */
.journey::before,.journey::after{content:"";position:absolute;top:368px;left:48px;right:calc((100% - 2 * clamp(20px,2.4vw,32px)) / 3 - 48px);height:2px;margin-top:-1px}
.journey::before{background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px)}
.journey::after{background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--red));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .3s}
.journey.in::after{transform:scaleX(1)}
.step{position:relative;display:flex;flex-direction:column}
.step-viz{position:relative;height:368px;border-radius:var(--r-xl);overflow:hidden}
.sx-1{background:linear-gradient(165deg,#EFFAFA,#D6F2F2)}
.sx-2{background:linear-gradient(165deg,#FFF8E6,#FFECBA)}
.sx-3{background:linear-gradient(165deg,#FFF2EF,#FFDAD1)}
.step-viz::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(15,23,56,.12) 1.2px,transparent 1.2px);background-size:18px 18px}
/* the phone: centred, shrinking a little on a narrow card and kept clear of
   the step badge that sits on the card's bottom-left corner */
.mini-phone{--pw:min(248px,100% - 88px);position:absolute;left:max(78px,50% - var(--pw) / 2);bottom:-34px;display:flex;flex-direction:column;
  width:var(--pw);height:384px;padding:22px 18px;transform:translateY(20px);background:#fff;border:7px solid var(--navy);border-radius:32px;
  box-shadow:0 30px 60px rgba(15,23,56,.22);transition:transform .8s var(--ease)}
.step.in .mini-phone{transform:none}
.step:hover .mini-phone{transform:translateY(-6px)}
/* inside each phone: the first Business version's app screens, scaled to
   the mini phone. All three show at once, so each one plays its moment
   (account ready · finding → matched · tracked, paid, rated) when its
   step comes into view. */
.hp-view{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px}
.hp-h,.hp-btn,.hp-ok,.hp-match,.hp-pay,.hp-track li{white-space:nowrap}
.hp-h{font-size:14px;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.hp-app{display:grid;place-items:center;justify-self:center;width:44px;height:44px;margin-top:2px;border-radius:13px;background:var(--navy);box-shadow:0 10px 22px rgba(15,23,56,.25)}
.hp-app img{width:26px;height:auto}
.sx-1 .hp-h{text-align:center;margin-bottom:2px}
.hp-field{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:10px;background:#fff;border:1px solid var(--line);
  font-size:12px;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap}
.hp-field small{font-size:9px;font-weight:700;color:var(--ink-3)}
.hp-btn{display:grid;place-items:center;padding:9px;border-radius:10px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;line-height:1.25}
.hp-btn--red{background:var(--red);box-shadow:0 8px 18px rgba(255,75,43,.3)}
.hp-ok{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:800;line-height:1.25;color:var(--cyan-ink);opacity:0}
.hp-ok .ic{width:13px;height:13px;stroke-width:3}
.step.in .hp-ok{animation:fade-in .4s var(--ease) 1.4s both}
.hp-lbl{font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1.25;text-transform:uppercase;color:var(--ink-3)}
/* the four roles as a two-by-two grid: the screen is too narrow for a wrapping row */
.hp-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hp-roles i{display:flex;align-items:center;padding:6px 8px;border-radius:8px;background:#fff;border:1px solid var(--line);
  font-style:normal;font-size:10px;font-weight:700;line-height:1.3;color:var(--ink-2)}
.hp-roles i.on{background:var(--navy);border-color:var(--navy);color:#fff}
.hp-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);
  font-size:11px;font-weight:700;line-height:1.25;color:var(--ink);white-space:nowrap}
.hp-row .ic{width:14px;height:14px;flex:none;color:var(--cyan-ink)}
.hp-hrs{margin-left:auto;padding:3px 7px;border-radius:6px;background:rgba(255,193,7,.2);color:var(--yellow-ink);font-size:10px}
/* "finding" and then "matched" take the Hire Now button's place */
.hp-btn--red,.hp-find,.hp-match{grid-row:6;grid-column:1}
.hp-find,.hp-match{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;opacity:0}
.hp-find{background:var(--navy);color:#fff;font-size:11px;font-weight:800;line-height:1.25}
.hp-find small{display:block;font-size:9px;font-weight:600;color:rgba(255,255,255,.7)}
.hp-spin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--cyan)}
.hp-match{justify-content:center;background:var(--cyan);color:var(--navy);font-size:12px;font-weight:800}
.hp-match .ic{width:15px;height:15px;stroke-width:2.4}
.step.in .hp-find{animation:hp-find 2.4s var(--ease) 1.2s both}
.step.in .hp-spin{animation:spin .8s linear 1.2s 3}
.step.in .hp-match{animation:fade-in .4s var(--ease) 3.4s both}
@keyframes hp-find{0%{opacity:0;transform:translateY(6px)}15%,85%{opacity:1;transform:none}100%{opacity:0}}
.hp-track{position:relative;display:flex;flex-direction:column;gap:12px;padding:12px 12px 12px 30px;border-radius:11px;background:#fff;border:1px solid var(--line)}
.hp-track::before{content:"";position:absolute;left:14px;top:20px;bottom:20px;width:2px;background:var(--line)}
.hp-track li{position:relative;font-size:11px;font-weight:700;line-height:1.3;color:var(--ink-3)}
.hp-track li::before{content:"";position:absolute;left:-22px;top:1.5px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid var(--line-2)}
.step.in .hp-track li{animation:hp-step .3s var(--ease) both;animation-delay:calc(.6s + var(--i) * .5s)}
.step.in .hp-track li::before{animation:hp-dot .3s var(--ease) both;animation-delay:calc(.6s + var(--i) * .5s)}
@keyframes hp-step{to{color:var(--ink)}}
@keyframes hp-dot{to{background:var(--cyan);border-color:#fff;box-shadow:0 0 0 2px var(--cyan)}}
.hp-pay{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:800;line-height:1.25}
.hp-pay .ic{width:14px;height:14px;color:var(--yellow)}
.hp-pay b{margin-left:auto;padding:3px 7px;border-radius:6px;background:var(--cyan);color:var(--navy);font-size:9.5px;opacity:0}
.step.in .hp-pay b{animation:fade-in .35s var(--ease) 2.8s both}
.hp-pay + .hp-lbl{margin-top:4px}
.hp-stars{display:flex;justify-content:center;gap:5px;color:var(--line-2)}
.hp-stars .ic{width:18px;height:18px;fill:currentColor;stroke-width:1}
.step.in .hp-stars .ic{animation:hp-star .3s var(--ease) both}
.step.in .hp-stars .ic:nth-child(1){animation-delay:3.2s}.step.in .hp-stars .ic:nth-child(2){animation-delay:3.32s}
.step.in .hp-stars .ic:nth-child(3){animation-delay:3.44s}.step.in .hp-stars .ic:nth-child(4){animation-delay:3.56s}
.step.in .hp-stars .ic:nth-child(5){animation-delay:3.68s}
@keyframes hp-star{from{transform:scale(.6)}to{color:var(--yellow);transform:none}}
.step-n{position:relative;z-index:2;display:grid;place-items:center;width:50px;height:50px;margin:-25px 0 0 20px;border-radius:15px;border:4px solid #fff;
  background:var(--navy);color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em;box-shadow:0 12px 26px rgba(15,23,56,.24)}
.step:nth-child(2) .step-n{background:var(--yellow);color:var(--navy)}
.step:nth-child(3) .step-n{background:var(--red)}
.step h3{margin:18px 0 8px;font-size:var(--box-title);font-weight:800;line-height:1.24}
.step p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:36ch}
.hire-cta{display:flex;justify-content:center;margin-top:clamp(44px,5vw,64px)}

/* ───── 15 · FAQ — two columns, one answer open ───── */
.faq::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(15,23,56,.07) 1.2px,transparent 1.2px);background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000,transparent 40%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 40%)}
.faq .wrap{position:relative}
.acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin-top:var(--title-gap);align-items:start}
.acc-col{display:flex;flex-direction:column;gap:12px}
.acc-i{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:0 1px 2px rgba(15,23,56,.03);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
/* a slim cyan rule marks the open answer */
.acc-i::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--cyan);
  transform:scaleY(0);transition:transform .4s var(--ease)}
.acc-i:hover{background:#FBFBFD;border-color:rgba(15,23,56,.14)}
.acc-i.is-open{background:#fff;border-color:rgba(18,199,199,.38);box-shadow:0 12px 30px rgba(15,23,56,.07)}
.acc-i.is-open::before{transform:scaleY(1)}
.acc-i h3{margin:0;font-size:inherit;letter-spacing:normal;line-height:inherit}
.acc-q{width:100%;min-height:64px;display:flex;align-items:center;gap:14px;padding:17px 18px;background:none;border:0;text-align:left;cursor:pointer;
  font-size:17px;font-weight:700;line-height:1.4;color:var(--ink);letter-spacing:-.005em;border-radius:inherit}
.acc-n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:var(--tint);font-size:11.5px;font-weight:800;
  color:var(--ink-3);font-variant-numeric:tabular-nums;transition:background .3s var(--ease),color .3s var(--ease)}
.acc-i:hover .acc-n{background:rgba(15,23,56,.07);color:var(--ink-2)}
.acc-q[aria-expanded="true"] .acc-n{background:var(--navy);color:var(--yellow)}
.acc-x{width:30px;height:30px;background:transparent}
.acc-i:hover .acc-x{background:rgba(15,23,56,.06)}
.acc-a p{margin:0;padding:0 24px 22px 62px;font-size:15.5px;line-height:1.7;color:var(--ink-3);
  opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.acc-a strong{font-weight:700;color:var(--ink)}
.acc-i.is-open .acc-a p{opacity:1;transform:none;transition-delay:.08s}

/* ───── 16 · Final CTA — the frozen site's CTA, with Business copy ───── */
.cta{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--navy);padding-block:clamp(96px,10.5vw,156px)}
.cta-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.cta-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,16,48,.97) 0%,rgba(10,16,48,.9) 34%,rgba(10,16,48,.5) 64%,rgba(10,16,48,.28) 100%),
  linear-gradient(0deg,rgba(10,16,48,.6),transparent 42%)}
.cta-swoosh,.story-swoosh{position:absolute}
.cta-swoosh{left:-6%;bottom:-14%;width:112%;height:62%}
.cta-swoosh path,.story-swoosh path{fill:none;stroke-width:34;stroke-linecap:round}
.cta-swoosh path{opacity:.3}
.sw-y{stroke:var(--yellow)} .sw-r{stroke:var(--red)} .sw-c{stroke:var(--cyan)}
.cta-inner{position:relative}
.cta h2{margin:0 0 clamp(26px,3vw,38px);max-width:17ch;color:#fff;font-size:clamp(30px,3.5vw,52px);line-height:1.08;text-wrap:balance}
.cta h2 .ln{display:block}

/* the About page keeps its own brand CTA card */
.cta-sec{position:relative;padding:0 0 var(--pad)}
.cta-card{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(30px,4vw,60px);
  padding:clamp(44px,5.4vw,80px);border-radius:34px;color:#fff;
  background:radial-gradient(ellipse 80% 110% at 0% 100%,#1C2864 0%,var(--navy) 55%,#0A1030 100%)}
.cta-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;
  mask-image:radial-gradient(ellipse 60% 80% at 20% 30%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 80% at 20% 30%,#000,transparent 70%)}
.cta-stripes{left:-150px;bottom:-130px;width:420px;height:200px;transform:rotate(-24deg) scaleX(-1)}
.cta-copy h2{margin:0;color:#fff;font-size:clamp(28px,2.9vw,42px);line-height:1.12;text-wrap:balance}
.cta-copy h2 .ln{display:block}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px}

/* ───── 17 · Footer ───── */
.site-footer{position:relative;background:var(--navy);color:rgba(255,255,255,.66);padding:76px 0 30px;font-size:14.5px}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--yellow),var(--red),var(--cyan))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-logo{display:inline-block}
.foot-brand img{height:46px;width:auto;object-fit:contain}
.foot-tag{margin:18px 0 0;font-size:18px;font-weight:800;color:#fff}
.foot-apps{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.foot-col h2{margin:4px 0 18px;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.foot-col li + li{margin-top:12px}
.foot-col a{position:relative;font-weight:600;color:rgba(255,255,255,.74);transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--cyan)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;padding-top:26px;font-size:13.5px}
.copy{margin:0}
.foot-end{display:flex;align-items:center;gap:22px}
.foot-social{display:flex;gap:10px}
.social{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.social .ic{width:17px;height:17px;fill:currentColor;stroke:none}
.social:hover{color:#fff;border-color:var(--cyan);background:rgba(18,199,199,.14);transform:translateY(-2px)}
.foot-top-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-weight:700;color:rgba(255,255,255,.78);transition:color .2s var(--ease)}
.foot-top-link .ic{width:15px;height:15px;transform:rotate(-90deg);stroke-width:2.4}
.foot-top-link:hover{color:var(--cyan)}

/* ───── 18 · About page ───── */
/* full screen: the fixed header sits transparent over the hero and .ph-inner pads for it,
   so the hero takes the whole viewport (svh: the screen with the mobile browser bars showing) */
.page-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;min-height:max(600px,100vh);min-height:max(600px,100svh);background:var(--navy-deep);color:#fff}
/* the hero is split: the brand navy on the left carries the title, the team photo is the right-hand
   panel. The photo starts where the title ends (or at 42%, whichever is further right), runs to the
   edge at full height, fades into the navy along its left side and is cropped from its centre. */
.page-hero{--ph-fs:clamp(38px,min(5.2vw,8.4vh),72px)}
.ph-photo{position:absolute;top:0;right:0;z-index:0;height:100%;width:calc(100% - max(42%,(100% - 1240px) / 2 + var(--ph-fs) * 7 + 40px));
  object-fit:cover;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%);mask-image:linear-gradient(90deg,transparent 0,#000 20%)}
.ph-title{position:relative;z-index:1}
/* a shade under the header (the same as banner 6's), so the menu sits on navy rather than on the bright
   sky of the photo; below it the photo keeps its own colours */
.ph-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,16,48,.8) 0,rgba(10,16,48,0) 180px)}
.ph-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--head-h) + clamp(30px,6vh,64px));padding-bottom:clamp(56px,9vh,96px)}
.ph-title{margin:0;max-width:10ch;color:#fff;font-size:var(--ph-fs);line-height:1.06;text-wrap:balance}

/* how the name came about: the copy beside the whole SAPOTR crowd */
.name-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.name-lead{margin:clamp(22px,2.4vw,30px) 0 0;max-width:40ch;font-size:clamp(18.5px,1.6vw,22px);line-height:1.6;color:var(--ink-2);font-weight:500}
.name-lead strong{color:var(--ink);font-weight:800}
.name-figure{position:relative;margin:0;display:flex;justify-content:center;isolation:isolate;padding:4% 2% 0}
.name-sun{position:absolute;left:50%;bottom:-6%;z-index:-1;width:min(560px,100%);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,193,7,.42),rgba(255,193,7,.14) 48%,transparent 70%)}
.name-arcs{position:absolute;left:50%;bottom:-20%;z-index:-1;width:min(720px,130%);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 48px,rgba(15,23,56,.06) 48px 49px);
  mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%)}
.name-figure img{width:100%;max-width:560px;height:auto;object-fit:contain}
/* about-name-group.png is ~25% too wide in the file itself: draw it at the true ratio (80% of its width) */
.name-figure .name-photo{max-width:470px;aspect-ratio:1226 / 1027;object-fit:fill}

/* the problem: one supporting line, then the situations as icon tiles */
.prob-lead{margin:20px auto 0;max-width:38ch;text-align:center;font-size:clamp(19px,1.8vw,24px);line-height:1.45;font-weight:600;color:var(--ink-2);text-wrap:balance}
.prob-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin:var(--title-gap) auto 0}
.prob{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.3}
.js .prob[data-r]{transition:opacity .6s var(--ease),transform .4s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.prob:hover{border-color:var(--line-2);box-shadow:var(--sh-m)}
.js .prob[data-r].in:hover{transform:translateY(-2px)}
.prob-ic{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:15px}
.prob-ic .ic{width:24px;height:24px}
.prob--more{background:var(--navy);border-color:var(--navy);color:#fff}
.prob--more .prob-ic{background:rgba(255,193,7,.16);color:var(--yellow)}

/* mission, vision, advantage: a zig-zag of statement and SAPOTR, standing on the section floor */
.story{--acc:var(--cyan);--disc:radial-gradient(circle at 40% 35%,#5FE0E0,var(--cyan) 58%,#0AA9A9);overflow:hidden;isolation:isolate;padding-bottom:0}
.story--mission{background:linear-gradient(180deg,#FFFFFF 0%,#EFF9F9 100%)}
.story--vision{--acc:var(--yellow);--disc:radial-gradient(circle at 40% 35%,#FFD34D,var(--yellow) 60%,#F5B400);background:linear-gradient(180deg,#FFFFFF 0%,#FFF8E8 100%)}
.story--adv{--acc:var(--red);--disc:radial-gradient(circle at 40% 35%,#26347A,var(--navy) 62%,#0A1030);background:linear-gradient(180deg,#FFFFFF 0%,#F3F4FA 100%)}
.story-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.story-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.7}
.story-blob--a{width:420px;height:420px;right:-120px;top:-80px;background:color-mix(in srgb,var(--acc) 22%,transparent)}
.story-blob--b{width:360px;height:360px;left:-120px;bottom:-80px;background:rgba(18,199,199,.12)}
.story-dots{position:absolute;right:7%;top:12%;width:200px;height:140px;opacity:.55;
  background-image:radial-gradient(rgba(15,23,56,.2) 1.4px,transparent 1.4px);background-size:18px 18px}
.story-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:end}
.story--flip .story-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.story--flip .story-figure{order:-1}
.story--flip .story-dots{right:auto;left:7%}
.story-copy{align-self:center;padding-bottom:var(--pad)}
.story-quote{position:relative;margin-top:clamp(30px,3.4vw,44px);padding:clamp(84px,7.4vw,104px) clamp(28px,3.4vw,48px) clamp(32px,3.6vw,46px);
  background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 26px 60px rgba(15,23,56,.08)}
.story-quote::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:5px;border-radius:0 5px 5px 0;background:var(--acc)}
.story-mark{position:absolute;left:clamp(26px,3.2vw,46px);top:clamp(14px,1.4vw,20px);height:.6em;font:800 clamp(104px,9vw,136px)/1 Georgia,"Times New Roman",serif;color:var(--acc)}
.story-quote p{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:800;line-height:1.42;color:var(--ink);text-wrap:balance}
.story-figure{position:relative;margin:0;display:flex;justify-content:center;align-self:end;isolation:isolate;min-width:0}
.story-disc{position:absolute;left:50%;bottom:5%;z-index:-1;width:min(430px,94%);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:var(--disc)}
.story-disc::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:1.5px dashed rgba(15,23,56,.16)}
.story--adv .story-disc::after{border-color:rgba(18,199,199,.5)}
.story-swoosh{right:-34%;bottom:4%;z-index:-2;width:150%;height:56%}
.story-swoosh path{opacity:.16;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2s var(--ease)}
.story-figure.in .story-swoosh path{stroke-dashoffset:0}
.story-figure.in .story-swoosh .sw-r{transition-delay:.2s}
.story-figure.in .story-swoosh .sw-c{transition-delay:.4s}
.story-figure img{position:relative;width:auto;height:clamp(380px,38vw,520px);max-width:100%;object-fit:contain;object-position:50% 100%;
  mask-image:linear-gradient(180deg,#000 86%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent)}

.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px);align-items:center}
.contact-copy .btn{margin-top:clamp(26px,3vw,34px)}
.contact-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.contact-item{display:flex;flex-direction:column;gap:12px;padding:24px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.contact-item:hover{border-color:var(--line-2);box-shadow:var(--sh-m)}
.contact-item dt{display:flex;flex-direction:column;gap:14px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.contact-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px}
.contact-ic .ic{width:22px;height:22px}
.contact-item dd{margin:0;font-size:15.5px;font-weight:700;line-height:1.55;color:var(--ink)}
.contact-item dd a{transition:color .2s var(--ease);overflow-wrap:anywhere}
.contact-item dd a:hover{color:var(--cyan-ink)}
.contact-item address{font-style:normal}

.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:var(--title-gap)}
.job{position:relative;display:flex;align-items:center;gap:16px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l)}
.js .job[data-r]{transition:opacity .6s var(--ease),transform .4s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.job:hover{border-color:var(--line-2);box-shadow:var(--sh-m)}
.js .job[data-r].in:hover{transform:translateY(-2px)}
.job-ic{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:15px}
.job-ic .ic{width:24px;height:24px}
.job h3{margin:0 0 4px;font-size:17.5px;font-weight:800}
.job p{margin:0;font-size:14.5px;font-weight:600;color:var(--ink-3)}
.jobs-apply{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:24px 28px;border-radius:var(--r-l);
  background:var(--navy);color:rgba(255,255,255,.8)}
.jobs-apply p{margin:0;font-size:16px;font-weight:600}
.jobs-apply b{display:block;margin-bottom:2px;font-size:18px;font-weight:800;color:#fff}
.jobs-apply a.mail{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--cyan)}
.jobs-apply a.mail .ic{width:18px;height:18px}
.jobs-apply a.mail:hover{color:#fff}

/* ───── 19 · Motion ───── */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
/* headline word reveal */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w i{display:inline-block;font-style:inherit;transform:translateY(108%);transition:transform .7s var(--ease)}
[data-split].in .w i{transform:none}

/* ───── 20 · Responsive ───── */
@media (max-width:1240px){
  .nav-list{gap:20px;font-size:14px}
  .header-inner{gap:22px}
}
@media (max-width:1180px){
  .ind-vp,.safe-vp{--rail-per:2}
  .safe-grid{flex-wrap:wrap}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
  .contact-list{grid-template-columns:1fr}
  .contact-item{flex-direction:row;align-items:center;gap:18px}
  .contact-item dt{flex-direction:row;align-items:center;min-width:150px}
}

/* the full nav needs ~1100px; below that the burger takes over */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:flex}
  .header-actions .btn{display:none}
  .header-inner{justify-content:space-between}
}

@media (max-width:1000px){
  .safe-badge{width:92px;height:92px;border-radius:26px}
  .safe-badge .ic{width:42px;height:42px}
  .journey{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto;gap:56px}
  .journey::before,.journey::after{display:none}
  .tm-slide{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .name-grid,.contact-grid{grid-template-columns:1fr}
  .name-figure{max-width:560px;width:100%;margin-inline:auto}
  .prob-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prob--more{grid-column:1 / -1}
  .jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
  .cta-card{grid-template-columns:1fr}
  /* the zig-zag stacks: statement first, then the SAPOTR standing on the section floor */
  .story-grid,.story--flip .story-grid{grid-template-columns:1fr;align-items:stretch;gap:clamp(36px,6vw,56px)}
  .story--flip .story-figure{order:0}
  .story-copy{padding-bottom:0;max-width:640px}
  .story-figure img{height:clamp(320px,56vw,440px)}
}

/* Hero: side-by-side only where the screen is wide AND landscape.
   Portrait tablets and every phone get their own stacked compositions. */
@media (max-width:900px),(max-aspect-ratio:1/1){
  .hero{--ht:clamp(29px,min(7.4vw,5.2vh),46px);--ui-h:62px}
  .hs-copy,.b4-inner .hs-copy{max-width:none}
  .hs-inner{padding-top:calc(var(--head-h) + clamp(22px,3.6vh,36px));padding-bottom:calc(var(--ui-h) + 14px)}
  .hero-ui-in{justify-content:center}
  .b2-inner,.b3-inner,.b5-inner,.b6-inner{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0}
  .b2-inner .hs-copy,.b3-inner .hs-copy,.b5-inner .hs-copy,.b6-inner .hs-copy{max-width:none;gap:clamp(20px,3vh,28px)}
  /* the art takes whatever height is left, and sizes itself against it */
  .hs-art{flex:1 1 auto;min-height:0;container-type:size;margin-top:clamp(18px,3vh,30px)}

  /* 1 · the photo fills the screen; the copy sits at the foot */
  .hs--cafe .hs-inner{justify-content:flex-end;gap:clamp(20px,3vh,28px)}
  /* About hero: the title on the navy, the photo underneath, full width — about as tall as it is wide,
     its top edge fading into the navy; the title is centred in the space above */
  .page-hero{flex-direction:column}
  .ph-inner{flex:1 1 auto;padding-bottom:clamp(24px,4vh,40px)}
  .ph-photo{position:relative;order:2;flex:none;width:100%;height:min(110vw,56svh);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%)}
  /* the group fills the space between the header and the copy at the foot, standing just above the headline */
  .hs--cafe .b1-photo{right:auto;left:50%;translate:-50% 0;top:calc(var(--head-h) + 12px);bottom:auto;width:min(100% - 32px,600px);
    height:calc(100% - var(--head-h) - var(--b1-copy,300px));object-position:50% 100%;transform-origin:50% 100%}
  .hs--cafe{--b1-copy:calc(var(--ui-h) + 14px + var(--ht) * 2.3 + 51px + clamp(20px,3vh,28px) + 40px)}
  .hs--cafe .hs-scrim{background:linear-gradient(180deg,rgba(10,16,48,.55) 0%,rgba(10,16,48,0) 20%,rgba(10,16,48,0) 36%,rgba(10,16,48,.78) 58%,rgba(10,16,48,.97) 100%)}

  /* 2 · copy, then the framed photo with its two cards */
  .b2-title{font-size:calc(var(--ht) * 1.08)}
  .b2-glow{right:50%;top:auto;bottom:-10%;translate:50% 0;width:min(110vw,640px)}
  .b2-stage{position:absolute;left:50%;top:50%;translate:-50% -50%;height:min(100cqh,94cqw);aspect-ratio:4/5}
  .b2-frame{border-width:6px;border-radius:22px}
  .b2-timer{right:-22px;top:-16px;width:74px;height:74px}
  .b2-timer .ic{width:24px;height:24px}
  .b2-note--a{left:-14%;top:12%}
  .b2-note--b{right:-14%;bottom:10%}

  /* 3 · the map fades the other way; the route sits under the copy */
  .b3-fade{background:linear-gradient(180deg,#F6F8FB 0%,rgba(246,248,251,.94) 34%,rgba(246,248,251,.35) 58%,rgba(246,248,251,0) 76%)}
  .b3-stage{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(100cqw,123cqh)}
  .b3-todo{right:0;bottom:2%;width:180px;padding:12px;gap:6px;font-size:12px}

  /* the urgent banner: the navy panel takes the top, the warehouse shows beneath the cut */
  .b4-panel{clip-path:polygon(0 0,100% 0,100% 53%,0 61%)}
  .b4-stripe--y{clip-path:polygon(0 61.6%,100% 53.6%,100% 54.6%,0 62.6%)}
  .b4-stripe--r{clip-path:polygon(0 63.2%,100% 55.2%,100% 56.2%,0 64.2%)}
  .b4-stripe--c{clip-path:polygon(0 64.8%,100% 56.8%,100% 57.8%,0 65.8%)}
  /* banner 6 photo: it is as wide as the screen, so it stands 105vw tall (1285/1224) and its sky is the top
     27% = 28.4vw. Its box starts that far above the lowest point of the colour bands (65.8% here), so the sky
     goes under the panel and the heads always begin just below the bands — on any screen height. Taller
     screens show more of the team below; the zoom-in pivots on that head line so it never lifts them. */
  .hs--urgent{--b6-top:min(50%,65.8% - 28.4vw)}
  .hs--urgent .b4-photo{top:var(--b6-top);left:0;width:100%;height:calc(100% - var(--b6-top));object-position:50% 0;transform-origin:50% 28.4vw}
  .b4-inner{justify-content:flex-start}
  .b4-card{top:auto;bottom:calc(var(--ui-h) + 16px);right:auto;left:50%;translate:-50% 0;width:min(320px,100% - 32px);padding:12px;gap:9px}
  .b4-role{padding:8px}
  .b4-state{height:40px}

  /* the tech banner: the radar sizes itself to the space left */
  .b5-radar{--size:min(calc(100cqw - 48px),calc(100cqh - 30px));position:absolute;left:50%;top:50%;translate:-50% -50%}
  .rd-node{width:40px;height:40px;margin:-20px 0 0 -20px}
  .rd-node .ic{width:19px;height:19px}
  .rd-card{right:-10px;bottom:-4%}

  /* the loop banner: the three-photo board under the copy */
  .b6-title span{display:inline}
  .b6-board{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(100cqw,calc(100cqh * 1.22));gap:10px}
  .b6-card:nth-child(3){width:calc(50% - 5px)}
  .b6-card{border-width:3px;border-radius:16px}
  .b6-tag{left:7px;bottom:7px;padding:4px 9px 4px 4px;gap:6px;font-size:12px;border-radius:10px}
  .b6-tag b{width:21px;height:21px;font-size:10px;border-radius:7px}
  .b6-cycle{width:52px;height:52px;margin:-26px 0 0 -26px;border-width:4px}
  .b6-cycle .ic{width:21px;height:21px}
}

@media (max-width:1180px){
  /* benefits: the frozen three-column bento */
  .bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bf--crisis .bento{grid-template-areas:"p1 p1 p3" "p2 p4 p3" "p5 p5 p6"}
  .bf--time   .bento{grid-template-areas:"p1 p4 p4" "p2 p4 p4" "p3 p5 p5"}
  .bf--grow   .bento{grid-template-areas:"p1 p1 p2" "p3 p4 p2"}
  .bf--cost   .bento{grid-template-areas:"p1 p1 p2" "p3 p3 p3"}
  .loop{--size:250px}
}
@media (max-width:900px) and (min-width:681px){
  .tile--loop{grid-template-columns:1fr;justify-items:start}
  .loop{justify-self:center}
}

@media (max-width:760px){
  .stats{gap:12px}
  .tm-slide{grid-template-columns:1fr}
  .tm-photo{min-height:0;aspect-ratio:16/11}
  .tm-photo img{object-position:50% 24%}
  .acc{grid-template-columns:1fr}
}

@media (max-width:680px){
  /* phones get more air than the desktop, not less */
  :root{--pad:clamp(84px,24vw,104px);--title-gap:44px;--head-top:8px;--head-h:72px;--box-title:19.5px}
  body{font-size:15.5px}
  .wrap{width:calc(100% - 36px)}
  .sec-title{font-size:clamp(27px,7.4vw,33px)}
  .sec-sub{font-size:18px}
  h3{font-size:16.5px}

  /* header + hero */
  .brand,.brand img{height:38px}
  .mobile-nav{padding-inline:18px}
  .btn--lg{padding:15px 20px;font-size:15.5px}
  .btn--xl{padding:17px 22px}
  .hs-cta .btn{width:100%}
  .b2-inner .hs-copy,.b3-inner .hs-copy,.b5-inner .hs-copy,.b6-inner .hs-copy,.b4-inner .hs-copy{display:contents}
  .b2-inner .hs-cta,.b3-inner .hs-cta,.b5-inner .hs-cta,.b6-inner .hs-cta{order:2;margin-top:clamp(16px,2.6vh,24px)}
  /* banner 6: the cut rises, the team stands between the bands and the button */
  .b4-inner .hs-cta{margin-top:auto}
  .b4-panel{clip-path:polygon(0 0,100% 0,100% 40%,0 46%)}
  .b4-stripe--y{clip-path:polygon(0 46.6%,100% 40.6%,100% 41.6%,0 47.6%)}
  .b4-stripe--r{clip-path:polygon(0 48.2%,100% 42.2%,100% 43.2%,0 49.2%)}
  .b4-stripe--c{clip-path:polygon(0 49.8%,100% 43.8%,100% 44.8%,0 50.8%)}
  .hs--urgent{--b6-top:min(38%,50.8% - 28.4vw)}
  .hs--urgent .b4-photo{top:var(--b6-top);height:calc(100% - var(--b6-top) - var(--ui-h) - 84px);
    -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 84%,transparent)}
  .ocard{padding:7px 12px 7px 7px;gap:8px;border-radius:13px}
  .ocard-ic{width:32px;height:32px;border-radius:10px}
  .ocard-ic .ic{width:17px;height:17px}
  .ocard-t small{font-size:10.5px}
  .ocard-t b{font-size:13px}
  .b3-todo,.b4-card{display:none}
  .b3-eta{left:0;top:26%}
  .rd-status{min-width:170px;height:30px}
  .rd-searching,.rd-found{font-size:11.5px}

  /* ticker */
  .ticker-row{padding:15px 0}
  .ticker-track{gap:20px;padding-right:20px}
  .ticker-track li{font-size:16px;gap:10px}
  .tk-ic{width:30px;height:30px;border-radius:9px}
  .tk-ic .ic{width:16px;height:16px}

  /* benefits: the frozen phone bento — two up, the big cards full width */
  /* the cost heading's two set lines stay whole: its longer line is ~12.9em, so the font is capped to fit */
  .bf--cost .bf-title{font-size:min(clamp(27px,7.4vw,33px),(100vw - 36px) / 13.2)}
  .bf--cost .bf-title .ln{white-space:nowrap}
  .bento{grid-template-columns:1fr 1fr;gap:12px;grid-auto-rows:auto}
  .bf--crisis .bento{grid-template-areas:"p1 p1" "p3 p2" "p3 p4" "p5 p6"}
  .bf--time   .bento{grid-template-areas:"p1 p2" "p4 p4" "p3 p5"}
  .bf--grow   .bento{grid-template-areas:"p1 p1" "p2 p3" "p2 p4"}
  .bf--cost   .bento{grid-template-areas:"p1 p1" "p3 p2"}
  .tile{padding:18px;border-radius:var(--r-m)}
  .tile:hover,.js .tile[data-r].in:hover{transform:none}
  .tile:not(.tile--navy,.tile--rise,.tile--week,.tile--loop) h4{font-size:18.5px;font-weight:800;letter-spacing:-.022em;line-height:1.24}
  .tile p{font-size:13.5px;line-height:1.45}
  .tile-ic{width:38px;height:38px;border-radius:11px;margin-bottom:14px}
  .tile-ic .ic{width:19px;height:19px}
  .tile--navy h4,.tile--rise h4,.tile--week h4,.loop-copy h4{font-size:clamp(20px,5.6vw,23px)}
  .tile--navy{padding:22px}
  .tile--navy p{font-size:15px}
  .viz-toggles{gap:8px}
  .viz-toggles i{padding:8px 13px;font-size:13px}
  .pic-person{height:200px;padding-top:10px}
  .viz-radar{width:110px;height:110px;right:-30px;top:-30px}
  .viz-radar i:nth-child(2){inset:18px}.viz-radar i:nth-child(3){inset:36px}
  .viz-radar b:nth-of-type(1){left:30px;top:70px}.viz-radar b:nth-of-type(2){left:66px;top:80px}.viz-radar b:nth-of-type(3){left:22px;top:42px}
  .tile--loop{grid-template-columns:1fr;padding:22px;gap:10px}
  .loop{--size:min(262px,calc(100vw - 96px))}
  .loop-n{width:92px;margin-left:-46px}
  .loop-n .ic{width:17px;height:17px;padding:9px;border-radius:12px}
  .loop-n b{font-size:11.5px}
  .viz-rise{height:70px;gap:6px;padding-top:18px}
  .viz-days{gap:3px;padding-top:14px}
  .viz-days i{height:26px;border-radius:7px;font-size:10px}
  .wk-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .wk-days{margin-left:0}
  .wk-cells i{height:26px}

  /* industries */
  .ind-vp{--rail-gap:14px;margin-inline:-18px;padding-inline:18px}
  .ind-vp .ind{flex:0 0 min(82vw,340px)}
  .ind:hover{transform:none}
  .ind-body{padding:0 20px 20px}
  .ind-ic{width:48px;height:48px;border-radius:14px}
  .ind-head{margin-top:-24px}

  /* safety: the heading on its own, then a one-card rail */
  .safe-head{align-items:center}
  .safe-title{font-size:clamp(25px,6.8vw,31px)}
  .sec-title .ln--sub{font-size:18px}
  .sec-title .ln:not(.ln--sub) + .ln--sub{margin-top:14px}
  .safe-badge{display:none}
  .safe-title .ln:not(.ln--sub) + .ln--sub{margin-top:20px}
  .safe-vp{--rail-gap:14px;margin-inline:-18px;padding-inline:18px;margin-top:40px}
  .safe-grid{flex-wrap:nowrap}
  .safe-vp .safe{flex:0 0 min(80vw,330px)}
  .safe:hover{transform:none}
  .safe-viz{height:150px}
  .safe h3{font-size:18.5px}

  /* testimonials */
  .tm-slide{border-radius:22px}
  .tm-body{padding:26px 22px 28px}
  .tm-mark{height:34px;font-size:84px;margin-bottom:8px}
  .tm-body blockquote p{font-size:18.5px;line-height:1.55}
  .tm-body figcaption{margin-top:22px;padding-top:16px}
  .tm-body figcaption b{font-size:16.5px}
  .tm-body figcaption span{font-size:14px}
  .tm-ui{gap:12px;margin-top:24px}
  .tm-dots{display:none}

  /* growth */
  .grow-head h2{font-size:clamp(28px,8vw,34px)}
  .grow-sub{font-size:18.5px}
  .stats{margin-top:34px}
  .stat{padding:20px 16px 18px;border-radius:16px}
  .stat::before{left:16px;width:30px}
  .stat dd{font-size:clamp(28px,8.4vw,34px)}
  .stat dt{font-size:13.5px}
  .grow-stripes{right:-120px;top:-70px;transform:rotate(-24deg) scale(.7)}

  /* hire */
  .journey{gap:52px}
  .step-viz{border-radius:var(--r-l)}
  .step-n{width:50px;height:50px;margin:-25px 0 0 16px}
  .step h3{margin-top:20px}
  .step p{font-size:15px}
  .hire-cta .btn{width:100%}

  /* faq */
  .acc{gap:12px}
  .acc-col{gap:12px}
  .acc-q{min-height:62px;padding:16px 14px;font-size:16px;gap:12px}
  .acc-n{width:28px;height:28px;border-radius:8px;font-size:11px}
  .acc-x{width:28px;height:28px}
  .acc-a p{padding:0 18px 20px 18px;font-size:15px}

  /* the frozen CTA's phone layout: photo on top, copy below */
  .cta{padding-block:clamp(220px,64vw,300px) clamp(64px,16vw,88px)}
  .cta-media img{object-position:62% 30%;height:62%;bottom:auto}
  .cta-scrim{background:linear-gradient(180deg,rgba(10,16,48,.1) 0%,rgba(10,16,48,.35) 30%,rgba(10,16,48,.96) 60%,var(--navy) 100%)}
  .cta h2{font-size:clamp(28px,8vw,36px);max-width:none}
  .cta .btn{width:100%}
  .cta-swoosh{width:120%;height:40%;left:-30%;bottom:-8%}
  .cta-card{padding:38px 22px 30px;border-radius:26px;gap:26px}
  .cta-copy h2{font-size:clamp(26px,7.2vw,31px)}
  .cta-btns .btn{width:100%}

  /* footer */
  .site-footer{padding:60px 0 28px;font-size:14px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 20px;padding-bottom:38px}
  .foot-brand img{height:40px}
  .foot-tag{font-size:17px}
  .foot-col:last-child{grid-column:2;grid-row:2 / 4}
  .foot-bottom{padding-top:24px;font-size:12.5px;gap:18px}
  .foot-end{width:100%;justify-content:space-between}

  /* about */
  .ph-title{font-size:clamp(34px,10vw,44px)}
  .name-lead{font-size:18px}
  .prob-lead{font-size:19px}
  .prob-grid{gap:12px}
  .prob{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px;font-size:15.5px}
  .prob-ic{width:44px;height:44px;border-radius:13px}
  .prob--more{flex-direction:row;align-items:center}
  .story-quote{padding:78px 22px 30px;border-radius:22px}
  .story-mark{left:22px;top:12px;font-size:96px}
  .story-quote p{font-size:clamp(18px,5vw,20px)}
  .story-figure img{height:clamp(300px,86vw,380px)}
  .story-disc{width:min(320px,86%)}
  .story-swoosh{width:120%;height:40%;right:-20%;bottom:0}
  .story-dots{display:none}
  .contact-item{flex-direction:column;align-items:flex-start;gap:12px}
  .contact-item dt{flex-direction:row;min-width:0}
  .jobs{grid-template-columns:1fr;gap:12px}
  .job{padding:18px}
  .jobs-apply{padding:22px 20px}
}

/* very small phones */
@media (max-width:380px){
  .wrap{width:calc(100% - 28px)}
  .hero{--ht:clamp(26px,7.6vw,29px)}
  .ind-vp,.safe-vp{margin-inline:-14px;padding-inline:14px}
  /* banner 1: the headline runs to three lines here, so the group leaves room for them */
  .hs--cafe{--b1-copy:calc(var(--ui-h) + 14px + var(--ht) * 3.7 + 51px + clamp(20px,3vh,28px) + 40px)}
  /* the safety headline's two lines scale together so each stays on one row */
  .safe-title{font-size:min(25px,6.8vw)}
  /* the set two-line benefit headings: each line stays whole on the narrowest phones */
  .bf-title .ln{white-space:nowrap;word-spacing:.02em}
  .bf--cost .bf-title{font-size:min(27px,(100vw - 28px) / 13)}
  .foot-grid{grid-template-columns:1fr}
  .foot-col:last-child{grid-column:auto;grid-row:auto}
  .stat dd{font-size:26px}
  .prob-grid{grid-template-columns:1fr}
  .prob{flex-direction:row;align-items:center}
}
/* portrait tablets: the job card sits in the navy above the bands, not over the photo */
@media (min-width:681px) and (max-aspect-ratio:1/1){
  .b4-card{bottom:calc(42% + 72px)}
}
/* phones held sideways: the photos become wide strips, so the crop is aimed at the faces */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .ph-photo{object-position:50% 47%}
}
/* short screens: keep every banner inside the frame */
@media (max-height:700px) and (max-width:900px){
  .hero{--ht:clamp(26px,min(7vw,4.8vh),34px)}
  .b2-timer{display:none}
}
@media (max-height:560px) and (min-aspect-ratio:1/1) and (min-width:901px){
  .hero{--ht:clamp(28px,4.4vw,40px)}
  .b3-todo,.b4-card{display:none}
}

/* ───── 20b · Image loading state ─────
   Until an image has loaded, its box (sized by its width/height) shows a soft shimmer instead of a
   blank. script.js marks each image .is-loaded (or .is-failed); logos load at once and are left out.
   Transparent cut-outs lose the shimmer as soon as they are in. */
.js main img:not(.is-loaded):not(.is-failed):not([src*="logo"]){
  background:linear-gradient(100deg,var(--tint) 30%,#FBFCFE 50%,var(--tint) 70%) 0 0 / 250% 100%;animation:img-wait 1.4s linear infinite}
.js .hs[data-tone="dark"] img:not(.is-loaded):not(.is-failed),.js .page-hero img:not(.is-loaded):not(.is-failed),.js .cta img:not(.is-loaded):not(.is-failed){
  background-image:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 70%)}
@keyframes img-wait{to{background-position:-250% 0}}
/* an image that failed: a quiet tint, no spinner, no broken-image icon or text (its alt is still read out) */
.js main img.is-failed{background:var(--tint);color:transparent;animation:none;
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")}
.js .hs[data-tone="dark"] img.is-failed,.js .page-hero img.is-failed,.js .cta img.is-failed{background:rgba(255,255,255,.05)}

/* ───── 21 · Reduced motion ───── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .orb,.rd-sweep,.b6-cycle .ic,.b3-path,.ticker-inner{animation:none !important}
  .js [data-r],.js .hs [data-seq],.js .hs .b2-title .wd,.js .loop-steps > span{opacity:1 !important;transform:none !important}
  [data-split] .w i{transform:none !important}
  .viz-toggles i:first-child{background:var(--cyan) !important;border-color:var(--cyan) !important;color:#fff !important}
  .cursor-glow,.b3-dot,.hero-meter .hero-prog{display:none}
  /* a still ticker wraps instead of running off the edge */
  .ticker-inner{width:auto}
  .ticker-row{mask-image:none;-webkit-mask-image:none}
  .ticker-track{flex-wrap:wrap;justify-content:center;row-gap:12px;padding:0 18px}
}