/* Aetherline: Krom Lime. Archivo is self-hosted (SIL OFL, see fonts/OFL.txt). */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo's ampersand reads as a reversed 3 in service names; set "&" in a plain grotesque. */
@font-face {
  font-family: "Amp";
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("Roboto");
  unicode-range: U+0026;
}

:root {
  --ground: #0C0F0D;
  --steel-hi: #2A302C;
  --steel-lo: #161A18;
  --chrome: #D7DDE3;
  --graphite: #8A948F;
  --graphite-on-steel: #A6AFAB;
  --rule: #232A26;
  --seam: rgba(0, 0, 0, 0.45);
  --lime: #C4FF3E;
  --on-lime: #0C0F0D;

  --gutter: clamp(16px, 4.45vw, 64px);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --draw: 1.6s;

  color-scheme: dark;
  scrollbar-color: var(--steel-hi) var(--ground);
}

* { box-sizing: border-box; }
::selection { background: var(--lime); color: var(--on-lime); }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--chrome);
  font: 400 16px/1.55 "Amp", "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
/* Skip link: hidden until keyboard focus, then a chrome tab at the top-left. */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 20;
  padding: 10px 16px; border-radius: 4px; background: var(--chrome); color: var(--ground);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }
a:focus-visible { outline: 2px solid var(--chrome); outline-offset: 4px; border-radius: 4px; }
/* Facts still missing are left out of the public page (copy rule); localhost review mode shows them. */
.draft-only, .founder-facts div.draft-only { display: none; }
a[href^="mailto:"] { text-underline-offset: 4px; text-decoration-thickness: 1px; }
main a[href^="mailto:"] { color: var(--chrome); }

/* Header */
.site-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 32px; padding: 30px var(--gutter);
}
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; font-stretch: 112%; font-size: 21px; letter-spacing: -0.01em; line-height: 1;
  text-decoration: none;
}
/* Logo mark (2026-10-23): concept 6, used as generated; a rounded tile beside the name. */
.mark-img { display: block; width: 32px; height: 32px; border-radius: 7px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; color: var(--graphite); }
.site-header nav a { text-decoration: none; transition: color 0.2s; }
.site-header nav a:hover { color: var(--chrome); }
.site-header nav a[aria-current="page"] { color: var(--chrome); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Hero: copy, rail, steel band. On desktop it fills the first screen. */
.hero {
  min-height: calc(100svh - 96px);
  display: grid; grid-template-rows: 1fr auto auto;
}
.hero-copy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 64px; align-items: end;
  padding: clamp(32px, 6vh, 72px) var(--gutter) 0;
}
h1 {
  margin: 0;
  font-weight: 640; font-stretch: 112%;
  font-size: clamp(40px, 6.1vw, 88px); line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 11.5em;
}
.hero-sub p { margin: 0 0 18px; font-size: 18px; color: var(--graphite); max-width: 40ch; }
.hero-sub .reply-note { font-size: 15px; color: var(--graphite); text-wrap: pretty; }
/* Who takes the call: a quiet line under the first stop and under the call on Contact. */
.call-host { margin: 10px 0 0; font-size: 15px; color: var(--chrome); max-width: 30ch; }
.stop .call-host { color: var(--chrome); }
/* A second call after the founders, so the page never runs long without one. */
.mid-call { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 8px; }
.phone-only { display: none; }
.stop-start .reply-note { margin: -4px 0 20px; font-size: 15px; color: var(--graphite); }
.text-link { font-size: 15px; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--lime); }
/* The review is the reason to pick two founders plus AI: it reads brighter than the step around it. */
.review { color: var(--chrome); font-weight: 500; }

