/* ==========================================================================
   FlexCycle Solutions — Components
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Header / Navigation                                                     */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(10, 36, 38, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo__img {
  height: 46px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-5);
  font-size: var(--fs-200);
}
.nav__list a {
  color: var(--text);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.nav__list a:hover,
.nav__list a[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
}

@media (min-width: 768px) {
  .nav__list { display: flex; }
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
}
.lang-switch button {
  border: 0;
  background: transparent;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--paper);
}

/* Hidden by default (not just at >=768px) so a later unconditional rule can
   never win the cascade tie-break against the media query — that's exactly
   what made this always-visible on desktop before, regardless of width. */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}
@media (max-width: 767px) {
  .nav__toggle { display: inline-flex; }
}
.nav__toggle svg { width: 20px; height: 20px; }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-5);
  border-top: 1px solid var(--border-soft);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  color: var(--text);
  text-decoration: none;
  padding: var(--space-3) 0;
  font-size: var(--fs-400);
  border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 900px) {
  .nav__mobile { display: none !important; }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-200);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--paper);
}
.btn--primary:hover { background: var(--accent-hover); color: var(--paper); }

.btn--outline {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

/* (.section-contrast no longer inverts .btn--outline — it is dark ground now,
   so the button's default light treatment above already applies.) */

.btn--ghost {
  background: transparent;
  color: var(--structure);
  padding-inline: var(--space-2);
}
.btn--ghost:hover { color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-9) var(--space-8);
}
.hero--landing { padding-top: var(--space-7); }
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  align-items: end;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.3fr 1fr; }
}
.hero h1 { margin-bottom: var(--space-5); }
.hero__lede { font-size: var(--fs-400); color: var(--text-soft); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }

/* Products page: the whole hero (heading through the spectrum) is meant to
   read as one glance — a smaller h1, a wider lede (fewer line-wraps) and
   tighter spectrum-row spacing keep it inside a single screen on common
   desktop viewport heights, right up to the first product section. */
.hero--compact { padding-block: var(--space-6) var(--space-4); }
.hero--compact h1 { font-size: var(--fs-700); margin-bottom: var(--space-3); }
.hero--compact .hero__lede { max-width: 75ch; font-size: var(--fs-300); margin-bottom: 0; }
.hero--compact .spectrum { margin-block: var(--space-4); }
.hero--compact .spectrum__rows { gap: 6px; margin-top: var(--space-2); }
.hero--compact .spectrum__row { padding-block: 2px; }
.hero--compact .spectrum__row-track { height: 16px; }
.hero--compact .spectrum__custom { margin-top: var(--space-2); }

.hero__brand {
  display: inline-block;
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}

/* ---- Landing-page hero: single centered column, spectrum below the CTAs ---- */
.hero--landing .hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  max-width: 72rem;
  margin-inline: auto;
}
.hero--landing h1 { margin-bottom: 0; }
.hero--landing .hero__lede { margin-inline: auto; margin-bottom: 0; }
.hero--landing .hero__actions { justify-content: center; margin-top: 0; }
.hero--landing .hero__spectrum-wrap { width: 100%; max-width: 30rem; }
.hero--landing .spectrum__unit { text-align: center; }

/* Every .hero's direct .container(s) need their own stacking context once
   the grain/nebula mounts are added below: a non-positioned static block
   would otherwise paint *behind* their z-index:0 absolutely-positioned
   siblings. Generic (not .hero__grid-specific) so it doesn't force grid
   layout onto pages whose hero is just a plain single-column .container. */
.hero > .container { position: relative; z-index: 1; }

