/* =========================================================
   Direction 02 — inner pages.

   Extends main.css. Everything here is a component the seven
   inner pages share; nothing page-specific lives in this file
   except the Sustainability accent override at the bottom,
   which is a token swap rather than a set of green rules.

   The homepage owns the video hero, the preloader and the
   Industries montage. Inner pages deliberately get none of
   those: a 2.2MB pour on every navigation is a tax, and a
   preloader that fires on every click is an obstacle. What
   carries the identity across is the molten thread, the
   band rhythm, the seam, the inverted hierarchy and the
   cursor.
   ========================================================= */

/* SKIP LINK — moved to main.css 2026-08-08. It lived here, but index.html
   does not load pages.css, so the homepage rendered "Skip to content" as
   raw unstyled text at the top of the page. Anything every page's markup
   carries has to be styled in a stylesheet every page loads. */

/* ---------------------------------------------------------
   PAGE HERO
   Compact, not full-viewport. An inner page has to get to its
   content; only the homepage earns a full screen of theatre.
   --------------------------------------------------------- */

.phero {
  position: relative; overflow: hidden;
  background: var(--navy-900);
  padding: calc(var(--nav-h) + clamp(3.4rem, 9vh, 6rem)) 0 clamp(3rem, 7vh, 5rem);
}
.phero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(255,107,26,.16) 0%, rgba(255,107,26,0) 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(22,56,95,.72) 0%, rgba(6,21,41,0) 70%);
}
.page--green .phero__bg {
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(78,201,138,.16) 0%, rgba(78,201,138,0) 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(22,56,95,.72) 0%, rgba(6,21,41,0) 70%);
}
.phero__inner { position: relative; z-index: 2; }
.phero__eye {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--page-accent, var(--molten)); margin-bottom: 1.1rem;
}
.phero__eye::before { content: ''; width: clamp(24px, 3.4vw, 46px); height: 1px; background: currentColor; }

.phero h1 {
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.028em;
  color: var(--page-accent, var(--molten)); max-width: 15ch; margin: 0;
}
.phero__sub {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.1rem, .95rem + .8vw, 1.7rem); line-height: 1.26;
  letter-spacing: -.012em; color: var(--white);
  max-width: 30ch; margin: clamp(.9rem, 2vh, 1.3rem) 0 0;
}
.phero__lede { max-width: 58ch; margin: 1.2rem 0 0; color: var(--steel); }
.phero__lede + .phero__lede { margin-top: .8rem; }
.phero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); }

/* Badge pills — the mockups' "Precision Manufactured · Consistent Quality"
   strips. Mono and small, so they read as stamps rather than buttons. */
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.6rem, 4vh, 2.2rem); }
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem; border: 1px solid var(--rule-d2); border-radius: 100px;
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel);
}
.badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--page-accent, var(--molten));
}

/* ---------------------------------------------------------
   GRIDS + TILES
   One tile component, three densities. Cards on this site are
   square-cornered (--rad is 3px by spec) and separated by
   rules rather than shadows on light bands.
   --------------------------------------------------------- */

.g2, .g3, .g4 { display: grid; gap: clamp(.9rem, 1.7vw, 1.4rem); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.tile {
  position: relative; padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid var(--rule-d); border-radius: var(--rad);
  background: rgba(22,56,95,.34);
}
.sec--light .tile { border-color: var(--rule-l); background: var(--white); }
.tile__no {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .16em;
  color: var(--page-accent, var(--molten)); margin-bottom: .9rem; display: block;
}
.sec--light .tile__no { color: var(--page-accent-ink, var(--molten-ink)); }
.tile h3 {
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3);
  letter-spacing: -.015em; margin: 0 0 .5rem; color: var(--white);
}
.sec--light .tile h3 { color: var(--ink); }
.tile p { color: var(--steel); font-size: var(--fs-small); margin: 0; }
.sec--light .tile p { color: var(--slate); }

/* The hairline that warms on hover. Cheaper than a shadow and it survives
   both grounds, which a shadow tuned for navy does not. */
.tile::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--page-accent, var(--molten));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--d-s) var(--e-out);
}
.tile:hover::after, .tile:focus-within::after { transform: scaleX(1); }

/* The Products page carries four cards where the homepage carries three.
   Same component, one more column. */
.prods--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .prods--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .prods--four { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   CHECK LISTS
   --------------------------------------------------------- */

.vlist { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .62rem; }
.vlist li {
  position: relative; padding-left: 1.5rem;
  color: var(--steel); font-size: var(--fs-small); line-height: 1.5;
}
.sec--light .vlist li { color: var(--slate); }
.vlist li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--page-accent, var(--molten));
}
.sec--light .vlist li::before { border-color: var(--page-accent-ink, var(--molten-ink)); }

