/* Amber Lan · glass system (22 Oct 2026).

   Loaded last on every page, after liquid.css, with assets/glass.js.
   Removing those two tags puts the site back exactly as it was.

   The hero stage already spoke this language: lit glass over a violet sky.
   The rest of the site did not. This layer carries it through.

   1. Light under every section, so glass has something to refract. The
      sky's lilac and indigo return behind each block, alternating sides,
      and drift a little as the page scrolls.
   2. One panel. Every card, tray and tile on the site is the hero card:
      clear glass, lilac in its shadow, a line of light along the top edge.
   3. Three tiers of text. A headline, one voice line beneath it, and quiet
      meta for labels and sources. Nothing else competes.
   4. Rhythm. Less air between sections, more air inside them.

   Buttons do not change: amber stays the one action colour. */

@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 10%; }

:root {
  --g-lilac: 132, 112, 168;
  --g-indigo: 70, 64, 128;
  --g-gold: 242, 185, 63;

  /* 2. one glass */
  --pane:
    linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.55) 50%, transparent 90%) top / 100% 1px no-repeat,
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025) 56%, rgba(var(--g-lilac), 0.07)),
    rgba(20, 18, 28, 0.22);
  --pane-hover:
    linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.75) 50%, transparent 90%) top / 100% 1px no-repeat,
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 56%, rgba(var(--g-lilac), 0.09)),
    rgba(24, 22, 34, 0.26);
  --pane-line: rgba(255, 255, 255, 0.13);
  --pane-line-hover: rgba(255, 255, 255, 0.24);
  --pane-edge: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --pane-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.72);
  --pane-blur: blur(18px) saturate(170%);
  --pane-r: 22px;
  --sheen: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.10), rgba(var(--g-lilac), 0.05) 36%, transparent 64%);

  /* 3. three tiers of text */
  --tier-voice: rgba(240, 238, 248, 0.66);
  --tier-meta: rgba(240, 238, 248, 0.48);
  --t-meta: 0.8125rem;
  --t-voice: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --t-card: clamp(1.2rem, 1.5vw, 1.45rem);
  --h2: clamp(2rem, 3.3vw, 2.875rem);

  /* 4. rhythm */
  --section: clamp(5.5rem, 10vw, 8.5rem);
  --space-block: clamp(3rem, 6vw, 4.5rem);
  --space-band: clamp(2.5rem, 5vw, 3.5rem);
  --space-tight: clamp(2rem, 4vw, 3rem);
}

/* ---- 1. Light under every section ------------------------------------------ */
main > section:not(.hero):not(.contact) {
  background:
    radial-gradient(42% 58% at var(--gx, 10%) 26%, rgba(var(--g-lilac), 0.2), transparent 70%),
    radial-gradient(36% 50% at calc(100% - var(--gx, 10%)) 78%, rgba(var(--g-indigo), 0.16), transparent 72%);
}
main > section:not(.hero):not(.contact):nth-of-type(even) {
  background:
    radial-gradient(42% 58% at calc(100% - var(--gx, 10%)) 26%, rgba(var(--g-lilac), 0.18), transparent 70%),
    radial-gradient(36% 50% at var(--gx, 10%) 78%, rgba(var(--g-indigo), 0.16), transparent 72%);
}
/* The light moves with the page: slowly, and only where the browser can tie motion to scroll. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(.hero):not(.contact) {
      animation: glass-drift linear both;
      animation-timeline: view();
    }
    @keyframes glass-drift { from { --gx: 0%; } to { --gx: 22%; } }
  }
}
/* The stats band stops being a flat strip; the figures sit on the light like everything else. */
#value::after { display: none; }
/* The closer keeps its lilac pool, a little wider. */
.contact::before {
  width: min(96vw, 72rem); height: 84%;
  background: radial-gradient(closest-side, rgba(var(--g-gold), 0.07), rgba(var(--g-lilac), 0.16) 42%, transparent 74%);
}

/* ---- 2. One panel ------------------------------------------------------------- */
.doors, .job, .install, .outcome, .offer, .flagship, .form-thanks, .sx__doc,
.team__hq, .team__col, .team__review, .dgrid, .buys-band .fig,
.grid > .part.case, .proof-card, .tpl-card, .path, .glass, .compound,
.poss, .rule, .split__col, .pv-card,
.receipt, .qa-card, .work-card,
.pp-card, .pp-table, .pp-contact,
.post-card__figure, .article-figure, .featured, .versus::before {
  border: 1px solid var(--pane-line);
  border-radius: var(--pane-r);
  background: var(--sheen), var(--pane);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-edge), var(--pane-shadow);
}
/* Tiles in a grid carry no drop shadow of their own; the grid is one sheet. */
.team__col, .poss, .rule, .path, .glass, .compound, .split__col, .pv-card, .receipt, .qa-card, .post-card__figure, .article-figure, .door {
  box-shadow: var(--pane-edge);
}
.doors { overflow: hidden; }
.door + .door { border-left-color: rgba(255, 255, 255, 0.08); }
.door:hover { background: rgba(255, 255, 255, 0.035); }
.versus::before { border-radius: var(--pane-r); }
/* Guide figures are drawn on a transparent ground (scripts/figures.py), so the line sits on the glass. */
.post-card__figure, .article-figure { border-radius: var(--pane-r); }

