/* ==========================================================================
   OJA Solutions — Layout & Components
   Depends on tokens.css. Mobile-first; progressive enhancement (.no-js → .js).
   ========================================================================== */

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--color-selection); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}
/* Don't show the ring on mouse-click for elements that manage their own. */
:focus:not(:focus-visible) { outline: none; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--color-cta-hover); }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 { line-height: var(--lh-snug); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); text-wrap: balance; }
h1 { font-size: var(--fs-700); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-600); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }
p { text-wrap: pretty; }

.lead { font-size: var(--fs-400); color: var(--color-ink-secondary); line-height: var(--lh-normal); }
.measure { max-width: var(--measure); }

/* Mono "kicker" / eyebrow used to label sections, à la technical schematics. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-50);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--color-accent);
}

/* Mono tag/pill for tech labels */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.02em;
  color: var(--color-ink-secondary);
  background: var(--color-bg-sunken);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 0.28em 0.7em;
  white-space: nowrap;
}

/* --- Layout primitives ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-py); scroll-margin-top: var(--nav-h); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
/* Recessed band — was an ad-hoc inline background on several sections. */
.section--sunken { background: var(--color-bg-sunken); }

.section__head { max-width: 52rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section__index {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--color-ink-muted);
  letter-spacing: var(--tracking-wide);
}
.section__title { margin-top: 0.5rem; }
.section__intro { margin-top: 1rem; }

.stack > * + * { margin-top: var(--space-sm); }
.stack--lg > * + * { margin-top: var(--space-md); }

/* Decorative hairline divider with a node "joint" tick that slowly pulses. */
.rule { height: 1px; background: var(--color-hairline); border: 0; position: relative; }
.rule::before { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); animation: joint-pulse 3.6s var(--ease-in-out) infinite; }
@keyframes joint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .rule::before { animation: none; }
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 1rem; color: var(--color-ink-inverse); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --_bg: transparent;
  --_fg: var(--color-ink);
  --_bd: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-200);
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.85em 1.4em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { --_bg: var(--color-cta); --_fg: var(--color-on-cta); --_bd: var(--color-cta); box-shadow: var(--shadow-sm); }
.btn--primary:hover { --_bg: var(--color-cta-hover); --_bd: var(--color-cta-hover); color: #fff; box-shadow: var(--shadow-md); }

.btn--ghost { --_bg: transparent; --_fg: var(--color-ink); --_bd: var(--color-border); }
.btn--ghost:hover { --_bd: var(--color-ink); --_fg: var(--color-ink); }

/* Outlined button on a dark surface (e.g. the hero secondary CTA). */
.btn--on-dark { --_fg: var(--paper); --_bd: color-mix(in srgb, var(--paper) 40%, transparent); }
.btn--on-dark:hover { --_fg: var(--paper); --_bd: var(--paper); }

.btn--lg { font-size: var(--fs-300); padding: 1em 1.7em; }
.btn--block { display: flex; width: 100%; }

/* --- Site header / nav ---------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Default (and no-JS) state: solid + legible over any section. */
  --header-ink: var(--graphite-900);
  color: var(--header-ink);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
/* Only when main.js is alive AND we're still over the hero: transparent + light.
   If main.js never runs, the header stays solid (above) — always readable. */
.js-nav .site-header.at-top {
  --header-ink: var(--paper);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Header-anchored scrim: a soft top-down dark gradient that travels WITH the
   fixed header (unlike the hero scrim, which scrolls away). Keeps the lockup
   legible the whole time the header is transparent over the moving hero —
   including mid-scroll, before the solid state engages. */
.js-nav .site-header.at-top::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem 0;            /* extend below so the fade is gentle */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 22, 25, 0.78) 0%, rgba(17, 22, 25, 0.42) 45%, transparent 100%);
}
/* Safety net: a faint text-shadow keeps the lockup legible over bright nodes,
   only while the header is transparent over the animated hero. */
