/* 00-tokens.css */
/* DESIGN §1: the ONLY place colour lives. Contrast ratios in specs/DESIGN.md §1.1. */
@font-face { font-family: Montserrat; src: url(/assets/fonts/montserrat-latin-wght-normal.fdc9964050.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/fonts/inter-latin-wght-normal.f052ee44c3.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'); size-adjust: 112%; ascent-override: 85%; }

:root {
  --sky: #27AAE1; --sky-hi: #5CC2EC; --blue: #2996D1; --deep: #295EA6; --deep-hi: #1E4F8F; --blue-ink: #1B6FA0;
  --grad-brand: linear-gradient(135deg, #27AAE1 0%, #295EA6 100%);
  --grad-slash: linear-gradient(180deg, #27AAE1 0%, #295EA6 100%);
  --stage: #0A0E14; --stage-2: #121A26; --card-d: #182233; --line-d: #2A3546;
  --on-d: #FFFFFF; --on-d-2: #C9D3E0; --on-d-3: #8794A8;
  --surface: #F5F7FA; --surface-2: #E9EEF4; --card-l: #FFFFFF; --line-l: #D5DDE7;
  --text: #0F1724; --text-2: #4A5668; --text-3: #5C6B80;
  --wa: #128C4A; --wa-hi: #0E7A40; --err: #B42318;
  --stage-rgb: 10 14 20; --sky-rgb: 39 170 225; --deep-rgb: 41 94 166;
  --slant: 23deg; --run: 0.424; --nav-h: 72px; --radius: 8px; --radius-sm: 4px;
  --gutter: clamp(16px, 4vw, 32px);
  --f-display: Montserrat, 'Montserrat Fallback', 'Segoe UI', Arial, sans-serif;
  --f-body: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sec-pad: clamp(64px, 9vw, 112px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* 05-base.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--stage); color: var(--text); font: 400 1.0625rem/1.68 var(--f-body); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.sec--surface :focus-visible, .sec--surface2 :focus-visible, .contact :focus-visible { outline-color: var(--deep); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--deep); color: var(--on-d); padding: 12px 18px; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; min-width: 0; }
.wrap--wide { width: min(1360px, 100% - 2 * var(--gutter)); }

/* type (DESIGN §2) */
.h1 { font-weight: 800; font-size: clamp(2.25rem, 1.45rem + 3.55vw, 4.25rem); line-height: 1.06; letter-spacing: -.025em; color: var(--on-d); }
.h1--inner { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.1; letter-spacing: -.02em; }
.h2 { font-weight: 750; font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.02em; }
.h3 { font-weight: 700; font-size: clamp(1.25rem, 1.08rem + .75vw, 1.625rem); line-height: 1.22; letter-spacing: -.01em; }
.h4 { font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.lead { font-size: clamp(1.125rem, 1.03rem + .45vw, 1.3125rem); line-height: 1.6; max-width: 56ch; }
p { max-width: 65ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 600 .9375rem/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.eyebrow::before { content: ''; width: 24px; height: 2px; background: currentColor; transform: skewX(calc(-1 * var(--slant))); flex: none; }
.eyebrow--d { color: var(--sky); }
.capfirst::first-letter { text-transform: uppercase; }

/* sections */
.sec { padding-block: var(--sec-pad); position: relative; }
.sec--surface { background: var(--surface); color: var(--text); }
.sec--surface2 { background: var(--surface-2); color: var(--text); }
.sec--stage2 { background: var(--stage-2); color: var(--on-d-2); }
.sec--stage2 .h2, .sec--stage2 .h3 { color: var(--on-d); }
.sec--surface .h2, .sec--surface2 .h2 { color: var(--text); }
.sec--cut { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); --cut: clamp(32px, 5vw, 72px); margin-top: calc(-1 * var(--cut)); padding-top: calc(var(--sec-pad) + var(--cut)); z-index: 1; }
.sh { margin-bottom: clamp(32px, 4vw, 48px); max-width: 760px; }
.sh .h2 + .lead { margin-top: 16px; }
.sh--c { text-align: center; margin-inline: auto; }
.sh--c .eyebrow { justify-content: center; }
.sh--c .lead { margin-inline: auto; }
.muted { color: var(--text-2); }

/* buttons (DESIGN §3.4) */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btns--c { justify-content: center; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 28px;
  border-radius: var(--radius-sm); border: 2px solid transparent; font: 700 1rem/1 var(--f-display); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s; }
.btn .ic { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--deep); color: var(--on-d); box-shadow: inset 0 0 0 1px rgb(var(--sky-rgb) / .9); }
.btn--primary:hover { background: var(--deep-hi); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--on-d); border-color: var(--on-d); }
.btn--ghost:hover { background: rgb(255 255 255 / .08); transform: translateY(-1px); }
.btn--onlight, .sec--surface .btn--ghost, .sec--surface2 .btn--ghost { color: var(--deep); border-color: var(--deep); }
.btn--onlight:hover, .sec--surface .btn--ghost:hover, .sec--surface2 .btn--ghost:hover { background: var(--surface-2); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.btn--full { width: 100%; }
@media (hover: hover) {
  .btn--primary::after { content: ''; position: absolute; inset: -2px auto -2px 0; width: 40%; background: rgb(255 255 255 / .12);
    transform: translateX(-160%) skewX(calc(-1 * var(--slant))); transition: transform .6s var(--ease); pointer-events: none; }
  .btn--primary:hover::after { transform: translateX(320%) skewX(calc(-1 * var(--slant))); }
}
@media (max-width: 479px) { .btns:not(.btns--keep) > .btn { width: 100%; } }
.tlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 1rem/1.2 var(--f-display); color: var(--deep); text-decoration: none; }
.tlink .ic { width: 18px; height: 18px; transition: transform .2s; }
.tlink:hover .ic { transform: translateX(4px); }
.tlink:hover span { text-decoration: underline; text-underline-offset: 4px; }
.sec--stage2 .tlink, .ag .tlink, .ctab .tlink, .f .tlink { color: var(--sky); }
.wanote { margin: 12px 0 0; font-size: .9375rem; color: var(--on-d-2); }

/* ticks list */
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ic { flex: none; width: 22px; height: 22px; margin-top: 3px; padding: 3px; border-radius: 3px; background: var(--sky); color: var(--stage); stroke-width: 2.5; }
.ticks--d li { color: var(--on-d); }

/* stars: aggregate 4.8 only — filled to 96% */
.stars { position: relative; display: inline-flex; flex: none; color: var(--sky); vertical-align: middle; }
.stars .ic { width: 18px; height: 18px; }
.stars__on, .stars__off { display: inline-flex; gap: 0; flex-wrap: nowrap; }
.stars .ic { flex: none; } /* never shrink: the 96% crop is what makes 4.8 read as 4.8 (review B1) */
.stars__off { opacity: .25; }
.stars__on { position: absolute; inset: 0 auto 0 0; width: 96%; overflow: hidden; }
.dotsep { width: 4px; height: 4px; border-radius: 1px; background: var(--sky); transform: rotate(45deg); flex: none; }

/* cards */
.card { position: relative; background: var(--card-l); border: 1px solid var(--line-l); border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); min-width: 0; transition: transform .25s var(--ease), box-shadow .25s; }
@media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgb(var(--stage-rgb) / .1); } }
.card .h3 { margin-bottom: 12px; color: var(--text); }
.card p { color: var(--text-2); }
.card--d { background: var(--card-d); border-color: var(--line-d); }
.card--d .h3 { color: var(--on-d); }
.card--d p { color: var(--on-d-2); }
@media (hover: hover) { .card--d:hover { border-color: rgb(var(--sky-rgb) / .6); box-shadow: none; } }
.card__bar { display: block; width: 40px; height: 4px; margin-bottom: 20px; background: var(--grad-brand); clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }

/* 10-chrome.css */
/* nav (DESIGN §3.4 / ARCH §1): fixed, 72px everywhere. Phones: [WhatsApp] [logo centred] [burger] */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); color: var(--on-d);
  background: rgb(var(--stage-rgb) / .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.nav.scrolled { background: rgb(var(--stage-rgb) / .96); border-bottom-color: var(--line-d); }
.nav__in { height: 100%; width: min(1360px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.nav__wa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--deep); color: var(--on-d); box-shadow: inset 0 0 0 1px rgb(var(--sky-rgb) / .9); }
.nav__wa .ic { width: 22px; height: 22px; }
.nav__logo { justify-self: center; display: flex; align-items: center; min-height: 44px; }
.nav__logo .alogo { width: auto; height: 20px; }
.nav__logo { transition: opacity .3s; }
.nav__links, .nav__quote, .nav__cta { display: none; }
.nav__act { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.burger { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 5px;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--on-d); }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s, opacity .25s; }
.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) {
  .nav__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; }
  .nav__wa, .burger { display: none; }
  .nav__logo { justify-self: start; }
  /* home: the animated hero wordmark is the one mark in the first viewport (review m13) */
  body[data-page="home"] .nav:not(.scrolled) .nav__logo { opacity: 0; }
  .nav__logo .alogo { height: 22px; }
  .nav__links { display: flex; justify-content: flex-end; gap: 32px; }
  .nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 600 .9375rem/1 var(--f-display); letter-spacing: .01em; color: var(--on-d-2); text-decoration: none; transition: color .2s; }
  .nav__links a:hover, .nav__links a[aria-current] { color: var(--on-d); }
  .nav__links a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--sky); clip-path: polygon(1px 0, 100% 0, calc(100% - 1px) 100%, 0 100%); }
  .nav__cta { display: inline-flex; }
}
@media (min-width: 1200px) { .nav__quote { display: inline-flex; } }

/* mobile overlay menu (memory: centred links, brand top-left, close top-right) */
.mmenu { position: fixed; inset: 0; z-index: 99; background: var(--stage); color: var(--on-d); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 16px) var(--gutter) 40px; overflow-y: auto; }
.mmenu:not([hidden]) { animation: mmIn .38s var(--ease) both; }
@keyframes mmIn { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.mmenu__top { position: absolute; top: 26px; left: var(--gutter); display: none; }
.mmenu__links { display: grid; justify-items: center; gap: 4px; margin-bottom: 28px; }
.mmenu__links a { display: flex; align-items: center; min-height: 56px; font: 700 clamp(1.75rem, 6vw, 2.25rem)/1 var(--f-display); color: var(--on-d); text-decoration: none; }
.mmenu__links a[aria-current] { color: var(--sky); }
.mmenu:not([hidden]) .mmenu__links a { animation: mmLink .4s var(--ease) both; }
.mmenu__links a:nth-child(2) { animation-delay: .04s !important; } .mmenu__links a:nth-child(3) { animation-delay: .08s !important; }
.mmenu__links a:nth-child(4) { animation-delay: .12s !important; } .mmenu__links a:nth-child(5) { animation-delay: .16s !important; }
@keyframes mmLink { from { opacity: 0; transform: translateY(16px); } }
.mmenu__cta { display: grid; gap: 12px; width: min(320px, 100%); text-align: center; }
.mmenu__alt a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--on-d); font-weight: 600; text-decoration: none; }
.mmenu__alt .ic { width: 18px; height: 18px; }
.mmenu__note { margin: 0; font-size: .9375rem; color: var(--on-d-3); max-width: none; }
body.menu-open { overflow: hidden; }
body.menu-open .wafloat { display: none; }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: .9375rem; color: var(--on-d-3); }
.crumbs a { color: var(--on-d-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--on-d); text-decoration: underline; }
.crumbs [aria-current] { color: var(--on-d); }

/* WhatsApp float (green: recognised by colour; white glyph 4.31:1) */
.wafloat { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: 10px;
  height: 56px; min-width: 56px; padding: 0 16px; justify-content: center; border-radius: 28px; background: var(--wa); color: var(--on-d); text-decoration: none;
  box-shadow: 0 8px 24px rgb(var(--stage-rgb) / .35); font: 700 1rem/1 var(--f-display);
  opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .3s, transform .3s var(--ease), background-color .2s; }
.wafloat.on { opacity: 1; transform: none; pointer-events: auto; }
.wafloat:hover { background: var(--wa-hi); }
.wafloat .ic { width: 28px; height: 28px; }
.wafloat__lab { display: none; }
@media (min-width: 768px) { .wafloat { padding: 0 22px 0 16px; } .wafloat__lab { display: inline; } }