/* Linked panels lift and brighten. */
a.job, a.part.case, a.proof-card, a.path, a.flagship, a.tpl-card, .tpl-card, .post-card__figure {
  transition: transform 560ms var(--ease-spring), border-color 320ms var(--ease-out), background 320ms var(--ease-out), box-shadow 560ms var(--ease-spring);
}
a.job:hover, a.part.case:hover, a.proof-card:hover, a.path:hover, a.flagship:hover, a.tpl-card:hover, .tpl-card:hover, .post-card:hover .post-card__figure, .glass:hover {
  border-color: var(--pane-line-hover);
  background: var(--sheen), var(--pane-hover);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  a.job:hover, a.part.case:hover, a.proof-card:hover, a.path:hover, a.flagship:hover, .tpl-card:hover, .post-card:hover .post-card__figure { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .doors, .job, .install, .outcome, .offer, .flagship, .form-thanks, .sx__doc, .team__hq, .team__col, .team__review, .dgrid,
  .buys-band .fig, .grid > .part.case, .proof-card, .tpl-card, .path, .glass, .compound, .poss, .rule, .split__col, .pv-card,
  .receipt, .qa-card, .work-card, .pp-card, .pp-table, .pp-contact, .post-card__figure, .featured, .versus::before {
    background: #16141e; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Fields are the same glass, lit along the top edge. */
.plan-form input, .plan-form textarea, .contact-form input, .contact-form textarea, .tool input, .tool select, .calc input {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.plan-form input:focus, .plan-form textarea:focus, .contact-form input:focus, .contact-form textarea:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

/* The install line: code in a clear pill, the copy button beside it. */
.install code { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }

/* Disclosure rows stay hairlines, but the marker is a glass bead. */
.faq summary::after, .more-jobs > summary::after {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ---- 3. Three tiers of text ------------------------------------------------------ */
h2 { font-size: var(--h2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; max-width: 22ch; }
/* Inside the page, every section reads from the left edge; only the hero and the closer are centred. */
main > section:not(.hero):not(.contact) .stack, main > section:not(.hero):not(.contact).centered { text-align: left; }
main > section:not(.hero):not(.contact) .stack > .lead, main > section:not(.hero):not(.contact) .stack > .small { margin-inline: 0; }
main > section:not(.hero):not(.contact) .stack > .cta-row { justify-content: flex-start; }
.hero h2, .contact h2 { margin-inline: auto; }

/* The voice line: one sentence under a headline. */
.stack > .lead, .lead { font-size: var(--t-voice); color: var(--tier-voice); line-height: 1.5; max-width: 44ch; letter-spacing: -0.005em; }
.stack > h2 + .lead { margin-top: var(--s-5); }
.hero .stack > .lead { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); color: var(--muted); max-width: 42ch; }
.hero .stack > h1 + .lead { margin-top: var(--s-6); }
.stack > .lead + .cta-row, .stack > h2 + .cta-row { margin-top: var(--s-7); }

/* Meta: labels, sources, notes. Small, quiet, sentence case. */
.stack > .eyebrow,
.door__who, .job__who, .job__receipt, .proof-row__kind, .steps__n, .stat-src, .small, .plan-form__note,
.demo__kicker, .demo__note, .who__name, .post-card__meta, .skill-meta, .byline, .vlabel,
.more-jobs > summary, .versus-label, .versus-head, .tpl-crumb, .pillars .pillar .steps__n {
  font-size: var(--t-meta); color: var(--tier-meta); font-weight: 450; letter-spacing: 0.005em; line-height: 1.45; text-transform: none;
}
.stack > .eyebrow { font-weight: 500; }
.stack > .eyebrow + h2 { margin-top: var(--s-4); }
.hero .stack > .eyebrow { font-size: var(--t-meta); color: var(--muted); }
.who__name { color: var(--fg); font-size: 0.9375rem; font-weight: 500; }
.versus-us-head { color: var(--fg); font-weight: 500; }
.post-card__meta { letter-spacing: 0.005em; }

/* Card headline: one mid-weight line. */
.door h3, .job h3, .outcome h3, .proof-row__body h3, .pillars .pillar h3, .steps h3,
.team__col h3, .part h3, .tpl-card h3, .poss h3, .rule h3, .flagship h3, .post-card__title, .split__col h3 {
  font-size: var(--t-card); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
.post-card--lead .post-card__title { font-size: clamp(1.75rem, 2.8vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; }
.post-card__title { font-weight: 500; }

/* Card body: one voice line, never a paragraph. */
.door p:not(.door__who), .job__week, .proof-row__body p, .pillars .pillar p, .steps p, .outcome > p,
.part p, .tpl-card p, .poss p, .rule p, .team__col > p, .post-card__desc, .flagship p, .split__col p, .who__text p:not(.who__name), .stat-label {
  font-size: 0.9375rem; color: var(--tier-voice); line-height: 1.5; letter-spacing: -0.003em;
}
.job__week b { color: var(--fg); font-weight: 500; }
.job { gap: var(--s-4); padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.job .text-link, .door .text-link { font-size: 0.9375rem; }
.door { gap: var(--s-4); padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.door h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }

/* The four figures: the number leads, the label is one line. */
.stat-num { font-weight: 500; letter-spacing: -0.035em; }
.stat .stat-label { max-width: 24ch; }

/* The comparison table: quieter cells. */
.versus-them, .versus-us { font-size: 0.9375rem; line-height: 1.5; }
.versus-us { color: var(--fg); }

/* The run beneath the hero: the case line is the headline, the story its voice line. */
.demo__case { font-weight: 500; letter-spacing: -0.025em; }
.demo__story { color: var(--tier-voice); }
.demo__note { margin-top: var(--s-5); }

/* ---- 4. Rhythm --------------------------------------------------------------------- */
section { padding-block: var(--section) calc(var(--section) * 0.9); }
.stack > * + * { margin-top: var(--s-5); }
.doors, .jobs, .grid, .proof-list, .versus, .faq, .steps { margin-top: var(--space-block); }
.who { margin-top: var(--space-block); padding-top: var(--space-tight); }
.who__img { width: 72px; height: 72px; }
.why-split { gap: clamp(2.5rem, 6vw, 5rem); }
.pillars .pillar { padding: var(--s-5) 0; }
.hero--home > .wrap > .demo { margin-top: clamp(4rem, 7vw, 6rem); }
.proof-row { padding: var(--s-5) 0; }
.more-jobs { margin-top: var(--s-6); }

/* ---- Phones --------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --pane-r: 18px; }
  h2 { max-width: none; }
  main > section:not(.hero):not(.contact),
  main > section:not(.hero):not(.contact):nth-of-type(even) {
    background:
      radial-gradient(70% 40% at 20% 20%, rgba(var(--g-lilac), 0.16), transparent 70%),
      radial-gradient(60% 36% at 90% 85%, rgba(var(--g-indigo), 0.13), transparent 72%);
  }
}

/* ---- 5. Inner heroes: one glass fact card ---------------------------------------
   The home stage floats two cards over the liquid. Every other hero now carries
   one, over the orb's crown, so each landing reads the same in five seconds.
   It is a .liquid-card, so liquid.js gives it the same sheen and tilt. */
.hero .hero-fact {
  position: absolute; z-index: 2;
  right: clamp(1.25rem, 11vw, 13rem); bottom: clamp(2rem, 6vw, 6rem);
  width: clamp(190px, 17vw, 236px); text-align: left;
}
.hero.has-orb .hero-fact { bottom: clamp(3rem, 7.5vw, 7.5rem); }
.hero-fact .liquid-card__big { margin-top: var(--s-3); font-size: clamp(1.5rem, 2vw, 1.85rem); white-space: nowrap; }
.hero-fact .liquid-card__label, .hero-fact .liquid-card__note { grid-column: 1 / -1; }
/* The card is a direct child of the hero, outside .wrap, so it measures from the hero's own foot. */
@media (max-width: 900px) {
  .hero .hero-fact, .hero.has-orb .hero-fact {
    position: static; width: min(100% - (var(--gutter) * 2), 22rem); margin: var(--s-7) auto 0;
  }
  .hero.has-orb { padding-bottom: clamp(6rem, 14vw, 10rem); }
}
@media (max-width: 640px) { .hero .hero-fact { margin-inline: var(--gutter); } }

/* ---- 6. Long lists breathe: a sticky rail for the skill library and the glossary ---- */
@media (min-width: 1081px) {
  .library > .wrap {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  }
  .library > .wrap > .stack { grid-column: 1 / -1; }
  .library .controls {
    grid-column: 1; position: sticky; top: 6rem; z-index: 2;
    margin-top: var(--space-block); padding: 0; border: 0; background: none; overflow: visible;
  }
  .library .controls-top { grid-template-columns: 1fr; gap: var(--s-3); }
  .library .result-count { white-space: normal; font-size: var(--t-meta); color: var(--tier-meta); }
  .library .filters { flex-direction: column; align-items: stretch; gap: 2px; margin-top: var(--s-5); }
  .library .filter {
    text-align: left; padding: 0.55rem 0.8rem; border-color: transparent; border-radius: 10px;
    font-size: 0.9rem; font-weight: 450; color: var(--tier-voice);
  }
  .library .filter:hover { border-color: transparent; background: rgba(255, 255, 255, 0.05); color: var(--fg); }
  .library .filter[aria-pressed="true"] { border-color: transparent; background: rgba(255, 255, 255, 0.08); color: var(--fg); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
  .library .skills-grid, .library .empty-state { grid-column: 2; margin-top: var(--space-block); }

  .glossary > .wrap {
    display: grid; grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  }
  .glossary__jump {
    position: sticky; top: 6rem; display: grid; grid-template-columns: repeat(4, 2.25rem); gap: 2px;
    justify-content: start; margin: 0;
  }
  .glossary__jump a {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px;
    color: var(--tier-voice); font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  }
  .glossary__jump a:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
  .glossary__jump a[aria-current="true"] { background: rgba(255, 255, 255, 0.09); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
  .glossary__list.narrow { margin-inline: 0; }
  .glossary__letter:first-child { margin-top: 0; }
}
.library .search {
  padding: 0.7rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); font-size: 0.95rem;
}
.library .search:focus { border-color: rgba(255, 255, 255, 0.3); }

/* ---- 7. Guides open on the answer: the short answer is a glass card under the title ---- */
.short-answer {
  border: 1px solid var(--pane-line); border-radius: var(--pane-r);
  background: var(--sheen), var(--pane);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-edge), var(--pane-shadow);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
}
.short-answer__label { font-size: var(--t-meta); color: var(--tier-meta); font-weight: 500; letter-spacing: 0.005em; text-transform: none; }
.short-answer__text { margin-top: var(--s-2); color: var(--fg); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; }
.article-hero .lead { color: var(--tier-voice); }
.article-hero .byline { margin-top: var(--s-5); }
@media (prefers-reduced-transparency: reduce) { .short-answer { background: #16141e; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- 8. The hero frame opens at its foot ---------------------------------------
   The stage used to stop on a hard edge with the liquid cut off against it.
   The frame now lives on ::before and fades out over the lower third, and the
   liquid and its floor light fade with it, so the stage dissolves into the page. */
.liquid-stage { border-color: transparent; background: none; box-shadow: none; }
.liquid-stage::before {
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='44' cy='98' r='.8' opacity='.6'/%3E%3Ccircle cx='190' cy='36' r='.6' opacity='.45'/%3E%3Ccircle cx='331' cy='141' r='.9' opacity='.55'/%3E%3Ccircle cx='468' cy='60' r='.6' opacity='.4'/%3E%3Ccircle cx='402' cy='300' r='.7' opacity='.45'/%3E%3Ccircle cx='96' cy='352' r='.6' opacity='.4'/%3E%3Ccircle cx='255' cy='447' r='.8' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 520px 520px,
    radial-gradient(70% 60% at 0% 0%, rgba(var(--g-lilac), 0.3), transparent 62%),
    radial-gradient(50% 40% at 100% 0%, rgba(var(--g-indigo), 0.18), transparent 70%),
    linear-gradient(180deg, rgba(16, 15, 21, 0.92), rgba(9, 9, 12, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, 0.6) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, 0.6) 76%, transparent 100%);
}
.liquid-stage__floor .liquid-orb, .liquid-stage__floor::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 46%, transparent 94%);
}

/* ---- 9. Air -----------------------------------------------------------------------
   The stage breathes above and below its copy, the run sits well clear of it,
   and sections sit a little further apart again now that each one is lighter. */
:root { --section: clamp(6.5rem, 12vw, 10rem); }
.liquid-stage { padding-top: clamp(4rem, 8vw, 6.5rem); }
.hero .liquid-stage .stack > h1 + .lead { margin-top: var(--s-7); }
.hero .liquid-stage .stack > .cta-row { margin-top: var(--s-8); }
.liquid-stage__floor { margin-top: clamp(1.5rem, 3.5vw, 3rem); }
.hero--home > .wrap > .demo { margin-top: clamp(6rem, 11vw, 10rem); }
.demo__head { margin-bottom: var(--s-8); }
.hero--home .demo__legend, .hero--home .demo__note { margin-top: var(--s-7); }
@media (max-width: 720px) { .hero--home > .wrap > .demo { margin-top: clamp(4rem, 14vw, 6rem); } }

/* ---- 10. Fewer words, more drawing -----------------------------------------------
   Where a block was carrying its idea in sentences, it now carries it in a line
   drawing or a diagram and the sentence becomes the caption. */

/* The four sprints: each card opens on a drawing in the figure language. */
.job__art {
  display: block; height: clamp(104px, 9vw, 128px); margin: -0.25rem 0 var(--s-2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
}
.job__art svg { display: block; width: 100%; height: 100%; }
.job:hover .job__art { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)); }

/* Day 0, day 2, week 1: a rail with three beads, the last one lit. */
.pillars.steps-split { position: relative; padding-left: 2.25rem; }
.pillars.steps-split::before {
  content: ""; position: absolute; left: 4px; top: 2rem; bottom: 2rem; width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(var(--g-gold), 0.7));
}
.pillars.steps-split .pillar { position: relative; border: 0; padding: var(--s-5) 0; }
.pillars.steps-split .pillar::before {
  content: ""; position: absolute; left: -2.25rem; top: calc(var(--s-5) + 0.45em); width: 9px; height: 9px; border-radius: 50%;
  background: var(--glass-clear); box-shadow: var(--glass-clear-edge), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.pillars.steps-split .pillar:last-child::before { background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }

/* Numbered steps elsewhere (Contact, Templates, Services): a bead on each hairline, the last one lit. */
.grid > .step { position: relative; }
.grid > .step::before {
  content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--glass-clear); box-shadow: var(--glass-clear-edge), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.grid > .step:last-child::before { background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }

/* The manifesto in one line: marketing, the layer, the agents. */
.layer-flow {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3);
  margin-top: var(--s-7); text-align: left;
}
.layer-flow__node {
  display: grid; gap: 2px; padding: 0.8rem 1.1rem; min-width: 9.5rem;
  border: 1px solid var(--pane-line); border-radius: 14px;
  background: var(--pane); box-shadow: var(--pane-edge);
  color: var(--fg); font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
}
.layer-flow__node small { color: var(--tier-meta); font-size: var(--t-meta); font-weight: 450; letter-spacing: 0.005em; }
.layer-flow__node.is-core { border-color: rgba(var(--g-gold), 0.45); box-shadow: var(--pane-edge), inset 0 0 0 1px rgba(var(--g-gold), 0.12), 0 0 24px -8px rgba(var(--g-gold), 0.35); }
.layer-flow__arrow { position: relative; flex: 1 1 2.5rem; max-width: 5rem; height: 1px; background: rgba(255, 255, 255, 0.22); }
.layer-flow__arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.45); border-right: 1px solid rgba(255, 255, 255, 0.45);
  transform: translateY(-50%) rotate(45deg);
}
.layer-flow + .cta-row { margin-top: var(--s-6); }
@media (max-width: 720px) {
  .layer-flow { flex-direction: column; align-items: stretch; }
  .layer-flow__arrow { flex: none; width: 1px; height: 1.5rem; max-width: none; margin-left: 1.5rem; }
  .layer-flow__arrow::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
}

/* ---- 11. Conversion pass (23 Oct 2026) --------------------------------------------
   The offer is a written plan with a fixed price, in two working days. The page
   now says so where people decide: the button asks for the plan, the hero cards
   carry the offer and the proof, the plan itself appears as a document, the
   figures become the page's big moment, and the form asks for the plan too. */

/* The offer, one line under the buttons; the hiring link stays, quietly. */
.hero .stack > .cta-row + .hero-offer { margin-top: var(--s-5); }
.hero-offer {
  max-width: none; margin-inline: auto; color: var(--tier-meta);
  font-size: var(--t-meta); font-weight: 450; letter-spacing: 0.005em; line-height: 1.6; text-wrap: balance;
}
.hero-offer__alt { margin-left: var(--s-3); color: var(--tier-voice); border-bottom: 1px solid rgba(255, 255, 255, 0.2); text-decoration: none; white-space: nowrap; }
.hero-offer__alt:hover { color: var(--fg); border-color: var(--fg); }
@media (max-width: 640px) { .hero-offer { margin-inline: 0; } .hero-offer__alt { display: inline-block; margin: var(--s-2) 0 0; } }

/* Hero cards: the offer and the proof, both links, no stray bar. */
.liquid-card__note { display: block; }
.liquid-card--right .liquid-card__bar { display: none; }

/* The written plan, as a document you can see. */
.plan-sheet {
  position: relative; justify-self: center; width: min(100%, 30rem);
  padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.5rem, 2.8vw, 2.25rem) clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--pane-line); border-radius: var(--pane-r);
  background: var(--sheen), var(--pane);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-edge), var(--pane-shadow);
  color: var(--fg); font-size: 0.8125rem; line-height: 1.4; text-align: left;
}
.plan-sheet .sk { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.plan-sheet .sk + .sk { margin-top: 6px; }
.plan-sheet .sk.hl { width: 4.5rem; height: 8px; background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }
.plan-sheet__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.plan-sheet__top b { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; }
.plan-sheet__top span, .plan-sheet__k { color: var(--tier-meta); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.005em; }
.plan-sheet__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-5) 0; }
.plan-sheet__cols .plan-sheet__k { display: block; margin-bottom: 8px; color: var(--fg); font-weight: 500; }
.plan-sheet > .plan-sheet__k { display: block; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.plan-sheet__seq { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 6px; }
.plan-sheet__seq li { display: grid; grid-template-columns: 3.6rem 6rem minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.plan-sheet__seq span { color: var(--tier-meta); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.plan-sheet__seq b { font-weight: 500; }
.plan-sheet__seq i { display: block; height: 6px; width: var(--w, 50%); border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(var(--g-gold), 0.55)); transition: width 1.2s var(--ease-out); }
.js .plan-sheet.is-hidden .plan-sheet__seq i, .js .reveal.is-hidden .plan-sheet__seq i { width: 0; }
.plan-sheet__price { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.plan-sheet__price span { color: var(--fg); font-weight: 500; }
.plan-sheet__sign { margin: var(--s-4) 0 0; color: var(--tier-meta); font-size: 0.75rem; }
.plan-sheet::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}
/* In the split, the steps sit in the narrow column: title above its line. */
.why-split > .stack > .pillars.plan-steps { margin-top: var(--s-6); }
.pillars.plan-steps .pillar { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; }
.pillars.plan-steps .pillar h3 { font-size: 1.05rem; }
.pillars.plan-steps .pillar p { font-size: 0.9375rem; }
.pillars.plan-steps .pillar::before { top: calc(var(--s-4) + 0.4em); }
.pillars.plan-steps::before { top: 1.4rem; bottom: 1.4rem; }
.why-split > .stack > .pillars + .cta-row { margin-top: var(--s-6); }
@media (max-width: 900px) { .plan-sheet { justify-self: stretch; width: 100%; margin-top: var(--s-6); } }
@media (max-width: 480px) { .plan-sheet__cols { grid-template-columns: 1fr; gap: var(--s-3); } .plan-sheet__seq li { grid-template-columns: 3.4rem 5rem minmax(0, 1fr); } }

/* The business case: the figures are the page's big moment, two to a row so each has room. */
.stat-num { font-size: clamp(3rem, 5.6vw, 5.25rem); letter-spacing: -0.045em; line-height: 0.98; white-space: nowrap; }
.stat .fig__art { margin-bottom: var(--s-5); }
.stat .stat-label { max-width: 30ch; }
@media (min-width: 901px) {
  #value .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9) var(--s-9); }
  #value .value-grid .stat { padding: 0; border-left: 0; }
  #value .value-grid .stat:nth-child(even) { padding-left: var(--s-8); border-left: 1px solid var(--hair); }
  #value .value-grid .stat:nth-child(n + 3) { padding-top: var(--s-8); border-top: 1px solid var(--hair); }
}

/* ---- 12. The hero is the run (23 Oct 2026) -------------------------------------
   On wide screens the home hero pins for two and a half screens of scroll.
   First the promise and the liquid at rest. Then, as you scroll, the copy lifts
   away, the frame dissolves, the liquid shrinks toward the centre and the
   workspace rises to meet it, so the orb becomes the dot that does the work.
   Then the run plays while the window holds, and the page continues.
   glass.js writes --p (0 to 1) on the section; everything else is CSS.
   Phones, reduced motion and no JS keep the stacked layout. */
.hero--run {
  --p: 0;
  --a: clamp(0, calc((var(--p) - 0.14) / 0.2), 1);   /* the copy and the frame lift away */
  --o: clamp(0, calc((var(--p) - 0.2) / 0.34), 1);   /* the liquid shrinks toward the centre */
  --w: clamp(0, calc((var(--p) - 0.3) / 0.26), 1);   /* the workspace rises to meet it */
}
.run-hint {
  margin: var(--s-6) auto 0; padding: 0 0 var(--s-5); color: var(--tier-meta);
  font-size: var(--t-meta); letter-spacing: 0.005em; text-align: center;
}
.run-hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .run-hint { display: none; } }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .has-glass .hero--run { padding-top: 0; }
  .has-glass .hero--run .run-track { height: calc(100vh + 230vh); }
  .has-glass .hero--run .run-pin {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: grid; align-content: start;
    padding-top: clamp(4.5rem, 7vh, 6rem);
  }
  /* The stage at rest, then lifting away. */
  .has-glass .hero--run .liquid-stage { padding-top: clamp(2rem, 5vh, 3.5rem); }
  .has-glass .hero--run .liquid-stage__floor { height: clamp(240px, 32vh, 400px); margin-top: clamp(0.5rem, 2vh, 1.5rem); }
  .has-glass .hero--run .liquid-stage > .stack {
    transform: translateY(calc(var(--a) * -56px));
    opacity: clamp(0, calc(1 - var(--a) * 1.25), 1);
  }
  .has-glass .hero--run .liquid-stage::before, .has-glass .hero--run .liquid-stage::after { opacity: clamp(0, calc(1 - var(--a) * 1.3), 1); }
  .has-glass .hero--run .run-hint { opacity: clamp(0, calc(1 - var(--a) * 3), 1); }
  /* The liquid shrinks toward the centre of the screen and gives way to the dot. */
  .has-glass .hero--run .liquid-stage__floor {
    transform-origin: 50% 45%;
    transform: translateY(calc(var(--o) * -34vh)) scale(calc(1 - var(--o) * 0.66));
    opacity: clamp(0, calc(1 - var(--o) * 1.1), 1);
  }
  /* The two cards shrink away first; their own keyframes own opacity, so scale does the work. */
  .has-glass .hero--run .liquid-stage__floor .liquid-card { scale: clamp(0, calc(1 - var(--a) * 1.6), 1); transform-origin: 50% 50%; }
  /* The workspace rises from the foot of the screen to the centre. */
  .has-glass .hero--run .run-wrap {
    position: absolute; inset: 0; z-index: 3;
    display: grid; align-content: center; justify-items: stretch;
    padding-top: clamp(4.5rem, 7vh, 6rem);
    transform: translateY(calc((1 - var(--w)) * 80vh));
    opacity: var(--w);
    pointer-events: none;
  }
  .has-glass .hero--run.is-run .run-wrap { pointer-events: auto; }
  .has-glass .hero--run .run-wrap > .demo { margin-top: 0; width: 100%; }
  .has-glass .hero--run .demo__head { margin-bottom: var(--s-4); }
  .has-glass .hero--run .demo__case { font-size: clamp(1.4rem, 2.3vw, 1.9rem); }
  .has-glass .hero--run .demo__story { margin-top: var(--s-2); font-size: clamp(0.95rem, 1.1vw, 1.0625rem); }
  .has-glass .hero--run .demo__note { margin-top: var(--s-4); }
  /* The sheet fits a short viewport. */
  .has-glass .hero--run .rs { --rs-row: 0.42rem; --rs-gap: var(--s-4); padding-top: clamp(1.1rem, 2vh, 1.6rem); padding-bottom: clamp(1rem, 1.6vh, 1.3rem); }
  .has-glass .hero--run .rs__brief { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
  .has-glass .hero--run .rs__tabs-k { margin: var(--s-4) 0 var(--s-2); }
}

/* ---- 13. The mark, and no face on the button (23 Oct 2026) ----------------------
   The header mark and the favicon are Amber's AL monogram; the arrow bead on
   amber buttons stays an arrow on hover instead of turning into the dot's face. */
.btn-primary:hover::after, .site-header__nav .site-header__cta:hover::after, .site-menu .site-header__cta:hover::after {
  content: "\2197";
  background-image: none;
  background-color: rgba(14, 14, 13, 0.16);
}
.site-header__brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
.site-footer__mark { width: 20px; height: 20px; }

/* ---- 14. Fewer words, a fuller plan, and inner heroes that hand over (23 Oct 2026) ----
   The three steps are titles on a rail. The sprint cards are a drawing, a
   situation, a promise and a link. The plan document now maps the ten agents
   under their three outcomes and stands as tall as the column beside it. */
.pillars.plan-steps .pillar h3 { font-size: 1.1rem; }
.pillars.plan-steps .pillar { padding: var(--s-4) 0; }
.plan-sheet--full { align-self: stretch; display: flex; flex-direction: column; }
.plan-sheet--full .plan-sheet__cols { margin-bottom: 0; }
.plan-sheet__agents { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.plan-sheet__agents li { display: grid; grid-template-columns: minmax(4.6rem, auto) minmax(0, 1fr); gap: 8px; align-items: center; }
.plan-sheet__agents b { color: var(--tier-voice); font-size: 0.78rem; font-weight: 450; white-space: nowrap; }
.plan-sheet__agents i { display: block; height: 5px; width: var(--w, 50%); border-radius: 3px; background: rgba(255, 255, 255, 0.13); transition: width 1.2s var(--ease-out); }
.js .reveal.is-hidden .plan-sheet__agents i { width: 0; }
.plan-sheet--full > .plan-sheet__k { margin-top: auto; padding-top: var(--s-5); }
.why-split > .stack { position: static; }
@media (max-width: 480px) { .plan-sheet__agents li { grid-template-columns: 4.2rem minmax(0, 1fr); } }

/* The services page: the one-paragraph answer stays for answer engines, as a quiet line. */
/* The services page: the one-paragraph answer for answer engines, set as a
   quiet row after the agents grid: a label on the left, the paragraph and
   three place chips on the right, everything on the section's own left edge. */
.svc-intro { padding-block: 0 var(--space-block); }
.svc-intro__row {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s-4) clamp(2rem, 5vw, 4rem); align-items: start;
  padding-top: var(--space-tight); border-top: 1px solid var(--hair); text-align: left;
}
.svc-intro__k { margin: 0; font-size: var(--t-meta); color: var(--tier-meta); font-weight: 500; line-height: 1.5; }
.svc-intro .svc-answer { margin: 0; max-width: 62ch; color: var(--tier-voice); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.svc-intro .svc-places { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-4) 0 0; }
.svc-intro .chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.95rem;
  border: 1px solid var(--pane-line); border-radius: 999px; background: var(--pane); box-shadow: var(--pane-edge);
  color: var(--fg); font-size: 0.875rem; text-decoration: none;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.svc-intro .chip:hover { border-color: var(--pane-line-hover); background: var(--pane-hover); }
@media (max-width: 720px) { .svc-intro__row { grid-template-columns: 1fr; gap: var(--s-3); } }

/* Inner heroes hand over the way the home does: the hero pins, the copy lifts
   away, the quiet orb shrinks and fades, and the next frame rises over it.
   glass.js writes --p on .rise-track. Phones and reduced motion keep the page as it was. */
.rise-track { position: relative; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .has-glass .rise-track {
    --p: 0;
    --a: clamp(0, calc((var(--p) - 0.06) / 0.3), 1);
    --o: clamp(0, calc((var(--p) - 0.25) / 0.55), 1);
    height: calc(100vh + 70vh);
  }
  .has-glass .rise-track > .hero, .has-glass .rise-track > .hero.has-orb {
    position: sticky; top: 0; height: 100vh; box-sizing: border-box; margin: 0;
    padding-top: clamp(6.5rem, 12vh, 9rem); padding-bottom: 0; overflow: hidden;
  }
  .has-glass .rise-track > .hero > .wrap {
    transform: translateY(calc(var(--a) * -56px));
    opacity: clamp(0, calc(1 - var(--a) * 1.25), 1);
  }
  .has-glass .rise-track > .hero .hero-fact { scale: clamp(0, calc(1 - var(--a) * 1.6), 1); transform-origin: 50% 50%; }
  /* The quiet orb is centred with margins instead of a transform, so the scroll can
     scale it about its own centre; its entrance is its own, on filter and translate. */
  .has-glass .rise-track > .hero .liquid-orb--quiet {
    left: 0; right: 0; margin-inline: auto; transform: none; opacity: 0.7;
    transform-origin: 50% 70%;
    translate: 0 calc(var(--o) * -12vh);
    scale: calc(1 - var(--o) * 0.55);
    filter: opacity(calc(1 - var(--o)));
    animation: rise-orb-in 1600ms var(--ease-spring) 300ms both;
  }
  @keyframes rise-orb-in { from { filter: opacity(0); translate: 0 24px; } }
  .has-glass .rise-track > .hero .hero-fact, .has-glass .rise-track > .hero.has-orb .hero-fact { bottom: clamp(5rem, 12vh, 9rem); }
  /* The next frame starts rising while the hero is still pinned. */
  .has-glass .rise-track + section { position: relative; z-index: 2; margin-top: -70vh; background: none; }
  /* Its light is painted on a layer that fades in from the top, so no edge shows as it rises over the hero. */
  .has-glass .rise-track + section::before {
    content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    width: auto; height: auto; left: 0; transform: none; border: 0;
    background:
      radial-gradient(42% 58% at 12% 36%, rgba(var(--g-lilac), 0.2), transparent 70%),
      radial-gradient(36% 50% at 88% 80%, rgba(var(--g-indigo), 0.16), transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%);
    mask-image: linear-gradient(to bottom, transparent, #000 38%);
  }
}

/* ---- 15. The run sheet (23 Oct 2026) ---------------------------------------------
   The demo was a chat window with a sidebar, bubbles and an input, and a long
   overlay played over it. It is now one document on glass: the brief typed in,
   three steps lit on a rail, the work that came back as rows, and one amber
   button to approve. Four runs for an accounting firm; tabs replay them. */
.rs {
  --rs-row: 0.55rem; --rs-gap: var(--s-5);
  position: relative; max-width: 58rem; margin: 0 auto;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.8vw, 2.4rem) clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid var(--pane-line); border-radius: var(--pane-r);
  background: var(--sheen), var(--pane);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-edge), var(--pane-shadow);
  color: var(--fg); text-align: left; font-size: 0.9375rem; line-height: 1.45;
}
.rs::after { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); }
.rs__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--t-meta); color: var(--tier-meta); }
.rs__agent { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); font-weight: 500; white-space: nowrap; }
.rs__agent b { font-weight: 500; }
.rs__dot { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px 0; }
.rs__dot .fdot--rs { display: block; width: 30px; height: 30px; overflow: visible; }
.rs__bead { width: 8px; height: 8px; border-radius: 50%; background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }
.rs__status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rs__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background-color 300ms; }
.rs.is-working .rs__status::before { background: var(--accent); animation: rs-pulse 0.9s ease-in-out infinite alternate; }
.rs__k { margin: var(--rs-gap) 0 var(--s-2); font-size: var(--t-meta); color: var(--tier-meta); font-weight: 450; }
.rs__brief {
  margin: 0; min-height: 2.6em; max-width: 34ch;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--fg); text-wrap: pretty;
}
.rs__caret { display: inline-block; width: 2px; height: 0.95em; margin-left: 3px; vertical-align: -0.12em; background: var(--accent); animation: rs-caret 0.9s steps(2, jump-none) infinite; }
.rs__rail { list-style: none; margin: var(--rs-gap) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.rs__rail li { position: relative; padding-top: 16px; color: var(--tier-meta); font-size: 0.875rem; line-height: 1.35; transition: color 400ms var(--ease-out); }
.rs__rail li::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: rgba(255, 255, 255, 0.12); transition: background 500ms var(--ease-out); }
.rs__rail li::after { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--glass-clear); box-shadow: var(--glass-clear-edge), 0 0 0 1px rgba(255, 255, 255, 0.2); transition: background 400ms, box-shadow 400ms; }
.rs__rail li.is-on { color: var(--fg); }
.rs__rail li.is-on::before { background: linear-gradient(90deg, rgba(var(--g-gold), 0.75), rgba(255, 255, 255, 0.12)); }
.rs__rail li.is-on::after { background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }
.rs__rows { display: grid; }
.rs__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: var(--s-4); align-items: center;
  padding: var(--rs-row) 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 520ms var(--ease-out);
}
.rs__row.is-on { opacity: 1; transform: none; }
.rs__path { color: var(--fg); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs__row--mono .rs__path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; letter-spacing: -0.01em; }
.rs__meta { color: var(--tier-meta); font-size: var(--t-meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs__tick { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background 300ms, box-shadow 300ms; }
.rs__row.is-on .rs__tick { background: rgba(255, 255, 255, 0.34); }
.rs.is-approved .rs__tick { background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }
.rs__row--bar { grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; }
.rs__row--bar .rs__meta { text-align: right; }
.rs__track { display: block; height: 6px; border-radius: 3px; background: var(--glass-clear); box-shadow: var(--glass-clear-edge); overflow: hidden; }
.rs__track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--glass-grey); transition: width 1000ms var(--ease-out); }
.rs__row.is-on .rs__track i { width: var(--w, 40%); }
.rs__row--top .rs__track i { background: var(--glass-amber); box-shadow: var(--glass-amber-edge); }
.rs__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--rs-gap); padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transition: opacity 500ms var(--ease-out); }
.rs__bar.is-on { opacity: 1; }
.rs__note { font-size: var(--t-meta); color: var(--tier-meta); }
.rs__approve { min-height: 40px; font-size: 0.9rem; white-space: nowrap; }
.rs__approve::after { content: "\2713"; }
.rs__approve:disabled { opacity: 0.92; cursor: default; transform: none; }
/* The replay row reads as controls: a label, then four glass buttons, each
   carrying its agent's character; the one playing is ringed in amber. */