.js-nav .site-header.at-top .brand,
.js-nav .site-header.at-top .nav__link {
  text-shadow: 0 1px 10px rgba(17, 22, 25, 0.55);
}
.site-header__inner { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--header-ink); text-decoration: none; }
.brand__mark { width: auto; height: 1.55rem; color: currentColor; }
.brand__name { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-medium); }
.brand:hover { color: var(--header-ink); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.8rem); list-style: none; padding: 0; margin: 0; }
.nav__link { color: var(--header-ink); text-decoration: none; font-size: var(--fs-200); font-weight: var(--weight-medium); opacity: 0.82; transition: opacity var(--dur-fast) var(--ease-out); position: relative; padding-block: 0.4rem; }
.nav__link:hover, .nav__link.is-active { opacity: 1; color: var(--header-ink); }
.nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-cta); border-radius: 2px; }
.nav__cta.btn { --_fg: var(--header-ink); --_bd: color-mix(in srgb, var(--header-ink) 45%, transparent); padding-block: 0.6em; padding-inline: 1.1em; }
.nav__cta.btn:hover { --_bd: var(--color-cta); --_fg: var(--header-ink); }

.nav-toggle { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: var(--header-ink); border-radius: var(--radius-sm); }
.nav-toggle__box { display: block; position: relative; width: 22px; height: 14px; }
.nav-toggle__bar { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), top var(--dur) var(--ease-out); }
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 6px; }
.nav-toggle__bar:nth-child(3) { top: 12px; }
.site-header.is-open .nav-toggle__bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-header.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: calc(var(--nav-h) + 2rem) clamp(3rem, 8vh, 6rem); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* No-JS / reduced-motion static backdrop: radial graphite field + faint grid */
.hero__bg-fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 75% 18%, rgba(242,100,27,0.16), transparent 55%),
    radial-gradient(90% 80% at 12% 90%, rgba(43,192,121,0.12), transparent 55%),
    linear-gradient(180deg, var(--graphite-800), var(--graphite-900));
}
.hero__bg-fallback::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--graphite-600) 1px, transparent 1px), linear-gradient(90deg, var(--graphite-600) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.18;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 80%);
}
/* Fallback shows by default; hero.js hides it once the canvas is animating.
   Reduced-motion keeps the fallback and drops the (empty) canvas. */
.hero__bg-fallback.is-hidden { display: none; }
[data-motion="reduce"] .hero__canvas { display: none; }

/* Radial vignette over the canvas: darker at the top and edges so bright nodes
   never fight the header lockup. Mirrors the .hero__bg-fallback calm. */
.hero__vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 38%, transparent 40%, rgba(17,22,25,0.5) 100%),
    linear-gradient(180deg, rgba(17,22,25,0.45), transparent 22%, transparent 82%, rgba(17,22,25,0.4));
}

.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__eyebrow { color: var(--green-400); }
.hero__eyebrow::before { background: var(--green-400); }
.hero__title { font-size: var(--fs-800); margin-top: 1.1rem; max-width: 17ch; }
.hero__title .accent { color: var(--orange-400); }
.hero__lead { margin-top: 1.4rem; max-width: 44ch; color: var(--steel-300); font-size: var(--fs-400); }
.hero__lead-accent { color: var(--green-400); }
.hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__meta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; font-family: var(--font-mono); font-size: var(--fs-100); color: var(--steel-400); letter-spacing: 0.02em; }
.hero__meta li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); }

/* --- Cards / grids -------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* Services menu: a wide lead capability over a balanced 2×2 / 4-up of the rest,
   so 5 cards never leave an orphan on the second row. */
.services-grid { display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 36em) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid .card--wide { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
}
/* The wide lead card lays its content out horizontally where there's room. */
@media (min-width: 36em) {
  /* .card.card--wide (not .card--wide) so this beats the base .card
     { flex-direction: column } that's declared later in the file. */
  .card.card--wide { flex-direction: row; align-items: flex-start; gap: 1.5rem; }
  .card--wide .card__icon { margin-bottom: 0; flex: none; }
  .card--wide .card__text { flex: 1; min-width: 0; }
  .card--wide .card__title { font-size: var(--fs-500); }
  .card--wide .card__body { margin-top: 0.5rem; max-width: 64ch; }
}
/* At full width the body alone would strand empty space, so split the lead card
   into a title column + a body column that fills the rest of the row. */
