/* ==========================================================================
   Inner pages.
   Round 1 ships a generic template so every one of the 140 URLs resolves with
   the new chrome while its real layout is built. The per-family templates
   (service, industry, state, city) replace this one family at a time.
   ========================================================================== */

/* The greys here were cool blue-greys left over from round 1, when navy was the
   primary. Round 2 demoted the navy and nobody came back for these: they sat on
   a green band reading faintly blue. Replaced with the green-family neutrals
   already verified in tools/contrast.py. */
.ge-phero {
  position: relative; background: var(--ge-green-800); color: #dcecd6;
  padding-block: clamp(44px, 6vw, 84px); border-bottom: 3px solid var(--ge-gold-500); overflow: hidden;
}
.ge-phero .ge-watermark { opacity: .06; }
.ge-phero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.5rem); margin-bottom: 16px; }
.ge-phero__lead { font-size: clamp(1.04rem, .5vw + 1rem, 1.22rem); color: #bdd6b4; max-width: 62ch; }
.ge-phero__btns { margin-top: 26px; }

/* Family templates carry the brand diagonal, as the homepage hero does. The
   wedge is decorative and behind everything, so the content needs a layer. */
.ge-phero--family .ge-cut { z-index: 1; }
.ge-phero__in { position: relative; z-index: 3; }

/* Two columns, so the wedge separates the heading from the code index instead
   of cutting through a half-empty band. Same shape as the homepage hero. */
.ge-phero--family .ge-phero__in {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 350px);
  gap: clamp(26px, 4vw, 60px); align-items: center;
}
@media (max-width: 1023px) { .ge-phero--family .ge-phero__in { grid-template-columns: 1fr; } }
.ge-phero--family .ge-phero__lead { max-width: 52ch; }

.ge-phero__codes {
  background: rgba(6, 24, 4, .42); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px); padding: 20px 22px 22px;
}
.ge-phero__codes h2 {
  font-size: .82rem; letter-spacing: .14em; color: var(--ge-gold-300);
  margin: 0 0 14px; font-weight: 500;
}
.ge-phero__codes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* FLEX-WRAP, NOT A TWO-COLUMN GRID.
   The first column was `auto`, which sizes to the chip, and the chip was
   `nowrap`. Most values are short codes and it held; the ones that are a phrase
   — "Non-regulated unless contaminated" on /industries/military/ — made that
   column wider than the card and pushed the label clean outside the border.
   Wrapping lets a long chip take its own line and the label fall underneath,
   while a short code still sits beside its label.
   This is the same mistake as .ge-chip in round 10, fixed there and not here. */
.ge-phero__codes li {
  display: flex; flex-wrap: wrap; gap: 5px 11px; align-items: baseline;
  font-size: .9rem; line-height: 1.35; color: #dcecd6;
}
.ge-phero__codes li > :last-child { flex: 1 1 11ch; min-width: 0; }
.ge-phero__codes li + li { border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 10px; }
.ge-phero__code {
  font-family: var(--ge-mono); font-size: .78rem; letter-spacing: .02em;
  color: var(--ge-green-950); background: var(--ge-lime);
  padding: 3px 7px; max-width: 100%; overflow-wrap: anywhere;
}

/* Breadcrumb */
.ge-crumbs { margin: 0 0 18px; font-size: .9rem; color: #bdd6b4; }
.ge-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ge-crumbs li { display: flex; align-items: center; gap: 8px; }
.ge-crumbs li + li::before { content: "/"; opacity: .45; }
.ge-crumbs a { color: #dcecd6; text-decoration: none; }
.ge-crumbs a:hover { color: #fff; text-decoration: underline; }
.ge-crumbs [aria-current] { color: var(--ge-gold-300); }

/* Body copy column */
.ge-prose { max-width: 74ch; }
.ge-prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-top: 1.5em; }
.ge-prose h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); margin-top: 1.4em; }
.ge-prose > :first-child { margin-top: 0; }
.ge-prose ul, .ge-prose ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.ge-prose li { margin-bottom: .5em; }
.ge-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--ge-gold-500);
  font-size: 1.1rem; color: var(--ge-ink-2);
}
.ge-prose img { border-radius: var(--ge-r); margin-block: 1.4em; }
.ge-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.ge-prose th, .ge-prose td { border: 1px solid var(--ge-line); padding: 10px 13px; text-align: left; }
.ge-prose th { background: var(--ge-paper); font-family: var(--ge-head); font-size: 1.05rem; }

