/* Aries: brand layer over the scroll-craft engine.
   The engine stylesheet (/sc/scrollcraft.css) is the mechanism and is never
   edited; everything here is our own markup. Built into /css/brand.css by
   `npm run css` (cat css-src/*.css). Today's look: a dark page, Aries blue,
   Space Grotesk headlines over Inter text. */

@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* the brand, named once (contrast checked 15 Oct: see BUILD_NOTES.md) */
  --brand-dark: #05080c;          /* the page */
  --brand-raised: #0b1119;        /* the second dark ground */
  --brand-dark-surface: #111b26;  /* plates and cards on dark */
  --brand-light: #e8ebee;         /* ink on dark; menus */
  --brand-light-alt: #dfe3e8;
  --brand-surface: #f5f7f9;
  --brand-surface-alt: #dce1e6;
  --brand-ink: #0b1119;           /* ink on the light menus */
  --brand-ink-soft: #4a5662;
  --brand-light-soft: #b9c2cc;    /* soft ink on dark, 11.1:1 */
  --brand-muted: #8a96a3;         /* quiet labels on dark, 6.7:1 */
  --brand-blue: #1d6bff;          /* Aries blue: buttons, white text 4.57:1 */
  --brand-accent: #1452d1;        /* blue as text on the light menus, 5.6:1 */
  --brand-accent-on-dark: #7fa8ff;/* blue as text on dark, 8.6:1 */
  --brand-glow: #7fa8ff;
  --brand-glow-bright: #b5cdff;

  /* engine tokens: the dark ground is the default */
  --sc-canvas: var(--brand-dark);
  --sc-surface: var(--brand-dark-surface);
  --sc-ink: var(--brand-light);
  --sc-ink-soft: var(--brand-light-soft);
  --sc-accent: var(--brand-accent-on-dark);
  --sc-accent-ink: var(--brand-dark);
  --sc-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --sc-font-mono: "Inter", system-ui, sans-serif;
  --sc-shadow-color: 214 60% 3%;
  --sc-r-lg: 20px;
  --sc-hairline: rgb(232 235 238 / 0.08);
  --sc-hairline-strong: rgb(232 235 238 / 0.16);

  --linen: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.035' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.9  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='360' height='360' filter='url(%23l)'/></svg>");
}

html { background: var(--brand-dark); }
body { font-weight: 400; background: var(--brand-dark); color: var(--brand-light); }
::selection { background: var(--brand-blue); color: #fff; }

/* ------------------------------------------------------------- grounds --
   Every ground is dark (today's look). .ground--dark is what the chapter bar
   reads to flip to its dark palette; .ground--raised is the second dark. */
.ground { position: relative; background: var(--sc-canvas); color: var(--sc-ink); isolation: isolate; }
.ground::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--linen); background-size: 360px; opacity: 0.035; mix-blend-mode: screen; }
.ground--dark { --sc-canvas: var(--brand-dark); --sc-surface: var(--brand-dark-surface); --sc-ink: var(--brand-light); --sc-ink-soft: var(--brand-light-soft); --sc-accent: var(--brand-accent-on-dark); --sc-accent-ink: var(--brand-dark); color: var(--sc-ink); }
.ground--raised { --sc-canvas: var(--brand-raised); --sc-surface: #152131; }

/* ---------------------------------------------------------- type layer -- */
.display { font-family: var(--sc-font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
/* Space Grotesk has no italic: the grammar's <em> is the light blue, upright,
   the way today's headline sets "in one place". */
.display em, .chapter__final em, .act__intro-line em { font-style: normal; color: var(--brand-glow); }
.display--hero { font-size: clamp(3rem, 1rem + 6vw, 7rem); line-height: 0.96; letter-spacing: -0.035em; }
/* A dense grotesk at 600 reads larger than the template's serif: the scale
   steps down one notch from the engine's (--sc-t-4xl is 7.5rem at 1440). */
.display--xl { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -0.032em; }
.display--lg { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); }
.display--md { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }
.display--sm { font-size: var(--sc-t-xl); line-height: 1.12; letter-spacing: -0.012em; }
.lede { font-size: var(--sc-t-lg); font-weight: 300; line-height: 1.55; max-width: 44ch; text-wrap: pretty; margin: 0; color: var(--sc-ink-soft); }
.body { max-width: 62ch; color: var(--sc-ink-soft); font-weight: 300; line-height: 1.7; text-wrap: pretty; margin: 0; }
.body + .body { margin-top: var(--sc-4); }
.small { font-size: var(--sc-t-sm); }
.label { font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand-accent-on-dark); }
.hairline { height: 1px; border: 0; background: var(--sc-hairline-strong); margin: 0; }

a { color: inherit; }
.link { color: var(--sc-accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; transition: text-decoration-thickness var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-thickness: 2px; } }

.btn {
  display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap;
  padding: 1em 1.8em; border-radius: var(--sc-r-pill);
  background: var(--brand-blue); color: #fff;
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.01em; text-decoration: none;
  box-shadow: 0 10px 30px -12px rgb(29 107 255 / 0.55); border: 0; cursor: pointer;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #3d80ff; color: #fff; } }
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px rgb(232 235 238 / 0.25); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: transparent; color: var(--brand-glow); box-shadow: inset 0 0 0 1px var(--brand-blue); } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7em 1.1em; border-radius: var(--sc-r-pill); background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.skip:focus { top: 1rem; }
/* ------------------------------------------------------------ top bar --
   Atrin, 15 Oct: "a normal menu with the thin progress line" in place of the
   numbered chapter bar. The masthead's menu, fixed to the top once the hero is
   behind the reader (.is-on, set by the page script); the line under it fills
   with the whole page; the link for the section in view gets .is-here. */

/* anchors land below the bar */
[data-chapter], [id] { scroll-margin-top: 4rem; }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  background: color-mix(in oklab, var(--brand-dark) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgb(232 235 238 / 0.08);
  transform: translateY(-110%); opacity: 0;
  transition: transform var(--sc-d-slow) var(--sc-ease-out), opacity var(--sc-d-slow) var(--sc-ease-out);
}
.topbar.is-on { transform: none; opacity: 1; }
.topbar__inner { max-width: none; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); min-height: 3.75rem; }
.topbar .masthead__mark img { width: 1.6rem; }
.topbar .masthead__mark span { font-size: 0.8rem; }
.topbar__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); margin-left: auto; font-size: var(--sc-t-sm); font-weight: 500; }
.topbar__nav a { position: relative; text-decoration: none; color: var(--brand-light-soft); padding-block: 0.4em; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.topbar__nav a.is-here { color: var(--brand-light); }
.topbar__nav a.is-here::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.15em; height: 2px; border-radius: 1px; background: var(--brand-blue); }
@media (hover: hover) and (pointer: fine) { .topbar__nav a:hover { color: var(--brand-glow); } }
.topbar__book { padding: 0.7em 1.3em; }
.topbar__toggle { display: none; }
.topbar__track { height: 2px; background: rgb(232 235 238 / 0.06); }
.topbar__fill { height: 100%; background: var(--brand-blue); transform-origin: left; transform: scaleX(0); will-change: transform; }

/* phones and small tablets: the links fold into a Menu button */
@media (max-width: 900px) {
  .topbar__inner { gap: var(--sc-3); min-height: 3.4rem; }
  .topbar__nav { display: none; }
  .topbar__book { margin-left: auto; padding: 0.6em 1em; font-size: var(--sc-t-xs); }
  .topbar__toggle { display: inline-flex; align-items: center; background: transparent; color: var(--brand-light); border: 1px solid rgb(232 235 238 / 0.35); border-radius: var(--sc-r-pill); padding: 0.55em 1em; font: inherit; font-weight: 600; font-size: var(--sc-t-xs); cursor: pointer; }
  .topbar.is-open .topbar__nav { display: grid; position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: calc(100% + 0.5rem); gap: 0; margin: 0; padding: var(--sc-3); border-radius: var(--sc-r-md); background: var(--brand-light); box-shadow: var(--sc-e3); }
  .topbar.is-open .topbar__nav a { color: var(--brand-ink); padding: 0.75em 0.8em; border-radius: var(--sc-r-sm); }
  .topbar.is-open .topbar__nav a.is-here { background: var(--brand-surface-alt); }
  .topbar.is-open .topbar__nav a.is-here::after { display: none; }
}
/* --------------------------------------------------- chapter grammar --
   Every chapter opens the same way: number + eyebrow, headline, one short
   paragraph, then the motion. Anything longer sits behind "Read more". */
.ch-head { display: grid; gap: var(--sc-5); align-content: start; }
.ch-head__eyebrow { display: flex; align-items: baseline; gap: 0.9em; margin: 0; }
.ch-head__eyebrow span { font-family: var(--sc-font-display); font-style: italic; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sc-accent); }
.ch-head__eyebrow::after { content: ""; flex: 0 0 2.5rem; height: 1px; background: currentColor; opacity: 0.4; align-self: center; }
.ch-head--center { text-align: center; justify-items: center; }
.ch-head--center .ch-head__eyebrow::after { display: none; }
.ch-head .body { color: var(--sc-ink); }

/* the disclosure: a circled + that turns into × */
.more { --more-ink: var(--sc-accent); }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; color: var(--more-ink); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.02em; padding-block: 0.3em; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid currentColor; font-weight: 400; line-height: 1; transition: transform var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.more[open] > summary::before { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .more > summary:hover::before { background: color-mix(in oklab, currentColor 12%, transparent); } }
.more > summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
.more > :not(summary) { margin-top: var(--sc-4); }
.more[open] > summary { margin-bottom: var(--sc-2); }
.more .body + .body { margin-top: var(--sc-4); }
.more--tight > summary { font-size: var(--sc-t-xs); letter-spacing: 0.04em; }