/* ---------------------------------------------------------
   SPLIT — copy beside a figure.
   --------------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.split--wide { grid-template-columns: 1.15fr 1fr; }
.split__fig { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rad); border: 1px solid var(--rule-d); }
.sec--light .split__fig { border-color: var(--rule-l); }
.split__fig .ph { position: absolute; inset: 0; }

/* About -> Who We Are. The section heading used to sit ABOVE the split, so
   the left column held two paragraphs against a photograph twice their
   height and `align-items: center` parked them in the middle of the row --
   roughly 200px of dead space between the sub and the first line of copy.
   With the heading inside the column, the column is tall enough to stand
   beside the picture and the two start on the same line. */
.split--lede { align-items: start; }
.split--lede .sechead { margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }
/* 3:2, not 4:3. The source masters at 1579x996 (~1.59:1); a 4:3 slot cropped
   the width away and left the frame mostly sky above the building. */
.split__fig--wide { aspect-ratio: 3 / 2; }

/* ---------------------------------------------------------
   DATA TABLE — alloy series, specifications, certifications.
   A real table, not a grid of divs: this is tabular data and
   screen readers should be told so.
   --------------------------------------------------------- */

.dtable { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
.dtable th, .dtable td { text-align: left; padding: clamp(.85rem, 1.6vw, 1.15rem) 1rem; vertical-align: top; }
.dtable thead th {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-dim); font-weight: 400;
  border-bottom: 1px solid var(--rule-d2);
}
.sec--light .dtable thead th { color: var(--slate); border-bottom-color: var(--rule-l2); }
.dtable tbody tr { border-bottom: 1px solid var(--rule-d); }
.sec--light .dtable tbody tr { border-bottom-color: var(--rule-l); }
.dtable tbody th {
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3);
  color: var(--page-accent, var(--molten)); white-space: nowrap;
}
.sec--light .dtable tbody th { color: var(--page-accent-ink, var(--molten-ink)); }
.dtable td { color: var(--steel); font-size: var(--fs-small); }
.sec--light .dtable td { color: var(--slate); }

/* Row ignition — the thread's language applied to a table. */
.dtable tbody tr { position: relative; transition: background-color var(--d-s) var(--e-out); }
.dtable tbody tr:hover { background: rgba(255,107,26,.06); }
.sec--light .dtable tbody tr:hover { background: rgba(194,65,12,.05); }
.page--green .dtable tbody tr:hover { background: rgba(78,201,138,.08); }

.pill {
  display: inline-block; padding: .28rem .62rem; border-radius: 100px;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor;
}
.pill--done { color: var(--green-lt); }
.pill--wip  { color: var(--ember); }
.pill--plan { color: var(--steel-dim); }
.sec--light .pill--done { color: var(--green); }
.sec--light .pill--wip  { color: var(--molten-ink); }
.sec--light .pill--plan { color: var(--slate); }

/* ---------------------------------------------------------
   TIMELINE — About milestones and the ESG roadmap.
   Horizontal on desktop, vertical on narrow. The fill is
   drawn by js/pages.js on scroll, same idea as the thread.
   --------------------------------------------------------- */

/* Timeline — VERTICAL since 2026-08-26. It was a horizontal eight-column
   rail, which worked while every entry was a six-word summary. The
   client's own milestone copy runs ~30 words each, and eight of those in
   parallel columns turns every entry into a narrow ribbon of text that is
   read down rather than across. Vertical gives each entry a full measure
   and keeps the rail as the through-line.
   The mechanics are deliberately unchanged: one --tp value still drives
   the fill (now scaleY) and .is-on still lights each node just before the
   fill formally arrives. Only the axis and the layout moved. */
