/* Homepage sections. Depends on site.css tokens. */

/* ---------- 01/02 hero: the relay and the fold ---------- */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: center;
  min-height: 100svh; padding-block: 48px 96px;
}
.hero h1 { font-size: clamp(48px, 6.4vw, 96px); }
.hero__copy { position: relative; }
.hero__text--after { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero__after-line { color: var(--lime); }
.hero__fig { margin-top: 40px; }
.hero__toggle { margin-top: 20px; }

.stage { position: relative; aspect-ratio: 5 / 4; }
.stage__curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage__path { stroke: rgba(255,255,255,.42); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.stage__dot { display: none; }
.relay-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,106,61,.25); translate: -50% -50%; pointer-events: none; }

.frag {
  position: absolute; left: var(--x); top: var(--y); width: 176px;
  translate: -50% -50%; rotate: var(--r);
}
.frag__label { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.frag--sticky { width: 112px; }
.frag .ui { font-size: 11px; }
.frag .ui__bar { padding: 8px 10px; }
.frag .ui__row { padding: 7px 10px; grid-template-columns: 1fr auto; gap: 8px; }
.ui__field { margin: 8px 10px 0; height: 24px; border: 1px solid var(--rule); border-radius: 6px; padding: 4px 8px; font-size: 11px; color: var(--muted); }
.ui__btn { margin: 8px 10px 10px; height: 26px; background: var(--ink); color: var(--paper); border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.ui__cells { display: grid; grid-template-columns: 40px 1fr 1fr 1fr; font-size: 11px; }
.ui__cells span { padding: 6px 7px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__rn { color: var(--muted); background: var(--warm); }
.ui__hl { background: #FFF6C7; }
.ui--copy { opacity: .92; }
.bubble { background: var(--electric); color: var(--paper); border-radius: 18px 18px 4px 18px; padding: 10px 14px; font-size: 13px; line-height: 1.3; width: max-content; max-width: 190px; }
.ui--cal .ui__slot { margin: 6px 10px; padding: 4px 8px; font-size: 11px; border-left: 3px solid var(--rule); color: var(--muted); }
.ui--cal .ui__slot--busy { border-left-color: var(--coral); background: #FFF0EA; color: var(--ink); }
.ui--cal .ui__slot:last-child { margin-bottom: 10px; }
.pdf { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--paper); color: var(--ink); border-radius: 8px; font-size: 12px; box-shadow: var(--shadow-1); white-space: nowrap; }
.pdf__icon { background: var(--red); color: var(--paper); font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; letter-spacing: .05em; }

.bookings {
  position: absolute; left: 50%; top: 50%; width: min(460px, 94%);
  translate: -50% -50%; opacity: 0; visibility: hidden; scale: .9; font-size: 13px;
}
.bookings .ui__row { grid-template-columns: 1.5fr 1fr auto auto; }
@media (max-width: 900px) { .bookings .ui__tab { padding: 12px; } .bookings .ui__filter button { padding: 8px 12px; } }
.sticky-note--kept { position: absolute; left: calc(50% + 160px); top: calc(50% - 200px); width: 100px; font-size: 13px; padding: 10px 10px 14px; rotate: 4deg; opacity: 0; }
.counter { position: absolute; right: 0; bottom: -16px; text-align: right; color: rgba(255,255,255,.78); }
.counter__num { display: inline-block; min-width: 2ch; }
.counter__line--extra { visibility: hidden; transform: scaleY(0); transform-origin: 50% 0; } /* flips in; no opacity, so an accessibility snapshot never catches a half-faded colour */
.stage__fig { position: absolute; left: 0; bottom: -16px; opacity: 0; color: rgba(255,255,255,.62); }
.stage__fig--kept { left: auto; right: 0; bottom: auto; top: calc(50% - 260px); }
.hero__sweep { position: absolute; left: -10%; right: -10%; bottom: 0; height: 90px; background: var(--paper); border-radius: 50% 50% 0 0 / 90px 90px 0 0; translate: 0 100%; }

/* static after-state (reduced motion or mobile toggle) */
.hero.is-after .frag { opacity: 0; pointer-events: none; }
.hero.is-after .stage__path, .hero.is-after .relay-dot { opacity: 0; }
.hero.is-after .bookings, .hero.is-after .sticky-note--kept, .hero.is-after .stage__fig--after, .hero.is-after .stage__fig--kept { opacity: 1; visibility: visible; scale: 1; }
.hero.is-after .hero__text--before { opacity: 0; pointer-events: none; }
.hero.is-after .hero__text--after { opacity: 1; pointer-events: auto; position: relative; }
.hero.is-after .hero__fig { opacity: 0; }
.hero.is-after .counter__num::after { content: ""; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px 72px; min-height: 0; }
  .hero h1 { font-size: clamp(36px, 11vw, 48px); } /* "Less nonsense." is one word on purpose; it has to fit a 360px phone */
  .hero__text--after { position: relative; display: none; }
  .hero__text--before { opacity: 1 !important; } /* the copy swap is a desktop beat; on a phone the copy sits above the stage and stays while the stage folds */
  .hero.is-after .hero__text--after { display: block; }
  .hero.is-after .hero__text--before { display: none; }
  .stage { aspect-ratio: 4 / 5; }
  .frag { width: 150px; }
  .frag[data-i="2"], .frag[data-i="4"], .frag[data-i="6"], .frag[data-i="7"] { display: none; }
  .frag[data-i="0"] { --x: 34%; --y: 10%; --r: -2deg; }
  .frag[data-i="1"] { --x: 66%; --y: 34%; --r: 2deg; }
  .frag[data-i="3"] { --x: 36%; --y: 58%; --r: -1deg; }
  .frag[data-i="5"] { --x: 66%; --y: 84%; --r: 2deg; }
  .bookings { width: 96%; }
  .sticky-note--kept { left: auto; right: 4px; top: 18%; }
  .stage__fig--kept { top: 8%; }
  .hero__sweep { display: none; }
}

/* ---------- 03 dana ---------- */
.dana__chart { aspect-ratio: 16 / 10; }
.dana__chart svg { width: 100%; height: 100%; overflow: visible; }
.dana__chart .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.dana__chart .box--root { fill: var(--ink); }
.dana__chart .edge { stroke: var(--ink); stroke-width: 1; fill: none; opacity: .5; }
.dana__chart text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); }
.dana__chart .root-label { fill: var(--paper); }
.dana__chart .name { font-family: var(--font-aside); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 15px; fill: var(--violet); }
.dana__chart .after { opacity: 0; }
.dana__chart .box--sys { fill: var(--electric); stroke: var(--electric); }
.dana__chart .sys-label { fill: var(--paper); }
.dana__static .after { opacity: 1; }
@media (max-width: 900px) { .dana__chart { aspect-ratio: 5 / 7; } }

/* ---------- 04 picker ---------- */
.solution { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
.advisor { display: grid; justify-items: center; gap: 8px; text-align: center; }
.advisor__face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 32%; background: var(--warm); box-shadow: var(--shadow-1); }
.advisor .fig { font-size: 10px; }
.bubble-card { position: relative; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-1); transition: background-color 400ms var(--settle), color 400ms var(--settle); }
.bubble-card::before { content: ""; position: absolute; left: -9px; top: 28px; width: 18px; height: 18px; background: inherit; rotate: 45deg; border-radius: 3px; }
.solution__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.solution__cap { opacity: .8; }
.solution__empty { margin-top: 24px; }
.solution__rows { margin-top: 20px; display: grid; gap: 14px; }
.solution__rows li { display: none; padding-top: 14px; border-top: 1px solid currentColor; }
.solution__rows li.is-on { display: grid; gap: 4px; }
.solution__rows b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.solution__note { margin-top: 20px; }
.solution__cta { margin-top: 24px; }
.solution[data-cap="web"] .bubble-card { background: var(--magenta); color: var(--ink); }
.solution[data-cap="work"] .bubble-card { background: var(--electric); color: var(--paper); }
.solution[data-cap="work"] .btn--ink { background: var(--paper); color: var(--ink); }
.solution[data-cap="all"] .bubble-card { background: var(--ink); color: var(--paper); }
.solution[data-cap="all"] .btn--ink { background: var(--paper); color: var(--ink); }
.solution:not([data-cap="none"]) .solution__empty { display: none; }
@media (max-width: 900px) { .solution { position: static; margin-top: 32px; grid-template-columns: 56px 1fr; } .advisor__face { width: 56px; height: 56px; } .solution__head { flex-wrap: wrap; } }

