/* Otta Digital · page styles. The engine is scrollcraft.css; this file owns the
   brand tokens, the three grounds, and every piece of page markup. */

:root {
  --sc-canvas:      #1F1E1B;
  --sc-surface:     #2B2925;
  --sc-ink:         #F1F0EB;
  --sc-ink-soft:    #B5AE9F;
  --sc-accent:      #E39A16;
  --sc-accent-ink:  #1F1E1B;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;
  --sc-r-sm: 4px; --sc-r-md: 6px; --sc-r-lg: 10px;
  --sc-shadow-color: 40 12% 4%;
  --sc-maxw: 90rem;

  --black: #1F1E1B;
  --amber: #E39A16;
  --bone:  #F1F0EB;
  --bar-h: 4rem;
  --dot: var(--amber);
}
@media (max-width: 720px) { :root { --bar-h: 3.5rem; } }

/* ---- the three grounds. Hard cuts, painted per section, no drift. ---------
   `color` is restated wherever the ink token is, because inherited colour is
   computed on the body and does not re-resolve when a subtree redefines the
   token. */
/* --sc-hairline(-strong) is defined once at :root in scrollcraft.css as
   color-mix(in oklab, var(--sc-ink) N%, transparent). A plain custom property
   inherits as that unresolved string, and it only substitutes var(--sc-ink)
   correctly on elements that don't sit under a *later* --sc-ink override at a
   different specificity than the one that set --sc-hairline-strong itself —
   in practice this means it silently paints bone-on-bone (invisible) on any
   .g-bone element, since the ink it resolves against is anchored to the root
   default rather than this ground's. v1 never hit this because its only
   bone-ground hairline usage happened to be the first, --sc-ink-bordered row.
   Redeclaring both tokens here, at the same specificity as --sc-ink itself,
   is the fix: every hairline is correct for its own ground from here on. */