/* the split: sticky media beside the copy; one column at 860 */
.chapter--split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(2rem, 6vw, 7rem); }
.chapter__media { position: sticky; top: 10svh; }
.chapter__photo { height: min(76svh, 46rem); }
.chapter__photo img { height: 118%; margin-top: -9%; object-position: 40% 50%; will-change: transform; } /* parallax headroom */
.chapter__copy .display { margin-bottom: var(--sc-6); }
.chapter__reveal { margin-top: var(--sc-8); padding: 0.12em 0; }
.chapter__final { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; margin: 0; }
.chapter__final em { color: var(--sc-accent); }
@media (max-width: 860px) {
  .chapter--split { grid-template-columns: 1fr; gap: var(--sc-6); }
  .chapter__media { position: relative; top: 0; }
  .chapter__photo { height: 32svh; }
  .chapter__final { font-size: var(--sc-t-2xl); }
}

/* --------------------------------------------------------- the curtain --
   The first chapter rises over the pinned hero: pulled up 24svh, above the
   stage, rounded top, a lifted shadow. One screen tall, centred. */
.curtain { position: relative; z-index: 3; margin-top: -24svh; min-height: 100svh; display: grid; align-content: center; padding-block: var(--sc-9); border-radius: var(--sc-r-lg) var(--sc-r-lg) 0 0; box-shadow: 0 -18px 50px -20px color-mix(in oklab, var(--brand-ink) 28%, transparent); }
.hero-stacked + .curtain { margin-top: 0; border-radius: 0; box-shadow: none; } /* reduced motion: no pin to rise over */
.curtain .ch-head { margin-bottom: var(--sc-7); }
.curtain__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-5); margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }

/* ------------------------------------------------------- list + accordion -- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.ticks li { position: relative; padding-left: 1.3em; color: var(--sc-ink); text-wrap: pretty; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.45em; height: 1px; background: var(--sc-accent); }

.acc-list { border-top: 1px solid var(--sc-hairline-strong); }
.acc { border-bottom: 1px solid var(--sc-hairline-strong); }
.acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--sc-5); align-items: center; padding-block: var(--sc-5); font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.12; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+"; font-family: var(--sc-font-text); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--sc-accent); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.acc[open] > summary::after { transform: rotate(45deg); }
.acc > :not(summary) { margin-bottom: var(--sc-5); }

/* ------------------------------------------------ curtain body + footer --
   Chips (the offering), a stat plate with the two real numbers, pillars;
   the footer that the last chapter carries. */
.curtain__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sc-7) clamp(2rem, 6vw, 6rem); align-items: start; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.chips a { display: inline-flex; align-items: center; padding: 0.7em 1.15em; border-radius: var(--sc-r-pill); background: color-mix(in oklab, var(--sc-ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 16%, transparent); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1; text-decoration: none; color: var(--sc-ink); transition: background-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); }
.curtain__plate { display: grid; grid-template-columns: auto auto; gap: var(--sc-6) clamp(1.5rem, 4vw, 3rem); align-items: end; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.curtain__plate .pillars { grid-column: 1 / -1; font-size: var(--sc-t-base); }
.foot { margin-top: var(--sc-10); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline-strong); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sc-6); font-size: var(--sc-t-sm); }
.foot h4 { margin: 0 0 var(--sc-4); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.foot a { text-decoration: none; }
.foot__mark img { width: 11rem; height: auto; margin-bottom: var(--sc-4); }
.foot__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3); padding-top: var(--sc-6); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
/* the stat plate numbers and the pillars list */
.stat { display: grid; gap: var(--sc-2); }
.stat__n { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: -0.02em; color: var(--sc-ink); }
.stat__n span { font-variant-numeric: tabular-nums; }
.stat__t { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 18ch; }
.pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink); }
.curtain__plate .pillars { grid-column: 1 / -1; font-size: var(--sc-t-base); }

@media (max-width: 860px) {
  .curtain__grid { grid-template-columns: 1fr; }
  .curtain__plate { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
}
/* ------------------------------------------------------- 0 · title page --
   The reel opens. Adapted from the site-build hero recipe (one physical move)
   for one video instead of four photographs. Shervin, 16 Oct: one scroll past,
   not three, so the act is 1.3 screens (was 2.6: a 0.3-screen hold, was 1.6)
   and the pillar and ARIES beats are gone: the showreel starts as a framed card, as on today's page,
   opens to full bleed by p = .6 with a slow push, and the copy lifts away from
   p = .1 while At a glance is already rising over it. Load-in is a focus pull
   off .is-loaded (hero-load.js). Everything here runs off the engine's --sc-p;
   no JS in the scroll path. */
.title-page {
  --sc-canvas: var(--brand-dark);
  --hero-ink: var(--brand-light);
  --hero-ink-soft: #d6dce2;
  --hero-scrim-rgb: 3 5 8;
}
.title-page .sc-stage, .title-page [data-sc-stage] { display: block; }
.hero {
  position: relative; height: 100svh; min-height: 34rem; overflow: clip;
  display: grid; grid-template-rows: auto 1fr auto; --p: var(--sc-p, 0);
  --open: clamp(0, calc(var(--p) / 0.6), 1);
  --sc-ink: var(--hero-ink); --sc-ink-soft: var(--hero-ink-soft);
  color: var(--sc-ink); background: var(--brand-dark);
}

/* the reel: a framed card that opens to full bleed, one scrim, one wash */
.reel { position: absolute; inset: 0; z-index: 0; }
.reel__frame {
  position: absolute; inset: 0; overflow: clip; background: #0b1118;
  clip-path: inset(calc((1 - var(--open)) * 5.25rem) calc((1 - var(--open)) * 0.9rem) calc((1 - var(--open)) * 0.9rem) round calc((1 - var(--open)) * 22px));
  will-change: clip-path;
}
.reel__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(calc(1.02 + var(--p) * 0.12)); transform-origin: 50% 45%; will-change: transform; }
.reel__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(to top, rgb(var(--hero-scrim-rgb) / 0.9) 0%, rgb(var(--hero-scrim-rgb) / 0.66) 30%, rgb(var(--hero-scrim-rgb) / 0.3) 54%, rgb(var(--hero-scrim-rgb) / 0) 72%),
  linear-gradient(to bottom, rgb(var(--hero-scrim-rgb) / 0.6) 0%, rgb(var(--hero-scrim-rgb) / 0) 24%); }
.reel__wash { position: absolute; inset: 0; z-index: 2; background: var(--brand-dark); opacity: 1; transition: opacity 1300ms var(--sc-ease-out) 80ms; pointer-events: none; }
.is-loaded .reel__wash { opacity: 0; }

/* the masthead: the wordmark, the pages, the way to book */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); padding-block: var(--sc-5); }
.masthead__mark { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.masthead__mark img { width: 1.9rem; height: auto; }
.masthead__mark span { font-family: var(--sc-font-display); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.42em; color: var(--brand-light); }
.masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); font-size: var(--sc-t-sm); font-weight: 500; }
.masthead__nav > a:not(.btn) { text-decoration: none; color: var(--brand-light-soft); padding-block: 0.4em; }
@media (hover: hover) and (pointer: fine) { .masthead__nav > a:not(.btn):hover { color: var(--brand-glow); } }
.masthead__nav .btn { padding: 0.8em 1.4em; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .masthead__nav { display: none; }
  .masthead__nav.is-open { display: grid; position: absolute; inset-inline: var(--sc-gutter); top: 4.75rem; z-index: 90; gap: 0; padding: var(--sc-4); border-radius: var(--sc-r-md); background: var(--brand-light); box-shadow: var(--sc-e3); }
  .masthead__nav.is-open > a:not(.btn) { padding: 0.8em 0.4em; color: var(--brand-ink); }
  .masthead__nav.is-open .btn { margin-top: var(--sc-3); justify-content: center; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5em; background: transparent; color: var(--brand-light); border: 1px solid rgb(232 235 238 / 0.4); border-radius: var(--sc-r-pill); padding: 0.6em 1.1em; font: inherit; font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer; }
}

/* chrome and copy over the reel */
.hero__top { position: relative; z-index: 3; }
/* the copy rides up 12vh across the act and is gone by p = .75 */
.hero__copy {
  position: relative; z-index: 3; align-self: end; display: grid; gap: var(--sc-6); padding-block: var(--sc-6) clamp(3rem, 9vh, 6rem);
  transform: translate3d(0, calc(var(--p) * -12vh), 0);
  opacity: clamp(0, calc(1 - (var(--p) - 0.1) / 0.65), 1);
  pointer-events: none;
}
.hero__copy > * { pointer-events: auto; }
/* a dark backing so it stays readable over bright footage (Round 3) */
.hero__badge { justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.5rem 1rem; border-radius: var(--sc-r-pill); border: 1px solid rgb(127 168 255 / 0.5); background: rgb(5 8 12 / 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.8rem; font-weight: 500; color: var(--brand-glow-bright); }
.hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-blue); }
.title-page__h1 { max-width: 15ch; font-size: clamp(3rem, 1rem + 5.6vw, 6.6rem); line-height: 0.98; letter-spacing: -0.035em; text-shadow: 0 2px 30px rgb(0 0 0 / 0.3); }
.title-page__h1 em { display: block; }
.hero__line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__line > span { display: block; transform: translateY(110%); }
/* the buttons sit under the paragraph, on the same left edge as the type
   (Shervin, 16 Oct: "too much space on the right … maybe if you stacked them") */
