/* ===== Digital Ranker website styles. Shared structure, the Daylight look, then the glass layer and page components. ===== */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ interpolate-size:allow-keywords; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; }
.page{ min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:24px; -webkit-font-smoothing:antialiased; overflow-x:clip; }
:where(.page) img,:where(.page) svg{ display:block; max-width:100%; }
:where(.page) a{ color:inherit; }
:where(.page) :where(h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote){ margin:0; }
:where(.page) :where(ul,ol){ padding:0; list-style:none; }
:where(.page) :where(button,input,select,textarea){ font:inherit; color:inherit; }
:where(.page) :focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-sm); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ic{ width:20px; height:20px; flex:none; }
.ic-sm{ width:16px; height:16px; flex:none; }
.ic-xs{ width:12px; height:12px; flex:none; }
.muted{ color:var(--ink-muted); }
.teal{ color:var(--brand-display); }

/* light island: depicted websites and the form always render light */
.light-scope{ --bg:#ffffff; --bg-alt:#f0f2f4; --surface:#ffffff; --surface-soft:#f5f7f7; --ink:#1a1a1a; --ink-muted:#4b5957; --line:#dde4e3; --line-strong:#7f908d; --brand-display:#1c9c84; --brand-text:#167c68; --brand-soft:#e2f5f1; --brand-line:#bfe6dd; --danger:#c53030; --danger-soft:#fdeceb; --todo-bg:#fff6db; --todo-ink:#6b4e00; --todo-line:#d9b84a; --track:#e8edec; --focus:#167c68; color:var(--ink); }

/* placeholders still to fill */
.ph{ display:inline-block; background:var(--todo-bg); color:var(--todo-ink); border:1px dashed var(--todo-line); border-radius:var(--r-sm); padding:0 8px; font-weight:500; font-size:.92em; line-height:1.5; }

/* layout */
.wrap{ position:relative; max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.band{ position:relative; }
.band > .wrap{ padding-block:var(--sec); }
.alt{ background:var(--bg-alt); }
section[id]{ scroll-margin-top:64px; }

/* type */
.h1{ font-family:var(--font-display); font-weight:var(--h1-weight); font-size:var(--h1-size); line-height:1.08; letter-spacing:var(--h1-track); text-wrap:balance; }
.h2{ font-family:var(--font-display); font-weight:700; font-size:var(--h2-size); line-height:1.16; letter-spacing:-.025em; text-wrap:balance; }
.h3{ font-family:var(--font-display); font-weight:700; font-size:19px; line-height:28px; letter-spacing:-.01em; }
.lead{ font-size:18px; line-height:28px; color:var(--ink-muted); text-wrap:pretty; }
.sec-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; max-width:800px; margin:0 auto 56px; }
.sec-head .lead{ max-width:640px; }
.sec-head.left{ align-items:flex-start; text-align:left; margin:0; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:14px; line-height:24px; font-weight:500; }
.pill{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 16px; border-radius:var(--r-full); font-size:14px; font-weight:500; white-space:nowrap; }
.pill-dot{ position:relative; width:8px; height:8px; flex:none; border-radius:50%; background:var(--brand); }
.pill-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--brand); }
@media (prefers-reduced-motion:no-preference){ .pill-dot::after{ animation:ping 2.2s var(--ease) infinite; } }

/* cards */
.card{ position:relative; background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--r-card); box-shadow:var(--card-shadow); }
.icon-tile{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:var(--r-md); background:var(--tile-bg); color:var(--tile-ink); border:1px solid var(--tile-line); transition:transform .4s var(--ease),background-color .3s,color .3s; }

/* buttons */
.btn{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 24px; border-radius:var(--r-full); border:1px solid transparent; font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.005em; text-decoration:none; cursor:pointer; white-space:nowrap; transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{ background:var(--brand); color:var(--on-brand); padding-right:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.16),0 4px 12px -4px rgba(0,0,0,.24); }
.btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--btn-hover-bg); transform:translateY(102%); transition:transform .45s var(--ease); }
.btn-primary::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:32%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg) translateX(-150%); pointer-events:none; }
.btn-primary .arrow{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--arrow-bg); color:var(--arrow-ink); transition:transform .45s var(--ease),background-color .3s,color .3s; }
.btn-primary:hover,.btn-primary:focus-visible{ color:var(--btn-hover-ink); transform:translateY(-2px); box-shadow:0 16px 24px -16px rgba(0,0,0,.6); }
.btn-primary:hover::before,.btn-primary:focus-visible::before{ transform:none; }
.btn-primary:hover .arrow,.btn-primary:focus-visible .arrow{ background:var(--brand); color:var(--on-brand); transform:rotate(45deg); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
@media (prefers-reduced-motion:no-preference){
  .btn-primary:hover::after{ animation:shine .9s var(--ease); }
  .btn-shine::after{ animation:shine-loop 6s 2s var(--ease) infinite; }
}
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ghost-line); }
.btn-ghost .ic-sm{ transition:transform .3s var(--ease); }
.btn-ghost:hover,.btn-ghost:focus-visible{ border-color:var(--ink); background:var(--ghost-hover); transform:translateY(-2px); }
.btn-ghost:hover .ic-sm{ transform:translateY(2px); }
.btn-lg{ height:56px; font-size:16px; padding:0 32px; }
.btn-lg.btn-primary{ padding-right:8px; }
.btn-lg .arrow{ width:40px !important; height:40px !important; }
.btn-sm{ height:40px; font-size:14px; padding:0 16px; }
.btn-sm.btn-primary{ padding-right:16px; }
.btn-block{ width:100%; }
.btn-block.btn-primary{ padding-right:32px; }
.btn-onnight{ background:var(--on-night); color:#081616; }
.btn-onnight:hover,.btn-onnight:focus-visible{ background:var(--brand); color:var(--on-brand); transform:translateY(-2px); }
.magnet{ transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),translate .25s var(--ease); }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--brand-text); text-decoration:none; }
.link-arrow .ic-sm{ transition:transform .25s var(--ease); }
.link-arrow:hover .ic-sm{ transform:translate(2px,-2px); }

/* header */
.site-header{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--header-bg); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-bottom:1px solid transparent; transition:border-color .25s,background-color .25s; }
.site-header.scrolled{ border-bottom-color:var(--line); }
.hdr{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; gap:16px; }
.logo{ display:inline-flex; align-items:center; }
.logo img{ height:32px; width:auto; }
.nav{ position:relative; display:flex; align-items:center; }
.nav a{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; font-size:14px; font-weight:500; text-decoration:none; color:var(--ink-muted); border-radius:var(--r-full); transition:color .2s; }
.nav a:hover,.nav a.active{ color:var(--ink); }
.nav-ind{ position:absolute; top:0; left:0; height:40px; width:0; border-radius:var(--r-full); opacity:0; transition:transform .4s var(--ease),width .4s var(--ease),opacity .2s; }
.hdr-actions{ display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.text-link{ font-size:14px; font-weight:600; text-decoration:none; }
.text-link:hover{ color:var(--brand-text); }
.menu-btn{ display:none; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-full); border:1px solid var(--line); background:transparent; font-weight:600; font-size:14px; cursor:pointer; }
@media (max-width:1040px){ .hdr{ grid-template-columns:1fr auto; } .nav,.hdr-actions{ display:none; } .menu-btn{ display:inline-flex; } }
.mobile-menu{ position:fixed; inset:0; z-index:60; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 24px); }
.mm-top{ display:flex; align-items:center; justify-content:space-between; height:48px; }
.mm-top img{ height:32px; width:auto; }
.mm-close{ display:inline-flex !important; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:8px; margin-top:32px; }
.mobile-menu nav a{ font-family:var(--font-display); font-weight:700; font-size:28px; line-height:48px; text-decoration:none; }
.mm-bottom{ margin-top:auto; }
@media (prefers-reduced-motion:no-preference){
  .mobile-menu:not([hidden]) nav a{ animation:rise .5s var(--ease) both; }
  .mobile-menu:not([hidden]) nav a:nth-child(2){ animation-delay:.04s; } .mobile-menu:not([hidden]) nav a:nth-child(3){ animation-delay:.08s; }
  .mobile-menu:not([hidden]) nav a:nth-child(4){ animation-delay:.12s; } .mobile-menu:not([hidden]) nav a:nth-child(5){ animation-delay:.16s; } .mobile-menu:not([hidden]) nav a:nth-child(6){ animation-delay:.2s; }
}

/* hero copy */
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.note{ display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:24px; color:var(--ink-muted); max-width:520px; }
.note .ic-sm{ color:var(--brand-text); margin-top:4px; }
.words .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.words .w > span{ display:inline-block; }
@media (prefers-reduced-motion:no-preference){ .words .w > span{ animation:wordup .9s calc(var(--i) * 55ms + 80ms) var(--ease) both; } }
.swoosh-wrap{ position:relative; white-space:nowrap; }
.swoosh{ position:absolute; left:-2%; bottom:-12px; width:104%; height:20px; overflow:visible; pointer-events:none; }
.swoosh path{ fill:none; stroke:var(--brand); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){ .swoosh path{ animation:draw 1.1s .8s var(--ease) both; } }

/* category tabs */
.cats{ display:flex; gap:8px; }
.cat{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); font-size:14px; font-weight:600; cursor:pointer; transition:color .25s,border-color .25s,background-color .25s; white-space:nowrap; }
.cat:hover{ color:var(--ink); }
.cat.on{ color:var(--ink); border-color:var(--brand-line); background:var(--brand-soft); }
.cat .ic-sm{ color:var(--brand-text); }
.cat-bar{ position:absolute; left:16px; right:16px; bottom:4px; height:2px; border-radius:2px; overflow:hidden; opacity:0; }
.cat-bar b{ display:block; height:100%; background:var(--brand); transform:scaleX(0); transform-origin:left; }
.cat.on .cat-bar{ opacity:1; }
.cat.on.run .cat-bar b{ animation:progress var(--cycle,7.2s) linear forwards; }

