/* AI-Author: Claude (Anthropic) — shared design system for every page.
   Page owners add page-specific rules in assets/css/<page>.css; edit this file
   only through claude@asus so the system stays consistent. */

/* Fonts are self-hosted (site/assets/fonts/, SIL OFL 1.1 — see the OFL-*.txt
   files there): no third-party font requests. Instrument Serif 400 normal and
   italic; Inter ships as a variable font (wght axis), one latin file covering
   weights 300–600. font-display: swap keeps text visible while they load. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
  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: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
  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;
}

:root {
  /* Palette (client decision 2026-10-04): Ivory tones of black and white, plus a
     teal line colour. Other looks remain in the preview panel (tools/preview/). */
  --black: #0c0c0e;
  --white: #fbf9f4;
  --ink-900: #0b0b0b;
  --ink-800: #222225;
  --ink-600: #3a3a3a;
  --ink-500: #6b6b6b;
  --ink-400: #8f8f8f;
  --ink-300: #b5b5b5;
  --ink-200: #e0dccf;
  --ink-100: #f2efe7;

  /* Line colour: a deeper shade on light sections (stays visible), a lighter
     one on dark sections. */
  --line-l: #2f8f9d;
  --line-d: #6fc7d3;

  /* Type: refined high-contrast serif for headlines, clean sans for body.
     Both are SIL Open Font License: free for commercial web use. */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-mega: clamp(3.4rem, 9.5vw, 10rem);
  --fs-xl: clamp(2.6rem, 6.4vw, 6.4rem);
  --fs-lg: clamp(2rem, 4.2vw, 4rem);
  --fs-md: clamp(1.4rem, 2.4vw, 2.2rem);
  --fs-body: clamp(1.02rem, 1.15vw, 1.15rem);
  --fs-small: 0.82rem;

  /* Layout: strict 12-column grid, generous space. */
  --gutter: clamp(1rem, 4vw, 4rem);
  --max: 1440px;
  --section-pad: clamp(6rem, 16vh, 12rem);

  /* Motion: slow and deliberate, like a curtain opening. */
  --ease: cubic-bezier(0.22, 0.61, 0.15, 1);
  --slow: 1400ms;
  --med: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Keyboard users: scroll instantly to the focused element (smooth scroll left it off-screen). */
html:focus-within { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--white); color: var(--black); }
.section--white ::selection { background: var(--black); color: var(--white); }

.skip-link {
  position: absolute; left: -9999px; top: 1rem; z-index: 100;
  background: var(--white); color: var(--black); padding: .75rem 1rem;
}
.skip-link:focus { left: 1rem; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
main:focus { outline: none; } /* focus target of the skip link; no ring on the whole page */

/* ---------- Sections: alternate full black / full white ---------- */
.section {
  position: relative;
  padding: var(--section-pad) var(--gutter);
  overflow: hidden;
}
.section--black { background: var(--black); color: var(--white); }
.section--white { background: var(--white); color: var(--black); }
.section--full { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

/* ---------- Typography ---------- */
.mega, .h-xl, .h-lg, .h-md {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
}
.mega { font-size: var(--fs-mega); }
.h-xl { font-size: var(--fs-xl); }
.h-lg { font-size: var(--fs-lg); line-height: 1.04; }
.h-md { font-size: var(--fs-md); line-height: 1.15; }
.mega em, .h-xl em, .h-lg em, .h-md em { font-style: italic; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.55; max-width: 38ch; margin: 2rem 0 0; }
.eyebrow {
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 2rem;
}
.section--black .muted, .section--black .eyebrow { color: var(--ink-400); }
.section--white .muted, .section--white .eyebrow { color: var(--ink-500); }
.measure { max-width: 58ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  padding: 1.15rem 2rem; border: 1px solid currentColor; background: transparent;
  color: inherit; cursor: pointer;
  transition: background var(--med) var(--ease), color var(--med) var(--ease);
}
.btn::after { content: "→"; letter-spacing: 0; transition: transform var(--med) var(--ease); }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(.35rem); }
.section--black .btn:hover, .section--black .btn:focus-visible { background: var(--white); color: var(--black); }
.section--white .btn:hover, .section--white .btn:focus-visible { background: var(--black); color: var(--white); }
.btn--solid.on-black { background: var(--white); color: var(--black); }
.btn--solid.on-white { background: var(--black); color: var(--white); }
/* Focus ring by section colour, never currentColor: a solid white button on
   black has black text, so a currentColor ring would be invisible. */
.section--black .btn:focus-visible, .site-header .btn:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.section--white .btn:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  color: var(--white); mix-blend-mode: difference;
}
.site-header .brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.site-header .brand img { height: 40px; width: auto; display: block; }
@media (max-width: 860px) { .site-header .brand img { height: 32px; } }
.site-header .brand span { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .01em; }
.site-nav { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); align-items: center; }
.site-nav a {
  font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; opacity: .75; transition: opacity var(--med) var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; }