.hero__intro { display: grid; grid-template-columns: minmax(0, 40rem); justify-items: start; gap: var(--sc-6); }
.hero__intro .body { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.65; max-width: 54ch; text-shadow: 0 1px 14px rgb(0 0 0 / 0.4); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.hero__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.8rem; color: var(--brand-muted); }
.hero__ticks li::before { content: "✓"; color: var(--brand-blue); margin-right: 0.45rem; }

/* the load-in: a focus pull on the reel, then the type rises, then the intro.
   .is-settled strips the transitions so the scroll push never fights them. */
@media (prefers-reduced-motion: no-preference) {
  .reel__video { filter: blur(14px); transition: filter 1500ms cubic-bezier(0.2, 0.7, 0.1, 1) 80ms; }
  .reel__frame { scale: 1.04; transition: scale 1600ms cubic-bezier(0.2, 0.7, 0.1, 1) 80ms; }
  .is-loaded .reel__frame { scale: 1; }
  .is-loaded .reel__video { filter: blur(0); }
  .is-settled .reel__video { filter: none; transition: none; }
  .is-settled .reel__frame { transition: none; }
  .hero__nav { opacity: 0; transform: translateY(-6px); transition: opacity 700ms var(--sc-ease-out) 500ms, transform 700ms var(--sc-ease-out) 500ms; }
  .hero__badge, .hero__intro { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--sc-ease-out) 1150ms, transform 800ms var(--sc-ease-out) 1150ms; }
  .hero__badge { transition-delay: 450ms; }
  .hero__line > span { transition: transform 1000ms cubic-bezier(0.2, 0.7, 0.1, 1); }
  .hero__line:nth-child(1) > span { transition-delay: 620ms; }
  .hero__line:nth-child(2) > span { transition-delay: 760ms; }
  .is-loaded .hero__nav, .is-loaded .hero__intro, .is-loaded .hero__badge { opacity: 1; transform: none; }
  .is-loaded .hero__line > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__line > span { transform: none; }
  .reel__wash { display: none; }
}

/* reduced motion: the poster as one still, no pin, copy on it (hero-load.js adds .hero-stacked) */
.hero-stacked .hero { height: auto; min-height: 100svh; --p: 0; --open: 1; }
.hero-stacked .reel__video { transform: none; }
.hero-stacked .hero__copy { transform: none; opacity: 1; }

/* phones: the same opening, art-directed. Type low, the button full width at the thumb. */
@media (max-width: 860px) {
  .reel__frame { clip-path: inset(calc((1 - var(--open)) * 4.5rem) calc((1 - var(--open)) * 0.6rem) calc((1 - var(--open)) * 0.6rem) round calc((1 - var(--open)) * 16px)); }
  .reel__video { object-position: 50% 40%; transform-origin: 50% 40%; }
  .reel__scrim { background:
    linear-gradient(to top, rgb(var(--hero-scrim-rgb) / 0.94) 0%, rgb(var(--hero-scrim-rgb) / 0.75) 40%, rgb(var(--hero-scrim-rgb) / 0.2) 64%, rgb(var(--hero-scrim-rgb) / 0) 78%),
    linear-gradient(to bottom, rgb(var(--hero-scrim-rgb) / 0.6) 0%, rgb(var(--hero-scrim-rgb) / 0) 26%); }
  .hero__copy { padding-block: var(--sc-5) clamp(1.5rem, 4vh, 2.5rem); gap: var(--sc-5); }
  .title-page__h1 { font-size: clamp(2.5rem, 11.5vw, 3.6rem); max-width: none; }
  .hero__intro { grid-template-columns: 1fr; gap: var(--sc-4); }
  .hero__intro .body { font-size: 0.9rem; line-height: 1.55; max-width: none; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; padding-block: 1.05em; font-size: var(--sc-t-base); }
  .hero__ctas .btn--ghost { display: none; }
}
/* short phones: tighter type so the CTA stays above the fold */
@media (max-height: 700px) and (max-width: 860px) {
  .title-page__h1 { font-size: 2.3rem; }
  .hero__intro .body { font-size: 0.82rem; line-height: 1.45; }
  .hero__copy { gap: var(--sc-4); }
  .hero__badge { display: none; }
}
/* ---------------------------------------------------- the pinned act --
   The peak. Art on the left, the copy entries stacked in ONE grid cell on
   the right; each entry's data-sc-cue decides when it shows. Announce it
   first with a flow lead so the reader knows to keep scrolling. Pairs with
   pinned-act-stacked-fallback.js. */
.act-lead { padding-block: var(--sc-section) var(--sc-6); }
.act-lead .ch-head { max-width: 40rem; margin-inline: auto; }
.act-lead__how { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); margin: 0; }

.act-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; height: 100%; padding-block: var(--sc-6); }
.act__art { position: relative; }
.act__art svg { width: 100%; height: auto; overflow: visible; }
.act__count { position: absolute; left: 0; bottom: -0.5rem; margin: 0; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.act__count span { color: var(--brand-glow); font-size: var(--sc-t-xl); font-style: normal; }
.act__copy { display: grid; align-items: center; min-height: 0; }
.act__copy > * { grid-area: 1 / 1; } /* every entry in the same cell */
.act__step { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.16em; color: var(--sc-ink-soft); margin: 0 0 var(--sc-3); }
.act__entry h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--sc-3); }
.act__entry .ticks { grid-template-columns: 1fr 1fr; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
.act__entry .more { margin-top: var(--sc-5); }
.act__tip { position: absolute; z-index: 5; pointer-events: none; padding: 0.35em 0.75em; border-radius: var(--sc-r-pill); background: var(--brand-light); color: var(--brand-dark); font-size: 0.78rem; font-weight: 600; white-space: nowrap; box-shadow: var(--sc-e2); opacity: 0; transform: translate(-50%, -130%) scale(0.96); transition: opacity 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out); }
.act__tip.is-on { opacity: 1; transform: translate(-50%, -130%) scale(1); }

/* lit states: the art's own drawing gives .light / .spill / .finale-line meaning */
.item .light { fill: var(--brand-glow); opacity: 0; transition: opacity 620ms var(--sc-ease-out); }
.item .spill { opacity: 0; transition: opacity 900ms var(--sc-ease-out); pointer-events: none; }
.item.is-lit .light { opacity: 1; }
.item.is-lit .spill { opacity: 0.55; }
.item.is-now .light { fill: var(--brand-glow-bright); } /* the newest one, a touch brighter */
.item--soon.is-lit .light { opacity: 0.28; }
.act .finale-line { stroke: var(--brand-glow); opacity: 0; transition: opacity 800ms var(--sc-ease-out); }
.act.is-whole .finale-line { opacity: 1; }

/* stacked: phones and reduced motion (set by the JS before mount). The art
   sits under the chapter bar (3.4rem) and fades into the ground below it. */
