/* The front door (/) and the service funnels (/services/...). Built by scripts/build-hub.mjs.
   Tokens follow the consulting site (consulting/assets/site-v2): Inter Tight / Inter, ink #10213a,
   ink blue #2559df, the spectrum behind the WebGL hero field (consulting/assets/site-v2/full-site/hero.js). */

:root {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --ink: #101114;
  --ink-2: #23262c;
  --muted: #62666f;
  --dim: #898e98;
  --line: rgba(16, 33, 58, .09);
  --line-2: rgba(16, 33, 58, .16);
  --blue: #101114;
  --blue-deep: #101114;
  --cyan: #101114;
  --glass: rgba(255, 255, 255, .68);
  --glass-strong: rgba(255, 255, 255, .86);
  --shadow-1: 0 1px 2px rgba(16, 17, 20, .04), 0 8px 24px -12px rgba(16, 17, 20, .18);
  --shadow-2: 0 2px 6px rgba(16, 17, 20, .05), 0 30px 60px -28px rgba(16, 17, 20, .38);
  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1160px;
  --gutter: clamp(18px, 4vw, 36px);
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; }
.skip:focus { top: 12px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------------------------------- nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; height: 68px; padding: 0 var(--gutter); transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s; }
.nav.is-scrolled { background: rgba(247, 249, 252, .78); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--font-display); letter-spacing: -.03em; }
.brand img { border-radius: 8px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 8px 12px; border-radius: 999px; color: var(--ink-2); font-size: 14px; transition: background .2s, color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: rgba(255, 255, 255, .7); color: var(--ink); }
@media (max-width: 640px) { .nav-links { display: none; } .nav .btn-sm { margin-left: auto; } }