.site-nav .nav-cta { opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.nav-toggle {
  display: none; background: none; border: 0; color: inherit; cursor: pointer;
  width: 44px; height: 44px; margin-right: -10px; padding: 0; position: relative;
}
/* Three horizontal lines (client, 2026-10-13); they turn into an X while open. */
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor;
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
}
.nav-toggle-bars { top: 50%; margin-top: -.75px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .site-header { mix-blend-mode: normal; background: var(--black); }
  .nav-toggle { display: block; }
  /* Closed menu is visibility:hidden (not just transparent) so its links leave
     the tab order; visibility flips after the fade-out, before the fade-in. */
  .site-nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center;
    gap: 2rem; background: var(--black); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity var(--med) var(--ease), visibility 0s linear var(--med);
  }
  .site-nav a { font-size: 1rem; }
  body.nav-open .site-nav {
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: opacity var(--med) var(--ease), visibility 0s;
  }
  /* Without JavaScript the toggle can't work: show the links inline instead. */
  .no-js .site-header { position: relative; flex-wrap: wrap; gap: 1rem; }
  .no-js .nav-toggle { display: none; }
  .no-js .site-nav {
    position: static; opacity: 1; pointer-events: auto; visibility: visible; z-index: auto;
    flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 1rem;
  }
  .no-js .site-nav a { font-size: .7rem; }
}

/* ---------- Footer (minimal compliance) ---------- */
.site-footer {
  background: var(--black); color: var(--ink-400);
  padding: 3rem var(--gutter); font-size: var(--fs-small);
  border-top: 1px solid var(--ink-800);
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer .links { display: flex; gap: 2rem; flex-wrap: wrap; }

/* ---------- Imagery: monochrome, quiet ---------- */
.media { position: relative; overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.bg-media { position: absolute; inset: 0; z-index: 0; }
.bg-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .38; }
.bg-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), var(--black) 96%); }
.section--white .bg-media::after { background: linear-gradient(180deg, rgba(255,255,255,.1), var(--white) 96%); }
.above { position: relative; z-index: 1; }

/* ---------- Product marks (Vader / Sparrow sit under the crest) ---------- */
.product-mark { display: inline-flex; align-items: center; gap: .9rem; }
.product-mark .mark { width: 2.5rem; height: 2.5rem; } /* one step up from 2.2rem (client, 2026-10-04) */
/* Optical sizing: the thin, open Sparrow mark reads smaller than the solid Vader V,
   so it is one step larger (2.5 -> 2.8rem, 40 -> 45px) wherever it appears. */
:is(.product-mark, .plan-head) .mark[src*="sparrow"] { width: 2.8rem; height: 2.8rem; }
.product-mark .name { font-family: var(--serif); font-size: 1.8rem; }
.product-mark .by { font-size: var(--fs-small); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-400); }

/* ---------- Numbered steps / lists ---------- */
.steps { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.6rem 0; border-top: 1px solid var(--ink-200); }
.section--black .steps li { border-color: var(--ink-800); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.rule { height: 1px; background: currentColor; opacity: .15; border: 0; margin: 4rem 0; }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 180ms; }
.reveal[data-delay="2"] { transition-delay: 360ms; }
.reveal[data-delay="3"] { transition-delay: 540ms; }
.reveal[data-delay="4"] { transition-delay: 720ms; }
/* Curtain: a cover layer in the section's own colour lifts away. (Clipping the
   element itself would hide it from IntersectionObserver, so it never reveals.) */