.tline {
  --tl-yr: 7.5rem;                                   /* year gutter */
  --tl-gap: clamp(1.25rem, 2.6vw, 2.5rem);
  --tl-rail: calc(var(--tl-yr) + var(--tl-gap) / 2); /* rail sits in the gap */
  position: relative; margin-top: clamp(1.8rem, 4vh, 2.8rem);
}
.tline__rail {
  position: absolute; left: var(--tl-rail); right: auto;
  top: .55rem; bottom: .55rem; width: 2px; height: auto;
  background: var(--rule-d2);
}
.sec--light .tline__rail { background: var(--rule-l2); }
.tline__fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: linear-gradient(180deg, var(--page-accent-deep, #c2410c), var(--page-accent, var(--molten)));
  transform: scaleY(var(--tp, 0)); transform-origin: 50% 0;
}
.tline__items { display: block; }
.tline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-yr) minmax(0, 1fr);
  column-gap: var(--tl-gap);
  padding: 0 0 clamp(1.9rem, 3.6vh, 3rem);
}
.tline__item:last-child { padding-bottom: 0; }
.tline__item::before {
  content: ''; position: absolute; left: var(--tl-rail); top: .3rem;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translateX(calc(-50% + 1px));
  background: var(--navy-900); border: 2px solid var(--rule-d2);
  transition: border-color var(--d-s) var(--e-out), background-color var(--d-s) var(--e-out);
}
.sec--light .tline__item::before { background: var(--paper); border-color: var(--rule-l2); }
.tline__item.is-on::before { border-color: var(--page-accent, var(--molten)); background: var(--page-accent, var(--molten)); }
/* The last entry is a TARGET, not an achievement — its own copy says "is
   targeting". Its node keeps a hollow centre once lit, so the finished
   timeline never reads as though the certifications were already held.
   Same honesty rule as the In Progress rows on quality.html. */
.tline__item:last-child.is-on::before { background: var(--navy-900); }
.sec--light .tline__item:last-child.is-on::before { background: var(--paper); }
.tline__yr {
  grid-column: 1; grid-row: 1 / span 2; justify-self: end; align-self: start;
  text-align: right; padding-top: .05rem;
  font-family: var(--f-mono); font-size: clamp(.95rem, 1.35vw, 1.2rem);
  line-height: 1.3; letter-spacing: .06em;
  color: var(--page-accent, var(--molten)); display: block; margin: 0;
}
.sec--light .tline__yr { color: var(--page-accent-ink, var(--molten-ink)); }
.tline__item h3 {
  grid-column: 2; grid-row: 1;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--white); margin: 0 0 .5rem; letter-spacing: -.01em;
}
.sec--light .tline__item h3 { color: var(--ink); }
.tline__item p { grid-column: 2; grid-row: 2; font-size: var(--fs-small); color: var(--steel); margin: 0; max-width: 64ch; }
.sec--light .tline__item p { color: var(--slate); }
/* One-way reveal. .tline--anim is added by pages.js ONLY when it is about
   to drive the scrub, so a missing GSAP or an early return can never
   leave the copy invisible — the .has-cursor / .xray-on gate pattern.
   .is-seen is never removed, so scrubbing back up cannot blank text the
   visitor has already started reading. */
.tline--anim .tline__item > * { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--e-out), transform .55s var(--e-out); }
.tline--anim .tline__item.is-seen > * { opacity: 1; transform: none; }
.tline--anim .tline__item.is-seen h3 { transition-delay: .05s; }
.tline--anim .tline__item.is-seen p { transition-delay: .1s; }

/* ---------------------------------------------------------
   LATERAL MODE — the section pins and the history travels
   sideways, one entry per stage.

   Why: the vertical rail above landed directly underneath
   #trust, which is a .spine — ALSO a scroll-drawn vertical
   rail, with a number in a left gutter and copy on the right.
   Two of those stacked on one screen read as a single
   component repeated, not as two sections. So milestones
   moved to a different axis entirely rather than to a nicer
   version of the same idea.

   Everything here is behind .tline--lat, which pages.js adds
   only inside a (min-width: 900px) gsap.matchMedia branch and
   removes on the way out. Phones, reduced motion and a
   missing GSAP therefore keep the vertical stack above — this
   file must never be the only thing standing between a
   visitor and the copy.
   --------------------------------------------------------- */
/* Added by pages.js alongside .sec--lat. base.css turns on smooth scrolling
   globally for anchors; a snap is itself a programmatic scroll, so the two
   drive the scroll position at the same time and fight. Scoped to the life
   of the pinned section rather than removed from base.css, which the other
   six pages still want. */