.rs__tabs-k { margin: var(--s-6) 0 var(--s-3); text-align: center; font-size: var(--t-meta); color: var(--tier-meta); font-weight: 500; }
.rs__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 0; }
.rs__tabs button {
  appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 1.1rem 0 0.55rem;
  border: 1px solid var(--pane-line); border-radius: 999px; background: var(--pane); box-shadow: var(--pane-edge);
  color: var(--fg); cursor: pointer; font: inherit; font-size: 0.9375rem; font-weight: 500;
  transition: transform 400ms var(--ease-out), border-color 200ms, background 200ms, box-shadow 400ms var(--ease-out);
}
.rs__tabs button:hover { border-color: var(--pane-line-hover); background: var(--pane-hover); transform: translateY(-2px); }
.rs__tabs button[aria-pressed="true"] {
  border-color: rgba(var(--g-gold), 0.6);
  box-shadow: var(--pane-edge), inset 0 0 0 1px rgba(var(--g-gold), 0.22), 0 0 28px -8px rgba(var(--g-gold), 0.5);
}
.rs__tab-face { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); transition: background 200ms; }
.rs__tab-face .fdot--tab { display: block; width: 28px; height: 28px; overflow: visible; }
.rs__tabs button[aria-pressed="true"] .rs__tab-face { background: rgba(var(--g-gold), 0.16); }
.rs__tabs button::after { content: "\21BB"; margin-left: 2px; color: var(--tier-meta); font-size: 0.95rem; transition: color 200ms; }
.rs__tabs button:hover::after, .rs__tabs button[aria-pressed="true"]::after { color: var(--accent); }
@media (max-width: 640px) { .rs__tabs { display: grid; grid-template-columns: 1fr 1fr; } .rs__tabs button { justify-content: flex-start; } }
.rs__tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes rs-caret { to { opacity: 0; } }
@keyframes rs-pulse { to { opacity: 0.35; } }
@media (max-width: 640px) {
  .rs { font-size: 0.9rem; }
  .rs__top { flex-wrap: wrap; gap: 6px 14px; }
  .rs__path { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; min-width: 0; }
  .rs__row--mono .rs__path { font-size: 0.76rem; }
  .rs__row { grid-template-columns: minmax(0, 1fr) auto 12px; gap: var(--s-3); }
  .rs__rail { grid-template-columns: 1fr; gap: var(--s-2); }
  .rs__rail li { padding: 0 0 0 18px; }
  .rs__rail li::before { display: none; }
  .rs__rail li::after { top: 0.45em; }
  .rs__row--bar { grid-template-columns: 5.2rem minmax(0, 1fr) 2.6rem; }
  .rs__bar { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .rs__row, .rs__bar, .rs__track i, .rs__rail li, .rs__rail li::before, .rs__rail li::after { transition: none; }
  .rs__caret, .rs.is-working .rs__status::before { animation: none; }
}

/* ---- 16. Black and grey (23 Oct 2026) ---------------------------------------------
   The violet night becomes a true black ground, and every tint that was lilac
   or indigo becomes neutral grey: the sky's haze, the light under each
   section, the glass in every panel, the header, the menu, the stage. Amber
   stays the one colour. */
:root {
  --bg: #000; --ink: #000;
  --fg: #f5f5f5;
  --muted: rgba(245, 245, 245, 0.74);
  --soft: rgba(245, 245, 245, 0.56);
  --tier-voice: rgba(245, 245, 245, 0.66);
  --tier-meta: rgba(245, 245, 245, 0.48);
  --lilac: 176, 176, 176; --indigo: 128, 128, 128;
  --g-lilac: 176, 176, 176; --g-indigo: 128, 128, 128;
  --core: rgba(22, 22, 22, 0.42);
  --ambient: 0 32px 80px -40px rgba(0, 0, 0, 0.9), 0 12px 32px -20px rgba(0, 0, 0, 0.7);
  --glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0.02)),
    rgba(20, 20, 20, 0.4);
  --pane:
    linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.55) 50%, transparent 90%) top / 100% 1px no-repeat,
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025) 56%, rgba(255, 255, 255, 0.05)),
    rgba(18, 18, 18, 0.24);
  --pane-hover:
    linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.75) 50%, transparent 90%) top / 100% 1px no-repeat,
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 56%, rgba(255, 255, 255, 0.07)),
    rgba(24, 24, 24, 0.28);
}
html { background: #000; }
body::before {
  background:
    radial-gradient(70% 55% at 0% 0%, rgba(255, 255, 255, 0.075), transparent 70%),
    radial-gradient(55% 50% at 100% 8%, rgba(255, 255, 255, 0.045), transparent 72%),
    radial-gradient(60% 45% at 50% 100%, rgba(255, 255, 255, 0.03), transparent 75%),
    linear-gradient(180deg, #0b0b0b 0%, #050505 40%, #000 100%);
}
.liquid-stage::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='44' cy='98' r='.8' opacity='.6'/%3E%3Ccircle cx='190' cy='36' r='.6' opacity='.45'/%3E%3Ccircle cx='331' cy='141' r='.9' opacity='.55'/%3E%3Ccircle cx='468' cy='60' r='.6' opacity='.4'/%3E%3Ccircle cx='402' cy='300' r='.7' opacity='.45'/%3E%3Ccircle cx='96' cy='352' r='.6' opacity='.4'/%3E%3Ccircle cx='255' cy='447' r='.8' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 520px 520px,
    radial-gradient(70% 60% at 0% 0%, rgba(255, 255, 255, 0.09), transparent 62%),
    radial-gradient(50% 40% at 100% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(180deg, rgba(12, 12, 12, 0.92), rgba(2, 2, 2, 0.97));
}
.liquid-card {
  background:
    radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.14), transparent 65%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025) 58%, rgba(255, 255, 255, 0.05)),
    rgba(18, 18, 18, 0.16);
}
.site-header__inner { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(12, 12, 12, 0.55); }
@media (max-width: 820px) { .site-menu { background: rgba(4, 4, 4, 0.88); } }
.sticky-cta { background: rgba(4, 4, 4, 0.78); }
.site-footer { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); }
.liquid-orb--static::before {
  background:
    radial-gradient(38% 22% at 34% 16%, rgba(255, 196, 96, 0.75), transparent 70%),
    radial-gradient(30% 18% at 70% 22%, rgba(255, 214, 140, 0.55), transparent 70%),
    radial-gradient(40% 30% at 62% 78%, rgba(200, 200, 210, 0.22), transparent 70%),
    radial-gradient(closest-side, #050505 82%, rgba(255, 255, 255, 0.85) 96%, transparent 100%);
}
@media (prefers-reduced-transparency: reduce) {
  .shell, .outcome, .proof-card.proof-text, .install, .offer, .sx__doc, .form-thanks, .flagship, .team__hq, .dgrid, .demo__win,
  .team__col, .poss, .rule, .pp-card, .path, .glass, .tpl-card, .grid > .part.case, .split__col, .buys-band .fig, .pp-table, .pp-contact,
  .compound, .team__review, .doors, .job, .proof-card, .receipt, .qa-card, .work-card, .post-card__figure, .article-figure, .featured,
  .versus::before, .short-answer, .plan-sheet, .rs, .site-header__inner { background: #141414; }
}

/* The phone header: brand, button and hamburger share one pill without overlapping. */
/* On phones the pill holds the mark, the name, the hamburger. The amber button
   lives in the menu and in the sticky bar that rises once the hero has passed,
   so one amber action is on screen at a time. */
@media (max-width: 820px) {
  .has-nav .site-header__inner { gap: 8px; padding: 5px 5px 5px 12px; }
  .site-header__brand { min-width: 0; flex: 1 1 auto; }
  .site-header__brand-text { white-space: nowrap; font-size: 15px; }
  .has-nav .site-header__nav .site-header__cta { display: none; }
  .has-nav .site-header__nav { flex: none; }
  .has-nav .site-header__menu { width: 40px; height: 40px; flex: none; }
  .site-menu .site-header__cta { display: inline-flex; }
}

/* ---- 17. One character per system on the services grid (23 Oct 2026) ---------
   Each cell opens on the agent's own dot character, drawn by dot.js from the
   data-fdot markup (see /dot), in a small glass bead. */
.sys-ico {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--tier-voice);
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.sys-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sys-ico .g { stroke: var(--accent); }
.sys-ico .f { fill: currentColor; stroke: none; }
.sys-ico .gf { fill: var(--accent); stroke: none; }
.dgrid li:hover .sys-ico { color: var(--fg); border-color: rgba(255, 255, 255, 0.2); }
.dgrid li > .sys-ico + .vlabel { display: none; }
.dgrid li > .sys-ico ~ b { padding-top: 0; }
.sys-ico .fdot--sys { display: block; width: 32px; height: 32px; overflow: visible; }
/* In the bead, Flow Intelligence keeps its light inside the glass: no round halo behind it. */
.sys-ico .fdot--sys [fill="url(#flowdot-halo)"], .sys-ico .fdot--sys [fill="url(#flowdot-halo-night)"] { display: none; }
.dgrid-meet { margin: var(--s-6) 0 0; text-align: left; }

/* ---- 18. The four sprint drawings (23 Oct 2026) ----------------------------------
   One object per card, set in air: soft glass shapes with a single gold
   element lit from within. The gold brightens a touch on hover. */
.job__art { height: clamp(116px, 10.5vw, 150px); }
.job__art svg { overflow: visible; }
.job__art .gold { transition: filter 300ms var(--ease-out); }
.job:hover .job__art .gold { filter: brightness(1.08); }

/* ---- 19. The home hero without its frame (23 Oct 2026) ---------------------------
   The stage no longer sits in a bordered panel; like the services hero it is
   open on the page, the copy centred and the liquid rising beneath it. */
.liquid-stage, .liquid-stage::before { border: 0; background: none; box-shadow: none; }
.liquid-stage::before, .liquid-stage::after { display: none; }
.liquid-stage { border-radius: 0; }
/* Against the open black the liquid's canvas showed its own edge; it now fades on every side,
   so only the liquid is visible. */
.liquid-stage__floor .liquid-orb {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 48%, transparent 94%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 48%, transparent 94%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---- 20. The light pools, softer (23 Oct 2026) --------------------------------------
   The pool behind the closer and behind inner heroes read as a grey disc with
   an edge. Same brightness at the heart, a long falloff, and a blur so no
   edge ever shows. */
.contact::before, .hero::before {
  background: radial-gradient(closest-side,
    rgba(255, 238, 205, 0.17) 0%, rgba(255, 255, 255, 0.1) 16%, rgba(255, 255, 255, 0.055) 32%,
    rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.008) 66%, transparent 80%);
  filter: blur(22px);
}
.contact::before { width: min(100vw, 80rem); height: 96%; }

/* ---- 21. The business case as one family of cards (23 Oct 2026) ----------------
   Four equal tonal cards: a label, the figure in display type, one line, the
   same linear pair of bars in each, and the source as a caption. */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--space-block); text-align: left; }
