/* ==========================================================================
   Page-level compositions
   ========================================================================== */

.page { padding-top: var(--header-h); }

/* ==========================================================================
   Home hero — full-bleed photograph under a deep green wash
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(94vh, 940px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--g-900);          /* holds the colour before the photo paints */
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%;
  /* Framed on the building's name board, which sits at 38-58% across the
     photograph. On a phone the hero is tall and narrow and `cover` shows only
     about a third of the width, so the horizontal figure decides whether the
     company name survives the crop — at 58% the T of "TÂN" was cut off.
     Biased up so the empty forecourt goes rather than the roofline. */
  object-fit: cover; object-position: 47% 46%;
  /* a very slow push in — presence, not movement you notice */
  animation: heroDrift 32s var(--ease-in-out) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13) translate3d(-1%, -1%, 0); }
}

/* Two passes: a directional wash for type contrast on the left, then an even
   tint so the whole frame reads as one green field rather than a photo. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(7, 62, 35, .93) 0%,
      rgba(7, 62, 35, .80) 38%,
      rgba(11, 93, 52, .58) 72%,
      rgba(17, 122, 62, .48) 100%),
    linear-gradient(to bottom,
      rgba(7, 62, 35, .34) 0%,
      rgba(7, 62, 35, 0) 32%,
      rgba(7, 62, 35, 0) 62%,
      rgba(7, 62, 35, .40) 100%);
}

.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(6rem, 4rem + 8vw, 10rem) clamp(7rem, 5rem + 8vw, 11rem);
}
.hero__copy { max-width: 54rem; }

.hero .eyebrow {
  color: rgba(255, 255, 255, .82);
  letter-spacing: .22em;
  font-weight: 500;
}
.hero .eyebrow::before { background: rgba(255, 255, 255, .55); width: 32px; }

.hero h1 {
  color: #fff;
  /* a touch smaller than --fs-display so each written line holds without
     re-wrapping inside the copy column */
  font-size: clamp(1.78rem, 1.10rem + 2.95vw, 4.05rem);
  font-weight: 700;                  /* lighter than the 800 elsewhere: calmer */
  letter-spacing: -.024em;
  line-height: 1.1;
}
.hero__lead {
  margin-top: var(--s-5);
  max-width: 46ch;
  color: rgba(255, 255, 255, .84);
  font-weight: 300;
}

.hero__actions {
  margin-top: var(--s-8);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-5) var(--s-7);
}

/* Secondary action reads as a quiet link, not a competing button */
.hero__link {
  display: inline-flex; align-items: center; gap: .55rem;
  padding-bottom: .55rem;
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  transition: border-color var(--t-base) var(--ease);
}
.hero__link:hover { color: #fff; border-bottom-color: #fff; }
.hero__link svg {
  width: 16px; height: 16px;
  transition: transform var(--t-base) var(--ease);
}
.hero__link:hover svg { transform: translateX(4px); }

/* Scroll cue, centred on the lower edge */
.hero__cue {
  position: absolute; z-index: 2;
  left: 50%; bottom: clamp(1.75rem, 1rem + 2vw, 3rem);
  transform: translateX(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(2px);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.hero__cue:hover {
  background: rgba(255, 255, 255, .18);
  border-color: #fff;
  transform: translateX(-50%) translateY(3px);
}
.hero__cue svg { width: 18px; height: 18px; animation: cueNudge 2.4s var(--ease-in-out) infinite; }
@keyframes cueNudge {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; transform: scale(1.04); }
  .hero__cue svg { animation: none; }
}

/* ---- inner-page hero --------------------------------------------------- */
.phero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background: var(--warm);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.phero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 460px at 88% 10%, rgba(22,149,79,.09), transparent 60%);
  pointer-events: none;
}
.phero__inner { position: relative; z-index: 1; display: grid; gap: var(--s-6); }
.phero h1 { max-width: 20ch; }
.phero .lead { max-width: 58ch; }
.phero--deep { background: var(--g-800); border-bottom: 0; }
.phero--deep::before { background: radial-gradient(760px 460px at 88% 10%, rgba(255,255,255,.10), transparent 60%); }
.phero--deep h1 { color: #fff; }
.phero--deep .lead { color: var(--on-deep-muted); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--g-600); }
.crumbs svg { width: 13px; height: 13px; opacity: .55; }
.phero--deep .crumbs, .phero--deep .crumbs a { color: var(--on-deep-muted); }

/* ==========================================================================
   Home — capability band
   ========================================================================== */