/* footer */
.f { background: var(--stage); color: var(--on-d-2); padding: clamp(56px, 7vw, 88px) 0 0; border-top: 1px solid var(--line-d); }
.f__brand { display: grid; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid var(--line-d); }
.f__logo { display: flex; align-items: center; min-height: 44px; width: clamp(200px, 22vw, 300px); color: var(--on-d); }
.f__logo .alogo { width: 100%; height: auto; }
.f__tag { margin: 0; max-width: 46ch; }
.f__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px; }
@media (min-width: 640px) { .f__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .f__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.2fr); } .f__brand { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; } }
.f__h { font: 700 .9375rem/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-d); margin-bottom: 16px; }
.f__col ul { display: grid; gap: 2px; }
.f__col li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-d-2); text-decoration: none; }
.f__col a:hover { color: var(--sky-hi); }
.f__contact { display: grid; gap: 10px; align-content: start; }
.f__contact a, .f__addr { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; color: var(--on-d-2); text-decoration: none; margin: 0; }
.f__contact .ic, .f__addr .ic { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--sky); }
.f__contact small { display: block; font-size: .9375rem; color: var(--on-d-3); }
.f__hours { margin-bottom: 16px; }
.f__hours strong { color: var(--on-d); font-weight: 600; }
.f__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; color: var(--on-d-2); text-decoration: none; margin-bottom: 12px; }
.f__rating strong { color: var(--on-d); }
.f__social { display: flex; gap: 8px; }
.f__social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-d); border-radius: var(--radius-sm); color: var(--on-d-2); transition: color .2s, border-color .2s; }
.f__social a:hover { color: var(--sky); border-color: var(--sky); }
.f__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px 96px 28px 0; border-top: 1px solid var(--line-d); font-size: .9375rem; color: var(--on-d-3); }
.f__bot p { margin: 0; max-width: none; }
.f__bot a { color: var(--on-d-2); display: inline-flex; align-items: center; min-height: 44px; }
.f__bot a:hover { color: var(--sky-hi); }

/* 15-logo.css */
/* The logo (DESIGN §4, ARCH §7). Static = complete logo (no .is-live: JS off, CSS-only, reduced motion).
   Strokes "draw" by dashoffset on a pathLength=1 line inside a STATIC clip of the stroke polygon.
   full (hero/footer): 8s — build 0–2.2s, pulses + sheen, hold to 6.8s, exit 6.8–7.7s, empty 0.3s, invisible reset.
   nav: 6s — never leaves complete; dot pulse + a light sweep only. */