.g-dark  { --sc-canvas:#1F1E1B; --sc-surface:#2B2925; --sc-ink:#F1F0EB; --sc-ink-soft:#B5AE9F; --sc-accent:#E39A16; --sc-accent-ink:#1F1E1B; --dot:#E39A16; --sc-hairline:color-mix(in oklab, #F1F0EB 12%, transparent); --sc-hairline-strong:color-mix(in oklab, #F1F0EB 22%, transparent); background:#1F1E1B; color:#F1F0EB; }
.g-amber { --sc-canvas:#E39A16; --sc-surface:#EDAA33; --sc-ink:#1F1E1B; --sc-ink-soft:#4A3407; --sc-accent:#1F1E1B; --sc-accent-ink:#E39A16; --dot:#1F1E1B; --sc-hairline:color-mix(in oklab, #1F1E1B 14%, transparent); --sc-hairline-strong:color-mix(in oklab, #1F1E1B 26%, transparent); background:#E39A16; color:#1F1E1B; }
.g-bone  { --sc-canvas:#F1F0EB; --sc-surface:#FFFFFF; --sc-ink:#1F1E1B; --sc-ink-soft:#635D52; --sc-accent:#8F5A00; --sc-accent-ink:#F1F0EB; --dot:#E39A16; --sc-hairline:color-mix(in oklab, #1F1E1B 12%, transparent); --sc-hairline-strong:color-mix(in oklab, #1F1E1B 22%, transparent); background:#F1F0EB; color:#1F1E1B; }

/* light on dark gets one step more weight and a touch more tracking */
.g-dark .sc-body, .g-dark .lede { font-weight: 450; letter-spacing: 0.003em; }

/* ---- type ------------------------------------------------------------------ */
.disp {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
.disp--hero { font-size: clamp(2.9rem, 0.6rem + 7.6vw, 8.6rem); }
.disp--xl   { font-size: clamp(2.6rem, 0.8rem + 6.4vw, 7.6rem); }
.disp--lg   { font-size: clamp(2.1rem, 1rem + 3.9vw, 4.9rem); }
.disp--md   { font-size: clamp(1.55rem, 1rem + 1.9vw, 2.75rem); letter-spacing: -0.022em; line-height: 0.98; }
.lede {
  font-size: var(--sc-t-lg);
  line-height: 1.42;
  letter-spacing: -0.012em;
  max-width: 44ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: 58ch; }
.sc-label { margin: 0; }

/* ---- layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.cut { position: relative; padding-block: clamp(3.5rem, 7vw, 7rem); scroll-margin-top: var(--bar-h); }
.cut > .wrap > * + *, .svc-lead > * + *, .svc > * + *, .case__copy > * + *, .about__copy > * + * { margin-top: var(--sc-4); }
.svc-lead > h2 + p, .about__copy > h2 + p { margin-top: var(--sc-5); }
.case__copy > .sc-label + h3 { margin-top: var(--sc-3); }

/* ---- the living dot (fixed chrome) ---------------------------------------- */
.dot {
  position: fixed; left: 0; top: 0; z-index: 55;
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--amber);
  transform-origin: 50% 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: background-color 220ms var(--sc-ease-out);
}
.dot.is-on { opacity: 1; }
.dot[data-color="ink"]  { background: var(--black); }
.dot[data-color="bone"] { background: var(--bone); }
/* anchors: visible by default (no JS, reduced motion), hidden once the fixed
   dot takes over so there is never a doubled full stop */
.dot-anchor--period {
  display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%;
  background: var(--dot); margin-left: 0.05em; vertical-align: baseline;
}
.hero__loop .dot-anchor { fill: var(--amber); }
.dot-live .dot-anchor--period { background: transparent; }
.dot-live .hero__loop .dot-anchor { fill: transparent; }

/* ---- bar ------------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-6);
  padding-inline: var(--sc-gutter);
  background: var(--bone); color: var(--black);
  border-bottom: 2px solid var(--black);
}
.bar a { color: inherit; text-decoration: none; }
.bar a.bar__cta { color: var(--bone); }
.bar__mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap;
}
.bar__mark svg { width: 2.5rem; height: auto; }
.bar__nav { display: flex; gap: var(--sc-6); margin-inline-start: auto; }
.bar__nav a {
  font-weight: 600; font-size: var(--sc-t-sm);
  text-underline-offset: 0.3em; text-decoration-thickness: 2px;
  transition: text-decoration-color 140ms var(--sc-ease-out);
}
.bar__nav a:hover { text-decoration: underline; text-decoration-color: var(--amber); }
.bar__cta {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap;
  background: var(--black); color: var(--bone);
  padding: 0.6rem 0.95rem; border-radius: var(--sc-r-sm);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.bar__cta:hover { background: #3a3733; }
.bar__cta:active { transform: scale(0.97); }
@media (max-width: 720px) {
  .bar { gap: var(--sc-4); }
  .bar__nav { display: none; }
  .bar__cta { margin-inline-start: auto; }
}

/* ---- buttons and links ---------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: var(--sc-t-base); letter-spacing: -0.01em; white-space: nowrap;
  padding: 0.95rem 1.35rem; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none;
  box-shadow: var(--sc-e2);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
.btn:active { transform: scale(0.97); }
.link {
  font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.28em; text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  transition: text-decoration-color 140ms var(--sc-ease-out);
}
.link:hover { text-decoration-color: currentColor; }

/* ---- 1 hero ---------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  padding-top: calc(var(--bar-h) + clamp(2rem, 5vh, 4rem));
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  display: grid; align-content: end;
  overflow: clip;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: end; column-gap: var(--sc-6);
}
.hero__copy > * + * { margin-top: var(--sc-5); }
.hero__copy .lede { max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); margin-top: var(--sc-6); }
.hero__loop {
  width: 100%; max-width: 46vw; height: auto;
  justify-self: end; align-self: center;
  color: var(--sc-ink);
  margin-bottom: clamp(1rem, 6vh, 5rem);
}
.hero__loop path { transition: stroke-dashoffset 1100ms var(--sc-ease-out); }
@media (max-width: 860px) {
  .hero { align-content: start; padding-top: calc(var(--bar-h) + 1.25rem); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__loop { order: -1; max-width: 100%; width: 100%; margin: 0 0 var(--sc-6); justify-self: stretch; }
  .disp--hero { font-size: clamp(2.6rem, 1.4rem + 7vw, 3.6rem); }
}

/* ---- 2 the jolt ------------------------------------------------------------ */
.lean { min-height: 82svh; display: grid; align-content: center; }
.lean .disp--xl { max-width: 13ch; }
.lean .lede { margin-top: var(--sc-6); max-width: 46ch; }

/* ---- 3 and 4 services ------------------------------------------------------ */
.svc-cut { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.svc-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.svc-grid--flip .svc-lead { order: 2; }
.svc-grid--flip .svc-list { order: 1; }
.svc-lead .disp--lg { max-width: 12ch; }
.svc-list { display: grid; row-gap: var(--sc-6); }
.svc { padding-top: var(--sc-5); border-top: 2px solid var(--sc-hairline-strong); }
.svc:first-child { border-top-color: var(--sc-ink); }
.inc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; list-style: none; padding: 0; margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.inc li::before { content: ""; display: inline-block; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--dot); margin-right: 0.5em; vertical-align: 0.1em; }
@media (max-width: 860px) {
  .svc-grid { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .svc-grid--flip .svc-lead { order: 1; }
  .svc-grid--flip .svc-list { order: 2; }
}

/* ---- 5 the breath ---------------------------------------------------------- */
.breath { min-height: 92svh; display: grid; align-content: center; text-align: center; }
.breath .sc-label { margin-bottom: var(--sc-5); }

/* ---- 6 to 10 cases --------------------------------------------------------- */
.case { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.case__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: var(--sc-6); align-items: center;
}
.case--right .case__copy { grid-column: 1 / 6; }
.case--right .plate      { grid-column: 6 / 13; }
.case--left  .plate      { grid-column: 1 / 6; }
.case--left  .case__copy { grid-column: 7 / 13; }
.case--left  .plate--tall { grid-column: 2 / 6; }
.case__grid--below { margin-top: var(--sc-7); align-items: start; }
.case__grid--below .case__copy:first-child { grid-column: 1 / 7; }
.case__grid--below .case__copy:last-child  { grid-column: 8 / 13; }
.case .disp--md { max-width: 20ch; }
.plate { margin: 0; }
.plate img { width: 100%; height: auto; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); }
.plate__tilt { border-radius: var(--sc-r-md); }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; margin-top: var(--sc-5); }
.tags li {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  padding: 0.4rem 0.6rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  color: var(--sc-ink);
}
@media (max-width: 860px) {
  .case__grid > * { grid-column: 1 / -1 !important; }
  .case--left .plate, .case--right .plate { order: -1; }
  .case--left .plate--tall { max-width: 70%; margin-inline: auto; }
  .case__grid--below { margin-top: var(--sc-6); row-gap: var(--sc-4); }
  .case .disp--md { max-width: none; }
}

/* ---- 11 about -------------------------------------------------------------- */
.about__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.about__photo { max-width: 26rem; }
.about__copy .lede { max-width: 46ch; }
.rows { list-style: none; padding: 0; margin: 0; margin-top: var(--sc-7); max-width: 40rem; }
.rows li {
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 106%;
  font-size: var(--sc-t-lg); letter-spacing: -0.015em; line-height: 1.2;
  padding-block: 0.85rem; border-top: 2px solid var(--sc-hairline-strong);
}
.rows li:first-child { border-top-color: var(--sc-ink); }
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; row-gap: var(--sc-5); }
  .about__photo { max-width: 44%; }
  .rows { margin-top: var(--sc-6); }
  .rows li { padding-block: 0.6rem; }
}