/* The "this page is not rebuilt yet" notice. Sandbox only — see page.php. */
.ge-todo {
  border: 2px dashed var(--ge-gold-400); background: var(--ge-gold-200); color: var(--ge-gold-700);
  border-radius: var(--ge-r-lg); padding: 20px 24px; margin-bottom: 28px;
}
.ge-todo strong { display: block; font-family: var(--ge-head); font-size: 1.2rem; color: var(--ge-ink); margin-bottom: 4px; }
.ge-todo p { margin: 0; font-size: .96rem; }

/* 404 */
.ge-404 { text-align: center; max-width: 620px; margin-inline: auto; }
.ge-404 .ge-mark { margin: 0 auto 24px; }

/* ==========================================================================
   Industry template — the first per-family layout.
   ========================================================================== */

/* The pivot: one idea, stated once, on a dark band so it reads as the spine of
   the page rather than another paragraph. Title left, body right, because a
   centred statement with air on both sides is the look this rebuild removed. */
.ge-pivot__in {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3.4vw, 56px); align-items: start;
}
@media (max-width: 860px) { .ge-pivot__in { grid-template-columns: 1fr; } }
.ge-pivot h2 { margin: 0; }
.ge-pivot p { margin: 0; color: #d6e8cf; font-size: clamp(1.02rem, .38vw + .95rem, 1.14rem); line-height: 1.62; }
.ge-pivot__in::before {
  content: ""; grid-column: 1 / -1; height: 4px; margin-bottom: 4px;
  background: linear-gradient(100deg, var(--ge-lime) 0 38%, var(--ge-gold-500) 38% 100%);
}

/* The streams. Each card leads with the waste code, because that is the thing a
   compliance officer scans for. */
/* BORDER PER CARD, NOT A BACKGROUND BEHIND THE GRID. Faking gridlines with a
   container background paints every EMPTY cell too, and a stream count that is
   not a multiple of the column count always leaves one: seven streams in four
   columns showed a grey block in the eighth. This is the same defect round 2
   hit on the tile grid, and the same fix. */
.ge-streams {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 14px; list-style: none; margin: 0; padding: 0;
}
.ge-stream {
  background: var(--ge-white); padding: 22px 22px 24px;
  border: 1px solid var(--ge-line); border-top: 3px solid var(--ge-green-500);
  display: flex; flex-direction: column;
}
.ge-stream__code {
  font-family: var(--ge-mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--ge-gold-700); background: var(--ge-gold-200);
  align-self: flex-start; padding: 5px 10px; margin: 0 0 12px; line-height: 1.1;
}
.ge-stream h3 { font-size: 1.2rem; margin-bottom: 8px; }
.ge-stream__body { font-size: .93rem; line-height: 1.55; color: var(--ge-ink-3); margin: 0 0 16px; }
.ge-stream .ge-more { margin-top: auto; font-size: .88rem; }

/* What the regulator expects. Two columns with a gold rule, so it reads as a
   reference list rather than more prose. */
/* TWO columns, not auto-fit. Four rules in the three columns auto-fit produced
   left the fourth alone against an empty half-row — the same dead-cell problem
   as the eight states in round 2, and the same answer: pick the column count
   that divides the item count. */
.ge-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .ge-rules { grid-template-columns: 1fr; } }
.ge-rule { padding: 22px 26px 24px; border-left: 3px solid var(--ge-gold-500); background: var(--ge-white); }
.ge-rule + .ge-rule { border-left-color: var(--ge-green-500); }
.ge-rule:nth-child(3) { border-left-color: var(--ge-lime); }
.ge-rule:nth-child(4) { border-left-color: var(--ge-green-700); }
.ge-rule h3 { font-size: 1.16rem; margin-bottom: 8px; }
.ge-rule p { font-size: .93rem; line-height: 1.55; color: var(--ge-ink-3); margin: 0; }

/* Related industries. A short named list, not a grid of all twenty. */
.ge-near { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 26px; }
.ge-near h2 { margin: 0; color: var(--ge-ink-3); letter-spacing: .12em; font-size: .8rem; font-weight: 500; }
.ge-near ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; }
.ge-near a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--ge-head); font-weight: 500; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ge-link);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.ge-near a:hover { border-bottom-color: var(--ge-green-500); color: var(--ge-green-800); }
.ge-near .ge-icon { width: 15px; height: 15px; transition: transform .18s var(--ge-ease); }
.ge-near a:hover .ge-icon { transform: translateX(3px); }