/* The rail: one lime line through four stops. The call is stop one. */
.rail { position: relative; margin-top: clamp(40px, 7vh, 64px); padding: 0 var(--gutter) clamp(32px, 5vh, 44px); }
.rail-line {
  position: absolute; left: 0; right: 0; top: 27px; height: 2px;
  background: var(--lime);
  transform-origin: left center;
}
.stops {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px;
}
.station { height: 56px; display: flex; align-items: center; margin-bottom: 14px; }
.node {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--lime);
  transition: background-color 0.25s var(--ease-out);
}
.stop:hover .node, .stop:focus-within .node { background: var(--lime); }
.stop h3 {
  margin: 0 0 6px;
  font-weight: 600; font-stretch: 106%; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em;
}
.stop p { margin: 0; font-size: 15px; color: var(--graphite); max-width: 30ch; }
.rail-more { display: inline-block; margin-top: 12px; }

.btn {
  display: inline-flex; align-items: center; height: 56px; padding: 0 26px;
  background: var(--lime); color: var(--on-lime);
  font-weight: 600; font-size: 16px; white-space: nowrap; text-decoration: none;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(0, 0, 0, 0.55);
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.btn:hover { background: #D2FF66; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--chrome); outline-offset: 4px; }
/* External cue: the call opens Cal.com in a new tab. */
.btn .ext { width: 12px; height: 12px; margin-left: 10px; flex: none; }

/* Brushed steel band: the four services and who owns each.
   Same columns and gap as the rail, so each service sits under its stop; the seam runs down the middle of the gap. */
.band {
  list-style: none; margin: 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px;
  background: linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.band li { position: relative; }
/* Product names carry their plain category underneath, so a first-time visitor still knows what each one is. */
.svc-wrap { display: flex; flex-direction: column; gap: 2px; }
.band .kind { font-size: 14px; color: var(--graphite-on-steel); }
.flagship .kind { margin: -8px 0 16px; font-size: 15px; color: var(--graphite); }
.page-hero-copy .kind { margin: 14px 0 0; font-size: 18px; color: var(--graphite); }
.band li + li::before {
  content: ""; position: absolute; left: -20px; top: 0; bottom: 0; width: 1px;
  background: var(--seam); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05);
}
.band a {
  display: flex; flex-direction: column; gap: 2px;
  height: 100%; padding: 20px 0;
  text-decoration: none;
  transition: background-color 0.2s;
}
/* The service names are links: a quiet underline at rest, full chrome on hover. */
.band .svc { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--graphite-on-steel); }
.band a:hover .svc { text-decoration-color: var(--chrome); }
.band a:focus-visible { outline-offset: -4px; }
.svc { font-weight: 550; }
.owner { color: var(--lime); white-space: nowrap; font-size: 15px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Unfilled facts stay visible while the site is a draft. */
.todo {
  color: var(--graphite); font-weight: 400; font-stretch: 100%;
  border: 1px dashed var(--graphite); border-radius: 4px; padding: 0 0.3em;
  white-space: nowrap;
}

/* Sections below the first screen */
.section { padding: clamp(80px, 9vw, 136px) var(--gutter) 0; }
.section-title {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-weight: 640; font-stretch: 112%;
  font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Flagships: two machined halves with a steel seam between. */
.flagships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.flagship { padding: 36px 56px 8px 0; display: flex; flex-direction: column; align-items: flex-start; }
.flagship + .flagship {
  padding-left: 56px; padding-right: 0;
  border-left: 1px solid var(--seam); box-shadow: -1px 0 0 rgba(255, 255, 255, 0.05);
}
/* Three focus areas: three machined thirds on desktop; below 1100px they stack like the phone layout. */
.flagships-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flagships-three .flagship { padding-right: 40px; }
.flagships-three .flagship + .flagship { padding-left: 40px; }
.flagships-three .flagship:last-child { padding-right: 0; }
.flagships-three .flagship h3 { text-wrap: balance; }
@media (max-width: 1100px) {
  .flagships-three { grid-template-columns: 1fr; }
  .flagships-three .flagship { padding: 32px 0 8px; }
  .flagships-three .flagship + .flagship { margin-top: 32px; padding-left: 0; border-left: 0; box-shadow: none; border-top: 1px solid var(--rule); }
}
.flagship-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; margin-bottom: 18px; }
.flagship h3 {
  margin: 0; font-weight: 620; font-stretch: 108%;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em;
}
.flagship-head .owner { font-size: 16px; }
.lede { margin: 0 0 28px; font-size: 18px; max-width: 44ch; }
.points { list-style: none; margin: 0 0 28px; padding: 0; width: 100%; }
.points li {
  position: relative;
  padding: 13px 0 13px 24px; border-top: 1px solid var(--rule); color: var(--graphite);
}
.points li:last-child { border-bottom: 1px solid var(--rule); }
.points li::before { content: ""; position: absolute; left: 0; top: calc(13px + 0.775em - 1px); width: 10px; height: 2px; background: var(--chrome); }

/* Also available: a second steel band, quieter than the flagships. */
.also-list {
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.also-list > li { padding: 32px 48px 32px 0; }
.also-list > li + li {
  padding-left: 48px; padding-right: 0;
  border-left: 1px solid var(--seam); box-shadow: -1px 0 0 rgba(255, 255, 255, 0.05);
}
.also-name { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.also-name h3 { margin: 0; font-weight: 600; font-stretch: 106%; font-size: 21px; line-height: 1.25; }
.also-list p { margin: 0 0 16px; color: var(--graphite-on-steel); }
/* On home, "Also available" follows the flagships as their quieter half, not as a section of its own. */
.also-tight { padding-top: clamp(48px, 5vw, 72px); }
.also-tight .section-title { font-weight: 620; font-stretch: 108%; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 24px; }

/* Founders: two names on one line, the same line as the rail. */
.pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-bottom: 36px; }
/* The line enters from the page edge and stops at Gülçin's node: two founders, one line. */
.pair-line {
  position: absolute; left: calc(-1 * var(--gutter)); top: 7px;
  width: calc(var(--gutter) + 50% + 20px + 8px);
  height: 2px; background: var(--lime);
}
.founder { position: relative; padding-top: 44px; }
.founder::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--lime);
}
.founder-name {
  margin: 0 0 10px; color: var(--chrome);
  font-weight: 640; font-stretch: 112%;
  font-size: clamp(40px, 6.1vw, 88px); line-height: 1; letter-spacing: -0.03em;
}
.founder-name .todo { font-size: 15px; vertical-align: middle; letter-spacing: 0; }
.founder-role { margin: 0; font-size: 18px; color: var(--graphite); }
/* About: each founder's services and profile, set as a short spec list under the name. */
.founder-facts { margin: 28px 0 0; max-width: 520px; }
.founder-facts div {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.founder-facts { border-bottom: 1px solid var(--rule); }
.founder-facts dt { font-size: 14px; color: var(--graphite); }
.founder-facts dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.founder-facts dd a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.founder-facts dd a:hover { color: var(--lime); }
.founder-facts .ext { width: 10px; height: 10px; margin-left: 6px; }
/* Before Aetherline: one past role per line, in the quieter text colour. */
.founder-facts dd > span { color: var(--graphite); max-width: 52ch; }

/* Company facts: one machined strip. */
.facts { margin-top: clamp(80px, 9vw, 136px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* The "is this real" facts: set at title size, not as fine print. */
.facts-list {
  list-style: none; margin: 0; padding: 26px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
  font-stretch: 106%; font-size: 19px; font-weight: 500;
}
.facts-list li { display: flex; align-items: center; }
.facts-list li + li::before {
  content: ""; width: 4px; height: 4px; margin: 0 18px; background: var(--graphite);
}

/* Questions: native disclosure, heading held beside the list on desktop. */
.questions { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 40px; }
.questions .section-title { position: sticky; top: 32px; align-self: start; }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: 550; font-stretch: 104%; font-size: 19px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--chrome), var(--chrome)) center / 14px 2px no-repeat,
    linear-gradient(var(--chrome), var(--chrome)) center / 2px 14px no-repeat;
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq summary:focus-visible { outline: 2px solid var(--chrome); outline-offset: 4px; }
.faq p { margin: 0; padding: 0 48px 26px 0; color: var(--graphite); max-width: 68ch; }
.faq p a { color: var(--chrome); text-underline-offset: 3px; }

/* Close: the line comes back in from the page edge and ends at the button. */
.close { padding: clamp(96px, 11vw, 160px) var(--gutter) clamp(80px, 9vw, 128px); }
.close h2 {
  margin: 0 0 16px;
  font-weight: 640; font-stretch: 112%;
  font-size: clamp(40px, 6vw, 88px); line-height: 1; letter-spacing: -0.03em;
}
.close-body > p { margin: 0 0 40px; font-size: 18px; color: var(--graphite); }
/* The close is where the line comes home: it travels a real distance from the page edge to the button. */
.close-act {
  --run: clamp(0px, 22vw, 320px);
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
  margin-left: var(--run);
}
.close-act::before {
  content: ""; position: absolute; top: 27px; height: 2px;
  left: calc(-1 * (var(--gutter) + var(--run))); width: calc(var(--gutter) + var(--run));
  background: var(--lime);
}
.close-email { margin: 0; color: var(--graphite); }

/* Inner pages: title, promise, owner, and the call sitting on the line. */
.page-hero-copy { padding: clamp(40px, 7vw, 96px) var(--gutter) 0; }
.page-hero h1 {
  margin: 0;
  font-weight: 640; font-stretch: 112%;
  font-size: clamp(40px, 6.1vw, 88px); line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance; max-width: 14em;
}
.promise {
  margin: 28px 0 14px; max-width: 32ch;
  font-stretch: 104%; font-size: clamp(20px, 2vw, 26px); line-height: 1.35;
}
.intro { margin: 28px 0 0; max-width: 56ch; font-size: 18px; color: var(--graphite); }
.owner-line { margin: 0; color: var(--graphite); }
.owner-line .owner { font-size: inherit; }
/* Inner pages: the line leaves the page edge, passes the call, and stops at an open node: the start of the process. */
.call-line { --reach: min(44vw, 560px); position: relative; margin-top: clamp(40px, 6vw, 72px); padding: 0 var(--gutter); }
.call-line::before {
  content: ""; position: absolute; left: 0; top: 27px; height: 2px;
  width: calc(var(--gutter) + var(--reach));
  background: var(--lime);
}
.call-line::after {
  content: ""; position: absolute; top: 20px; left: calc(var(--gutter) + var(--reach));
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--lime);
}
.call-line .btn { position: relative; }

/* What we do: a ruled two-column list, each item with its delivery tag. */
.offers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px;
  border-top: 1px solid var(--rule);
}
.offers li { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.offer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.offer-head h3 { margin: 0; font-weight: 600; font-stretch: 106%; font-size: 19px; line-height: 1.3; }
.offer-head .owner { font-size: 14px; }
.offers p { margin: 0; color: var(--graphite); max-width: 52ch; }
.tag {
  font-size: 14px; line-height: 1.5; color: var(--graphite); white-space: nowrap;
  border: 1px solid var(--graphite); border-radius: 4px; padding: 0 8px;
}
.tag-onsite { color: var(--chrome); border-color: var(--chrome); }
.owner-line .tag { margin-left: 10px; }

/* Who it is for, What you get, Good to know: title left, content right, like a spec sheet. */
.spec {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 40px;
  padding: 40px 0; border-top: 1px solid var(--rule);
}
.spec:last-child { border-bottom: 1px solid var(--rule); }
.spec h2, .spec h3 {
  margin: 0; font-weight: 620; font-stretch: 108%;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em;
}
.spec p { margin: 0; font-size: 18px; max-width: 60ch; }
.spec .points { margin: 0; }
/* Spec rows read at one size and colour, whether the content is a list or a paragraph. */
.spec .points li { font-size: 18px; color: var(--chrome); }
/* Inside a spec row the row's own rules frame the list, so the list drops its outer rules. */
.spec .points li:first-child { border-top: 0; padding-top: 0; }
.spec .points li:first-child::before { top: calc(0.775em - 1px); }
.spec .points li:last-child { border-bottom: 0; padding-bottom: 0; }
/* No lone word on the last line of a paragraph. */
p { text-wrap: pretty; }
/* AI & Automation: eight offerings in three groups, each group titled on the left like a spec row. */
.offer-group {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 40px;
  padding: 32px 0; border-top: 1px solid var(--rule);
}
.offer-group:last-child { border-bottom: 1px solid var(--rule); }
.offer-group h3 { margin: 0; font-weight: 620; font-stretch: 108%; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.offer-list h4 { margin: 0 0 6px; font-weight: 600; font-stretch: 106%; font-size: 19px; line-height: 1.3; }
.offer-list p { margin: 0; color: var(--graphite); max-width: 46ch; }
.offer-list p a { color: var(--chrome); text-underline-offset: 3px; }
.own-link a { color: var(--chrome); text-underline-offset: 3px; }

.spec-body p + p { margin-top: 18px; }
.spec-body .quiet { color: var(--graphite); }
.closing-line { margin: 28px 0 0; max-width: 68ch; color: var(--graphite); }
/* The intro sits under its title with the same gap it keeps to the list below. */
.own-title { margin-bottom: 20px; }
.own-intro { margin: 0 0 32px; }
/* In-page anchors land with a little air above the heading. */
[id] { scroll-margin-top: 24px; }

/* Legal pages: a date line under the title; long placeholders wrap. */
.date-line { margin: 20px 0 0; color: var(--graphite); }
.todo.wrap { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legal .spec-body p, .legal .spec-body li { font-size: 16px; }
.legal .spec-body .points { margin-top: 0; }
.legal .spec-body .points li { color: var(--chrome); }
.legal .spec-body p + .points, .legal .spec-body .points + p { margin-top: 18px; }
.site-footer nav a[aria-current="page"] { color: var(--chrome); }
.site-footer-spaced { margin-top: clamp(80px, 9vw, 136px); }

/* 404: the line comes in from the edge and stops at an open node. */
.dead-end { position: relative; height: 16px; margin: clamp(40px, 6vw, 64px) 0 0; }
.dead-end::before {
  content: ""; position: absolute; left: 0; top: 7px; height: 2px;
  width: calc(var(--gutter) + 120px); background: var(--lime);
}
.dead-end::after {
  content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 120px);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--lime);
}
.not-found-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 32px 0 0; padding: 0 var(--gutter); }
.not-found-links .text-link { font-size: 18px; }
.not-found-main { min-height: calc(100svh - 180px); padding-bottom: clamp(80px, 9vw, 136px); }
@media (prefers-reduced-motion: no-preference) {
  .dead-end::before { animation: draw 0.9s var(--ease-out) 0.15s both; }
  .dead-end::after { animation: reach 0.9s var(--ease-out) 0.7s both; }
}

