/*
 * journey-v5.css — the root-first reimagining ("שורש תחילה").
 * One design idea drives the page: a single growth spine on the
 * RTL reading edge; every piece of content is a station hanging
 * from it. Consumes site/tokens.css only (canonical DS subset).
 */

/* ---------- base ---------- */
:root {
  --header-height: 5rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --shell: var(--container-max);
  /* spine geometry — mirrors of the v3 rail, on the right */
  --j-rail: 48px;
  --j-rail-half: 24px;
  --j-side: calc(21% - var(--j-rail-half));
  --j-gap: clamp(2.5rem, 4vw, 3.5rem);
  /* compact editorial rhythm — content defines the pace, the root follows */
  --j-section-space: clamp(4.25rem, 5.4vw, 5.5rem);
  --j-section-space-compact: clamp(3.5rem, 4.5vw, 4.5rem);
  --j-heading-space: clamp(2rem, 3vw, 2.75rem);
  --j-station-space: clamp(2.75rem, 4vw, 3.5rem);
  /* unified display ramp */
  --display-xl: clamp(3.3rem, 5.6vw, 5.4rem);
  --display-lg: clamp(2.7rem, 4.4vw, 4.3rem);
  --display-md: clamp(1.65rem, 2.3vw, 2.25rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: var(--header-height); background: var(--cream); overflow-x: clip; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--cream);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select, summary { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--text-accent); }
.j-section--ink a:hover, .site-footer a:hover { color: var(--color-cta); }
bdi { direction: ltr; unicode-bidi: isolate; }
h1, h2, h3, h4, p, dl, dd, figure { margin-block-start: 0; }
h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible { outline: 3px solid transparent; box-shadow: var(--shadow-focus); }

.shell { width: min(100% - (2 * var(--gutter)), var(--shell)); margin-inline: auto; }
.crimson { color: var(--danger-600); }
p { text-wrap: pretty; }
::selection { background: var(--mint-200); color: var(--stone-900); }

.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 1000;
  padding: .7rem 1rem;
  border: 1px solid var(--color-cta);
  background: var(--color-surface-inverse);
  color: var(--white);
  font-weight: var(--weight-bold);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- header (DS's one transparency) ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  height: var(--header-height);
  border-block-end: 1px solid transparent;
  background: var(--cream); /* fallback for pre-color-mix engines */
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled {
  background: var(--cream);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  border-block-end-color: var(--border-subtle);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--cream); }
}

.header-inner { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .75rem; text-decoration: none; }
.brand img { width: 2.4rem; height: auto; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 1.15rem; font-weight: var(--weight-extrabold); }
.brand-copy small { margin-block-start: .25rem; color: var(--text-muted); font-size: .78rem; }