/* ==========================================================================
   State template, and the coverage map.
   ========================================================================== */

/* The map. Every state is a link, so it needs a visible focus ring and a hover
   that is not colour alone — the stroke thickens as well. */
.ge-map { width: 100%; height: auto; display: block; overflow: visible; }
.ge-map path {
  fill: var(--ge-green-700); stroke: var(--ge-green-950); stroke-width: 2;
  transition: fill .18s var(--ge-ease), stroke-width .18s var(--ge-ease);
}
.ge-map a:hover path, .ge-map a:focus path { fill: var(--ge-lime); stroke-width: 4; }
/* DO NOT remove the outline here. The first version set `outline: none` on the
   anchor and recoloured the <path> instead, which looks like a focus indicator
   to a sighted mouse user and is not one: tools/a11y-browser.mjs reported all
   eight map links as having no focus indicator. The global :focus-visible ring
   stays, and the stroke change is an extra cue on top of it, not a substitute.
   overflow: visible on .ge-map is what stops the ring being clipped. */
.ge-map a:focus-visible path { stroke: #fff; stroke-width: 4; }
.ge-map a.is-on path { fill: var(--ge-gold-500); }
.ge-map a.is-on:hover path { fill: var(--ge-gold-400); }

/* The map earns more of the row than the code index does on an industry page. */
.ge-phero--state .ge-phero__in { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
@media (max-width: 1023px) { .ge-phero--state .ge-phero__in { grid-template-columns: 1fr; } }
.ge-phero__map { min-width: 0; }
.ge-phero__mapnote {
  margin: 10px 0 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ge-gold-300); font-family: var(--ge-head); font-weight: 500;
}
@media (max-width: 1023px) { .ge-phero__map { max-width: 520px; } }

/* The agency block: the promise the homepage makes, kept. */
.ge-agency { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
@media (max-width: 720px) { .ge-agency { grid-template-columns: 1fr; } }
.ge-agency__abbr {
  font-family: var(--ge-head); font-weight: 600; font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1; letter-spacing: .02em; color: #fff; margin: 0;
  background: var(--ge-green-700); padding: 18px 20px 16px;
}
.ge-agency__name { font-family: var(--ge-head); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ge-green-800); margin: 0 0 10px; }
.ge-agency__base { border-left: 3px solid var(--ge-gold-500); padding-left: 16px; color: var(--ge-ink-3); font-size: .93rem; margin-top: 16px; }

/* City index for a state: dense, and the abbreviation repeats so a scanned
   column still reads as a place rather than a word. */
/* Border per cell. THIRD time this pattern has bitten — a container background
   faking gridlines paints the empty cells too, and a city count that is not a
   multiple of the column count always leaves some. Eight South Carolina cities
   in six columns showed four grey blocks. Same defect as the round-2 tile grid
   and the round-4 stream grid. Do not fake gridlines with a background. */
.ge-citygrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 8px; list-style: none; margin: 0; padding: 0;
}
.ge-citygrid a {
  display: flex; align-items: baseline; gap: 8px; height: 100%;
  padding: 13px 15px; background: var(--ge-white); color: var(--ge-ink);
  border: 1px solid var(--ge-line); border-left: 3px solid var(--ge-green-500);
  text-decoration: none; font-family: var(--ge-head); font-size: 1.02rem;
  letter-spacing: .02em; text-transform: uppercase;
  transition: background .16s var(--ge-ease), color .16s var(--ge-ease);
}
.ge-citygrid a span { font-family: var(--ge-mono); font-size: .72rem; color: var(--ge-gold-700); letter-spacing: 0; }
.ge-citygrid a:hover { background: var(--ge-green-700); color: #fff; }
.ge-citygrid a:hover span { color: var(--ge-gold-300); }

.ge-offices--row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* "When this is not the right route" — the section that keeps 32 near-synonym
   service pages from collapsing into each other. Two columns per row: the
   condition, then the page that fits instead. */
.ge-instead { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ge-instead li {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(14px, 2.4vw, 34px); align-items: center;
  background: var(--ge-white); border: 1px solid var(--ge-line);
  border-left: 3px solid var(--ge-gold-500); padding: 18px 22px;
}
@media (max-width: 760px) { .ge-instead li { grid-template-columns: 1fr; gap: 12px; } }
.ge-instead__when { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ge-ink-2); }
.ge-instead__go {
  display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  text-decoration: none; justify-self: start;
}
.ge-instead__go span {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ge-ink-3); font-family: var(--ge-head); font-weight: 500;
}
.ge-instead__go strong {
  font-family: var(--ge-head); font-weight: 500; font-size: 1.12rem;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ge-link);
  border-bottom: 2px solid transparent;
}
.ge-instead__go:hover strong { border-bottom-color: var(--ge-green-500); color: var(--ge-green-800); }
.ge-instead__go .ge-icon { width: 16px; height: 16px; color: var(--ge-link); transition: transform .18s var(--ge-ease); }
.ge-instead__go:hover .ge-icon { transform: translateX(3px); }