/* ---- Grain field + nebula (all hero sections) ---- */
.hero__grain,
.hero__nebula {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero__nebula { pointer-events: auto; }
/* Let pointer events reach the nebula through the text (otherwise the
   mouse-repel effect dies wherever a heading/paragraph sits on top of it),
   while keeping actual interactive elements clickable. Generic across every
   .hero, not just the landing page's — this was previously scoped to
   .hero--landing only, which is why the other pages' text blocked it. */
.hero > .container { pointer-events: none; }
.hero > .container a,
.hero > .container button,
.hero > .container input,
.hero > .container select,
.hero > .container textarea { pointer-events: auto; }
.hero__grain span {
  position: absolute;
  top: var(--grain-y, 50%);
  left: var(--grain-x, 50%);
  width: var(--grain-size, 3px);
  height: var(--grain-size, 3px);
  border-radius: 50%;
  background: var(--grain-color, var(--copper));
  opacity: var(--grain-opacity, 0.2);
  animation: grain-drift var(--grain-dur, 20s) ease-in-out infinite;
  animation-delay: var(--grain-delay, 0s);
}
@keyframes grain-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(var(--grain-dx1, 10px), var(--grain-dy1, -14px)); }
  50% { transform: translate(var(--grain-dx2, -8px), var(--grain-dy2, 8px)); }
  75% { transform: translate(var(--grain-dx3, 6px), var(--grain-dy3, 12px)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__grain { display: none; }
}

.hero--landing .eyebrow,
.hero--landing h1,
.hero--landing .hero__lede,
.hero--landing .hero__actions,
.hero--landing .spectrum--compact {
  animation: hero-enter 800ms var(--ease-out) both;
}
.hero--landing h1 { animation-delay: 90ms; }
.hero--landing .hero__lede { animation-delay: 180ms; }
.hero--landing .hero__actions { animation-delay: 280ms; }
.hero--landing .spectrum--compact { animation-delay: 380ms; }
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--landing .eyebrow, .hero--landing h1, .hero--landing .hero__lede,
  .hero--landing .hero__actions, .hero--landing .spectrum--compact { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Stat callouts                                                           */
/* ---------------------------------------------------------------------- */
.stats {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-9);
  padding-block: var(--space-7);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-600);
  color: var(--accent);
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--fs-100);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---------------------------------------------------------------------- */
/* Micron spectrum — the signature element                                */
/* ---------------------------------------------------------------------- */
.spectrum { margin-block: var(--space-6); }
.spectrum__scale {
  position: relative;
  height: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-soft);
}
.spectrum__tick {
  position: absolute;
  left: calc(var(--pos) * 1%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.spectrum__tick::after {
  content: '';
  width: 1px;
  height: 6px;
  background: var(--border);
}

/* Scale ruler and product rows share the same left/right spacer widths
   (label / value columns) so tick positions line up with each row's track
   underneath — see .spectrum__scale-spacer(--label|--value). */
.spectrum__scale { display: flex; align-items: flex-end; gap: var(--space-3); }
.spectrum__scale-spacer--label { flex: 0 0 96px; }
.spectrum__scale-spacer--value { flex: 0 0 72px; }
.spectrum__scale-track { position: relative; flex: 1; height: 100%; }

/* Six grades now overlap heavily on the µm axis (e.g. FCP-PM spans nearly
   the whole range) — a single shared track could no longer show them as
   non-overlapping bands, so each grade gets its own row/track instead,
   all aligned to the one scale above. */
.spectrum__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.spectrum__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  padding-block: var(--space-1);
}
.spectrum__row-label {
  flex: 0 0 96px;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--text);
}
.spectrum__row-track {
  position: relative;
  flex: 1;
  height: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.spectrum__row-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--start);
  width: calc(var(--end) - var(--start));
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.spectrum.is-visible .spectrum__row-bar { transform: scaleX(1); }
.spectrum__row--fcp20 .spectrum__row-bar { background: var(--copper); }
.spectrum__row--fcpbj .spectrum__row-bar { background: var(--orange); }
.spectrum__row--fcpam .spectrum__row-bar { background: var(--orange-300); }
.spectrum__row--fcpebm .spectrum__row-bar { background: var(--teal-300); }
.spectrum__row--fcpsi .spectrum__row-bar { background: var(--teal); }
.spectrum__row--fcppm .spectrum__row-bar { background: var(--teal-800); }
.spectrum__row:hover .spectrum__row-bar,
.spectrum__row:focus-visible .spectrum__row-bar { filter: brightness(1.15); }

.spectrum__row-value {
  flex: 0 0 72px;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-soft);
  white-space: nowrap;
}

.spectrum__unit {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-soft);
  text-align: right;
}