.desktop-nav { display: flex; align-items: center; gap: 1.8rem; margin-inline-start: auto; }
.desktop-nav a {
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: .98rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.desktop-nav a:hover { background: var(--stone-100); color: var(--text-primary); }
.header-actions { display: flex; align-items: center; gap: .65rem; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .72rem 1.15rem;
  border: 1px solid var(--text-accent);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.button bdi { white-space: nowrap; }
.button svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button--compact { min-height: 2.8rem; padding: .62rem 1rem; background: var(--color-cta); border-color: var(--color-cta); }
.button--primary { background: var(--color-cta); border-color: var(--color-cta); }
.button--primary:hover, .button--compact:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.button--primary:active, .button--compact:active { background: var(--color-cta-active); border-color: var(--color-cta-active); }
.button--secondary { background: transparent; }
.button--secondary:hover { background: var(--color-surface-accent); }
.button--secondary:active { background: var(--mint-100); }
.button--large { min-height: 3.55rem; padding-inline: 1.35rem; }
.header-cta-short, .mobile-menu { display: none; }
.mobile-menu { position: relative; }
.mobile-menu summary { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 1px solid var(--border-subtle); cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mobile-menu nav {
  position: absolute;
  inset-block-start: calc(100% + .5rem);
  inset-inline-end: 0;
  width: min(18rem, calc(100vw - (2 * var(--gutter))));
  display: grid;
  border: 1px solid var(--border-subtle);
  background: var(--paper);
}
.mobile-menu nav a { padding: .9rem 1rem; text-decoration: none; }
.mobile-menu nav a + a { border-block-start: 1px solid var(--border-subtle); }

/* ---------- growth canvas + engine tuning ---------- */
[data-growth-narrative] {
  --growth-color-live: var(--color-growth-live);
  --growth-color-structure: var(--color-growth-structure);
  --growth-color-passive: var(--color-growth-passive);
  --growth-color-leaf-primary: var(--color-growth-leaf-primary);
  --growth-color-leaf-secondary: var(--color-growth-leaf-secondary);
  --growth-color-leaf-highlight: var(--color-growth-leaf-highlight);
  --growth-color-track: var(--color-growth-track);
  --growth-color-surface: var(--color-growth-surface);
  --growth-color-surface-inverse: var(--color-growth-surface-inverse);
  --growth-root-stroke: 5px;         /* user-approved default (was 7.8) */
  --growth-stem-stroke: 12.3px;
  --growth-branch-stroke: 5.3px;
  --growth-passive-root-stroke: 5.8px;
  --growth-detail-stroke: 2.3px;
  --growth-visual-lag: .022;
  --growth-wind-strength: .8;        /* user-approved default (was .3) */
  --growth-reading-line: .45;
  --growth-intro-duration: 4200ms;
  --growth-plant-scale: .8;
}

.growth-canvas {
  position: fixed;
  z-index: 2;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  pointer-events: none;
}
.has-growth-canvas .growth-canvas { display: block; }

main > section { position: relative; }
.hero-grid, .station, .j-heading, .contact-finale { position: relative; z-index: 3; }

/* ---------- the shared station grid: content hangs off the spine ---------- */
.j-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--j-gap) var(--j-rail) var(--j-side);
  direction: ltr;
  align-items: start;
}
.j-heading-copy, .station-panel, .statement-line { grid-column: 1; direction: rtl; min-width: 0; }
.growth-marker { grid-column: 3; justify-self: center; width: 1px; height: 1px; }
.station-number {
  grid-column: 4;
  justify-self: start;
  padding-inline-start: 14px;
  color: var(--stone-500);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform: translateY(-50%);
  transition: color var(--dur-base) var(--ease-standard);
  direction: ltr;
}

/* ---------- sections ---------- */
.j-section { padding-block: var(--j-section-space); }
.j-section--ink {
  --j-rule: var(--stone-700);
  --j-body: var(--stone-300);
  background: var(--color-surface-inverse);
  color: var(--white);
}
.j-section--cream {
  --j-rule: var(--border-subtle);
  --j-body: var(--text-secondary);
  background: var(--color-bg);
}

.j-heading { margin-block-end: var(--j-heading-space); }
.j-heading h2 {
  margin-block-end: 1rem;
  font-size: var(--display-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
}
.j-heading p {
  max-width: 38rem;
  margin: 0;
  color: var(--j-body);
  font-weight: var(--weight-light);
  font-size: 1.15rem;
  line-height: 1.65;
}

.j-stations { display: grid; gap: var(--j-station-space); margin: 0; padding: 0; list-style: none; }
.station { min-width: 0; }

.station-panel {
  width: 100%;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.story-panel-content {
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--j-rule);
  transition: border-color var(--dur-slow) var(--ease-standard);
}
.station-panel h3 {
  margin-block-end: .75rem;
  font-size: var(--display-md);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.015em;
  line-height: 1.08;
}
.station-panel h4 { margin-block-end: .3rem; font-size: 1rem; font-weight: var(--weight-extrabold); line-height: 1.3; }
.station-panel p { margin: 0; color: var(--j-body); font-size: .94rem; line-height: 1.5; }

.station-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.4vw, 1.2rem); }
.j-services .station:first-of-type .station-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.station-items > div + div {
  padding-inline-start: clamp(.8rem, 1.4vw, 1.2rem);
  border-inline-start: 1px solid var(--j-rule);
}

/* twig rhythm — detail stations (process) sit further from the spine
   on longer, finer twigs; majors connect close. Botanical hierarchy.
   (.story-panel-content is RTL: inline-start = the spine side.) */
@media (min-width: 781px) {
  .j-process .story-panel-content { margin-inline-start: 0; }
  .j-process .station-panel p { max-width: 40rem; }
}

/* the reveal grammar — the root arriving marks progress.
   Narrative copy stays readable at every scroll position; the root
   ignites the number and rule instead of gating information behind
   animation. */
