/* ==================================================================
   Noviq Solutions — shared styles
   Tokens follow the Noviq brand system (teal/petrol, Chivo + IBM Plex).
   ================================================================== */
:root{
  --ink:#05161A; --surface:#072E33; --surface-2:#0A3A40; --deep:#0C7075;
  --accent:#0F969C; --accent-hi:#17A9AF; --steel:#6DA5C0; --slate:#294D61;
  --success:#3FA980; --warning:#C99A45; --danger:#C2645B;
  --text:#F2FAFB; --body:#B9D0D3; --secondary:#93B6BA; --muted:#6E9BA1;
  --line:rgba(109,165,192,.14); --line-strong:#16454B;
  --gutter:clamp(24px,6vw,132px);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --head-h:74px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 24px)}
body{
  margin:0;background:var(--ink);color:var(--body);
  font-family:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--steel);text-decoration:none;transition:color .16s var(--ease),border-color .16s var(--ease)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.wrap{max-width:1380px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--accent);color:#04191C;padding:10px 16px;border-radius:var(--r-sm)}

/* ---------- header / navigation ---------- */
.site-head{position:sticky;top:0;z-index:100;height:var(--head-h);
  background:rgba(5,22,26,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease),background .25s var(--ease)}
.site-head.is-stuck{border-bottom-color:var(--line);background:rgba(5,22,26,.93)}
.head-in{height:var(--head-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand:hover{color:inherit}
.brand svg{flex:none;transition:transform .5s var(--ease)}
.brand:hover svg{transform:translateY(-2px) rotate(-4deg)}
.brand-name{font-family:'Chivo','Helvetica Neue',Arial,sans-serif;font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1;color:var(--text);display:block}
.brand-desc{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:.3em;color:var(--steel);margin-top:4px;display:block}

.nav{display:flex;align-items:center;gap:4px}
.nav a{position:relative;padding:9px 14px;border-radius:var(--r-sm);font-size:15px;color:var(--secondary)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--steel)}
.nav-cta{margin-left:14px}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer;color:var(--text)}
.nav-toggle span{display:block;width:18px;height:1.6px;background:currentColor;position:relative;transition:background .2s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:currentColor;transition:transform .28s var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .js .nav-toggle{display:flex}
  /* Collapsed only when the script is there to open it again. Without JS the
     nav simply stacks under the header and stays usable. */
  .js .nav{position:fixed;inset:var(--head-h) 0 auto 0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease)}
  .js .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav{flex-direction:column;align-items:stretch;gap:2px;
    padding:18px var(--gutter) 28px;background:rgba(5,22,26,.98);border-bottom:1px solid var(--line)}
  .nav a{padding:13px 4px;font-size:17px}
  .nav a::after{left:4px;right:4px;bottom:8px}
  .nav-cta{margin:14px 0 0;width:100%}
  .head-in{flex-wrap:wrap}
}