.spectrum__label {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-2);
}
.spectrum__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--structure);
}
.spectrum__hint svg { width: 14px; height: 14px; flex: none; animation: hint-nudge 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .spectrum__hint svg { animation: none; } }
.spectrum__custom { margin-top: var(--space-3); font-size: var(--fs-200); color: var(--text-soft); }
.spectrum__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.spectrum__cta:hover { color: var(--accent-hover); }

@keyframes hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------------- */
/* Blur-fade reveal (landing page sections)                                */
/* Elements start blurred/dropped/transparent and settle into place as     */
/* they cross the viewport edge. --reveal-delay staggers siblings sharing  */
/* a [data-blur-group] ancestor, set in main.js by document order — same   */
/* convention as the spectrum bands' --reveal-delay in spectrum.js.        */
/* Declared ahead of .tile/.compare__col so their :hover lift (equal       */
/* specificity, transform) still wins the cascade once revealed.           */
/* ---------------------------------------------------------------------- */
.blur-fade {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.blur-fade.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
/* .tile/.compare__col each declare their own hover `transition` shorthand;
   at equal specificity it would replace blur-fade's list wholesale (losing
   the opacity/filter animation). Higher-specificity merge keeps both. */
.tile.blur-fade,
.compare__col.blur-fade {
  transition: opacity var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------------- */
/* Comparison block (mechanical vs. melt-based)                            */
/* ---------------------------------------------------------------------- */
.compare {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col {
  position: relative;
  overflow: hidden;
  /* Copper matches this card's "conventional" identity — its hover spotlight
     glow is already copper-tinted below. */
  border: 1px solid var(--copper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.compare__col:hover { border-color: var(--accent); transform: translateY(-2px); }
.compare__col::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(199, 111, 61, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.compare__col:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .compare__col::before { transition: none; }
}
.compare__col > * { position: relative; z-index: 1; }

/* "Grain & Patina": conventional stays copper, FlexCycle Process shifts to the teal patina end. */
.compare__col--flexycle {
  border-color: var(--teal-800);
  background: rgba(22, 95, 99, 0.08);
}
.compare__col--flexycle:hover { border-color: var(--teal-800); }
.compare__col--flexycle::before {
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(22, 95, 99, 0.28), transparent 70%);
}
.compare__col h4 { font-size: var(--fs-400); margin-bottom: var(--space-4); }
.compare__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.compare__col li {
  padding-left: var(--space-5);
  position: relative;
  font-size: var(--fs-200);
}
.compare__col li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 1px;
  background: currentColor;
}

/* ---------------------------------------------------------------------- */
/* Application tiles / value cards / team cards                            */
/* ---------------------------------------------------------------------- */
.tile {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(199, 111, 61, 0.30), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.tile:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tile::before { transition: none; }
}
.tile__icon, .tile h3, .tile p { position: relative; z-index: 1; }
.tile__icon { width: 32px; height: 32px; color: var(--structure); margin-bottom: var(--space-4); }
.tile h3 { font-size: var(--fs-500); margin-bottom: var(--space-3); overflow-wrap: break-word; }
.tile p { font-size: var(--fs-200); color: var(--text-soft); margin-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* Application gallery (landing page) — hover-expand strip + click-to-open  */
/* lightbox, one item per grade. Adapted from a pasted React/Framer-Motion  */
/* "ExpandableGallery" prompt (initGallery in main.js does the flex-grow    */
/* hover/dim logic and modal open/close/prev/next the JS there handled).   */
/* Each item's morphology glyph stands in for a real application photo     */
/* until one's supplied — swap .gallery__image's contents for an <img>,    */
/* it's already sized to fill its parent like the app-card version was.    */
/* ---------------------------------------------------------------------- */
.gallery__strip {
  display: flex;
  gap: var(--space-2);
  height: 22rem;
}
.gallery__item {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: var(--bg-alt);
  transition: flex-grow var(--dur-slow) var(--ease-out), flex-basis var(--dur-slow) var(--ease-out);
}
.gallery__item.is-hovered { flex: 2.4; }
.gallery__item.is-dimmed { flex: 0.6; }
.gallery__image { position: absolute; inset: 0; }
.gallery__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 36, 38, 0.88) 0%, rgba(10, 36, 38, 0.25) 45%, transparent 75%);
  transition: background-color var(--dur-base) var(--ease-out);
}
.gallery__item.is-dimmed .gallery__scrim { background-color: rgba(10, 36, 38, 0.45); }
.gallery__caption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-3);
  font-size: var(--fs-200);
  color: var(--text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .gallery__strip { flex-direction: column; height: auto; }
  .gallery__item { aspect-ratio: 4 / 3; flex: none !important; }
  .gallery__caption { white-space: normal; }
}

