/* Shared chrome for the inner pages (services, work, about...). Same tokens and
   components as the home page, which still carries its own inline copy. */
:root {
  --sc-canvas:     #0A0703;
  --sc-surface:    #1A140B;
  --sc-ink:        #F5E6C8;
  --sc-ink-soft:   #C9B48E;
  --sc-accent:     #FFB020;
  --sc-accent-ink: #0A0703;
  --sc-font-display: "Sora", system-ui, sans-serif;
  --sc-font-text:    "Sora", system-ui, sans-serif;
  --sc-shadow-color: 36 60% 2%;
  --gold: #C9A15A;
  --amber-light: #FFD27A;
}
body { font-weight: 400; letter-spacing: 0; }
.sc-display { font-weight: 600; }
:is(h1, h2).sc-display { letter-spacing: -0.03em; }
a { color: inherit; }
/* glows may bleed past the gutter; they must never widen the page */
main { overflow-x: clip; }

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding: var(--sc-4) var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 82%, transparent), transparent);
  transition: background-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.bar.is-solid { background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); box-shadow: 0 1px 0 var(--sc-hairline); }
.bar__logo { display: block; line-height: 0; margin: -10px 0 -10px -14px; }
.bar__logo img { height: 64px; width: auto; }
.bar__nav { display: flex; align-items: center; gap: var(--sc-6); }
.bar__nav a.navlink {
  text-decoration: none; font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.bar__nav a.navlink:hover, .bar__nav a.navlink[aria-current] { color: var(--sc-ink); }
.bar__menu, .menu { display: none; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--sc-5); border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn:hover { background: var(--amber-light); }
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 52px; padding: 0 var(--sc-6); font-size: var(--sc-t-base); }
.textlink {
  color: var(--sc-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  text-underline-offset: 0.25em; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out);
}
.textlink:hover { text-decoration-color: var(--sc-accent); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
.pending { outline: 1px dashed color-mix(in oklab, var(--gold) 70%, transparent); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: var(--sc-gutter); top: var(--sc-3); z-index: calc(var(--sc-z-chrome) + 1);
  padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-sm); background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm); text-decoration: none; translate: 0 -200%;
}
.skip:focus { translate: 0 0; }
.kicker { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }

/* ---------- page hero ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin: 0 0 var(--sc-6); padding: 0; list-style: none; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: var(--sc-2); color: color-mix(in oklab, var(--gold) 60%, transparent); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--sc-ink); }
.page-hero { position: relative; min-height: min(92vh, 60rem); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.page-hero__art { position: absolute; inset: 0; z-index: -1; }
.page-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.page-hero__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 38%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 64%, transparent 80%),
    linear-gradient(to top, var(--sc-canvas) 0%, transparent 34%);
}
@media (min-width: 861px) { .page-hero__art img { translate: 18% 0; } }
.page-hero .sc-wrap { padding-block: calc(var(--sc-section) + 4rem) var(--sc-section); }
.page-hero h1 { font-size: clamp(2.4rem, 1rem + 3.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; margin: 0; }
.page-hero__lede { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; max-width: 40ch; color: var(--sc-ink); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); margin-top: var(--sc-6); }

/* ---------- shared sections ---------- */
/* sticky heading beside a numbered list (how it runs / how it works) */
.runs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; }
.runs__head { position: sticky; top: 20vh; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: var(--sc-4); padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); }
.steps li::before { content: counter(step); font-weight: 600; color: var(--sc-accent); font-size: var(--sc-t-lg); line-height: 1.3; }
.steps h3 { margin: 0; font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.015em; }
.steps p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); }
.runs__pending { margin-top: var(--sc-5); font-size: var(--sc-t-xs); color: var(--gold); }

/* heading + text beside a price card */
.fit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: stretch; }
.price {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sc-3);
  padding: var(--sc-7); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); border: 1px solid color-mix(in oklab, var(--sc-accent) 60%, transparent);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.price__amount { margin: 0; font-size: var(--sc-t-4xl); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--sc-accent); }
.price__amount--range { font-size: var(--sc-t-2xl); letter-spacing: -0.03em; }
.price p { margin: 0; color: var(--sc-ink); }
.price .btn { margin-top: var(--sc-4); align-self: flex-start; }

/* heading beside a ruled list of bold-led items */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; }
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li { padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); line-height: 1.6; }
.ruled li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.ruled strong { color: var(--sc-ink); font-weight: 600; }
.after-note { margin-top: var(--sc-5); }