@media (min-width: 64em) {
  .card--wide .card__text { display: grid; grid-template-columns: minmax(11rem, 16rem) 1fr; column-gap: 2.5rem; align-items: start; }
  .card--wide .card__body { margin-top: 0; max-width: 60ch; }
}
.card__text { display: flex; flex-direction: column; }

.card {
  background: var(--color-bg-raised);
  border: var(--border-structure);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
.card__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-bg-sunken); border: var(--border-hairline); color: var(--color-accent); margin-bottom: 1rem; }
.card__icon svg { width: 1.35rem; height: 1.35rem; }
.card__title { font-size: var(--fs-400); }
.card__body { margin-top: 0.55rem; color: var(--color-ink-secondary); font-size: var(--fs-200); }
.card__meta { margin-top: auto; padding-top: 1rem; }
.card--lead { border-color: color-mix(in srgb, var(--color-cta) 40%, var(--color-border)); }
.card--lead .card__icon { color: var(--color-cta); border-color: color-mix(in srgb, var(--color-cta) 30%, var(--color-border)); }

/* --- Selected systems ----------------------------------------------------- */
.systems { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.system { display: grid; gap: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem); align-items: center; }
.system__media { position: relative; }
.system__media .photo, .system__shot {
  border-radius: var(--radius-md);
  border: var(--border-structure);
  background: var(--paper-raised);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Screenshots fill a 4:3 tile, top-anchored, so varied source aspect ratios
   (incl. tall portrait captures) stay uniform instead of slivering. */
.system__shot { aspect-ratio: 4 / 3; }
.system__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Schematics are authored full-bleed at 16:11 → exact fit, no crop. */
.system__shot--diagram { aspect-ratio: 16 / 11; background: var(--graphite-900); border-color: var(--graphite-700); }
.system__num { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-ink-muted); letter-spacing: var(--tracking-wide); }
.system__title { margin-top: 0.5rem; font-size: var(--fs-500); }
.system__impact { margin-top: 1rem; color: var(--color-ink-secondary); }
.system__labels { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --- Data-flow motif -----------------------------------------------------
   Static node-graph fields painted once by motif.js. Purely decorative and
   aria-hidden; if JS never runs the canvas is simply empty (no content lost),
   and under reduced-motion motif.js leaves it blank. ---------------------- */
.motif-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* "Settles" field: top of the Build section, fades out below the header. */
.motif-field--settle {
  height: 70%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
}
/* Footer field: the graph returns on the dark closing band. */
.motif-field--footer {
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 75%);
  mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 75%);
  opacity: 0.8;
}
/* Keep section content above the decorative field. */
#build .container,
.site-footer .container { position: relative; z-index: 1; }
.site-footer { position: relative; overflow: hidden; }