/* "What you get back" — numbered, because the records arrive in a sequence and
   because a numbered list reads as a checklist rather than as more prose. */
.ge-deliver {
  list-style: none; counter-reset: ge-deliver; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16px;
}
.ge-deliver li {
  counter-increment: ge-deliver; position: relative;
  background: var(--ge-paper); border-top: 3px solid var(--ge-green-500);
  padding: 20px 22px 22px;
}
.ge-deliver li::before {
  content: counter(ge-deliver, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-family: var(--ge-mono); font-size: .78rem; letter-spacing: .06em;
  color: var(--ge-gold-700);
}
.ge-deliver li:nth-child(2) { border-top-color: var(--ge-gold-500); }
.ge-deliver li:nth-child(3) { border-top-color: var(--ge-lime); }
.ge-deliver h3 { font-size: 1.16rem; margin-bottom: 8px; }
.ge-deliver p { font-size: .93rem; line-height: 1.55; color: var(--ge-ink-3); margin: 0; }

/* City pages. */
.ge-citycard h2 { font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.ge-citycard li { align-items: center; }
.ge-citysplit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.ge-citysplit h2 { margin-bottom: 10px; }
.ge-office--plain { background: var(--ge-paper); border-left: 4px solid var(--ge-green-500); }
.ge-office--plain strong { color: var(--ge-ink); }
/* Scoped to the text column. Unscoped, this also hit the .ge-badge span and
   recoloured the white pin icon to body-text grey on a green disc, which was
   nearly invisible. */
.ge-office--plain > div span { color: var(--ge-ink-3); }
.ge-office--plain a { color: var(--ge-link); }
.ge-pivot__in > div > p { margin: 0; color: #d6e8cf; font-size: clamp(1.02rem, .38vw + .95rem, 1.14rem); line-height: 1.62; }

/* The map inside a dark hero needs more separation than it does on paper:
   green-700 on the green-800 hero read as a smudge. */
.ge-phero__map .ge-map path { fill: var(--ge-green-500); stroke: var(--ge-green-950); stroke-width: 2.5; }
.ge-phero__map .ge-map a:hover path, .ge-phero__map .ge-map a:focus path { fill: var(--ge-lime); }
.ge-phero__map .ge-map a.is-on path { fill: var(--ge-gold-500); }

/* ===== City locator =======================================================
   The city family's own device. Lives in the hero, on the dark green, so the
   palette here is the hero palette rather than the paper one. */
.ge-loc { width: 100%; height: auto; display: block; overflow: visible; }
/* green-700, NOT green-800: the hero background is itself green-800, so the
   first version painted the seven other states in the exact colour behind them
   and the footprint vanished — only the stroke survived, which read as an empty
   wireframe. Any fill used on this hero has to be checked against --ge-phero's
   own background, not against paper. */
.ge-loc__st {
  fill: var(--ge-green-700); stroke: var(--ge-green-950); stroke-width: 2;
}
/* The city's own state lifts out of the footprint. Everything else stays
   recessive — the point of the drawing is one place, not eight. */
/* GOLD IS "WHERE THIS PAGE IS", everywhere on the site. ge_map() has used it
   for the current state since round 6 on four templates; the locator originally
   painted the current state green and the dispatch office gold, so Alabama was
   gold on /hazardous-waste-disposal-alabama/ and green one click later on
   /hazardous-waste-disposal-mobile-al/. Same drawing, opposite meaning.
   The office markers below changed with it so nothing competes with the gold. */
.ge-loc__st.is-on { fill: var(--ge-gold-500); }

.ge-loc__link { stroke: #fff; stroke-width: 3; opacity: .85; }
/* The band, drawn rather than described: a solid line for a same-region
   office, a dashed one as reach grows. It is a relationship, not a route. */
.ge-loc__link--near { stroke-dasharray: none; }
.ge-loc__link--mid  { stroke-dasharray: 14 10; }
.ge-loc__link--far  { stroke-dasharray: 6 14; opacity: .75; }

/* The office is now a hollow marker and the city a solid one: with the current
   state gold, a gold dot on it would have disappeared. Filled vs hollow carries
   the distinction without a second colour. */
.ge-loc__base { fill: var(--ge-green-950); stroke: #fff; stroke-width: 3; }
/* White, not lime. --ge-lime is #39b10e and the active state is #5aaf46, so a
   lime dot on its own state was darker than the ground it sat on and read as a
   hole. The city is the subject of the drawing and gets the strongest value on
   it; gold stays the office, so the two can never be confused. */
.ge-loc__halo { fill: #fff; opacity: .18; }
.ge-loc__dot  { fill: #fff; stroke: var(--ge-green-950); stroke-width: 3; }

/* The plate is the label's real background — see ge_loc_label() for the pixel
   measurement that forced it. Solid, not translucent: a translucent plate puts
   the state fill back under the glyphs and the contrast pair stops being true. */
.ge-loc__plate { fill: var(--ge-green-950); }
.ge-loc__lbl {
  font-family: var(--ge-head); font-weight: 600; font-size: 25px;
  letter-spacing: .04em; fill: #fff;
}
/* The office is the supporting fact, so it is gold and a size down. */
.ge-loc__lbl--base { fill: #cfe3c8; font-size: 21px; font-weight: 500; }

/* The locator earns the same share of the hero row the state map does. */
.ge-phero--city .ge-phero__in { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
@media (max-width: 1023px) {
  .ge-phero--city .ge-phero__in { grid-template-columns: 1fr; }
  .ge-phero__loc { max-width: 520px; }
}
.ge-phero__loc { min-width: 0; }
.ge-phero__locnote {
  margin: 12px 0 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ge-gold-300); font-family: var(--ge-head); font-weight: 500;
}

/* ===== City: industry and route cards =====================================
   The city family reuses .ge-stream rather than introducing a fourth card
   shape. Only the grid and the stream list below the title are new. */
/* No column minimum of its own: .ge-streams already sets one, and three
   different minimums across four families (290 / 300 / 264) showed up as the
   column rhythm shifting as you moved between them. The modifier survives
   because the markup uses it, but the grid is the component's. */
.ge-streams--3 { }
.ge-stream h3 a { color: inherit; text-decoration: none; background-image: none; }
.ge-stream h3 a:hover, .ge-stream h3 a:focus-visible { color: var(--ge-green-700); text-decoration: underline; }
.ge-stream__list {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ge-stream__list li {
  position: relative; padding-left: 16px;
  font-size: .93rem; line-height: 1.45; color: var(--ge-ink-2);
}
/* A rule rather than a bullet glyph: these are stream names, not prose points,
   and the gold tick matches the code chip above them. */
.ge-stream__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; background: var(--ge-gold-600);
}

/* Code chips. Discrete tokens that wrap as tokens — see the note in
   parts/page-city.php for why they are not one imploded string. */
.ge-chips {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.ge-chip {
  font-family: var(--ge-mono); font-size: .76rem; letter-spacing: .03em;
  color: var(--ge-gold-700); background: var(--ge-gold-200);
  padding: 4px 8px; line-height: 1.1;
}
/* A 'code' in the source is sometimes a short phrase rather than a code
   ("Characterisation required"), so these wrap. An earlier version set nowrap
   in the rule above and overrode it here, which left dead CSS and read as if
   two decisions were in force. There is one: they wrap. */
.ge-chip { max-width: 100%; white-space: normal; }

/* Route cards carry no stream list, so they need a floor to stop a one-line
   card sitting shorter than its neighbours in the same row. */
.ge-stream--route { min-height: 118px; justify-content: flex-start; }

/* Cards on the deep band: the green top rule is invisible against green-950,
   so it goes gold, matching the chips inside. */
.ge-band--deep .ge-stream { border-top-color: var(--ge-gold-500); border-color: transparent; }
.ge-band--deep .ge-stream h3 a { color: var(--ge-ink); }
.ge-band--deep .ge-stream h3 a:hover, .ge-band--deep .ge-stream h3 a:focus-visible { color: var(--ge-green-700); }

/* "Elsewhere in <state>": name over reach band, so the card stacks instead of
   sitting on one baseline. Wider minimum than the old chip row — the band
   descriptor needs room and these are now two lines, not one. */
.ge-citygrid { grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr)); }
.ge-citygrid a { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px 15px; }
.ge-citygrid__band {
  font-family: var(--ge-body); font-size: .78rem; letter-spacing: 0;
  text-transform: none; color: var(--ge-ink-3);
}
/* The band is a scale, so it reads as one: the nearer it is, the stronger the
   left rule. */
.ge-citygrid li:has(.ge-citygrid__band--near) a { border-left-color: var(--ge-green-500); }
.ge-citygrid li:has(.ge-citygrid__band--mid) a  { border-left-color: var(--ge-gold-500); }
.ge-citygrid li:has(.ge-citygrid__band--far) a  { border-left-color: var(--ge-line-2); }
.ge-citygrid a:hover .ge-citygrid__band { color: var(--ge-gold-200); }

/* ===== Service pivot as a photo split =====================================
   The deep band keeps its colour; it just moves onto the half beside the
   photograph instead of running the full width. */
.ge-pivot--split .ge-split__media { min-height: 420px; }
.ge-pivot__panel { background: var(--ge-green-950); color: #cfe3c8; }
/* The full-width pivot is a two-column grid, so its heading and body sit side
   by side and never needed vertical separation. Stacking them in the split left
   only the global h2 margin of .42em, which at this size and a 1.02 line-height
   reads as the body touching the heading. */
.ge-pivot__panel h2 { color: #fff; margin-bottom: .58em; }
.ge-pivot__panel p {
  margin: 0; color: #d6e8cf;
  font-size: clamp(1.02rem, .38vw + .95rem, 1.14rem); line-height: 1.62;
}
/* The photograph is on the LEFT here, so the media gradient has to darken
   towards the panel rather than away from it — the shared .ge-split__media
   rule fades the other way for the homepage's right-hand photos. */
.ge-pivot--split .ge-split__media::after {
  background: linear-gradient(90deg, rgba(14,43,9,.18), rgba(14,43,9,.55));
}
/* The family heroes stack at 1023, so the pivot split stacks there too: one
   width at which a family page goes to a single column, rather than a band
   between 900 and 1023 where the hero was stacked and the split was not.
   .ge-split keeps its own 900 for the homepage, whose splits sit in a
   different layout and have no hero above them to agree with. */
@media (max-width: 1023px) {
  .ge-pivot--split .ge-split { grid-template-columns: 1fr; }
  .ge-pivot--split .ge-split__media { min-height: 260px; }
  .ge-pivot--split .ge-split__body--pad-right { padding-right: clamp(20px, 4vw, 64px); }
}

/* The service index on an industry page sits on the deep band. The cards are
   white, so their own ink has to win over .ge-band--deep's green link colour —
   the same override the stream cards needed. */
.ge-band--deep .ge-citygrid a { color: var(--ge-ink); border-left-color: var(--ge-gold-500); }
.ge-band--deep .ge-citygrid a:hover { background: var(--ge-green-700); color: #fff; }
.ge-band--deep .ge-citygrid a:hover .ge-citygrid__band { color: var(--ge-gold-200); }

/* ===== Hub: the index grid ================================================
   The card already existed; only the photograph on top is new. It bleeds to
   the card's edges, so the padding moves off the card and onto its parts. */
.ge-streams--index { }
.ge-stream--shot { padding: 0 0 24px; }
.ge-stream--shot > h3,
.ge-stream--shot > .ge-stream__body,
.ge-stream--shot > .ge-more { margin-left: 22px; margin-right: 22px; }
.ge-stream--shot > h3 { margin-top: 18px; }
.ge-stream__shot { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ge-green-900); }
.ge-stream__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The whole card is one destination, so the picture must not be a second tab
   stop to the same place — it is aria-hidden and out of the tab order in the
   markup, and this keeps it from looking interactive on its own. */
.ge-stream__shot { cursor: pointer; }
.ge-stream--shot:hover .ge-stream__shot img { transform: scale(1.03); }
.ge-stream__shot img { transition: transform .4s var(--ge-ease); }
@media (prefers-reduced-motion: reduce) {
  .ge-stream__shot img { transition: none; }
  .ge-stream--shot:hover .ge-stream__shot img { transform: none; }
}

/* The hub counting card: the figure is the point, so it is larger than the
   code chip this component normally carries. */
.ge-hubcard .ge-phero__code {
  font-size: 1.5rem; font-family: var(--ge-head); font-weight: 600;
  min-width: 2.6em; text-align: center;
}
.ge-hubcard li { align-items: center; }

/* ===== /services/ — the hub of hubs =======================================
   A hero with no aside: every other family hero has one, and a fifth variation
   of the counting card would have been filler. The lead gets the width. */
.ge-phero--wide .ge-phero__in { grid-template-columns: 1fr; }
.ge-phero--wide .ge-phero__lead { max-width: 68ch; }

/* The four questions, as a numbered rail. */
.ge-asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ge-asks a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.2vw, 30px); align-items: baseline;
  padding: 18px clamp(14px, 2vw, 24px);
  background: rgba(255,255,255,.04); color: #e4f0de; text-decoration: none;
  transition: background .16s var(--ge-ease);
}
.ge-asks a:hover, .ge-asks a:focus-visible { background: rgba(255,255,255,.1); }
.ge-asks__n {
  font-family: var(--ge-mono); font-size: .82rem; color: var(--ge-gold-400);
  letter-spacing: .06em;
}
.ge-asks__q {
  font-family: var(--ge-head); font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(1rem, .5vw + .9rem, 1.22rem); color: #fff;
}
.ge-asks__c {
  font-size: .82rem; color: var(--ge-gold-300); white-space: nowrap;
  font-family: var(--ge-mono);
}
@media (max-width: 720px) {
  .ge-asks a { grid-template-columns: auto minmax(0, 1fr); }
  .ge-asks__c { grid-column: 2; }
}

/* One band per family, alternating sides so four bands do not read as a list. */
.ge-famband .ge-split__media { min-height: 380px; }
.ge-famband__panel {
  background: var(--ge-paper); color: var(--ge-ink-2);
  padding-inline: max(var(--ge-gut), calc((100vw - var(--ge-wrap)) / 2 + var(--ge-gut)));
  padding-right: clamp(24px, 4vw, 64px);
}
/* Flipped bands put the photograph second in the source as well as on screen,
   so the reading order still runs number, name, question, list. */
.ge-famband--flip .ge-split { direction: rtl; }
.ge-famband--flip .ge-split > * { direction: ltr; }
.ge-famband--flip .ge-famband__panel {
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: max(var(--ge-gut), calc((100vw - var(--ge-wrap)) / 2 + var(--ge-gut)));
}
.ge-famband:nth-of-type(even) .ge-famband__panel { background: var(--ge-white); }

.ge-famband__n {
  font-family: var(--ge-mono); font-size: .86rem; letter-spacing: .08em;
  color: var(--ge-gold-700); margin: 0 0 10px;
}
.ge-famband__q {
  font-size: clamp(1.02rem, .4vw + .94rem, 1.18rem); line-height: 1.5;
  color: var(--ge-ink-2); margin: 0 0 22px; max-width: 46ch;
}
.ge-famband__list {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 8px 22px;
}
.ge-famband__list a {
  display: block; padding: 7px 0 7px 14px; position: relative;
  color: var(--ge-ink); text-decoration: none; font-size: .95rem; line-height: 1.4;
  border-left: 2px solid var(--ge-line-2);
  transition: border-color .16s var(--ge-ease), color .16s var(--ge-ease);
}
.ge-famband__list a:hover, .ge-famband__list a:focus-visible {
  border-left-color: var(--ge-green-500); color: var(--ge-green-700);
}

/* No photograph for this family: the brand mark on deep green, not a grey box. */
.ge-split__media--mark {
  background: var(--ge-green-950); display: grid; place-items: center;
}
.ge-split__media--mark .ge-mark { width: min(46%, 230px); height: auto; opacity: .22; color: var(--ge-green-300); }
.ge-split__media--mark::after { display: none; }

@media (max-width: 1023px) {
  .ge-famband .ge-split { grid-template-columns: 1fr; }
  .ge-famband--flip .ge-split { direction: ltr; }
  .ge-famband .ge-split__media { min-height: 230px; }
  .ge-famband__panel,
  .ge-famband--flip .ge-famband__panel { padding-inline: clamp(20px, 5vw, 48px); }
}