.kpi {
  display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border: 1px solid var(--pane-line); border-radius: var(--pane-r);
  background: var(--sheen), var(--pane);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-edge), var(--pane-shadow);
}
.kpi__k { margin: 0; font-size: var(--t-meta); color: var(--tier-meta); font-weight: 500; }
.kpi__n { margin: var(--s-3) 0 0; font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--fg); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.kpi__line { margin: var(--s-2) 0 0; font-size: 1rem; color: var(--tier-voice); }
.kpi__bars { display: grid; gap: 10px; margin-top: var(--s-6); }
.kpi__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.kpi__lab { grid-column: 1; font-size: var(--t-meta); color: var(--tier-meta); }
.kpi__val { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--t-meta); color: var(--tier-meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi__track { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: var(--glass-clear); box-shadow: var(--glass-clear-edge); overflow: hidden; }
.kpi__track i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--glass-grey); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: width 1100ms var(--ease-out); }
.kpi__row.is-us .kpi__track i { background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }
.kpi__row.is-us .kpi__lab, .kpi__row.is-us .kpi__val { color: var(--fg); }
.has-glass .kpi.fig:not(.is-in) .kpi__track i { width: 0; }
.kpi__src { margin: auto 0 0; padding-top: var(--s-5); font-size: var(--t-meta); color: var(--tier-meta); }
.kpi__src .text-link { font-size: inherit; }
@media (max-width: 720px) { .kpis { grid-template-columns: 1fr; gap: var(--s-4); } .kpi__n { font-size: 2.6rem; } }