/* --- Build section: compact example-build grid ---------------------------- */
.examples { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.examples__head { margin-bottom: 1.25rem; }
.example-card {
  position: relative;
  background: var(--color-bg-raised);
  border: var(--border-structure);
  border-radius: var(--radius-md);
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* Hover "connect-the-dots": a faint accent node-line lights along the top edge. */
.example-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0; transform: scaleX(0.4); transform-origin: left;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.example-card:hover, .example-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
.example-card:hover::before, .example-card:focus-within::before { opacity: 1; transform: scaleX(1); }
.example-card .card__icon { margin-bottom: 0.9rem; }
.example-card__title { font-size: var(--fs-400); }
.example-card__line { margin-top: 0.6rem; color: var(--color-ink-secondary); font-size: var(--fs-200); }
.example-card__tags { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (prefers-reduced-motion: reduce) {
  .example-card, .example-card::before { transition: none; }
}

/* --- Credibility / stats -------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1px; background: var(--color-border); border: var(--border-structure); border-radius: var(--radius-md); overflow: hidden; }
.stat { background: var(--color-bg); padding: clamp(1.25rem, 1rem + 1vw, 1.8rem); }
.stat__num { font-size: var(--fs-700); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1; }
.stat__num .unit { color: var(--color-accent); }
.stat__num--brand { color: var(--color-accent); }  /* Cal Poly green (school color) */
.stat__label { margin-top: 0.6rem; color: var(--color-ink-secondary); font-size: var(--fs-200); }

/* --- Track-record proof cards (compact real projects) --------------------- */
.proofs__head { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); margin-bottom: 1.25rem; }
.proofs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); }
.proof { display: flex; flex-direction: column; background: var(--color-bg-raised); border: var(--border-structure); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.proof:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
/* Reuse .system__shot's aspect/cover handling, but sit flush inside the card. */
.proof .system__shot { border: 0; border-radius: 0; box-shadow: none; }
.proof .system__shot:not(.system__shot--diagram) { background: var(--color-bg-sunken); } /* mat behind light captures */
.proof__body { padding: clamp(1rem, 0.8rem + 0.8vw, 1.4rem); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.proof__title { font-size: var(--fs-400); }
.proof__impact { color: var(--color-ink-secondary); font-size: var(--fs-200); }
.proof__tags { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .proof { transition: none; } }

/* --- Testimonials --------------------------------------------------------- */
.quotes { display: flex; flex-direction: column; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.quote { display: grid; grid-template-columns: auto 1fr; gap: clamp(0.5rem, 0.1rem + 2vw, 2rem); align-items: start; }
/* Oversized, clearly-decorative opening mark — scales with the row, so short and
   long quotes both read as intentional (no "missing end quote" look). */
.quote__mark { font-family: var(--font-mono); color: var(--color-accent); font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 0.7; }
.quote__body { display: flex; flex-direction: column; min-width: 0; }
.quote__text { font-size: var(--fs-500); line-height: var(--lh-snug); max-width: 60ch; }
.quote__chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.quote__chips .tag { font-size: var(--fs-50); color: var(--color-accent); }
.quote__cite { margin-top: 0.9rem; font-style: normal; color: var(--color-ink-muted); font-size: var(--fs-200); font-family: var(--font-mono); }
.quotes__head { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); margin-bottom: 1.25rem; }
@media (max-width: 35.99em) {
  .quote { grid-template-columns: 1fr; gap: 0.1rem; }
  .quote__mark { font-size: 3rem; line-height: 1; }
}

/* --- Process -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(1.25rem, 0.5rem + 2vw, 2rem); counter-reset: step; }
.step__title { font-size: var(--fs-400); }
.step__body { margin-top: 0.5rem; color: var(--color-ink-secondary); font-size: var(--fs-200); }

/* Engagement flow: ONE connector line carries a packet between the numbered
   step "nodes" — the hero's data-flow language. Vertical on stacked mobile,
   horizontal across the row on wider screens. The old per-step divider lines
   are gone so only this single line remains. Decorative + aria-hidden. */
.steps--flow { position: relative; }
.step { position: relative; padding-left: 2.75rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--fs-100);
  color: var(--color-bg); background: var(--color-ink);
  padding: 0.15em 0.5em; border-radius: var(--radius-pill); z-index: 1;
}
.steps__line {
  position: absolute; left: 0.8rem; top: 0.2rem; bottom: 0.2rem; width: 2px;
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 28%, transparent));
  opacity: 0.5; z-index: 0;
}
.steps__packet { display: none; }
@media (min-width: 48em) {
  .step { padding-left: 0; padding-top: 2.6rem; }
  .step::before { top: 0.7rem; transform: translateY(-50%); }
  .steps__line {
    left: 0; right: 0; width: auto; top: 0.7rem; bottom: auto; height: 2px; margin-top: -1px;
    background: linear-gradient(90deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 30%, transparent) 100%);
  }
  .steps__packet {
    display: block; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; background: var(--color-cta);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-cta) 22%, transparent);
    animation: packet-flow 5.5s var(--ease-in-out) infinite;
  }
}
@keyframes packet-flow {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .steps__packet { animation: none; left: 0; opacity: 1; }
}

/* --- Founder -------------------------------------------------------------- */
.founder__grid { display: grid; gap: clamp(1.5rem, 0.5rem + 4vw, 3.5rem); align-items: start; }
.founder__media { position: relative; }
.founder__photo { border-radius: var(--radius-lg); overflow: hidden; border: var(--border-structure); box-shadow: var(--shadow-lg); }
.founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.founder__media .caption { margin-top: 0.7rem; font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-ink-muted); }
.founder__bio > * + * { margin-top: 1rem; }
.founder__facts { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.founder__facts li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline; }
.founder__facts .k { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--color-accent); letter-spacing: 0.02em; white-space: nowrap; }
.founder__facts .v { color: var(--color-ink-secondary); font-size: var(--fs-200); }