/* ---------- 04b the spreadsheet that became too powerful ---------- */
.monster__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.monster__fig img { width: 100%; border-radius: var(--radius-card); background: var(--charcoal); aspect-ratio: 3 / 2; object-fit: cover; }
.monster__fig .fig { margin-top: 12px; color: rgba(255,255,255,.66); }
.monster__copy { padding-bottom: 32px; }
@media (max-width: 900px) { .monster__inner { grid-template-columns: 1fr; gap: 28px; } .monster__copy { padding-bottom: 0; } }

/* ---------- 05 the two pillars ---------- */
.pillar .tag { margin-bottom: 4px; }
.pillar .display-l { font-size: clamp(40px, 4.6vw, 72px); max-width: 13ch; }
.pillar__fig { margin-top: 20px; }
.pillar--web .portal { border-color: rgba(13,16,36,.45); }
.portal--page .part { color: var(--ink); }
.part--pnav { left: 4%; top: 4%; width: 92%; height: 8%; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.part--pnav span { width: 34px; height: 6px; border-radius: 3px; background: var(--mist); }
.part--pnav i { margin-left: auto; font-style: normal; background: var(--ink); color: var(--paper); padding: 4px 10px; border-radius: 999px; font-size: 11px; }
.part--phero { left: 4%; top: 16%; width: 50%; padding: 14px; display: grid; gap: 8px; align-content: start; }
.part--phero b { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -0.02em; }
.part--phero span { color: var(--muted); font-size: 11px; }
.part--phero i { font-style: normal; background: var(--coral); color: var(--ink); padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; width: max-content; }
.part--pimg { right: 4%; top: 16%; width: 38%; height: 30%; background: var(--violet); overflow: hidden; }
.part--pimg i { position: absolute; left: 12%; right: 12%; bottom: 0; height: 55%; background: var(--electric); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.part--pcard { left: 4%; top: 52%; width: 28%; padding: 12px; }
.part--pcard b { display: block; font-weight: 700; }
.part--pcard span { color: var(--muted); font-size: 11px; }
.part--pcard2 { left: 36%; }
.part--pcard3 { left: 68%; }
.part--pform { left: 4%; bottom: 4%; width: 92%; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.part--pform label { display: grid; gap: 4px; font-size: 10px; color: var(--muted); }
.part--pform label span { display: block; height: 22px; border: 1px solid var(--rule); border-radius: 6px; }
.part--pform i { font-style: normal; background: var(--ink); color: var(--paper); padding: 0 12px; height: 22px; border-radius: 6px; font-size: 11px; display: grid; place-items: center; }
@media (max-width: 900px) {
  .portal--page { aspect-ratio: 5 / 6; }
  .part--pimg, .part--pcard2, .part--pcard3 { display: none; }
  .part--phero { width: 92%; }
  .part--pcard { width: 92%; top: 50%; }
}

.belt-strip { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: center; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); }
.pillar--work .belt { border-color: rgba(255,255,255,.6); }
.pillar--work .belt::before { background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 28px); }
.pillar--work .automate__counter { color: var(--paper); margin-top: 16px; }
@media (max-width: 900px) { .belt-strip { grid-template-columns: 1fr; margin-top: 40px; } }

/* ---------- 05 capability panels ---------- */
.panel { min-height: 100svh; display: grid; align-items: center; padding-block: 96px; position: relative; overflow: hidden; }
.panel__inner { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.panel .link { font-size: var(--body-l); }
@media (max-width: 900px) { .panel { min-height: 100svh; padding-block: 72px; } .panel__inner { grid-template-columns: 1fr; gap: 40px; } }

/* create */
.create .panel__inner { grid-template-columns: 1fr; }
.create__head { max-width: 12ch; font-size: clamp(56px, 10vw, 160px); }
.create__head .w { display: inline-block; }
.stretch { display: inline-block; transform-origin: left center; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; transition: transform 700ms cubic-bezier(.2, 1.5, .3, 1), color var(--hover); cursor: pointer; }
.stretch.is-stretched { transform: scaleX(1.32); }
.stretch:hover { color: var(--paper); }
html.reduce-motion .stretch.is-stretched { transform: none; color: var(--paper); }
.create__drift { position: absolute; inset: 0; pointer-events: none; opacity: .09; }
.drift { position: absolute; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.drift--swatch { right: 8%; top: 14%; display: flex; gap: 6px; padding: 12px; animation: drift 14s ease-in-out infinite alternate; }
.drift--swatch i { width: 28px; height: 28px; border-radius: 6px; background: var(--c); border: 1px solid rgba(255,255,255,.4); }
/* decorative labels live in CSS content so they are not text for assistive tech or contrast checkers */
.drift--type { right: 22%; bottom: 18%; font-family: var(--font-display); font-weight: 800; font-size: 44px; animation: drift 18s ease-in-out infinite alternate-reverse; }
.drift--type::before { content: attr(data-text); }
.drift--type::after { content: attr(data-sub); display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.drift--btn { right: 40%; top: 20%; display: flex; gap: 8px; animation: drift 16s ease-in-out infinite alternate; }
.drift--btn::before, .drift--btn::after { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--paper); }
.drift--btn::before { content: attr(data-a); }
.drift--btn::after { content: attr(data-b); }
@keyframes drift { from { transform: translate(0, 0) rotate(-2deg); } to { transform: translate(-30px, 24px) rotate(2deg); } }

/* build */
.portal-wrap { position: relative; }
.portal { position: relative; aspect-ratio: 4 / 3; border: 1.5px dashed rgba(255,255,255,.55); border-radius: 16px; }
.part { position: absolute; background: var(--paper); color: var(--ink); border-radius: 10px; box-shadow: var(--shadow-1); font-size: 12px; line-height: 1.3; }
.part--nav { left: 4%; top: 4%; width: 60%; height: 8%; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.part--nav span { width: 34px; height: 6px; border-radius: 3px; background: var(--mist); }
.part--nav i { margin-left: auto; font-style: normal; color: var(--muted); }
.part--filter { left: 4%; top: 16%; width: 40%; display: flex; gap: 6px; padding: 8px; }
.part--filter span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rule); }
.part--filter span:first-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.part--table { left: 4%; top: 28%; width: 52%; }
.part--table .ui__row { grid-template-columns: 1fr auto auto; gap: 10px; padding: 8px 10px; }
.part--chips { right: 4%; top: 4%; width: 32%; display: flex; gap: 6px; padding: 10px; justify-content: flex-end; }
.part--form { left: 4%; bottom: 4%; width: 44%; padding: 10px 12px; }
.part--form label { display: block; color: var(--muted); font-size: 10px; margin: 4px 0 2px; }
.part--form span { display: block; height: 22px; border: 1px solid var(--rule); border-radius: 6px; }
.part--cal { right: 4%; top: 16%; width: 28%; padding: 10px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.part--cal b { grid-column: 1 / -1; font-size: 11px; }
.part--cal i { font-style: normal; font-size: 10px; text-align: center; padding: 3px 0; border-radius: 4px; color: var(--muted); }
.part--cal i.on { background: var(--ink); color: var(--paper); }
.part--files { right: 4%; bottom: 24%; width: 30%; padding: 8px 10px; display: grid; gap: 6px; }
.part--files span { padding: 4px 6px; background: var(--warm); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part--perm { left: 60%; top: 42%; width: 36%; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tog { width: 30px; height: 16px; border-radius: 999px; background: var(--turquoise); position: relative; flex: none; }
.tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); }
.part--notif { right: 4%; bottom: 4%; width: 26%; padding: 10px 12px; }
.part--notif b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--coral); color: var(--ink); margin-right: 6px; }
.part--slot { left: 60%; top: 56%; width: 36%; height: 16%; background: transparent; box-shadow: none; border: 1.5px dashed rgba(255,255,255,.6); }
.part--custom { left: 60%; top: 56%; width: 36%; height: 16%; padding: 8px 12px; display: grid; align-content: center; gap: 2px; }
.part--custom span { color: var(--muted); font-size: 10px; }
.part--custom i { font-style: normal; font-weight: 600; }
.part--shelf { left: 60%; top: 56%; width: 36%; height: 16%; padding: 8px 12px; display: grid; align-content: center; gap: 6px; opacity: 0; transition: background-color 120ms; }
.part--shelf i { display: block; height: 8px; border-radius: 4px; background: var(--mist); }
.part--shelf.is-red { background: var(--red); color: var(--paper); }
.portal.is-static .part--shelf { opacity: 1; left: auto; right: -8%; top: 78%; width: 34%; text-decoration: line-through; transform: rotate(3deg); }
.portal.is-static .part--slot { display: none; }
.portal.is-motion .part--custom { opacity: 0; }
.build__fig { margin-top: 20px; color: var(--paper); }
.pillar .dim { opacity: 1; }
@media (max-width: 900px) {
  .portal { aspect-ratio: 5 / 6; }
  .part--files, .part--notif, .part--perm, .part--chips, .dim { display: none; }
  .part--nav { width: 92%; }
  .part--filter { width: 64%; }
  .part--table { width: 92%; top: 26%; }
  .part--cal { display: none; }
  .part--form { width: 92%; }
  .part--slot, .part--custom, .part--shelf { left: 4%; width: 60%; top: 58%; }
  .portal.is-static .part--shelf { right: auto; left: 30%; top: 72%; }
}

/* automate */
.automate__head { font-size: clamp(40px, 4.8vw, 76px); max-width: 14ch; }
.formula { color: var(--ink); opacity: .7; margin-bottom: 20px; text-transform: none; letter-spacing: .02em; font-size: 14px; }
.formula.is-evaluated { text-decoration: line-through; opacity: .35; }
.belt-wrap { position: relative; }
.belt { position: relative; height: 128px; overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.belt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 28px); opacity: .25; animation: beltline 1.2s linear infinite; }
@keyframes beltline { to { background-position: 28px 0; } }
.belt__track { position: absolute; left: 0; top: 50%; translate: 0 -50%; display: flex; gap: 16px; width: max-content; animation: belt 16s linear infinite; }
@keyframes belt { to { transform: translateX(-50%); } }
.task { flex: none; width: 168px; padding: 12px 14px; background: var(--paper); color: var(--ink); border-radius: 10px; font-weight: 600; font-size: 13px; box-shadow: var(--shadow-1); }
.machine { position: absolute; right: -2px; top: 50%; translate: 0 -50%; width: 150px; height: 100px; background: var(--ink); border-radius: 14px 0 0 14px; z-index: 2; display: grid; place-items: center; }
.machine__drum { width: 44px; height: 44px; border-radius: 50%; border: 6px solid var(--turquoise); border-right-color: var(--lime); animation: spin 1.6s linear infinite; }
.machine__light { position: absolute; right: 14px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(198,255,61,.3); }
@keyframes spin { to { transform: rotate(360deg); } }
.automate__counter { position: static; margin-top: 18px; text-align: left; color: var(--ink); font-size: 14px; }
.automate__to { font-weight: 700; }
.belt__tail { position: absolute; left: var(--margin); top: 100%; z-index: 3; }
.belt__tail::before { content: ""; display: block; width: 200px; height: 6px; background: var(--lime); }
.belt__tail .fig { display: block; margin-top: 8px; color: var(--muted); }