.curtain { position: relative; }
.curtain::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background: var(--black); transform-origin: top; transform: scaleY(1);
  transition: transform var(--slow) var(--ease);
}
.section--white .curtain::after { background: var(--white); }
.curtain.is-in::after { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .curtain::after { display: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
}
/* Without JavaScript, never hide content. */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .curtain::after { display: none; }

/* ---------- Line system (client decision: teal, everywhere + accents) ----------
   html-prefixed so it outranks the page stylesheets' grey borders without
   editing them. The preview panel can switch these back for comparison. */
html :is(.steps li, .capabilities li, .plan-features li + li, .old-lines li) { border-color: var(--line-l); }
html .old-lines li:last-child { border-bottom-color: var(--line-l); }
html .section--black :is(.steps li, .capabilities li),
html .plan--combined .plan-features li + li { border-color: var(--line-d); }
html :is(.plan:not(.plan--combined), .person .portrait) { border-color: var(--line-l); }
html :is(.product-pair, .product-card, .site-footer) { border-color: var(--line-d); }
html .eyebrow::before {
  /* As wide as the word "VISION" in the Vision eyebrow (client, 2026-10-06: was 2.75rem, ~35% shorter). */
  content: ""; display: block; width: 4.5em; height: 1px; margin-bottom: 1.3rem; background: var(--line-l);
}
html .section--black .eyebrow::before { background: var(--line-d); }
/* Every framed picture gets a teal border (client request 2026-10-04). Full-bleed
   background images (.bg-media) are excluded: a border there would only outline the viewport. */
html .media { border: 1px solid var(--line-l); }
html .section--black .media { border-color: var(--line-d); }


/* Desktop header over scrolled content (2026-10-06 debug pass): the blend-mode
   header had no background, so text scrolling underneath ran through the logo.
   main.js sets data-tone from the section under the bar; once the page has
   scrolled, the bar gets a matching solid backdrop. */
@media (min-width: 861px) {
  .site-header[data-tone] { mix-blend-mode: normal; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
  .site-header[data-tone="dark"] { color: var(--white); }
  .site-header[data-tone="light"] { color: var(--black); }
  .site-header[data-tone="light"] .brand img { filter: invert(1); }
  .site-header[data-tone].is-scrolled { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .site-header[data-tone="dark"].is-scrolled { background: rgba(12, 12, 14, .9); }
  .site-header[data-tone="light"].is-scrolled { background: rgba(251, 249, 244, .92); box-shadow: 0 1px 0 var(--ink-200); }
}

/* Closing call-to-action that is only a button (per the brief): a compact,
   centred strip instead of a full-height section that read as empty. */
section[aria-label="Request a meeting"] { padding-block: clamp(3.5rem, 9vh, 6rem); }
section[aria-label="Request a meeting"] .btn-row { justify-content: center; margin-top: 0; }

/* Opening backgrounds on the inner pages (client, 2026-10-06): the same quiet
   photo-behind-text treatment as the home hero. Faint on white (Product) and
   on the legal page. */
.page-hero-media img { object-position: center 35%; opacity: .42; }
.bg-media--faint img { opacity: .2; }
.section--white .bg-media--faint img { opacity: .14; }
/* Team opening: taller, so the boardroom table in the picture shows (client, 2026-10-06). */
.page-hero--tall { min-height: 78svh; display: flex; align-items: flex-end; }
.page-hero--tall .page-hero-media img { object-position: center 62%; }
.page-hero--tall .page-hero-media::after { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(12,12,14,.35) 55%, var(--black) 98%); }
@media (max-width: 860px) { .page-hero--tall { min-height: 62svh; } }
/* Pricing: Matin's final picture (2026-10-06) — frame its glowing centre. */
.page-hero--pricing .page-hero-media img { object-position: center 48%; opacity: .55; }
/* Team: the owner's brain-network picture (2026-10-06), framed on the brain. */
.page-hero--team .page-hero-media img { object-position: center 40%; opacity: .55; }
/* Footer (Matin, 2026-10-09): a vertical divider between Privacy and the email, both 10% bigger. */
.site-footer .links { gap: 0; align-items: center; font-size: 1.1em; }
.site-footer .links a + a { border-left: 1px solid var(--ink-600); margin-left: 1.25rem; padding-left: 1.25rem; }
/* Phones: tap targets at least 44px tall (Codex mobile audit 2026-10-13). The
   visible layout is unchanged: menu links trade gap for padding, and small
   links get an invisible enlarged hit area. */
@media (max-width: 860px) {
  .site-nav { gap: .9rem; }
  .site-nav a { padding: .6rem 1rem; }
  .site-nav .nav-cta { padding: 0 0 2px; margin: .55rem 0; }
  .site-header .brand, .site-footer .links a, .person .text-link, .site-nav .nav-cta { position: relative; }
  .site-header .brand::after, .site-footer .links a::after, .person .text-link::after, .site-nav .nav-cta::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
  }
}
/* Phone design pass (2026-10-13, Claude + Codex review): calmer but tighter
   rhythm. Ordinary sections only; full-screen and pinned sections keep their
   own geometry (min-height / sticky are unaffected by this padding). */
@media (max-width: 860px) {
  :root { --section-pad: 4.5rem; }
  .btn-row { margin-top: 2rem; }
}
/* Phone menu (Antigravity mobile audit 2026-10-13, verified by Claude): the
   page underneath no longer scrolls while the menu is open; the menu fades in
   quickly (0.3s, no ghosting over light pages); short/landscape screens can
   scroll the menu instead of cutting off its first item. */
@media (max-width: 860px) {
  body.nav-open, html:has(body.nav-open) { overflow: hidden; }
  .site-nav { transition: opacity .3s var(--ease), visibility 0s linear .3s; }
  body.nav-open .site-nav { transition: opacity .3s var(--ease), visibility 0s; }
}
@media (max-width: 860px) and (max-height: 520px) {
  .site-nav { justify-content: flex-start; overflow-y: auto; gap: .2rem; padding: 4.5rem 0 1.5rem; }
}