.capband { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.capband__cell { background: #fff; padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); display: grid; gap: .5rem; }

/* bento of product groups */
.bento { display: grid; gap: clamp(1rem, .7rem + 1.1vw, 1.6rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bento > *:nth-child(6) { grid-column: span 2; }
.bento__cell {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: #fff; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.15rem, .9rem + .9vw, 1.75rem);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.bento > *:nth-child(1).bento__cell { min-height: 420px; }
.bento__cell:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--g-100); }
.bento__bg { position: absolute; inset: 0; z-index: 0; }
.bento__bg svg, .bento__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.bento__cell:hover .bento__bg svg, .bento__cell:hover .bento__bg img { transform: scale(1.05); }
.bento__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(7,62,35,.90) 0%, rgba(7,62,35,.55) 38%, rgba(7,62,35,.12) 75%, transparent 100%); }
.bento__txt { position: relative; z-index: 2; color: #fff; display: grid; gap: .35rem; }
.bento__txt h3 { color: #fff; font-size: var(--fs-h4); }
.bento__txt p { font-size: var(--fs-xs); color: rgba(255,255,255,.82); font-weight: 300; margin: 0; }
.bento > *:nth-child(1) .bento__txt h3 { font-size: var(--fs-h3); }

/* ==========================================================================
   Products catalogue
   ========================================================================== */
.catalog { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

/* Sentinel sits directly above the bar; when it leaves the viewport the bar
   has pinned, and JS flips .is-pinned. */
.filters__sentinel { height: 1px; margin-bottom: -1px; }

.filters {
  position: sticky;
  top: var(--header-h-sm);          /* the header is always condensed by the time this pins */
  z-index: 20;
  display: grid; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--bg);            /* opaque: nothing scrolls through it */
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Geometry snaps; only the paint properties ease. Transitioning margin and
     padding here reflowed the bar at the moment it pinned. */
  transition: border-radius var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

/* Pinned: square off against the header, span the gutters, and cast a shadow
   over the products passing beneath. */
.filters.is-pinned {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: .7rem;             /* slimmer rail so it eats less of the view */
  gap: .55rem;
  border-radius: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  box-shadow: 0 10px 24px -14px rgba(11, 93, 52, .28);
}
.filters__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.filters__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-4); margin-right: .25rem; }

.chip {
  padding: .5rem 1rem;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--g-300); color: var(--g-700); background: var(--g-050); }
.chip[aria-pressed="true"] { background: var(--g-600); border-color: var(--g-600); color: #fff; font-weight: 600; }
.chip__n { opacity: .6; margin-left: .35rem; font-variant-numeric: tabular-nums; }

.searchbox { position: relative; flex: 1; min-width: 210px; }
.searchbox svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; }
.searchbox .input { padding-left: 2.5rem; }

.catalog__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--text-muted); }
.catalog__grid { display: grid; gap: clamp(1.15rem, .8rem + 1.2vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==========================================================================
   Product detail
   ========================================================================== */
.pd { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.pd__gallery { display: grid; gap: var(--s-3); position: sticky; top: calc(var(--header-h-sm) + 1.5rem); }
.pd__main { border-radius: var(--r-lg); overflow: hidden; background: #fff; aspect-ratio: 4 / 3; cursor: zoom-in; }
.pd__main img, .pd__main svg { width: 100%; height: 100%; object-fit: contain; }
.pd__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.pd__thumb {
  border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1;
  border: 2px solid transparent; background: #fff;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pd__thumb:hover { transform: translateY(-2px); }
.pd__thumb[aria-current="true"] { border-color: var(--g-600); }
.pd__thumb img, .pd__thumb svg { width: 100%; height: 100%; object-fit: contain; }

.pd__head { display: grid; gap: var(--s-4); }
.pd__title { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
.pd__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.pd__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

.pd__section { margin-top: var(--s-8); }
.pd__section h2 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }

/* ==========================================================================
   Manufacturing & gallery
   ========================================================================== */
.gallery { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery__item { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--g-050); cursor: zoom-in; }
.gallery__item:nth-child(1), .gallery__item:nth-child(6) { grid-column: span 2; aspect-ratio: 16/9; }
.gallery__item img, .gallery__item svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.gallery__item:hover img, .gallery__item:hover svg { transform: scale(1.05); }
.gallery__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1.15rem 1rem;
  background: linear-gradient(to top, rgba(7,62,35,.88), transparent);
  color: #fff; font-size: var(--fs-xs);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

/* QC columns */
.qc-cols { display: grid; gap: clamp(1.25rem, .9rem + 1.4vw, 2rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-col { display: grid; gap: var(--s-4); align-content: start; padding: clamp(1.35rem, 1rem + 1.2vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.qc-col__n { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--g-100); }
.qc-col h3 { font-size: var(--fs-h4); }

/* traceability chain */
.chain { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.chain__node {
  flex: 1 1 165px;
  padding: 1rem 1.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--ink-2);
  display: flex; align-items: center; gap: .65rem;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.chain__node:hover { border-color: var(--g-300); transform: translateY(-3px); }
.chain__node .n {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--g-050); color: var(--g-600);
  font-weight: 700; font-size: .6875rem;
}

/* ==========================================================================
   Responsibility
   ========================================================================== */
.pillars { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.pillar {
  display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar__head { display: grid; gap: var(--s-4); position: sticky; top: calc(var(--header-h-sm) + 2rem); }
.pillar__body { display: grid; gap: var(--s-5); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
.contact-card { display: grid; gap: var(--s-5); position: sticky; top: calc(var(--header-h-sm) + 1.5rem); }

.cline { display: flex; gap: var(--s-4); align-items: flex-start; padding-block: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.cline:last-child { border-bottom: 0; }
.cline__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--g-050); color: var(--g-600); }
.cline__icon svg { width: 18px; height: 18px; }
.cline__body { display: grid; gap: .18rem; min-width: 0; }
.cline__k { font-size: var(--fs-xs); color: var(--ink-4); letter-spacing: .05em; text-transform: uppercase; }
.cline__v { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); word-break: break-word; }
.cline__v a { color: var(--ink); }
.cline__v a:hover { color: var(--g-600); }

.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--warm); min-height: 340px; display: grid; place-items: center; }
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta {
  position: relative; overflow: hidden;
  background: var(--g-800); color: var(--on-deep);
  border-radius: var(--r-xl);
  /* 36px of padding each side plus the page gutter was taking 38% of a 320px
     screen; scale it from a smaller floor so the copy keeps its width. */
  padding: clamp(1.35rem, .85rem + 3.4vw, 4.5rem);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(620px 420px at 88% 12%, rgba(22,149,79,.42), transparent 62%),
    radial-gradient(520px 380px at 6% 96%, rgba(199,200,138,.20), transparent 60%);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.cta h2 { color: #fff; }
.cta p { color: var(--on-deep-muted); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-end; }

/* ==========================================================================
   Simple centred pages (404, thank you, legal)
   ========================================================================== */
.mini { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--section-y); }
.mini__inner { display: grid; gap: var(--s-5); justify-items: center; max-width: 54ch; }
.mini__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 2rem + 9vw, 8rem); line-height: 1; color: var(--g-100); letter-spacing: var(--tr-display); }

.prose { max-width: var(--container-text); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.75; }
.prose ul { display: grid; gap: .6rem; margin-bottom: 1.15em; padding-left: 1.15rem; }
.prose li { list-style: disc; }

/* Breadcrumb rail — used where the page's h1 is rendered by an island below */
.crumbrail {
  padding-block: clamp(1rem, .7rem + 1vw, 1.6rem);
  background: var(--warm);
  border-bottom: 1px solid var(--line-soft);
}

/* Pending marker sitting on a photo scrim needs light-on-dark treatment */
.gallery__cap .badge--pending,
.frame__caption .badge--pending,
.collage__item figcaption .badge--pending,
.strip__item figcaption .badge--pending,
.stack__cap .badge--pending {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}

/* Our story reads across the full measure in columns, rather than sitting in
   one half of a split and leaving the other half empty. */
.story-cols {
  max-width: none;
  columns: 2;
  column-gap: clamp(2rem, 1.4rem + 2.4vw, 4rem);
  orphans: 3; widows: 3;
}
.story-cols p { break-inside: avoid; margin-bottom: 1.15em; }
.story-cols p:last-child { margin-bottom: 0; }

@media (max-width: 860px) { .story-cols { columns: 1; } }

/* ==========================================================================
   Production flow — one continuous serpentine, drawn on scroll
   --flow-p (0–1) comes from js/animations.js and spans the whole section, so
   the line finishes only as the section finishes passing the viewport.
   ========================================================================== */
.flow {
  --flow-p: 0;
  --pad: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);   /* node to line */
  display: grid;
  /* the panel gives ground back to the track on narrower desktops, where four
     columns are the tighter constraint */
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(232px, 19vw, 320px));
  gap: clamp(1.25rem, .8rem + 2vw, 3rem);
  align-items: start;
}

.flow__stage { position: relative; display: grid; gap: calc(var(--pad) * 2); }

/* the line itself */
.flow__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.flow__path, .flow__arrowhead {
  stroke: var(--g-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow__arrowhead { opacity: 0; transition: opacity .4s var(--ease); }
.flow.is-complete .flow__arrowhead { opacity: 1; }

.flow__row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(.75rem, .4rem + 1.2vw, 1.5rem);
  align-items: end;
}
.flow__lane--bottom .flow__row { align-items: start; }
/* the return lane is shorter, so it hangs from the right-hand end */
.flow__row--end > :first-child { grid-column-start: calc(var(--cols) - var(--n, 0) + 1); }

.flow__step {
  position: relative;
  display: grid; gap: .4rem; justify-items: start;
  opacity: .38;
  transition: opacity .7s var(--ease);
}
.flow__lane--top .flow__step    { padding-bottom: var(--pad); }
.flow__lane--bottom .flow__step { padding-top: var(--pad); }
.flow__step.is-on { opacity: 1; }

.flow__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--g-050); color: var(--g-600);
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.flow__icon svg { width: 25px; height: 25px; }
.flow__step.is-current .flow__icon { background: var(--g-600); color: #fff; transform: translateY(-4px); }

.flow__n {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-xs); letter-spacing: .1em; color: var(--g-300);
}
/* a compact label in a four-across track, not a section heading */
.flow__step h3 { font-size: clamp(.98rem, .88rem + .34vw, 1.18rem); line-height: 1.3; }

.flow__dot {
  position: absolute; left: 20px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2px solid var(--g-500);
  /* the ring masks the line behind the marker, so it must match the section */
  box-shadow: 0 0 0 5px var(--dot-ring, var(--bg));
  transform: scale(0);
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.flow__lane--top .flow__step .flow__dot    { bottom: -6px; }
.flow__lane--bottom .flow__step .flow__dot { top: -6px; }
.flow__step.is-on .flow__dot { transform: scale(1); }
.flow__step.is-current .flow__dot { background: var(--g-600); }

/* ---- the detail that appears alongside --------------------------------- */
.flow__detail {
  position: sticky; top: calc(var(--header-h-sm) + 2rem);
  display: grid; gap: .5rem;
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--g-500);
  border-radius: var(--r-md);
  opacity: 0; transform: translateX(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.flow.is-live .flow__detail { opacity: 1; transform: none; }
.flow__detail-n {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-xs); letter-spacing: .1em; color: var(--g-500);
}
.flow__detail h3 { font-size: var(--fs-h4); }
.flow__detail p { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 300; }
/* content swaps with a short fade so the change is legible, not abrupt */
.flow__detail.is-swapping > * { opacity: 0; transition: opacity .22s var(--ease); }
.flow__detail > * { transition: opacity .45s var(--ease) .06s; }

@media (prefers-reduced-motion: reduce) {
  /* never hold the viewport, whatever class may be on the pin */
  .flow-pin.is-pinned { height: auto; }
  .flow-pin.is-pinned .flow-sticky { position: relative; height: auto; overflow: visible; }
  .flow__stage { transform: none !important; }
  .flow__step, .flow__detail { opacity: 1; transform: none; }
  .flow__step .flow__dot { transform: scale(1); }
  .flow__path { stroke-dashoffset: 0 !important; }
  .flow__arrowhead { opacity: 1; }
}

/* ==========================================================================
   Pinned frame for the production flow
   The pin only gains its extra height once JS marks it, so without JS (or under
   reduced motion) the section behaves as an ordinary block.
   ========================================================================== */
.flow-pin { position: relative; }
.flow-pin.is-pinned { height: calc(var(--frame-h, 100vh) + var(--travel, 200vh)); }

.flow-sticky { position: relative; }
.flow-pin.is-pinned .flow-sticky {
  position: sticky;
  top: var(--header-h-sm);
  height: var(--frame-h, 100vh);
  display: grid;
  align-items: center;
  overflow: hidden;      /* the mobile track slides inside this frame */
}

/* On a phone the steps stack, and the whole column travels upward inside the
   pinned frame instead of the page moving. */
.flow__viewport { position: relative; }
.flow-pin.is-pinned .flow-sticky > * { will-change: transform; }

/* Heading held inside the pinned frame, sitting directly above the track */
.flow__head {
  display: grid;
  gap: var(--s-3);
  max-width: 62ch;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.flow__head .eyebrow { margin: 0; }
.flow__head .lead { margin: 0; }