/* ---------- 06 work ---------- */
.work__head { max-width: 60ch; }
.work__cards { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--gutter); align-items: start; margin-top: 56px; }
.work-card { display: block; text-decoration: none; color: var(--ink); overflow: visible; }
.work-card:nth-child(2) { margin-top: 48px; }
.work-card:nth-child(3) { margin-top: 96px; }
.work-card__cover { position: relative; border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: visible; }
.work-card__cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--charcoal); }
.work-card__ui { position: absolute; right: -10px; bottom: -18px; width: 62%; font-size: 11px; }
.work-card__body { padding: 36px 24px 24px; }
.metrics { display: grid; gap: 10px; }
.metrics div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.metrics dt { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; white-space: nowrap; }
.metrics dd { margin: 0; font-size: var(--small); color: var(--muted); }
.metrics dd .turn { font-size: 1em; }
@media (max-width: 900px) {
  .work__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .work-card { flex: 0 0 84%; scroll-snap-align: start; margin-top: 0 !important; }
  .work-card__ui { right: 6px; bottom: -12px; }
}

/* ---------- 07 family tree ---------- */
.tree__head { max-width: 60ch; }
.tree__stage { position: relative; margin-top: 48px; }
.tree__chart { aspect-ratio: 16 / 9; }
.tree__chart svg { width: 100%; height: 100%; overflow: visible; }
.tree__chart .node { fill: var(--charcoal); stroke: rgba(255,255,255,.35); stroke-width: 1; }
.tree__chart .node--keep { stroke: var(--turquoise); }
.tree__chart .node--sys { fill: var(--electric); stroke: var(--electric); }
.tree__chart text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--paper); }
.tree__chart .edge { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1; }
.tree__chart .edge--after { stroke: var(--turquoise); stroke-width: 1.5; opacity: 0; }
.tree__chart .cousins { fill: var(--mist); font-family: var(--font-aside); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; }
.tree__note { position: absolute; right: 0; top: -28px; opacity: 0; transition: opacity 600ms var(--settle); }
.tree__note.is-in { opacity: 1; }
.tree__after { margin-top: 32px; max-width: 60ch; opacity: 0; }
.tree.is-static .tree__after { opacity: 1; }
@media (max-width: 900px) { .tree__chart { aspect-ratio: 3 / 4; } }