/* ---- 12 close -------------------------------------------------------------- */
.close { min-height: 100svh; display: grid; align-content: center; padding-top: calc(var(--bar-h) + var(--sc-8)); }
.close__inner > * + * { margin-top: var(--sc-5); }
.close__mail {
  display: inline-block; margin-top: var(--sc-7);
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.6rem, 0.6rem + 4.6vw, 5.2rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--sc-accent); text-decoration: none; word-break: break-word;
  transition: color 140ms var(--sc-ease-out);
}
.close__mail:hover { color: color-mix(in oklab, var(--sc-accent) 80%, white); }
.close__li { display: table; margin-top: var(--sc-5); }
.foot {
  display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6); align-items: center;
  margin-top: clamp(3rem, 10vh, 7rem); padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline-strong);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot__mark { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%; }
.foot__mark svg { width: 2rem; height: auto; }
.foot__note { max-width: 52ch; }

/* ---- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__loop path { transition: none; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .dot { display: none; }
}

/* ---- four offerings in the "what" cut ------------------------------------ */
.svc-list--four { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: var(--sc-6); }
.svc-list--four .svc:nth-child(2) { border-top-color: var(--sc-ink); }
@media (max-width: 860px) { .svc-list--four { grid-template-columns: 1fr; } .svc-list--four .svc:nth-child(2) { border-top-color: var(--sc-hairline-strong); } }