[data-growth-state="upcoming"]:not([data-growth-visited]) .station-panel { transform: none; }
[data-growth-state="current"] .station-panel,
[data-growth-state="passed"] .station-panel { transform: none; }
[data-growth-state="current"] .station-number,
[data-growth-state="passed"] .station-number,
[data-growth-visited] .station-number { color: var(--text-accent); }
.j-section--ink [data-growth-state="current"] .station-number,
.j-section--ink [data-growth-state="passed"] .station-number,
.j-section--ink [data-growth-visited] .station-number { color: var(--color-cta); }
[data-growth-state="current"] .story-panel-content,
[data-growth-state="passed"] .story-panel-content,
[data-growth-visited] .story-panel-content { border-block-start-color: var(--text-accent); }
.j-section--ink [data-growth-state="current"] .story-panel-content,
.j-section--ink [data-growth-state="passed"] .story-panel-content,
.j-section--ink [data-growth-visited] .story-panel-content { border-block-start-color: var(--color-cta); }

/* content choreography (delays only on current — passed catches up instantly) */
.story-panel-content > *:not(.station-items):not(.about-inner),
.station-items > div,
.about-inner > * {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
[data-growth-state="upcoming"]:not([data-growth-visited]) .story-panel-content > *:not(.station-items):not(.about-inner),
[data-growth-state="upcoming"]:not([data-growth-visited]) .station-items > div,
[data-growth-state="upcoming"]:not([data-growth-visited]) .about-inner > * { opacity: 1; transform: none; }
[data-growth-state="current"] .story-panel-content > *:not(.station-items):not(.about-inner),
[data-growth-state="passed"] .story-panel-content > *:not(.station-items):not(.about-inner),
[data-growth-state="current"] .station-items > div,
[data-growth-state="passed"] .station-items > div,
[data-growth-state="current"] .about-inner > *,
[data-growth-state="passed"] .about-inner > * { opacity: 1; transform: none; }
[data-growth-state="current"] .story-panel-content > :nth-child(2):not(.station-items):not(.about-inner),
[data-growth-state="current"] .station-items > div:nth-child(1) { transition-delay: 90ms; }
[data-growth-state="current"] .story-panel-content > :nth-child(3),
[data-growth-state="current"] .station-items > div:nth-child(2),
[data-growth-state="current"] .about-inner > .portrait-card { transition-delay: 170ms; }
[data-growth-state="current"] .story-panel-content > :nth-child(4),
[data-growth-state="current"] .station-items > div:nth-child(3) { transition-delay: 250ms; }
[data-growth-state="current"] .story-panel-content > :nth-child(n+5) { transition-delay: 320ms; }

/* ---------- hero: the canopy above ground ---------- */
.hero { overflow: clip; background: var(--cream); }
.hero-grid {
  position: relative;
  min-height: min(46rem, calc(100vh - var(--header-height)));
  display: grid;
  grid-template-columns: minmax(0, 58%) 1fr;
  direction: ltr;
  align-items: center;
}
.hero-botanical {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  direction: ltr;
  pointer-events: none;
}
.hero-ground {
  position: absolute;
  top: 58%;
  right: calc((100vw - 100%) / -2);
  width: calc(42% + ((100vw - 100%) / 2));
  border-block-start: 1px solid var(--border-subtle);
}
.growth-origin {
  position: absolute;
  top: 58%;
  right: calc(var(--j-side) + var(--j-rail-half));
  width: 1px;
  height: 1px;
}
.growth-static-fallback {
  position: absolute;
  top: 10%;
  bottom: 40%;
  right: calc(var(--j-side) + var(--j-rail-half));
  aspect-ratio: 3 / 4;
  transform: translateX(50%);
  background-image: url("assets/sapling-fallback-v5.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  forced-color-adjust: none;
}
.has-growth-canvas .growth-static-fallback { opacity: 0; visibility: hidden; }

.hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  direction: rtl;
  padding-block: clamp(2.5rem, 5vh, 3.5rem);
  padding-inline-start: clamp(1.5rem, 3vw, 3rem);
}
.hero h1 {
  margin-block-end: clamp(1.5rem, 3vh, 2.2rem);
  font-size: var(--display-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}
.headline-mask { display: block; }
.hero-lead {
  max-width: 36rem;
  margin-block-end: 2rem;
  color: var(--text-secondary);
  font-weight: var(--weight-light);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.7;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .8rem; margin-block-end: 1.5rem; }
.credential-line { margin: 0; color: var(--text-muted); font-size: .88rem; }

/* ---------- about: the station is the person ---------- */
.about-inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 3.5vw, 3.5rem); direction: ltr; }
.about-copy { direction: rtl; }
.about-copy h2 {
  margin-block-end: 1rem;
  font-size: var(--display-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
}
.about-role { margin-block-end: 2rem; color: var(--text-accent); font-weight: var(--weight-extrabold); }
.about-lead { max-width: 40rem; margin-block-end: 1.25rem; font-weight: var(--weight-light); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.6; }
.about-copy > p:not(.about-role):not(.about-lead) { max-width: 40rem; color: var(--text-secondary); }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-block-start: 2rem; }
.principles > div { padding-block-start: 1rem; border-block-start: 2px solid var(--color-cta); }
.principles dt { font-weight: var(--weight-extrabold); }
.principles dd { margin: 0; color: var(--text-muted); font-size: .94rem; line-height: 1.55; }
.portrait-card { width: min(100%, 22rem); margin: 0; direction: rtl; align-self: start; }
.portrait-media { overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--text-primary); background: var(--color-surface-muted); }
.portrait-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; filter: saturate(.82) contrast(1.03); transform: scale(1.06); }
.portrait-card figcaption {
  display: grid;
  gap: .05rem;
  margin-block-start: 1rem;
  padding-inline-start: .9rem;
  border-inline-start: 2px solid var(--text-accent);
  color: var(--text-muted);
  font-size: .9rem;
}
.portrait-card figcaption strong { color: var(--text-primary); font-size: 1rem; }
.j-about .story-panel-content { padding-block-start: clamp(1.25rem, 2vw, 2rem); }