.gallery__modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 36, 38, 0.94);
  padding: var(--space-6);
}
.gallery__modal[hidden] { display: none; }
.gallery__modal-image {
  position: relative;
  max-width: min(100%, 60rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
/* Natural aspect ratio, capped to the viewport so tall photos still fit. */
.gallery__modal-image > img { position: static; display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; }
.gallery__modal-caption {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 32rem;
  text-align: center;
  color: var(--text);
  font-size: var(--fs-300);
  padding-inline: var(--space-4);
}
.gallery__modal-counter {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-soft);
}
.gallery__modal-close,
.gallery__modal-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  padding: var(--space-2);
}
.gallery__modal-close:hover,
.gallery__modal-nav:hover { color: var(--accent); }
.gallery__modal-close { top: var(--space-4); right: var(--space-4); }
.gallery__modal-close svg { width: 26px; height: 26px; }
.gallery__modal-nav svg { width: 34px; height: 34px; }
.gallery__modal-nav--prev { left: var(--space-4); }
.gallery__modal-nav--next { right: var(--space-4); }

/* ---------------------------------------------------------------------- */
/* Team showcase (company page) — staggered photo cascade + linked list.   */
/* Hovering either a photo or a name row highlights that person in both;   */
/* main.js links them via matching data-member values (see initTeamShowcase). */
/* ---------------------------------------------------------------------- */
.team-showcase {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-8);
}
.team-showcase__photos { display: flex; gap: var(--space-5); flex-shrink: 0; }
.team-showcase__col { display: flex; flex-direction: column; gap: var(--space-5); }
/* 2x2 matrix with equal spacing within each column; the TK/PN column shifts
   up as a whole unit, giving an irregular offset rather than an aligned grid. */
.team-showcase__col--2 { margin-top: -32px; }

.team-showcase__photo {
  width: 200px;
  height: 215px;
  border-radius: var(--radius-lg);
  background: var(--gradient-patina);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  filter: grayscale(1) brightness(0.75);
  transition: filter var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.team-showcase__photo::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-600);
  color: rgba(251, 250, 248, 0.92);
  font-weight: 700;
}
.team-showcase__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.team-showcase__photo.has-photo::after { content: none; }
.team-showcase__photo.is-active { filter: grayscale(0) brightness(1); }
.team-showcase__photo.is-dimmed { opacity: 0.55; }