/* --------------------------------------------------------------------------------------- buttons */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 22px; border: 0; border-radius: 999px; font: 500 15px/1 var(--font-body); letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.btn .arrow { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 24px -12px rgba(16, 17, 20, .7); }
.btn-dark:hover { background: #2b3038; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 16px 30px -14px rgba(16, 17, 20, .8); }
.btn-glass { background: var(--glass); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8) inset, var(--shadow-1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-glass:hover { background: var(--glass-strong); }
.btn-ghost { background: transparent; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2) inset; }
.btn-ghost:hover { background: rgba(255, 255, 255, .7); }
.btn-sm { --h: 40px; padding: 0 16px; font-size: 14px; }

/* ------------------------------------------------------------------------------------------ hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 148px var(--gutter) 96px; }
.hero .field-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.hero.field-fallback { background: radial-gradient(ellipse at 0% 92%, #7198ed, transparent 58%), radial-gradient(ellipse at 100% 68%, #9ecaf5, transparent 52%), #f9fbfd; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.hero .video { height: 0; }
.hero-copy { max-width: var(--wrap); margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .85) inset, 0 4px 14px -8px rgba(16, 17, 20, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink-2); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; }
.eyebrow a:hover { color: var(--blue); }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.058em; }
.grad { color: inherit; }
.lede { max-width: 620px; margin-top: 26px; color: var(--ink-2); font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.6; }
.motion-toggle { display: none; position: absolute; right: var(--gutter); bottom: 24px; padding: 6px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--muted); font: 500 11.5px/1 var(--font-body); cursor: pointer; backdrop-filter: blur(8px); }
.motion-toggle:hover { color: var(--ink); }

/* hub choices */
.hero-hub .hero-copy { text-align: left; }
.choices { position: relative; max-width: var(--wrap); margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hero-short { padding-bottom: 120px; }
@media (max-width: 1080px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } .hero { padding-top: 120px; } }

.card { position: relative; display: flex; flex-direction: column; min-height: 228px; padding: 20px 20px 18px; border-radius: var(--radius); background: var(--glass); box-shadow: 0 0 0 1px rgba(255, 255, 255, .75) inset, var(--shadow-1); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .2) 40%, rgba(16, 17, 20, .22)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .9; }
a.card:hover, a.card:focus-visible { transform: translateY(-4px); background: var(--glass-strong); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset, var(--shadow-2); }
.card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--blue); background: linear-gradient(160deg, #fff, #f1f3f6); box-shadow: 0 0 0 1px rgba(16, 17, 20, .12) inset, 0 6px 16px -10px rgba(16, 17, 20, .55); transition: color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.card-icon .ic { width: 24px; height: 24px; }
a.card:hover .card-icon { color: #fff; background: linear-gradient(160deg, #2b3038, #101114); box-shadow: 0 10px 22px -10px rgba(16, 17, 20, .85); }
.card-tag { margin-top: 18px; color: var(--dim); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card-title { margin-top: 6px; font: 500 19px/1.2 var(--font-display); letter-spacing: -.03em; }
.card-line { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.card-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--ink); font-size: 13.5px; font-weight: 500; }
.card-go .arrow { width: 14px; height: 14px; transition: transform .35s var(--ease); }
a.card:hover .card-go .arrow { transform: translateX(4px); }
.card-go.soon { color: var(--dim); }
.card.is-soon { opacity: .78; }
.card.is-soon .card-icon { color: var(--dim); background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--line) inset; }

/* funnel hero */
.hero-funnel { padding-bottom: 120px; }
.hero-grid { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 48px; align-items: center; }
.hero-funnel h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.proof { display: flex; align-items: flex-start; gap: 8px; max-width: 560px; margin-top: 22px; color: var(--muted); font-size: 13.5px; }
.proof svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--blue); }
.hero-mark { position: relative; justify-self: center; display: grid; place-items: center; width: min(320px, 72vw); aspect-ratio: 1; }
.mark-ring { display: none; position: absolute; inset: 0; border-radius: 34%; background: conic-gradient(from 0deg, rgba(16, 17, 20, .0), rgba(16, 17, 20, .55), rgba(16, 17, 20, .4), rgba(16, 17, 20, 0) 70%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); animation: spin 14s linear infinite; }
.mark-icon { display: grid; place-items: center; width: 72%; aspect-ratio: 1; border-radius: 30%; color: var(--blue); background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset, 0 40px 80px -40px rgba(16, 17, 20, .55); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); }
.mark-icon .ic { width: 44%; height: 44%; stroke-width: 1.3; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-mark { display: none; } }

/* ------------------------------------------------------------------------------------- sections */
.section { padding: 104px 0; }
.section-tint { background: linear-gradient(180deg, #eef3fb, var(--bg)); }
.kicker { color: var(--blue); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.section-title { margin-top: 10px; max-width: 760px; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.04; letter-spacing: -.045em; }
.gets { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.get { padding: 24px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.get:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(16, 17, 20, .18) inset, var(--shadow-2); }
.get-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--blue); background: #f1f3f6; }
.get-check svg { width: 15px; height: 15px; }
.get h3 { margin-top: 16px; font-size: 18px; letter-spacing: -.025em; }
.get p { margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 900px) { .gets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gets { grid-template-columns: 1fr; } }

.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.stepcard { position: relative; padding: 26px 24px; border-radius: var(--radius); background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px var(--line) inset; }
.num { display: inline-block; color: var(--dim); font: 500 15px/1 var(--font-display); letter-spacing: -.02em; }
.stepcard h3, .pillar h3 { margin-top: 18px; font-size: 21px; letter-spacing: -.03em; }
.stepcard p, .pillar p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.links a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 500; font-size: 15px; }
.links .arrow { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.links a:hover .arrow { transform: translateX(3px); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

.band { padding: 96px 0 40px; }
.pillars { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pillar { padding: 26px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-1); }
@media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } }

.cta-band { padding: 40px 0 110px; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 40px 44px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 100%, rgba(113, 152, 237, .45), transparent 55%), radial-gradient(90% 120% at 100% 0%, rgba(158, 202, 245, .55), transparent 60%), #fff; box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-2); }
.cta-inner h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.04em; }
.cta-inner p { margin-top: 8px; max-width: 520px; color: var(--ink-2); }
@media (max-width: 760px) { .cta-inner { flex-direction: column; align-items: flex-start; padding: 30px 26px; } }

/* ------------------------------------------------------------------------------------ the funnel */
.start { padding-top: 112px; }
.start-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.start-copy { position: sticky; top: 110px; }
.start-copy > p:not(.kicker) { margin-top: 18px; max-width: 420px; color: var(--muted); }
.assure { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); font-size: 14.5px; }
.assure li { display: flex; align-items: center; gap: 10px; }
.assure svg { width: 16px; height: 16px; color: var(--blue); }
.form-card { position: relative; padding: 30px; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-2); }
@media (max-width: 900px) { .start-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .start-copy { position: static; } .form-card { padding: 22px; } }