/* ---------- statement: the passage ignites ---------- */
.j-statement { padding-block: var(--j-section-space-compact); border-block-end: 1px solid var(--stone-700); }
.j-statement .growth-marker { align-self: center; }
.statement-line {
  margin: 0;
  max-width: 56rem;
  font-size: var(--display-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: var(--stone-400);
  transition: color var(--dur-reveal) var(--ease-standard);
}
.j-statement[data-growth-state="current"] .statement-line,
.j-statement[data-growth-state="passed"] .statement-line,
.j-statement[data-growth-visited] .statement-line { color: var(--color-cta); }

/* ---------- contact: the journey's end, a new beginning ---------- */
.j-contact .station-panel h2 {
  margin-block-end: 1.25rem;
  font-size: var(--display-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
}
.contact-lede { max-width: 42rem; margin-block-end: 0; color: var(--j-body); font-weight: var(--weight-light); font-size: 1.15rem; line-height: 1.65; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: 2rem 2.75rem; }
.contact-actions .button { white-space: nowrap; }
.j-contact .button--secondary { border-color: var(--color-cta); color: var(--white); }
.j-contact .button--secondary:hover { background: color-mix(in srgb, var(--mint-600) 12%, transparent); }
.j-contact .button--secondary:active { background: color-mix(in srgb, var(--mint-600) 20%, transparent); }

.practical-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--stone-700); }
.practical-details > div { min-width: 0; padding: 1.25rem; }
.practical-details > div:nth-child(2n) { border-inline-start: 1px solid var(--stone-700); }
.practical-details > div:nth-child(n+3) { border-block-start: 1px solid var(--stone-700); }
.practical-details dt { margin-block-end: .4rem; color: var(--color-cta); font-weight: var(--weight-extrabold); }
.practical-details dd { margin: 0; color: var(--stone-300); overflow-wrap: anywhere; }

.referrers {
  margin-block-start: 2rem;
  padding-inline: 1.25rem;
  border: 1px solid var(--stone-700);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--white) 4%, transparent);
}
.referrers summary { padding-block: 1rem; color: var(--color-cta); font-weight: var(--weight-extrabold); cursor: pointer; transition: color var(--dur-fast) var(--ease-standard); }
.referrers summary:hover { color: var(--color-accent-hover); }
.referrers p { max-width: 48rem; padding-block-end: 1.1rem; color: var(--stone-300); }