/* ---------- footer ---------- */
.site-foot{margin-top:clamp(80px,11vw,140px);border-top:1px solid var(--line);padding:56px 0 52px}
.foot-grid{display:grid;gap:40px 48px;grid-template-columns:1fr}
@media (min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.foot-about{font-size:15px;color:var(--muted);max-width:40ch;margin:18px 0 0}
.foot-h{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.22em;color:var(--steel);margin:0 0 16px}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:15px}
.foot-list a{color:var(--secondary)}
.foot-list a:hover{color:var(--accent)}
.foot-bar{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px 30px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.foot-mail{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;color:var(--steel)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;
  border:0;border-radius:var(--r-md);font-family:'Chivo','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:15px;
  background:var(--accent);color:#04191C;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{background:var(--accent-hi);color:#04191C;transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(15,150,156,.85)}
.btn:active{transform:none;background:var(--deep)}
.btn[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn svg{flex:none;transition:transform .22s var(--ease)}
.btn:hover svg.arrow{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost:hover{background:rgba(15,150,156,.1);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.btn-sm{height:42px;padding:0 18px;font-size:14px}

/* ---------- section furniture ---------- */
/* Vertical only - the horizontal gutter comes from .wrap, and a padding
   shorthand here would silently reset it on every <section class="sec wrap">. */
.sec{padding-top:clamp(72px,10vw,124px)}
.sec-label{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.24em;color:var(--steel);margin:0 0 22px}
.sec-label::before{content:"";width:26px;height:1px;background:var(--accent);
  transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease) .1s}
.is-in .sec-label::before,.sec-label.is-in::before{transform:scaleX(1)}
h1,h2,h3{font-family:'Chivo','Helvetica Neue',Arial,sans-serif;color:var(--text);text-wrap:balance}
.h-xl{font-weight:900;font-size:clamp(38px,6.4vw,74px);letter-spacing:-.032em;line-height:1.03;margin:0}
.h-lg{font-weight:900;font-size:clamp(29px,3.9vw,46px);letter-spacing:-.028em;line-height:1.1;margin:0}
.h-md{font-weight:700;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.018em;line-height:1.25;margin:0}
.h-sm{font-weight:700;font-size:18px;letter-spacing:-.012em;line-height:1.35;margin:0}
.lead{font-size:clamp(17px,1.9vw,20px);line-height:1.62;color:var(--secondary);max-width:62ch;text-wrap:pretty}
.p{margin:16px 0 0;max-width:66ch;text-wrap:pretty}
.p-sm{font-size:15px;line-height:1.65;color:var(--secondary)}
.dim{color:var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,110px) 0 clamp(20px,3vw,40px)}
.hero-home{padding-bottom:clamp(40px,6vw,72px)}
.hero-in{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.24em;color:var(--steel);
  padding:8px 16px 8px 13px;border:1px solid var(--line-strong);border-radius:var(--r-full);margin:0 0 30px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.62)}}
.hero-mark{position:absolute;right:-4%;top:-6%;width:min(52vw,720px);pointer-events:none;z-index:1;
  --hm-rest:.15;--hm-peak:1}
/* Opacity sits on the group, not on each stroke: overlapping strokes are
   flattened first, so the arrowhead does not stack into a bright blotch. */
.hero-mark .hm-g{opacity:var(--hm-rest)}

/* The mark draws itself: the N stroke travels up from its lower end, and the
   arrowhead lands once the stroke reaches the top. Lengths are the path
   lengths rounded up — 84.5 and 18.1 in the 48-unit viewBox. */
/* One continuous stroke. The stem is 84.5 units long, each barb 9.05, and the
   stem ends exactly where the barbs begin. Timings are set so the pen keeps
   the same speed through the corner: 84.5 / 1.45s = 58 units/s, so 9.05 units
   take 0.156s. The stem's easing ends at full velocity (control point 1,1)
   instead of coasting to a stop, otherwise the arrow reads as a second,
   separate movement. */
.js .hero-mark path{stroke-dashoffset:0}
.js .hero-mark .hm-stem{stroke-dasharray:85;stroke-dashoffset:85;
  animation:draw 1.45s cubic-bezier(.42,0,1,1) .3s forwards}
.js .hero-mark .hm-barb{stroke-dasharray:9.1;stroke-dashoffset:9.1;
  animation:draw .16s linear 1.75s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* Full logo colours while it is being drawn, then back to a 5% watermark. */
.js .hero-mark .hm-g{animation:hmglow 2.8s cubic-bezier(.4,0,.6,1) .3s both}
@keyframes hmglow{0%,66%{opacity:var(--hm-peak)}100%{opacity:var(--hm-rest)}}
/* On phones the mark sits behind the badge and headline, so the peak is capped:
   white text over the steel arrowhead stays at 6.8:1 instead of dropping to 2.6:1. */
@media (max-width:760px){.hero-mark{--hm-peak:.5}}
.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(109,165,192,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(109,165,192,.055) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 20% 0%,#000 0%,transparent 72%)}
.hero-actions{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:38px}
.hero-mail{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;color:var(--steel)}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:20px;grid-template-columns:1fr}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media (min-width:640px){.g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;padding:30px 28px 32px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(12,112,117,.10),rgba(7,46,51,.34));
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:rgba(15,150,156,.5);box-shadow:0 22px 44px -28px rgba(0,0,0,.9)}
.card h3{margin:18px 0 10px}
.card p{margin:0;font-size:15px;line-height:1.65;color:var(--secondary)}
.card-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:rgba(15,150,156,.12);color:var(--accent);transition:background .3s var(--ease)}
.card:hover .card-ico{background:rgba(15,150,156,.22)}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.06em;color:var(--steel)}
.card-link svg{transition:transform .22s var(--ease)}
.card:hover .card-link svg{transform:translateX(4px)}