/* ---- 22. The manifesto teaser: the flow as the section's object -----------------
   Three larger nodes: the old way, the layer that holds your positioning (lit,
   wearing Flow Intelligence), and the agents who work from it. A bead of light
   travels along each connector. */
.layer-flow--v2 { justify-content: center; margin-top: var(--s-8); gap: 0; }
.layer-flow--v2 .layer-flow__node { position: relative; display: grid; gap: 3px; justify-items: start; min-width: 15rem; padding: 1.1rem 1.3rem 1.15rem; border-radius: 18px; }
.layer-flow--v2 .layer-flow__node b { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; }
.layer-flow--v2 .layer-flow__node small { font-size: var(--t-meta); }
.layer-flow--v2 .layer-flow__node.is-core { min-width: 16rem; padding: 1.25rem 1.5rem 1.3rem; }
.layer-flow__glyph { display: flex; gap: 4px; height: 32px; align-items: flex-end; margin-bottom: 8px; }
.layer-flow__glyph i { display: block; width: 10px; border-radius: 3px 3px 1px 1px; background: rgba(255, 255, 255, 0.16); }
.layer-flow__glyph i:nth-child(1) { height: 14px; } .layer-flow__glyph i:nth-child(2) { height: 22px; } .layer-flow__glyph i:nth-child(3) { height: 30px; }
.layer-flow__face { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; background: rgba(var(--g-gold), 0.12); }
.layer-flow__face .fdot--flow { display: block; width: 34px; height: 34px; overflow: visible; }
.layer-flow__face [fill^="url(#flowdot-halo"] { display: none; }
.layer-flow__faces { display: flex; align-items: center; height: 32px; margin-bottom: 8px; }
.layer-flow__faces .fdot--mini { display: block; width: 28px; height: 28px; overflow: visible; margin-right: -8px; }
.layer-flow__faces em { margin-left: 14px; font-style: normal; font-size: var(--t-meta); color: var(--tier-meta); }
.layer-flow--v2 .layer-flow__arrow { flex: 0 0 clamp(2.5rem, 6vw, 5.5rem); max-width: none; overflow: visible; }
.layer-flow--v2 .layer-flow__arrow::before {
  content: ""; position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .layer-flow--v2 .layer-flow__arrow::before { animation: flow-bead 2.4s var(--ease-out) infinite; }
  .layer-flow--v2 .layer-flow__arrow + .is-core + .layer-flow__arrow::before { animation-delay: 1.2s; }
  @keyframes flow-bead { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .layer-flow--v2 .layer-flow__arrow::before { display: none; } }
@media (max-width: 720px) {
  .layer-flow--v2 .layer-flow__node, .layer-flow--v2 .layer-flow__node.is-core { min-width: 0; width: 100%; }
  .layer-flow--v2 .layer-flow__arrow { flex: none; width: 1px; height: 2rem; margin-left: 1.9rem; }
  .layer-flow--v2 .layer-flow__arrow::before { left: -3px; top: 0; margin-top: 0; }
  @media (prefers-reduced-motion: no-preference) { @keyframes flow-bead { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } } }
}

