/* ============================================================================
   Authorize360 — v3.css   "Editorial Clinical"
   Self-contained. NO @import (v2's base.css import broke a deploy once).

   Design language adapted from pharmacor.com.au at Alex's request:
     · every heading at weight 400 — never bold
     · oversized display type, tight negative tracking (-0.027em)
     · unusually large body copy (20-22px)
     · pill eyebrow tags + pill outline buttons with sliding arrows
     · very generous section padding (80-150px)
     · one pale brand-tint section, one full-bleed dark section
     · scroll-triggered fade + rise on everything
   Colors are Authorize360's own: navy #14284A, teal #17ADC6.
   ============================================================================ */

:root{
  --navy:#14284A;
  --navy-deep:#0E1D38;
  --navy-soft:#1E3A66;
  --teal:#17ADC6;
  --teal-bright:#2BC6DE;
  --teal-deep:#0F8A9E;

  --tint:#E8F7FA;          /* pale teal — the "mint section" equivalent */
  --tint-strong:#C7EDF4;   /* pill tag fill on light */
  --paper:#FFFFFF;
  --ink:#0E1D38;
  --ink-soft:#4A5A72;
  --line:rgba(20,40,74,.14);

  --font: "Futura","Century Gothic","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --h1: clamp(2.75rem, 6.2vw, 4.5rem);
  --h2: clamp(2.1rem, 4.2vw, 3rem);
  --h3: clamp(1.5rem, 2.4vw, 2.25rem);
  --lede: clamp(1.15rem, 1.8vw, 1.5rem);
  --body: clamp(1.05rem, 1.25vw, 1.25rem);

  --pad-section: clamp(80px, 10vw, 150px);
  --container: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-weight:400;              /* the signature move — nothing is bold */
  letter-spacing:-0.027em;
  line-height:1.1;
  margin:0;
  color:var(--navy);
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3); line-height:1.18}
p{margin:0 0 1.1em}
a{color:inherit}
img{max-width:100%; display:block}

.container{width:min(100% - 48px, var(--container)); margin-inline:auto}
@media (max-width:640px){ .container{width:min(100% - 32px, var(--container))} }