.alogo { color: var(--on-d); overflow: visible; }
.alogo__s { fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.alogo__l, .alogo__dot, .alogo__glow { transform-box: fill-box; }
.alogo__l { transform-origin: 50% 100%; }
.alogo__dot, .alogo__glow { transform-origin: 50% 50%; }
.alogo__glow { opacity: 0; }
.alogo__sheen { fill: var(--on-d); opacity: .55; transform: translateX(-120px); }

@media (prefers-reduced-motion: no-preference) {
  .alogo--full.is-live .alogo__s--l { animation: abSL 8s linear infinite both; }
  .alogo--full.is-live .alogo__s--r { animation: abSR 8s linear infinite both; }
  .alogo--full.is-live .alogo__l { animation: abL 8s infinite both; animation-delay: calc(var(--i) * 50ms); }
  .alogo--full.is-live .alogo__l--it { animation-name: abLit; animation-delay: calc(var(--i) * 60ms); }
  .alogo--full.is-live .alogo__dot { animation: abDot 8s infinite both; }
  .alogo--full.is-live .alogo__glow { animation: abGlow 8s infinite both; }
  .alogo--full.is-live .alogo__sheen { animation: abSheen 8s infinite both; }
  .alogo--nav.is-live .alogo__glow { animation: abGlowN 6s infinite both; }
  .alogo--nav.is-live .alogo__sheen { animation: abSheenN 6s infinite both; }
  .alogo.is-paused *, .logos-paused .alogo * { animation-play-state: paused !important; }
}
/* blue leg grows foot -> apex 0–.70s, wipes through (foot first) 7.05–7.55s */
@keyframes abSL {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  8.75% { stroke-dashoffset: 0; }
  88.1% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  94.4%, 100% { stroke-dashoffset: -1; }
}
/* white leg grows apex -> foot .45–1.05s (overlaps so the apex never looks broken), wipes 7.20–7.70s */
@keyframes abSR {
  0%, 5.6% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  13.1% { stroke-dashoffset: 0; }
  90% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  96.25%, 100% { stroke-dashoffset: -1; }
}
/* letters rise into the window .85–1.40s, exit up 6.8–7.15s; reset below the window while transparent (no flash) */
@keyframes abL {
  0%, 10.6% { transform: translateY(110px); opacity: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  17.5% { transform: translateY(0); }
  85% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  89.4% { transform: translateY(-110px); opacity: 0; }
  97% { transform: translateY(-110px); opacity: 0; }
  97.5% { transform: translateY(110px); opacity: 0; }
  100% { transform: translateY(110px); opacity: 1; }
}
@keyframes abLit {
  0%, 21.9% { transform: translateY(110px); opacity: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  27.5% { transform: translateY(0); }
  85% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  89.4% { transform: translateY(-110px); opacity: 0; }
  97% { transform: translateY(-110px); opacity: 0; }
  97.5% { transform: translateY(110px); opacity: 0; }
  100% { transform: translateY(110px); opacity: 1; }
}
/* dot pops 1.60–2.05s (overshoot 1.2), shrinks 6.95–7.25s */
@keyframes abDot {
  0%, 20% { transform: scale(0); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  23.1% { transform: scale(1.2); animation-timing-function: ease-out; }
  25.6% { transform: scale(1); }
  86.9% { transform: scale(1); animation-timing-function: ease-in; }
  90.6%, 100% { transform: scale(0); }
}
/* three pulses at 2.1 / 3.4 / 4.7s */
@keyframes abGlow {
  0%, 26.24% { transform: scale(1); opacity: 0; }
  26.25% { transform: scale(1); opacity: .8; animation-timing-function: ease-out; }
  36.25% { transform: scale(2.6); opacity: 0; }
  42.49% { transform: scale(1); opacity: 0; }
  42.5% { transform: scale(1); opacity: .8; animation-timing-function: ease-out; }
  52.5% { transform: scale(2.6); opacity: 0; }
  58.74% { transform: scale(1); opacity: 0; }
  58.75% { transform: scale(1); opacity: .8; animation-timing-function: ease-out; }
  68.75%, 100% { transform: scale(2.6); opacity: 0; }
}
/* sheen sweeps the whole mark at 4.7–5.5s (clipped to the ink, so it only exists over the logo) */
@keyframes abSheen {
  0%, 58.75% { transform: translateX(-120px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  68.75%, 100% { transform: translateX(1150px); }
}
@keyframes abGlowN {
  0% { transform: scale(1); opacity: .5; animation-timing-function: ease-out; }
  15%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes abSheenN {
  0%, 6.7% { transform: translateX(-120px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  26%, 100% { transform: translateX(1150px); }
}

/* 20-hero.css */
/* Home video hero (DESIGN §5.1). Stacking: video < band + hairline < scrim < near stroke < copy.
   The video and every ancestor stay at opacity 1 from first paint (Safari will not autoplay "invisible" media). */
.vhero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; background: var(--stage); color: var(--on-d); isolation: isolate; }
.vhero__zoom { position: absolute; inset: 0; z-index: -3; }
.vhero__media { position: absolute; inset: 0; background: var(--stage) var(--poster-sm) center/cover no-repeat; }
@media (min-width: 1024px) { .vhero__media { background-image: var(--poster-lg); } }
.vhero__video { width: 100%; height: 100%; object-fit: cover; }
.vhero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* phones: the top third is clear video; the copy (anchored bottom) sits on >= .85 (review M7) */
  background: linear-gradient(0deg, rgb(var(--stage-rgb) / .9) 0%, rgb(var(--stage-rgb) / .85) 64%, rgb(var(--stage-rgb) / .15) 100%); }
.vhero__scrim2 { position: absolute; inset: 0; z-index: -1; background: var(--stage); opacity: 0; pointer-events: none; }
.vhero__in { position: relative; padding: calc(var(--nav-h) + 24px) 0 56px; }
.vhero__copy { max-width: 620px; }
.vhero__logo { display: none; }
.vhero__logo .alogo { width: 100%; height: auto; }
.h1__kick { display: block; margin-bottom: 14px; font: 600 clamp(.9375rem, .9rem + .25vw, 1.0625rem)/1.35 var(--f-display); letter-spacing: .06em; color: var(--sky); text-wrap: balance; }
.hl { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.hl__in { display: block; }
.vhero__lead { margin: 20px 0 28px; color: var(--on-d-2); }
.vhero__note { color: var(--on-d); }
.vhero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 20px 0 0; font-size: .9375rem; color: var(--on-d); max-width: none; }
.vhero__trust strong { font-weight: 700; }
a.vhero__trust { text-decoration: none; min-height: 44px; display: inline-flex; }
a.vhero__trust:hover span { text-decoration: underline; text-underline-offset: 4px; }
.vhero__hint { display: none; }
@media (min-width: 1024px) {
  .vhero { min-height: 100svh; justify-content: center; }
  .vhero__scrim { background:
    linear-gradient(90deg, rgb(var(--stage-rgb) / .8) 0%, rgb(var(--stage-rgb) / .62) 38%, rgb(var(--stage-rgb) / .3) 62%, rgb(var(--stage-rgb) / .08) 100%),
    linear-gradient(0deg, rgb(var(--stage-rgb) / .6) 0%, rgb(var(--stage-rgb) / 0) 24%),
    linear-gradient(180deg, rgb(var(--stage-rgb) / .55) 0%, rgb(var(--stage-rgb) / 0) 18%); }
  .vhero__in { padding: calc(var(--nav-h) + 4vh) 0 96px; }
  .vhero__copy { max-width: min(620px, 50vw - var(--gutter)); }
  .vhero__logo { display: block; width: min(260px, 22vw); margin-bottom: 24px; }
  .vhero__hint { position: absolute; left: max(var(--gutter), calc((100vw - 1200px) / 2)); bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px;
    font: 600 .9375rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-d-2); text-decoration: none; }
  .vhero__hint-l { width: 2px; height: 28px; background: rgb(255 255 255 / .25); position: relative; overflow: hidden; }
  .vhero__hint-l::after { content: ''; position: absolute; inset: 0; background: var(--sky); transform-origin: top; animation: hint 1.8s var(--ease) infinite; }
}
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* A-slash motif (DESIGN §3.3): band + hairline at 23°, drawn with clip-path so transforms stay free for GSAP.
   --wipe animates 0 -> 1 on load (the band grows from its foot). */
@property --wipe { syntax: '<number>'; inherits: true; initial-value: 1; }
.slashes { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.slashes--hero { z-index: -2; }
.slashes--near { z-index: 0; display: none; }
.slash { position: absolute; inset: 0; will-change: transform; }
.slash--band { background: var(--grad-slash); opacity: .9;
  clip-path: polygon(calc(58% + 19svh * var(--wipe)) calc(45% * (1 - var(--wipe))), calc(58% + 19svh * var(--wipe) + 30vw) calc(45% * (1 - var(--wipe))), calc(58% + 30vw) 45%, 58% 45%); }
.slash--line { background: var(--on-d); opacity: .85;
  clip-path: polygon(calc(92% + 19svh * var(--wipe)) calc(45% * (1 - var(--wipe))), calc(92% + 19svh * var(--wipe) + 3px) calc(45% * (1 - var(--wipe))), calc(92% + 3px) 45%, 92% 45%); }
@media (min-width: 1024px) {
  .slash--band { clip-path: polygon(calc(56% + 42.4svh * var(--wipe)) calc(100% * (1 - var(--wipe))), calc(56% + 42.4svh * var(--wipe) + 15vw) calc(100% * (1 - var(--wipe))), calc(56% + 15vw) 100%, 56% 100%); }
  .slash--line { clip-path: polygon(calc(78% + 42.4svh * var(--wipe)) calc(100% * (1 - var(--wipe))), calc(78% + 42.4svh * var(--wipe) + 3px) calc(100% * (1 - var(--wipe))), calc(78% + 3px) 100%, 78% 100%); }
  .slashes--near { display: block; }
  .slash--near { background: var(--sky); opacity: .6;
    clip-path: polygon(calc(50% + 29.7svh * var(--wipe)) calc(30% + 70% * (1 - var(--wipe))), calc(50% + 29.7svh * var(--wipe) + 8px) calc(30% + 70% * (1 - var(--wipe))), calc(50% + 8px) 100%, 50% 100%); }
}
@media (prefers-reduced-motion: no-preference) {
  .slashes--hero .slash--band, .slashes--phero .slash--band, .slashes--nf .slash--band { animation: wipe .9s cubic-bezier(.65, 0, .35, 1) both; }
  .slashes--hero .slash--line, .slashes--phero .slash--line, .slashes--nf .slash--line { animation: wipe .8s .25s cubic-bezier(.65, 0, .35, 1) both; }
  .slash--near { animation: wipe .7s .45s cubic-bezier(.65, 0, .35, 1) both; }
}
@keyframes wipe { from { --wipe: 0; } to { --wipe: 1; } }

/* hero entrance (CSS keyframes, all devices: first-viewport content never waits on a trigger).
   The H1 lines RISE inside a clip and never fade (LCP). Everything else fades + rises 16px. */
@media (prefers-reduced-motion: no-preference) {
  .hl__in { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, .3s); }
  .phero .hl__in, .nf .hl__in { animation-delay: .25s; }
  .hin { animation: fadeUp .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0s); }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }

/* inner page heroes (DESIGN §5.10.1): graded still under a uniform scrim, band + hairline */
.phero { position: relative; min-height: 56svh; display: flex; align-items: flex-end; overflow: clip; background: var(--stage); color: var(--on-d); isolation: isolate; }
.phero--small { min-height: 44svh; }
.phero__media, .phero__zoom { position: absolute; inset: 0; z-index: -3; }
.phero__media picture, .phero__img { width: 100%; height: 100%; object-fit: cover; }
.phero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(var(--stage-rgb) / .85) 0%, rgb(var(--stage-rgb) / 0) 40%), rgb(var(--stage-rgb) / .74); }
.phero--plain .phero__shade { background: radial-gradient(120% 90% at 0% 100%, rgb(var(--deep-rgb) / .28), transparent 60%); }
.slashes--phero { z-index: -2; }
.phero__in { padding: calc(var(--nav-h) + 40px) 0 clamp(40px, 6vw, 72px); }
.phero__in .h1 { max-width: 20ch; }
.phero__lead { margin: 18px 0 0; color: var(--on-d-2); }
.phero .btns { margin-top: 28px; }
@media (min-width: 1024px) {
  .phero { min-height: 64svh; }
  .phero--small { min-height: 48svh; }
}

/* the scroll hint only shows where the hero copy leaves room for it (review m15) */
@media (max-height: 820px) { .vhero__hint { display: none !important; } }

/* 30-sections.css */
/* trust strip (static: never revealed, facts never count up) */
.trust { background: var(--stage-2); color: var(--on-d); padding-block: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line-d); }
.trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; text-align: center; }
.trust__list li { display: grid; gap: 6px; justify-items: center; align-content: start; min-width: 0; }
.trust__v { font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem)/1 var(--f-display); letter-spacing: -.02em; }
.trust__v small { font-size: max(.5em, 15px); color: var(--on-d-2); font-weight: 700; }
.trust__k { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: .9375rem; color: var(--on-d-2); }
@media (min-width: 900px) {
  .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust__list li + li { border-left: 1px solid var(--line-d); }
}