.team-showcase__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  flex: 1;
  min-width: 16rem;
}
.team-showcase__row {
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out);
}
.team-showcase__row.is-dimmed { opacity: 0.5; }
.team-showcase__pill {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: var(--radius-sm);
  background: var(--structure);
  opacity: 0.35;
  vertical-align: middle;
  margin-right: var(--space-3);
  transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.team-showcase__row.is-active .team-showcase__pill { width: 22px; opacity: 1; background: var(--accent); }
.team-showcase__name {
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--text-soft);
  transition: color var(--dur-base) var(--ease-out);
}
.team-showcase__row.is-active .team-showcase__name { color: var(--text); }
.team-showcase__socials {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  vertical-align: middle;
}
.team-showcase__row.is-active .team-showcase__socials { opacity: 1; transform: none; }
/* Touch screens have no hover to reveal them, so keep mail/LinkedIn visible. */
@media (hover: none) {
  .team-showcase__socials { opacity: 1; transform: none; }
}
.team-showcase__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.team-showcase__social:hover { color: var(--text); background: rgba(251, 250, 248, 0.12); }
.team-showcase__social svg { width: 18px; height: 18px; }
.team-showcase__role {
  display: block;
  margin: var(--space-2) 0 0 calc(16px + var(--space-3));
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.team-showcase__title {
  display: block;
  margin-left: calc(16px + var(--space-3));
  color: var(--text-soft);
  font-size: var(--fs-200);
  margin-top: var(--space-1);
}
@media (max-width: 767px) {
  .team-showcase__photos { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Morphology glyphs (generative, factual: derived from real spec values)  */
/* Always used as a tilt-card's full-bleed background (see below) — sized   */
/* to fill its parent rather than standing alone as a bordered square.      */
/* ---------------------------------------------------------------------- */
.morph-glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-alt);
}
.morph-glyph circle, .morph-glyph polygon, .morph-glyph rect { fill: var(--structure); }
.morph-glyph--fcp20 circle { fill: var(--copper); }
.morph-glyph--fcpbj circle { fill: var(--orange); }
.morph-glyph--fcpam circle { fill: var(--orange-300); }
.morph-glyph--fcpebm circle { fill: var(--teal-300); }
.morph-glyph--fcpsi circle, .morph-glyph--fcpsi rect { fill: var(--teal); }
.morph-glyph--fcppm polygon { fill: var(--teal-800); }

/* ---------------------------------------------------------------------- */
/* Image film (home + company). Poster with one large play control; native */
/* controls appear once the film runs (initFilm in main.js).              */
/* ---------------------------------------------------------------------- */
.film-section { padding-top: var(--space-7); }
.film {
  position: relative;
  margin: 0;
  aspect-ratio: 24 / 11;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark-900);
  border: 1px solid var(--border-soft);
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.6);
}
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(10, 36, 38, 0.05) 30%, rgba(10, 36, 38, 0.6) 100%);
}
.film__play[hidden] { display: none; }
.film__play-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.film__play-icon svg { width: 32px; height: 32px; margin-left: 4px; }
.film__play:hover .film__play-icon,
.film__play:focus-visible .film__play-icon { transform: scale(1.06); background: var(--accent-hover); }
.film__play:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; border-radius: var(--radius-lg); }
.film__play-label { font-family: var(--font-display); font-size: var(--fs-400); font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.film__play-time {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  padding: 2px var(--space-3);
  border-radius: 999px;
  background: rgba(10, 36, 38, 0.6);
}
@media (max-width: 640px) {
  /* The 24:11 frame is only ~160px tall on phones: smaller control, no duration pill. */
  .film__play { gap: var(--space-2); }
  .film__play-icon { width: 56px; height: 56px; }
  .film__play-icon svg { width: 22px; height: 22px; margin-left: 3px; }
  .film__play-label { font-size: var(--fs-200); }
  .film__play-time { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Product tilt card — mouse-reactive 3D tilt, morphology glyph as the      */
/* full-bleed backdrop, headline particle-size spec as the standout tag.    */
/* Adapted from a pasted React/Tailwind "InteractiveProductCard" prompt:    */
/* same 3D-tilt-on-mousemove interaction and glass-header/tag/dots layout,  */
/* rebuilt in plain CSS/JS (initTiltCards in main.js) with the product's    */
/* own morphology-glyph art instead of stock photography, and the dots      */
/* repurposed to mark this grade's position among the four (Si→AM→PM→G).   */
/* ---------------------------------------------------------------------- */
.tilt-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: transform 400ms var(--ease-out);
}
.tilt-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tilt-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 36, 38, 0.92) 0%, rgba(10, 36, 38, 0.4) 55%, transparent 100%);
}
.tilt-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}
.tilt-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(251, 250, 248, 0.16);
  background: rgba(251, 250, 248, 0.07);
  backdrop-filter: blur(10px);
}
.tilt-card__title { font-size: var(--fs-500); color: var(--text); margin: 0; }
.tilt-card__tagline { font-size: var(--fs-100); color: rgba(251, 250, 248, 0.72); margin: var(--space-1) 0 0; }
.tilt-card__mark { width: 26px; height: auto; flex-shrink: 0; }
.tilt-card__tag {
  align-self: flex-start;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: rgba(10, 36, 38, 0.6);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--text);
}
.tilt-card__dots { margin-top: auto; display: flex; justify-content: center; gap: var(--space-2); padding-top: var(--space-4); }
.tilt-card__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(251, 250, 248, 0.3); }
.tilt-card__dots span.is-active { background: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .tilt-card { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Spec table (datasheet)                                                  */
/* ---------------------------------------------------------------------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-200);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.spec-table th {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-soft);
  text-transform: uppercase;
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  width: 45%;
}
.spec-table td { font-family: var(--font-mono); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.product-section {
  padding-block: var(--space-9);
  position: relative;
}
/* Divider between grades. A full-bleed 1px border cuts the page into stacked
   panels; this is the same rule with both ends dissolved, so it separates the
   grades without drawing a hard edge across the layout. */
.product-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-soft) 18%,
    var(--border-soft) 82%,
    transparent 100%
  );
}
.product-section__grid {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 900px) {
  .product-section__grid { grid-template-columns: 1fr 1.1fr; align-items: start; }
  /* Alternates the image/card side per grade (Si/PM text-left, AM/G text-right)
     via `order` rather than swapping markup, so reading/DOM order stays the
     same regardless of which side the card visually lands on. */
  .product-section--reverse .product-section__grid { grid-template-columns: 1.1fr 1fr; }
  .product-section--reverse .product-section__grid > :first-child { order: 2; }
  .product-section--reverse .product-section__grid > :last-child { order: 1; }
}
.product-section__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--structure);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                    */
/* ---------------------------------------------------------------------- */
/* Contact page: general-inquiry and quote forms sit side by side (contact.html
   wraps both in .grid.grid-2) — a vertical rule replaces the old alternating
   full-width section backgrounds as the visual separator between them. */