/* numbered steps */
.step{position:relative;padding:28px 26px 30px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(7,46,51,.28);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.step:hover{border-color:rgba(15,150,156,.45);transform:translateY(-4px)}
.step-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:16px}
.step h3{margin:0 0 9px}
.step p{margin:0;font-size:15px;line-height:1.65;color:var(--secondary)}

/* split rows */
.split{display:grid;gap:28px 64px;grid-template-columns:1fr;align-items:start;
  padding:clamp(44px,5.5vw,68px) 0;border-top:1px solid var(--line)}
@media (min-width:920px){.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.split:first-of-type{border-top:0}
.split ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.split li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.6;color:var(--secondary)}
.split li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:2px;
  background:rgba(15,150,156,.22);box-shadow:inset 0 0 0 1px var(--accent)}

/* stat strip */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--ink);padding:28px 24px 30px}
.stat b{display:block;font-family:'Chivo',sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.03em;color:var(--text);line-height:1}
.stat span{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}

/* highlight band */
.band{margin-top:clamp(56px,7vw,84px);padding:clamp(34px,4.4vw,52px);border:1px solid var(--line);
  border-radius:var(--r-xl);background:linear-gradient(135deg,rgba(12,112,117,.2),rgba(41,77,97,.16));
  display:flex;align-items:center;justify-content:space-between;gap:26px 44px;flex-wrap:wrap}
.band-txt{max-width:54ch}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.2em;color:#05161A;background:var(--steel);padding:8px 14px;border-radius:var(--r-full);white-space:nowrap}
.pill-quiet{background:transparent;color:var(--steel);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* tag list */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.tags li{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;letter-spacing:.04em;color:var(--secondary);
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-full);transition:border-color .25s var(--ease),color .25s var(--ease)}
.tags li:hover{border-color:rgba(15,150,156,.5);color:var(--text)}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:26px 56px;grid-template-columns:1fr;align-items:start}
@media (min-width:1000px){.form-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.field{display:grid;gap:9px;margin-bottom:20px}
.field label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;color:var(--steel)}
.field .opt{color:var(--muted);letter-spacing:.06em}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--text);background:rgba(109,165,192,.06);
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:14px 16px;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.field input{height:54px;padding:0 16px}
.field select{height:54px;padding:0 16px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%236DA5C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#1D565D}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(15,150,156,.07)}
.field-row{display:grid;gap:0 20px;grid-template-columns:1fr}
@media (min-width:620px){.field-row{grid-template-columns:1fr 1fr}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fineprint{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:56ch}
.fineprint a{color:var(--steel)}
.aside{padding:30px 28px 32px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(7,46,51,.28)}
.aside + .aside{margin-top:20px}
.aside h3{margin:0 0 14px}
.aside p{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--secondary)}
.aside p:last-child{margin-bottom:0}
.aside .addr{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;line-height:1.95;color:var(--secondary)}
.msg{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;border-radius:var(--r-md);font-size:15px;line-height:1.55;margin-bottom:24px}
.msg svg{flex:none;margin-top:2px}
.msg-ok{background:rgba(63,169,128,.12);border:1px solid rgba(63,169,128,.45);color:var(--text)}
.msg-err{background:rgba(194,100,91,.12);border:1px solid rgba(194,100,91,.45);color:var(--text)}

/* ---------- long-form legal pages ---------- */
.doc{max-width:820px;margin:0 auto;padding-top:clamp(48px,6vw,72px)}
.doc h1{font-weight:900;font-size:clamp(32px,6vw,46px);letter-spacing:-.03em;line-height:1.05;margin:0}
.doc h2{font-weight:700;font-size:22px;letter-spacing:-.015em;margin:46px 0 14px}
.doc h3{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);font-weight:400;margin:30px 0 10px}
.doc p{margin:0 0 16px}
.doc ul{margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:9px}
.doc a{border-bottom:1px solid rgba(109,165,192,.35)}
.doc a:hover{border-bottom-color:var(--accent)}
.doc .lead{font-size:19px;margin-top:20px}
.doc .addr{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;line-height:2;color:var(--text)}
.doc .small{font-size:15px;color:var(--muted)}
.doc .toc{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;line-height:2;columns:2;column-gap:36px;margin:28px 0 8px}
.doc .toc a{border:0;color:var(--body)}
.doc .toc a:hover{color:var(--accent)}
.doc .box{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:20px 24px;margin:20px 0}
.doc .box p{margin:0;font-size:15px}
@media (max-width:640px){.doc .toc{columns:1}}