/* agreements (DESIGN §5.3). Static = stacked cards (phones, short screens, reduced motion, JS off).
   .ag--scene (desktop, set by anim.js) = 300vh track + CSS sticky stage + absolutely stacked panels. */
.ag { background: var(--stage); color: var(--on-d-2); padding-block: var(--sec-pad); }
.ag__head { margin-bottom: 32px; }
.ag__head .h2 { color: var(--on-d); }
.ag__rail { display: none; }
.ag__panels { display: grid; gap: 24px; }
.ag__panel { display: grid; gap: 0; background: var(--card-d); border: 1px solid var(--line-d); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.ag__media { order: -1; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); }
.ag__img { width: 100%; height: 100%; object-fit: cover; }
.ag__copy { padding: 24px clamp(20px, 3vw, 32px) 28px; min-width: 0; }
.ag__n { margin: 0 0 8px; font: 600 .9375rem/1 var(--f-display); letter-spacing: .14em; color: var(--on-d-3); }
.ag__n span { color: var(--sky); }
.ag__copy .h3 { color: var(--on-d); margin-bottom: 12px; }
.ag__body { color: var(--on-d-2); }
.ag__copy .ticks { margin: 18px 0 22px; }
.ag__btns { gap: 8px 20px; }
.ag__edge { display: none; }
@media (min-width: 768px) {
  .ag__panel { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .ag__media { order: 0; aspect-ratio: auto; min-height: 100%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
}
.ag--scene { padding-block: 0; }
.ag--scene .ag__track { height: 300vh; height: 300svh; position: relative; }
.ag--scene .ag__stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); overflow: clip; display: flex; flex-direction: column; padding-top: clamp(16px, 3vh, 32px); }
.ag--scene .ag__head { flex: none; margin-bottom: clamp(12px, 2.5vh, 24px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
.ag--scene .ag__head .eyebrow { grid-column: 1 / -1; }
.ag--scene .ag__rail { display: flex; gap: 12px; padding-bottom: 8px; }
.ag__rail li { display: grid; gap: 6px; font: 600 .9375rem/1 var(--f-display); color: var(--on-d-3); }
.ag__tick { display: block; width: 72px; height: 3px; background: var(--line-d); overflow: hidden; }
.ag__tick i { display: block; height: 100%; background: var(--sky); transform-origin: left; }
.ag--scene .ag__panels { position: relative; flex: 1; min-height: 0; margin-bottom: clamp(16px, 3vh, 32px); display: block; overflow: clip; }
@media (max-height: 800px) { .ag--scene .ag__copy .ticks { margin: 10px 0 14px; } }
.ag--scene .ag__panel { position: absolute; inset: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--stage); border: 0; border-radius: 0; }
.ag--scene .ag__copy { padding: 0; }
.ag--scene .ag__body { font-size: 1rem; line-height: 1.62; }
.ag--scene .ag__copy .ticks { margin: 14px 0 18px; gap: 8px; }
.ag--scene .ag__media { height: 100%; max-height: 460px; align-self: center; clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); border-radius: 0; }
.ag--scene .ag__img { height: 108%; }
.ag--scene .ag__edge { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 5; pointer-events: none; }
.ag__edge-in { position: absolute; inset: 0 auto 0 -9px; width: 60px; transform: skewX(calc(-1 * var(--slant))); }
.ag__edge-band { position: absolute; inset: 0 auto 0 0; width: 18px; background: var(--grad-slash); }
.ag__edge-line { position: absolute; inset: 0 auto 0 42px; width: 3px; background: var(--on-d); }