.section{padding-block:var(--pad-section)}
.section--tint{background:var(--tint)}
.section--dark{background:var(--navy); color:#fff}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}

/* ---------------------------------------------------------------- pill tag */
.tag{
  display:inline-block;
  background:var(--tint-strong);
  color:var(--navy);
  border-radius:23px;
  padding:8px 22px;
  font-size:.95rem;
  line-height:1.4;
  margin-bottom:34px;
}
.section--dark .tag{background:rgba(255,255,255,.14); color:#fff}

/* ---------------------------------------------------------------- buttons */
.btn{
  --btn-fg:var(--navy);
  display:inline-flex; align-items:center; gap:12px;
  border:2px solid var(--btn-fg);
  color:var(--btn-fg);
  background:transparent;
  border-radius:32px;
  padding:13px 26px;
  font-family:inherit;
  font-size:clamp(1rem,1.4vw,1.25rem);
  text-decoration:none;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{transition:transform .25s var(--ease); flex:none}
.btn:hover{background:var(--btn-fg); color:#fff}
.btn:hover svg{transform:translateX(6px)}
.btn--light{--btn-fg:#fff}
.btn--light:hover{background:#fff; color:var(--navy)}
.btn--fill{background:var(--teal); border-color:var(--teal); color:#fff}
.btn--fill:hover{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff}
.btn:focus-visible{outline:3px solid var(--teal-bright); outline-offset:3px}

/* ---------------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:22px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  padding:12px 0;
  box-shadow:0 1px 0 var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.nav-logo{height:38px; width:auto; transition:opacity .3s var(--ease)}
.nav-logo--dark{display:block}
.nav-logo--light{display:none; position:absolute; top:0; left:0}
.nav:not(.is-stuck) .nav-logo--dark{opacity:0}
.nav:not(.is-stuck) .nav-logo--light{display:block; opacity:1}
.nav-brand{position:relative; display:block; line-height:0}

.nav-links{display:flex; align-items:center; gap:34px}
.nav-links a{
  text-decoration:none; font-size:1rem; color:#fff;
  position:relative; padding-bottom:3px;
  transition:color .3s var(--ease);
}
.nav.is-stuck .nav-links a{color:var(--navy)}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--teal-bright); transition:width .28s var(--ease);
}
.nav-links a:hover::after{width:100%}
.nav-links .btn{padding:9px 20px; font-size:.95rem}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:10px; width:46px}
.nav-toggle span{display:block; height:2px; background:#fff; margin:5px 0; transition:.3s var(--ease)}
.nav.is-stuck .nav-toggle span{background:var(--navy)}

@media (max-width:940px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,340px);
    background:var(--navy); flex-direction:column; justify-content:center; gap:26px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    padding:40px;
  }
  .nav-links a{color:#fff !important; font-size:1.4rem}
  .nav-links.is-open{transform:translateX(0)}
  .nav-toggle.is-open span{background:#fff}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  background:var(--navy-deep);
  overflow:hidden;
  padding-bottom:clamp(56px,8vw,110px);
  padding-top:140px;
  color:#fff;
}
/* photographic base. NOTE: parallax and ken-burns are split across two elements
   on purpose — both want `transform`, and a running animation beats an inline
   custom-property transform, so the outer does parallax and the inner drifts. */
.hero-photo{ position:absolute; inset:0; z-index:0; overflow:hidden }
.hero-photo i{
  position:absolute; inset:0; display:block;
  background:url("img/hero.jpg") center 42% / cover no-repeat;
  transform:scale(1.06);
  animation:kenburns 30s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.4%,-1%,0)}
}
/* brand-color aurora layered over the photo, keeps the navy/teal identity */
.hero-aurora{position:absolute; inset:-25%; z-index:1; filter:blur(70px); opacity:.42; mix-blend-mode:screen}
.hero-aurora i{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen;
  animation:drift 26s ease-in-out infinite;
}
.hero-aurora i:nth-child(1){width:52%; height:52%; left:4%;  top:8%;  background:radial-gradient(circle,#17ADC6 0%,transparent 68%)}
.hero-aurora i:nth-child(2){width:46%; height:46%; right:6%; top:22%; background:radial-gradient(circle,#2BC6DE 0%,transparent 68%); animation-delay:-9s}
.hero-aurora i:nth-child(3){width:56%; height:56%; left:26%; bottom:2%; background:radial-gradient(circle,#1E3A66 0%,transparent 66%); animation-delay:-17s}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6%,-5%,0) scale(1.12)}
  66%{transform:translate3d(-5%,4%,0) scale(.94)}
}
.hero::after{ /* legibility scrim — heavier at left where the copy sits */
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, rgba(14,29,56,.94) 0%, rgba(14,29,56,.78) 42%, rgba(14,29,56,.30) 78%, rgba(14,29,56,.42) 100%),
    linear-gradient(180deg, rgba(14,29,56,.55) 0%, rgba(14,29,56,.10) 40%, rgba(14,29,56,.80) 100%);
}
@media (max-width:820px){
  .hero::after{background:linear-gradient(180deg, rgba(14,29,56,.80) 0%, rgba(14,29,56,.62) 45%, rgba(14,29,56,.92) 100%)}
}
.hero .container{position:relative; z-index:3; width:min(100% - 48px, var(--container))}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 30px rgba(14,29,56,.45)}
@media (prefers-reduced-motion:reduce){ .hero-photo i{animation:none; transform:scale(1.02)} }

/* rotating headline slider — grid stacking so the box is as tall as the TALLEST
   slide. (An absolutely-positioned version overflowed onto the buttons whenever a
   headline wrapped to 3 lines.) */
.hero-slides{display:grid}
.hero-slide{
  grid-area:1 / 1;
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  pointer-events:none;
}
.hero-slide.is-active{opacity:1; transform:none; pointer-events:auto}
.hero-sub{
  font-size:var(--lede); max-width:52ch; color:rgba(255,255,255,.88);
  margin-top:26px; line-height:1.55;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:38px}

.hero-counter{
  display:flex; align-items:center; gap:18px;
  margin-top:54px; font-size:1.35rem; color:rgba(255,255,255,.9);
}
.hero-dots{display:flex; gap:10px}
.hero-dot{
  width:36px; height:3px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.3); border-radius:2px;
  transition:background .3s var(--ease);
}
.hero-dot.is-active{background:var(--teal-bright)}
.hero-dot:focus-visible{outline:2px solid #fff; outline-offset:4px}

.scroll-hint{
  position:absolute; z-index:2; bottom:26px; right:24px;
  display:flex; align-items:center; gap:10px;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.scroll-hint i{display:block; width:1px; height:38px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.8)); animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.4); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}
@media (max-width:640px){.scroll-hint{display:none}}

/* ---------------------------------------------------------------- lede */
.lede{font-size:var(--h3); line-height:1.34; max-width:26ch; color:var(--navy)}
.lede-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:start}
.lede-grid p{font-size:var(--lede); color:var(--ink-soft); margin-bottom:1.4em}
@media (max-width:860px){.lede-grid{grid-template-columns:1fr} .lede{max-width:none}}

/* ---------------------------------------------------------------- stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); margin-top:70px}
.stat{border-top:1px solid var(--line); padding-top:26px}
.section--dark .stat{border-color:rgba(255,255,255,.22)}
.stat-num{font-size:clamp(2.5rem,5vw,3.6rem); line-height:1; letter-spacing:-.03em; color:var(--teal-deep)}
.section--dark .stat-num{color:var(--teal-bright)}
.stat-label{margin-top:14px; font-size:1rem; color:var(--ink-soft); line-height:1.5}
.section--dark .stat-label{color:rgba(255,255,255,.75)}
.stat-src{margin-top:10px; font-size:.8rem; color:var(--ink-soft); opacity:.75}
.section--dark .stat-src{color:rgba(255,255,255,.55)}
@media (max-width:820px){.stats{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); margin-top:66px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:clamp(28px,3vw,42px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-7px); box-shadow:0 22px 50px rgba(20,40,74,.11); border-color:transparent}
.card-num{font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:22px}
.card h3{margin-bottom:14px}
.card p{color:var(--ink-soft); margin-bottom:20px}
.card ul{list-style:none; margin:0; padding:0}
.card li{position:relative; padding-left:28px; margin-bottom:12px; font-size:1rem; color:var(--ink-soft); line-height:1.5}
.card li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:14px; height:8px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center}
.split--wide{grid-template-columns:.9fr 1.1fr}
@media (max-width:900px){.split,.split--wide{grid-template-columns:1fr}}
.split ul{list-style:none; margin:26px 0 32px; padding:0}
.split li{position:relative; padding-left:30px; margin-bottom:16px; color:var(--ink-soft)}
.split li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:15px; height:9px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}
.split li b{color:var(--navy); font-weight:600}

/* mock UI panel (stands in for a product screenshot) */
.panel{
  background:#fff; border-radius:24px; border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(20,40,74,.13); overflow:hidden;
}
.panel-bar{display:flex; align-items:center; gap:7px; padding:15px 20px; border-bottom:1px solid var(--line); background:#FAFCFD}
.panel-bar i{width:10px; height:10px; border-radius:50%; background:var(--line)}
.panel-bar span{margin-left:12px; font-size:.82rem; color:var(--ink-soft)}
.panel-body{padding:22px}
.row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 16px; border-radius:13px; background:#F6FAFC; margin-bottom:11px;
}
.row:last-child{margin-bottom:0}
.row-main{display:flex; align-items:center; gap:13px; min-width:0}
.row-dot{width:9px; height:9px; border-radius:50%; background:var(--teal); flex:none}
.row-dot--amber{background:#E8A33D}
.row-dot--grey{background:#9FB0C4}
.row-txt{font-size:.95rem; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row-meta{font-size:.8rem; color:var(--ink-soft); white-space:nowrap}
.pill{
  font-size:.74rem; padding:5px 12px; border-radius:20px;
  background:var(--tint-strong); color:var(--navy-soft); white-space:nowrap;
}
.pill--ok{background:#DFF3E4; color:#1F6B3A}
.pill--wait{background:#FBEEDA; color:#8A5A16}

/* ---------------------------------------------------------------- about */
.about{display:grid; grid-template-columns:260px 1fr; gap:clamp(30px,5vw,68px); align-items:center}
.about-photo{
  width:230px; height:230px; border-radius:50%; object-fit:cover; object-position:top center;
  box-shadow:0 20px 46px rgba(20,40,74,.2);
}
@media (max-width:760px){.about{grid-template-columns:1fr; text-align:left} .about-photo{width:170px;height:170px}}
.about-role{color:var(--teal-deep); margin:8px 0 20px; font-size:1.05rem}

/* ---------------------------------------------------------------- faq */
.faq{max-width:900px; margin-top:60px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:30px 0; text-align:left;
  font-family:inherit; font-size:clamp(1.15rem,1.9vw,1.45rem); font-weight:400;
  letter-spacing:-.02em; color:var(--navy); line-height:1.3;
  transition:color .25s var(--ease);
}
.faq-q:hover{color:var(--teal-deep)}
.faq-ico{position:relative; width:19px; height:19px; flex:none}
.faq-ico::before,.faq-ico::after{
  content:""; position:absolute; background:var(--teal-deep);
  left:50%; top:50%; transition:transform .32s var(--ease);
}
.faq-ico::before{width:19px; height:2px; transform:translate(-50%,-50%)}
.faq-ico::after{width:2px; height:19px; transform:translate(-50%,-50%)}
.faq-item.is-open .faq-ico::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.faq-a{overflow:hidden; height:0; transition:height .38s var(--ease)}
.faq-a p{padding-bottom:30px; margin:0; color:var(--ink-soft); max-width:70ch}

/* ---------------------------------------------------------------- cta */
.cta-band{text-align:center}
.cta-band h2{max-width:18ch; margin-inline:auto}
.cta-band p{max-width:56ch; margin:24px auto 0; color:rgba(255,255,255,.82); font-size:var(--lede)}
.cta-form{display:flex; gap:12px; justify-content:center; margin-top:40px; flex-wrap:wrap}
.cta-form input{
  flex:1 1 320px; max-width:400px;
  padding:15px 22px; border-radius:32px; border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.07); color:#fff; font-family:inherit; font-size:1rem;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.cta-form input::placeholder{color:rgba(255,255,255,.55)}
.cta-form input:focus{outline:none; border-color:var(--teal-bright); background:rgba(255,255,255,.12)}
.cta-note{margin-top:26px; font-size:.88rem; color:rgba(255,255,255,.6)}
.form-ok{display:none; margin-top:22px; color:var(--teal-bright)}
.cta-form.is-sent + .form-ok{display:block}

/* ---------------------------------------------------------------- footer */
.footer{background:var(--navy-deep); color:rgba(255,255,255,.72); padding:80px 0 40px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:44px}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr}}
.footer h4{color:#fff; font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; margin:0 0 18px; font-weight:400}
.footer a{display:block; color:rgba(255,255,255,.72); text-decoration:none; margin-bottom:11px; transition:color .25s var(--ease)}
.footer a:hover{color:var(--teal-bright)}
.footer-logo{height:36px; margin-bottom:20px}
.footer-blurb{max-width:38ch; font-size:1rem; line-height:1.6}
.footer-bottom{
  margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.85rem; color:rgba(255,255,255,.55);
}
.badges{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.badge{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(255,255,255,.22); border-radius:20px; padding:6px 15px;
  font-size:.8rem; color:rgba(255,255,255,.8);
}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
/* never leave content invisible if JS fails */
html:not(.js) .reveal{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1 !important; transform:none !important}
  .hero-slide{position:relative; opacity:1; transform:none}
  .hero-slide:not(.is-active){display:none}
}

/* ============================================================================
   MOTION LAYER v3.1 — parallax, immersive transitions, micro-interactions
   Rules kept throughout:
     · transform/opacity only (compositor-friendly, no layout thrash)
     · every scroll-driven value is written by ONE rAF loop in the page script
     · hover effects gated on (pointer:fine) so touch never gets stuck states
     · the whole layer collapses under prefers-reduced-motion
   ============================================================================ */

/* ---------------------------------------------------- scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:60;
  height:3px; width:100%;
  transform:scaleX(var(--progress,0)); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--teal), var(--teal-bright));
  pointer-events:none;
}

/* ------------------------------------------------------------- parallax */
/* --py is written per-element by the rAF loop */
[data-parallax]{ will-change:transform }
.hero-photo{ transform:translate3d(0, var(--py,0px), 0); will-change:transform }
/* hero content drifts up and dissolves as the section leaves */
.hero .container{
  transform:translate3d(0, var(--heroShift,0px), 0);
  opacity:var(--heroFade,1);
}
.hero-counter,.scroll-hint{ opacity:var(--heroFade,1) }

/* ------------------------------------------- word-mask headline reveal */
.w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.09em; margin-bottom:-.09em;
}
.w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  transition:transform .82s var(--ease);
  transition-delay:calc(var(--i,0) * 42ms);
}
.is-in .w > i, .hero-slide.is-active .w > i{ transform:translateY(0) }
html:not(.js) .w > i{ transform:none }

/* --------------------------------------------- immersive section reveal */
/* dark + tint bands open like a curtain as they enter the viewport */
.section--dark, .section--tint{
  clip-path:inset(var(--curtain,0%) 0 var(--curtain,0%) 0);
  transition:clip-path 1.1s var(--ease);
}
/* inner content of a band counter-moves slightly => depth */
.section--dark .container, .section--tint .container{
  transform:translate3d(0, var(--bandShift,0px), 0);
}

/* ------------------------------------------------------- directional reveal */
.reveal--left{transform:translate3d(-42px,0,0)}
.reveal--right{transform:translate3d(42px,0,0)}
.reveal--scale{transform:scale(.94)}
.reveal--left.is-in,.reveal--right.is-in,.reveal--scale.is-in{transform:none}

/* --------------------------------------------------------- card 3D tilt */
@media (hover:hover) and (pointer:fine){
  .card{ transform-style:preserve-3d; will-change:transform }
  .card.tilt{
    transform:
      perspective(900px)
      rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
      translateY(-7px);
    box-shadow:0 26px 60px rgba(20,40,74,.15);
  }
  .card .card-num,.card h3{ transform:translateZ(26px) }
  /* magnetic buttons */
  .btn{ will-change:transform }
  .btn.mag{ transform:translate3d(var(--mx,0px), var(--my,0px), 0) }
}

/* ------------------------------------------------------- panel parallax */
.panel{ transform:translate3d(0, var(--py,0px), 0); will-change:transform }
@media (hover:hover) and (pointer:fine){
  .panel.tilt{
    transform:
      translate3d(0, var(--py,0px), 0)
      perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  }
}
/* rows stagger in behind the panel chrome */
.panel .row{ opacity:0; transform:translateX(-14px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.is-in .panel .row, .panel.is-in .row{ opacity:1; transform:none }
.panel .row:nth-child(1){transition-delay:.10s}
.panel .row:nth-child(2){transition-delay:.20s}
.panel .row:nth-child(3){transition-delay:.30s}
.panel .row:nth-child(4){transition-delay:.40s}
html:not(.js) .panel .row{opacity:1; transform:none}

/* --------------------------------------------------------- stat underline */
.stat{position:relative}
.stat::after{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--teal-bright),transparent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--ease) .15s;
}
.stat.is-in::after{transform:scaleX(1)}

/* ------------------------------------------------------- about portrait */
.about-photo{
  transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));
  clip-path:circle(50% at 50% 50%);
  will-change:transform;
}
.about.is-in .about-photo{ animation:portraitIn 1.1s var(--ease) both }
@keyframes portraitIn{
  from{ clip-path:circle(0% at 50% 50%); opacity:0 }
  to{ clip-path:circle(50% at 50% 50%); opacity:1 }
}

/* ------------------------------------------------------ workflow video */
.wf-video{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid var(--line); background:var(--navy-deep);
  box-shadow:0 30px 70px rgba(20,40,74,.16);
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
}
.wf-video video{display:block; width:100%; height:auto}
.wf-cap{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-size:.76rem; letter-spacing:.02em; color:rgba(255,255,255,.72);
}

/* --------------------------------------------------- reduced motion off */
@media (prefers-reduced-motion:reduce){
  .hero-photo,.hero .container,.panel,.about-photo,.wf-video{transform:none !important}
  .hero .container,.hero-counter,.scroll-hint{opacity:1 !important}
  .section--dark,.section--tint{clip-path:none !important}
  .w > i{transform:none !important}
  .panel .row{opacity:1 !important; transform:none !important}
  .stat::after{transform:scaleX(1) !important}
  .about.is-in .about-photo{animation:none !important}
  .scroll-progress{display:none}
}