/* Contact: email and the booking link are the routes; there is no form at launch. */
.contact-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.contact-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  font-stretch: 104%; font-size: 19px;
}
.contact-note { margin: 28px 0 0; max-width: 60ch; color: var(--graphite); }
.form-band {
  margin: clamp(64px, 7vw, 104px) 0 clamp(80px, 9vw, 136px); padding: 36px var(--gutter);
  background: linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.form-band p { margin: 0; max-width: 60ch; font-size: 18px; }
/* Film: a ten-second generated shot along the steel edge (provenance: media/steel-edge-film.provenance.json). */
.film { margin-top: clamp(64px, 7vw, 104px); background: var(--steel-lo); }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.film + .form-band { margin-top: 0; }
.form-band .todo { color: var(--graphite-on-steel); border-color: var(--graphite-on-steel); }

/* A process rail that stands on its own page, below the title. */
.rail-page { margin-top: clamp(48px, 6vw, 80px); padding-bottom: 8px; }
/* Contact: the first two steps only. The line comes in from the page edge and ends at the proposal. */
@media (min-width: 1101px) {
  .rail-two { --col: 380px; }
  .rail-two .stops { grid-template-columns: repeat(2, var(--col)); }
  .rail-two .rail-line { right: auto; width: calc(var(--gutter) + var(--col) + 48px); }
}
/* Contact: the other routes, after the call and what to prepare. */
.contact-list a + a { margin-left: 4px; }
/* The routes continue the ruled list of "Before the call" instead of opening a new block. */
.contact-routes { padding-top: 0; padding-bottom: clamp(80px, 9vw, 136px); }
.contact-list .ext { width: 10px; height: 10px; margin-left: 6px; }
.contact-routes .contact-list { border-top: 0; }

/* Points inside a steel band */
.also-list .points { margin: 4px 0 20px; }
.also-list .points > li { color: var(--graphite-on-steel); border-color: var(--seam); }
.also-list .points > li:last-child { border-bottom-color: var(--seam); }

.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px;
  padding: 26px var(--gutter);
  background: linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  font-size: 14px; color: var(--graphite-on-steel);
}
.site-footer .todo { color: var(--graphite-on-steel); border-color: var(--graphite-on-steel); }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { text-underline-offset: 3px; }
.site-footer a:hover { color: var(--chrome); }