html.lat-snap { scroll-behavior: auto; }
.sec--lat {
  min-height: 100vh; display: flex; align-items: center;
  padding-top: clamp(4rem, 9vh, 6rem); padding-bottom: clamp(3rem, 7vh, 5rem);
}
.sec--lat > .wrap { width: 100%; }
.tline--lat { overflow: hidden; margin-top: clamp(2.2rem, 5vh, 3.4rem); }
.tline--lat .tline__items { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.tline--lat .tline__item {
  flex: 0 0 100%; max-width: 100%;
  /* The year column is capped, not a bare percentage. At 34% of a wide
     panel a four-digit year left ~260px of dead space before its own
     description, which read as two unrelated things. 22rem is just wide
     enough for the longest label ("Nov–Dec", which wraps above "2026")
     and it must stay a FIXED width rather than max-content: per-panel
     widths would move the copy column as the timeline travels. */
  grid-template-columns: minmax(0, min(34%, 22rem)) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
  padding: clamp(2.6rem, 6vh, 4rem) 0 0;
  /* Panels are laid out side by side, so the stage takes the height of the
     TALLEST one. Giving them a floor keeps the pinned composition from
     collapsing to a thin strip on the short entries. */
  min-height: clamp(230px, 32vh, 360px);
  align-content: start;
  will-change: transform;
}
.tline--lat .tline__item::before { display: none; }
.tline--lat .tline__yr {
  grid-column: 1; grid-row: 1 / span 2; justify-self: start; text-align: left;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .96; letter-spacing: -.035em;
  padding-top: 0; will-change: transform;
}
.tline--lat .tline__item h3 { font-size: clamp(1.35rem, 2.2vw, 1.95rem); margin-bottom: .85rem; }
.tline--lat .tline__item p { max-width: 58ch; font-size: clamp(.98rem, 1.05vw, 1.08rem); line-height: 1.7; }

/* The rail becomes a horizontal progress bar, inset a few px so the
   first and last tick sit fully inside the overflow-hidden stage. */
.tline--lat .tline__rail { left: 6px; right: 6px; top: 0; bottom: auto; width: auto; height: 2px; }
.tline--lat .tline__fill {
  transform: scaleX(var(--tp, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--page-accent-deep, #c2410c), var(--page-accent, var(--molten)));
}
.tline__tick {
  position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--navy-900); border: 2px solid var(--rule-d2);
  transition: border-color var(--d-s) var(--e-out), background-color var(--d-s) var(--e-out);
}
.sec--light .tline__tick { background: var(--paper); border-color: var(--rule-l2); }
.tline__tick.is-on { border-color: var(--page-accent, var(--molten)); background: var(--page-accent, var(--molten)); }
.sec--light .tline__tick.is-on { border-color: var(--page-accent-ink, var(--molten-ink)); background: var(--page-accent-ink, var(--molten-ink)); }
/* Last entry is a target, not an achievement — hollow, as in vertical mode. */
.tline__tick:last-child.is-on { background: var(--navy-900); }
.sec--light .tline__tick:last-child.is-on { background: var(--paper); }

/* ---------------------------------------------------------
   PEOPLE — silhouettes, never invented faces.
   --------------------------------------------------------- */

.person__fig {
  aspect-ratio: 1 / 1; border-radius: var(--rad);
  background: linear-gradient(180deg, rgba(22,56,95,.55), rgba(10,30,60,.9));
  border: 1px solid var(--rule-d);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.person__fig svg { width: 42%; height: auto; opacity: .3; }

/* ---------------------------------------------------------
   CONTACT — routes, form, hours.
   --------------------------------------------------------- */

.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.7vw, 1.4rem); }
.route__meta { margin-top: 1rem; display: grid; gap: .35rem; }
.route__meta a {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .06em;
  color: var(--page-accent, var(--molten)); text-decoration: none; word-break: break-all;
}
.sec--light .route__meta a { color: var(--page-accent-ink, var(--molten-ink)); }
.route__meta a:hover { text-decoration: underline; }

.form { display: grid; gap: clamp(.9rem, 1.8vw, 1.25rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-dim);
}
.sec--light .field label { color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; padding: .82rem .9rem; border-radius: var(--rad);
  border: 1px solid var(--rule-d2); background: rgba(6,21,41,.5);
  color: var(--white); font-family: inherit; font-size: var(--fs-small);
  transition: border-color var(--d-s) var(--e-out), background-color var(--d-s) var(--e-out);
}
.sec--light .field input, .sec--light .field select, .sec--light .field textarea {
  background: var(--white); border-color: var(--rule-l2); color: var(--ink);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--page-accent, var(--molten));
  background: rgba(6,21,41,.72);
}
.sec--light .field input:focus, .sec--light .field select:focus, .sec--light .field textarea:focus {
  background: var(--white);
}
.form__note { font-size: var(--fs-label); color: var(--steel-dim); margin: 0; }
.sec--light .form__note { color: var(--slate); }
/* Demo-only submit feedback. There is no back end behind this form and
   pretending otherwise would be worse than saying so. */
.form__sent {
  margin: 0; padding: .8rem 1rem; border-radius: var(--rad);
  border: 1px solid var(--page-accent, var(--molten));
  background: rgba(255,107,26,.1); color: var(--white);
  font-size: var(--fs-small); display: none;
}
.form__sent.is-on { display: block; }