.act-stacked .sc-stage, .act-stacked [data-sc-stage] { position: static; height: auto; overflow: visible; }
.act-stacked .act-grid { display: block; height: auto; padding-block: 0 var(--sc-section); }
.act-stacked .act__art { position: sticky; top: 3.4rem; z-index: 4; padding-block: var(--sc-4) var(--sc-5); background: linear-gradient(to bottom, var(--sc-canvas) 84%, transparent); margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); }
.act-stacked .act__art svg { max-height: 26svh; width: auto; margin-inline: auto; display: block; }
.act-stacked .act__count { position: static; text-align: center; margin-top: var(--sc-2); font-size: var(--sc-t-sm); }
.act-stacked .act__count span { font-size: var(--sc-t-lg); }
.act-stacked .act__copy { display: grid; gap: var(--sc-8); max-width: 64rem; }
.act-stacked .act__copy > * { grid-area: auto; opacity: 1 !important; transform: none !important; }
.act-stacked .act__entry { padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.act-stacked .act__intro { padding-top: var(--sc-6); }
@media (prefers-reduced-motion: reduce) { .act-stacked .act__art { position: relative; } }
@media (max-width: 860px) { .act__entry .ticks { grid-template-columns: 1fr; } }

/* entry parts and the finale grid */
.act__kicker { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); line-height: 1.35; color: var(--sc-accent); margin: 0 0 var(--sc-4); max-width: 36ch; }
.act__links { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-5); font-size: var(--sc-t-sm); }
.act__intro-line { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: -0.025em; margin: 0; max-width: 14ch; }
.act__finale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); margin-top: var(--sc-5); }
.act__finale-grid h3 { font-size: var(--sc-t-xl); }
@media (max-width: 860px) { .act__finale-grid { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------ Aries --
   What the shared templates don't cover: the upright em (no italic in Space
   Grotesk), the draft tags of the review build, and each chapter's own parts.
   Round 3 (Shervin, 16 Oct): emoji on the services, the problem as cards, the
   peak drawn as service tiles, results-first work,
   Getting started in place of pricing, the portal mock on the real portal's
   layout, the team, and the FAQ as cards. */

/* Space Grotesk has no italic: every templated italic becomes upright. */
.ch-head__eyebrow span, .act__count, .act-lead__how, .act__kicker, .pillars { font-style: normal; }
.ch-head__eyebrow { color: var(--brand-accent-on-dark); }
.ch-head__eyebrow span { font-family: var(--sc-font-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.04em; }
.ch-head .body { color: var(--sc-ink-soft); }
.act__kicker { font-family: var(--sc-font-text); font-weight: 300; font-size: var(--sc-t-lg); color: var(--brand-light-soft); }
.act-lead__how { font-family: var(--sc-font-text); font-weight: 300; color: var(--brand-muted); }
.pillars { font-weight: 500; }
.chips a { gap: 0.55em; font-size: var(--sc-t-base); font-weight: 500; padding: 0.8em 1.2em; }
@media (hover: hover) and (pointer: fine) { .chips a:hover { box-shadow: inset 0 0 0 1px var(--brand-blue); color: var(--brand-glow); } }

/* the emoji before each service (Shervin, 16 Oct). Colour emoji are drawn by the
   device (Apple, Google and Microsoft each draw their own); the box is pinned so
   the line height doesn't jump between them. */
.emoji { display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; font-weight: 400; font-size: 1.05em; line-height: 1; }
.act__entry h3 .emoji { font-size: 0.62em; margin-right: 0.4em; vertical-align: 0.14em; }

/* ---------------------------------------------- draft tags (review build) --
   Every passage still waiting on Kiarash's approval is outlined and tagged.
   SHOW_DRAFTS = false at the top of the page turns all of it off. Inside lists
   of small items (the FAQ) the tag sits inline instead, so outlines never
   overlap from one item to the next. */
.show-drafts [data-draft] { position: relative; outline: 1px dashed rgb(255 196 87 / 0.55); outline-offset: 6px; border-radius: 2px; }
.show-drafts [data-draft]::before { content: "Draft"; position: absolute; z-index: 2; top: -1.25rem; right: -6px; padding: 3px 7px; border-radius: 4px; background: #ffc457; color: #1f1500; font: 600 10px/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; }
.draft-tag { display: none; }
.show-drafts .draft-tag { display: inline-block; margin-left: 0.6em; padding: 3px 7px; border-radius: 4px; background: #ffc457; color: #1f1500; font: 600 10px/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 0.2em; }

/* ------------------------------------------------------- 1 · at a glance -- */
.curtain { box-shadow: 0 -24px 60px -24px rgb(0 0 0 / 0.8); border-top: 1px solid var(--sc-hairline-strong); }
.curtain__plate { grid-template-columns: 1fr; }
.curtain__plate .pillars { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); gap: 0.6rem 1.6rem; }
.curtain__plate .pillars li::before { content: "✓"; color: var(--brand-glow); margin-right: 0.5rem; font-size: 0.8em; }
.curtain__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); }

.logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) clamp(1.5rem, 4vw, 3.5rem); margin-top: var(--sc-7); }
.logos .label { margin: 0; color: var(--brand-muted); }
.logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5) clamp(1.5rem, 4vw, 3.5rem); }
.logos img { display: block; height: 2.25rem; width: auto; opacity: 0.88; transition: opacity var(--sc-d-fast) var(--sc-ease-out); }
/* the two badge-shaped marks (West-Can, Home Hardware) read small at wordmark height */
.logos img[src*="westcan"], .logos__badge img { height: 3rem; }
@media (hover: hover) and (pointer: fine) { .logos a:hover img { opacity: 1; } }

/* --------------------------------------------------------- 2 · the problem --
   Shervin, 16 Oct: the sticky list and the Read more were "weird". Five pain
   cards and the turn as a sixth, blue card; nothing pinned, nothing hidden. */