/* ---------- 08 decide ---------- */
.decide__rows { display: grid; }
.decide__row { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); }
.decide__row:last-child { border-bottom: 1px solid var(--rule); }
.decide__verb { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: .95; }
.decide__row p { max-width: 40ch; }
@media (max-width: 900px) {
  .decide__row { grid-template-columns: 1fr; gap: 12px; }
  .decide__row .display-xl { font-size: 64px; } .decide__row .display-l { font-size: 48px; } .decide__row .h2 { font-size: 36px; } .decide__row .h3 { font-size: 28px; }
}

/* ---------- 09 process ---------- */
.redline { color: var(--muted); }
.redline__w { position: relative; display: inline-block; }
.redline__w::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .08em; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--snap); }
.redline.is-in .redline__w::after { transform: scaleX(1); }
.redline.is-in .redline__w:nth-child(2)::after { transition-delay: 260ms; }
.redline.is-in .redline__w:nth-child(3)::after { transition-delay: 520ms; }
.redline.is-in .redline__w:nth-child(4)::after { transition-delay: 780ms; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 56px var(--gutter); }
.step { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.step:nth-child(even) { margin-top: 72px; }
.step__n { font-family: var(--font-display); font-weight: 800; font-size: var(--display-l); line-height: .9; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.invite { position: relative; background: var(--paper); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-1); max-width: 360px; }
.invite__head { display: grid; gap: 2px; }
.invite__meta { color: var(--muted); font-size: var(--small); }
.invite__body { margin-top: 10px; font-size: var(--small); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 10px; }
.invite__stamp { position: absolute; right: 14px; top: 12px; }
.invite__reason { margin-top: 12px; color: var(--muted); text-transform: none; letter-spacing: .02em; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 40px; } .step { grid-template-columns: 1fr; gap: 8px; } .step:nth-child(even) { margin-top: 0; } .step__n { font-size: 64px; } }