/* ---- galleries: native scroll-snap, arrows, dots -------------------------- */
.gal { position: relative; }
.gal__track {
  display: flex; gap: var(--sc-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--sc-r-md);
  -webkit-overflow-scrolling: touch;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__track:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.gal__track > img {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  width: 100%; height: auto; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3);
}
.gal--tall .gal__track > img { flex-basis: 100%; }
.gal__nav { display: flex; align-items: center; gap: var(--sc-4); margin-top: var(--sc-4); }
.gal__btn {
  width: 2.5rem; height: 2.5rem; border-radius: var(--sc-r-sm);
  border: 2px solid var(--sc-ink); background: transparent; color: var(--sc-ink);
  cursor: pointer; position: relative;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.gal__btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 0.6rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translate(-35%, -50%) rotate(45deg);
}
.gal__btn--next::before { transform: translate(-65%, -50%) rotate(-135deg); }
.gal__btn:hover { background: var(--sc-ink); color: var(--sc-canvas); }
.gal__btn:active { transform: scale(0.95); }
.gal__btn[disabled] { opacity: 0.3; cursor: default; background: transparent; color: var(--sc-ink); }
.gal__dots { display: flex; gap: 0.45rem; }
.gal__dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sc-ink); opacity: 0.25; transition: opacity 140ms var(--sc-ease-out); }
.gal__dots i.is-on { opacity: 1; background: var(--dot); }
.g-amber .gal__dots i.is-on { background: var(--sc-ink); }
.gal__count { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); margin-inline-start: auto; }

/* ---- what clients say ----------------------------------------------------- */
.said .disp--lg { max-width: 12ch; }
.said__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(2rem, 6vw, 6rem); row-gap: var(--sc-7); align-items: start;
  margin-top: var(--sc-7);
}
.quote { margin: 0; padding-top: var(--sc-5); border-top: 2px solid var(--sc-ink); }
.quote__text {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 2rem); line-height: 1.22; letter-spacing: -0.02em; text-wrap: pretty;
}
.quote__who { margin-top: var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 860px) { .said__grid { grid-template-columns: 1fr; row-gap: var(--sc-6); } }

/* about rows: five now, slightly tighter */
.rows li { padding-block: 0.7rem; }

/* keep the wide plate inside the cut budget */
.plate--wide { max-width: 68rem; margin-inline: auto; }
@media (max-width: 860px) { .about__photo { max-width: 36%; } }

/* four-up headings sit on one or two lines; the phone gallery stays a phone */
.svc-list--four .disp--md { font-size: clamp(1.4rem, 1rem + 1.35vw, 2.2rem); }
.gal--tall { max-width: 22rem; }
@media (max-width: 860px) { .case--left .plate--tall { max-width: 60%; } }

/* ---- 2 the jolt: three claims under the headline ------------------------- */
.lean { min-height: 0; padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.lean .lede { margin-top: var(--sc-5); }
.claims {
  list-style: none; padding: 0; margin: 0; margin-top: var(--sc-7);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: var(--sc-6);
}
.claims li { padding-top: var(--sc-5); border-top: 2px solid var(--sc-ink); }
.claims li > * + * { margin-top: var(--sc-4); }
.claims .disp--md { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); max-width: 14ch; }
.claims .sc-body { color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .claims { grid-template-columns: 1fr; row-gap: var(--sc-5); margin-top: var(--sc-6); }
  .claims li { padding-top: var(--sc-4); }
  .claims .disp--md { max-width: none; }
}