@media (min-width: 768px) {
  .contact-forms__quote { padding-left: var(--space-8); border-left: 1px solid var(--border-soft); }
}
.form { display: grid; gap: var(--space-5); max-width: 40rem; }
.form__row { display: grid; gap: var(--space-2); }
.form__row label {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
}
.form__row input,
.form__row textarea,
.form__row select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-300);
}
.form__row input:focus,
.form__row textarea:focus,
.form__row select:focus {
  border-color: var(--accent);
}
.form__row textarea { min-height: 8rem; resize: vertical; }
.form__hint { font-size: var(--fs-100); color: var(--text-soft); }
.form__error {
  font-size: var(--fs-100);
  color: var(--copper-hover);
  display: none;
}
.form__row.has-error input,
.form__row.has-error textarea { border-color: var(--copper-hover); }
.form__row.has-error .form__error { display: block; }
.form__status {
  font-size: var(--fs-200);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status--success,
.form__status--mailto { background: rgba(94, 162, 152, 0.18); color: var(--paper); }
.form__status--error { background: rgba(199, 111, 61, 0.18); color: var(--paper); }
.form__row input[type="file"] { padding: var(--space-2) var(--space-3); font-size: var(--fs-200); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-deep);
  color: var(--text-soft);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer .logo__img { height: 72px; }
.site-footer a:hover { color: var(--orange-300); }
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__grid h4 {
  color: var(--paper);
  font-size: var(--fs-200);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.site-footer__grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); font-size: var(--fs-200); }
.site-footer__bottom {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-100);
}
.site-footer__bottom ul { list-style: none; display: flex; gap: var(--space-5); padding: 0; margin: 0; }
/* Funding logos: light strip (the logos are made for white), scrolling
   left in a seamless loop. The track holds two identical groups and moves by
   exactly one group width (-50%). */