/* ---------- 10 reviews ---------- */
.review { padding: 9vh 0; text-align: center; }
.review .h2 { max-width: 24ch; margin-inline: auto; }
.review + .review { border-top: 1px solid var(--rule); }
.reviews__note { text-align: center; display: grid; justify-items: center; padding-top: 32px; }
@media (max-width: 900px) { .review { padding: 12vh 0; } }

/* ---------- 11 board ---------- */
.board__title { position: relative; }
.board__title h2 { position: relative; z-index: 1; }
.board__ghost { position: absolute; left: 6px; top: 6px; opacity: .28; pointer-events: none; z-index: 0; color: var(--mist); }
.board__ghost::after { content: "(backup copy)"; display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.board__table { width: 100%; border-collapse: collapse; font-size: 13px; letter-spacing: .02em; text-transform: none; }
.board__table th, .board__table td { padding: 16px 0; border-top: 1px solid var(--rule); vertical-align: top; text-align: left; }
.board__table th { width: 32%; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; color: var(--mist); padding-right: 16px; font-size: 12px; }
.board__table td { color: var(--paper); }
.board__table tr:last-child th, .board__table tr:last-child td { border-bottom: 1px solid var(--rule); }
.board__table td.is-flip { animation: flip 240ms var(--snap); }
@keyframes flip { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) { .board__table th, .board__table td { display: block; width: auto; border: 0; padding: 4px 0; } .board__table th { padding-top: 14px; border-top: 1px solid var(--rule); } .board__table td { padding-bottom: 14px; } }

/* ---------- 10 reviews: the object is one enormous quotation mark ---------- */
.reviews { position: relative; overflow: hidden; }
.reviews::before { content: "\201C"; position: absolute; left: 4%; top: -0.12em; font-family: var(--font-display); font-weight: 800; font-size: clamp(320px, 42vw, 640px); line-height: 1; color: var(--cyan); opacity: .16; pointer-events: none; }
.reviews .container { position: relative; }

/* ---------- 12 pricing ---------- */
.pricing__range { letter-spacing: -0.04em; }
.pricing__range .plus { color: var(--coral); }
.bands { display: grid; counter-reset: band; }
.bands li { display: grid; grid-template-columns: 210px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.bands li:last-child { border-bottom: 1px solid var(--rule); }
.bands__price { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.bands b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.bands div > span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--small); max-width: 44ch; }
@media (max-width: 900px) { .bands li { grid-template-columns: 1fr; gap: 6px; } }
.ranges div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.ranges div:last-child { border-bottom: 1px solid var(--rule); }
.ranges dt { font-weight: 500; }
.ranges dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; white-space: nowrap; }
.ranges .plus { color: var(--coral); }