/* phone and depicted sites */
.phone{ position:relative; width:248px; height:512px; border-radius:40px; background:#0a1414; padding:8px; box-shadow:0 32px 48px -24px rgba(8,22,22,.35),0 8px 16px rgba(8,22,22,.08),inset 0 0 0 1px rgba(255,255,255,.06); }
.phone::before{ content:""; position:absolute; top:16px; left:50%; width:72px; height:16px; margin-left:-36px; border-radius:var(--r-full); background:#0a1414; z-index:5; }
.screen{ position:relative; height:100%; border-radius:32px; overflow:hidden; background:#fafbfb; }
.urlbar{ position:relative; z-index:3; display:flex; align-items:center; gap:8px; height:72px; padding:40px 16px 8px; background:#fff; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-muted); transition:background-color .4s var(--ease),box-shadow .4s var(--ease); }
.url{ flex:1; min-width:0; height:24px; display:flex; align-items:center; gap:8px; padding:0 8px; border-radius:var(--r-sm); background:var(--surface-soft); white-space:nowrap; overflow:hidden; }
.loadbar{ position:absolute; left:0; bottom:-1px; height:2px; width:34%; background:var(--danger); }
@media (prefers-reduced-motion:no-preference){ .loadbar{ animation:slowload 4.8s linear infinite; } }
.sites{ position:relative; height:calc(100% - 72px); overflow:hidden; }
.site{ position:absolute; inset:0 0 auto; padding:16px; display:flex; flex-direction:column; gap:16px; opacity:0; visibility:hidden; transform:translateX(32px); transition:opacity .45s var(--ease),transform .7s var(--ease),visibility 0s .7s; }
.site.on{ opacity:1; visibility:visible; transform:none; transition:opacity .45s var(--ease) .1s,transform .7s var(--ease); }
.site-nav{ display:flex; justify-content:space-between; align-items:center; height:24px; }
.s-logo{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:#22302e; }
.lg{ width:20px; height:20px; border-radius:6px; background:#2e3a38 center/12px no-repeat; }
.lg-home{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13 12 5l9 8'/%3E%3Cpath d='M6 11v8h12v-8'/%3E%3C/svg%3E"); }
.lg-store{ background-color:#1f2b6b; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.lg-clinic{ background-color:#167c68; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.s-burger{ display:flex; flex-direction:column; gap:3px; } .s-burger i{ width:16px; height:2px; border-radius:2px; background:#2e3a38; }
.s-cart{ color:#2e3a38; }
.s-hero{ position:relative; height:120px; flex:none; border-radius:var(--r-md); overflow:hidden; display:flex; align-items:flex-end; padding:16px; }
.s-hero-photo{ background:linear-gradient(180deg,rgba(8,22,22,0) 20%,rgba(8,22,22,.78)),url("../images/sample-roof.webp") 72% 30%/cover no-repeat,linear-gradient(170deg,#9fcfdc,#e3efec 80%); }
.s-hero-clinic{ background:radial-gradient(120% 120% at 100% 0%,#bfe6dd 0%,transparent 60%),linear-gradient(135deg,#e2f5f1,#f6fbfa); }
.s-hero-ic{ position:absolute; right:16px; top:16px; width:32px; height:32px; color:#1c9c84; }
.sh-text{ display:flex; flex-direction:column; gap:4px; color:#fff; }
.s-hero-clinic .sh-text{ color:#123b35; }
.sh-text b{ max-width:144px; font-size:13px; line-height:16px; font-weight:700; text-shadow:0 1px 2px rgba(8,22,22,.25); }
.s-hero-clinic .sh-text b{ text-shadow:none; }
.sh-text span{ font-size:10px; line-height:12px; opacity:.9; }
.s-tel,.s-contact{ position:relative; display:flex; align-items:center; gap:8px; height:32px; flex:none; padding:0 8px 0 4px; border-radius:var(--r-sm); background:var(--surface-soft); font-size:12px; font-weight:600; color:#3d4846; transition:background-color .4s var(--ease),box-shadow .4s var(--ease); }
.s-tel:not([data-fix]){ padding-left:8px; }
.s-contact{ background:transparent; color:#167c68; }
.s-contact .chev{ font-style:normal; margin-left:auto; color:var(--ink-muted); }
.s-btn{ height:36px; flex:none; border-radius:var(--r-sm); background:#2e3a38; color:#fff; font-size:12px; font-weight:600; display:grid; place-items:center; }
.s-list li{ display:flex; justify-content:space-between; align-items:center; height:32px; border-bottom:1px solid var(--line); font-size:11px; font-weight:500; color:#3d4846; }
.s-list li i{ font-style:normal; color:var(--ink-muted); }
.s-rev,.s-form{ position:relative; display:flex; flex-direction:column; gap:8px; flex:none; padding:12px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); transition:box-shadow .4s var(--ease); }
.rev-h{ display:flex; align-items:center; gap:8px; }
.rev-h b{ font-size:11px; line-height:16px; color:#22302e; }
.s-in{ height:20px; border-radius:6px; border:1px solid var(--line); background:#fafbfb; }
.s-prod{ position:relative; height:160px; flex:none; border-radius:var(--r-md); background:url("../images/sample-product.webp") center/cover no-repeat,#e2f5f1; }
.s-pop{ position:absolute; left:12px; right:12px; top:32px; display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:var(--r-sm); background:#fff; box-shadow:0 16px 32px -12px rgba(8,22,22,.4); border:1px solid var(--line); transition:box-shadow .4s var(--ease); }
.s-pop .x{ margin-left:auto; font-size:12px; color:var(--ink-muted); }
.s-pop-in{ height:20px; border-radius:6px; border:1px solid var(--line); }
.s-pop-btn{ height:24px; border-radius:6px; background:#1f2b6b; color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; }
.s-pinfo{ display:flex; justify-content:space-between; align-items:center; font-size:13px; line-height:16px; color:#22302e; }
.s-pinfo .price{ font-weight:600; }
.s-sizes{ display:flex; gap:8px; }
.s-sizes i{ display:grid; place-items:center; width:28px; height:28px; border-radius:var(--r-sm); border:1px solid var(--line); font-style:normal; font-size:11px; font-weight:600; color:#3d4846; }
.s-sizes i.on{ background:#2e3a38; color:#fff; border-color:#2e3a38; }
.s-lines{ display:flex; flex-direction:column; gap:8px; }
.s-atc{ position:relative; display:flex; align-items:center; justify-content:center; height:40px; flex:none; border-radius:var(--r-sm); background:#1f2b6b; color:#fff; font-size:12px; font-weight:700; transition:box-shadow .4s var(--ease); }
.s-atc .mark{ position:absolute; left:8px; top:8px; }
.sk{ display:block; height:8px; border-radius:var(--r-full); background:#e3e8e7; }
.sk.d{ background:#cfd8d6; }
.stars{ display:flex; gap:4px; }
.stars i{ width:12px; height:12px; background:#e8b339; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.mark{ position:relative; z-index:4; display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; background:#0a1414; color:#fbfdfd; font-family:var(--font-display); font-weight:700; font-size:12px; font-style:normal; box-shadow:0 0 0 3px #fff; transition:transform .4s var(--ease),background-color .4s,color .4s; }
.mark::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--brand); opacity:0; }
@media (prefers-reduced-motion:no-preference){ .mark::after{ animation:ripple 2.4s var(--ease) infinite; } .m2::after{ animation-delay:.8s; } .m3::after{ animation-delay:1.6s; } }
/* the audit walks fix 1, 2, 3 on the visible site */
[data-step="1"] .urlbar{ background:#effaf7; box-shadow:inset 0 0 0 2px var(--brand); }
[data-step="2"] .site.on [data-fix="2"],[data-step="3"] .site.on [data-fix="3"]{ box-shadow:0 0 0 2px var(--brand); }
[data-step="2"] .site.on .s-tel[data-fix="2"],[data-step="2"] .site.on .s-contact[data-fix="2"]{ background:#e6f7f3; }
[data-step="1"] .m1,[data-step="2"] .site.on .m2,[data-step="3"] .site.on .m3{ background:var(--brand); color:#081616; transform:scale(1.15); }
[data-step="3"] .site.on[data-site="home"]{ transform:translateY(-72px); }
[data-step="2"] .site.on[data-site="store"]{ transform:translateY(-72px); }
[data-step="3"] .site.on[data-site="clinic"]{ transform:translateY(-80px); }

/* fix card */
.fixcard{ position:relative; width:304px; padding:24px; border-radius:var(--r-lg); background:var(--fix-bg); border:1px solid var(--fix-line); box-shadow:var(--fix-shadow); display:flex; flex-direction:column; gap:16px; color:var(--ink); }
.fix-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.fix-title{ font-family:var(--font-display); font-weight:700; font-size:18px; line-height:24px; }
.tag-example{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); padding:0 8px; height:24px; display:inline-flex; align-items:center; border-radius:var(--r-full); background:var(--surface-soft); border:1px solid var(--line); white-space:nowrap; }
.gauge-row{ display:flex; align-items:center; gap:16px; padding:16px; border-radius:var(--r-md); background:var(--surface-soft); }
.gauge{ width:88px; height:48px; flex:none; }
.gauge .trk{ fill:none; stroke:var(--track); stroke-width:10; stroke-linecap:round; }
.gauge .val{ fill:none; stroke:var(--danger); stroke-width:10; stroke-linecap:round; stroke-dasharray:100 100; stroke-dashoffset:calc(100 - var(--v,38)); transition:stroke-dashoffset 1.2s var(--ease); }
.gauge-num{ font-family:var(--font-display); font-weight:800; font-size:24px; line-height:32px; color:var(--danger); font-variant-numeric:tabular-nums; }
.gauge-num small{ font-size:14px; font-weight:600; color:var(--ink-muted); }
.gauge-lbl{ font-size:14px; line-height:24px; color:var(--ink-muted); }
.fix-list li{ position:relative; display:flex; align-items:center; gap:16px; min-height:40px; font-size:14px; line-height:20px; font-weight:500; padding:8px 0; border-top:1px solid var(--line); transition:color .3s; cursor:default; }
.fix-list li:first-child{ border-top:0; padding-top:0; }
.fix-list li::after{ content:""; position:absolute; left:40px; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; }
.fix-list li.on::after{ animation:progress var(--step,2.4s) linear forwards; }
[data-step] .fix-list li:not(.on){ color:var(--ink-muted); }
[data-step="0"] .fix-list li{ color:var(--ink); }
.fix-list .num{ display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; background:var(--num-bg); color:var(--num-ink); font-family:var(--font-display); font-weight:700; font-size:12px; transition:background-color .3s,color .3s; }
.fix-list li.on .num{ background:var(--brand); color:#081616; }
.fx{ transition:opacity .3s var(--ease),transform .3s var(--ease); }
.fx.swap{ opacity:0; transform:translateY(8px); }
.danger-chip{ margin-left:auto; height:24px; padding:0 8px; border-radius:var(--r-full); background:var(--danger-soft); color:var(--danger); font-size:12px; font-weight:600; display:inline-flex; align-items:center; font-variant-numeric:tabular-nums; }

/* video chip */
.vchip{ display:flex; align-items:center; gap:16px; padding:16px; border-radius:var(--r-md); background:var(--fix-bg); border:1px solid var(--fix-line); box-shadow:var(--fix-shadow); color:var(--ink); }
.vplay{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%; background:var(--brand); color:#081616; }
.vplay svg{ width:16px; height:16px; margin-left:2px; fill:currentColor; }
.vtxt{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.vtxt b{ font-size:14px; line-height:16px; font-weight:600; }
.vbar{ height:6px; border-radius:var(--r-full); background:var(--track); overflow:hidden; }
.vbar i{ display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); border-radius:inherit; transform-origin:left; }
@media (prefers-reduced-motion:no-preference){ .vbar i{ width:100%; animation:progress 8s linear infinite; } }

/* proof */
.proof{ margin-top:72px; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.proof-line{ color:var(--ink-muted); }
.logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.logo-slot{ display:flex; align-items:center; justify-content:center; width:160px; height:56px; border-radius:var(--r-md); border:1px dashed var(--todo-line); background:var(--todo-bg); color:var(--todo-ink); font-size:13px; font-weight:600; }

/* industries marquee */
.industries{ position:relative; display:flex; align-items:center; gap:32px; padding-block:24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); overflow:hidden; }
.ind-head{ flex:none; padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2)); font-size:14px; font-weight:600; color:var(--ink-muted); white-space:nowrap; }
.marquee{ flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width:max-content; }
.marquee-track li{ margin-right:16px; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-full); background:var(--surface-soft); border:1px solid var(--line); font-size:14px; font-weight:500; white-space:nowrap; }
.marquee-track li .ic-sm{ color:var(--brand-text); }
@media (prefers-reduced-motion:no-preference){ .marquee-track{ animation:marquee 48s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ flex-wrap:wrap; width:auto; row-gap:8px; padding-inline:var(--gutter); } .marquee-track li[aria-hidden]{ display:none; } .marquee{ -webkit-mask-image:none; mask-image:none; } }
@media (max-width:720px){ .industries{ flex-direction:column; align-items:stretch; gap:16px; } .ind-head{ padding-left:var(--gutter); } }

/* paths */
.paths{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.path{ display:flex; flex-direction:column; overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; }
.path:hover{ transform:translateY(-4px); }
.path-vis{ position:relative; height:232px; overflow:hidden; display:flex; justify-content:center; padding-top:24px; background:var(--vis-bg); border-bottom:1px solid var(--line); }
.path-vis::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(var(--dot) 1px,transparent 1px); background-size:16px 16px; -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent); }
.feed{ position:relative; width:min(320px,86%); display:flex; flex-direction:column; gap:8px; }
.feed li{ display:flex; align-items:center; gap:16px; height:56px; padding:0 16px; border-radius:var(--r-md); background:var(--fix-bg); border:1px solid var(--fix-line); box-shadow:var(--fix-shadow); transition:opacity .5s var(--ease),transform .5s var(--ease); }
.feed li:nth-child(2){ opacity:.75; transform:scale(.97); }
.feed li:nth-child(3){ opacity:.45; transform:scale(.94); }
.feed .fi{ display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:var(--r-sm); background:var(--brand-soft); color:var(--brand-text); }
.feed .ft{ display:flex; flex-direction:column; min-width:0; }
.feed .ft b{ font-size:14px; line-height:20px; font-weight:600; }
.feed .ft span{ font-size:12px; line-height:16px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed .fnow{ margin-left:auto; font-size:12px; color:var(--brand-text); font-weight:600; }
.feed li.enter{ animation:feedin .6s var(--ease) both; }
.feed li.leave{ animation:feedout .5s var(--ease) both; }
.path-body{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:32px; flex:1; }
.chip-label{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 16px; border-radius:var(--r-full); background:var(--surface-soft); border:1px solid var(--line); font-size:13px; font-weight:600; }
.chip-label .ic-sm{ color:var(--brand-text); }
.path-for{ font-size:15px; line-height:24px; color:var(--ink-muted); }
.checks{ display:flex; flex-direction:column; gap:16px; }
.checks li{ display:flex; gap:16px; align-items:flex-start; }
.checks .ck{ display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); }
.checks .ck svg{ width:14px; height:14px; }
.path-body .link-arrow{ margin-top:auto; padding-top:8px; }
@media (max-width:860px){ .paths{ grid-template-columns:minmax(0,1fr); } }

/* problem */
.leaks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.leak{ display:flex; flex-direction:column; gap:16px; padding:32px; overflow:hidden; }
.leak-num{ position:absolute; top:24px; right:32px; font-family:var(--font-display); font-weight:800; font-size:40px; line-height:48px; color:var(--num-ghost); font-variant-numeric:tabular-nums; }
.leak p{ color:var(--ink-muted); font-size:15px; line-height:24px; }
.mini{ position:relative; height:176px; margin-top:auto; border-radius:var(--r-lg); background:var(--mini-bg); border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.speed{ --v:38; --sc:var(--danger); display:flex; flex-direction:column; align-items:center; gap:8px; }
.speed svg{ width:192px; height:122px; overflow:visible; }
.speed .z{ fill:none; stroke-width:4; }
.speed .zr{ stroke:var(--z-r); } .speed .zo{ stroke:var(--z-o); } .speed .zg{ stroke:var(--z-g); }
.speed .trk{ fill:none; stroke:var(--track); stroke-width:12; stroke-linecap:round; }
.speed .val{ fill:none; stroke:var(--sc); stroke-width:12; stroke-linecap:round; stroke-dasharray:100 100; stroke-dashoffset:calc(100 - var(--v)); }
.speed .lab{ font-family:var(--font-body); font-size:10px; font-weight:500; fill:var(--ink-muted); }
.speed .ndl{ transform-origin:88px 92px; transform:rotate(calc(-90deg + var(--v) * 1.8deg)); }
.speed .ndl line{ stroke:var(--ink); stroke-width:3; stroke-linecap:round; }
.speed .ndl .hub{ fill:var(--ink); } .speed .ndl .hubin{ fill:var(--mini-bg); }
.speed-read{ display:flex; align-items:center; gap:8px; height:24px; font-size:13px; color:var(--ink-muted); }
.speed-read b{ min-width:24px; text-align:right; font-family:var(--font-display); font-weight:800; font-size:20px; line-height:24px; color:var(--sc); font-variant-numeric:tabular-nums; }
.speed-tag{ height:24px; padding:0 8px; border-radius:var(--r-full); display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.02em; background:var(--danger-soft); color:var(--danger); }
.speed[data-phase="test"] .speed-tag{ background:var(--surface-soft); color:var(--ink-muted); }
.speed-bar{ width:144px; height:4px; border-radius:var(--r-full); background:var(--track); overflow:hidden; }
.speed-bar i{ display:block; height:100%; background:var(--brand-text); transform-origin:left; transform:scaleX(var(--p,1)); }
.serp{ width:100%; height:100%; padding:16px; display:flex; flex-direction:column; gap:8px; }
.serp-q{ display:flex; align-items:center; gap:8px; height:32px; flex:none; padding:0 16px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--surface); font-size:12px; color:var(--ink); }
.serp-q .ic-xs{ color:var(--ink-muted); }
.caret{ width:1px; height:14px; background:var(--ink); margin-left:-6px; }
@media (prefers-reduced-motion:no-preference){ .caret{ animation:blink 1s steps(1) infinite; } }
.serp-r{ position:relative; display:flex; flex-direction:column; padding:8px 16px; border-radius:var(--r-md); font-size:12px; line-height:16px; }
.serp-r b{ font-weight:600; color:var(--ink); }
.serp-r .tg{ display:inline-flex; align-items:center; height:16px; padding:0 8px; margin-right:4px; border-radius:var(--r-full); font-size:10px; font-weight:700; letter-spacing:.04em; }
.serp-r.ad .tg{ background:var(--ad-bg); color:var(--ad-ink); }
.serp-r.free{ background:var(--brand-soft); }
.serp-r.free .tg{ background:var(--brand); color:#081616; }
.serp-r span{ color:var(--ink-muted); }
.cursor{ position:absolute; width:20px; height:20px; right:24px; bottom:8px; z-index:3; }
.cursor path{ fill:#fff; stroke:#081616; stroke-width:1.5; stroke-linejoin:round; }
@media (prefers-reduced-motion:no-preference){ .cursor{ animation:cursor 5s var(--ease) infinite; } .serp-r.free{ animation:hl 5s var(--ease) infinite; } }
.mini-phone{ align-items:flex-start; justify-content:flex-start; }
.mphone{ position:relative; width:128px; height:232px; margin:16px 0 0 24px; border-radius:24px; border:6px solid #0a1414; background:#fafbfb; overflow:hidden; }
.mphone .p-img{ margin:8px; height:64px; border-radius:var(--r-sm); background:url("../images/sample-product.webp") center/cover no-repeat,#e2f5f1; }
.mphone .p-l{ margin:0 8px 8px; }
.mphone .p-stack{ display:flex; flex-direction:column; gap:8px; }
.mphone .p-tel{ margin:8px; font-size:9px; font-weight:600; color:#3d4846; display:flex; align-items:center; gap:4px; }
.mphone .p-tel .ic-xs{ width:10px; height:10px; }
.mphone .p-tel s{ text-decoration-color:var(--danger); }
.popup{ position:absolute; left:8px; right:8px; top:24px; padding:8px; border-radius:var(--r-sm); background:#fff; box-shadow:0 16px 32px -12px rgba(8,22,22,.45); border:1px solid var(--line); display:flex; flex-direction:column; gap:4px; font-size:9px; line-height:12px; font-weight:600; color:#1a1a1a; }
.popup .x{ position:absolute; right:4px; top:2px; font-size:10px; color:var(--ink-muted); }
.popup .pb{ height:16px; border-radius:4px; background:#0a1414; }
.atc{ position:absolute; left:8px; right:8px; bottom:-20px; height:28px; border-radius:var(--r-sm); background:var(--brand); color:#081616; font-size:9px; font-weight:700; display:grid; place-items:center; }
.below{ position:absolute; right:16px; bottom:24px; max-width:112px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; font-size:12px; line-height:16px; font-weight:600; color:var(--ink-muted); }
.below .ic-sm{ color:var(--danger); }
@media (prefers-reduced-motion:no-preference){ .popup{ animation:popup 6s var(--ease) infinite; } }
.leak-cta{ margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 16px; text-align:center; font-size:17px; }
@media (max-width:1000px){ .leaks{ grid-template-columns:minmax(0,1fr); } }

/* services (shared bits) */
.ticks{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.ticks li{ position:relative; padding-left:24px; font-size:14px; line-height:24px; }
.ticks li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--brand-display); clip-path:polygon(0 0,100% 0,100% 100%); }
.custom{ grid-column:1 / -1; position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:24px; padding:24px 32px; border-radius:var(--r-card); background:#081616; color:#fbfdfd; }
.custom::before{ content:""; position:absolute; width:320px; height:320px; right:-80px; top:-160px; border-radius:50%; background:radial-gradient(circle,rgba(32,180,152,.18),transparent 70%); }
.custom .icon-tile{ background:rgba(32,180,152,.16); color:var(--brand); border-color:transparent; }
.custom-copy{ position:relative; flex:1; min-width:240px; display:flex; flex-direction:column; gap:8px; }
.custom-copy b{ font-family:var(--font-display); font-size:18px; line-height:24px; }
.custom-copy span{ color:#a3b8b4; font-size:15px; }
.custom .btn{ position:relative; }

/* platforms: two columns joined through the hub. Left brings customers in, right is where they buy and book */
.hubmap-fit{ width:100%; display:flex; justify-content:center; overflow:hidden; }
.hubmap{ position:relative; width:1040px; height:464px; flex:none; zoom:var(--z,1); display:grid; grid-template-columns:240px 1fr 240px; }
.beams{ position:absolute; inset:0; width:1040px; height:464px; pointer-events:none; }
.b-base path{ fill:none; stroke:var(--beam); stroke-width:1.5; transition:stroke .3s,stroke-width .3s; }
.b-pulse path{ fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-dasharray:8 92; stroke-dashoffset:100; opacity:0; }
.hubmap[data-hot] .b-base path{ stroke-opacity:.45; }
.hm-col{ position:relative; z-index:2; display:flex; flex-direction:column; gap:24px; }
.hm-label{ display:flex; align-items:center; gap:8px; height:24px; font-size:12px; line-height:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.hm-label i{ width:8px; height:8px; border-radius:2px; background:var(--brand); }
.hm-col ul{ display:flex; flex-direction:column; gap:16px; }
.ptile{ display:flex; align-items:center; gap:16px; height:56px; padding:0 16px 0 8px; border-radius:var(--r-md); background:var(--pt-bg); border:1px solid var(--pt-line); box-shadow:0 1px 2px rgba(8,22,22,.05),0 4px 12px -6px rgba(8,22,22,.08); transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; cursor:default; }
.hm-left .ptile:hover{ transform:translateX(4px); } .hm-right .ptile:hover{ transform:translateX(-4px); }
.ptile:hover{ border-color:var(--brand-line); box-shadow:var(--fix-shadow); }
.pt-logo{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:12px; background:var(--surface-soft); border:1px solid var(--line); color:var(--brand-text); }
.pt-img{ width:24px; height:24px; object-fit:contain; }
.pt-fb{ display:none; }
.ptile.no-logo .pt-img{ display:none; } .ptile.no-logo .pt-fb,.ptile.no-file .pt-fb{ display:block; }
.pt-txt{ display:flex; flex-direction:column; min-width:0; }
.pt-txt b{ font-size:14px; line-height:20px; font-weight:600; color:var(--ink); }
.pt-txt span{ font-size:12px; line-height:16px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-hub{ position:relative; z-index:2; align-self:start; justify-self:center; margin-top:152px; width:208px; height:208px; display:grid; place-items:center; }
.hm-core{ position:relative; z-index:2; width:208px; height:208px; border-radius:var(--r-xl); background:var(--hub-bg); border:1px solid var(--hub-line); box-shadow:var(--fix-shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
.hm-core img{ width:64px; height:auto; margin-bottom:8px; }
.hm-core b{ font-family:var(--font-display); font-size:16px; line-height:24px; }
.hm-core span{ font-size:12px; line-height:16px; color:var(--ink-muted); }
.hm-ports{ position:absolute; z-index:3; top:0; bottom:0; width:8px; }
.hm-ports.l{ left:-4px; } .hm-ports.r{ right:-4px; }
.hm-ports i{ position:absolute; left:0; width:8px; height:8px; border-radius:50%; background:var(--hub-bg); border:1.5px solid var(--brand); }
.hm-foot{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:40px; font-size:15px; color:var(--ink-muted); }
.hm-foot .ic-sm{ color:var(--brand-text); }
@media (prefers-reduced-motion:no-preference){
  .b-pulse path{ animation:beam 4.8s var(--d) cubic-bezier(.5,0,.3,1) infinite; }
  .hm-core{ animation:hubbeat 4.8s 1.4s ease-in-out infinite; }
}
@keyframes beam{ 0%{ stroke-dashoffset:100; opacity:0; } 4%{ opacity:1; } 30%{ stroke-dashoffset:0; opacity:1; } 34%,100%{ stroke-dashoffset:-8; opacity:0; } }
@keyframes hubbeat{ 0%,100%{ box-shadow:var(--fix-shadow); } 12%{ box-shadow:var(--fix-shadow),0 0 0 6px rgba(32,180,152,.12); } 30%{ box-shadow:var(--fix-shadow); } }
@media (max-width:820px){
  .hubmap-fit{ display:block; }
  .hubmap{ width:auto; height:auto; zoom:1 !important; grid-template-columns:minmax(0,1fr); gap:32px; }
  .beams,.hm-ports{ display:none; }
  .hm-hub{ order:-1; margin:0; width:auto; height:auto; }
  .hm-core{ width:100%; height:auto; padding:24px; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:16px; row-gap:0; align-items:center; text-align:left; }
  .hm-core img{ grid-row:span 2; width:48px; margin:0; }
  .hm-col ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ptile{ height:auto; min-height:56px; padding:8px; gap:8px; }
  .pt-txt span{ white-space:normal; }
}
@media (max-width:420px){ .hm-col ul{ grid-template-columns:minmax(0,1fr); } }


/* process: an interactive walkthrough. Steps on one side, a preview that acts out each step on the other */
.flow{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; }
.flow-steps{ display:flex; flex-direction:column; gap:8px; }
.fstep{ position:relative; overflow:hidden; display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; width:100%; padding:24px; text-align:left; border-radius:var(--r-lg); border:1px solid transparent; background:transparent; color:var(--ink-muted); cursor:pointer; transition:background-color .3s var(--ease),border-color .3s,box-shadow .3s,color .3s; }
.fstep:hover{ background:var(--fstep-hover); color:var(--ink); }
.fstep.on{ background:var(--card-bg); border-color:var(--card-line); box-shadow:var(--fix-shadow); color:var(--ink); }
.fstep-n{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink-muted); transition:background-color .3s,border-color .3s,color .3s; }
.fstep-n .ok{ display:none; }
.fstep.done .fstep-n{ background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-text); }
.fstep.done .fstep-n .n{ display:none; } .fstep.done .fstep-n .ok{ display:block; }
.fstep.on .fstep-n{ background:var(--brand); border-color:var(--brand); color:#081616; }
.fstep-main{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.fstep-top{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:40px; }
.fstep-title{ font-family:var(--font-display); font-weight:700; font-size:18px; line-height:24px; letter-spacing:-.01em; }
.free-tag{ height:24px; padding:0 8px; border-radius:var(--r-full); background:var(--brand-soft); color:var(--brand-text); font-size:12px; font-weight:700; letter-spacing:.04em; display:inline-flex; align-items:center; }
.fstep .free-tag{ align-self:center; }
.fstep-meta{ display:inline-flex; align-items:center; gap:8px; margin-top:-8px; font-size:13px; line-height:16px; color:var(--ink-muted); }
.fstep-meta .ic-xs{ color:var(--brand-text); }
.fstep-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.fstep.on .fstep-body{ grid-template-rows:1fr; }
.fstep-inner{ overflow:hidden; min-height:0; font-size:15px; line-height:24px; color:var(--ink-muted); }
.fstep-bar{ position:absolute; left:24px; right:24px; bottom:0; height:2px; border-radius:2px; overflow:hidden; }
.fstep.on .fstep-bar{ background:var(--line); }
.fstep-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--grad-b)); transform:scaleX(0); transform-origin:left; }
.fstep.run .fstep-bar i{ animation:progress var(--flow,6s) linear forwards; }
.flow.paused .fstep-bar i,.flow.paused .scene *{ animation-play-state:paused !important; }

.flow-stage{ position:relative; padding:32px; border-radius:var(--r-xl); background:var(--stage-bg); border:1px solid var(--line); overflow:hidden; }
.flow-stage::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--dot) 1px,transparent 1px); background-size:16px 16px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent 75%); mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent 75%); }
.flow-window{ position:relative; border-radius:var(--r-lg); background:var(--window-bg); border:1px solid var(--fix-line); box-shadow:var(--fix-shadow); overflow:hidden; }
.fw-bar{ display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-bottom:1px solid var(--line); }
.fw-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line-strong); opacity:.45; }
.fw-title{ margin-left:8px; font-size:12px; line-height:16px; font-weight:600; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fw-fit{ width:100%; display:flex; justify-content:center; overflow:hidden; background:var(--screen-bg); }
.fw-screen{ position:relative; width:560px; height:400px; flex:none; zoom:var(--z,1); }

/* scenes: final state is the resting state; animations replay each time a scene opens */
.scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:16px; opacity:0; visibility:hidden; transform:translateY(16px) scale(.98); transition:opacity .4s var(--ease),transform .6s var(--ease),visibility 0s .6s; }
.scene.on{ opacity:1; visibility:visible; transform:none; transition:opacity .4s var(--ease) .1s,transform .6s var(--ease) .1s; }
.sc-card{ position:relative; padding:24px; border-radius:var(--r-lg); background:var(--fix-bg); border:1px solid var(--fix-line); box-shadow:var(--fix-shadow); color:var(--ink); }
.sc-cursor{ position:absolute; left:0; top:0; width:20px; height:20px; z-index:6; pointer-events:none; }
.sc-cursor path{ fill:#fff; stroke:#081616; stroke-width:1.5; stroke-linejoin:round; }
.sc-toast{ position:absolute; z-index:5; display:flex; align-items:center; gap:8px; height:48px; padding:0 16px 0 8px; border-radius:var(--r-full); background:#081616; color:#fbfdfd; font-size:13px; white-space:nowrap; box-shadow:0 16px 32px -12px rgba(8,22,22,.5); }
.sc-toast .ok{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--brand); color:#081616; }
.sc-btn{ height:40px; border-radius:var(--r-full); background:var(--brand); color:#081616; font-family:var(--font-display); font-weight:700; font-size:13px; display:grid; place-items:center; }

/* 1: form */
.sc-form{ width:360px; display:flex; flex-direction:column; gap:8px; }
.sc-h{ font-family:var(--font-display); font-size:16px; line-height:24px; margin-bottom:8px; }
.sc-lbl{ margin-top:8px; font-size:12px; line-height:16px; font-weight:600; }
.sc-input{ display:flex; align-items:center; height:40px; padding:0 16px; border-radius:12px; border:1px solid var(--brand-text); box-shadow:0 0 0 4px var(--brand-soft); font-size:14px; }
.sc-caret{ width:1px; height:16px; margin-left:2px; background:var(--ink); }
.sc-seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sc-seg > span{ display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border-radius:12px; border:1px solid var(--line-strong); font-size:12px; font-weight:600; }
.sc-seg .seg-a{ border-color:var(--brand-text); background:var(--brand-soft); color:var(--brand-text); }
.sc-form .sc-btn{ margin-top:16px; }
.s1 .sc-toast{ left:232px; top:336px; }

/* 2: video audit */
.sc-player{ width:448px; padding:16px; display:flex; flex-direction:column; gap:16px; }
.sc-video{ position:relative; height:232px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#eef3f2,#dde8e6); }
.sc-site{ position:absolute; left:24px; top:24px; width:272px; display:flex; flex-direction:column; gap:12px; }
.sc-site > *{ display:block; border-radius:6px; background:#cdd9d7; }
.v-nav{ height:10px; width:40%; }
.v-hero{ height:64px; background:linear-gradient(135deg,#bfe0d8,#d9ebe7) !important; border-radius:8px !important; }
.v-row{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; background:none !important; }
.v-row i{ height:24px; border-radius:6px; background:#d6e0de; }
.v-tel{ height:20px; width:60%; }
.v-rev{ height:28px; width:80%; background:#d6e0de !important; }
.sc-ring{ position:absolute; left:18px; top:186px; width:230px; height:40px; border:2px solid var(--brand); border-radius:10px; box-shadow:0 0 0 4px rgba(32,180,152,.15); }
.sc-rec{ position:absolute; right:16px; top:16px; display:flex; align-items:center; gap:8px; height:24px; padding:0 8px; border-radius:var(--r-full); background:rgba(8,22,22,.75); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; }
.sc-rec i{ width:8px; height:8px; border-radius:50%; background:#ff5a5a; }
.sc-cam{ position:absolute; right:16px; bottom:16px; width:72px; height:72px; border-radius:50%; border:3px solid #fff; box-shadow:0 8px 16px rgba(8,22,22,.25); background:radial-gradient(circle at 50% 38%,#7e9894 0 22%,transparent 23%),radial-gradient(circle at 50% 100%,#7e9894 0 46%,transparent 47%),#4a6662; }
.sc-timeline{ display:flex; align-items:center; gap:16px; height:32px; }
.sc-play{ display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--brand); color:#081616; }
.sc-play svg{ width:14px; height:14px; fill:currentColor; margin-left:2px; }
.sc-track{ position:relative; flex:1; height:6px; border-radius:var(--r-full); background:var(--track); }
.sc-fill{ position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),var(--grad-b)); }
.sc-ch{ position:absolute; top:50%; left:var(--p); width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:700; background:var(--brand); color:#081616; border:2px solid var(--fix-bg); }
.sc-time{ font-size:12px; font-weight:600; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.sc-chip{ position:absolute; z-index:5; display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 16px; border-radius:var(--r-full); background:var(--fix-bg); border:1px solid var(--fix-line); box-shadow:var(--fix-shadow); font-size:12px; font-weight:600; color:var(--ink); }
.sc-chip .ic-xs{ color:var(--brand-text); }
.sc-chip-a{ left:32px; top:24px; } .sc-chip-b{ right:32px; bottom:24px; }

/* 3: booking */
.sc-cal{ width:376px; display:flex; flex-direction:column; gap:16px; }
.sc-cal-h{ display:flex; justify-content:space-between; align-items:center; height:24px; }
.sc-cal-h b{ font-family:var(--font-display); font-size:15px; }
.sc-cal-h span{ font-size:11px; font-weight:600; color:var(--ink-muted); }
.sc-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.sc-days span{ display:grid; place-items:center; height:48px; border-radius:12px; border:1px solid var(--line); font-size:12px; font-weight:600; }
.sc-days .pick{ background:var(--brand); border-color:var(--brand); color:#081616; }
.sc-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sc-slots span{ display:grid; place-items:center; height:32px; border-radius:8px; border:1px solid var(--line); font-size:12px; font-variant-numeric:tabular-nums; }
.sc-slots .pick{ background:var(--brand-soft); border-color:var(--brand-text); color:var(--brand-text); font-weight:600; }
.s3 .sc-toast{ left:200px; top:344px; }

/* 4: scope and results */
.sc-scope{ width:296px; display:flex; flex-direction:column; gap:16px; }
.sc-doc-h{ display:flex; align-items:center; gap:16px; }
.sc-doc-ic{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:12px; background:var(--tile-bg); color:var(--tile-ink); }
.sc-doc-h b{ display:block; font-family:var(--font-display); font-size:15px; line-height:20px; }
.sc-doc-h span span{ display:block; font-size:12px; line-height:16px; color:var(--ink-muted); }
.sc-items li{ display:flex; align-items:center; gap:8px; height:40px; border-top:1px solid var(--line); font-size:13px; font-weight:500; }
.sc-items i{ display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:50%; background:var(--brand); color:#081616; }
.sc-items i svg{ width:12px; height:12px; }
.sc-price{ display:flex; align-items:flex-start; gap:8px; padding:16px; border-radius:12px; background:var(--surface-soft); font-size:12px; line-height:16px; color:var(--ink-muted); }
.sc-price .ic-sm{ color:var(--brand-text); }
.sc-price b{ display:block; font-size:13px; color:var(--ink); margin-bottom:4px; }
.sc-side{ display:flex; flex-direction:column; gap:16px; width:208px; }
.sc-side .sc-card{ padding:16px; }
.sc-side b{ display:block; font-family:var(--font-display); font-size:14px; line-height:20px; }
.sc-weeks ul{ margin-top:8px; }
.sc-weeks li{ display:flex; align-items:center; gap:8px; height:32px; font-size:13px; }
.sc-weeks li i{ position:relative; width:16px; height:16px; border-radius:50%; background:var(--brand); }
.sc-weeks li i::after{ content:""; position:absolute; left:5px; top:3px; width:4px; height:7px; border:solid #081616; border-width:0 2px 2px 0; transform:rotate(45deg); }
.sc-weeks .w3 i{ background:transparent; border:2px solid var(--brand); }
.sc-weeks .w3 i::after{ display:none; }
.sc-report span{ display:block; font-size:12px; line-height:16px; color:var(--ink-muted); }
.sc-bars{ display:flex; align-items:flex-end; gap:8px; height:72px; margin-top:16px; }
.sc-bars i{ flex:1; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--brand),var(--brand-soft)); transform-origin:bottom; }

@media (prefers-reduced-motion:no-preference){
  .sc-caret{ animation:blink 1s steps(1) infinite; }
  .scene.on .c1{ animation:c1 6s var(--ease) both; }
  .scene.on .seg-a{ animation:segon .3s 1.5s both; }
  .scene.on .sc-form .sc-btn{ animation:press .35s 2.8s both; }
  .scene.on.s1 .sc-toast{ animation:toastin .5s 3.1s var(--ease) both; }
  .scene.on .sc-fill{ animation:fillw 5.6s linear both; }
  .scene.on .sc-ch{ animation:chon .3s var(--d) both; }
  .scene.on .sc-ring{ animation:ring 5.6s var(--ease) both; }
  .scene.on .sc-rec i{ animation:blink 1.2s steps(1) infinite; }
  .scene.on .sc-chip-a{ animation:toastin .5s .3s var(--ease) both; }
  .scene.on .sc-chip-b{ animation:toastin .5s 4.8s var(--ease) both; }
  .scene.on .c3{ animation:c3 6s var(--ease) both; }
  .scene.on .sc-days .pick{ animation:dayon .3s 1.15s both; }
  .scene.on .sc-slots .pick{ animation:sloton .3s 2.35s both; }
  .scene.on .sc-cal .sc-btn{ animation:press .35s 3.4s both; }
  .scene.on.s3 .sc-toast{ animation:toastin .5s 3.7s var(--ease) both; }
  .scene.on .sc-items li:nth-child(1) i{ animation:checkin .4s .4s var(--ease) both; }
  .scene.on .sc-items li:nth-child(2) i{ animation:checkin .4s .8s var(--ease) both; }
  .scene.on .sc-items li:nth-child(3) i{ animation:checkin .4s 1.2s var(--ease) both; }
  .scene.on .sc-price{ animation:toastin .5s 1.6s var(--ease) both; }
  .scene.on .sc-weeks .w1 i{ animation:checkin .4s 1.9s var(--ease) both; }
  .scene.on .sc-weeks .w2 i{ animation:checkin .4s 2.2s var(--ease) both; }
  .scene.on .sc-weeks .w3 i{ animation:ringpulse 1.6s ease-in-out infinite; }
  .scene.on .sc-bars i{ animation:grow .6s var(--d) var(--ease) both; }
}
@keyframes c1{ 0%,8%{ transform:translate(300px,330px); } 22%{ transform:translate(96px,192px); } 25%{ transform:translate(96px,192px) scale(.85); } 28%{ transform:translate(96px,192px); } 44%{ transform:translate(176px,256px); } 47%{ transform:translate(176px,256px) scale(.85); } 50%,100%{ transform:translate(176px,256px); } }
@keyframes c3{ 0%,6%{ transform:translate(340px,330px); } 16%{ transform:translate(251px,84px); } 19%{ transform:translate(251px,84px) scale(.85); } 22%{ transform:translate(251px,84px); } 36%{ transform:translate(72px,180px); } 39%{ transform:translate(72px,180px) scale(.85); } 42%{ transform:translate(72px,180px); } 54%{ transform:translate(184px,272px); } 57%{ transform:translate(184px,272px) scale(.85); } 60%,100%{ transform:translate(184px,272px); } }
@keyframes segon{ from{ border-color:var(--line-strong); background:transparent; color:var(--ink); } }
@keyframes dayon{ from{ background:transparent; border-color:var(--line); color:var(--ink); } }
@keyframes sloton{ from{ background:transparent; border-color:var(--line); color:var(--ink); font-weight:400; } }
@keyframes press{ 50%{ transform:scale(.95); filter:brightness(.92); } }
@keyframes toastin{ from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes fillw{ from{ width:0; } to{ width:100%; } }
@keyframes chon{ from{ background:var(--track); color:var(--ink-muted); } }
@keyframes ring{ 0%,40%{ top:40px; width:284px; height:76px; } 46%,70%{ top:156px; width:180px; height:32px; } 76%,100%{ top:188px; width:230px; height:40px; } }
@keyframes checkin{ from{ transform:scale(0); opacity:0; } 70%{ transform:scale(1.15); } to{ transform:none; opacity:1; } }
@keyframes ringpulse{ 50%{ box-shadow:0 0 0 4px rgba(32,180,152,.25); } }
@keyframes grow{ from{ transform:scaleY(0); } to{ transform:none; } }

.flow-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 24px; margin-top:48px; }
.flow-note{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-muted); }
.flow-note .ic-sm{ color:var(--brand-text); }
@media (max-width:1000px){
  .flow{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .flow-stage{ order:-1; padding:16px; }
}


/* work */
.case{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); overflow:hidden; }
.case-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding:48px; min-width:0; }
.case-title{ font-family:var(--font-display); font-weight:700; font-size:32px; line-height:40px; letter-spacing:-.02em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ height:32px; padding:0 16px; display:inline-flex; align-items:center; border-radius:var(--r-full); background:var(--surface-soft); border:1px solid var(--line); font-size:13px; font-weight:500; }
.results{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; }
.res{ display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r-md); background:var(--surface-soft); border:1px solid var(--line); min-width:0; }
.res .v{ font-family:var(--font-display); font-weight:800; font-size:20px; line-height:28px; }
.res .v .ph{ font-size:15px; }
.res .k{ font-size:13px; line-height:20px; color:var(--ink-muted); }
.case-vis{ position:relative; min-height:440px; background:var(--vis-bg); border-left:1px solid var(--line); overflow:hidden; }
.case-vis::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:40px 40px; }
.laptop{ position:absolute; left:40px; top:64px; width:440px; }
.laptop .lid{ border-radius:16px 16px 0 0; border:8px solid #0a1414; border-bottom-width:16px; background:#fff; aspect-ratio:16/10; }
.laptop .base{ height:16px; margin:0 -24px; border-radius:0 0 16px 16px; background:linear-gradient(#c9d3d1,#aab7b4); }
.shot{ height:100%; display:grid; place-items:center; padding:16px; background:repeating-linear-gradient(135deg,#f6f8f8 0 12px,#eef2f1 12px 24px); text-align:center; font-size:13px; font-weight:600; color:#6b4e00; }
.mphone2{ position:absolute; right:40px; bottom:40px; width:144px; height:288px; border-radius:28px; border:8px solid #0a1414; background:#fff; overflow:hidden; box-shadow:0 24px 48px -16px rgba(8,22,22,.35); }
@media (prefers-reduced-motion:no-preference){ .laptop{ animation:bob 9s ease-in-out infinite; } .mphone2{ animation:bob 7s ease-in-out -3s infinite; } }
.cards3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.proj{ display:flex; flex-direction:column; gap:16px; padding:32px; }
.proj-logo{ display:flex; align-items:center; gap:16px; }
.proj-logo .sq{ width:48px; height:48px; border-radius:var(--r-md); border:1px dashed var(--todo-line); background:var(--todo-bg); }
.proj dl{ display:flex; flex-direction:column; gap:8px; }
.proj dt{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.proj dd{ margin:0 0 8px; font-size:15px; }
@media (max-width:1040px){ .case{ grid-template-columns:minmax(0,1fr); } .case-vis{ border-left:0; border-top:1px solid var(--line); min-height:360px; } .laptop{ left:24px; top:40px; width:min(440px,72%); } .mphone2{ right:24px; bottom:24px; width:120px; height:240px; } }
@media (max-width:900px){ .cards3{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .case-copy{ padding:32px 24px; } .results{ grid-template-columns:minmax(0,1fr); } }

/* why */
.why{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.why-item{ display:flex; gap:24px; padding:32px; transition:transform .35s var(--ease),border-color .3s; }
.why-item:hover{ transform:translateY(-4px); }
.why-item > div{ display:flex; flex-direction:column; gap:8px; }
.why-item p{ color:var(--ink-muted); font-size:15px; }
.where{ margin-top:24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; padding:32px; }
.where-copy{ display:flex; gap:24px; align-items:flex-start; }
.where-text{ display:flex; flex-direction:column; gap:8px; }
.where-copy p{ color:var(--ink-muted); }
.where-copy p b{ color:var(--ink); font-weight:600; }
.clock-col{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.clocks{ display:flex; gap:24px; align-items:center; }
.clock{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.clock svg{ width:88px; height:88px; }
.clock .face{ fill:var(--surface-soft); stroke:var(--line); stroke-width:2; }
.clock .tick{ stroke:var(--line-strong); stroke-width:2; stroke-linecap:round; }
.clock .hh,.clock .mh{ stroke:var(--ink); stroke-linecap:round; }
.clock .hh{ stroke-width:4; } .clock .mh{ stroke-width:3; }
.clock .sh{ stroke:var(--brand); stroke-width:1.5; stroke-linecap:round; }
.clock .hub{ fill:var(--brand); }
.clock .hand{ transform-origin:44px 44px; }
.clock b{ font-size:13px; line-height:16px; font-weight:600; }
.clock span{ font-size:13px; line-height:16px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.status{ display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:8px 16px; border-radius:var(--r-full); font-size:13px; line-height:16px; font-weight:600; background:var(--surface-soft); color:var(--ink-muted); border:1px solid var(--line); }
.status.on{ background:var(--brand-soft); color:var(--brand-text); border-color:var(--brand-line); }
.status .pill-dot{ background:var(--line-strong); } .status .pill-dot::after{ display:none; }
.status.on .pill-dot{ background:var(--brand); } .status.on .pill-dot::after{ display:block; }
@media (max-width:860px){ .why{ grid-template-columns:minmax(0,1fr); } .where{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:480px){ .why-item,.where-copy{ flex-direction:column; gap:16px; } }

/* faq */
.faq-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px; align-items:start; }
.faq-side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:24px; }
.ask{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:24px; }
.ask-title{ font-family:var(--font-display); font-size:17px; line-height:24px; }
.ask p{ font-size:14px; line-height:24px; }
.faq{ display:flex; flex-direction:column; gap:16px; }
.faq details{ border-radius:var(--r-lg); background:var(--card-bg); border:1px solid var(--card-line); transition:box-shadow .3s,border-color .3s; }
.faq details[open]{ box-shadow:var(--fix-shadow); border-color:var(--brand-line); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:700; font-size:17px; line-height:24px; border-radius:var(--r-lg); }
.faq summary::-webkit-details-marker{ display:none; }
.tog{ position:relative; width:32px; height:32px; flex:none; border-radius:50%; background:var(--surface-soft); border:1px solid var(--line); transition:background-color .3s,transform .4s var(--ease); }
.tog::before,.tog::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease),background-color .3s; }
.tog::after{ transform:rotate(90deg); }
.faq details[open] .tog{ background:var(--brand); border-color:var(--brand); transform:rotate(180deg); }
.faq details[open] .tog::before,.faq details[open] .tog::after{ background:#081616; }
.faq details[open] .tog::after{ transform:rotate(0deg); }
.ans{ padding:0 24px 24px; color:var(--ink-muted); max-width:640px; }
@supports selector(::details-content){
  .faq details::details-content{ block-size:0; overflow-y:clip; opacity:0; transition:block-size .4s var(--ease),opacity .4s var(--ease),content-visibility .4s allow-discrete; }
  .faq details[open]::details-content{ block-size:auto; opacity:1; }
  @media (prefers-reduced-motion:reduce){ .faq details::details-content{ transition:opacity .2s; } }
}
@media (max-width:900px){ .faq-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } .faq-side{ position:static; } }

/* audit band */
.night{ background:#081616; color:#fbfdfd; overflow:hidden; }
.night::before{ content:""; position:absolute; width:720px; height:720px; left:-240px; top:-320px; border-radius:50%; background:radial-gradient(circle,rgba(32,180,152,.12),transparent 65%); pointer-events:none; }
.audit-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; }
.audit-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.night .eyebrow{ color:#fbfdfd; }
.night .eyebrow .ic-sm{ color:var(--brand); }
.night .h2 .teal{ color:var(--brand); }
.night .lead{ color:#a3b8b4; }
.night .checks .ck{ background:rgba(32,180,152,.16); color:var(--brand); }
.player{ margin-top:8px; padding:16px; border-radius:var(--r-lg); background:#0f2321; border:1px solid #22403c; display:flex; flex-direction:column; gap:16px; width:100%; max-width:440px; }
.player-scr{ position:relative; height:176px; border-radius:var(--r-md); background:linear-gradient(135deg,#123532,#0b1e1d); overflow:hidden; display:grid; place-items:center; }
.player-scr .sk{ background:rgba(255,255,255,.08); }
.player-scr .pg{ position:absolute; left:24px; right:96px; top:24px; display:flex; flex-direction:column; gap:8px; }
.player-scr .cam{ position:absolute; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 50% 38%,#5b7672 0 26%,transparent 27%),radial-gradient(circle at 50% 100%,#5b7672 0 48%,transparent 49%),#24403d; border:2px solid var(--brand); }
.player-scr .bigplay{ position:relative; width:56px; height:56px; border-radius:50%; background:var(--brand); color:#081616; display:grid; place-items:center; box-shadow:0 0 0 8px rgba(32,180,152,.12); }
.player-scr .bigplay svg{ width:20px; height:20px; fill:currentColor; margin-left:3px; }
.player-scr .ring{ position:absolute; left:16px; top:96px; width:104px; height:40px; border:2px solid var(--brand); border-radius:var(--r-sm); }
@media (prefers-reduced-motion:no-preference){ .player-scr .ring{ animation:ringmove 7.5s var(--ease) infinite; } }
.ptrack{ position:relative; height:6px; border-radius:var(--r-full); background:rgba(255,255,255,.1); overflow:hidden; }
.ptrack i{ position:absolute; left:0; top:0; bottom:0; width:42%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),var(--grad-b)); transform-origin:left; }
@media (prefers-reduced-motion:no-preference){ .ptrack i{ width:100%; animation:progress 12s linear infinite; } }
.pmeta{ display:flex; justify-content:space-between; font-size:13px; color:#a3b8b4; font-variant-numeric:tabular-nums; }
.pfix{ display:flex; gap:8px; flex-wrap:wrap; }
.pfix span{ height:24px; padding:0 8px; border-radius:var(--r-full); background:rgba(255,255,255,.06); border:1px solid #22403c; font-size:12px; display:inline-flex; align-items:center; gap:8px; color:#fbfdfd; }
.pfix i{ width:16px; height:16px; border-radius:50%; background:var(--brand); color:#081616; font-style:normal; font-size:10px; font-weight:700; display:grid; place-items:center; }
.formcard{ position:relative; border-radius:var(--r-xl); padding:2px; background:#22403c; }
@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@media (prefers-reduced-motion:no-preference){ .formcard{ background:conic-gradient(from var(--ang),#22403c 0deg,var(--brand) 60deg,var(--grad-b) 100deg,#22403c 160deg,#22403c 360deg); animation:ang 6s linear infinite; } }
.form-in{ border-radius:30px; background:#fff; padding:40px; }
.form{ display:flex; flex-direction:column; gap:24px; }
.form-title{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:32px; }
.form-title.big{ font-size:28px; line-height:36px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label,.field legend{ font-size:14px; line-height:24px; font-weight:600; padding:0; }
.opt{ font-weight:400; color:var(--ink-muted); }
.in{ height:48px; width:100%; min-width:0; padding:0 16px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:#fff; color:#1a1a1a; transition:border-color .2s,box-shadow .2s; }
textarea.in{ height:auto; min-height:96px; padding:16px; resize:vertical; line-height:24px; }
select.in{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:48px; }
.in::placeholder{ color:#6f7d7a; }
.in:focus{ outline:none; border-color:var(--brand-text); box-shadow:0 0 0 4px var(--brand-soft); }
.field.err .in,.field.err .seg label{ border-color:var(--danger); }
.errmsg{ display:none; align-items:center; gap:8px; font-size:13px; line-height:20px; color:var(--danger); font-weight:500; }
.field.err .errmsg{ display:flex; }
fieldset.field{ border:0; margin:0; padding:0; min-width:0; }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg label{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:var(--r-md); border:1px solid var(--line-strong); font-weight:600; font-size:14px; cursor:pointer; transition:border-color .2s,background-color .2s,color .2s; }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg label:has(input:checked){ border-color:var(--brand-text); background:var(--brand-soft); color:var(--brand-text); box-shadow:inset 0 0 0 1px var(--brand-text); }
.seg label:has(input:focus-visible){ outline:2px solid var(--brand-text); outline-offset:3px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fine{ font-size:13px; line-height:20px; color:var(--ink-muted); text-align:center; }
.fine a{ color:var(--brand-text); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn[disabled]{ opacity:.7; cursor:progress; }
.spin{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite; }
.done{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.done b{ color:var(--ink); }
.done-ic{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--brand); color:#081616; }
.done-ic svg{ width:28px; height:28px; stroke-width:3; }
.done-ic path{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){ .done-ic{ animation:pop .6s var(--ease) both; } .done-ic path{ animation:draw .6s .25s var(--ease) both; } }
.failbox{ display:flex; gap:8px; padding:16px; border-radius:var(--r-md); background:var(--danger-soft); color:var(--danger); font-size:14px; font-weight:500; }
.failbox .ic-sm{ margin-top:4px; }
@media (max-width:960px){ .audit-grid{ grid-template-columns:minmax(0,1fr); gap:48px; } }
@media (max-width:520px){ .form-in{ padding:24px; } .row2{ grid-template-columns:minmax(0,1fr); } }

/* footer */
.site-footer{ position:relative; border-top:1px solid var(--line); }
.site-footer > .wrap{ padding-block:64px 32px; }
.foot{ display:grid; grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)); gap:48px; }
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:320px; }
.foot-brand p{ color:var(--ink-muted); font-size:15px; }
.socials{ display:flex; flex-wrap:wrap; gap:8px; }
.socials a{ height:32px; padding:0 16px; border-radius:var(--r-full); border:1px solid var(--line); display:inline-flex; align-items:center; font-size:13px; font-weight:600; text-decoration:none; transition:border-color .2s,color .2s; }
.socials a:hover{ border-color:var(--brand-text); color:var(--brand-text); }
.foot h4{ margin:0 0 16px; font-family:var(--font-display); font-size:14px; line-height:24px; font-weight:700; }
.foot ul{ display:flex; flex-direction:column; gap:8px; }
.foot li{ font-size:15px; color:var(--ink-muted); }
.foot li a{ text-decoration:none; } .foot li a:hover{ color:var(--brand-text); }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:14px; color:var(--ink-muted); }
.foot-bottom nav{ display:flex; gap:24px; }
.foot-bottom a{ text-decoration:none; } .foot-bottom a:hover{ color:var(--brand-text); }
@media (max-width:900px){ .foot{ grid-template-columns:repeat(2,minmax(0,1fr)); } .foot-brand{ grid-column:1 / -1; } }
@media (max-width:480px){ .foot{ grid-template-columns:minmax(0,1fr); } }

/* toast */
.toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 24px); z-index:80; transform:translateX(-50%); display:flex; align-items:center; gap:8px; max-width:calc(100% - 32px); padding:16px 24px; border-radius:var(--r-full); background:#081616; color:#fbfdfd; font-size:14px; box-shadow:0 24px 48px -16px rgba(0,0,0,.4); border:1px solid #22403c; }
@media (prefers-reduced-motion:no-preference){ .toast:not([hidden]){ animation:rise .4s var(--ease) both; } }

/* scroll reveals and the process line: progressive enhancement, visible at rest */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    .rv{ animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 60%; }
  }
}

@keyframes reveal{ from{ opacity:.4; translate:0 32px; } to{ opacity:1; translate:0 0; } }
@keyframes wordup{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes ping{ 0%{ transform:scale(1); opacity:.6; } 80%,100%{ transform:scale(2.6); opacity:0; } }
@keyframes ripple{ 0%{ transform:scale(.9); opacity:.9; } 70%,100%{ transform:scale(2.2); opacity:0; } }
@keyframes hubring{ 0%{ transform:scale(.78); opacity:.6; } 100%{ transform:scale(1.5); opacity:0; } }
@keyframes draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
@keyframes drift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-32px,40px) scale(1.08); } }
@keyframes drift2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(40px,-24px) scale(.94); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes slowload{ 0%{ width:0; } 70%{ width:72%; } 100%{ width:78%; } }
@keyframes progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes feedin{ from{ opacity:0; transform:translateY(-24px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes feedout{ to{ opacity:0; transform:translateY(16px) scale(.9); } }
@keyframes cursor{ 0%,12%{ transform:translate(0,0); } 40%{ transform:translate(-88px,-24px); } 46%{ transform:translate(-88px,-24px) scale(.82); } 52%,80%{ transform:translate(-88px,-24px) scale(1); } 100%{ transform:translate(0,0); } }
@keyframes hl{ 0%,44%{ box-shadow:0 0 0 0 rgba(32,180,152,0); } 50%,78%{ box-shadow:0 0 0 2px var(--brand); } 100%{ box-shadow:0 0 0 0 rgba(32,180,152,0); } }
@keyframes popup{ 0%,16%{ opacity:0; transform:translateY(8px) scale(.9); } 24%,80%{ opacity:1; transform:none; } 88%,100%{ opacity:0; transform:translateY(8px) scale(.9); } }
@keyframes ang{ to{ --ang:360deg; } }
@keyframes ringmove{ 0%,30%{ transform:translate(0,0); width:104px; } 36%,63%{ transform:translate(0,-72px); width:136px; } 70%,100%{ transform:translate(112px,-48px); width:64px; } }
@keyframes shine{ from{ transform:skewX(-20deg) translateX(-150%); } to{ transform:skewX(-20deg) translateX(560%); } }
@keyframes shine-loop{ 0%{ transform:skewX(-20deg) translateX(-150%); } 14%,100%{ transform:skewX(-20deg) translateX(560%); } }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@keyframes blink{ 50%{ opacity:0; } }

/* ===== key facts strip ===== */
.stats-band > .wrap{ padding-block:64px; }
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--card-shadow); overflow:hidden; }
.stat{ position:relative; display:flex; flex-direction:column; gap:8px; padding:32px; border-left:1px solid var(--line); transition:background-color .35s var(--ease); }
.stat:first-child{ border-left:0; }
.stat::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,var(--brand),var(--grad-b)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.stat:hover{ background:var(--surface-soft); }
.stat:hover::before{ transform:none; }
.stat-i{ font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; color:var(--ink-muted); }
.stat-v{ margin-top:8px; font-family:var(--font-display); font-weight:800; font-size:44px; line-height:52px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.stat-k{ font-size:15px; line-height:24px; font-weight:600; }
.stat-d{ font-size:14px; line-height:24px; color:var(--ink-muted); }
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .stat:nth-child(3){ border-left:0; } .stat:nth-child(n+3){ border-top:1px solid var(--line); } }
@media (max-width:560px){ .stats-band > .wrap{ padding-block:48px; } .stat{ padding:24px 16px; gap:4px; } .stat-v{ font-size:32px; line-height:40px; } .stat-k{ font-size:14px; } .stat-d{ font-size:13px; line-height:20px; } }

/* ===== services: image boxes with live mini screens ===== */
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.svc{ display:flex; flex-direction:column; gap:16px; padding:16px 16px 32px; overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; }
.svc > :not(.art){ margin-inline:16px; }
.svc:hover{ transform:translateY(-4px); }
.svc-head{ display:flex; align-items:center; gap:16px; margin-top:8px; }
.icon-tile.sm{ width:40px; height:40px; border-radius:12px; }
.icon-tile.sm .ic{ width:18px; height:18px; }
.svc p{ color:var(--ink-muted); font-size:15px; }
.art{ position:relative; height:208px; border-radius:20px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%,#e6f6f2 0%,#f4f7f6 70%); border:1px solid var(--line); transition:transform .5s var(--ease); }
.art::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(#d3dedc 1px,transparent 1px); background-size:16px 16px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%); mask-image:linear-gradient(180deg,#000,transparent 80%); }
.svc:hover .art{ transform:scale(1.015); }
.art > *{ position:relative; }
.art-toast{ position:absolute; display:flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 4px; border-radius:var(--r-full); background:#081616; color:#fbfdfd; font-size:12px; font-weight:500; white-space:nowrap; box-shadow:0 16px 32px -12px rgba(8,22,22,.5); }
.art-toast .ok{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--brand); color:#081616; }

/* web */
.aw-win{ width:248px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 32px -16px rgba(8,22,22,.25); overflow:hidden; }
.aw-bar{ display:flex; align-items:center; gap:4px; height:24px; padding:0 8px; border-bottom:1px solid var(--line); font-size:9px; color:var(--ink-muted); }
.aw-bar i{ width:6px; height:6px; border-radius:50%; background:#d3dedc; }
.aw-bar span{ margin-left:8px; }
.aw-body{ display:flex; flex-direction:column; gap:8px; padding:12px; }
.aw-b{ display:block; border-radius:6px; background:#e3ebe9; transform-origin:left; }
.aw-nav{ height:8px; width:40%; }
.aw-hero{ height:56px; background:linear-gradient(135deg,#cfeae3,#e8f4f1); padding:12px; display:flex; flex-direction:column; gap:6px; }
.aw-hero b{ display:block; height:6px; width:60%; border-radius:4px; background:#9fcbbf; } .aw-hero b + b{ width:40%; }
.aw-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.aw-row i{ height:24px; }
.aw-cta{ display:inline-flex; align-items:center; justify-content:center; gap:4px; width:96px; height:24px; border-radius:var(--r-full); background:var(--brand); color:#081616; font-size:9px; font-weight:700; }
.aw-toast{ right:16px; top:56px; }
/* store */
.as-card{ width:168px; padding:8px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 32px -16px rgba(8,22,22,.25); display:flex; flex-direction:column; gap:8px; }
.as-img{ height:88px; border-radius:10px; background:url("../images/sample-product.webp") center/cover no-repeat,#e2f5f1; }
.as-info{ display:flex; justify-content:space-between; align-items:baseline; padding:0 4px; font-size:11px; color:#22302e; }
.as-info span{ font-weight:600; }
.as-btn{ height:28px; border-radius:var(--r-full); background:#081616; color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; }
.as-cart{ position:absolute; right:24px; top:24px; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--line); color:#22302e; box-shadow:0 8px 16px -8px rgba(8,22,22,.25); }
.as-cart i{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--brand); color:#081616; font-style:normal; font-size:10px; font-weight:700; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.as-plus{ position:absolute; right:36px; top:72px; font-size:12px; font-weight:700; color:var(--brand-text); opacity:0; }
/* seo */
.art-seo{ place-items:stretch; padding:16px; grid-template-columns:96px 1fr; grid-template-rows:auto 1fr; gap:8px 12px; }
.ao-search{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:var(--r-full); background:#fff; border:1px solid var(--line); font-size:11px; color:#22302e; }
.ao-map{ position:relative; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#e4efe9,#d7e7e1); border:1px solid var(--line); }
.ao-road{ position:absolute; background:#fff; opacity:.8; }
.ao-road.r1{ left:-10%; right:-10%; top:46%; height:6px; transform:rotate(-18deg); }
.ao-road.r2{ top:-10%; bottom:-10%; left:58%; width:5px; transform:rotate(8deg); }
.pin{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#9db0ac; }
.pin.p1{ left:16%; top:16%; } .pin.p2{ left:64%; top:64%; }
.pin.you{ left:36%; top:40%; background:var(--brand); box-shadow:0 0 0 4px rgba(32,180,152,.2); }
.ao-list{ position:relative; }
.ao-list li{ position:absolute; left:0; right:0; height:36px; display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:10px; background:#fff; border:1px solid var(--line); font-size:11px; color:#22302e; transition:top .6s var(--ease); }
.ao-list li b{ font-weight:600; }
.ao-dot{ width:8px; height:8px; flex:none; border-radius:50%; background:#c4d1ce; }
.ao-you{ top:0; z-index:2; border-color:var(--brand-line) !important; box-shadow:0 8px 16px -8px rgba(32,180,152,.4); }
.ao-you .ao-dot{ background:var(--brand); }
.ao-you .stars{ margin-left:auto; gap:2px; } .ao-you .stars i{ width:8px; height:8px; }
.ao-a{ top:44px; } .ao-b{ top:88px; }
/* ads */
.ad-card{ width:264px; padding:16px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 32px -16px rgba(8,22,22,.25); display:flex; flex-direction:column; gap:8px; }
.ad-h{ display:flex; justify-content:space-between; align-items:center; }
.ad-h b{ font-size:12px; color:#22302e; }
.ad-pill{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:var(--r-full); background:var(--brand-soft); color:var(--brand-text); font-size:10px; font-weight:700; }
.ad-pill i{ width:6px; height:6px; border-radius:50%; background:var(--brand); }
.ad-chart{ width:100%; height:96px; overflow:visible; }
.ad-grid{ stroke:#e6eceb; stroke-width:1; fill:none; }
.ad-area{ fill:rgba(32,180,152,.10); }
.ad-line{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; vector-effect:non-scaling-stroke; }
.ad-line.g{ stroke:var(--brand); } .ad-line.m{ stroke:#22302e; stroke-opacity:.45; stroke-width:2; }
.ad-dot{ transform-box:fill-box; transform-origin:center; fill:#fff; stroke:var(--brand); stroke-width:2.5; vector-effect:non-scaling-stroke; }
.ad-legend{ display:flex; gap:16px; font-size:10px; color:var(--ink-muted); }
.ad-legend span{ display:inline-flex; align-items:center; gap:4px; }
.ad-legend i{ width:12px; height:3px; border-radius:2px; background:var(--brand); } .ad-legend i.m{ background:#22302e; opacity:.45; }
/* video */
.art-video{ place-items:center; align-content:center; gap:12px; }
.av-prev{ position:relative; width:248px; height:112px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#123532 0%,#1c9c84 120%); display:grid; place-items:center; box-shadow:0 16px 32px -16px rgba(8,22,22,.35); }
.av-prev::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 80% 20%,rgba(255,255,255,.18),transparent 60%); }
.av-play{ position:relative; z-index:1; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; color:#081616; }
.av-play svg{ width:14px; height:14px; fill:currentColor; margin-left:2px; }
.av-cap{ position:absolute; left:12px; bottom:10px; z-index:1; font-size:10px; font-weight:600; color:#fff; }
.av-rec{ position:absolute; right:10px; top:10px; z-index:1; display:inline-flex; align-items:center; gap:4px; height:18px; padding:0 6px; border-radius:var(--r-full); background:rgba(0,0,0,.35); color:#fff; font-size:9px; font-weight:700; }
.av-rec i{ width:5px; height:5px; border-radius:50%; background:#ff5a5a; }
.av-track{ position:relative; width:248px; height:32px; border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.av-clips{ position:absolute; left:4px; top:4px; bottom:4px; display:flex; gap:4px; width:max-content; }
.av-clips i{ width:48px; border-radius:6px; background:linear-gradient(135deg,#bfe6dd,#e2f5f1); }
.av-clips i:nth-child(3n+2){ width:32px; background:linear-gradient(135deg,#d9e3e1,#eef3f2); }
.av-clips i:nth-child(3n){ width:56px; background:linear-gradient(135deg,#9fd9cb,#cfeee6); }
.av-head{ position:absolute; top:0; bottom:0; left:40%; width:2px; background:#ff5a5a; }
.av-head::before{ content:""; position:absolute; top:0; left:-4px; width:10px; height:6px; border-radius:2px; background:#ff5a5a; }
/* email */
.art-mail{ align-content:center; justify-items:center; gap:0; }
.am-node{ display:flex; align-items:center; gap:8px; width:176px; height:32px; padding:0 12px; border-radius:10px; background:#fff; border:1px solid var(--line); font-size:11px; font-weight:600; color:#22302e; box-shadow:0 8px 16px -12px rgba(8,22,22,.3); transition:border-color .3s,box-shadow .3s; }
.am-node .ic-xs{ color:var(--brand-text); }
.am-link{ position:relative; width:2px; height:16px; background:#d3dedc; overflow:hidden; }
.am-link b{ position:absolute; left:0; top:-8px; width:2px; height:8px; background:var(--brand); opacity:0; }

/* live loops only while the box is on screen */
@media (prefers-reduced-motion:no-preference){
  .art.live .aw-b,.art.live .aw-cta{ animation:awbuild 6s var(--ease) infinite; }
  .art.live .aw-hero{ animation-delay:.15s; } .art.live .aw-row i:nth-child(1){ animation-delay:.3s; } .art.live .aw-row i:nth-child(2){ animation-delay:.4s; } .art.live .aw-row i:nth-child(3){ animation-delay:.5s; }
  .art.live .aw-cta{ animation:awcta 6s var(--ease) infinite; }
  .art.live .aw-toast{ animation:arttoast 6s var(--ease) infinite; }
  .art.live .as-btn{ animation:asbtn 2.4s var(--ease) infinite; }
  .art.live .as-plus{ animation:asplus 2.4s var(--ease) infinite; }
  .art.live .as-cart i{ animation:asbump 2.4s var(--ease) infinite; }
  .art.live .ao-you{ animation:aoyou 6s var(--ease) infinite; }
  .art.live .ao-a{ animation:aoa 6s var(--ease) infinite; }
  .art.live .ao-b{ animation:aob 6s var(--ease) infinite; }
  .art.live .pin.you{ animation:pinbob 1.2s ease-in-out infinite alternate; }
  .art.live .ad-line{ animation:addraw 5s var(--ease) infinite; }
  .art.live .ad-line.m{ animation-delay:.3s; }
  .art.live .ad-dot{ animation:addot 5s var(--ease) infinite; }
  .art.live .av-clips{ animation:avclips 8s linear infinite; }
  .art.live .av-head{ animation:avhead 4s ease-in-out infinite alternate; }
  .art.live .av-rec i{ animation:blink 1.2s steps(1) infinite; }
  .art.live .am-node{ animation:amnode 6s var(--ease) infinite; }
  .art.live .n2{ animation-delay:1.2s; } .art.live .n3{ animation-delay:2.4s; } .art.live .n4{ animation-delay:3.6s; }
  .art.live .am-link b{ animation:amlink 6s linear infinite; }
  .art.live .am-link:nth-of-type(2) b{ animation-delay:1.2s; } .art.live .am-link:nth-of-type(3) b{ animation-delay:2.4s; }
}
@keyframes awbuild{ 0%{ opacity:.2; transform:scaleX(.5); } 10%,88%{ opacity:1; transform:none; } 100%{ opacity:.2; transform:scaleX(.5); } }
@keyframes awcta{ 0%,40%{ transform:scale(1); box-shadow:0 0 0 0 rgba(32,180,152,.5); } 46%{ transform:scale(.92); } 52%{ transform:scale(1); box-shadow:0 0 0 8px rgba(32,180,152,0); } 100%{ transform:scale(1); } }
@keyframes arttoast{ 0%,50%{ opacity:0; transform:translateY(12px) scale(.95); } 56%,88%{ opacity:1; transform:none; } 96%,100%{ opacity:0; transform:translateY(12px) scale(.95); } }
@keyframes asbtn{ 0%,24%,40%,100%{ transform:scale(1); } 30%{ transform:scale(.94); background:#1c9c84; } }
@keyframes asplus{ 0%,30%{ opacity:0; transform:translateY(8px); } 40%{ opacity:1; } 70%,100%{ opacity:0; transform:translateY(-16px); } }
@keyframes asbump{ 0%,34%,52%,100%{ transform:scale(1); } 42%{ transform:scale(1.35); } }
@keyframes aoyou{ 0%,8%{ top:88px; } 30%,86%{ top:0; } 96%,100%{ top:88px; } }
@keyframes aoa{ 0%,8%{ top:0; } 30%,86%{ top:44px; } 96%,100%{ top:0; } }
@keyframes aob{ 0%,8%{ top:44px; } 30%,86%{ top:88px; } 96%,100%{ top:44px; } }
@keyframes pinbob{ to{ translate:0 -4px; } }
@keyframes addraw{ 0%{ stroke-dashoffset:1; opacity:1; } 40%,88%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }
@keyframes addot{ 0%,36%{ opacity:0; transform:scale(.4); } 44%,88%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes avclips{ to{ transform:translateX(-50%); } }
@keyframes avhead{ from{ left:24%; } to{ left:72%; } }
@keyframes amnode{ 0%,4%{ border-color:var(--line); box-shadow:0 8px 16px -12px rgba(8,22,22,.3); } 10%,24%{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(32,180,152,.15),0 8px 16px -12px rgba(8,22,22,.3); } 32%,100%{ border-color:var(--line); } }
@keyframes amlink{ 0%,12%{ top:-8px; opacity:1; } 20%{ top:16px; opacity:1; } 21%,100%{ opacity:0; } }

@media (max-width:1000px){ .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .svc-grid{ grid-template-columns:minmax(0,1fr); } }

/* ===== pricing ===== */
.tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.tier{ position:relative; display:flex; flex-direction:column; gap:24px; height:100%; padding:32px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shadow); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; }
.tiers > .tier:hover{ transform:translateY(-4px); box-shadow:var(--fix-shadow); border-color:var(--brand-line); }
.tier-top{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.tier-tag{ height:24px; padding:0 8px; display:inline-flex; align-items:center; border-radius:var(--r-full); background:var(--brand-soft); color:var(--brand-text); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tier-name{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:32px; letter-spacing:-.015em; }
.tier-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.tier-price .amt{ font-family:var(--font-display); font-weight:800; font-size:48px; line-height:56px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.tier-price .amt .ph{ font-size:20px; letter-spacing:0; vertical-align:middle; }
.tier-price .from,.tier-price .per{ font-size:15px; color:var(--ink-muted); }
.tier-sub{ font-size:15px; line-height:24px; color:var(--ink-muted); margin-top:-8px; }
.tier-list{ display:flex; flex-direction:column; gap:16px; }
.tier-list li{ display:flex; gap:16px; align-items:flex-start; font-size:15px; line-height:24px; }
.tier-list .ck{ display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); }
.tier-list .ck svg{ width:14px; height:14px; }
.tier .btn{ margin-top:auto; }
.tier-ring{ position:relative; border-radius:30px; padding:2px; background:var(--brand); box-shadow:0 32px 64px -24px rgba(8,22,22,.45); transition:transform .4s var(--ease); }
.tier-ring:hover{ transform:translateY(-4px); }
@media (prefers-reduced-motion:no-preference){ .tier-ring{ background:conic-gradient(from var(--ang),#22403c 0deg,var(--brand) 70deg,var(--grad-b) 110deg,#22403c 180deg,#22403c 360deg); animation:ang 6s linear infinite; } }
.tier.feat{ border:0; border-radius:28px; background:radial-gradient(120% 80% at 100% 0%,rgba(32,180,152,.22),transparent 55%),#081616; color:#fbfdfd; box-shadow:none;
  --ink:#fbfdfd; --ink-muted:#a3b8b4; --line:#22403c; --brand-text:#20b498; --brand-soft:rgba(32,180,152,.16); --btn-hover-bg:#ffffff; --btn-hover-ink:#081616; --arrow-bg:#081616; }
.tier.feat .tier-price .amt{ color:#fbfdfd; }
@media (prefers-reduced-motion:no-preference){
  .tiers.inview .tier-list li{ animation:tierin .5s var(--ease) both; }
  .tiers.inview .tier-list li:nth-child(2){ animation-delay:.08s; } .tiers.inview .tier-list li:nth-child(3){ animation-delay:.16s; }
  .tiers.inview .tier-list li:nth-child(4){ animation-delay:.24s; } .tiers.inview .tier-list li:nth-child(5){ animation-delay:.32s; }
  .tiers.inview .tier-list .ck{ animation:checkin .45s var(--ease) both; }
  .tiers.inview .tier-list li:nth-child(2) .ck{ animation-delay:.08s; } .tiers.inview .tier-list li:nth-child(3) .ck{ animation-delay:.16s; }
  .tiers.inview .tier-list li:nth-child(4) .ck{ animation-delay:.24s; } .tiers.inview .tier-list li:nth-child(5) .ck{ animation-delay:.32s; }
}
@keyframes tierin{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@media (max-width:1000px){ .tiers{ grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; } }

/* comparison: floating highlighted column */
.compare{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) 240px 240px; max-width:960px; margin:64px auto 0; padding-top:16px; }
.cmp-row{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) 240px 240px; grid-template-columns:subgrid; align-items:center; min-height:56px; }
.cmp-row + .cmp-row{ border-top:1px solid var(--line); }
.cmp-head{ grid-row:1; min-height:96px; }
.cmp-row > span{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; padding:8px 24px; }
.cmp-q{ font-size:15px; line-height:24px; font-weight:600; color:var(--ink); }
.cmp-us,.cmp-them{ justify-content:center; text-align:center; }
.cmp-us b{ font-size:15px; font-weight:700; color:var(--brand-text); white-space:nowrap; }
.cmp-them .cv > span{ font-size:14px; font-weight:500; color:var(--ink-muted); white-space:nowrap; }
/* icons sit in one straight line, text starts at the same point, group stays centred in the column */
.cv{ display:flex; align-items:center; gap:8px; text-align:left; }
.cmp-us .cv{ width:var(--cv-us,168px); }
.cmp-them .cv{ width:var(--cv-them,128px); }
.compare.measuring .cv{ width:max-content; }
.cmp-head .cmp-them{ font-family:var(--font-display); font-size:16px; line-height:24px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.cmp-head .cmp-them{ padding-inline:40px; }
.cmp-logo{ width:140px; height:auto; }
.cmp-mark{ display:none; width:32px; height:auto; }
.cmp-best{ grid-column:2; grid-row:1 / span 7; z-index:1; position:relative; pointer-events:none; border-radius:24px; border:1px solid rgba(32,180,152,.45);
  background:linear-gradient(180deg,rgba(32,180,152,.12) 0%,rgba(32,180,152,.06) 40%,rgba(32,180,152,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 64px -32px rgba(28,156,132,.5),0 8px 24px -16px rgba(28,156,132,.25); }
.cmp-badge{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 16px; border-radius:var(--r-full); overflow:hidden;
  background:linear-gradient(90deg,#167c68,#0e5a4c); color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 16px -8px rgba(14,90,76,.6); }
.cmp-badge svg{ width:12px; height:12px; flex:none; }
.cmp-badge::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); }
.yes{ display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; background:#1c9c84; color:#fff; box-shadow:0 4px 8px -4px rgba(28,156,132,.6); }
.yes svg{ width:14px; height:14px; }
.no{ position:relative; width:24px; height:24px; flex:none; border-radius:50%; background:#edf1f0; }
.no::before{ content:""; position:absolute; left:7px; top:11px; width:10px; height:2px; border-radius:2px; background:#a3b0ad; }
@media (prefers-reduced-motion:no-preference){
  .cmp-badge::after{ animation:badgeshine 4.8s var(--ease) infinite 1.2s; }
  .compare.inview .yes{ animation:checkin .45s var(--ease) both; animation-delay:calc(var(--i) * 80ms); }
  .compare.inview .no{ animation:nofade .4s var(--ease) both; animation-delay:calc(var(--i) * 80ms + 120ms); }
}
@keyframes badgeshine{ 0%{ transform:translateX(-120%); } 30%,100%{ transform:translateX(120%); } }
@keyframes nofade{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@media (max-width:860px){
  .compare{ grid-template-columns:minmax(0,1fr) 200px 176px; }
  .cmp-row{ grid-template-columns:minmax(0,1fr) 200px 176px; grid-template-columns:subgrid; }
  .cmp-head .cmp-them{ padding-inline:16px; }
}
@media (max-width:640px){
  .compare{ grid-template-columns:minmax(0,1fr) 96px 96px; }
  .cmp-row{ grid-template-columns:minmax(0,1fr) 96px 96px; grid-template-columns:subgrid; min-height:72px; }
  .cmp-head{ min-height:80px; }
  .cmp-row > span{ padding:8px; }
  .cmp-q{ padding-left:0 !important; font-size:14px; line-height:20px; }
  .cmp-us,.cmp-them{ flex-direction:column; gap:4px !important; }
  .cmp-us b{ font-size:12px; line-height:16px; white-space:normal; }
  .cmp-them .cv > span{ font-size:12px; line-height:16px; white-space:normal; }
  .cmp-us .cv,.cmp-them .cv{ width:auto; flex-direction:column; gap:4px; text-align:center; }
  .cmp-head .cmp-them{ font-size:13px; line-height:16px; padding-inline:8px; }
  .cmp-logo{ display:none; } .cmp-mark{ display:block; }
  .cmp-best{ border-radius:16px; }
  .cmp-badge{ height:24px; padding:0 8px; gap:4px; font-size:10px; letter-spacing:.06em; }
  .cmp-badge svg{ width:10px; height:10px; }
}

/* ===== icons that draw themselves ===== */
@media (prefers-reduced-motion:no-preference){
  .icon-tile.drawn svg{ animation:icondraw 1.1s var(--ease) both; }
  .card:hover .icon-tile svg,.ptile:hover .pt-fb{ animation:icondraw2 .9s var(--ease) both; }
}
@keyframes icondraw{ from{ stroke-dasharray:80; stroke-dashoffset:80; } to{ stroke-dasharray:80; stroke-dashoffset:0; } }
@keyframes icondraw2{ from{ stroke-dasharray:80; stroke-dashoffset:80; } to{ stroke-dasharray:80; stroke-dashoffset:0; } }

/* ===== Design A: Daylight. White and mist bands inside a hairline frame, soft cards, teal accents. ===== */
body{ background:#ffffff; }
.va{
  --bg:#ffffff; --bg-alt:#f3f6f5; --surface:#ffffff; --surface-soft:#f5f7f7;
  --ink:#1a1a1a; --ink-muted:#4b5957; --line:#dde4e3; --line-strong:#7f908d;
  --brand:#20b498; --brand-display:#1c9c84; --brand-text:#167c68; --brand-soft:#e2f5f1; --brand-line:#bfe6dd; --on-brand:#081616;
  --grad-a:#16a98d; --grad-b:#1bece7; --on-night:#fbfdfd;
  --danger:#c53030; --danger-soft:#fdeceb; --amber:#b45309;
  --todo-bg:#fff6db; --todo-ink:#6b4e00; --todo-line:#d9b84a;
  --focus:#167c68; --track:#e8edec; --z-r:#f3b8b4; --z-o:#f5d08a; --z-g:#9fd9cb;
  --ad-bg:#fde9cf; --ad-ink:#7a4a00; --dot:#dde4e3; --grid-line:rgba(127,144,141,.16);
  --card-bg:#ffffff; --card-line:#dde4e3; --card-shadow:0 1px 2px rgba(8,22,22,.04),0 2px 8px rgba(8,22,22,.03); --r-card:28px;
  --tile-bg:var(--brand-soft); --tile-ink:var(--brand-text); --tile-line:transparent;
  --fix-bg:#ffffff; --fix-line:#dde4e3; --fix-shadow:0 24px 48px -20px rgba(8,22,22,.22),0 8px 16px rgba(8,22,22,.05);
  --num-bg:#0a1414; --num-ink:#fbfdfd; --num-ghost:#d6dfdd;
  --mini-bg:#ffffff; --vis-bg:radial-gradient(120% 90% at 50% 0%,#e2f5f1 0%,#f5f7f7 70%);
  --step-ring:var(--bg-alt); --fstep-hover:rgba(255,255,255,.7); --stage-bg:radial-gradient(120% 100% at 100% 0%,#dff3ee 0%,#f8faf9 62%); --window-bg:#ffffff; --screen-bg:#f6f8f8;
  --orbit-line:#cdd8d6; --orbit-link:#b9c7c4; --orbit-glow:rgba(32,180,152,.10); --hub-bg:#ffffff; --hub-line:#dde4e3; --pt-bg:#ffffff; --pt-line:#dde4e3; --beam:#cfdad8;
  --btn-hover-bg:#081616; --btn-hover-ink:#fbfdfd; --arrow-bg:#081616; --arrow-ink:#fbfdfd; --ghost-line:#7f908d; --ghost-hover:#f5f7f7;
  --header-bg:rgba(255,255,255,.86);
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif; --font-body:"Outfit","Helvetica Neue",Arial,sans-serif;
  --h1-size:clamp(34px,3.6vw + 12px,64px); --h1-weight:700; --h1-track:-.035em; --h2-size:clamp(28px,2.2vw + 14px,44px);
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:9999px;
  --wrap:1200px; --gutter:24px; --sec:112px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (max-width:720px){ .va{ --gutter:16px; --sec:72px; } }

/* hairline frame with plus marks: the signature of this design */
.va .band{ border-top:1px solid var(--line); }
.va .band > .wrap{ border-inline:1px solid var(--line); }
.va .band > .wrap::before,.va .band > .wrap::after{ content:""; position:absolute; top:-8px; width:16px; height:16px; z-index:2; background:linear-gradient(var(--line-strong),var(--line-strong)) center/16px 1px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) center/1px 16px no-repeat; }
.va .band > .wrap::before{ left:-8px; } .va .band > .wrap::after{ right:-8px; }
.va .hero{ border-top:0; }
.va .night > .wrap{ border-inline-color:#22403c; }
.va .night > .wrap::before,.va .night > .wrap::after{ background:linear-gradient(#22403c,#22403c) center/16px 1px no-repeat,linear-gradient(#22403c,#22403c) center/1px 16px no-repeat; }
.va .site-footer > .wrap{ border-inline:1px solid var(--line); }
@media (max-width:720px){ .va .band > .wrap,.va .site-footer > .wrap{ border-inline:0; } .va .band > .wrap::before,.va .band > .wrap::after{ display:none; } }

/* eyebrows: small pill */
.va .eyebrow{ height:32px; padding:0 16px; border-radius:var(--r-full); background:#fff; border:1px solid var(--line); box-shadow:var(--card-shadow); }
.va .eyebrow .ic-sm{ color:var(--brand-text); }
.va .alt .eyebrow{ background:#fff; }
.va .night .eyebrow{ background:rgba(255,255,255,.06); border-color:#22403c; box-shadow:none; }
.va .pill{ background:#fff; border:1px solid var(--line); box-shadow:var(--card-shadow); }

/* header nav as a segmented pill */
.va .nav{ background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-full); }
.va .nav-ind{ top:-1px; background:#fff; border:1px solid var(--line); box-shadow:var(--card-shadow); }
.va .nav a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); transform:scale(0); transition:transform .3s var(--ease); }
.va .nav a.active::before{ transform:scale(1); }

/* hero */
.va .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 60% 60% at 75% 35%,#000 0%,transparent 70%); mask-image:radial-gradient(ellipse 60% 60% at 75% 35%,#000 0%,transparent 70%); }
.va .hero > .wrap{ padding-block:72px var(--sec); }
.va .hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.va .hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; min-width:0; }
.va .hero-copy .lead{ max-width:540px; }
.va .hero-vis{ display:flex; flex-direction:column; align-items:center; gap:24px; min-width:0; }
.va .cats{ flex-wrap:wrap; justify-content:center; }
.va .stage-fit{ width:100%; display:flex; justify-content:center; overflow:hidden; }
.va .stage{ position:relative; width:560px; height:560px; flex:none; zoom:var(--z,1); }
.va .stage .phone{ position:absolute; z-index:1; left:56px; top:16px; }
.va .stage .fixcard{ position:absolute; z-index:3; left:256px; top:184px; }
.va .stage .vchip{ position:absolute; z-index:3; left:320px; top:40px; width:232px; }
.va .glow{ position:absolute; border-radius:50%; filter:blur(56px); pointer-events:none; }
.va .glow.g1{ width:264px; height:264px; left:232px; top:48px; background:rgba(32,180,152,.14); }
.va .glow.g2{ width:224px; height:224px; left:24px; top:296px; background:rgba(27,236,231,.10); }
.va .stage.narrow{ width:400px; height:600px; }
.va .stage.narrow .phone{ left:8px; }
.va .stage.narrow .fixcard{ left:96px; top:248px; }
.va .stage.narrow .vchip{ display:none; }
.va .stage.narrow .danger-chip{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .va .stage .phone{ animation:bob 8s ease-in-out -2s infinite; }
  .va .stage .vchip{ animation:bob 7s ease-in-out -4s infinite; }
  .va .glow.g1{ animation:drift1 18s ease-in-out infinite alternate; }
  .va .glow.g2{ animation:drift2 22s ease-in-out infinite alternate; }
}
@media (max-width:1040px){ .va .hero-grid{ grid-template-columns:minmax(0,1fr); } .va .hero > .wrap{ padding-block:48px var(--sec); } }

/* cards */
.va .path:hover,.va .svc:hover,.va .why-item:hover{ box-shadow:var(--fix-shadow); border-color:var(--brand-line); }
.va .leak{ background:var(--surface-soft); box-shadow:none; }
.va .why-item{ background:#fff; }

/* platforms */



/* =====================================================================
   Glass layer + multi-page components (added for the full website)
   Glass is used only where there is colour behind it: page heroes,
   the floating header, the night bands and feature panels.
   ===================================================================== */
.va{
  --glass-bg:rgba(255,255,255,.56);
  --glass-bg-strong:rgba(255,255,255,.74);
  --glass-line:rgba(255,255,255,.78);
  --glass-edge:rgba(8,22,22,.07);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(8,22,22,.04),0 24px 48px -28px rgba(8,22,22,.24);
  --glass-blur:blur(20px) saturate(1.6);
  --glass-solid:rgba(255,255,255,.94);
  --night-glass:rgba(255,255,255,.05);
  --night-glass-line:rgba(255,255,255,.12);
  --night-muted:#a3b8b4;
  --night-line:#22403c;
  --hdr-h:80px;
}
@media (max-width:720px){ .va{ --glass-blur:blur(12px) saturate(1.4); } }

.glass{ background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:0 0 0 1px var(--glass-edge),var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.glass-night{ background:var(--night-glass); border:1px solid var(--night-glass-line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 32px 64px -32px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); }

/* ---------- floating glass header ---------- */
.va .site-header{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; padding-top:12px; margin-bottom:calc(-1 * var(--hdr-h)); pointer-events:none; }
.va .site-header.scrolled{ border:0; }
.hdr-bar{ max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.va .hdr{ pointer-events:auto; height:64px; padding:0 8px 0 24px; border-radius:var(--r-full); background:rgba(255,255,255,.52); border:1px solid rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(8,22,22,.05),inset 0 1px 0 rgba(255,255,255,.85); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); transition:background-color .3s var(--ease),box-shadow .3s var(--ease); }
.va .site-header.scrolled .hdr{ background:rgba(255,255,255,.8); box-shadow:0 0 0 1px rgba(8,22,22,.06),inset 0 1px 0 #fff,0 16px 40px -20px rgba(8,22,22,.28); }
.va .nav{ background:rgba(243,246,245,.72); }
.va .menu-btn{ background:rgba(255,255,255,.7); }
.va .hdr-actions .btn-sm{ height:48px; padding:0 24px; }
@media (max-width:1040px){ .va .hdr{ padding:0 8px 0 16px; } }
.va .mobile-menu{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5); }
.va .mobile-menu nav a[aria-current="page"]{ color:var(--brand-text); }
section[id]{ scroll-margin-top:96px; }
.faq-side{ top:112px; }

/* first section sits under the floating header */
.va .hero > .wrap{ padding-top:calc(var(--hdr-h) + 56px); }
@media (max-width:1040px){ .va .hero > .wrap{ padding-top:calc(var(--hdr-h) + 40px); } }

/* ---------- mesh backgrounds (what the glass blurs) ---------- */
.mesh{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; background:linear-gradient(180deg,#eef8f5 0%,#f7fbfa 55%,#ffffff 100%); }
.mesh i{ position:absolute; border-radius:50%; }
.mesh .m1{ width:640px; height:640px; left:-200px; top:-280px; background:radial-gradient(circle,rgba(32,180,152,.30),rgba(32,180,152,0) 66%); }
.mesh .m2{ width:560px; height:560px; right:-160px; top:-120px; background:radial-gradient(circle,rgba(27,236,231,.24),rgba(27,236,231,0) 66%); }
.mesh .m3{ width:520px; height:520px; left:38%; bottom:-300px; background:radial-gradient(circle,rgba(22,169,141,.18),rgba(22,169,141,0) 66%); }
.mesh::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000 0%,transparent 75%); }
.mesh.soft{ background:none; }
.mesh.soft .m1{ opacity:.55; } .mesh.soft .m2{ opacity:.6; } .mesh.soft .m3{ opacity:.5; }
.mesh.soft::after{ display:none; }
.mesh.dark{ background:none; }
.mesh.dark .m1{ background:radial-gradient(circle,rgba(32,180,152,.20),rgba(32,180,152,0) 66%); }
.mesh.dark .m2{ background:radial-gradient(circle,rgba(27,236,231,.12),rgba(27,236,231,0) 66%); }
.mesh.dark .m3{ background:radial-gradient(circle,rgba(22,169,141,.14),rgba(22,169,141,0) 66%); }
.mesh.dark::after{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .mesh .m1{ animation:drift1 22s ease-in-out infinite alternate; }
  .mesh .m2{ animation:drift2 26s ease-in-out infinite alternate; }
  .mesh .m3{ animation:drift1 30s ease-in-out -8s infinite alternate-reverse; }
}
.va .hero > .mesh{ z-index:0; }
.va .hero > .wrap{ z-index:1; }
.va .hero::before{ z-index:0; }

/* home hero: glass cards over the glows */
.va .stage .fixcard,.va .stage .vchip{ background:rgba(255,255,255,.66); border-color:rgba(255,255,255,.8); box-shadow:0 0 0 1px var(--glass-edge),inset 0 1px 0 #fff,var(--fix-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.va .cats .cat{ background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.va .cats .cat.on{ background:var(--brand-soft); }

/* client logo strip */
.proof{ margin-top:64px; }
.proof-glass{ width:100%; display:flex; flex-direction:column; align-items:center; gap:24px; padding:32px; border-radius:var(--r-card); }
.proof-line{ font-size:15px; }
.logos{ gap:16px 24px; }
.logo-slot{ background:rgba(255,246,219,.8); }
.logos img{ height:40px; width:auto; max-width:160px; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .3s,opacity .3s; }
.logos img:hover{ filter:none; opacity:1; }

/* ---------- inner page hero ---------- */
.phero{ position:relative; overflow:hidden; border-top:0 !important; }
.phero > .wrap{ position:relative; z-index:1; padding-block:calc(var(--hdr-h) + 64px) 96px !important; }
.va .phero > .wrap::before,.va .phero > .wrap::after{ display:none; }
.va .phero > .wrap{ border-inline-color:rgba(127,144,141,.18); }
.phero.compact > .wrap{ padding-bottom:72px !important; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:32px; font-size:14px; line-height:24px; color:var(--ink-muted); }
.crumbs a{ text-decoration:none; } .crumbs a:hover{ color:var(--brand-text); }
.crumbs .sep{ color:var(--line-strong); }
.crumbs [aria-current]{ color:var(--ink); font-weight:500; }
.phero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:center; }
.phero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; min-width:0; }
.phero-copy .lead{ max-width:600px; }
.phero-center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; max-width:840px; margin-inline:auto; }
.phero-center .lead{ max-width:640px; }
.phero .h1{ font-size:clamp(34px,3.2vw + 12px,60px); }
@media (max-width:960px){ .phero-grid{ grid-template-columns:minmax(0,1fr); gap:40px; } }
@media (max-width:720px){ .phero > .wrap{ padding-block:calc(var(--hdr-h) + 40px) 72px !important; } .crumbs{ margin-bottom:24px; } }

/* glass side panel in page heroes */
.gpanel{ display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:var(--r-card); min-width:0; }
.gpanel-h{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 8px 8px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.jump{ display:flex; flex-direction:column; gap:4px; }
.jump a{ display:flex; align-items:center; gap:16px; padding:8px; border-radius:var(--r-md); text-decoration:none; transition:background-color .25s,transform .25s var(--ease); }
.jump a:hover,.jump a:focus-visible{ background:rgba(255,255,255,.8); transform:translateX(4px); }
.jump .icon-tile{ width:40px; height:40px; border-radius:12px; background:rgba(226,245,241,.9); }
.jump b{ display:block; font-family:var(--font-display); font-size:15px; line-height:24px; }
.jump small{ display:block; font-size:13px; line-height:20px; color:var(--ink-muted); }
.jump .go{ margin-left:auto; color:var(--brand-text); opacity:0; transition:opacity .25s; }
.jump a:hover .go{ opacity:1; }
.facts{ display:flex; flex-direction:column; }
.facts div{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:16px; padding:16px 8px; border-top:1px solid rgba(127,144,141,.2); font-size:15px; line-height:24px; }
.facts div:first-child{ border-top:0; }
.facts dt{ color:var(--ink-muted); }
.facts dd{ margin:0; font-weight:600; }

/* ---------- shared bits ---------- */
.sec-foot{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 24px; margin-top:48px; }
.btn-ghost .ic-sm.r{ transform:none; }
.btn-ghost:hover .ic-sm.r{ transform:translate(2px,-2px); }
.night .btn-ghost{ color:#fbfdfd; border-color:#3b5b57; }
.night .btn-ghost:hover,.night .btn-ghost:focus-visible{ border-color:#fbfdfd; background:rgba(255,255,255,.06); }
.kicker{ font-size:13px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-text); }
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto 40px; }
.filters button{ height:40px; padding:0 16px; border-radius:var(--r-full); border:1px solid var(--line); background:#fff; color:var(--ink-muted); font-size:14px; font-weight:600; cursor:pointer; transition:color .2s,border-color .2s,background-color .2s; }
.filters button:hover{ color:var(--ink); border-color:var(--line-strong); }
.filters button[aria-pressed="true"]{ background:#081616; border-color:#081616; color:#fbfdfd; }
.empty-note{ grid-column:1 / -1; text-align:center; color:var(--ink-muted); padding:32px; }

/* home: compare as its own section */
#compare .compare{ margin-top:0; }

/* ---------- call to action band ---------- */
.cta-band > .wrap{ position:relative; z-index:1; }
.cta-card{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 48px; align-items:center; padding:56px; border-radius:var(--r-xl); }
.cta-card .h2{ color:#fbfdfd; }
.cta-card .h2 .teal{ color:var(--brand); }
.cta-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:640px; }
.cta-copy .lead{ color:var(--night-muted); }
.cta-actions{ display:flex; flex-direction:column; align-items:stretch; gap:16px; }
.cta-actions .note{ color:var(--night-muted); justify-content:center; font-size:13px; }
@media (max-width:900px){ .cta-card{ grid-template-columns:minmax(0,1fr); padding:40px 32px; } .cta-actions{ align-items:flex-start; } }
@media (max-width:520px){ .cta-card{ padding:32px 24px; } .cta-actions{ align-items:stretch; width:100%; } }

/* ---------- services page ---------- */
.svc-rows{ display:flex; flex-direction:column; gap:32px; }
.svc-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:stretch; padding:24px; border-radius:var(--r-xl); background:#fff; border:1px solid var(--line); box-shadow:var(--card-shadow); scroll-margin-top:112px; }
.svc-row:nth-child(even) .svc-vis{ order:2; }
.svc-vis{ position:relative; min-height:360px; display:grid; place-items:center; padding:40px 24px; border-radius:var(--r-lg); overflow:hidden; isolation:isolate; }
.svc-vis .mesh{ z-index:-1; }
.svc-vis .art{ width:min(100%,400px); height:256px; background:rgba(255,255,255,.5); border-color:rgba(255,255,255,.8); box-shadow:0 0 0 1px var(--glass-edge),var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.svc-vis .art::before{ opacity:.5; }
.svc-copy{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:24px; padding:24px 24px 24px 0; min-width:0; }
.svc-row:nth-child(even) .svc-copy{ padding:24px 0 24px 24px; }
.svc-copy .h2{ font-size:clamp(26px,1.6vw + 14px,36px); }
.svc-copy .lead{ font-size:17px; }
.svc-copy .kicker{ display:flex; align-items:center; gap:16px; }
.svc-cols{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:32px; width:100%; padding-top:24px; border-top:1px solid var(--line); }
.svc-cols h4{ margin:0 0 16px; font-family:var(--font-display); font-size:14px; line-height:24px; font-weight:700; }
.svc-cols .checks{ gap:8px; }
.svc-cols .checks li{ font-size:15px; line-height:24px; gap:8px; }
.svc-cols .checks .ck{ width:20px; height:20px; margin-top:2px; }
.svc-cols .checks .ck svg{ width:12px; height:12px; }
.best{ font-size:15px; line-height:24px; color:var(--ink-muted); }
@media (max-width:1000px){ .svc-row{ grid-template-columns:minmax(0,1fr); gap:24px; } .svc-row:nth-child(even) .svc-vis{ order:0; } .svc-copy,.svc-row:nth-child(even) .svc-copy{ padding:8px; } .svc-vis{ min-height:300px; } }
@media (max-width:560px){ .svc-row{ padding:16px; } .svc-cols{ grid-template-columns:minmax(0,1fr); gap:24px; } }

/* paths on a mesh: glass feed */
.va .path-vis{ background:none; isolation:isolate; }
.va .path-vis .mesh{ z-index:-1; }
.va .path-vis .feed li{ background:rgba(255,255,255,.66); border-color:rgba(255,255,255,.85); box-shadow:0 0 0 1px var(--glass-edge),var(--glass-shadow); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); }

/* ---------- work page ---------- */
.wk-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.wk{ display:flex; flex-direction:column; overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; }
.wk:hover{ transform:translateY(-4px); box-shadow:var(--fix-shadow); border-color:var(--brand-line); }
.wk-shot{ position:relative; aspect-ratio:16 / 10; max-width:100%; display:grid; place-items:center; padding:24px; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line); }
.wk-shot .mesh{ z-index:-1; }
.wk-shot .frame{ width:88%; aspect-ratio:16 / 10; max-width:100%; display:grid; place-items:center; padding:16px; border-radius:var(--r-md); text-align:center; font-size:13px; font-weight:600; color:var(--todo-ink); }
.wk-body{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:24px 24px 32px; flex:1; }
.wk-body p{ color:var(--ink-muted); font-size:15px; }
.wk-res{ margin-top:auto; width:100%; display:flex; flex-direction:column; gap:4px; padding-top:16px; border-top:1px solid var(--line); }
.wk-res b{ font-family:var(--font-display); font-size:18px; line-height:28px; }
.wk-res span{ font-size:13px; line-height:20px; color:var(--ink-muted); }
.wk[hidden]{ display:none !important; }
@media (max-width:1000px){ .wk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .wk-grid{ grid-template-columns:minmax(0,1fr); } }
.va .case-vis{ background:none; isolation:isolate; }
.va .case-vis .mesh{ z-index:-1; }
.va .case-vis::before{ z-index:-1; opacity:.6; }
.va .laptop .lid,.va .mphone2{ box-shadow:0 32px 64px -24px rgba(8,22,22,.4); }

/* ---------- about page ---------- */
.story{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:start; }
.story-copy{ display:flex; flex-direction:column; gap:24px; font-size:18px; line-height:30px; color:var(--ink-muted); }
.story-copy p b{ color:var(--ink); font-weight:600; }
.quote{ position:relative; display:flex; flex-direction:column; gap:16px; padding:32px; border-radius:var(--r-card); overflow:hidden; isolation:isolate; }
.quote .mesh{ z-index:-1; }
.quote blockquote{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:32px; letter-spacing:-.015em; color:var(--ink); }
.quote figcaption{ display:flex; align-items:center; gap:16px; font-size:14px; color:var(--ink-muted); }
.quote figcaption b{ display:block; color:var(--ink); font-size:15px; }
.avatar{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:50%; background:#081616; color:var(--brand); font-family:var(--font-display); font-weight:800; font-size:18px; }
@media (max-width:900px){ .story{ grid-template-columns:minmax(0,1fr); gap:32px; } }
.princ{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.pr{ display:flex; flex-direction:column; gap:16px; padding:32px; background:#fff; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; }
.pr:hover{ transform:translateY(-4px); box-shadow:var(--fix-shadow); border-color:var(--brand-line); }
.pr .n{ font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; color:var(--ink-muted); }
.pr p{ font-size:15px; color:var(--ink-muted); }
.pr-top{ display:flex; align-items:center; justify-content:space-between; }
@media (max-width:1000px){ .princ{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .princ{ grid-template-columns:minmax(0,1fr); } }
.team{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.tm{ display:flex; flex-direction:column; overflow:hidden; }
.tm-photo{ position:relative; aspect-ratio:4 / 3; max-width:100%; display:grid; place-items:center; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line); }
.tm-photo .mesh{ z-index:-1; }
.tm-photo .ph{ position:relative; }
.tm-photo .initial .ic{ width:32px; height:32px; }
.tm-photo .initial{ display:grid; place-items:center; width:96px; height:96px; border-radius:50%; font-family:var(--font-display); font-weight:800; font-size:36px; color:var(--brand-text); }
.tm-body{ display:flex; flex-direction:column; gap:8px; padding:24px; }
.tm-role{ font-size:14px; font-weight:600; color:var(--brand-text); }
.tm-body p{ font-size:15px; color:var(--ink-muted); }
@media (max-width:1000px){ .team{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .team{ grid-template-columns:minmax(0,1fr); } }

/* ---------- blog ---------- */
.post-feature{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); overflow:hidden; text-decoration:none; margin-bottom:24px; transition:box-shadow .35s var(--ease),border-color .35s; }
.post-feature:hover{ box-shadow:var(--fix-shadow); border-color:var(--brand-line); }
.post-feature .cover{ min-height:360px; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--line); }
.post-feature .post-body{ padding:40px; justify-content:center; }
.post-feature .h2{ font-size:clamp(24px,1.4vw + 14px,32px); }
@media (max-width:900px){ .post-feature{ grid-template-columns:minmax(0,1fr); } .post-feature .cover{ min-height:240px; border-right:0; border-bottom:1px solid var(--line); } .post-feature .post-body{ padding:32px 24px; } }
.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.post{ display:flex; flex-direction:column; overflow:hidden; }
.post.live{ transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; }
.post.live:hover{ transform:translateY(-4px); box-shadow:var(--fix-shadow); border-color:var(--brand-line); }
.post[hidden]{ display:none !important; }
.post-link{ display:flex; flex-direction:column; height:100%; text-decoration:none; }
.cover{ position:relative; aspect-ratio:16 / 9; max-width:100%; display:grid; place-items:center; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line); }
.cover .mesh{ z-index:-1; }
.cover-tile{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 32px; border-radius:var(--r-lg); text-align:center; }
.cover-tile .icon-tile{ width:56px; height:56px; background:#081616; color:var(--brand); border-color:transparent; }
.cover-tile .icon-tile .ic{ width:24px; height:24px; }
.cover-tile span{ font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:-.01em; }
.post-body{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:24px 24px 32px; flex:1; }
.post-body p{ color:var(--ink-muted); font-size:15px; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:13px; line-height:20px; color:var(--ink-muted); }
.post-meta .chip{ height:28px; padding:0 12px; font-size:12px; font-weight:600; }
.soon{ height:28px; padding:0 12px; display:inline-flex; align-items:center; border-radius:var(--r-full); background:var(--todo-bg); color:var(--todo-ink); border:1px dashed var(--todo-line); font-size:12px; font-weight:600; }
.post-body .link-arrow{ margin-top:auto; }
@media (max-width:1000px){ .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .posts{ grid-template-columns:minmax(0,1fr); } }

/* blog post */
.post-head{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; max-width:840px; }
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:8px 24px 8px 8px; border-radius:var(--r-full); font-size:14px; line-height:20px; color:var(--ink-muted); }
.byline .avatar{ width:40px; height:40px; font-size:16px; }
.byline b{ color:var(--ink); font-weight:600; }
.byline .dot{ width:4px; height:4px; border-radius:50%; background:var(--line-strong); }
.article-grid{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start; }
.toc{ position:sticky; top:112px; display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:var(--r-lg); background:var(--surface-soft); border:1px solid var(--line); }
.toc b{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.toc ol{ display:flex; flex-direction:column; gap:4px; counter-reset:toc; }
.toc a{ display:flex; gap:8px; padding:4px 8px; margin-inline:-8px; border-radius:var(--r-sm); font-size:14px; line-height:20px; text-decoration:none; color:var(--ink-muted); transition:color .2s,background-color .2s; }
.toc a::before{ counter-increment:toc; content:counter(toc,decimal-leading-zero); font-weight:600; color:var(--line-strong); font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--ink); }
.toc a.on{ color:var(--brand-text); background:var(--brand-soft); }
.toc a.on::before{ color:var(--brand-text); }
.toc .copy{ justify-content:flex-start; }
@media (max-width:960px){ .article-grid{ grid-template-columns:minmax(0,1fr); gap:32px; } .toc{ position:static; } }
.prose{ max-width:720px; font-size:18px; line-height:30px; color:#2b3533; }
.prose > * + *{ margin-top:24px; }
.prose h2{ margin-top:56px; font-family:var(--font-display); font-weight:700; font-size:clamp(24px,1vw + 18px,30px); line-height:1.25; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; scroll-margin-top:112px; }
.prose h3{ margin-top:40px; font-family:var(--font-display); font-weight:700; font-size:20px; line-height:28px; color:var(--ink); }
.prose ul,.prose ol{ display:flex; flex-direction:column; gap:12px; padding-left:24px; }
.prose ul{ list-style:disc; } .prose ol{ list-style:decimal; }
.prose li::marker{ color:var(--brand-text); font-weight:700; }
.prose a{ color:var(--brand-text); text-underline-offset:3px; }
.prose strong{ color:var(--ink); }
.prose .callout{ display:flex; gap:16px; padding:24px; border-radius:var(--r-lg); background:var(--brand-soft); border:1px solid var(--brand-line); font-size:16px; line-height:26px; color:var(--ink); }
.prose .callout .ic{ color:var(--brand-text); margin-top:4px; }
.inline-cta{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:32px; border-radius:var(--r-card); overflow:hidden; isolation:isolate; }
.inline-cta .mesh{ z-index:-1; }
.inline-cta div{ display:flex; flex-direction:column; gap:8px; max-width:400px; }
.inline-cta b{ font-family:var(--font-display); font-size:20px; line-height:28px; color:var(--ink); }
.inline-cta p{ font-size:15px; line-height:24px; color:var(--ink-muted); margin:0; }
.prose .inline-cta{ margin-top:48px; }

/* ---------- contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:start; }
.methods{ display:flex; flex-direction:column; gap:8px; width:100%; padding:8px; border-radius:var(--r-card); }
.method{ display:flex; align-items:center; gap:16px; padding:16px; border-radius:var(--r-lg); }
.method + .method{ border-top:1px solid rgba(127,144,141,.18); border-radius:0 0 var(--r-lg) var(--r-lg); }
.method .icon-tile{ width:40px; height:40px; border-radius:12px; background:rgba(226,245,241,.9); }
.method-t{ display:flex; flex-direction:column; min-width:0; flex:1; }
.method-t small{ font-size:13px; line-height:20px; color:var(--ink-muted); }
.method-t b{ font-size:15px; line-height:24px; font-weight:600; overflow-wrap:anywhere; }
.copybtn{ flex:none; height:32px; padding:0 12px; border-radius:var(--r-full); border:1px solid var(--line); background:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .2s,color .2s; }
.copybtn:hover{ border-color:var(--brand-text); color:var(--brand-text); }
.method a.link-arrow{ flex:none; font-size:14px; }
.cform{ padding:40px; border-radius:var(--r-xl); }
.cform .form{ gap:24px; }
.cform .in{ background-color:rgba(255,255,255,.9); }
@media (max-width:960px){ .contact-grid{ grid-template-columns:minmax(0,1fr); gap:40px; } }
@media (max-width:520px){ .cform{ padding:24px; } }

/* ---------- audit page ---------- */
.audit-hero .audit-grid{ align-items:start; }
.audit-hero .audit-copy .checks .ck{ background:var(--brand-soft); color:var(--brand-text); }
.audit-hero .formcard{ box-shadow:0 40px 80px -40px rgba(8,22,22,.45); }
.steps4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; counter-reset:st; }
.st{ position:relative; display:flex; flex-direction:column; gap:16px; padding:32px 24px; }
.st-n{ display:flex; align-items:center; justify-content:space-between; }
.st-n .n{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#081616; color:var(--brand); font-family:var(--font-display); font-weight:800; font-size:15px; }
.st p{ font-size:15px; color:var(--ink-muted); }
.st .free-tag{ height:24px; padding:0 8px; display:inline-flex; align-items:center; border-radius:var(--r-full); background:var(--brand); color:#081616; font-size:11px; font-weight:700; letter-spacing:.08em; }
.st-meta{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--brand-text); }
@media (max-width:1000px){ .steps4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps4{ grid-template-columns:minmax(0,1fr); } }
.faq.solo{ max-width:840px; margin-inline:auto; }

/* ---------- legal pages ---------- */
.legal{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start; }
.legal .prose{ font-size:16px; line-height:28px; }
.legal .prose h2{ font-size:22px; margin-top:48px; }
.legal .prose h2:first-child{ margin-top:0; }
.legal-note{ display:flex; gap:16px; padding:24px; border-radius:var(--r-lg); background:var(--todo-bg); border:1px dashed var(--todo-line); color:var(--todo-ink); font-size:15px; line-height:24px; }
.legal-note .ic{ margin-top:2px; }
@media (max-width:960px){ .legal{ grid-template-columns:minmax(0,1fr); gap:32px; } }

/* ---------- footer on a soft mesh ---------- */
.site-footer{ overflow:hidden; isolation:isolate; }
.site-footer .mesh{ z-index:-1; }
.site-footer .mesh .m1{ top:auto; bottom:-360px; left:-240px; }
.site-footer .mesh .m2{ top:auto; bottom:-320px; }
.site-footer .mesh .m3{ display:none; }

/* ---------- no backdrop-filter: solid surfaces instead ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.va .hdr,.va .stage .fixcard,.va .stage .vchip,.svc-vis .art,.va .path-vis .feed li,.va .mobile-menu{ background:var(--glass-solid); }
  .glass-night{ background:#0f2321; }
  .va .cats .cat{ background:#fff; }
}
.where.solo{ margin-top:0; }
#audit.formcard{ scroll-margin-top:112px; }
.faq-more{ margin-top:8px; align-self:flex-start; }
.phero .audit-copy .h1{ max-width:560px; }
.va .phero .eyebrow{ background:rgba(255,255,255,.7); }

@media (max-width:560px){ .logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; } .logo-slot{ width:auto; font-size:12px; } .proof-glass{ padding:24px 16px; } }
@media (max-width:480px){ .method .status{ display:none; } }

/* ---------- no frame lines: plus marks, side lines and section top/bottom lines removed ---------- */
.va .band,.va .phero{ border-top:0 !important; }
.va .band > .wrap,.va .site-footer > .wrap,.va .phero > .wrap{ border-inline:0 !important; }
.va .band > .wrap::before,.va .band > .wrap::after{ display:none !important; }
.site-footer{ border-top:0; }
.industries{ border-top:0; border-bottom:0; }
/* page-top colour fades out at the bottom so no hard edge shows where the section ends */
.hero > .mesh,.phero > .mesh{ -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%); }

/* =====================================================================
   Header v2: dark glass pill, services mega menu, hides on scroll down
   ===================================================================== */
.va .hdr{ position:relative; background:rgba(8,22,22,.74); border:1px solid rgba(255,255,255,.09); color:#fbfdfd; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 40px -20px rgba(8,22,22,.55); transition:background-color .3s var(--ease),box-shadow .3s var(--ease),translate .5s var(--ease); }
.va .site-header.scrolled .hdr{ background:rgba(8,22,22,.86); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 48px -20px rgba(8,22,22,.6); }
.va .site-header.tuck .hdr{ translate:0 calc(-100% - 24px); }
.va .nav{ background:none; border:0; gap:4px; }
.va .nav-ind{ top:0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); box-shadow:none; }
.va .nav > a,.va .nav-item > a{ color:#a3b8b4; }
.va .nav > a:hover,.va .nav-item > a:hover,.va .nav > a.active,.va .nav-item > a.active,.va .nav a[aria-current="page"]{ color:#fbfdfd; }
.va .nav a::before{ display:none; }
.va .nav > a[aria-current="page"]::before,.va .nav-item > a[aria-current="page"]::before{ display:block; transform:scale(1); }
.nav-item{ display:flex; align-items:center; }
.nav-item > a .chev{ margin-left:-2px; transition:rotate .3s var(--ease); }
.has-mega.open > a .chev{ rotate:180deg; }
.va .text-link{ color:#fbfdfd; }
.va .text-link:hover{ color:var(--brand); }
.va .menu-btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fbfdfd; }
.va .hdr :focus-visible{ outline-color:var(--brand); }
.hdr-progress{ position:absolute; left:32px; right:32px; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--brand),var(--grad-b)); transform-origin:left; scale:0 1; opacity:0; pointer-events:none; }

.mega{ position:absolute; top:calc(100% + 12px); left:50%; z-index:5; width:min(760px,calc(100vw - 48px)); translate:-50% 8px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease),translate .35s var(--ease),visibility 0s .35s; }
.mega::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.has-mega.open .mega{ opacity:1; visibility:visible; pointer-events:auto; translate:-50% 0; transition:opacity .25s var(--ease),translate .35s var(--ease),visibility 0s; }
.mega-in{ display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:8px; padding:8px; border-radius:28px; background:rgba(8,22,22,.9); border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 80px -32px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5); }
.mega-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:8px; }
.mega-link{ display:flex; align-items:center; gap:16px; padding:12px; border-radius:16px; text-decoration:none; color:#fbfdfd; transition:background-color .2s,translate .3s var(--ease); }
.mega-link:hover,.mega-link:focus-visible{ background:rgba(255,255,255,.06); translate:4px 0; }
.mega-link .icon-tile{ width:40px; height:40px; border-radius:12px; background:rgba(32,180,152,.14); color:var(--brand); border-color:transparent; }
.mega-link b{ display:block; font-size:14px; line-height:20px; font-weight:600; }
.mega-link small{ display:block; font-size:12px; line-height:16px; color:#a3b8b4; }
.mega-cta{ display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:20px; text-decoration:none; color:#fbfdfd; background:radial-gradient(120% 100% at 100% 0%,rgba(32,180,152,.38),transparent 60%),#0f2321; border:1px solid rgba(255,255,255,.08); transition:border-color .3s; }
.mega-cta:hover{ border-color:rgba(32,180,152,.5); }
.mega-cta-k{ font-size:12px; line-height:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.mega-cta b{ font-family:var(--font-display); font-size:18px; line-height:24px; }
.mega-cta-s{ font-size:13px; line-height:20px; color:#a3b8b4; }
.mega-cta .link-arrow{ margin-top:auto; padding-top:8px; color:var(--brand); }

/* mobile menu, dark glass */
.va .mobile-menu{ background:rgba(8,22,22,.94); color:#fbfdfd; overflow-y:auto; -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); }
.va .mobile-menu nav{ gap:0; margin-top:24px; }
.va .mobile-menu nav a{ display:flex; align-items:baseline; gap:16px; font-size:30px; line-height:56px; color:#fbfdfd; }
.va .mobile-menu nav a .n{ font-family:var(--font-body); font-size:13px; font-weight:600; color:#5d7a75; font-variant-numeric:tabular-nums; }
.va .mobile-menu nav a[aria-current="page"]{ color:var(--brand); }
.mm-svc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.mm-svc a{ height:32px; padding:0 16px; display:inline-flex; align-items:center; border-radius:var(--r-full); border:1px solid rgba(255,255,255,.14); color:#a3b8b4; font-size:13px; font-weight:600; text-decoration:none; }
.va .mm-bottom{ display:flex; flex-direction:column; align-items:stretch; gap:16px; padding-top:32px; }
.va .mobile-menu .btn-ghost{ color:#fbfdfd; border-color:rgba(255,255,255,.2); }
.va .mobile-menu .status{ align-self:center; }

/* status pill on dark surfaces */
.va .mobile-menu .status,.va .site-footer .status{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#a3b8b4; }
.va .mobile-menu .status.on,.va .site-footer .status.on{ background:rgba(32,180,152,.14); border-color:rgba(32,180,152,.4); color:var(--brand); }

/* =====================================================================
   Footer v2: dark, glass link panel, live hours, giant wordmark
   ===================================================================== */
.va .site-footer{ background:#081616; color:#a3b8b4; border-top:0; overflow:hidden; isolation:isolate; }
.va .site-footer .mesh .m1{ top:-240px; bottom:auto; left:-200px; }
.va .site-footer .mesh .m2{ top:auto; bottom:-280px; right:-160px; }
.va .site-footer .mesh .m3{ display:block; }
.va .site-footer > .wrap{ position:relative; z-index:1; padding-block:96px 32px; }
.foot-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px; padding-bottom:48px; }
.va .foot-brand{ max-width:440px; gap:16px; }
.va .foot-brand p{ font-size:16px; line-height:26px; color:#a3b8b4; }
.foot-live{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:8px 8px 8px 16px; border-radius:var(--r-full); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.foot-live-t{ font-size:14px; line-height:20px; font-weight:500; color:#fbfdfd; }
.va .foot{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding:40px; border-radius:var(--r-xl); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.va .foot h4{ margin:0 0 24px; font-family:var(--font-body); font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5d7a75; }
.va .foot ul{ gap:16px; }
.va .foot li{ font-size:15px; line-height:24px; color:#a3b8b4; }
.va .foot li a{ color:#d5e2e0; text-decoration:none; background:linear-gradient(var(--brand),var(--brand)) 0 100%/0 1px no-repeat; transition:background-size .35s var(--ease),color .2s; }
.va .foot li a:hover{ color:#fbfdfd; background-size:100% 1px; }
.foot-social a{ display:inline-flex; align-items:center; gap:8px; }
.foot-social a .ic-xs{ color:var(--brand); transition:translate .25s var(--ease); }
.foot-social a:hover .ic-xs{ translate:2px -2px; }
.va .foot-bottom{ margin-top:32px; padding-top:0; border-top:0; align-items:center; color:#6f8a86; }
.va .foot-bottom a{ color:#a3b8b4; } .va .foot-bottom a:hover{ color:#fbfdfd; }
.to-top{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-full); border:1px solid rgba(255,255,255,.14); background:transparent; color:#fbfdfd; font-size:13px; font-weight:600; cursor:pointer; transition:background-color .2s,border-color .2s; }
.to-top:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
.to-top .ic-sm{ transition:translate .3s var(--ease); }
.to-top:hover .ic-sm{ translate:0 -3px; }
.foot-word{ position:relative; z-index:0; display:flex; justify-content:center; margin:24px 0 -.16em; font-family:var(--font-display); font-weight:800; font-size:clamp(48px,11vw,176px); line-height:1; letter-spacing:-.05em; white-space:nowrap; user-select:none; pointer-events:none; }
.foot-word span{ display:inline-block; background:linear-gradient(180deg,rgba(32,180,152,.75) 0%,rgba(32,180,152,.2) 60%,rgba(32,180,152,0) 92%); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:1000px){ .va .foot{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .va .foot{ padding:32px 24px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:40px; } .foot-live{ border-radius:var(--r-lg); padding:16px; } .va .site-footer > .wrap{ padding-top:72px; } }
.cta-band > .mesh{ -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%); }

/* =====================================================================
   Services: compact rows that stack and overlap while you scroll
   ===================================================================== */
.checks.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; width:100%; }
.checks.two li{ gap:8px; font-size:15px; line-height:24px; }
.checks.two .ck{ width:20px; height:20px; margin-top:2px; }
.checks.two .ck svg{ width:12px; height:12px; }
.svc-copy .best{ width:100%; padding:16px; border-radius:var(--r-md); background:var(--surface-soft); font-size:14px; line-height:22px; }
.svc-copy .best b{ color:var(--ink); }
.svc-copy{ gap:16px; }
.svc-copy .h2{ margin-top:8px; }
.svc-custom{ margin-top:32px; }
.svc-custom .custom{ grid-column:auto; }
.svc-rows[data-stack]{ gap:32px; }
.svc-rows.stack-on .svc-row{ position:sticky; top:var(--stick,96px); transform-origin:var(--origin,50% 0); box-shadow:0 -24px 48px -32px rgba(8,22,22,.22),var(--card-shadow); }
@media (max-width:560px){ .checks.two{ grid-template-columns:minmax(0,1fr); } }

/* =====================================================================
   Motion layer. Everything is visible at rest; motion is added on top.
   ===================================================================== */
/* split headings: words rise from a mask when the heading scrolls into view */
.anim .sw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
.anim .sw > span{ display:inline-block; translate:0 108%; transition:translate .9s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 45ms); }
.anim .shown .sw > span{ translate:0 0; }
.anim .split-fade{ opacity:0; translate:0 16px; transition:opacity .7s var(--ease) .15s,translate .7s var(--ease) .15s; }
.anim .split-fade.late{ transition-delay:.35s; }
.anim .shown .split-fade,.anim .split-fade.shown{ opacity:1; translate:0 0; }
.sec-head.split{ animation:none !important; }

/* footer wordmark letters rise one by one */
.anim .foot-word span{ translate:0 60%; opacity:0; transition:translate 1s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 40ms),opacity 1s var(--ease) calc(var(--i) * 40ms); }
.anim .foot-word.shown span{ translate:0 0; opacity:1; }

/* card hover: tilt toward the pointer with a soft teal glare */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .va .tilt{ transition:transform .6s var(--ease),box-shadow .4s var(--ease),border-color .4s; }
  .va .tilt.tilting{ transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px); box-shadow:var(--fix-shadow); border-color:var(--brand-line); transition:transform .15s linear,box-shadow .4s var(--ease),border-color .4s; }
  .va .tilt::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(32,180,152,.14),transparent 60%); opacity:0; transition:opacity .35s; }
  .va .tilt.tilting::after{ opacity:1; }
  .cover .cover-tile,.wk-shot .frame{ transition:transform .6s var(--ease); }
  .post-feature:hover .cover-tile,.post:hover .cover-tile,.wk:hover .wk-shot .frame{ transform:scale(1.06) translateY(-4px); }
  .cta-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(32,180,152,.18),transparent 60%); }
}

@media (prefers-reduced-motion:no-preference){
  /* hero colour blobs and art drift a little with the scroll (parallax) */
  @supports ((animation-timeline:scroll()) and (animation-range:0 100vh)){
    .hdr-progress{ opacity:1; animation:grow-x linear both; animation-timeline:scroll(root); }
    .phero > .mesh,.hero > .mesh{ animation:mesh-par linear both; animation-timeline:scroll(root); animation-range:0 100vh; }
    .va .hero .hero-vis{ animation:lift-a linear both; animation-timeline:scroll(root); animation-range:0 100vh; }
    .va .hero .hero-copy{ animation:lift-b linear both; animation-timeline:scroll(root); animation-range:0 100vh; }
  }
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    /* cards fold up into place, staggered across each row */
    .svc-grid,.leaks,.why,.princ,.team,.posts,.wk-grid,.steps4,.paths,.tiers{ perspective:1400px; }
    :is(.svc-grid,.leaks,.why,.princ,.team,.posts,.wk-grid,.steps4,.paths,.tiers) > .rv{ animation-name:cardin; animation-range:entry 0% entry 75%; }
    :is(.svc-grid,.leaks,.princ,.team,.posts,.wk-grid,.steps4,.tiers) > .rv:nth-child(3n+2),:is(.why,.paths) > .rv:nth-child(2n){ animation-range:entry 8% entry 83%; }
    :is(.svc-grid,.leaks,.princ,.team,.posts,.wk-grid,.steps4,.tiers) > .rv:nth-child(3n){ animation-range:entry 16% entry 91%; }
    /* stacked service cards shrink back as the next one slides over */
    .svc-rows.stack-on{ view-timeline:--stack; }
    .svc-rows.stack-on .svc-row{ animation:stack-shrink linear both; animation-timeline:--stack; animation-range:exit-crossing var(--r0) exit-crossing var(--r1); }
    .svc-rows.stack-on .svc-vis .art{ animation:art-float linear both; animation-timeline:view(); animation-range:entry 0% cover 60%; }
    /* featured project: laptop and phone move at different speeds */
    .va .case-vis{ view-timeline:--case; }
    .va .case-vis .laptop{ animation:bob 9s ease-in-out infinite,par-a linear both; animation-timeline:auto,--case; }
    .va .case-vis .mphone2{ animation:bob 7s ease-in-out -3s infinite,par-b linear both; animation-timeline:auto,--case; }
    /* the comparison column and the pricing ring settle in */
    .compare .cmp-best{ animation:best-in linear both; animation-timeline:view(); animation-range:entry 10% entry 80%; }
    .foot{ animation:cardin linear both; animation-timeline:view(); animation-range:entry 0% entry 60%; }
  }
  /* page to page: the old page lifts away, the new one rises in; the header stays put */
  @view-transition{ navigation:auto; }
  ::view-transition-old(root){ animation:.3s cubic-bezier(.4,0,1,1) both vt-out; }
  ::view-transition-new(root){ animation:.55s cubic-bezier(.2,.75,.2,1) both vt-in; }
  .site-header{ view-transition-name:site-header; }
}
@keyframes grow-x{ from{ scale:0 1; } to{ scale:1 1; } }
@keyframes mesh-par{ to{ translate:0 140px; opacity:.35; } }
@keyframes lift-a{ to{ translate:0 -72px; } }
@keyframes lift-b{ to{ translate:0 -32px; opacity:.55; } }
@keyframes cardin{ from{ opacity:0; translate:0 72px; rotate:x 12deg; scale:.96; } to{ opacity:1; translate:0 0; rotate:x 0deg; scale:1; } }
@keyframes stack-shrink{ to{ scale:var(--s,1); } }
@keyframes art-float{ from{ translate:0 40px; scale:.94; } to{ translate:0 0; scale:1; } }
@keyframes par-a{ from{ transform:translateY(40px); } to{ transform:translateY(-40px); } }
@keyframes par-b{ from{ transform:translateY(96px); } to{ transform:translateY(-64px); } }
@keyframes best-in{ from{ opacity:0; scale:.92; } to{ opacity:1; scale:1; } }
@keyframes vt-out{ to{ opacity:0; translate:0 -24px; } }
@keyframes vt-in{ from{ opacity:0; translate:0 32px; } }

/* mega menu links are inside the nav, so undo the nav link sizing */
.va .nav .mega-link{ height:auto; padding:12px; font-size:inherit; font-weight:400; color:#fbfdfd; border-radius:16px; z-index:auto; }
.va .nav .mega-cta{ height:auto; padding:24px; font-size:inherit; font-weight:400; color:#fbfdfd; border-radius:20px; display:flex; z-index:auto; }
.va .nav .mega-cta .link-arrow{ font-weight:600; color:var(--brand); }
.va .site-footer > .mesh{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%); mask-image:linear-gradient(180deg,transparent 0%,#000 45%); }

/* =====================================================================
   Header colour: white frosted glass (chosen option A)
   ===================================================================== */
.va .hdr{ background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.95); color:var(--ink); box-shadow:0 0 0 1px rgba(8,22,22,.06),0 16px 40px -24px rgba(8,22,22,.28); }
.va .site-header.scrolled .hdr{ background:rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(8,22,22,.07),0 20px 48px -24px rgba(8,22,22,.32); }
.va .nav > a,.va .nav-item > a{ color:var(--ink-muted); }
.va .nav > a:hover,.va .nav-item > a:hover,.va .nav > a.active,.va .nav-item > a.active,.va .nav a[aria-current="page"]{ color:var(--ink); }
.va .nav-ind{ background:var(--brand-soft); border-color:var(--brand-line); }
.va .text-link{ color:var(--ink); } .va .text-link:hover{ color:var(--brand-text); }
.va .menu-btn{ background:#fff; border-color:var(--line); color:var(--ink); }
.mega-in{ background:rgba(255,255,255,.92); border-color:rgba(8,22,22,.08); box-shadow:0 40px 80px -32px rgba(8,22,22,.35); }
.va .nav .mega-link{ color:var(--ink); } .mega-link small{ color:var(--ink-muted); }
.mega-link:hover,.mega-link:focus-visible{ background:var(--surface-soft); }
.mega-link .icon-tile{ background:var(--brand-soft); color:var(--brand-text); }
.va .nav .mega-link{ color:var(--ink); }
.va .mobile-menu{ background:rgba(255,255,255,.9); color:var(--ink); }
.va .mobile-menu nav a{ color:var(--ink); }
.va .mobile-menu nav a .n{ color:var(--line-strong); }
.va .mobile-menu nav a[aria-current="page"]{ color:var(--brand-text); }
.mm-svc a{ background:#fff; border-color:var(--line); color:var(--ink-muted); }
.va .mobile-menu .btn-ghost{ color:var(--ink); border-color:var(--ghost-line); }
.va .mobile-menu .status{ background:var(--surface-soft); border-color:var(--line); color:var(--ink-muted); }
.va .mobile-menu .status.on{ background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-text); }
.va .mobile-menu .menu-btn{ background:#fff; border-color:var(--line); color:var(--ink); }

/* links still waiting for a real URL (socials) stay hidden */
[data-todo]{ display:none !important; }