.funding-marquee__title {
  margin: var(--space-6) 0 var(--space-3);
  max-width: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-soft);
}
.funding-marquee {
  margin-top: 0;
  border-radius: var(--radius-md);
  background: #fff; /* pure white: several logos ship on a white ground */
  overflow: hidden;
}
.funding-marquee.is-running {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.funding-marquee__track { display: flex; width: max-content; }
.funding-marquee__group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-4) var(--space-6);
  list-style: none;
}
.funding-marquee__group img { display: block; height: 60px; width: auto; }
.funding-marquee__group .funding-marquee__logo--exist { height: 64px; }
.funding-marquee__group .funding-marquee__logo--saxeed { height: 64px; }
.funding-marquee__group .funding-marquee__logo--tubaf { height: 56px; }
.funding-marquee__group .funding-marquee__logo--bmwe { height: 104px; }
.funding-marquee__group .funding-marquee__logo--iart { height: 52px; }
.funding-marquee.is-running .funding-marquee__group {
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding: var(--space-4) var(--space-8) var(--space-4) 0; /* trailing gap keeps the loop seam even */
}
.funding-marquee.is-running .funding-marquee__track {
  animation: funding-scroll var(--marquee-duration, 30s) linear infinite;
}
.funding-marquee.is-running:hover .funding-marquee__track { animation-play-state: paused; }
@keyframes funding-scroll { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .funding-marquee__group { gap: var(--space-6); }
  .funding-marquee__group img { height: 48px; }
  .funding-marquee__group .funding-marquee__logo--exist { height: 50px; }
  .funding-marquee__group .funding-marquee__logo--saxeed { height: 50px; }
  .funding-marquee__group .funding-marquee__logo--tubaf { height: 44px; }
  .funding-marquee__group .funding-marquee__logo--bmwe { height: 80px; }
  .funding-marquee__group .funding-marquee__logo--iart { height: 42px; }
  .funding-marquee.is-running .funding-marquee__group { padding-right: var(--space-6); }
}

/* ---------------------------------------------------------------------- */
/* Print button                                                             */
/* ---------------------------------------------------------------------- */
.print-btn svg { width: 16px; height: 16px; }
/* Datasheet buttons are hidden for now (markup and print logic stay in place).
   Delete this rule to show them again. */
.btn.print-btn { display: none; }

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll (generic, respects reduced-motion via base.css)        */
/* ---------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------- */
/* Content sections from the EXIST application: energy chart (home),      */
/* milestones timeline and research network (company).                   */
/* Melt routes stay copper, FlexCycle shifts to patina, as in .compare.    */
/* ---------------------------------------------------------------------- */
/* Shared small type for chart captions and source notes. */
.energy__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}
.energy__note {
  margin-top: var(--space-4);
  font-size: var(--fs-100);
  color: var(--text-soft);
  max-width: 80ch;
}

/* ---- Energy chart (horizontal bars, linear scale) --------------------- */
.energy { margin: var(--space-7) 0 0; }
.energy__scale, .energy__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.energy__label, .energy__spacer { flex: 0 0 15rem; }
.energy__value, .energy__spacer--value { flex: 0 0 8.5rem; }
.energy__ticks {
  position: relative;
  flex: 1;
  height: 1.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
}
.energy__ticks span {
  position: absolute;
  left: calc(var(--pos) * 1%);
  bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.energy__ticks span:first-child { transform: none; }
.energy__ticks span:last-child { transform: translateX(-100%); }
.energy__rows {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.energy__label { font-size: var(--fs-200); color: var(--text-soft); }
.energy__row--flexycle .energy__label { color: var(--text); font-weight: 600; }
.energy__track {
  position: relative;
  flex: 1;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, var(--border-soft) 0 1px, transparent 1px 20%);
}
.energy__bar, .energy__ext {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--end);
  min-width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--copper);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
}
.energy__ext {
  left: var(--start);
  width: calc(var(--end) - var(--start));
  background: rgba(199, 111, 61, 0.38);
  transition-delay: 300ms;
}
.energy__ext--overflow {
  border-radius: 0;
  background: linear-gradient(90deg, rgba(199, 111, 61, 0.38), rgba(199, 111, 61, 0.1));
}
.energy__row--flexycle .energy__bar { background: var(--teal); }
.energy.is-visible .energy__bar,
.energy.is-visible .energy__ext { transform: scaleX(1); }
.energy__value {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .energy__scale { display: none; }
  .energy__row { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .energy__label { flex: 1 0 60%; }
  .energy__value { flex: 0 0 auto; }
  .energy__track { flex: 0 0 100%; order: 3; }
}

/* ---- Two-column split (copy + figure) --------------------------------- */
.split { display: grid; gap: var(--space-7); }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1.25fr; align-items: start; gap: var(--space-8); }
  .split--even { grid-template-columns: 1fr 1fr; }
}
/* ---- Milestones timeline (company page) -------------------------------- */
.timeline {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--space-6);
  max-width: 56rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 11.25rem;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--copper), var(--teal-300) 70%, transparent);
}
.timeline__item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-7);
  position: relative;
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(11.25rem - 4px);
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline__item--next::before { background: var(--bg); border: 2px solid var(--teal); }
.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--accent);
  text-align: right;
  padding-top: 2px;
}
.timeline__item--next .timeline__date { color: var(--structure); }
.timeline h3 { font-size: var(--fs-400); margin-bottom: var(--space-2); }
.timeline p { font-size: var(--fs-200); color: var(--text-soft); margin: 0; }
@media (max-width: 640px) {
  .timeline::before { left: 4px; }
  .timeline__item { grid-template-columns: 1fr; gap: var(--space-1); padding-left: var(--space-6); }
  .timeline__item::before { left: 0; }
  .timeline__date { text-align: left; }
}