/* --- Photo helper --------------------------------------------------------- */
.photo { overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg-sunken); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--scrim { position: relative; }
.photo--scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(17,22,25,0.72)); }

/* --- Locale band (atmospheric photo accent) ------------------------------- */
.locale-band { position: relative; height: clamp(220px, 40vh, 440px); overflow: hidden; }
.locale-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.locale-band::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(17,22,25,0.82), rgba(17,22,25,0.35) 60%, rgba(17,22,25,0.55)); }
.locale-band__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.locale-band__title { color: var(--paper); font-size: var(--fs-500); max-width: 24ch; }
.locale-band__meta { color: var(--steel-300); font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--tracking-wide); }

/* --- Booking + Contact ---------------------------------------------------- */
.contact__grid { display: grid; gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); align-items: start; }
.panel { background: var(--color-bg-raised); border: var(--border-structure); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); min-width: 0; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Scheduler placeholder shown until the component lands (P2) */
.scheduler-mount { min-height: 18rem; display: grid; }
.scheduler-fallback { display: grid; place-content: center; text-align: center; gap: 0.75rem; padding: 2rem; border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-ink-secondary); }
.scheduler-fallback .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-accent); margin-inline: auto; }

/* --- <oja-scheduler> live booking UI -------------------------------------- */
/* min-width:0 down the grid-item chain so the day rail's overflow-x scroll
   clips instead of forcing the panel (and its grid column) to min-content. */
.scheduler-mount, .oja-scheduler { min-width: 0; }
.oja-scheduler { display: block; }
.sched { display: grid; gap: 1.25rem; min-width: 0; }
.sched > * { min-width: 0; }

/* loading / empty / error states */
.sched__state { display: grid; place-items: center; gap: 0.85rem; text-align: center; padding: 2rem 1rem; color: var(--color-ink-secondary); }
.sched__state--err { padding-block: 1rem; }
.sched__spinner { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-accent); animation: sched-spin 0.7s linear infinite; }
@keyframes sched-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sched__spinner { animation-duration: 2s; } }

.sched__prompt { display: block; margin-bottom: 0.6rem; color: var(--color-ink-muted); }

/* day rail */
.sched__days { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sched__day { scroll-snap-align: start; flex: 0 0 auto; min-width: 4.25rem; display: grid; gap: 0.1rem; padding: 0.55rem 0.7rem; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; color: var(--color-ink-secondary); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.sched__day:hover { border-color: var(--color-ink); color: var(--color-ink); }
.sched__day.is-active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)); color: var(--color-ink); }
.sched__day-wd { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.sched__day-dm { font-size: var(--fs-200); font-weight: var(--weight-semibold); }

/* time grid */
.sched__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.5rem; }
.sched__time { font-family: var(--font-mono); font-size: var(--fs-200); padding: 0.6rem 0.4rem; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; color: var(--color-ink); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sched__time:hover { border-color: var(--color-ink); }
.sched__time.is-active { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-on-cta); }

/* detail step (form / confirm) */
.sched__detail { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--color-hairline); }
.sched__chosen { display: flex; align-items: baseline; gap: 0.6rem 0.85rem; flex-wrap: wrap; }
.sched__chosen-label { color: var(--color-ink-muted); }
.sched__chosen strong { font-size: var(--fs-300); }
.sched__change { margin-left: auto; background: none; border: none; padding: 0; color: var(--color-accent); font: inherit; font-size: var(--fs-200); cursor: pointer; text-decoration: underline; }
.sched__form { gap: 0.9rem; }
.sched__turnstile { min-height: 65px; }
.sched__status:not([hidden]) { margin-top: 0.2rem; }

/* success */
.sched__done { display: grid; place-items: center; gap: 0.6rem; text-align: center; padding: 1.5rem 0.5rem; }
.sched__check { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent); font-size: 1.4rem; font-weight: var(--weight-bold); }
.sched__done-when { font-size: var(--fs-300); font-weight: var(--weight-semibold); }
.sched__manage-link { font-size: var(--fs-200); color: var(--color-ink-secondary); }