/* the finale: a new ground line, where the sprout stands */
.contact-finale { position: relative; height: clamp(80px, 9vw, 104px); margin-block-start: clamp(2rem, 3vw, 3rem); }
.contact-finale::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-block-start: 1px solid var(--stone-700);
}
.growth-marker--end {
  position: absolute;
  bottom: 0;
  right: calc(var(--j-side) + var(--j-rail-half));
  width: 1px;
  height: 1px;
}

/* ---------- footer ---------- */
.site-footer { padding-block: 2rem; background: var(--color-surface-inverse); color: var(--stone-300); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-size: .9rem; }
.footer-inner > div { display: grid; }
.footer-inner strong { color: var(--white); }
.footer-inner p { margin: 0; }
.footer-meta { justify-items: end; gap: .5rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1rem; }
.footer-links a { color: var(--stone-300); text-underline-offset: .2em; }
.footer-links a:hover { color: var(--color-cta); }

/* ---------- supporting policy pages ---------- */
.policy-page { min-height: 100vh; background: var(--cream); }
.policy-header { border-block-end: 1px solid var(--border-subtle); }
.policy-header .shell { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; gap: 1.5rem; }
.policy-back { color: var(--text-secondary); font-weight: var(--weight-bold); text-underline-offset: .2em; }
.policy-main { max-width: 52rem; padding-block: clamp(3rem, 8vw, 6rem); }
.policy-main h1 { max-width: 12ch; margin-block-end: 1rem; font-size: var(--display-lg); line-height: .98; }
.policy-updated { margin-block-end: 3rem; color: var(--text-muted); }
.policy-main section + section { margin-block-start: 2.5rem; }
.policy-main h2 { margin-block-end: .75rem; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.policy-main p, .policy-main li { color: var(--text-secondary); line-height: 1.75; }
.policy-main ul { padding-inline-start: 1.25rem; }
.policy-contact { padding: 1.25rem; border-inline-start: 4px solid var(--color-cta); background: var(--color-surface-accent); }

.mobile-contact-bar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
  .j-services .station:first-of-type .station-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-copy { order: -1; }
  .portrait-card { width: min(100%, 20rem); }
}

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .header-actions { margin-inline-start: auto; }
  .mobile-menu { display: block; }
}

@media (max-width: 780px) {
  :root {
    --header-height: 4.5rem;
    --gutter: 1rem;
    --j-rail: 32px;
    --j-rail-half: 16px;
    --j-side: 8px;
    --j-gap: 14px;
    --j-section-space: 3rem;
    --j-section-space-compact: 2.5rem;
    --j-heading-space: 1.75rem;
    --j-station-space: 2rem;
    --display-xl: clamp(2.45rem, 10.5vw, 3.35rem);
    --display-lg: clamp(2.1rem, 9vw, 2.85rem);
    --display-md: clamp(1.55rem, 7vw, 2rem);
  }
  [data-growth-narrative] { --growth-plant-scale: .55; }
  body { padding-block-end: calc(4.25rem + env(safe-area-inset-bottom, 0px)); font-size: 1rem; }
  .brand img { width: 2rem; }
  .brand-copy strong { font-size: 1rem; }
  .brand-copy small { display: none; }
  .button--compact { min-height: 2.65rem; padding: .55rem .8rem; }
  .header-cta-long { display: none; }
  .header-cta-short { display: inline; }

  .hero-grid { grid-template-columns: 1fr; min-height: min(42rem, calc(100svh - var(--header-height))); align-items: end; }
  .growth-origin { top: 200px; }
  .hero-ground { top: 200px; right: calc((100vw - 100%) / -2); width: 260px; }
  .growth-static-fallback { top: 30px; bottom: auto; height: 220px; opacity: .4; transform: translateX(30%); }
  .hero-copy {
    grid-column: 1;
    padding-block: 1.25rem 2rem;
    padding-inline-start: calc(var(--j-side) + var(--j-rail) + var(--j-gap));
    padding-inline-end: 0;
  }
  .hero h1 { margin-block-end: 1.15rem; }
  .hero-lead { max-width: none; font-size: 1rem; line-height: 1.6; margin-block-end: 1.25rem; }
  .hero-actions { display: grid; gap: .55rem; margin-block-end: 1rem; }
  .hero-actions .button { width: 100%; min-height: 3rem; padding: .65rem .7rem; font-size: .95rem; }
  .credential-line { font-size: .72rem; line-height: 1.45; }

  .j-heading p { font-size: .95rem; }

  .station { grid-template-rows: auto auto; }
  .station-number {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    padding: 0 0 .4rem;
    transform: none;
    font-size: .82rem;
  }
  .growth-marker { grid-row: 1; }
  .station-panel { grid-row: 2; }
  .station-items, .j-services .station:first-of-type .station-items { grid-template-columns: 1fr; gap: .75rem; }
  .station-items > div + div { padding-inline-start: 0; padding-block-start: .75rem; border-inline-start: 0; border-block-start: 1px solid var(--j-rule); }
  .station-panel h4 { font-size: .9rem; }
  .station-panel p { font-size: .84rem; line-height: 1.5; }

  .about-inner { grid-template-columns: 1fr; gap: 2rem; }
  .about-lead { font-size: 1.2rem; }
  .principles { grid-template-columns: 1fr; }

  .contact-lede { font-size: 1rem; }
  .contact-actions { display: grid; margin-block: 1.5rem 2rem; }
  .contact-actions > * { width: 100%; justify-content: center; }
  .practical-details { grid-template-columns: 1fr; }
  .practical-details > div:nth-child(2n) { border-inline-start: 0; }
  .practical-details > div + div { border-block-start: 1px solid var(--stone-700); }

  .footer-inner { align-items: start; flex-direction: column; gap: 1rem; }
  .footer-meta { justify-items: start; }
  .footer-links { justify-content: flex-start; }
  .policy-header .shell { min-height: 4.5rem; }
  .policy-main { padding-block: 2.5rem 5rem; }

  .mobile-contact-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    min-height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    border-block-start: 1px solid var(--stone-700);
    background: var(--color-surface-inverse);
  }
  .mobile-contact-bar a { display: grid; place-items: center; color: var(--white); font-weight: var(--weight-extrabold); text-decoration: none; }
  .mobile-contact-bar a:first-child { background: var(--color-cta); color: var(--text-primary); }
}