/* ---------- 13 faq / 14 cta ---------- */
.faq-section { position: relative; z-index: 1; }
.cta { min-height: 100svh; display: grid; align-items: center; padding-block: 120px; position: relative; z-index: 2; box-shadow: 0 -24px 60px rgba(13,16,36,.25); }
.cta .display-xl { max-width: 12ch; margin-inline: auto; }
.cta__dot { color: var(--coral); }
.cta__rules { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }
.cta__rules i { display: block; width: 96px; height: 3px; background: var(--c); }
.cta__who { color: rgba(255,255,255,.82); }
.cta__inquiry { display: grid; place-items: center; }
.cta__ball { width: 14px; height: 14px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,106,61,.25); }

/* ---------- cookie ---------- */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 360px; padding: 20px; font-size: var(--small); }

/* ---------- round 3: frames scale with their container, panels stack under 1200px ---------- */
.portal { container-type: inline-size; }
.portal .part { font-size: clamp(8px, 1.75cqw, 12px); }
.part--phero b { font-size: clamp(13px, 3.4cqw, 22px); }
.part--nav i, .part--pnav i { font-size: clamp(8px, 1.6cqw, 11px); }
.part--table .ui__row, .part--filter span, .part--cal i, .part--files span { font-size: clamp(8px, 1.6cqw, 11px); }
@media (max-width: 1200px) {
  .panel__inner { grid-template-columns: 1fr; gap: 40px; }
  .portal-wrap { max-width: 680px; }
  .pillar .display-l { max-width: 18ch; }
}

/* the boring-parts strip */
.belt-strip { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px 56px; align-items: center; margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--rule); }
.belt-strip .belt { height: 112px; }
.belt-strip .belt__track { padding-left: 24px; }
.belt-strip__counter { grid-column: 2; position: static; margin: 0; text-align: right; color: var(--paper); font-size: 14px; }
@media (max-width: 900px) { .belt-strip { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; } .belt-strip__counter { grid-column: 1; text-align: left; } }