.problem { display: grid; gap: var(--sc-8); }
.problem__head { max-width: 50rem; }
.pains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4); }
.pain { display: grid; align-content: start; gap: var(--sc-4); min-height: 11rem; padding: var(--sc-6); border-radius: var(--sc-r-lg); background: var(--brand-dark-surface); border: 1px solid var(--sc-hairline-strong); }
.pain__tag { margin: 0; display: inline-flex; align-items: center; gap: 0.65em; font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-muted); }
.pain__tag span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgb(255 123 123 / 0.12); color: #ff9c9c; font-size: 0.7rem; letter-spacing: 0; }
.pain__line { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.55rem); line-height: 1.25; letter-spacing: -0.012em; color: var(--brand-light); text-wrap: pretty; }
.pain--turn { background: linear-gradient(150deg, #1d6bff, #1446b8); border-color: transparent; box-shadow: 0 24px 60px -24px rgb(29 107 255 / 0.6); color: #fff; }
.pain__turn { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.35rem, 1rem + 0.9vw, 1.8rem); line-height: 1.12; letter-spacing: -0.02em; }
.pain__turn em { font-style: normal; color: #d4e3ff; }
.pain__more { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; color: #fff; }
.pain__link { justify-self: start; color: #fff; font-weight: 600; font-size: var(--sc-t-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
@media (hover: hover) and (pointer: fine) { .pain__link:hover { text-decoration-thickness: 2px; } }

.act__intro-line { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }
.act__entry h3 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }

/* -------------------------------------------------- 3 · the system (peak) --
   Shervin, 16 Oct: the circles were "too simplified". Each service is a tile
   with a small picture of the work (a site, a map pin, a search ad, a post, a
   grid of posts, a pipeline) around one Aries core. Tiles wait dim; each lights, draws its wire into
   the core and starts a pulse along it when the act passes its data-at. The
   wires sit under the tiles, so they light through :has() off their item.
   Everything lit: the ring closes and the core turns Aries blue. */
.sys { max-height: 78svh; }
.sys__halo { opacity: 0.15; transition: opacity 900ms var(--sc-ease-out); }
.sys__spoke-bed { stroke: rgb(232 235 238 / 0.1); stroke-width: 1.25; stroke-dasharray: 3 6; }
.sys__ring-bed { fill: none; stroke: rgb(232 235 238 / 0.06); stroke-width: 1; }
.sys__spoke { stroke: var(--brand-glow); stroke-width: 2; stroke-opacity: 0.75; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 800ms var(--sc-ease-out); }
.sys__pulse { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.06 0.94; stroke-dashoffset: 1; opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
@keyframes sys-pulse { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sys:has(.item[data-i="0"].is-lit) .sys__wire[data-i="0"] .sys__spoke,
.sys:has(.item[data-i="1"].is-lit) .sys__wire[data-i="1"] .sys__spoke,
.sys:has(.item[data-i="2"].is-lit) .sys__wire[data-i="2"] .sys__spoke,
.sys:has(.item[data-i="3"].is-lit) .sys__wire[data-i="3"] .sys__spoke,
.sys:has(.item[data-i="4"].is-lit) .sys__wire[data-i="4"] .sys__spoke,
.sys:has(.item[data-i="5"].is-lit) .sys__wire[data-i="5"] .sys__spoke { stroke-dashoffset: 0; }
.sys:has(.item[data-i="0"].is-lit) .sys__wire[data-i="0"] .sys__pulse,
.sys:has(.item[data-i="1"].is-lit) .sys__wire[data-i="1"] .sys__pulse,
.sys:has(.item[data-i="2"].is-lit) .sys__wire[data-i="2"] .sys__pulse,
.sys:has(.item[data-i="3"].is-lit) .sys__wire[data-i="3"] .sys__pulse,
.sys:has(.item[data-i="4"].is-lit) .sys__wire[data-i="4"] .sys__pulse,
.sys:has(.item[data-i="5"].is-lit) .sys__wire[data-i="5"] .sys__pulse { opacity: 0.85; animation: sys-pulse 2.4s linear infinite; animation-delay: var(--d, 0s); }

/* the tiles and their small pictures: grey while waiting, blue once lit */
.item { cursor: pointer; }
.sys__tile { fill: #0b131d; stroke: rgb(232 235 238 / 0.16); stroke-width: 1.25; transition: fill 500ms var(--sc-ease-out), stroke 500ms var(--sc-ease-out); }
.sys__emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 16px; opacity: 0.45; transition: opacity 500ms var(--sc-ease-out); }
.sys__label { font-family: var(--sc-font-display); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; fill: var(--brand-muted); transition: fill 500ms var(--sc-ease-out); }
.t-frame { fill: none; stroke: rgb(232 235 238 / 0.16); stroke-width: 1.2; transition: stroke 500ms var(--sc-ease-out); }
.t-soft { fill: rgb(232 235 238 / 0.06); transition: fill 500ms var(--sc-ease-out); }
.t-ink { fill: rgb(232 235 238 / 0.18); transition: fill 500ms var(--sc-ease-out); }
.t-acc { fill: rgb(232 235 238 / 0.26); transition: fill 500ms var(--sc-ease-out); }
.t-accsoft { fill: rgb(232 235 238 / 0.1); transition: fill 500ms var(--sc-ease-out); }
.t-card { fill: rgb(232 235 238 / 0.11); transition: fill 500ms var(--sc-ease-out); }
.t-hole { fill: #0b131d; transition: fill 500ms var(--sc-ease-out); }
.t-stars { font-size: 9px; letter-spacing: 1px; fill: rgb(232 235 238 / 0.25); transition: fill 500ms var(--sc-ease-out); }
.t-badge { font: 700 6.5px var(--sc-font-text); fill: #0b131d; }
.t-check { fill: none; stroke: #0b131d; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.item.is-lit .sys__tile { fill: #0f1d33; stroke: rgb(127 168 255 / 0.6); }
.item.is-lit .sys__emoji { opacity: 1; }
.item.is-lit .sys__label { fill: var(--brand-light); }
.item.is-lit .t-frame, .pv .t-frame { stroke: rgb(127 168 255 / 0.45); }
.item.is-lit .t-soft, .pv .t-soft { fill: rgb(127 168 255 / 0.12); }
.item.is-lit .t-ink, .pv .t-ink { fill: rgb(232 235 238 / 0.62); }
.item.is-lit .t-acc, .pv .t-acc { fill: var(--brand-blue); }
.item.is-lit .t-accsoft, .pv .t-accsoft { fill: rgb(29 107 255 / 0.5); }
.item.is-lit .t-card, .pv .t-card { fill: rgb(232 235 238 / 0.3); }
.item.is-lit .t-hole, .pv .t-hole { fill: #0f1d33; }
.item.is-lit .t-stars, .pv .t-stars { fill: #ffc457; }
.item.is-lit .t-badge, .pv .t-badge { fill: #fff; }
.item.is-lit .t-check, .pv .t-check { stroke: #fff; }
.item.is-now .sys__tile { stroke: var(--brand-glow-bright); stroke-width: 2; filter: url(#tile-glow); }
.item:focus-visible .sys__tile { stroke: #fff; stroke-width: 2.5; }

/* the core: two slow orbits around the Aries disc */
.sys__orbit { fill: none; stroke: rgb(127 168 255 / 0.3); stroke-width: 1; stroke-dasharray: 2 7; transform-box: fill-box; transform-origin: center; animation: sys-spin 60s linear infinite; }
.sys__orbit--b { stroke: rgb(127 168 255 / 0.2); stroke-dasharray: 1 12; animation-duration: 90s; animation-direction: reverse; }
@keyframes sys-spin { to { transform: rotate(360deg); } }
.sys__core circle { fill: var(--brand-raised); stroke: rgb(29 107 255 / 0.55); stroke-width: 2; transition: fill 700ms var(--sc-ease-out), stroke 700ms var(--sc-ease-out); }
.sys__core .sys__core-inner { fill: none; stroke: rgb(232 235 238 / 0.08); stroke-width: 1; }
.sys__core-name { font-family: var(--sc-font-display); font-weight: 600; font-size: 21px; letter-spacing: 0.32em; fill: var(--brand-light); }
.sys__core-sub { font-family: var(--sc-font-text); font-size: 12.5px; fill: var(--brand-muted); transition: fill 700ms var(--sc-ease-out); }
.act .finale-line { stroke: var(--brand-glow); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; transition: stroke-dashoffset 1100ms var(--sc-ease-out); }
.act.is-whole .finale-line { stroke-dashoffset: 0; }
.act.is-whole .sys__core circle { fill: var(--brand-blue); stroke: var(--brand-glow-bright); }
.act.is-whole .sys__core .sys__core-inner { fill: none; stroke: rgb(255 255 255 / 0.3); }
.act.is-whole .sys__core-sub { fill: #e6eeff; }
.act.is-whole .sys__halo { opacity: 1; }
.act.is-whole .sys__orbit { stroke: rgb(181 205 255 / 0.55); }
@media (prefers-reduced-motion: reduce) {
  .sys__pulse { animation: none !important; opacity: 0 !important; }
  .sys__orbit { animation: none; }
}
.act__count { color: var(--brand-muted); font-family: var(--sc-font-text); }
.act__count span { color: var(--brand-glow); font-family: var(--sc-font-display); }
.act__step { color: var(--brand-accent-on-dark); }
.act__entry h3 { font-weight: 600; }
.act__entry--finale .act__intro-line { font-size: var(--sc-t-2xl); max-width: 18ch; margin-top: var(--sc-4); }
.act__intro-line { font-weight: 600; }
.act__tip { background: var(--brand-light); color: var(--brand-dark); }
.act-stacked .act__art { background: linear-gradient(to bottom, var(--brand-dark) 92%, transparent); padding-bottom: var(--sc-6); }
.act-stacked .act__art svg { max-height: 32svh; }

/* -------------------------------------------------------- 4 · our work (pan) --
   Case study cards, then sample quotes, then the closing note. Shervin, 16 Oct:
   results first ("what business owners care about is the results"), so the
   result is the card's headline; a result we don't have yet is dashed. */
.work-stage { height: 100svh; box-sizing: border-box; padding-top: 3.75rem; display: flex; align-items: center; overflow: clip; }
.rail { display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); will-change: transform; }
.rail > * { flex: none; }
.rail__head { width: clamp(19rem, 30vw, 30rem); display: grid; align-content: center; padding-right: clamp(1rem, 3vw, 3rem); }
.case { width: clamp(19rem, 30vw, 29rem); display: grid; align-content: start; gap: var(--sc-4); padding: var(--sc-4); border-radius: var(--sc-r-lg); border: 1px solid var(--sc-hairline-strong); background: var(--brand-dark-surface); }
.case__shot { margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: clip; background: #0b1118; }
.case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.case__thumbs { display: flex; gap: 6px; margin-top: calc(var(--sc-2) * -1); }
.case__thumbs img { width: 3.75rem; height: 3.75rem; object-fit: cover; object-position: 50% 30%; border-radius: 8px; display: block; }
/* short laptop screens: a wider crop and no thumbnails, so a card fits the screen */
@media (max-height: 860px) and (min-width: 861px) { .case__shot { aspect-ratio: 16 / 7; } .case__thumbs { display: none; } }
.case__body { display: grid; gap: var(--sc-3); padding: 0 var(--sc-2) var(--sc-2); }
.case__who { margin: 0; display: grid; gap: 0.25rem; }
.case__client { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.15; color: var(--brand-light); }
.case__kind { font-size: var(--sc-t-xs); letter-spacing: 0.06em; color: var(--brand-muted); }
.case__result { margin: 0; padding: 0.85rem 1rem; border-radius: 12px; background: rgb(29 107 255 / 0.12); border: 1px solid rgb(127 168 255 / 0.28); font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.05rem, 0.92rem + 0.4vw, 1.25rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--brand-light); }
.case__result span { display: block; margin-bottom: 0.4em; font-family: var(--sc-font-text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-accent-on-dark); }
.case__result.is-pending { background: rgb(232 235 238 / 0.03); border: 1px dashed rgb(232 235 238 / 0.22); font-size: var(--sc-t-base); font-weight: 500; color: var(--brand-light-soft); }
.case__result.is-pending span { color: var(--brand-muted); }
.case .ticks { font-size: var(--sc-t-sm); gap: var(--sc-2); }
.case .ticks li { color: var(--brand-light-soft); }
.case__services { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.case__services span { padding: 0.3em 0.75em; border-radius: var(--sc-r-pill); background: rgb(29 107 255 / 0.14); color: var(--brand-glow); font-size: 0.75rem; font-weight: 500; }
.case .link { font-size: var(--sc-t-sm); justify-self: start; }
.quote { width: clamp(17rem, 24vw, 23rem); display: grid; align-content: center; gap: var(--sc-5); padding: var(--sc-6); border-radius: var(--sc-r-lg); border: 1px dashed rgb(255 196 87 / 0.45); background: rgb(17 27 38 / 0.6); }
.quote__tag { margin: 0; justify-self: start; padding: 3px 8px; border-radius: 4px; background: #ffc457; color: #1f1500; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.quote__text { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); line-height: 1.3; color: var(--brand-light); }
.quote__who { margin: 0; display: flex; align-items: center; gap: var(--sc-3); font-size: var(--sc-t-sm); line-height: 1.4; color: var(--brand-muted); }
.quote__who strong { color: var(--brand-light-soft); font-weight: 600; }
.quote__face { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px dashed rgb(232 235 238 / 0.3); background: rgb(232 235 238 / 0.05); }
.rail__end { width: clamp(17rem, 26vw, 24rem); display: grid; align-content: center; justify-items: start; gap: var(--sc-6); }
@media (prefers-reduced-motion: no-preference) {
  .rail > :not(:first-child) { opacity: clamp(0.55, calc(0.55 + (var(--sc-p, 0) * 3 - 0.2) * 0.6), 1); transition: opacity 200ms linear; }
}

/* ------------------------------------------------------- 5 · our vision -- */
.vision { display: grid; justify-items: center; text-align: center; gap: var(--sc-7); padding-block: var(--sc-6); }
.vision__statement { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem); line-height: 1.04; max-width: 20ch; }
.vision__body { display: grid; justify-items: center; gap: var(--sc-4); }
.vision__body .body { margin-inline: auto; }
.vision__body .body + .body { margin-top: 0; }

/* -------------------------------------------------- 6 · getting started --
   In place of pricing (Shervin, 16 Oct). Three numbered cards, an arrow between
   each, then the terms and the button. */
.start { display: grid; justify-items: center; gap: var(--sc-8); }
.start .ch-head { max-width: 44rem; }
.start .ch-head .body { margin-inline: auto; }
.start__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.start__step { position: relative; display: grid; align-content: start; gap: var(--sc-3); padding: var(--sc-6); border-radius: var(--sc-r-lg); background: var(--brand-dark-surface); border: 1px solid var(--sc-hairline-strong); }
.start__n { margin: 0 0 var(--sc-3); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px; background: rgb(29 107 255 / 0.14); color: var(--brand-glow); font-family: var(--sc-font-display); font-weight: 600; }
.start__step:first-child .start__n { background: var(--brand-blue); color: #fff; }
.start__step h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.015em; color: var(--brand-light); }
.start__step p:not(.start__n) { margin: 0; color: var(--brand-light-soft); font-weight: 300; line-height: 1.65; }
.start__step:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 50%; right: calc(var(--sc-5) / -2 - 0.85rem); transform: translateY(-50%); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-dark); border: 1px solid var(--sc-hairline-strong); color: var(--brand-glow); font-size: 0.85rem; }
.start__foot { display: grid; justify-items: center; gap: var(--sc-4); text-align: center; }
.start__terms { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); color: var(--brand-light); }
.start__fine { margin: 0; color: var(--brand-muted); }

/* ---------------------------------------------------- 7 · client portal --
   Shervin, 16 Oct: "it looks nothing like our thing and it looks crammed". The
   mock follows the real portal's own layout and colours (its public stylesheet
   at portal.byarieslabs.com): the side rail with the client at the bottom, the
   eyebrow and big title, four tiles, a project card with a 2px meter and its
   tasks with outlined status tags. Fewer rows, bigger type, more room. */
.portal { align-items: center; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.portal .chapter__media { position: relative; top: 0; }
.portal .ticks { margin-top: var(--sc-2); }
.mock { position: relative; border-radius: 16px; overflow: clip; border: 1px solid rgb(232 235 238 / 0.14); background: radial-gradient(circle at 82% 8%, rgb(29 107 255 / 0.11), transparent 22rem), #0b1118; box-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.75); font-family: var(--sc-font-text); font-size: 12px; line-height: 1.45; color: #e8ebee; will-change: transform; }
.mock p { margin: 0; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: rgb(232 235 238 / 0.04); border-bottom: 1px solid rgb(232 235 238 / 0.08); }
.mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: #ff6b6b; }
.mock__bar span:nth-child(2) { background: #ffb84d; }
.mock__bar span:nth-child(3) { background: #4cd18a; }
.mock__bar p { margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: rgb(232 235 238 / 0.05); font-size: 10.5px; color: #84909c; }
.mock__shell { display: grid; grid-template-columns: 9.75rem minmax(0, 1fr); min-height: 23rem; }
.mock__rail { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 22px 16px 16px; border-right: 1px solid rgb(232 235 238 / 0.12); background: rgb(8 13 19 / 0.7); }
.mock__brand { display: flex; align-items: center; gap: 9px; font-family: var(--sc-font-display); font-weight: 600; font-size: 10.5px; letter-spacing: 0.34em; }
.mock__brand small { display: block; margin-top: 3px; font-family: var(--sc-font-text); font-weight: 500; font-size: 7.5px; letter-spacing: 0.17em; text-transform: uppercase; color: #84909c; }
.mock__who { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid rgb(232 235 238 / 0.12); }
.mock__who span { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgb(29 107 255 / 0.14); border: 1px solid rgb(29 107 255 / 0.42); color: #7fa8ff; font-size: 9px; font-weight: 600; }
.mock__who strong { font-size: 10.5px; font-weight: 600; }
.mock__who small { display: block; margin-top: 2px; font-size: 9px; font-weight: 400; color: #84909c; }
.mock__main { padding: 26px 28px 28px; display: grid; align-content: start; }
.mock__eyebrow { color: #7fa8ff; font-size: 8.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.mock .mock__h1 { margin: 6px 0 20px; font-family: var(--sc-font-display); font-weight: 500; font-size: 23px; line-height: 1.08; letter-spacing: -0.03em; }
.mock__metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; border: 1px solid rgb(232 235 238 / 0.12); border-radius: 10px; background: rgb(17 25 35 / 0.52); overflow: clip; }
.mock__metrics p { padding: 12px 13px; border-right: 1px solid rgb(232 235 238 / 0.12); }
.mock__metrics p:last-child { border-right: 0; }
.mock__metrics span { display: block; font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #84909c; }
.mock__metrics strong { display: block; margin-top: 7px; font-family: var(--sc-font-display); font-weight: 500; font-size: 19px; }
.mock__metrics .is-amber { color: #ffb84d; }
.mock__card { border: 1px solid rgb(232 235 238 / 0.12); border-radius: 12px; background: linear-gradient(145deg, rgb(21 30 42 / 0.94), rgb(13 20 28 / 0.94)); overflow: clip; }
.mock__card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px; }
.mock .mock__h3 { margin-top: 5px; font-family: var(--sc-font-display); font-weight: 500; font-size: 16px; }
.mock__progress { text-align: right; }
.mock__progress strong { display: block; font-family: var(--sc-font-display); font-weight: 500; font-size: 19px; }
.mock__progress span { display: block; margin-top: 3px; font-size: 8.5px; color: #84909c; }
.mock__meter { height: 2px; background: rgb(232 235 238 / 0.07); }
.mock__meter i { display: block; width: 60%; height: 100%; background: #1d6bff; }
.mock__tasks { list-style: none; margin: 0; padding: 0; }
.mock__tasks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid rgb(232 235 238 / 0.12); font-size: 11.5px; font-weight: 500; }
.mock__tasks li:first-child { border-top: 0; }
.st { font-style: normal; white-space: nowrap; padding: 3px 7px; border-radius: 4px; border: 1px solid rgb(232 235 238 / 0.12); font-size: 7.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #84909c; }
.st--done { color: #5bd08d; border-color: rgb(91 208 141 / 0.35); }
.st--wait { color: #ffb84d; border-color: rgb(255 184 77 / 0.35); }
.st--prog { color: #7fa8ff; border-color: rgb(127 168 255 / 0.35); }
.mock .mock__example { position: absolute; top: 8px; right: 12px; z-index: 2; padding: 3px 8px; border-radius: 999px; background: rgb(232 235 238 / 0.1); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-light); }

/* ---------------------------------------------------------- 8 · our team --
   Shervin, 16 Oct: "The Team Behind Your Growth" from the board. Round faces,
   name, role. Initials until the photos come. */
.team { display: grid; justify-items: center; gap: var(--sc-8); }
.team .ch-head { max-width: 40rem; }
.team .ch-head .body { margin-inline: auto; }
.team__grid { list-style: none; margin: 0; padding: 0; width: min(100%, 60rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-5); }
.person { display: grid; justify-items: center; text-align: center; gap: var(--sc-2); }
.person p { margin: 0; }
.person__face { width: clamp(6.5rem, 9vw, 8.5rem); aspect-ratio: 1; margin-bottom: var(--sc-3); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #24427c, #0f1a2b 70%); box-shadow: 0 0 0 1px rgb(127 168 255 / 0.35), 0 0 0 6px rgb(29 107 255 / 0.08), 0 24px 50px -24px rgb(29 107 255 / 0.5); font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); letter-spacing: 0.02em; color: var(--brand-light); }
.person__name { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.2; color: var(--brand-light); }
.person__role { font-size: var(--sc-t-sm); font-weight: 500; color: var(--brand-glow); }
.person__role.is-todo { color: var(--brand-muted); }

/* ------------------------------------------------ 9 · questions & contact --
   Shervin, 16 Oct: the FAQ "could be designed better … some stuff broken".
   The heading and a way to ask stay put on the left; the questions are cards
   on the right, grouped; the open one turns blue at its button. */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-8) clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__side { position: sticky; top: 6rem; display: grid; gap: var(--sc-6); }
.faq__ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); }
.faq__groups { display: grid; gap: var(--sc-7); }
.faq__label { margin: 0 0 var(--sc-4); color: var(--brand-accent-on-dark); }
.faq .acc-list { border-top: 0; display: grid; gap: var(--sc-2); }
.faq .acc { border: 1px solid var(--sc-hairline-strong); border-radius: 14px; background: rgb(232 235 238 / 0.025); transition: background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); }
.faq .acc[open] { background: var(--brand-dark-surface); border-color: rgb(127 168 255 / 0.35); }
@media (hover: hover) and (pointer: fine) { .faq .acc:hover { border-color: rgb(127 168 255 / 0.3); } }
.faq .acc > summary { padding: 1.05rem 1.1rem 1.05rem 1.35rem; gap: var(--sc-4); font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-base); line-height: 1.4; color: var(--brand-light); }
.faq .acc > summary::after { content: "+"; flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: rgb(29 107 255 / 0.14); color: var(--brand-glow); font-weight: 400; font-size: 1.35rem; transition: transform var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.faq .acc[open] > summary::after { transform: rotate(45deg); background: var(--brand-blue); color: #fff; }
.faq .acc > summary:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; border-radius: 12px; }
.faq .acc > .body { margin: 0; padding: 0 1.35rem 1.25rem; max-width: 60ch; }
.contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sc-8) clamp(2rem, 6vw, 6rem); align-items: center; margin-top: var(--sc-10); padding-top: var(--sc-9); border-top: 1px solid var(--sc-hairline-strong); }
.contact__copy { display: grid; gap: var(--sc-5); }
.contact__copy .label, .contact__copy .display { margin: 0; }
.form { display: grid; gap: var(--sc-3); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 18px; background: #fff; color: #0b1118; box-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.7); }
.form h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); }
.form__sub { margin: 0 0 var(--sc-2); font-size: var(--sc-t-sm); color: #4a5662; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.form label span { color: var(--brand-blue); }
.form input, .form textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 8px; border: 1px solid #e3e7ea; background: #f7f9fa; color: #0b1118; font: inherit; font-size: 14px; font-weight: 400; outline: none; }
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgb(29 107 255 / 0.15); }
.form .btn { justify-content: center; margin-top: var(--sc-2); }
.form__status { margin: 0; min-height: 1.2em; font-size: 13px; font-weight: 500; color: #1a7f4f; text-align: center; }
.form__status.is-error { color: #c0392b; }
.form__review { margin: 0; font-size: 12px; color: #6b7682; text-align: center; }
/* Launch, 23 Oct: booking only until the form is wired (SHOW_FORM in site.ts). */
.book-card__or { margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); color: #4a5662; text-align: center; }
.book-card__or a { color: var(--brand-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.foot__brand { display: grid; align-content: start; gap: var(--sc-3); }
.foot__brand p { margin: 0; color: var(--brand-muted); }
.foot__brand .foot__tag { color: var(--brand-glow); letter-spacing: 0.3em; }
.foot h4.label { color: var(--brand-muted); }
.foot a { color: var(--brand-light-soft); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--brand-glow); } }
.foot__legal { color: var(--brand-muted); }

/* ----------------------------------------------------------- small laptops -- */
@media (max-width: 1100px) {
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* ------------------------------------------------------------------ phones -- */
@media (max-width: 860px) {
  .pains { grid-template-columns: 1fr; gap: var(--sc-3); }
  .pain { min-height: 0; padding: var(--sc-5); gap: var(--sc-3); }
  .case, .quote { width: min(82vw, 21rem); }
  .logos img { height: 1.75rem; }
  .logos img[src*="westcan"], .logos__badge img { height: 2.4rem; }
  .rail__head { width: min(84vw, 22rem); }
  .rail__end { width: min(78vw, 20rem); }
  .vision__statement { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .start__steps { grid-template-columns: 1fr; gap: var(--sc-5); }
  .start__step:not(:last-child)::after { content: "↓"; top: auto; right: auto; left: 50%; bottom: calc(var(--sc-5) / -2 - 0.85rem); transform: translateX(-50%); }
  .portal { grid-template-columns: 1fr; }
  .mock { font-size: 11px; }
  .mock__shell { grid-template-columns: 1fr; min-height: 0; }
  .mock__rail { display: none; }
  .mock__main { padding: 20px 18px 20px; }
  .mock__metrics { grid-template-columns: repeat(2, 1fr); }
  .mock__metrics p:nth-child(2) { border-right: 0; }
  .mock__metrics p:nth-child(-n + 2) { border-bottom: 1px solid rgb(232 235 238 / 0.12); }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-4); }
  .faq { grid-template-columns: 1fr; gap: var(--sc-7); }
  .faq__side { position: static; }
  .faq .acc > summary { padding: 0.95rem 0.9rem 0.95rem 1.1rem; }
  .faq .acc > .body { padding: 0 1.1rem 1.1rem; }
  .contact { grid-template-columns: 1fr; }
  .curtain__ctas { width: 100%; }
  .curtain__ctas .btn { flex: 1 1 100%; justify-content: center; }
}
/* --------------------------------------------- round 4: Atrin's 18 Oct audit --
   Placeholders, the fix line on each pain, service previews, a bolder vision,
   and the service pages (calm template: no pinned motion). */

/* PLACEHOLDER: content still to come from Shervin or Kiarash. Always visible,
   even with SHOW_DRAFTS off, so nothing ships half-filled by accident. */
.ph { border: 1px dashed rgb(255 196 87 / 0.7); background: rgb(255 196 87 / 0.07); color: #ffd58a; border-radius: 10px; }
.ph--logo { display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1rem; border-radius: 999px; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.ph--block { margin: 0; padding: var(--sc-6); font-size: var(--sc-t-base); line-height: 1.6; max-width: 46rem; }
.case__result.ph { border: 1px dashed rgb(255 196 87 / 0.7); background: rgb(255 196 87 / 0.07); color: #ffd58a; font-size: var(--sc-t-base); font-weight: 500; }
.case__result.ph span { color: #ffc457; }
.person__role.ph { padding: 0.2em 0.7em; border-radius: 999px; font-size: var(--sc-t-xs); font-weight: 600; }
.person__face.is-ph { position: relative; border: 1px dashed rgb(255 196 87 / 0.75); flex-direction: column; }
.person__face.is-ph small { position: absolute; bottom: -0.6rem; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 4px; background: #ffc457; color: #1f1500; font: 600 10px/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
img.person__face { object-fit: cover; }

/* 2 · the problem: how we fix each one (Atrin: "highlight how we tackle them") */
.pain__fix { margin: auto 0 0; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); line-height: 1.55; color: var(--brand-light); }
.pain__fix span { display: block; margin-bottom: 0.35em; font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #6fd99a; }
.pain__fix span::before { content: "✓ "; }
.pain__fix a { color: var(--brand-glow); font-weight: 600; text-decoration: none; padding-left: 0.15em; }
@media (hover: hover) and (pointer: fine) { .pain__fix a:hover { color: var(--brand-glow-bright); } }

/* a service picture on its own, always lit (Atrin: "visual previews for each service") */
.pv { display: block; width: 100%; height: auto; }
.pv__bg { fill: #0f1d33; stroke: rgb(127 168 255 / 0.4); stroke-width: 0.8; }
.act__preview { max-width: 22rem; margin: 0 0 var(--sc-4); border-radius: 12px; box-shadow: 0 20px 50px -24px rgb(29 107 255 / 0.55); }
.act__more { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); }
/* short laptop screens: the preview gives way so the entry still fits the pinned screen */
@media (max-height: 820px) and (min-width: 861px) { .act__preview { max-width: 15rem; margin-bottom: var(--sc-3); } }

/* 5 · vision: the two paragraphs bolder (Atrin) */
.vision__body .body { font-size: var(--sc-t-lg); font-weight: 400; line-height: 1.55; color: var(--brand-light); max-width: 48ch; }

/* ------------------------------------------------------- the service pages -- */
.svc-page main { padding-top: 3.75rem; }
.svc-hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.svc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sc-7) clamp(2rem, 6vw, 6rem); align-items: center; }
.svc-hero__copy { display: grid; gap: var(--sc-5); }
.svc-hero__copy h1 { max-width: 14ch; }
.svc-hero__copy h1 .emoji { font-size: 0.7em; vertical-align: 0.1em; }
.svc-hero__line { color: var(--brand-light-soft); max-width: 40ch; }
.svc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-2); }
.svc-hero__pic { margin: 0; border-radius: 18px; overflow: clip; box-shadow: 0 40px 100px -40px rgb(29 107 255 / 0.6), 0 0 0 1px rgb(127 168 255 / 0.25); }
.svc-crumbs { margin: 0; display: flex; gap: 0.6em; font-size: var(--sc-t-xs); color: var(--brand-muted); }
.svc-crumbs a { color: var(--brand-light-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .svc-crumbs a:hover { color: var(--brand-glow); } }
.svc-sec { padding-block: clamp(3.5rem, 7vw, 6rem); }
.svc-sec .ch-head { margin-bottom: var(--sc-7); max-width: 44rem; }
.svc-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sc-4); }
.svc-ticks li { display: flex; align-items: center; gap: 0.8rem; padding: var(--sc-5); border-radius: 16px; background: var(--brand-dark-surface); border: 1px solid var(--sc-hairline-strong); font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.25; color: var(--brand-light); }
.svc-ticks li span { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(29 107 255 / 0.16); color: var(--brand-glow); font-size: 0.85rem; }
/* auto-fill keeps a lone example at card width instead of stretching it across the page */
.svc-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--sc-5); }
.svc-cases .case { width: auto; }
.svc-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sc-4); }
.svc-others a { height: 100%; box-sizing: border-box; display: grid; align-content: start; gap: var(--sc-3); padding: var(--sc-4); border-radius: 16px; background: var(--brand-dark-surface); border: 1px solid var(--sc-hairline-strong); text-decoration: none; transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); }
.svc-others .pv { border-radius: 10px; }
.svc-others__name { display: flex; align-items: center; gap: 0.5em; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); line-height: 1.2; color: var(--brand-light); }
.svc-others__line { font-size: var(--sc-t-sm); line-height: 1.5; color: var(--brand-light-soft); }
@media (hover: hover) and (pointer: fine) { .svc-others a:hover { border-color: rgb(127 168 255 / 0.5); transform: translateY(-2px); } }
.svc-cta { display: grid; justify-items: center; gap: var(--sc-5); text-align: center; padding-bottom: var(--sc-4); }
.svc-cta .display { max-width: 22ch; }
.svc-cta .small { margin: 0; color: var(--brand-muted); }
.svc-end .foot { margin-top: var(--sc-9); }
@media (max-width: 860px) {
  .svc-hero__grid { grid-template-columns: 1fr; }
  .svc-hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .act__preview { max-width: 100%; }
  .ph--logo { height: 2.2rem; }
  .svc-others { grid-template-columns: 1fr 1fr; gap: var(--sc-3); }
  .svc-others a { padding: var(--sc-3); }
  .svc-others__line { display: none; }
  .svc-others__name { font-size: var(--sc-t-sm); }
}
/* the fix line sits at the foot of each pain card, so the cards line up */
.pains .pain { display: flex; flex-direction: column; }

/* 19 Oct: placeholders filled from sources. A project whose numbers aren't in yet
   says where it stands, in a quieter box than a measured result. */
.case__result.is-status { background: rgb(232 235 238 / 0.04); border: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-base); font-weight: 500; color: var(--brand-light-soft); }
.case__result.is-status span { color: var(--brand-muted); }
/* a service-page example without a screenshot shows its service's picture */
.case__shot--pic { display: grid; place-items: center; padding: 0.75rem; background: #0b1118; }
.case__shot--pic .pv { width: 100%; height: 100%; object-fit: contain; }
/* six people since 19 Oct (Persia joined): two rows of three */
.team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 54rem); }
@media (max-width: 860px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Shervin, 19 Oct: results first. A case can carry several results: the first
   leads, the rest follow under a hairline. */
.case__result p { margin: 0; }
.case__result p + p { margin-top: 0.55em; padding-top: 0.55em; border-top: 1px solid rgb(127 168 255 / 0.22); font-size: 0.92em; font-weight: 500; color: var(--brand-light-soft); }
/* the form: the label and its asterisk on one line (Shervin, 19 Oct) */
.form label .form__l { color: inherit; }
.form__l b { color: var(--brand-blue); font-weight: 700; }
/* the Aries mark in the centre of How it works (Shervin, 19 Oct: "Add our logo here") */
.sys__core-logo { opacity: 0.95; }

/* ------------------------------------------ 19 Oct, Shervin: logos + fuller service pages -- */
/* each case card carries its client's logo ("lets put the company logos in there") */
.case__logos { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; min-height: 2.4rem; }
.case__logos img { display: block; height: 1.55rem; width: auto; opacity: 0.92; }
.case__logos img.is-badge { height: 2.2rem; }

/* the hero: a glow behind the picture, the clients we do this for, a result on the picture */
.svc-hero { min-height: min(54rem, 86svh); display: grid; align-content: center; background-image: radial-gradient(55% 70% at 78% 45%, rgb(29 107 255 / 0.16), transparent 62%); }
.svc-hero__copy h1 { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5rem); }
.svc-hero__clients { margin-top: var(--sc-5); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); display: grid; gap: var(--sc-3); }
.svc-hero__clients .label { margin: 0; color: var(--brand-muted); }
.svc-hero__clients ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); }
.svc-hero__clients img { display: block; height: 1.8rem; width: auto; opacity: 0.9; }
.svc-hero__clients img.is-badge { height: 2.5rem; }
.svc-hero__art { position: relative; }
.svc-hero__proof { position: absolute; left: clamp(-2.5rem, -3vw, -1rem); bottom: -1.75rem; z-index: 2; max-width: 19rem; margin: 0; padding: 1rem 1.1rem; border-radius: 16px; background: linear-gradient(150deg, #1d6bff, #1446b8); box-shadow: 0 24px 60px -20px rgb(29 107 255 / 0.7); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.22; color: #fff; }
.svc-hero__proof span { display: block; margin-bottom: 0.45em; font-family: var(--sc-font-text); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #d4e3ff; }
.svc-hero__proof.is-status { background: var(--brand-dark-surface); border: 1px solid rgb(127 168 255 / 0.35); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.8); font-size: var(--sc-t-base); font-weight: 500; color: var(--brand-light); }
.svc-hero__proof.is-status span { color: var(--brand-muted); }

/* the problem it fixes: without us → with us */
.svc-problem { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--sc-4); }
.svc-problem__card { display: grid; align-content: start; gap: var(--sc-4); padding: var(--sc-7) var(--sc-6); border-radius: var(--sc-r-lg); background: var(--brand-dark-surface); border: 1px solid var(--sc-hairline-strong); }
.svc-problem__card.is-fix { background: linear-gradient(150deg, #1d6bff, #1446b8); border-color: transparent; box-shadow: 0 24px 60px -24px rgb(29 107 255 / 0.6); }
.svc-problem__card.is-fix .pain__tag { color: #d4e3ff; }
.svc-problem__card.is-fix .pain__tag span { background: rgb(255 255 255 / 0.18); color: #fff; }
.svc-problem__text { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--brand-light); text-wrap: balance; }
.svc-problem__card.is-fix .svc-problem__text { color: #fff; }
.svc-problem__arrow { margin: 0; align-self: center; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); background: var(--brand-dark); color: var(--brand-glow); font-size: 1.1rem; }

/* questions on a service page: one column of the homepage FAQ's cards */
.faq.faq--one { grid-template-columns: 1fr; max-width: 52rem; }
.svc-faq__more { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); }

@media (max-width: 860px) {
  .svc-hero { min-height: 0; }
  .svc-hero__proof { position: relative; left: auto; bottom: auto; max-width: none; margin-top: calc(var(--sc-6) * -1); margin-inline: var(--sc-4); }
  .svc-problem { grid-template-columns: 1fr; }
  .svc-problem__arrow { justify-self: center; transform: rotate(90deg); }
  .svc-problem__card { padding: var(--sc-6) var(--sc-5); }
}
/* a service with one example: the card runs wide, picture beside the text */
.svc-cases .case:only-child { grid-column: 1 / -1; max-width: 60rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sc-6); padding: var(--sc-5); }
@media (max-width: 860px) { .svc-cases .case:only-child { grid-template-columns: 1fr; gap: var(--sc-4); padding: var(--sc-4); } }

/* ------------------------------------- 19 Oct: results from the overview doc (Kiarash, Shervin) -- */
/* the four headline results: 2 × 2 beside the work heading, 4 across on the service pages */
.highlights { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-3); }
.highlights li { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--brand-dark-surface); border: 1px solid var(--sc-hairline-strong); }
.highlights strong { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1; letter-spacing: -0.02em; color: var(--brand-glow); }
.highlights span { font-size: var(--sc-t-xs); line-height: 1.35; color: var(--brand-light-soft); }
.highlights--row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--sc-7); }
@media (max-width: 860px) { .highlights--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a case without a screenshot leads with its number */
.case__stat { margin: 0; aspect-ratio: 16 / 9; box-sizing: border-box; display: grid; align-content: space-between; gap: 0.6rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: radial-gradient(120% 120% at 90% 0%, rgb(29 107 255 / 0.28), transparent 60%), #0b1422; border: 1px solid rgb(127 168 255 / 0.22); overflow: clip; }
.case__metric { margin: 0; display: grid; gap: 0.2rem; }
.case__metric strong { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(2.6rem, 1.8rem + 2.2vw, 3.8rem); line-height: 0.95; letter-spacing: -0.035em; color: #fff; }
.case__metric span { font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-glow); }
.case__chart { width: 100%; height: 4.6rem; overflow: visible; }
.case__chart-bed { fill: none; stroke: rgb(232 235 238 / 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.case__chart-fill { fill: rgb(29 107 255 / 0.22); }
.case__chart-line { fill: none; stroke: var(--brand-glow); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.case__chart-dot { fill: #fff; }
.case__chart-ends { margin: 0; display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--brand-light-soft); }
.case__bars { display: grid; gap: 0.55rem; }
.case__bars p { margin: 0; display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: 0.6rem; font-size: var(--sc-t-xs); color: var(--brand-light-soft); }
.case__bars i { grid-column: 2; grid-row: 1; display: block; height: 0.6rem; width: var(--w); min-width: 0.4rem; border-radius: 999px; background: rgb(232 235 238 / 0.3); }
.case__bars b { grid-column: 3; font-family: var(--sc-font-display); font-weight: 600; color: var(--brand-light); }
.case__bars .is-after i { background: var(--brand-blue); }
.case__bars .is-after b { color: var(--brand-glow); }
.case__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.case__trio p { margin: 0; display: grid; gap: 0.2rem; padding: 0.55rem 0.6rem; border-radius: 10px; background: rgb(232 235 238 / 0.05); }
.case__trio strong { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1; color: var(--brand-glow); }
.case__trio span { font-size: 0.7rem; line-height: 1.3; color: var(--brand-light-soft); }
/* the trio card already shows its number three times: the big metric gives way */
.case--stat:has(.case__trio) .case__metric { display: none; }
.case__how { margin: 0; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--brand-light-soft); }
@media (max-height: 860px) and (min-width: 861px) { .case__stat { aspect-ratio: 16 / 7; } .case__chart { height: 3.4rem; } }

/* the FAQ tabs: one group at a time; the group's own label gives way to its tab */
.faq__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sc-5); }
.faq__tabs[hidden] { display: none; }
.faq__tab { appearance: none; border: 1px solid var(--sc-hairline-strong); background: rgb(232 235 238 / 0.03); color: var(--brand-light-soft); font: 500 var(--sc-t-sm)/1 var(--sc-font-text); padding: 0.7em 1.1em; border-radius: 999px; cursor: pointer; transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); }
.faq__tab[aria-selected="true"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
@media (hover: hover) and (pointer: fine) { .faq__tab:hover:not([aria-selected="true"]) { border-color: rgb(127 168 255 / 0.5); color: var(--brand-light); } }
.faq__tab:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; }
.faq__groups.is-tabbed { gap: 0; }
.faq__groups.is-tabbed .faq__label { display: none; }
.faq__group[hidden] { display: none; }
@media (max-width: 860px) { .faq__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); scrollbar-width: none; } .faq__tab { flex: none; } }

/* Plain text pages (privacy, not found; launch 23 Oct): one reading column. */
.plain { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem); }
.plain__body { max-width: 46rem; }
.plain__body .ch-head { margin-bottom: var(--sc-8); }
.plain__body .ch-head .body { margin-top: var(--sc-5); }
.plain__body h2 { margin: var(--sc-8) 0 var(--sc-4); }
.plain__body .body a, .plain__list a { color: var(--brand-glow); text-decoration: underline; text-underline-offset: 3px; }
.plain__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); max-width: 62ch; color: var(--sc-ink-soft); font-weight: 300; line-height: 1.7; }
.plain__list strong { color: var(--sc-ink); font-weight: 600; }
.plain__body .svc-hero__ctas { margin-top: var(--sc-6); }