/* ---- 23. How it works as a film (23 Oct 2026) ------------------------------------
   Five scenes, each pinned for a screen and a half of scroll on wide
   screens: the plan assembling itself, five weeks as five documents, one run
   playing, the ten agents lighting up under Flow Intelligence, the monthly
   page. glass.js writes --p on each scene; every .at element has a --t
   threshold and fades up as --p passes it. A chapter rail on the right marks
   where you are. Phones and reduced motion read the same scenes stacked. */
.scene { position: relative; padding-block: var(--space-block); }
.scene__pin { width: min(100% - (var(--gutter) * 2), var(--measure)); margin-inline: auto; }
.scene__cap { text-align: left; max-width: 44rem; }
.scene__act { margin: 0 0 var(--s-3); font-size: var(--t-meta); color: var(--tier-meta); font-weight: 500; }
.scene__line { margin: 0; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; max-width: 24ch; text-wrap: balance; }
.scene__art { margin-top: var(--s-7); text-align: left; }
.scene--plan .plan-sheet { width: min(100%, 34rem); margin: 0; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.strip__k { display: block; margin-bottom: var(--s-3); font-size: var(--t-meta); color: var(--tier-meta); font-weight: 500; white-space: nowrap; }
.strip__doc { padding: 1rem; border: 1px solid var(--pane-line); border-radius: 16px; background: var(--pane); box-shadow: var(--pane-edge); }
.strip__doc .paper { max-width: none; font-size: 0.72rem; }
.scene--run .rs { margin: 0; max-width: 58rem; }
.scene--run .rs__tabs { justify-content: flex-start; }
.scene--run .rs__tabs-k { text-align: left; }
.film-more { margin-top: var(--s-6); max-width: 58rem; }
.film-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; color: var(--tier-voice); font-size: 0.9375rem; }
.film-more > summary::-webkit-details-marker { display: none; }
.film-more > summary::before { content: "\25B6"; font-size: 0.7rem; color: var(--accent); }
.film-more[open] > summary { color: var(--fg); margin-bottom: var(--s-4); }
.film-more .film { margin: 0; }
.film-more .film video { width: 100%; height: auto; border-radius: var(--pane-r); border: 1px solid var(--pane-line); }
.agents { max-width: 68rem; }
.agents__core { display: inline-grid; grid-template-columns: auto auto; gap: 2px 12px; align-items: center; padding: 0.9rem 1.2rem; border: 1px solid rgba(var(--g-gold), 0.5); border-radius: 16px; background: var(--pane); box-shadow: var(--pane-edge), 0 0 32px -10px rgba(var(--g-gold), 0.5); margin-left: calc(50% - 8.5rem); }
.agents__core b { grid-column: 2; font-size: 1.05rem; font-weight: 500; }
.agents__core > span:last-child { grid-column: 2; font-size: var(--t-meta); color: var(--tier-meta); }
.agents__face { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--g-gold), 0.12); }
.agents__face .fdot--flow { display: block; width: 34px; height: 34px; overflow: visible; }
.agents__face [fill^="url(#flowdot-halo"] { display: none; }
.agents__lines { display: block; width: 100%; height: 44px; margin: 2px 0; fill: none; stroke: rgba(var(--g-gold), 0.45); stroke-width: 1.2; }
.agents__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.agents__col { padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--pane-line); border-radius: 18px; background: var(--pane); box-shadow: var(--pane-edge); }
.agents__col h3 { margin: 0; font-size: 1.05rem; font-weight: 500; }
.agents__col p { margin: 2px 0 var(--s-4); font-size: var(--t-meta); color: var(--tier-meta); }
.agents__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agents__col li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.9375rem; color: var(--fg); }
.agents__col li .fdot--mini { display: block; width: 26px; height: 26px; overflow: visible; flex: none; }
.agents__review { display: flex; align-items: center; gap: 10px; margin: var(--s-5) 0 0; font-size: var(--t-meta); color: var(--tier-voice); }
.agents__review i { width: 8px; height: 8px; border-radius: 50%; background: var(--glass-amber); box-shadow: var(--glass-amber-edge), var(--glass-amber-glow); }
.rs--report { max-width: 40rem; margin: 0; }
.rs--report .rs__dot .fdot--rs { display: block; width: 30px; height: 30px; overflow: visible; }
.chapters { display: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .has-glass .scene { --p: 0; height: 175vh; padding: 0; }
  .has-glass .scene__pin { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: grid; align-content: center; padding-top: 4.5rem; overflow: hidden; }
  .has-glass .scene .at { --k: clamp(0, calc((var(--p) - var(--t, 0)) / 0.16), 1); opacity: var(--k); translate: 0 calc((1 - var(--k)) * 22px); }
  .has-glass .scene--plan .plan-sheet__seq i, .has-glass .scene--report .rs__track i { transition: none; }
  .has-glass .scene--plan .plan-sheet__agents i { width: var(--w, 50%); }
  /* the first scene rises over the pinned hero like the sections before it did */
  .has-glass .rise-track + .scene { margin-top: -70vh; }
  .has-glass .chapters {
    display: grid; gap: 14px; position: fixed; right: 22px; top: 50%; z-index: 20; translate: 0 -50%;
  }
  .has-glass .chapters a { position: relative; display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 300ms, transform 300ms; }
  .has-glass .chapters a.is-here { background: var(--accent); transform: scale(1.25); box-shadow: var(--glass-amber-glow); }
  .has-glass .chapters__label { position: absolute; right: 18px; top: 50%; translate: 0 -50%; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.7); color: var(--fg); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 200ms; }
  .has-glass .chapters a:hover .chapters__label, .has-glass .chapters a.is-here .chapters__label { opacity: 1; }
}
@media (max-width: 900px) {
  .strip { grid-template-columns: 1fr; gap: var(--s-3); }
  .strip__doc .paper { font-size: 0.8125rem; }
  .agents__core { margin-left: 0; }
  .agents__lines { display: none; }
  .agents__cols { grid-template-columns: 1fr; }
  .scene__art { margin-top: var(--s-6); }
}