/* ---- 3 the system: copy left, the loop diagram right ---------------------- */
.sys { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.sys__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.sys__copy > * + * { margin-top: var(--sc-4); }
.sys__copy > h2 + p { margin-top: var(--sc-5); }
.sys__copy .disp--lg { max-width: 14ch; }
.sys__fig { margin: 0; width: 100%; max-width: 36rem; justify-self: end; }
.sys__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sys__ring { fill: none; stroke: var(--sc-ink); stroke-opacity: 0.22; stroke-width: 1.5; }
.sys__core { fill: var(--sc-canvas); stroke: var(--sc-ink); stroke-width: 6; }
.sys__petal {
  fill: none; stroke: var(--sc-ink); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--sc-ease-out);
  transition-delay: calc(120ms + var(--i) * 55ms);
}
.sc-in .sys__petal, .sys__fig.sc-in .sys__petal { stroke-dashoffset: 0; }
.sys__tip { fill: var(--amber); opacity: 0; transition: opacity 300ms var(--sc-ease-out) 1300ms; }
.sc-in .sys__tip { opacity: 1; }
.sys__word {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: 29px; letter-spacing: -0.03em; fill: var(--sc-ink);
}
.sys__anchor { fill: var(--dot); }
.dot-live .sys__anchor { fill: transparent; }
.sys__label {
  font-family: var(--sc-font-text); font-weight: 600; font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase; fill: var(--sc-ink-soft);
}
@media (max-width: 860px) {
  .sys__grid { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .sys__fig { max-width: 24rem; justify-self: center; }
  .sys__copy .disp--lg { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sys__petal { transition: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .sys__tip { transition: none; opacity: 1; }
}

/* ---- services: the stage label above each offer --------------------------- */
.svc > .sc-label + h3 { margin-top: var(--sc-3); }

/* ============================================================================
   v8 additions. New modules only — everything above this line is the original
   scroll-craft stylesheet, unchanged except for the ground-local hairline
   tokens noted at the top of the file. Every rule below speaks in the same
   --sc-* tokens the three grounds already define, so nothing here needs its
   own light/dark handling: the diagrams, cards and form reskin themselves
   whichever ground they are dropped onto.
   ========================================================================== */

.skip {
  position: absolute; left: var(--sc-gutter); top: 0.5rem; z-index: 90;
  transform: translateY(-160%);
  background: var(--amber); color: var(--black);
  font-weight: 700; padding: 0.7rem 1rem; border-radius: var(--sc-r-sm);
  text-decoration: none;
  transition: transform 140ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

.disp--sm { font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem); letter-spacing: -0.018em; line-height: 1.04; }
/* The head is a label and one headline now, with no lede under it, so the
   measure belongs on the headline itself: `ch` there resolves against the
   display font size and keeps the line count steady as the clamp grows.
   Capping the parent instead pinned the box at a lede's width and pushed the
   headline to eight lines at 1920. */
.sec-head > * + * { margin-top: var(--sc-4); }
.sec-head > .sc-label + h2 { margin-top: var(--sc-3); }
.sec-head .disp { max-width: 22ch; }
/* the clamp's floor wins on the narrowest phones, where it costs eight lines;
   easing it there gets the headline back to six without touching any width
   above 420px */
@media (max-width: 420px) { .sec-head .disp { font-size: clamp(1.7rem, 0.8rem + 4.4vw, 2.1rem); } }

/* ---- 3 what we do: three stages, each with its own diagram ----------------
   The extra bottom padding is load-bearing, not decoration: it is the runway
   the travelling dot needs to leave the last diagram seat and flood the screen
   before the work module. Shrinking it squeezes the flood. */
.method { padding-bottom: clamp(5rem, 16vh, 11rem); }
.stages { list-style: none; padding: 0; margin: clamp(3rem, 7vh, 5.5rem) 0 0; }
.stage {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 2px solid var(--sc-hairline-strong);
}
.stage:first-child { border-top-color: var(--sc-ink); }
/* `order` moves the figure into the FIRST grid track, so the track widths have
   to be mirrored too — otherwise the flipped stage hands its diagram the wider
   6fr column and that one diagram renders noticeably larger than its siblings. */
.stage--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.stage--flip .stage__copy { order: 2; }
.stage--flip .stage__fig { order: 1; }
.stage__copy > * + * { margin-top: var(--sc-4); }
.stage__num {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); margin: 0;
}
.stage__copy .disp--md { max-width: 20ch; }
.stage__tag {
  display: inline-block; vertical-align: middle; margin-left: 0.6rem;
  font-family: var(--sc-font-mono); font-weight: 400; font-stretch: normal;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); white-space: nowrap;
}
.stage__fig { margin: 0; position: relative; }

/* deliverables as icon bullets. The ruled-row treatment they replaced read as
   a collapsed accordion, which invited a click that was never coming. */
.pts { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; gap: var(--sc-4); }
.pts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.pts__i {
  width: 1.4rem; height: 1.4rem; flex: none; margin-top: 0.1rem;
  fill: none; stroke: var(--sc-accent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.pts li > span { font-size: var(--sc-t-base); line-height: 1.45; color: var(--sc-ink); }
.pts li b { font-weight: 700; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the three stage diagrams --------------------------------------------
   One vocabulary across all three: hairline wires, surface pills with mono
   caps labels, and exactly one amber element per diagram — the thing that
   stage is built around. Only the topology changes: a closed circuit for
   Validate, a stack for Build, a ring for Grow. */
.dg { display: block; width: 100%; height: auto; overflow: visible; }
.dg__wire { fill: none; stroke: var(--sc-ink); stroke-opacity: 0.28; stroke-width: 1.6; stroke-linecap: round; }
.dg__wire--spoke { stroke-opacity: 0.13; stroke-width: 1; }
.dg__halo { fill: none; stroke: var(--sc-ink); stroke-opacity: 0.08; stroke-width: 1.3; }
.dg__arrow { fill: var(--sc-ink); fill-opacity: 0.45; }
.dg__pill rect { fill: var(--sc-surface); stroke: var(--sc-ink); stroke-opacity: 0.18; stroke-width: 1; }
.dg__pill text {
  font-family: var(--sc-font-text); font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em; fill: var(--sc-ink); text-anchor: middle; dominant-baseline: middle;
}
/* The amber centre of each diagram is a SEAT for the travelling dot, not a
   drawn shape: the dot itself becomes the idea, then the product, then the
   growth intelligence as it moves down the page. `.dg__slot` is the hairline
   ring that stays behind once the dot has moved on, so the centre reads as a
   place the dot belongs rather than as a hole. `.dg__seat` is the painted
   circle, which only paints when the dot is NOT live (reduced motion, or no
   JS) — exactly how the hero loop's dot-anchor already behaves. */
/* The seat is always drawn and always holds its word. The travelling dot lands
   on it to highlight it, so the seat's own fill is the quiet state and amber is
   the "the dot is here" state. Without the live dot (reduced motion, no JS) the
   seat paints amber permanently, so every diagram still has its one accent. */
.dg__slot { fill: var(--amber); stroke: var(--sc-ink); stroke-opacity: 0.2; stroke-width: 1.2; }
.dot-live .dg__slot { fill: var(--sc-surface); }

/* The words ride in a second SVG over the top of the first, sharing its
   viewBox so they scale with the diagram for free, and sitting one step above
   the travelling dot's z-index so the dot passes BEHIND them and the word
   stays readable whether the seat is quiet or lit. A container query would
   have sized them too, but container-type applies layout containment, which
   creates a stacking context and would have buried them under the dot. */
.dg__words {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 56; pointer-events: none; overflow: visible;
}
.dg__words text {
  font-family: var(--sc-font-text); font-weight: 650; font-size: 18px;
  letter-spacing: -0.005em; fill: var(--black);
  text-anchor: middle; dominant-baseline: middle;
}
/* the outcome pill is a result, so it stays a pill and never takes the dot */
.dg__outcome rect { fill: var(--sc-surface); stroke: var(--sc-ink); stroke-opacity: 0.3; stroke-width: 1.4; }

.dg__charge {
  fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 5 1346; animation: dg-orbit 9s linear infinite;
}
@keyframes dg-orbit { to { stroke-dashoffset: -1351; } }
.dg__charge--circuit { stroke-dasharray: 5 1446; animation-name: dg-circuit; animation-duration: 7s; }
@keyframes dg-circuit { to { stroke-dashoffset: -1451; } }
.dg__pulses line {
  stroke: var(--amber); stroke-width: 1.6; stroke-opacity: 0;
  animation: dg-pulse 3.6s ease-in-out infinite; animation-delay: var(--t);
}
@keyframes dg-pulse { 0%, 100% { stroke-opacity: 0; } 45% { stroke-opacity: 0.65; } }

/* wires draw themselves in, pills land after, the amber core last. Same
   technique the original system diagram uses for its petals, which is why
   every wire carries pathLength="1" in the markup. */
.dg__wire, .dg__halo {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--sc-ease-out);
}
.dg__wire--spoke { transition-delay: 260ms; }
.dg-fig.sc-in .dg__wire, .dg-fig.sc-in .dg__halo { stroke-dashoffset: 0; }
.dg__pill { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); transition-delay: calc(480ms + var(--t, 0s)); }
.dg-fig.sc-in .dg__pill { opacity: 1; transform: none; }
.dg__core { opacity: 0; transition: opacity 420ms var(--sc-ease-out) 1250ms; }
.dg-fig.sc-in .dg__core { opacity: 1; }

@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; row-gap: var(--sc-6); padding-block: var(--sc-7); }
  .stage--flip .stage__copy, .stage--flip .stage__fig { order: 0; }
  .stage__fig { max-width: 24rem; margin-inline: auto; width: 100%; }
  .stage__copy .disp--md { max-width: none; }
  .stage__tag { display: block; margin: var(--sc-3) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dg__wire, .dg__halo { transition: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .dg__pill { transition: none; opacity: 1; transform: none; }
  .dg__core { transition: none; opacity: 1; }
  .dg__charge, .dg__pulses line { animation: none; opacity: 0; }
  .skip { transition: none; }
}

/* ---- 4 work: one module, one card per project, moving on a rail ----------- */
.work__head { text-align: center; margin-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.work__head .sc-label { margin-bottom: var(--sc-5); }
.wk { position: relative; }
.wk__rail {
  display: flex; gap: clamp(1.5rem, 4vw, 3rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
/* no CSS scroll-behavior here on purpose: otta.js passes an explicit behavior
   per move, so the wrap can jump while an ordinary step glides. */
.wk__rail::-webkit-scrollbar { display: none; }
.wk__rail:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: var(--sc-r-md); }
.wk__card {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.wk__shot { margin: 0; }
.wk__shot img { width: 100%; height: auto; display: block; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); }
.wk__body > * + * { margin-top: var(--sc-4); }
.wk__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; }
.wk__name {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); letter-spacing: -0.025em; line-height: 1;
}
.wk__sector {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
.wk__body .sc-body { max-width: 42ch; }
.wk__body .tags { margin-top: var(--sc-5); }
.wk__quote { margin: 0; margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 2px solid var(--sc-hairline-strong); }
.wk__quote blockquote {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.35rem); line-height: 1.26; letter-spacing: -0.015em; text-wrap: pretty;
}
.wk__quote figcaption { margin-top: var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.wk__link { display: inline-block; margin-top: var(--sc-5); font-size: var(--sc-t-sm, 0.95rem); font-weight: 600; color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.wk__link:hover { text-decoration-color: currentColor; }
.wk__link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
.wk__nav { justify-content: center; margin-top: clamp(1.75rem, 4vw, 2.75rem); }

/* one hero testimonial, sharing the work module's ground so it reads as the
   same block rather than a separate proof section */
.hq {
  margin: clamp(3rem, 8vh, 5rem) auto 0; max-width: 46rem; text-align: center;
  padding-top: var(--sc-6); border-top: 2px solid var(--sc-hairline-strong);
}
.hq__text {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-stretch: 106%;
  font-size: clamp(1.1rem, 0.92rem + 0.8vw, 1.55rem); line-height: 1.3;
  letter-spacing: -0.016em; text-wrap: pretty;
}
/* the mark carries the weight the type used to, so the quote can sit smaller
   and still read as the page's one piece of testimony */
.hq__text::before {
  content: "\201C";
  display: block; margin-bottom: -0.12em;
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(3.5rem, 2rem + 5vw, 7rem); line-height: 0.78;
  color: var(--sc-accent);
}
.hq__who { margin-top: var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 980px) {
  .wk__card { grid-template-columns: 1fr; row-gap: var(--sc-5); align-content: start; }
  .wk__body .sc-body { max-width: 58ch; }
}

/* ---- 5 about: a masthead column, then the three paragraphs ---------------- */
.about__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
.about__id > * + * { margin-top: var(--sc-4); }
/* the portrait carries width/height attributes, which land as presentational
   hints and make BOTH axes definite — aspect-ratio is then ignored and the
   image renders at its full intrinsic height. height:auto hands the second
   axis back to aspect-ratio, which is what actually makes the circle round. */
.about__thumb {
  width: clamp(4.5rem, 7vw, 6.5rem); height: auto; aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; object-position: 50% 14%;
  box-shadow: var(--sc-e2); display: block;
  margin-top: var(--sc-5);
}
.about__id .disp--lg { max-width: 9ch; }
.about__role { color: var(--sc-ink-soft); }
.about__li { display: table; }
.about__copy > * + * { margin-top: var(--sc-5); }
.about__copy .lede { max-width: 42ch; }
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .about__id .disp--lg { max-width: none; }
}

/* ---- the footer ------------------------------------------------------------
   v1's .foot is a single flex row; this splits it into an identity row and a
   fine-print block so the ABN, the data note and the copyright can sit quietly
   under it without competing with the close. */
.foot { display: block; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-5); margin-inline-start: auto; }
.foot__links a { color: var(--sc-ink-soft); text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong); padding-bottom: 0.1rem; transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out); }
.foot__links a:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.foot__fine { margin-top: var(--sc-5); display: grid; gap: var(--sc-3); }
.foot__fine .foot__note { margin: 0; max-width: 72ch; font-size: var(--sc-t-xs); }
.foot__copy { opacity: 0.75; }
@media (max-width: 720px) { .foot__links { margin-inline-start: 0; } }