/* pricing: the tree, and the bands as tiles */
.pricing__tree img { width: min(100%, 360px); border-radius: var(--radius-card); background: var(--warm); }
.pricing__tree .fig { max-width: 40ch; }
.bands { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bands li { display: block; padding: 22px 22px 24px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); }
.bands li:last-child { border-bottom: 1px solid var(--rule); }
.bands__price { display: block; font-size: 24px; margin-bottom: 8px; white-space: normal; }
.bands b { font-size: 19px; }
.bands li > span:last-child { display: block; margin-top: 6px; color: var(--muted); font-size: var(--small); }
@media (max-width: 900px) { .bands { grid-template-columns: 1fr; } }

/* ---------- round 4: hero stage scales with the viewport ---------- */
.stage { container-type: inline-size; }
.frag { width: clamp(150px, 27cqw, 230px); }
.frag .ui, .frag .ui__row, .frag .ui__cells, .frag .ui__field, .frag .ui__btn, .ui--cal .ui__slot { font-size: clamp(10px, 1.7cqw, 13px); }
.frag__label { font-size: clamp(10px, 1.6cqw, 12px); }
.frag--sticky { width: clamp(96px, 17cqw, 140px); }
.frag .sticky-note { font-size: clamp(13px, 2.3cqw, 17px); }
.frag .pdf { font-size: clamp(11px, 1.8cqw, 14px); }
.bubble { font-size: clamp(12px, 2cqw, 15px); max-width: clamp(160px, 30cqw, 240px); }
.bookings { width: min(72cqw, 560px); font-size: clamp(12px, 2cqw, 14px); }
.counter { font-size: clamp(11px, 1.9cqw, 14px); }
.sticky-note--kept { left: calc(50% + 34cqw); top: calc(50% - 36cqw); width: clamp(90px, 16cqw, 130px); }
@media (max-width: 900px) { .bookings { width: 96%; top: calc(50% - 10px); } .sticky-note--kept { left: auto; right: 4px; top: auto; bottom: 4px; } .counter { right: auto; left: 0; text-align: left; bottom: auto; top: calc(100% + 18px); } }

/* ---------- round 4: the frames are clickable ---------- */
.mini-btn { font: inherit; cursor: pointer; border: 0; }
.part--pnav .mini-btn { margin-left: auto; background: var(--ink); color: var(--paper); padding: 4px 10px; border-radius: 999px; font-size: clamp(8px, 1.6cqw, 11px); }
.part--phero .mini-btn { background: var(--coral); color: var(--ink); padding: 6px 10px; border-radius: 999px; font-size: clamp(8px, 1.7cqw, 11px); font-weight: 600; width: max-content; }
.mini-btn:hover { filter: brightness(1.08); }
.mini-btn:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
.mini-btn--small { background: var(--ink); color: var(--paper); padding: 3px 9px; border-radius: 6px; font-size: clamp(8px, 1.5cqw, 10px); font-weight: 600; width: max-content; margin-top: 2px; }
.part--sms { position: absolute; right: 4%; top: 46%; width: 40%; padding: 10px 12px; background: var(--ink); color: var(--paper); border-radius: 12px 12px 12px 4px; opacity: 0; box-shadow: var(--shadow-2); z-index: 3; }
.part--sms b { display: block; font-size: clamp(9px, 1.7cqw, 12px); }
.part--sms span { display: block; margin-top: 3px; font-size: clamp(8px, 1.5cqw, 11px); color: var(--mist); }
.part--sms--work { right: auto; left: 4%; top: 59%; width: 48%; }
.portal.is-quoting .part--sms, .portal.is-texted .part--sms { opacity: 1; }
.portal.is-quoting .part--pform i { background: var(--turquoise); color: var(--ink); }
.portal .part--custom { display: grid; align-content: center; gap: 4px; }
.fig__hint { color: var(--coral); }
.pillar--web .fig__hint { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 900px) { .part--sms { width: 60%; top: 40%; right: 4%; } .part--sms--work { left: 4%; top: 78%; width: 70%; } .portal .part, .part--nav i, .part--pnav i, .part--table .ui__row, .part--filter span, .part--sms span, .mini-btn--small { font-size: 10px; } .part--sms b { font-size: 12px; } .part--pnav .mini-btn, .part--phero .mini-btn { font-size: 11px; } .mini-btn { position: relative; } .mini-btn::after { content: ""; position: absolute; inset: -10px; } .part--slot, .part--custom, .part--shelf { top: 54%; } .part--custom { height: auto; } }