@media (max-width: 360px) {
  [data-growth-narrative] { --growth-plant-scale: .32; }
  .growth-origin { top: 170px; }
  .hero-ground { top: 170px; }
}

@media (max-width: 780px) and (max-height: 650px) {
  body { padding-block-end: 0; }
  .mobile-contact-bar { display: none; }
}

@media (max-width: 360px) and (max-height: 650px) {
  [data-growth-narrative] { --growth-plant-scale: .18; }
  .growth-origin { right: -2rem; }
}

/* ---------- motion & media integrity ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-growth-narrative] { --growth-wind-strength: 0; --growth-visual-lag: 0; }
  [data-growth-state="upcoming"] .station-panel,
  [data-growth-state="upcoming"] .story-panel-content > *,
  [data-growth-state="upcoming"] .station-items > div,
  [data-growth-state="upcoming"] .about-inner > * { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .growth-canvas { display: none !important; }
  .has-growth-canvas .growth-static-fallback { opacity: 1; visibility: visible; }
  [data-growth-state="upcoming"] .station-panel,
  [data-growth-state="upcoming"] .story-panel-content > *,
  [data-growth-state="upcoming"] .station-items > div,
  [data-growth-state="upcoming"] .about-inner > * { opacity: 1; transform: none; }
}

@media print {
  .site-header, .mobile-menu, .mobile-contact-bar, .hero-botanical,
  .growth-canvas, .growth-marker, .growth-marker--end, .station-number, .contact-finale { display: none !important; }
  .hero-grid, .j-grid { display: block; min-height: 0 !important; }
  .hero-copy { padding: 2rem 0; }
  .j-section { padding-block: 2rem; }
  .station-panel { opacity: 1 !important; transform: none !important; }
  .story-panel-content > *, .station-items > div, .about-inner > * { opacity: 1 !important; transform: none !important; }
  .statement-line { color: var(--stone-800) !important; }
  .j-section--ink, .site-footer { background: none !important; color: var(--stone-800) !important; }
  .j-section--ink .station-panel p, .practical-details dd, .referrers p, .contact-lede { color: var(--stone-600) !important; }
  .practical-details dt, .referrers summary, .footer-inner strong { color: var(--stone-800) !important; }
  .practical-details, .practical-details > div, .referrers, .site-footer { border-color: var(--stone-300) !important; }
}