/* a recording or demo slot; shows a quiet placeholder until the real media is in */
.media-frame {
  position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--sc-r-lg); overflow: hidden;
  background: radial-gradient(80% 120% at 70% 30%, #23190B, var(--sc-surface) 60%);
  box-shadow: var(--sc-e3), var(--sc-edge); border: 1px solid var(--sc-hairline);
  display: grid; place-items: center; text-align: center; padding: var(--sc-6);
}
.media-frame--phone { aspect-ratio: 9 / 18; max-width: 22rem; border-radius: 2.4rem; margin-inline: auto; }
.media-frame__inner { max-width: 30rem; }
.media-frame__inner img { display: block; width: 56px; height: 56px; margin-inline: auto; opacity: 0.9; }
.media-frame__inner strong { display: block; color: var(--sc-ink); font-size: var(--sc-t-base); font-weight: 600; margin-top: var(--sc-4); }
.media-frame__inner p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ---------- legal pages: contents beside readable prose ---------- */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--sc-8); align-items: start; padding-block: calc(var(--sc-section) + 4rem) var(--sc-section); }
.legal__head { grid-column: 1 / -1; }
.legal__head h1 { font-size: clamp(2.4rem, 1rem + 3.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0; }
.legal__meta { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.legal__draft { margin: var(--sc-5) 0 0; padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-sm); color: var(--sc-ink); font-size: var(--sc-t-sm); max-width: 60ch; }
.legal__toc { position: sticky; top: 7rem; }
.legal__toc ol { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; gap: var(--sc-2); }
.legal__toc a { text-decoration: none; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.legal__toc a:hover { color: var(--sc-ink); }
.prose { max-width: 44rem; }
.prose h2 { margin: var(--sc-8) 0 0; font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -0.02em; scroll-margin-top: 7rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--sc-ink-soft); line-height: 1.7; }
.prose p { margin: var(--sc-4) 0 0; }
.prose ul { margin: var(--sc-4) 0 0; padding-left: 1.2em; }
.prose li + li { margin-top: var(--sc-2); }
.prose strong { color: var(--sc-ink); font-weight: 600; }
.prose a { color: var(--sc-ink); text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); text-underline-offset: 0.2em; }
.prose .tbd { color: var(--gold); }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; gap: var(--sc-6); padding-block: calc(var(--sc-section) + 2rem) var(--sc-section); }
  .legal__toc { position: static; }
}

/* the tour: real screens in a phone, one at a time; the labels switch screens */
.tour { position: relative; display: grid; justify-items: center; gap: var(--sc-5); }
.tour::before {
  content: ""; position: absolute; inset: -8% -18% 10%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-accent) 20%, transparent), transparent);
}
.phone {
  position: relative; width: min(19rem, 78vw); aspect-ratio: 390 / 844; padding: 10px; border-radius: 2.6rem;
  background: linear-gradient(160deg, #2A2112, #0F0B06 60%);
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  box-shadow: var(--sc-e3), 0 0 60px color-mix(in oklab, var(--sc-accent) 12%, transparent);
}
.phone__screen { position: relative; height: 100%; border-radius: 2rem; overflow: hidden; background: #F2F2F4; }
.phone__screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; transition: opacity 500ms var(--sc-ease-out), translate 700ms var(--sc-ease-out); translate: 0 12px;
}
.phone__screen img.is-on { opacity: 1; translate: 0 0; }
.tour__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-2); max-width: 26rem; }
.tour__tabs button {
  min-height: 40px; padding: 0 var(--sc-4); border-radius: 999px; font: inherit; font-size: var(--sc-t-sm); cursor: pointer;
  color: var(--sc-ink-soft); background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong);
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.tour__tabs button:hover { color: var(--sc-ink); }
.tour__tabs button[aria-selected="true"] { color: var(--sc-ink); border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 12%, var(--sc-surface)); }
.tour__caption { margin: 0; min-height: 3em; max-width: 26rem; text-align: center; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.phone--sm { width: min(15.5rem, 70vw); }

/* ---------- closing call ---------- */
.cta { border-top: 1px solid var(--sc-hairline); }
.cta__inner { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-8); align-items: center; }
.cta .mark { width: clamp(120px, 14vw, 200px); height: auto; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); margin-top: var(--sc-6); }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-4) var(--sc-7);
  padding: var(--sc-5) var(--sc-gutter); border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .bar__nav a.navlink { display: none; }
  .bar__logo img { height: 52px; }
  .bar__menu {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    background: none; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); color: var(--sc-ink); font: inherit; font-size: var(--sc-t-sm);
  }
  .menu {
    position: fixed; inset: 72px var(--sc-gutter) auto; z-index: var(--sc-z-chrome); display: none; flex-direction: column;
    padding: var(--sc-4); border-radius: var(--sc-r-md); background: var(--sc-surface); box-shadow: var(--sc-e3), var(--sc-edge);
  }
  .menu.is-open { display: flex; }
  .menu a { padding: var(--sc-3) var(--sc-2); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  .btn--lg { white-space: normal; text-align: center; padding-block: var(--sc-2); }
  .page-hero { min-height: auto; }
  .page-hero__art img { object-position: 62% 30%; opacity: 0.55; }
  .page-hero__art::after { background: linear-gradient(to top, var(--sc-canvas) 8%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 60%, color-mix(in oklab, var(--sc-canvas) 40%, transparent)); }
  .runs, .fit, .split { grid-template-columns: 1fr; gap: var(--sc-6); }
  .runs__head { position: static; }
  .cta__inner { grid-template-columns: 1fr; gap: var(--sc-5); }
  .cta .mark { width: 88px; }
}