/* The run scene holds a taller object: it sits from the top, compact, and the
   film link waits at the top right. Opening the film unpins the scene so the
   video reads at full size. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .has-glass .scene--run .scene__pin { align-content: start; padding-top: 5.5rem; }
  .has-glass .scene--run .scene__art { margin-top: var(--s-5); }
  .has-glass .scene--run .scene__line { font-size: clamp(1.5rem, 2.2vw, 2rem); max-width: 30ch; }
  .has-glass .scene--run .rs { --rs-row: 0.4rem; --rs-gap: var(--s-4); padding-top: 1.1rem; padding-bottom: 1rem; }
  .has-glass .scene--run .rs__brief { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
  .has-glass .scene--run .rs__tabs-k { margin: var(--s-4) 0 var(--s-2); }
  .has-glass .scene--run .film-more { position: absolute; right: 0; top: 5.5rem; margin: 0; }
  .has-glass .scene--run:has(.film-more[open]) .scene__pin { position: relative; height: auto; overflow: visible; }
  .has-glass .scene--run:has(.film-more[open]) .film-more { position: static; margin-top: var(--s-6); }
  .has-glass .scene--run:has(.film-more[open]) .at { opacity: 1; translate: none; }
}

/* ---- 24. The dot page shares the site's light (23 Oct 2026) ------------------------
   Its sections are the page column itself, so the section light was squeezed
   into the column and the page edges sat empty. The light now spans the page. */
/* main itself carries the .dotpage class, so the light goes on main and comes off its column-wide sections. */
main.dotpage { background:
  radial-gradient(42% 58% at 10% 18%, rgba(var(--g-lilac), 0.16), transparent 70%),
  radial-gradient(36% 50% at 92% 62%, rgba(var(--g-indigo), 0.13), transparent 72%),
  radial-gradient(40% 40% at 20% 96%, rgba(var(--g-lilac), 0.1), transparent 72%); }
main.dotpage > section.wrap, main.dotpage > section.wrap:nth-of-type(even), main.dotpage > section.wrap:nth-of-type(odd) { background: none; }

/* ---- 25. Phone pass (23 Oct 2026) --------------------------------------------------
   From a screen-by-screen audit of twenty-one pages at 390px: nothing runs
   off the right edge, nothing reads under 12px, every control is at least
   40px tall, long tables hint that they scroll, and sections sit closer. */
@media (max-width: 720px) {
  :root { --section: clamp(4.5rem, 13vw, 6rem); --space-block: clamp(2.5rem, 8vw, 3.5rem); }

  /* The dot page: one column of agents, a header mock that fits, a 12px floor, tables that hint they scroll. */
  .dotpage .dgrid.g5, .dotpage .dgrid.g3, .dotpage .dgrid.g2 { grid-template-columns: 1fr; }
  .dotpage .pillnav { white-space: normal; flex-wrap: wrap; gap: 0.5rem 0.8rem; border-radius: 22px; max-width: 100%; }
  .dotpage .pillnav > span:not(.brand):not(.cta) { display: none; }
  .dotpage .spec th, .dotpage .size .lbl, .dotpage .agent .sig, .dotpage .mono, .dotpage .eyebrow, .dotpage .panel .eyebrow, .dotpage .ctl-group .eyebrow, .dotpage .agent span, .dotpage .spec td.m { font-size: 12px; }
  .dotpage .tablewrap { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); padding-bottom: 4px; }
  .dotpage .sizes { gap: 1.5rem; padding: 1.25rem; justify-content: center; }
  .dotpage .cta { max-width: 100%; }

  /* About: the before-and-after bars stay inside their card, and the lane tabs are tappable. */
  .ba { max-width: 100%; }
  .ba__row { grid-template-columns: minmax(0, 1fr) 3rem; }
  .lane-tab, .lane-tabs button { min-height: 40px; }
  .lsplit__who, .stage, .receipt em, .cvsheet dt { font-size: 12px; }

  /* Guides: topic chips wrap instead of running off the edge; glossary and footnote links are tappable. */
  .topic-links { flex-wrap: wrap; overflow: visible; justify-content: flex-start; }
  .glossary__entry a.go, .explore__list a, .faq__item a.go { display: inline-flex; align-items: center; min-height: 40px; }
  .prose .tablewrap, .prose table { -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }

  /* Case studies and sprint pages: text links are tappable. */
  .part .text-link, .phases .text-link, .buys-band .text-link { display: inline-flex; align-items: center; min-height: 40px; }

  /* Hero fact cards: the label never drops under 12px. */
  .liquid-card__label, .liquid-card__note { font-size: 12px; }
}
@media (max-width: 720px) {
  /* About: one receipt per row on phones; no column borders. */
  .receipts, .receipts.receipts--six { grid-template-columns: 1fr; }
  .receipt, .receipt:not(:nth-child(3n + 1)), .receipt:nth-child(even) { padding: var(--s-5) 0; border-left: 0; }
  .receipt:not(:first-child) { border-top: 1px solid var(--hair); }
  /* The dot page: in-page links and small labels at phone size. */
  .dotpage .toc a, .dotpage nav a { display: inline-flex; align-items: center; min-height: 40px; }
  .dotpage em, .dotpage .cap b { font-size: 12px; }
  /* Glossary and guide labels: the heading link carries a tap-sized hit area without moving the layout. */
  .glossary__entry h3 a, .eyebrow a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}