/* services */
.svcs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1024px) { .svcs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.svc { display: flex; flex-direction: column; }
.svc .tlink { margin-top: auto; }
.svc__ic { width: 112px; height: 80px; display: grid; place-items: center; margin-bottom: 24px; background: var(--surface-2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.svi { width: 84px; height: 56px; }
.svi__d { fill: var(--text); }
.svi__b { fill: var(--deep); }
.svcs__grid--img .card--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) { .card--img:hover .card__media img { transform: scale(1.05); } }
.card__body { padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; flex: 1; }
.card__body .btn { margin-top: auto; align-self: flex-start; }
.caps { margin-top: clamp(40px, 5vw, 64px); }
.caps .h4 { margin-bottom: 16px; color: var(--text); }
.caps__list { display: flex; flex-wrap: wrap; gap: 10px; }
.caps__list li { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; background: var(--card-l); border: 1px solid var(--line-l); border-radius: 20px; font-weight: 500; font-size: .9375rem; color: var(--text); }

/* about teaser */
.about-t { overflow: clip; }
.about-t__grid { display: grid; gap: 32px; }
.about-t__media { position: relative; margin: 0; }
.about-t__mask { aspect-ratio: 16 / 10; overflow: hidden; }
.about-t__img { width: 100%; height: 100%; object-fit: cover; }
.about-t__edge { display: none; }
.about-t__txt { padding-inline: var(--gutter); max-width: 620px; }
.about-t__txt p { color: var(--on-d-2); margin-top: 16px; }
.about-t__txt .ticks { margin: 20px 0 16px; }
@media (min-width: 1024px) {
  .about-t__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-right: max(var(--gutter), calc((100vw - 1200px) / 2)); }
  .about-t__mask { aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
  .about-t__img { height: 118%; margin-top: -9%; }
  .about-t__edge { display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 22%; pointer-events: none;
    background: linear-gradient(var(--on-d), var(--on-d)) no-repeat; background-size: 4px 100%;
    clip-path: polygon(calc(100% - 4px) 0, 100% 0, 4px 100%, 0 100%); transform-origin: right; }
  .about-t__txt { padding-inline: 0; }
}

/* how we work */
.how__wrap { position: relative; }
.how__line { display: none; }
.how__steps { display: grid; gap: 28px; position: relative; padding-left: 40px; }
.how__steps::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; background: var(--deep); }
.how__step { position: relative; }
.how__node { position: absolute; left: -40px; top: 2px; width: 24px; height: 24px; background: var(--grad-brand); }
.how__n { display: block; font: 700 .9375rem/1 var(--f-display); letter-spacing: .14em; color: var(--blue-ink); margin-bottom: 8px; }
.how__step .h4 { color: var(--text); margin-bottom: 8px; }
.how__step p { color: var(--text-2); margin: 0; }
@media (min-width: 1024px) {
  .how__line { display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 40px; overflow: visible; }
  .how__line path { fill: none; stroke: var(--deep); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 0; }
  .how__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 64px 0 0; }
  .how__steps::before { display: none; }
  .how__node { left: 0; top: -52px; }
  .how--live .how__step .how__node { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  .how--live .how__step > :not(.how__node) { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .how--live .how__step.is-on .how__node { transform: none; }
  .how--live .how__step.is-on > :not(.how__node) { opacity: 1; transform: none; }
}

/* reviews */
.agg { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 24px; padding: 16px 24px; background: var(--card-l); border: 1px solid var(--line-l); border-radius: var(--radius); }
.agg__v { display: flex; align-items: baseline; gap: 4px; margin: 0; font-family: var(--f-display); color: var(--text); }
.agg__n { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.agg__of { font-weight: 700; color: var(--text-3); }
.agg__meta { display: grid; gap: 4px; justify-items: start; text-align: left; }
.agg .stars { color: var(--deep); }
.agg__b { margin: 0; font-size: .9375rem; color: var(--text-2); }
.revs__grid { display: grid; gap: 20px; }
.revs__side { display: grid; gap: 20px; }
.rev { margin: 0; position: relative; background: var(--card-l); border: 1px solid var(--line-l); border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; min-width: 0; }
.rev__t { font-style: italic; color: var(--text); margin-bottom: 20px; }
.rev--big { align-self: start; background: var(--stage); border-color: var(--stage); color: var(--on-d); }
.rev--big .rev__t { color: var(--on-d); font-size: clamp(1.125rem, 1.05rem + .45vw, 1.375rem); line-height: 1.55; }
.rev__q { color: var(--sky); margin-bottom: 12px; }
.rev__q .ic { width: 44px; height: 44px; }
.rev__t--clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rev__t--clamp.is-open { display: block; -webkit-line-clamp: unset; }
.rev__more { align-self: flex-start; min-height: 44px; margin: -8px 0 16px; padding: 0; background: none; border: 0; color: var(--sky); font: 700 1rem/1 var(--f-display); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rev__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rev__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--deep); font: 700 1rem/1 var(--f-display); flex: none; }
.rev cite { display: grid; font-style: normal; }
.rev__n { font-weight: 700; color: var(--text); }
.rev__r { font-size: .9375rem; color: var(--text-3); }
.rev--big .rev__n { color: var(--on-d); }
.rev--big .rev__r { color: var(--on-d-3); }
@media (min-width: 1024px) {
  .revs__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
  .rev__t--clamp { display: block; -webkit-line-clamp: unset; }
  .rev__more { display: none; }
}

/* CTA banner */
.ctab { position: relative; overflow: clip; background: var(--stage); color: var(--on-d); padding-block: clamp(80px, 11vw, 140px); text-align: center; clip-path: polygon(0 clamp(32px, 5vw, 72px), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * clamp(32px, 5vw, 72px)); z-index: 1; }
.ctab__sweep { position: absolute; inset: 0; pointer-events: none; }
.ctab__band { position: absolute; top: 0; bottom: 0; right: 0; width: 30vw; background: var(--grad-slash); opacity: .9; clip-path: polygon(42% 0, 100% 0, 58% 100%, 0 100%); }
.ctab__line { position: absolute; top: 0; bottom: 0; right: -4vw; width: 30vw; background: var(--on-d); opacity: .7; clip-path: polygon(calc(42% + 22px) 0, calc(42% + 25px) 0, calc(25px) 100%, 22px 100%); }
.ctab__in { position: relative; max-width: 820px; }
.ctab__in::before { content: ''; position: absolute; inset: -40px -24px; background: rgb(var(--stage-rgb) / .78); z-index: -1; border-radius: var(--radius); }
.ctab .lead { margin: 18px auto 32px; color: var(--on-d-2); }
.ctab__alt { margin: 24px auto 0; font-size: .9375rem; color: var(--on-d-2); }
.ctab__alt a { color: var(--on-d); display: inline-flex; min-height: 44px; align-items: center; }
/* phones: the sweep is static; an opaque copy box keeps the band + hairline from striking through text (review M4) */
@media (max-width: 1023px) { .ctab__in::before { background: var(--stage); inset: -24px -12px; } }
@media (min-width: 1024px) {
  .ctab__band { left: 0; right: auto; width: 18vw; }
  .ctab__line { left: 6vw; right: auto; width: 18vw; }
}

/* services page: agreement chapters */
.chap { display: grid; gap: 28px; padding-block: clamp(32px, 5vw, 64px); border-top: 1px solid var(--line-l); }
.chap:first-of-type { border-top: 0; padding-top: 0; }
.chap__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); }
.chap__img { width: 100%; height: 114%; object-fit: cover; margin-top: -7%; }
.chap__txt p { color: var(--text-2); }
.h2--chap { margin-bottom: 16px; }
.chap__bh { margin: 24px 0 12px; color: var(--text); }
.bens { display: grid; gap: 10px; margin-bottom: 28px; }
.bens li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--card-l); border: 1px solid var(--line-l); border-radius: var(--radius); font-weight: 600; color: var(--text); }
.bens .ic { flex: none; width: 22px; height: 22px; color: var(--deep); stroke-width: 2.5; }
@media (min-width: 1024px) {
  .chap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .chap__media { aspect-ratio: 4 / 3; border-radius: 0; clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); }
  .chap--flip .chap__media { order: 2; }
}