/* --- Manage-booking page (manage.html) ------------------------------------ */
.manage { display: grid; gap: 1.1rem; margin-top: var(--nav-h); }
.manage__when { margin: 0; }
.manage__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.manage__slot:not(:empty) { margin-top: 0.5rem; }
.btn.is-danger { --_bg: transparent; --_fg: var(--orange-600); --_bd: var(--orange-600); }
.btn.is-danger:hover { --_bg: var(--orange-600); --_fg: #fff; --_bd: var(--orange-600); }

/* Forms */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field__label { font-size: var(--fs-200); font-weight: var(--weight-medium); }
.field__label .req { color: var(--color-cta); }
.field__hint { font-size: var(--fs-100); color: var(--color-ink-muted); }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.85em;
  font-size: var(--fs-200);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--color-cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta) 22%, transparent); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--orange-600); }
/* Honeypot — visually hidden, kept in layout flow off-screen for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.form__note { font-size: var(--fs-100); color: var(--color-ink-muted); }
.form-status { font-size: var(--fs-200); }
.form-status[data-state="ok"] { color: var(--green-600); }
.form-status[data-state="err"] { color: var(--orange-600); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2.5rem; }
.site-footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.footer__brand { max-width: 24rem; }
.footer__brand .brand { color: var(--color-ink); margin-bottom: 1rem; }
.footer__tagline { color: var(--color-ink-secondary); font-size: var(--fs-200); }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 2rem; }
.footer__col h3 { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: 0.9rem; font-weight: var(--weight-medium); }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer__col a { color: var(--color-ink-secondary); text-decoration: none; font-size: var(--fs-200); }
.footer__col a:hover { color: var(--color-ink); }
.footer__fine { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: var(--color-ink-muted); font-size: var(--fs-100); font-family: var(--font-mono); }

/* --- Reveal on scroll ----------------------------------------------------
   Hiding is gated on .reveal-on, which main.js adds ONLY when it will animate.
   If main.js fails or reduced-motion is on, nothing is hidden. ------------- */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; }
.reveal-on [data-reveal].is-visible { opacity: 1; transform: none; }
.reveal-on [data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
.reveal-on [data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal-on [data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
.reveal-on [data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Utilities ------------------------------------------------------------ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.text-accent { color: var(--color-accent); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 48em) {
  .system { grid-template-columns: 1fr 1fr; }
  .system--reverse .system__media { order: 2; }
  .founder__grid { grid-template-columns: 0.85fr 1.15fr; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .site-footer__top { grid-template-columns: 1.2fr 2fr; }
}

@media (min-width: 64em) {
  .system { gap: 4rem; }
}

/* Mobile nav.
   Default / no-JS: the header grows and links wrap below the brand — every link
   reachable without scripting, no toggle. main.js (.js-nav) upgrades this into a
   fixed collapsible panel driven by the toggle button. */
@media (max-width: 47.99em) {
  .site-header { height: auto; }
  .site-header__inner { flex-wrap: wrap; padding-block: 0.5rem; }
  .nav { flex-basis: 100%; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .nav__list { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .nav-toggle { display: none; }

  .js-nav .site-header { height: var(--nav-h); }
  .js-nav .site-header__inner { flex-wrap: nowrap; padding-block: 0; }
  .js-nav .nav-toggle { display: inline-flex; }
  .js-nav .nav {
    flex-basis: auto;
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--color-hairline);
    box-shadow: var(--shadow-lg); padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-130%); transition: transform var(--dur) var(--ease-out);
  }
  .js-nav .site-header.is-open .nav { transform: translateY(0); }
  .js-nav .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js-nav .nav__link { color: var(--graphite-900); opacity: 1; padding-block: 0.9rem; border-bottom: 1px solid var(--color-hairline); }
  .js-nav .nav__link.is-active::after { display: none; }
  .js-nav .nav__cta.btn { --_fg: var(--graphite-900); --_bd: var(--color-cta); margin-top: 0.9rem; }
}