/* ==========================================================
   Stryde motion layer: one system on top of the existing site.
   Everything here only applies once motion.js has booted (html.mo).
   ========================================================== */

/* masked word reveals for headlines */
.mw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .07em .14em 0;margin:0 -.07em -.14em 0}
.mi{display:inline-block;will-change:transform}

/* refine the base fade: shorter travel, calmer timing */
.mo .fade{transform:translateY(14px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.mo .fade[data-from="top"]:not(.in){transform:translateY(-14px)}
.mo .fade.in{transform:none}

/* depth for card groups (driven by GSAP) */
.mo .job,.mo .need,.mo .wcard{transform-style:preserve-3d;backface-visibility:hidden}

/* hero: layered depth */
.mo .hero{perspective:1600px}
.mo .stack{transform-style:preserve-3d;will-change:transform}

/* ---------- results: evidence stage ---------- */
.proof .corridor{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
.proof .corridor.on{opacity:.4}
.proof .corridor canvas{position:absolute;left:0;top:0;will-change:transform;display:block;width:100%!important;height:100vh!important;height:100svh!important;-webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 48%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 18%,#000 48%,#000 92%,transparent 100%)}
.proof.has3d .shards{opacity:0;transition:opacity 1.2s}
.proof-head{position:relative}
.evidence{position:relative;margin-top:clamp(70px,12vh,130px)}
.evidence .stats{margin-top:0;transform-origin:30% 70%;will-change:transform}
.ev-route{display:flex;align-items:center;gap:14px;margin-bottom:28px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3)}
.ev-route i{display:block;width:44px;height:1px;background:linear-gradient(90deg,var(--red),rgba(185,28,28,0))}
.stat{position:relative}
.stat::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(var(--ln,0));transform-origin:left;transition:none}
.stat .v{transform-origin:left bottom}
.ev-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 2vw;margin-top:clamp(56px,9vh,96px);align-items:start}
.ev-copy .lbl{grid-column:1/4;color:var(--on-ink-3);padding-top:.5em}
.ev-big{grid-column:4/13;margin:0;font:400 clamp(30px,3.3vw,58px)/1.08 var(--serif);letter-spacing:-.02em;max-width:24ch;color:var(--on-ink)}
.ev-big b{font-weight:400;color:#fff;background:linear-gradient(transparent 62%,rgba(185,28,28,.55) 62%,rgba(185,28,28,.55) 92%,transparent 92%)}
.ev-cols{grid-column:4/13;display:grid;grid-template-columns:1fr 1fr;gap:20px 3vw}
.ev-cols p{margin:0;font-size:16px;line-height:1.6;color:var(--on-ink-2);max-width:44ch}
.ev-cols p strong{color:var(--on-ink);font-weight:600}
.evidence .signed{margin-top:0}
@media (max-width:900px){
  .evidence .stats{grid-template-columns:1fr;gap:44px}
  .evidence .stat,.evidence .stat + .stat{grid-column:1/-1}
  .evidence .stat .v{font-size:clamp(84px,25vw,150px)}
  .ev-copy{grid-template-columns:1fr;gap:18px}
  .ev-copy .lbl,.ev-big,.ev-cols{grid-column:1/-1}
  .ev-cols{grid-template-columns:1fr}
  .ev-big{font-size:clamp(28px,7.4vw,40px)}
}

/* ---------- micro-interactions ---------- */
.mo .pill{will-change:transform}
.mo .pill .ar{display:inline-block}
.mo .ul::after{transform-origin:right;transition:transform .8s cubic-bezier(.77,0,.18,1)}
.mo .ul:hover::after{transform:scaleX(0);transform-origin:right}
.mo .card[data-open] img{transition:transform 1.4s var(--ease)}
.mo .card[data-open]:hover img{transform:scale(1.035)}

/* nav tucks away on the way down, returns on the way up */
.mo .nav{transition:transform .7s cubic-bezier(.65,0,.35,1),background .5s,padding .5s}
.mo .nav.tuck{transform:translateY(-110%)}
body.menu-open .nav.tuck{transform:none}

/* dark sections enter as a widening frame */
.mo .proof,.mo .close{will-change:clip-path}

/* smooth-scroll plumbing */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .proof .corridor{display:none}
  .stat::before{transform:scaleX(1)}
}

/* ==========================================================
   Inner pages: richer heroes and shared modules
   ========================================================== */
.phero.has-vis{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:end;min-height:min(92vh,980px);padding-bottom:clamp(90px,14vh,150px);overflow:hidden}
.phero.has-vis > *{grid-column:1/8}
.phero.has-vis h1{font-size:clamp(52px,7vw,136px);max-width:12ch}
.phero-vis{grid-column:8/13!important;grid-row:1/span 6;align-self:center;position:relative;perspective:1600px;margin-top:clamp(40px,6vh,80px)}
.pv-card{margin:0;border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:0 1px 0 rgba(15,15,15,.06),0 60px 120px -50px rgba(15,15,15,.55);transform:rotateY(-14deg) rotateX(6deg) rotateZ(1deg);transform-origin:20% 50%;will-change:transform}
.pv-card .chrome,.wk .chrome{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;background:#fff;border-bottom:1px solid var(--line)}
.pv-card .chrome i,.wk .chrome i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.pv-card .chrome span,.wk .chrome span{margin-left:8px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-card img,.wk img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.pv-chip{position:absolute;left:-8%;bottom:-9%;display:grid;gap:4px;padding:18px 22px;border-radius:14px;background:var(--ink);color:var(--on-ink);box-shadow:0 30px 60px -24px rgba(15,15,15,.6);max-width:260px}
.pv-chip b{font:800 clamp(30px,3vw,46px)/.9 var(--sans);letter-spacing:-.05em}
.pv-chip span{font:500 10.5px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-2)}
.pv-chip::before{content:"";position:absolute;left:22px;top:-6px;width:34px;height:12px;background:var(--red);transform:skewX(-45deg)}
.phero-facts{list-style:none;margin:clamp(34px,5vh,52px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 26px}
.phero-facts li{display:flex;align-items:center;gap:12px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.phero-facts li::before{content:"";width:16px;height:6px;background:var(--red);transform:skewX(-45deg)}
@media (max-width:1100px){
  .phero.has-vis{display:block;min-height:0}
  .phero-vis{margin-top:56px;max-width:640px}
  .pv-card{transform:rotateY(-8deg) rotateX(4deg)}
  .pv-chip{left:auto;right:4%;bottom:-12%}
}
@media (max-width:600px){.pv-chip{padding:14px 16px;max-width:200px}.phero-vis{margin-bottom:28px}}

.wstrip-sec .head,.ptease .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.wstrip{margin-top:clamp(48px,8vh,90px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.wstrip:has(.wk:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.wk{display:grid;gap:12px;text-decoration:none;color:inherit}
.wk figure{margin:0 0 10px;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 rgba(15,15,15,.06),0 40px 70px -44px rgba(15,15,15,.5);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.wk img{transition:transform 1.4s var(--ease)}
.wk:hover figure{transform:translateY(-6px);box-shadow:0 1px 0 rgba(15,15,15,.06),0 60px 90px -44px rgba(15,15,15,.6)}
.wk:hover img{transform:scale(1.04)}
.wk .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wk h3{font:700 clamp(24px,2vw,32px)/1.05 var(--sans);letter-spacing:-.04em;display:flex;gap:10px;align-items:baseline}
.wk h3 .ar{color:var(--red);transition:transform .7s var(--ease)}
.wk:hover h3 .ar{transform:translateX(6px)}
.wk p{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:40ch}
.wk p b{color:var(--ink);font-weight:700}
.wk:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:10px}
@media (max-width:900px){.wstrip,.wstrip:has(.wk:nth-child(2):last-child){grid-template-columns:1fr;gap:48px}}

.ptiers{margin-top:clamp(48px,8vh,90px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.pt{position:relative;display:grid;gap:14px;align-content:start;padding:28px 2vw 34px 0;text-decoration:none;color:inherit;border-right:1px solid var(--line)}
.pt + .pt{padding-left:2vw}
.pt:last-child{border-right:0}
.pt .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pt b{font:800 clamp(52px,5.4vw,96px)/.85 var(--sans);letter-spacing:-.065em;display:flex;align-items:baseline;gap:10px}
.pt b small{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pt p{color:var(--muted);font-size:15.5px;max-width:30ch}
.pt::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.pt:hover::after,.pt:focus-visible::after{transform:scaleX(1)}
.pt.mid b{color:var(--red)}
.pnote{margin-top:28px;color:var(--muted);font-size:14.5px}
@media (max-width:900px){.ptiers{grid-template-columns:1fr}.pt,.pt + .pt{padding:26px 0;border-right:0;border-bottom:1px solid var(--line)}}

.tailfoot{padding-top:clamp(60px,9vh,100px)!important}

/* ==========================================================
   v33 conversion layer
   ========================================================== */
/* hero: the logistics proof leads */
.intro .cta-note,.cta-note{margin-top:-4px;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stack.solo{aspect-ratio:16/8.6}
.stack.solo .card.c1{left:auto;right:0;top:4%;width:74%}
.hero-chip{position:absolute;left:6%;bottom:12%;z-index:6;display:grid;gap:6px;max-width:290px;padding:20px 24px 20px;border-radius:14px;background:var(--ink);color:var(--on-ink);box-shadow:0 34px 70px -28px rgba(15,15,15,.65)}
.hero-chip::before{content:"";position:absolute;left:24px;top:-6px;width:36px;height:12px;background:var(--red);transform:skewX(-45deg)}
.hero-chip b{font:800 clamp(40px,3.8vw,64px)/.85 var(--sans);letter-spacing:-.06em}
.hero-chip span{font:500 10.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--on-ink-2)}
@media (max-width:960px){
  .stack.solo{aspect-ratio:auto;display:grid;gap:0}
  .stack.solo .card.c1{position:relative;left:auto;right:auto;top:auto;width:100%}
  .hero-chip{position:relative;left:auto;bottom:auto;margin:-36px 0 0 6%;max-width:250px;padding:16px 18px}
  .stack.solo .cap{position:static;margin-top:18px}
}

/* proof: the story before the numbers */
.story{position:relative;margin-top:clamp(56px,9vh,96px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink-line)}
.st-i{padding:24px 2vw 0 0;display:grid;gap:12px;align-content:start}
.st-i + .st-i{padding-left:2vw;border-left:1px solid var(--ink-line)}
.st-i .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.st-i p{font-size:16px;line-height:1.55;color:var(--on-ink-2);max-width:32ch}
.st-i:last-child p{color:var(--on-ink)}
@media (max-width:900px){.story{grid-template-columns:1fr 1fr}.st-i:nth-child(3){border-left:0;padding-left:0}.st-i{padding-bottom:22px}}
@media (max-width:560px){.story{grid-template-columns:1fr}.st-i,.st-i + .st-i{border-left:0;padding-left:0;border-bottom:1px solid var(--ink-line)}}
.proof-cta{position:relative;z-index:2;background:var(--ink)!important;box-shadow:0 0 0 1px var(--ink-line);margin-top:clamp(56px,9vh,90px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(24px,3vw,36px);border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--ink-line)}
.proof-cta p{font:400 clamp(24px,2.3vw,36px)/1.15 var(--serif);font-style:italic;letter-spacing:-.01em;max-width:28ch}
.work-note{margin-top:22px;max-width:56ch;font-size:18px;color:var(--muted)}

/* closing: what the free review covers */
.review-list{list-style:none;margin:clamp(30px,5vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 2.4vw;max-width:1100px}
.review-list li{position:relative;padding-top:22px;border-top:1px solid var(--ink-line);font-size:15.5px;line-height:1.55;color:var(--on-ink-2)}
.review-list li b{display:block;margin-bottom:6px;font:700 18px/1.25 var(--sans);letter-spacing:-.02em;color:var(--on-ink)}
.review-list li::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--red)}
@media (max-width:900px){.review-list{grid-template-columns:1fr}}
.contact .rv{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.contact .rv li{position:relative;padding-left:26px;color:var(--on-ink-2);font-size:15.5px;line-height:1.5}
.contact .rv li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:5px;background:var(--red);transform:skewX(-45deg)}

/* FAQ (homepage has no site.css) */
.faq{margin-top:clamp(50px,8vh,90px);border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;font:700 clamp(19px,1.6vw,24px)/1.25 var(--sans);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:9px;background:var(--line);transform:skewX(-45deg);transition:background .4s,transform .6s var(--ease)}
.faq details[open] summary::after{background:var(--red);transform:skewX(-45deg) translateX(6px)}
.faq summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.faq details p{padding:0 0 26px;max-width:66ch;color:var(--muted);font-size:17px}

/* sticky call to action on phones */
.mcta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;display:none;align-items:center;justify-content:center;gap:10px;padding:16px 20px;border-radius:999px;background:var(--red);color:#fff;text-decoration:none;font:600 15.5px/1 var(--sans);box-shadow:0 18px 40px -14px rgba(185,28,28,.6);transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .6s var(--ease),opacity .35s ease,visibility 0s linear .6s}
.mcta.on{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .6s var(--ease),opacity .35s ease,visibility 0s}
.mcta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){.mcta{display:flex}}
body.menu-open .mcta{transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none}

/* quieter background lanes so they don't read as floating clutter */
.lanes-bg,#lanesBg{opacity:.45}

.hero-proof{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:14.5px;color:var(--ink);text-decoration:none}
.hero-proof b{font-weight:800}
.hero-proof::before{content:"";flex:none;width:18px;height:7px;background:var(--red);transform:skewX(-45deg)}
.hero-proof:hover span{text-decoration:underline;text-underline-offset:4px}
.proof .quote,.proof .links,.proof .fine{position:relative;z-index:2}
.phero .cta-note{margin-top:18px}
a.mail{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .2s}a.mail:hover,a.mail:focus-visible{color:var(--red)}

/* accessibility: text contrast (WCAG AA) */
section.close h2 em,.story .st-i .k,.jobs .job.now .n{color:#EF4444}
.tabs .tab:not(.on) .t{color:#948C81}
.tabs .tab:not(.on):hover .t{color:#6B645B}