/* ---------- round 4: the board lives inside the FAQ now ---------- */
.answer--board { max-width: none !important; }
.answer--board p { max-width: 46ch; margin-bottom: 16px; }
.faq .board__table th { color: var(--muted); }
.faq .board__table td { color: var(--ink); }

/* ---------- round 4: the coral dot arrives at the clipboard ---------- */
.clipboard { overflow: visible; }
.roll-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,106,61,.25); opacity: 0; pointer-events: none; z-index: 4; }
.index__box.is-touched .ib { stroke: var(--coral); transition: stroke 600ms var(--settle) 900ms; }

/* contrast: the caption hint and the CTA small print failed 4.5:1 on their coloured grounds */
.env-electric .fig__hint { color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }
#cta .small { color: var(--paper); }

/* ---------- hero gradient ----------
   Generated in the curveball-hero-video project by scripts/build-hero-css.mjs
   from src/parts/gradientBlobs.ts, the same constants the intro video renders.
   Paste the regenerated file over this block; do not hand-tune it here, or the
   video and the site will drift apart. */
/* The hero is already position:relative on the site. isolation keeps the
   negative z-index inside it, and z-index:-1 puts the field above the hero's
   own background but below its in-flow content, so nothing else needs a
   z-index and absolutely positioned children such as .hero__sweep keep
   painting exactly where they did. */
.hero { isolation: isolate; }

.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #0D1024;
  container-type: size;
}

.hero__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100cqw, 177.7778cqh);
  aspect-ratio: 1920 / 1080;
  container-type: inline-size;
}

.hero__gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 48% at 50% 52%, rgba(13,16,36,0.72) 0%, rgba(13,16,36,0) 72%);
}

.hero__blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(3.021cqw);
  will-change: transform;
}

.hero__blob--1 {
  width: 59.896%;
  left: -14.323%;
  top: -13.426%;
  opacity: 0.5;
  background: radial-gradient(circle, #2452FF 0%, #2452FF00 68%);
  animation:
    cb-drift-1 3.5s ease-in-out infinite alternate,
    cb-breathe-1 2.75s ease-in-out infinite alternate;
}
@keyframes cb-drift-1 {
  from { translate: 0 0; }
  to   { translate: 11.304% -6.087%; }
}
@keyframes cb-breathe-1 {
  from { scale: 0.94; }
  to   { scale: 1.06; }
}

.hero__blob--2 {
  width: 52.083%;
  left: 20.833%;
  top: 14.815%;
  opacity: 0.46;
  background: radial-gradient(circle, #7A3BFF 0%, #7A3BFF00 68%);
  animation:
    cb-drift-2 4.35s ease-in-out infinite alternate,
    cb-breathe-2 3.25s ease-in-out infinite alternate;
}
@keyframes cb-drift-2 {
  from { translate: 0 0; }
  to   { translate: -9% 6%; }
}
@keyframes cb-breathe-2 {
  from { scale: 0.94; }
  to   { scale: 1.06; }
}

.hero__blob--3 {
  width: 44.792%;
  left: 48.438%;
  top: -4.63%;
  opacity: 0.34;
  background: radial-gradient(circle, #FF2D95 0%, #FF2D9500 68%);
  animation:
    cb-drift-3 5.2s ease-in-out infinite alternate,
    cb-breathe-3 3.75s ease-in-out infinite alternate;
}
@keyframes cb-drift-3 {
  from { translate: 0 0; }
  to   { translate: -12.791% 8.14%; }
}
@keyframes cb-breathe-3 {
  from { scale: 0.94; }
  to   { scale: 1.06; }
}

.hero__blob--4 {
  width: 39.583%;
  left: 64.583%;
  top: 29.63%;
  opacity: 0.3;
  background: radial-gradient(circle, #FF6A3D 0%, #FF6A3D00 68%);
  animation:
    cb-drift-4 6.05s ease-in-out infinite alternate,
    cb-breathe-4 4.25s ease-in-out infinite alternate;
}
@keyframes cb-drift-4 {
  from { translate: 0 0; }
  to   { translate: 10.526% -10.526%; }
}
@keyframes cb-breathe-4 {
  from { scale: 0.94; }
  to   { scale: 1.06; }
}

.hero__blob--5 {
  width: 35.417%;
  left: 18.75%;
  top: -14.815%;
  opacity: 0.22;
  background: radial-gradient(circle, #00D1FF 0%, #00D1FF00 68%);
  animation:
    cb-drift-5 6.9s ease-in-out infinite alternate,
    cb-breathe-5 4.75s ease-in-out infinite alternate;
}
@keyframes cb-drift-5 {
  from { translate: 0 0; }
  to   { translate: -11.765% 8.824%; }
}
@keyframes cb-breathe-5 {
  from { scale: 0.94; }
  to   { scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob { animation: none !important; }
}