.progress { height: 4px; border-radius: 999px; background: #edf1f8; overflow: hidden; }
.progress span { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--ink); transition: width .6s var(--ease); }
.step-count { margin-top: 12px; color: var(--dim); font-size: 12.5px; font-weight: 500; }
.step { display: none; margin: 0; padding: 0; border: 0; min-width: 0; }
.step.is-active { display: block; animation: stepIn .5s var(--ease) both; }
.step.is-back { animation-name: stepBack; }
legend { display: block; margin: 14px 0 18px; padding: 0; font: 500 23px/1.2 var(--font-display); letter-spacing: -.035em; }
legend .hint { display: block; margin-top: 4px; color: var(--dim); font: 400 13.5px/1.4 var(--font-body); letter-spacing: 0; }
.field { display: grid; gap: 8px; margin-top: 18px; }
.field > span { color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.field em { color: var(--dim); font-style: normal; font-weight: 400; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-2 .field { margin-top: 18px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 0; } }
input, select, textarea { width: 100%; min-width: 0; padding: 13px 14px; border: 0; border-radius: var(--radius-sm); background: #f5f7fb; box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink); font: 400 15.5px/1.4 var(--font-body); transition: box-shadow .2s, background .2s; appearance: none; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235d6b82' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea { resize: vertical; min-height: 92px; }
input:hover, select:hover, textarea:hover { background: #f0f3f9; }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; box-shadow: 0 0 0 1.5px var(--blue) inset, 0 0 0 4px rgba(16, 17, 20, .12); }
.is-invalid { box-shadow: 0 0 0 1.5px #d6455d inset !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #f5f7fb; box-shadow: 0 0 0 1px var(--line) inset; color: var(--ink-2); font-size: 14px; transition: background .2s, box-shadow .2s, color .2s, transform .2s var(--ease); }
.chip:hover span { background: #eef2fa; }
.chip input:checked + span { background: var(--ink); box-shadow: none; color: #fff; transform: scale(1.02); }
.chip input:focus-visible + span { box-shadow: 0 0 0 2px var(--blue); }
.chips.is-invalid span { box-shadow: 0 0 0 1px #d6455d inset; }
.chips.is-invalid { box-shadow: none !important; }
.form-error { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: #fff1f3; color: #a3263c; font-size: 14px; }
.form-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.form-nav [data-next], .form-nav [data-submit] { margin-left: auto; }
.form-nav .btn[disabled] { opacity: .6; cursor: progress; }
.fine { margin-top: 14px; color: var(--dim); font-size: 12.5px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done { padding: 12px 4px; text-align: left; animation: stepIn .6s var(--ease) both; }
.form-done:focus { outline: none; }
.done-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: linear-gradient(160deg, #2b3038, #101114); box-shadow: 0 14px 30px -14px rgba(16, 17, 20, .9); animation: pop .7s var(--ease-spring) both; }
.done-mark svg { width: 24px; height: 24px; stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw .6s .25s var(--ease) forwards; }
.form-done h3 { margin-top: 20px; font-size: 28px; letter-spacing: -.04em; }
.form-done p { margin-top: 10px; color: var(--muted); }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.faq-wrap .faq { max-width: 860px; }
.faq { margin-top: 30px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; list-style: none; cursor: pointer; font: 500 18px/1.35 var(--font-display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: 14px; height: 14px; }
.plus::before, .plus::after { content: ""; position: absolute; inset: 6px 0 auto; height: 1.6px; border-radius: 2px; background: var(--ink-2); transition: transform .35s var(--ease); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }
.faq details p { padding: 0 2px 22px; max-width: 680px; color: var(--muted); animation: fadeDown .45s var(--ease) both; }

/* ---------------------------------------------------------------------------------------- footer */
.footer { padding: 64px 0 36px; border-top: 1px solid var(--line); background: #fff; }
.footer-inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin-top: 14px; max-width: 360px; color: var(--muted); font-size: 14px; }
.footer-brand a:not(.brand):hover, .footer-col a:hover, .footer-base a:hover { color: var(--blue); }
.footer-col { display: grid; align-content: start; gap: 10px; font-size: 14px; color: var(--ink-2); }
.footer-col h2 { margin-bottom: 6px; color: var(--dim); font: 600 11.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.footer-base { max-width: var(--wrap); margin: 44px auto 0; padding: 22px var(--gutter) 0; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } .footer-base { flex-direction: column; } }

/* --------------------------------------------------------------------------------- reveal motion */
.js [data-reveal] { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js .card[data-reveal].is-in { transition: opacity .8s var(--ease), transform .45s var(--ease), filter .8s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease); transition-delay: calc(var(--i, 0) * 70ms), 0s, calc(var(--i, 0) * 70ms), 0s, 0s; }

/* Above the fold the entrance is a CSS animation, not a scroll transition: it runs on first paint and
   always finishes, even if the observer is late or never fires. */
.js .hero [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; animation: rise 1s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.js .hero .card[data-reveal] { transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease); }
.js .hero a.card[data-reveal]:hover { transform: translateY(-4px); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ------------------------------------------------------------------------------------ icon motion
   Each icon plays once as it comes into view (.is-in on the card or section), again on hover/focus. */
.ic .m-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-in .ic .m-draw, .play .ic .m-draw { animation: drawOn 1.1s calc(var(--i, 0) * 70ms + .25s) var(--ease) both; }
a.card:hover .ic .m-draw, a.card:focus-visible .ic .m-draw { animation: drawOn .9s var(--ease) both; }

.ic[data-motion="wire"] .m-dot { offset-path: path("M9 6.5h6"); }
.is-in .ic[data-motion="wire"] .m-dot, a.card:hover .ic[data-motion="wire"] .m-dot { animation: wirePulse 2.4s calc(var(--i, 0) * 70ms + .6s) var(--ease) 2 both; }

.ic .m-spark { transform-box: fill-box; transform-origin: center; }
.is-in .ic .m-spark, a.card:hover .ic .m-spark { animation: spark .9s calc(var(--i, 0) * 70ms + .9s) var(--ease-spring) both; }

.ic .m-lift { transform-box: view-box; }
.is-in .ic .m-lift, a.card:hover .ic .m-lift { animation: lift .8s calc(var(--i, 0) * 70ms + .5s) var(--ease-spring) both; }

.ic .m-drop { transform-box: view-box; }
.ic .m-ring { stroke-dasharray: 1; }
.is-in .ic .m-drop, a.card:hover .ic .m-drop { animation: drop .9s calc(var(--i, 0) * 70ms + .2s) var(--ease-spring) both; }
.is-in .ic .m-ring, a.card:hover .ic .m-ring { animation: drawOn .9s calc(var(--i, 0) * 70ms + .55s) var(--ease) both; }

.ic .m-t1, .ic .m-t2, .ic .m-t3 { transform-box: fill-box; transform-origin: center; }
.is-in .ic[data-motion="type"] circle, a.card:hover .ic[data-motion="type"] circle { animation: typing 1.2s var(--ease) 2 both; }
.is-in .ic .m-t1, a.card:hover .ic .m-t1 { animation-delay: calc(var(--i, 0) * 70ms + .3s); }
.is-in .ic .m-t2, a.card:hover .ic .m-t2 { animation-delay: calc(var(--i, 0) * 70ms + .45s); }
.is-in .ic .m-t3, a.card:hover .ic .m-t3 { animation-delay: calc(var(--i, 0) * 70ms + .6s); }

.ic .m-fly { transform-box: view-box; }
.is-in .ic .m-fly, a.card:hover .ic .m-fly { animation: fly 1s calc(var(--i, 0) * 70ms + .3s) var(--ease) both; }

.ic .m-turn { transform-box: view-box; transform-origin: 12px 12px; }
.is-in .ic .m-turn, a.card:hover .ic .m-turn { animation: turn 1.1s calc(var(--i, 0) * 70ms + .35s) var(--ease) both; }

.ic .m-join { transform-box: view-box; }
.is-in .ic .m-join { animation: join .9s calc(var(--i, 0) * 70ms + .4s) var(--ease-spring) both; }

/* the funnel hero's big icon breathes */
.mark-icon .ic { animation: float 6s ease-in-out infinite; }

@keyframes drawOn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wirePulse { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes spark { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes lift { 0% { transform: translateY(5px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes drop { 0% { transform: translateY(-7px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes typing { 0%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-1.6px); opacity: 1; } }
@keyframes fly { 0% { transform: translate(-6px, 6px); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes turn { 0% { transform: scaleX(1); } 45% { transform: scaleX(-.15); } 100% { transform: scaleX(1); } }
@keyframes join { 0% { transform: translateX(5px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------------------------------------- the onboarding screen
   The front page (/) is an app's onboarding screen: exactly one screen, never scrolls. The mark, one line,
   and the choices, over the consulting hero field (brand/field.js: the same print, with a cursor lens).

   The choices are Liquid Glass, after Apple's WWDC25 "Meet Liquid Glass": the material bends light rather than
   scattering it (lensing: a real SVG displacement on Chromium, built per size in hub.js), its rim highlight
   travels with the light source (the pointer), it lights up from under the fingertip, and it flexes like a gel
   on press. It stays visually quiet at rest. Ink text on regular glass; no glass on glass. */
.page-onboard { height: 100svh; overflow: hidden; }
.onboard { display: grid; place-items: center; height: 100svh; min-height: 0; padding: clamp(20px, 4svh, 40px) var(--gutter); }
.onboard::after { display: none; }
.onboard-inner { display: flex; flex-direction: column; align-items: center; width: min(440px, 100%); }
.hero .onboard-title { margin-top: clamp(18px, 3svh, 30px); white-space: nowrap; color: var(--ink); font: 500 clamp(28px, min(8.4vw, 6.6svh), 54px)/1 var(--font-display); letter-spacing: -.055em; text-align: center; }
.picks { display: grid; gap: clamp(8px, 1.3svh, 12px); width: 100%; margin-top: clamp(22px, 4svh, 40px); }
/* one small way off the screen for people who want to know who we are (JRP 2026-10-31: /about/ linked from the door) */
.onboard-about { margin-top: clamp(16px, 3svh, 28px); color: var(--muted); font: 500 13px/1 var(--font-body); letter-spacing: .01em; text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.onboard-about:hover, .onboard-about:focus-visible { color: var(--ink); border-color: var(--ink); }
.onboard-about:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* the Front desk line, tap to call (JRP 2026-11-08: the visible number matches the JSON-LD telephone and the Google profile) */
.onboard-call { margin: clamp(14px, 2.4svh, 22px) 0 0; color: var(--muted); font: 500 13px/1.4 var(--font-body); letter-spacing: .01em; text-align: center; }
.onboard-call a { display: inline-block; padding: 12px 2px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.onboard-call a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.onboard-call + .onboard-about { margin-top: clamp(4px, 1svh, 10px); }

/* --- the glass ------------------------------------------------------------------------------------- */
.glass {
  --mx: 50%; --my: 50%; --light: 210deg; --glow: 0;
  position: relative; isolation: isolate;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px) saturate(185%) brightness(1.06);
  backdrop-filter: blur(12px) saturate(185%) brightness(1.06);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .95),
    inset 0 -1px 1px rgba(255, 255, 255, .28),
    inset 0 0 0 .5px rgba(255, 255, 255, .5),
    0 1px 1.5px rgba(16, 17, 20, .05),
    0 10px 28px -14px rgba(16, 17, 20, .28);
}
.lensing .glass { backdrop-filter: var(--lens, none) blur(10px) saturate(185%) brightness(1.06); }
/* rim: a hairline of light that wraps the edge and turns toward the light source */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--light), rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 22%, rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .55) 62%, rgba(255, 255, 255, .12) 80%, rgba(255, 255, 255, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* illumination from within, starting under the pointer */
.glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx) var(--my), rgba(255, 255, 255, .62), rgba(255, 255, 255, .18) 38%, transparent 70%);
  opacity: var(--glow); transition: opacity .5s var(--ease);
}

/* --- the choices ----------------------------------------------------------------------------------- */
.pick { display: flex; align-items: center; gap: 14px; min-height: clamp(54px, 7.4svh, 66px); padding: 0 18px 0 20px; border-radius: 999px; color: var(--ink); text-decoration: none; transform: translateZ(0); will-change: transform; -webkit-tap-highlight-color: transparent; user-select: none; }
.pick .ic { flex: none; width: 22px; height: 22px; stroke-width: 1.55; }
.pick-text { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.25 var(--font-display); letter-spacing: -.02em; }
.pick-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: var(--muted); font-size: 12.5px; letter-spacing: -.005em; }
.pick .go { flex: none; width: 15px; height: 15px; stroke-width: 2.2; color: var(--ink); opacity: .55; transition: transform .45s var(--spring, var(--ease)), opacity .3s; }
.pick:hover .go, .pick:focus-visible .go { transform: translateX(3px); opacity: 1; }
.pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pick.is-soon { cursor: default; color: var(--muted); background: rgba(255, 255, 255, .2); }
.pick.is-soon .pick-label { font-weight: 450; }
.pick.is-soon .ic { opacity: .6; }

/* The mark: static, vector, in a glass bubble. */
.onboard-mark { display: grid; place-items: center; width: clamp(64px, 9.6svh, 84px); height: clamp(64px, 9.6svh, 84px); border-radius: 28%; }
.onboard-mark img { width: 58%; height: auto; }

/* Mark variants (scripts/build-hub.mjs LOGO): bare mark, glass circle, mark + wordmark. */
.onboard-mark.v-circle { border-radius: 50%; }
/* The mark's bubble is thicker glass than the rows (WWDC25: larger glass casts deeper shadows, bends more and
   catches brighter light). It sits on a pool of ink the field draws behind it (field.js, data-pool). */
.onboard-mark.glass.v-circle {
  width: clamp(76px, 11svh, 96px); height: clamp(76px, 11svh, 96px);
  background:
    radial-gradient(60% 42% at 32% 20%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(70% 40% at 62% 92%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
    rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(4px) saturate(190%) brightness(1.08);
  backdrop-filter: blur(4px) saturate(190%) brightness(1.08);
  box-shadow:
    inset 0 2px 1.5px rgba(255, 255, 255, 1),
    inset 0 -2px 2px rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 -14px 22px -14px rgba(16, 17, 20, .22),
    0 2px 4px rgba(16, 17, 20, .08),
    0 22px 44px -18px rgba(16, 17, 20, .42);
}
.lensing .onboard-mark.glass.v-circle { backdrop-filter: var(--lens, none) blur(3px) saturate(190%) brightness(1.08); }
.onboard-mark.glass.v-circle::before { padding: 1.5px; }
.onboard-mark.glass.v-circle img { width: 54%; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)) drop-shadow(0 3px 6px rgba(16, 17, 20, .18)); }
.onboard-mark.v-bare { width: clamp(76px, 11svh, 100px); height: auto; border-radius: 0; }
.onboard-mark.v-bare img { width: 100%; }
.onboard-mark.v-bare { animation: none; } /* the mark has no effect at all: static, flat ink */
.onboard-mark.v-lockup { display: flex; align-items: center; gap: 12px; width: auto; height: auto; border-radius: 0; }
.onboard-mark.v-lockup img { width: clamp(36px, 5.4svh, 46px); }
.onboard-mark.v-lockup span { color: var(--ink); font: 600 clamp(24px, 3.8svh, 32px)/1 var(--font-display); letter-spacing: -.045em; }

/* Entrance: glass materializes by modulating its light (blur and brightness), not by fading in. */
.onboard-mark, .hero .onboard-title, .pick { animation: materialize 1s var(--ease) backwards; }
.hero .onboard-title { animation-name: rise; animation-delay: .12s; }
.pick { animation-delay: calc(.2s + var(--i, 0) * 60ms); }
@keyframes materialize { 0% { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(10px) brightness(1.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }

/* --- icon motion ------------------------------------------------------------------------------------
   Like a set of animated system symbols: each icon plays its own small gesture as its row lands, then the
   set takes turns in a slow wave (.play, set by hub.js), and every icon plays on hover. */
.pick .ic * { transform-box: fill-box; transform-origin: center; }
.pick .ic .m-draw { stroke-dasharray: 1; }
.pick:is(.play, :hover) .ic .m-draw { animation: drawOn .9s var(--ease) both; }
.pick:is(.play, :hover) .ic[data-motion="wire"] .m-dot { animation: wirePulse 1.6s .15s var(--ease) both; }
.pick:is(.play, :hover) .ic[data-motion="wire"] rect { animation: nodeTap .9s var(--ease) both; }
.pick:is(.play, :hover) .ic[data-motion="wire"] rect:nth-of-type(2) { animation-delay: .25s; }
.pick:is(.play, :hover) .ic[data-motion="wire"] rect:nth-of-type(3) { animation-delay: .5s; }
.pick:is(.play, :hover) .ic[data-motion="rank"] circle { animation: lensTilt 1.1s var(--ease) both; }
.pick:is(.play, :hover) .ic .m-spark { animation: spark .8s .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.pick:is(.play, :hover) .ic .m-lift { animation: lift .8s .2s cubic-bezier(.34, 1.56, .64, 1) both; }
.pick:is(.play, :hover) .ic .m-fly { animation: loopFly 1.2s var(--ease) both; }
.pick:is(.play, :hover) .ic .m-turn { animation: turn 1s var(--ease) both; transform-origin: left center; }
.pick:is(.play, :hover) .ic .m-join { animation: join .8s .1s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes nodeTap { 0%, 100% { transform: scale(1); } 35% { transform: scale(.82); } 70% { transform: scale(1.06); } }
@keyframes lensTilt { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-14deg) scale(1.04); } }
@keyframes loopFly { 0% { transform: none; opacity: 1; } 38% { transform: translate(7px, -7px) scale(.8); opacity: 0; } 39% { transform: translate(-7px, 7px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (hover: none) { .pick:hover .go { transform: none; opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pick { will-change: auto; } }
@media (prefers-reduced-transparency: reduce) { .glass { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .glass { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); } .pick-sub { color: var(--ink-2); } }