/* ---- 6 start a project: the lead, then the form --------------------------- */
.close__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.close__inner > * + * { margin-top: 0; }
.close__lead > * + * { margin-top: var(--sc-5); }
.close__lead .lede { max-width: 38ch; }

.form { display: grid; gap: var(--sc-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); }
.field { display: grid; gap: 0.5rem; margin: 0; }
.field label {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
.field__opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--sc-t-base); color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  padding: 0.75rem 0.85rem; width: 100%;
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.45; }
.field select { appearance: none; cursor: pointer; padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.2rem, calc(100% - 0.8rem) 1.2rem;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: transparent;
}
.field input::placeholder, .field textarea::placeholder { color: var(--sc-ink-soft); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, transparent); }
.field__err { font-size: var(--sc-t-xs); color: var(--sc-accent); font-weight: 600; }
/* the trap is for scripts that fill every field they find; it must stay in the
   layout and out of the accessibility tree rather than be display:none, which
   most bots now check for */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); margin: 0; }
.form__status { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.form__status.is-good { color: var(--sc-accent); font-weight: 600; }
.form__status.is-bad { color: var(--sc-accent); font-weight: 600; }
.form.is-sent { opacity: 0.55; pointer-events: none; }

@media (max-width: 980px) {
  .close__inner { grid-template-columns: 1fr; row-gap: clamp(2.5rem, 7vh, 4rem); }
  .close__lead .lede { max-width: none; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .about__id { gap: 0.9rem; }
}