/* ---------- scroll reveal (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)}
.js .reveal.is-in{opacity:1;transform:none}


/* ==================================================================
   Motion layer — everything below is enhancement only. Without JS the
   site renders complete and static; with prefers-reduced-motion every
   rule here is neutralised at the bottom of this file.
   ================================================================== */

/* scroll progress, injected by site.js */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:150;
  background:linear-gradient(90deg,var(--accent),var(--steel));
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* header condenses once you leave the top */
.site-head{transition:height .3s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.site-head.is-stuck{height:62px}
.site-head.is-stuck .head-in{height:62px}
.site-head .brand svg{transition:transform .35s var(--ease),width .3s var(--ease),height .3s var(--ease)}
.site-head.is-stuck .brand svg{width:28px;height:28px}
.site-head.is-stuck .brand-desc{opacity:0;transform:translateY(-3px)}
.brand-desc{transition:opacity .25s var(--ease),transform .25s var(--ease)}

/* hero headline, revealed word by word (spans added by site.js) */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w > i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.js .h-xl.is-in .w > i,.js .h-xl:not(.reveal) .w > i{transform:none}
.w > i{transition-delay:calc(var(--wi,0) * 55ms)}

/* pointer-following highlight on cards and steps */
.card,.step{position:relative;isolation:isolate}
.card::after,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(15,150,156,.16),transparent 62%)}
.card:hover::after,.step:hover::after{opacity:1}

/* buttons: light sweep on hover */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;transform:translateX(-102%);
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.22) 50%,transparent 72%);
  transition:transform .7s var(--ease)}
.btn:hover::before{transform:translateX(102%)}

/* text links in the long-form pages: underline sweeps in */
.doc p a,.doc li a{background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  border-bottom-color:transparent;transition:background-size .3s var(--ease),color .16s var(--ease)}
.doc p a:hover,.doc li a:hover{background-size:100% 1px}

/* list items inside split rows arrive one after another */
.js .split.is-in li{animation:slide-in .6s var(--ease) both}
.js .split.is-in li:nth-child(1){animation-delay:.05s}
.js .split.is-in li:nth-child(2){animation-delay:.13s}
.js .split.is-in li:nth-child(3){animation-delay:.21s}
.js .split.is-in li:nth-child(4){animation-delay:.29s}
.js .split.is-in li:nth-child(5){animation-delay:.37s}
@keyframes slide-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* stat cells count in */
.js .stats .stat{transition:background .3s var(--ease)}
.stats .stat:hover{background:rgba(15,150,156,.06)}

/* tags settle in on reveal */
.js .tags.is-in li{animation:pop .5s var(--ease) both}
.js .tags li:nth-child(n){animation-delay:calc(var(--ti,0) * 35ms)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}

/* the band gets a slow drifting sheen */
.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:-40% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 20% 30%,rgba(15,150,156,.16),transparent 70%);
  animation:sheen 14s ease-in-out infinite alternate}
.band > *{position:relative;z-index:1}
@keyframes sheen{from{transform:translate3d(0,0,0)}to{transform:translate3d(14%,10%,0)}}

/* focus ring that does not jump */
:focus-visible{transition:outline-offset .12s var(--ease)}

/* ---------- print ---------- */
@media print{
  body{background:#fff;color:#1A2426}
  .site-head,.skip,.site-foot nav,.grid-bg,.hero-mark{display:none}
  a{color:#0C7075}
  .doc h1,.doc h2,.brand-name,.doc .addr{color:#05161A}
  .brand-desc,.doc h3{color:#294D61}
  .doc .box{background:#EEF3F3;border-color:#CBDADA}
  .js .reveal{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .js .w > i{transform:none!important}
  .progress{display:none}
  .card::after,.step::after,.btn::before,.band::before{display:none}
  .js .split.is-in li,.js .tags.is-in li{animation:none}
  .site-head.is-stuck{height:var(--head-h)}
  .site-head.is-stuck .head-in{height:var(--head-h)}
  .js .hero-mark path{animation:none!important;stroke-dashoffset:0!important}
  .js .hero-mark .hm-g{animation:none!important;opacity:var(--hm-rest)}
}