.mapfig {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--rad);
  border: 1px solid var(--rule-d); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px),
    var(--navy-800);
  display: grid; place-items: center;
}
.mapfig__pin {
  position: relative; width: 14px; height: 14px; border-radius: 50%;
  background: var(--page-accent, var(--molten));
  box-shadow: 0 0 0 6px rgba(255,107,26,.18), 0 0 22px 5px rgba(255,107,26,.4);
}
.mapfig__label {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-dim); text-align: center;
}

/* ---------------------------------------------------------
   MISC
   --------------------------------------------------------- */

.prose { max-width: 62ch; }
.prose p { color: var(--steel); margin: 0 0 1rem; }
.sec--light .prose p { color: var(--slate); }
.prose p:last-child { margin-bottom: 0; }

.quotebar {
  border-left: 2px solid var(--page-accent, var(--molten));
  padding-left: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.6rem, 4vh, 2.4rem);
  max-width: 62ch; color: var(--steel); font-size: var(--fs-body);
}
.sec--light .quotebar { color: var(--slate); border-left-color: var(--page-accent-ink, var(--molten-ink)); }

.dl { display: grid; gap: .7rem; margin-top: 1.3rem; }
.dl a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem; border: 1px solid var(--rule-d); border-radius: var(--rad);
  color: var(--white); text-decoration: none; font-size: var(--fs-small);
  transition: border-color var(--d-s) var(--e-out), background-color var(--d-s) var(--e-out);
}
.sec--light .dl a { border-color: var(--rule-l); color: var(--ink); background: var(--white); }
.dl a:hover { border-color: var(--page-accent, var(--molten)); background: rgba(255,107,26,.06); }
.dl a span { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--page-accent, var(--molten)); }
.sec--light .dl a span { color: var(--page-accent-ink, var(--molten-ink)); }

@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .routes { grid-template-columns: repeat(2, 1fr); }
  .tline { --tl-yr: 5.5rem; }
}
@media (max-width: 800px) {
  .g2, .g3 { grid-template-columns: 1fr; }
  .split, .split--wide { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .g4, .routes { grid-template-columns: 1fr; }
}
/* Below ~700px the year gutter costs more than it earns: it squeezes the
   copy to a ~28ch measure. Year moves above its own heading and the rail
   comes back to the left edge. Must stay AFTER the 1000px block — both
   match on a phone and the later rule wins. */
@media (max-width: 700px) {
  .tline { --tl-yr: 0rem; --tl-gap: 0rem; --tl-rail: .35rem; }
  .tline__item { grid-template-columns: minmax(0, 1fr); padding-left: 1.9rem; }
  .tline__yr { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; margin-bottom: .35rem; }
  .tline__item h3 { grid-column: 1; grid-row: 2; }
  .tline__item p { grid-column: 1; grid-row: 3; }
}

/* ---------------------------------------------------------
   SUSTAINABILITY — the client asked for green elements on
   this page and nowhere else. It is a token swap, not a
   second stylesheet: every component above already reads
   --page-accent, so one declaration retints the page and
   leaves the other six untouched.
   --------------------------------------------------------- */

.page--green {
  --page-accent:      var(--green-lt);   /* 6.6:1 on navy-700 */
  --page-accent-ink:  var(--green);      /* the light-band variant */
  --page-accent-lt:   var(--green-lt);
  --page-accent-deep: #0f5c39;
}
.page--green .mapfig__pin { box-shadow: 0 0 0 6px rgba(78,201,138,.18), 0 0 22px 5px rgba(78,201,138,.4); }
.page--green .dl a:hover { background: rgba(78,201,138,.08); }
.page--green .form__sent { background: rgba(78,201,138,.12); }
/* The seam is heat — molten metal pouring between bands. On the
   sustainability page it would be the one loud orange element left, so
   it takes the page accent too. */
.page--green .seam {
  background: linear-gradient(90deg,
      transparent 0%, var(--green) 12%, #a8f0cb 28%, var(--green-lt) 44%,
      #7fdcae 62%, var(--green) 78%, transparent 100%);
  background-size: 220% 100%;
}
.page--green .seam::after { background: linear-gradient(180deg, rgba(78,201,138,.34), transparent 72%); }

/* A data table cannot compress below its content, so at narrow widths the
   TABLE scrolls, never the page. Caught at 375px on Industries and Quality,
   where the four- and three-column tables pushed the body sideways. */
.dscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dscroll .dtable { min-width: 32rem; }
@media (max-width: 600px) { .dscroll .dtable { min-width: 30rem; } }