/* Signature: the line draws from the call to Handover; each node lights as it is reached. */
@media (prefers-reduced-motion: no-preference) {
  .call-line::before { animation: draw 1.2s var(--ease-out) 0.15s both; }
  .rail-line { animation: draw var(--draw) var(--ease-out) 0.2s both; }
  .node { animation: reach 0.9s var(--ease-out) both; }
  .stop:nth-child(2) .node { animation-delay: 0.43s; }
  .stop:nth-child(3) .node { animation-delay: 0.63s; }
  .stop:nth-child(4) .node { animation-delay: 0.95s; }
}
/* clip-path keeps the line on the main thread, in step with the node timings. */
@keyframes draw {
  from { clip-path: inset(0 96% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes reach {
  0% { border-color: var(--graphite); background: var(--ground); }
  20% { border-color: var(--lime); background: var(--lime); }
  100% { border-color: var(--lime); background: var(--ground); }
}

/* Below desktop the rail turns vertical and runs down the left edge, from the call to Handover. */
@media (max-width: 1100px) {
  .hero { min-height: 0; }
  .hero-copy { grid-template-columns: 1fr; gap: 24px; }
  .rail-line {
    left: calc(var(--gutter) + 7px); right: auto; top: 56px; bottom: 60px;
    width: 2px; height: auto; transform-origin: center top;
  }
  .stops { grid-template-columns: 1fr; gap: 28px; max-width: 560px; }
  .stop:not(.stop-start) { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 20px; }
  .stop:not(.stop-start) .station { grid-row: 1 / span 2; height: auto; align-items: flex-start; margin: 4px 0 0; }
  .stop-start .station { margin-bottom: 18px; }
  .stop-start h3, .stop-start p { padding-left: 36px; }
  .stop:not(.stop-start) .rail-more { grid-column: 2; justify-self: start; }
  /* The line ends at Handover: mask the run below the last node. */
  .node { position: relative; z-index: 1; }
  .stop:last-child { position: relative; }
  .stop:last-child::after {
    content: ""; position: absolute; left: 5px; width: 6px; top: 12px; bottom: 0;
    background: var(--ground);
  }
  /* The steel band stacks, and its seams run across instead of down. */
  .band { grid-template-columns: 1fr; column-gap: 0; }
  .band li + li::before { display: none; }
  .band li + li { border-top: 1px solid var(--seam); }
  @media (prefers-reduced-motion: no-preference) {
    .rail-line { animation-name: draw-down; }
  }
}

/* Tablet: the vertical rail on the left, the steel band of services beside it, so the right half carries content. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 40%); grid-template-rows: auto auto; }
  .hero-copy { grid-column: 1 / -1; }
  .rail { grid-column: 1; }
  .band {
    grid-column: 2; grid-row: 2; align-self: start;
    margin-top: clamp(40px, 7vh, 64px); padding: 0 var(--gutter) 0 28px;
  }
  .band a { padding: 18px 0; }
}

/* Short laptop screens (1280x720 and similar): keep the steel band inside the first screen. */
@media (min-width: 1101px) and (max-height: 820px) {
  .site-header { padding-top: 22px; padding-bottom: 18px; }
  .hero { min-height: calc(100svh - 74px); }
  .hero-copy { padding-top: clamp(16px, 3vh, 32px); }
  .hero h1 { font-size: clamp(40px, min(6.1vw, 9.4vh), 88px); }
  .rail { margin-top: clamp(24px, 4vh, 40px); padding-bottom: clamp(20px, 3vh, 32px); }
  .station { margin-bottom: 10px; }
  .band a { padding: 16px 0; }
}

/* Touch: text links get a 44px-tall hit area without changing how they look. */
@media (pointer: coarse) {
  .text-link, .site-header nav a, .site-footer a { display: inline-block; padding-block: 10px; }
}

/* Phone */
@media (max-width: 760px) {
  .site-header { padding-top: 22px; padding-bottom: 18px; }
  .site-header nav { gap: 6px 22px; }
  .hero-copy { padding-top: 20px; gap: 14px; }
  h1 { font-size: clamp(34px, 10.5vw, 44px); line-height: 1.0; letter-spacing: -0.025em; }
  /* Phone: what we do and who does it come before the call, so the first screen answers both. */
  .hero { display: flex; flex-direction: column; }
  .band { order: 1; margin-top: 18px; }
  .rail { order: 2; margin-top: 18px; padding-bottom: 36px; }
  .hero-sub .text-link, .wide-only { display: none; }
  .phone-only { display: block; }
  .hero-sub p { margin-bottom: 0; font-size: 17px; }
  .stop h3 { font-size: 19px; }
  .btn { width: 100%; justify-content: center; }
  .band a { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; }
  .facts-list { font-size: 17px; }
  /* On phones the film costs a screen of scroll and says nothing: leave it out. */
  .film { display: none; }
  /* Founder facts: the label sits above its value, so long values get the full width. */
  .founder-facts div { grid-template-columns: 1fr; gap: 4px; }
  /* The button fills the width, so the inner-page line runs behind it and the node is dropped. */
  .call-line::before { width: 100%; }
  .call-line::after { display: none; }
}
/* Short phones (iPhone SE, in-app browsers): the call comes before the services so it stays in the first screen. */
@media (max-width: 760px) and (max-height: 760px) {
  .rail { order: 1; }
  .band { order: 2; margin-top: 0; }
  .rail { padding-bottom: 24px; }
}
/* Sections: phone */
@media (max-width: 760px) {
  .flagships { grid-template-columns: 1fr; }
  .flagship { padding: 32px 0 8px; }
  .flagship + .flagship {
    margin-top: 32px; padding-left: 0;
    border-left: 0; box-shadow: none; border-top: 1px solid var(--rule);
  }
  .also-list { grid-template-columns: 1fr; }
  .also-list > li { padding: 28px 0; }
  .also-list > li + li { padding-left: 0; border-left: 0; box-shadow: none; border-top: 1px solid var(--seam); }

  /* The founders' line turns vertical, like the rail above. */
  .pair { grid-template-columns: 1fr; gap: 36px; }
  .pair-line { left: 7px; right: auto; top: 24px; bottom: 0; width: 2px; height: auto; }
  .founder { padding: 0 0 0 36px; }
  .founder::before { top: 16px; z-index: 1; }
  .founder:last-child::after {
    content: ""; position: absolute; left: 5px; width: 6px; top: 24px; bottom: 0;
    background: var(--ground);
  }

  .facts-list { flex-direction: column; align-items: flex-start; gap: 8px; }
  .facts-list li + li::before { display: none; }

  .questions { grid-template-columns: 1fr; gap: 0; }
  .questions .section-title { position: static; }
  .faq summary { padding: 18px 0; }
  .faq p { padding-right: 0; }

  .close-act { --run: 0px; }
  .close-act::before { display: none; }
  .close-act .btn { width: 100%; justify-content: center; }
  .offers { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .offer-group { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* Narrower than a laptop, each offer group lists its items in one column. */
@media (max-width: 1100px) {
  .offer-list { grid-template-columns: 1fr; }
}

@keyframes draw-down {
  from { clip-path: inset(0 0 96% 0); }
  to { clip-path: inset(0 0 0 0); }
}