/* parallax bands */
.band { position: relative; min-height: 40vh; display: grid; place-items: center; overflow: clip; background: var(--stage); color: var(--on-d); isolation: isolate; }
.band__media { position: absolute; inset: -10% 0; z-index: -2; }
.band__img { width: 100%; height: 100%; object-fit: cover; }
.band__shade { position: absolute; inset: 0; z-index: -1; background: rgb(var(--stage-rgb) / .6); }
.band__line { margin: 0 auto; text-align: center; font: 800 clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem)/1.1 var(--f-display); letter-spacing: -.02em; max-width: none; }
@media (min-width: 1024px) { .band { min-height: 56vh; } }
.pband { background: var(--stage-2); padding-block: 0 var(--sec-pad); }
.pband__mask { height: clamp(220px, 32vw, 460px); overflow: hidden; }
.pband__img { width: 100%; height: 120%; object-fit: cover; margin-top: -10%; }
@media (min-width: 1024px) { .pband__mask { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); width: min(1360px, 100% - 2 * var(--gutter)); margin-inline: auto; } }

/* about page */
.story__grid { display: grid; gap: 24px; }
.story__big { margin: 0; font: 800 clamp(4rem, 10vw, 9rem)/.92 var(--f-display); letter-spacing: -.04em; color: var(--deep); max-width: none; }
.story__txt p { color: var(--text-2); }
.story__txt .lead { color: var(--text); margin-top: 16px; }
@media (min-width: 1024px) { .story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.what { display: grid; gap: 20px; }
@media (min-width: 768px) { .what { grid-template-columns: repeat(2, minmax(0, 1fr)); } .what__wide { grid-column: 1 / -1; } }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-d); }
.facts li { display: grid; gap: 4px; }
.facts strong { font: 800 1.375rem/1.2 var(--f-display); color: var(--on-d); }
.facts li > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9375rem; color: var(--on-d-2); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clients__logos { display: flex; flex-wrap: wrap; gap: 16px; }
.clients__logos li { display: grid; place-items: center; width: 200px; height: 140px; background: var(--card-l); border: 1px solid var(--line-l); border-radius: var(--radius); }
.clients__logos img { width: 100px; height: 100px; }

/* single quote */
.quote1__in { position: relative; max-width: 860px; text-align: center; }
.quote1__q { display: inline-block; color: var(--deep); margin-bottom: 8px; }
.quote1__q .ic { width: 44px; height: 44px; }
.quote1 blockquote { margin: 0; }
.quote1 blockquote p { margin: 0 auto 16px; font: italic 400 clamp(1.125rem, 1.05rem + .45vw, 1.375rem)/1.6 var(--f-body); color: var(--text); }
.quote1 cite { font-style: normal; font-weight: 600; color: var(--text-2); }