.people { list-style: none; margin: 0; padding: 0; }
.people li {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.people li:first-child { border-top: 1px solid var(--border-soft); }
.people__name { font-family: var(--font-display); font-size: var(--fs-400); font-weight: 600; color: var(--text); }
.people__role { font-size: var(--fs-200); color: var(--text-soft); }
.people--wide { max-width: 56rem; }
@media (min-width: 768px) {
  .people--wide li { grid-template-columns: 22rem 1fr; align-items: baseline; gap: var(--space-5); }
}

/* ---------------------------------------------------------------------- */
/* Image placeholders. Each marks where a real photo goes; to use one,    */
/* replace .img-ph__frame with <img src="assets/img/..." alt="...">.      */
/* --ratio is set inline per slot, so the photo inherits the same crop.   */
/* ---------------------------------------------------------------------- */
.img-ph { margin: 0; }
.img-ph__frame,
.img-ph > img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  border-radius: var(--radius-lg);
}
.img-ph > img { height: auto; object-fit: cover; }
.img-ph__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  border: 1px dashed var(--border);
  background:
    radial-gradient(circle at 30% 20%, rgba(199, 111, 61, 0.10), transparent 60%),
    radial-gradient(circle at 75% 85%, rgba(94, 162, 152, 0.10), transparent 60%),
    var(--bg-raised);
}
.img-ph__frame svg { width: 32px; height: 32px; color: var(--structure); }
.img-ph__label { font-size: var(--fs-200); color: var(--text); max-width: 34ch; }
.img-ph__file { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--text-soft); }
.img-ph__caption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-soft);
}
.img-ph__caption > span:first-child { color: var(--accent); }
/* Portrait photo beside text: narrower than its column so it does not
   tower over the copy next to it. */
.img-ph--portrait { max-width: 16rem; width: 100%; justify-self: center; }
@media (min-width: 960px) {
  /* Text takes the room; the photo keeps a fixed, modest width. */
  .split--media { grid-template-columns: 1fr 18rem; }
  .img-ph--portrait { max-width: 18rem; justify-self: end; }
}
.img-pair { margin-top: var(--space-7); }
.img-band { padding-block: 0; }
h2 + .img-ph { margin-top: var(--space-6); }
.team-showcase + .img-ph { margin-top: var(--space-8); }
.timeline + .img-ph { margin-top: var(--space-8); }

/* ---------------------------------------------------------------------- */
/* Legal pages (imprint, privacy)                                          */
/* ---------------------------------------------------------------------- */
.legal { max-width: 68ch; }
.legal h1 { font-size: var(--fs-800); }
.legal__heading { font-size: var(--fs-500); margin: var(--space-7) 0 var(--space-3); }
.legal p { font-size: var(--fs-300); color: var(--text-soft); max-width: none; }
.legal .legal__intro {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  color: var(--text);
}
.legal .legal__updated { margin-top: var(--space-7); font-family: var(--font-mono); font-size: var(--fs-100); }