@media (max-width: 720px) {
  /* About: the eight lane tabs wrap into rows and are tappable; small source links carry a hit area. */
  .lanes { flex-wrap: wrap; overflow: visible; }
  .lanes .lane-tab, button.lane-tab { min-height: 44px; padding-block: 10px; }
  .receipt__src a, .site-footer__name a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
@media (max-width: 720px) {
  /* Every list button and small action link reaches 40px on phones. */
  main li > button, .print-cv, .end-links a { min-height: 40px; }
  .print-cv, .end-links a { display: inline-flex; align-items: center; }
}

/* ---- 26. The dot page's stages fill their column (23 Oct 2026) ------------------
   The stage was centred with auto margins inside a grid cell, so its width
   collapsed to the width of its caption line (about 300px) at every screen
   size. It now fills the column, so the character reads at the size the
   layout always intended. */
.dotpage .stage { width: min(100%, 560px); max-width: none; }

/* ---- 27. About: the function as one board (27 Oct 2026) -----------------------
   "One person, a whole marketing function" drawn as what it says: Amber at the
   top, one line branching to the eight lanes, each lane carrying its agent's
   character in a glass bead. A lane opens its detail in the board below. The
   four-step loop sits on one rail under it, the judging step lit in amber. */
.fnb {
  position: relative; margin-top: var(--space-block); padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--pane-line); border-radius: var(--pane-r);
  background: var(--pane); box-shadow: var(--pane-edge), var(--pane-shadow);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
}
.fnb__me { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding-bottom: 2.5rem; text-align: center; }
.fnb__me img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 6px rgba(var(--g-gold), 0.12), 0 0 44px rgba(var(--g-gold), 0.28);
}
.fnb__me p { margin: 0; }
.fnb__me b { display: block; color: var(--fg); font-size: 1.0625rem; font-weight: 500; }
.fnb__me span { display: block; margin-top: 0.2rem; color: var(--tier-voice); font-size: 0.9375rem; }
.fnb__me::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 1.6rem;
  background: linear-gradient(rgba(var(--g-gold), 0.75), rgba(255, 255, 255, 0.24));
}
.fnb__groups { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 2fr); }
/* The branch runs from the first group's stem to the last group's, through the trunk. */
.fnb__groups::before { content: ""; position: absolute; top: 0; left: 6.25%; right: 12.5%; height: 1px; background: rgba(255, 255, 255, 0.2); }
.fnb__group { position: relative; padding: 1.4rem 0.25rem 0; text-align: center; }
.fnb__group::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 0.8rem; background: rgba(255, 255, 255, 0.24); }
.fnb__label { margin: 0 0 0.9rem; color: var(--tier-meta); font-size: var(--t-meta); letter-spacing: 0.02em; }
.fnb__group ul { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.fnb__group li { min-width: 0; }
.fnb button.fnb__lane {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; height: 100%; min-height: 0;
  padding: 1rem 0.4rem 1.1rem; border: 1px solid transparent; border-radius: 16px; background: none;
  color: var(--fg); font: inherit; font-size: 0.875rem; line-height: 1.3; text-align: center; cursor: pointer;
  transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.fnb button.fnb__lane:hover, .fnb button.fnb__lane:focus-visible { border-color: var(--pane-line-hover); background: rgba(255, 255, 255, 0.04); }
.fnb button.fnb__lane:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fnb__lane .sys-ico { width: 54px; height: 54px; margin: 0; border-radius: 16px; }
.fnb__lane .sys-ico .fdot--sys { width: 40px; height: 40px; }
.fnb__lane:hover .sys-ico { border-color: rgba(255, 255, 255, 0.22); }
.fnb__name { text-wrap: balance; }
.fnb__loop {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin: 2.5rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none; counter-reset: fnb;
}
.fnb__loop li { position: relative; padding-top: 1.35rem; color: var(--tier-voice); font-size: 0.9375rem; counter-increment: fnb; }
.fnb__loop li::before { content: "0" counter(fnb); position: absolute; top: 0; left: 0; color: var(--tier-meta); font-size: 12px; letter-spacing: 0.08em; }
.fnb__loop li::after { content: ""; position: absolute; top: calc(-1.6rem - 4px); left: 0; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.fnb__loop li.is-me { color: var(--fg); }
.fnb__loop li.is-me::before { color: var(--accent); }
.fnb__loop li.is-me::after { background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--g-gold), 0.16), 0 0 18px rgba(var(--g-gold), 0.6); }
.fnb + .lanes-more { margin-top: var(--s-6); }
@media (max-width: 900px) {
  .fnb__groups { grid-template-columns: 1fr; gap: 1.5rem; }
  .fnb__groups::before { display: none; }
  .fnb__me { padding-bottom: 1.75rem; }
  .fnb__me::after, .fnb__group::before { display: none; }
  .fnb__group { padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: left; }
  .fnb__group ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: 0.25rem; }
  .fnb button.fnb__lane { flex-direction: row; justify-content: flex-start; gap: 0.7rem; padding: 0.45rem; text-align: left; min-height: 56px; }
  .fnb__lane .sys-ico { width: 44px; height: 44px; border-radius: 13px; }
  .fnb__lane .sys-ico .fdot--sys { width: 32px; height: 32px; }
  .fnb__loop { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; padding-top: 0; border-top: 0; }
  .fnb__loop li { padding-top: 2.1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .fnb__loop li::before { top: 0.8rem; }
  .fnb__loop li::after { display: none; }
  .fnb__loop li.is-me { border-top-color: var(--accent); }
}

/* ---- 28. About: career, the result as the figure (27 Oct 2026) ------------------
   The track's amber already meant something (how much of each role ran on
   systems) but nothing said so: a small key under the track now does. Each
   role's result sits at display size, the one thing a reader should keep. */
.cvc__key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: var(--s-5) 0 0; color: var(--tier-meta); font-size: 12px; letter-spacing: 0.02em; }
.cvc__key i { width: 84px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(250, 248, 243, 0.16), var(--accent)); }
.cvc__key em { margin-left: 0.6rem; padding-left: 0.85rem; border-left: 1px solid rgba(255, 255, 255, 0.14); font-style: normal; }
/* Years line up when a company name wraps to two lines. */
main.cv .seg { align-content: start; }
main.cv .role-panel__win { padding-left: var(--s-5); color: var(--tier-voice); font-size: 0.875rem; }
main.cv .role-panel__win b { margin-bottom: 0.35rem; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -0.035em; }
@media (max-width: 720px) {
  .cvc__key em { flex-basis: 100%; margin: 0; padding: 0; border: 0; }
}

/* ---- 29. About: the CV button shows the CV (27 Oct 2026) -----------------------
   A hiring manager sees the first page before they download it: a small page
   inside the button that lifts on hover. */
.btn-cv { gap: 0.7rem; padding-left: 0.6rem; }
.btn-cv img { width: 24px; height: 34px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 14px -6px rgba(0, 0, 0, 0.8); transform: rotate(-4deg); transition: transform 280ms var(--ease-out); }
.btn-cv:hover img, .btn-cv:focus-visible img { transform: rotate(0deg) translateY(-2px) scale(1.08); }
.btn-cv small { color: var(--tier-meta); font-size: 12px; font-weight: 400; }
@media (max-width: 420px) { .btn-cv small { display: none; } }

/* ---- 30. Clients, in their words (27 Oct 2026) ---------------------------------
   Three quotes as one family of glass cards: an amber opening mark, the quote
   in the voice tier with the client's own key words lifted to full white, and
   the name and company in the meta tier under a hairline. */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5, 1.25rem); margin-top: var(--space-band); text-align: left; }
.quotes .q {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; margin: 0;
  padding: clamp(1.5rem, 3vw, 2.1rem); border: 1px solid var(--pane-line); border-radius: var(--pane-r);
  background: var(--pane); box-shadow: var(--pane-edge), var(--pane-shadow);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
}
.quotes .q::before { content: "\201C"; display: block; height: 1.6rem; color: var(--accent); font-size: 3.25rem; line-height: 1; text-shadow: 0 0 22px rgba(var(--g-gold), 0.45); }
.quotes blockquote { flex: 1; margin: 0; padding: 0; border: 0; }
.quotes blockquote p { margin: 0; color: var(--tier-voice); font-size: 1.0625rem; line-height: 1.6; }
.quotes blockquote b { color: var(--fg); font-weight: 500; }
.quotes figcaption { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.quotes figcaption b { color: var(--fg); font-size: 0.9375rem; font-weight: 500; }
.quotes figcaption span { color: var(--tier-meta); font-size: var(--t-meta); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ---- 31. Service heroes: the fact card clears the answer at laptop widths (27 Oct 2026) ----
   Between 901 and 1360px the 60ch answer paragraph ran under the pinned fact
   card on six service pages. The paragraph narrows a little and the card moves
   toward the edge; large screens and phones are unchanged. */
@media (min-width: 901px) and (max-width: 1360px) {
  .hero .svc-answer { max-width: 50ch; }
  .hero .hero-fact, .hero.has-orb .hero-fact { right: clamp(1.25rem, 3.2vw, 3rem); }
}

/* ---- 32. The business line on Contact: the trading name in the quiet meta tier ---- */
/* Left-aligned under the form and kept to the form's left half, so the hero fact card never covers it. */
.contact-entity {
  margin: 1.5rem auto 0;
  width: min(100%, 40rem);
  box-sizing: border-box;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tier-meta);
  text-align: left;
}
@media (min-width: 901px) { .contact-entity { padding-right: min(8rem, 20%); } }