/* 60-contact.css */
.contact__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } .cpanel { order: 2; position: sticky; top: calc(var(--nav-h) + 24px); } }
.cpanel { background: var(--stage); color: var(--on-d-2); border-radius: var(--radius); padding: clamp(24px, 3vw, 32px); min-width: 0; }
.cpanel__wa { padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--line-d); }
.cpanel__k { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 .9375rem/1.3 var(--f-display); color: var(--sky); }
.cpanel__k .ic { width: 20px; height: 20px; }
.cpanel__big { display: inline-block; font: 800 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1.1 var(--f-display); color: var(--on-d); text-decoration: none; margin-bottom: 4px; }
.cpanel__note { color: var(--on-d-2); font-size: .9375rem; margin-bottom: 16px; }
.cpanel__list { margin: 0; display: grid; }
.cpanel__list > div { padding: 16px 0; border-bottom: 1px solid var(--line-d); }
.cpanel__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cpanel__list dt { display: flex; align-items: center; gap: 10px; font: 600 .9375rem/1.3 var(--f-display); color: var(--on-d-3); margin-bottom: 6px; }
.cpanel__list dt .ic { width: 18px; height: 18px; color: var(--sky); }
.cpanel__list dd { margin: 0; color: var(--on-d); }
.cpanel__list dd a { color: var(--on-d); display: inline-flex; min-height: 44px; align-items: center; }
.cpanel__list strong { font-weight: 600; color: var(--on-d); }

.qform-wrap { min-width: 0; }
.qform-wrap .h2 { color: var(--text); }
.qform__intro { color: var(--text-2); margin: 12px 0 24px; }
.fgrid { display: grid; gap: 16px; }
@media (min-width: 640px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 600 .9375rem/1.3 var(--f-display); color: var(--text); }
.opt { font-weight: 400; color: var(--text-3); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; background: var(--card-l); border: 1px solid var(--line-l); border-radius: var(--radius-sm); color: var(--text); font-size: 1rem; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--deep); outline-offset: 0; border-color: var(--deep); }
.field [aria-invalid="true"] { border-color: var(--err); }
.ferr { margin: 0; font-size: .9375rem; color: var(--err); }
.qform__hint { margin: 12px 0 20px; font-size: .9375rem; color: var(--text-3); }
.qform__note { margin: 14px 0 0; font-size: .9375rem; color: var(--text-3); }
.fstatus { margin-top: 24px; padding: 20px; background: var(--card-l); border: 1px solid var(--line-l); border-left: 4px solid var(--deep); border-radius: var(--radius); }
.fstatus p { color: var(--text); }
.fstatus textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--line-l); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: .9375rem; }
.fstatus__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0 0; }

.map__ph { position: relative; min-height: 360px; display: flex; align-items: flex-end; overflow: clip; background: var(--stage-2); color: var(--on-d-2); border-radius: var(--radius); isolation: isolate; }
.map__slash { position: absolute; inset: 0; z-index: -1; background: var(--grad-slash); opacity: .55; clip-path: polygon(62% 0, 82% 0, 62% 100%, 42% 100%); }
.map__txt { padding: clamp(24px, 4vw, 48px); max-width: 640px; }
.map__txt .h3 { display: flex; align-items: center; gap: 10px; color: var(--on-d); margin-bottom: 8px; }
.map__txt .h3 .ic { width: 24px; height: 24px; color: var(--sky); }
.map__txt p { color: var(--on-d-2); }
.map__ph.is-loaded { display: block; min-height: 0; }
.map__frame { display: block; width: 100%; height: 420px; border: 0; }
.map__ph.is-loaded .map__slash { display: none; }
/* the map panel is dark inside a light section: its ghost button must use the on-dark treatment */
.map__ph .btn--ghost { color: var(--on-d); border-color: var(--on-d); }
.map__ph .btn--ghost:hover { background: rgb(255 255 255 / .08); }

/* 70-legal.css */
.legal__grid { display: grid; gap: 32px; }
.legal__toc { display: none; }
.legal__body { max-width: 720px; min-width: 0; }
.legal__body .h3 { color: var(--text); margin: 32px 0 12px; }
.legal__body .h3:first-child { margin-top: 0; }
.legal__body p { color: var(--text-2); }
.legal__body a:not(.btn) { color: var(--deep); }
.legal__card { margin-top: 40px; padding: 24px; background: var(--card-l); border: 1px solid var(--line-l); border-radius: var(--radius); }
.legal__card .h4 { color: var(--text); margin-bottom: 12px; }
@media (min-width: 1024px) {
  .legal__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 64px; }
  .legal__toc { display: block; position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
  .legal__tk { font: 600 .9375rem/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
  .legal__toc ol { display: grid; gap: 4px; }
  .legal__toc a { display: inline-flex; min-height: 40px; align-items: center; color: var(--text-2); text-decoration: none; }
  .legal__toc a:hover { color: var(--deep); }
}

.nf { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip; background: var(--stage); color: var(--on-d); isolation: isolate; }
.slashes--nf { z-index: -1; }
.nf__in { padding: calc(var(--nav-h) + 40px) 0 64px; }
.nf__code { margin: 0 0 8px; font: 800 clamp(6rem, 22vw, 16rem)/.9 var(--f-display); letter-spacing: -.04em; color: var(--on-d); max-width: none; }
.nf .lead { color: var(--on-d-2); margin: 16px 0 28px; }
.nf__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.nf__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky); font-weight: 600; }

/* 90-motion.css */
/* Hidden states exist ONLY under html.gsap-ready (added by the head script on desktop, removed by three independent
   failsafes) and only until anim.js stamps [data-done]. Removing the class shows everything: fail-open. */
html.gsap-ready [data-reveal]:not([data-done]),
html.gsap-ready [data-card]:not([data-done]),
html.gsap-ready [data-stagger] > li:not([data-done]),
html.gsap-ready .sec .eyebrow:not([data-done]) { opacity: 0; }
html.gsap-ready [data-clip]:not([data-done]),
html.gsap-ready [data-wipe]:not([data-done]) { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }

/* phones/tablets (< 1024, no GSAP): opacity-only fades on scroll where the browser supports view timelines.
   No transforms (horizontal overflow + jank were why client sites have no mobile motion). */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal], [data-card], [data-stagger] > li { animation: abFade linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes abFade { from { opacity: .25; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}