/* =============================================================
   ZARAS — /industries — Atmosphere v13
   -------------------------------------------------------------
   v13 (§03/closing tidy): the closing band is swapped from the
   bespoke legacy .closing scene to the shared platform .zc terminal
   (access-close.v1.css + home-close.v5.css) so industries' close now
   mirrors /platform and /index. Every industries-scoped closing rule
   is therefore removed from this sheet: .closing is dropped from the
   .hero/.trades/.work-mix/.workflow isolation + ::before tint groups,
   the standalone "trade fit conversion scene" .closing / .closing::before
   block is deleted, and the bespoke .industries-closing-row strip
   (desktop + the 860px mobile override) is deleted. No other page links
   this sheet, and pricing's .closing is body[data-page="pricing"]-scoped,
   so the removal is industries-only. (§03 ops-tile "Record holds" copy
   and its .ops-holds styling live inline in industries.html, not here.)

   v12 (§02 repurpose -> "The work mix"): the §02 "trade workflows"
   six-card grid is removed — its per-trade copy now single-sources
   from #trades-data (the constellation panel reads it directly), and
   the section is rebuilt as a COPY-LED work-mix ledger: per flagship
   trade, its shape tags (warm) + a signature-day clause. There is NO
   record card and NO Call/Schedule/Invoice/Paid convergence imagery
   here — that is the hero's; §02 carries the "one business runs
   several shapes at once" wedge in copy alone. Deltas:
     1) Section selector renamed .trade-workflows -> .work-mix in the
        isolation + ::before tint lists and the section frame; the
        ambient tint is retained (warm/teal field, unchanged).
     2) Orphaned card rules removed: .workflows-head, .workflows-intro,
        .trade-grid, and all .trade-card* (the grid + card chrome).
     3) §02 content styling (.work-mix-head/-sub/-proof + the
        .work-mix-ledger / .wm-* ledger rows) added below the frame —
        kept here in the page atmosphere module, as for every other
        industries section. (An earlier draft of this section was a
        convergence artifact in a standalone css/trade-record.v1.css;
        that artifact duplicated the hero and was removed along with
        its stylesheet.)
   (Banner prose was stale at "v10" through the v11 eyebrow-move bump;
   corrected to v12 here.)

   v10 (hero cohesion pass): disciplines the warm trade-dawn in the
   hero so the teal signal clearly leads. Only the
   body[data-page="industries"] .hero::before background is touched:
     1) Teal signal lifted + widened (56%×50% at 78% 34%, 0.185) so
        it's unambiguously the primary light, plus a faint teal
        carry across the upper field (0.05) to keep the signal
        dominant up top.
     2) Warm dawn narrowed + dimmed to a thin horizon accent
        (72%×10% at 52% 107%, 0.045 + a small 0.018 kicker at
        13% 88%) so teal clearly leads — the prior 92%-wide 0.07
        band read at near-parity with the teal on the warm
        #0b0a09 base. The body-level amber left blob (16% 28%) is
        likewise dropped 0.045 → 0.025 so it doesn't reinforce the
        hero warmth. Teal values untouched; the per-section warm
        tints below the hero (.trades/.trade-workflows/.ops-tile)
        are intentional and unchanged.
     3) Vertical darken seats the type but starts lower (44%) so the
        top of the hero stays open.
   All other rules unchanged from v9. Paired with the inline-style
   hero chip + CTA polish in industries.html (same cohesion pass).

   v9 doc comment retained below for context.
   -------------------------------------------------------------
   v9 (P0 rework, constellation detail panel): adds .tc-detail-panel
   chrome — the persistent rich-content panel rendered below the
   .trade-constellation widget in .trades-stage. Desktop-only (the
   mobile UI keeps its existing .tc-stack-detail inline expansion).

   Panel renders in two states, swapped by JS via [data-state]:
     - default: instructional "Select a trade" copy
     - active:  trade-card content (flagship), templated line
                (non-flagship trade), or §04 ops-tile content
                (shape anchor)

   The panel subscribes to 'tc:activate' / 'tc:clear' CustomEvents
   emitted by trade-constellation.v3.js. Two surfaces stay
   independent of the existing .tc-detail badge (small floating
   pill next to the active trade dot, internal-to-widget).

   Internal element type scale (22px name, 14px body, 12.5px fit,
   middot-separated tags) is inherited from the former §02 .trade-card
   chrome, which the panel originally mirrored. Those cards were
   removed in v12 (§02 is now the trade -> record convergence); the
   scale is retained here as the panel's own settled rhythm. Container
   chrome is intentionally dark so the panel reads as console output.

   Mobile (≤767px, matches constellation's data-mode="mobile"
   breakpoint): panel is display:none. The .tc-stack-detail inline
   expansion already serves the same role at mobile.

   v8 doc comment retained below for context.
   -------------------------------------------------------------
   v8 (P0 rework, bridge deletion): the 3-step framework explainer
   block (.industries-bridge: "Trade name → Operating shape →
   Zaras workflow") at the bottom of §02 is removed. The new §03
   Trade workflows section (added in v6) now delivers per-trade
   Zaras-workflow content properly — operator-voice, concrete
   feature lines per card — so the bridge had become redundant
   with the page structure that now exists. Steps 1 and 2 of the
   bridge were already taught by section structure itself (§02
   shows trades, §04 teaches shapes).

   Deltas from v7:
     1) All .industries-bridge and .industries-bridge-item rules
        deleted, including the ::before mid-line divider and the
        num/strong/span:last-child descendants.
     2) @media (max-width: 860px) entries pruned of bridge
        selectors — .industries-closing-row entries removed in v13.
     3) @media (max-width: 620px) .industries-bridge-item override
        deleted.
     4) No section-padding tunes applied. The §02 bottom-padding
        and §03 top-padding inherited from v7 produce a clean
        transition once the bridge is out of the way; verified
        at all viewports before commit.

   v7 doc comment retained below for context.
   -------------------------------------------------------------
   v7 (P0 rework, hero conclusion): hero panel removed. Closes the
   P0-rework hero work — items 1-5 of the rework iterated on copy,
   sizing, and the trade-depth layer; v7 deletes the right-column
   panel that the rework's other items rendered obsolete.

   Deltas from v6:
     1) All .industries-hero-panel* and .industries-panel-* rules
        deleted (~220 lines): the panel aside, panel-inner, panel-
        head + status, panel-map + ::before, panel-orbit family,
        panel-node family (incl. n1-n5 positions and ::after
        labels), panel-core + descendants, panel-steps + step (the
        long-disabled markup), panel-foot.
     2) @keyframes industries-node-pulse and the @media (prefers-
        reduced-motion: no-preference) animation block deleted —
        only consumers were panel nodes.
     3) .industries-hero-grid and .industries-hero-copy rules
        deleted. Hero collapsed to single-column; markup wrapper
        also deleted in industries.html (no longer a grid item).
     4) body[data-page="industries"] .hero { ... } rule deleted.
        Inline <style> at industries.html:461-468 already sets
        min-height clamp(440, 62vh, 660), padding clamps, and
        flex-column + justify-content: center — saner baselines
        for single-column. Same simplification on .hero h1 (drop
        the v5-era font-size + max-width overrides and let the
        inline clamp(48, 7.5vw, 92) and max-width 22ch win).
     5) Mobile @media (max-width: 1080px) and (max-width: 620px)
        blocks pruned of panel-specific overrides; bridge and
        trades/workflows padding overrides retained.

   v6 doc comment retained below for context.
   -------------------------------------------------------------
   v6 (interim, P0 rework): adds atmosphere scoping for the new
   §03 .trade-workflows section (trade-depth layer between the
   constellation §02 and the operating-shapes §04) plus the
   per-card grid + card styling. Hero panel removal is now
   scheduled for v7 in item 6 (re-versioned from v6 because v5→v6
   was needed for an interim regression fix).

   Deltas from v5:
     1) .trade-workflows added to the section-isolation list and
        the ::before background list. New section gets its own
        atmospheric tint — signal-top-left + warm-bottom-right,
        inverse-mirror of §02's warm-top-left + signal-mid-right,
        so the two trade-focused sections feel related but not
        identical.
     2) New .workflows-head / .workflows-intro rules mirror the
        existing .workflow-head pattern (head label + h2 + intro
        line) for the new section's heading block.
     3) .trade-grid: 3-col desktop → 2-col @ 980 → 1-col @ 620,
        matching §04 .ops-grid breakpoint cascade.
     4) .trade-card internal layout: subtle background fill, 1px
        border, inset shadow chrome — visually differentiated from
        §04 .ops-tile (border-only chrome, no card fill) so the two
        grid sections read as related but distinct.
     5) text-wrap: pretty on .trade-card-d and .trade-card-fit .v.
        Without it, multiple cards produce single-word orphan lines
        at 2-col tablet and 3-col desktop ("up." on electrical,
        "record." on hvac, "context." on plumbing). pretty
        eliminates all but one (landscaping's "spreadsheet." at
        3-col — long word, doesn't read as ugly).

   Hero-panel CSS retained intact — scheduled for sweep in v7
   alongside the full panel removal in item 6.

   v5 doc comment retained below for context.
   -------------------------------------------------------------
   v5 (interim, P0 rework): targets hero H1 sizing for the new
   shorter copy + right-side hero-panel node label clipping. Full
   hero panel removal is scheduled for v6 in a later commit, so
   v5 deliberately keeps the panel intact and only addresses two
   in-flight defects:

     1) .hero h1 font-size override: was clamp(48px, 7.5vw, 92px)
        inherited from industries.html inline, sized for the prior
        short H1. The new ~74-char H1 wrapped to 8-9 lines at
        desktop and the panel-deletion fix isn't until v6, so the
        H1 is sized down to wrap to 3-4 lines while the two-col
        hero is still in place. v6 will revisit when the hero
        becomes single-column.

     2) .industries-panel-node.n2 and .n3 (right-side nodes) had
        their ::after labels overflow the .industries-panel-map
        right edge under the scale(1.18) pulse keyframe (5-7px
        clip). Nodes nudged inward 4% so labels (and their pulse-
        scaled bounding boxes) stay within the map at all viewports.

   v4 doc comment retained below for context.
   -------------------------------------------------------------
   v4: Migrated .industries-bridge-item .num from --ink-faint
   (~1.7:1) to --ink-label (~6.5:1). All other rules unchanged
   from v3.

   Original v3 doc comment retained below.
   -------------------------------------------------------------
   Restraint pass over v2.

   Background:
     v2 added a hero coverage panel (right column with a 5-node
     orbital map + centered "30+ trades" content + 3-step bridge
     + status footer), a page-level fixed grid overlay, scene
     atmospheres for hero/trades/shapes/closing, a 3-step bridge
     after the trade constellation, an enhanced field-map at top
     of shapes section, and a 4-chip closing conversion row.

     v3 keeps the strongest moves and cuts the redundant ones.

   KEEP from v2:
     - Hero CTAs (Explore trade map / See operating shapes)
     - Hero coverage panel CONCEPT (right-column anchor)
     - Trade constellation styling tweaks
     - "Also supports:" long-tail row
     - The 01/02/03 bridge after the trade constellation
       (Trade name → Operating shape → Zaras workflow)
     - Per-section atmospheric scoping
     - Closing 4-chip conversion row (verbatim)

   FIX in v3:
     - 🚨 Hero panel: 5 perimeter nodes (Recurring/Break-fix/
       Project/Commercial/Seasonal) overlapped the centered
       "30+ trades" content card. Repositioned all 5 nodes to
       the actual corners/edges, well clear of the centered card.

   CUT from v2:
     - main::before page-level fixed grid overlay (consistent
       with platform v3 — the per-section tints already provide
       enough atmosphere; a wallpaper-grid behind everything
       turns the page into a noisy backdrop)
     - Hero panel 3-step "01 Trade / 02 Shape / 03 Workflow"
       row: this same information appears in the bridge after
       the trade constellation. The page stated 01/02/03 twice.
     - Hero panel-foot row (Field-service ready · Dispatch →
       Payment): redundant with the panel head's "Live fit
       model" status; removing it gives the panel air.

   TUNE from v2:
     - Hero panel core ("30+ trades") slightly larger / more
       prominent now that the orbital nodes are clear of it
     - Field-map (shapes section) atmosphere reduced ~25% so it
       reads as scene texture under the cards rather than as a
       second hero galaxy
     - Slightly increased breathing room around hero panel

   Loaded after field-map.v1.css and trade-constellation.v1.css
   so this file's tonal layer can sit over those components.
   All rules scoped under body[data-page="industries"].
   ============================================================= */

body[data-page="industries"] {
  overflow-x: clip;
  background:
    radial-gradient(ellipse 78% 58% at 76% 7%, rgba(118,199,178,0.085), transparent 58%),
    radial-gradient(ellipse 68% 48% at 16% 28%, rgba(212,136,106,0.025), transparent 64%),
    var(--bg);
}

body[data-page="industries"] main {
  position: relative;
  overflow: clip;
}

/* CUT: v2's main::before page-level fixed grid overlay (104px
   cells across the entire viewport). Same wallpaper effect we
   removed on platform v3 — the per-section atmospheric tints
   already supply more than enough texture. */

body[data-page="industries"] .hero,
body[data-page="industries"] .trades,
body[data-page="industries"] .work-mix,
body[data-page="industries"] .workflow {
  position: relative;
  isolation: isolate;
}

body[data-page="industries"] .hero::before,
body[data-page="industries"] .trades::before,
body[data-page="industries"] .work-mix::before,
body[data-page="industries"] .workflow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

/* =========================================================
   HERO — single-column, panel removed in v7
   .hero base layout (min-height, padding, flex-column +
   justify-content: center) and .hero h1 sizing now governed by
   the inline <style> in industries.html. Only retain page-scoped
   tweaks for sub-copy width, action spacing, and scroll cue.
   ========================================================= */
body[data-page="industries"] .hero::before {
  background:
    /* teal signal — primary, lifted + widened so it clearly leads */
    radial-gradient(ellipse 56% 50% at 78% 34%, rgba(118,199,178,0.185), transparent 62%),
    /* faint teal carry across the upper field to keep the signal dominant */
    radial-gradient(ellipse 64% 30% at 50% 16%, rgba(118,199,178,0.05), transparent 72%),
    /* warm trade-dawn — narrowed + dimmed so it reads as a thin horizon accent, not a band that competes with the teal */
    radial-gradient(ellipse 72% 10% at 52% 107%, rgba(212,136,106,0.045), transparent 76%),
    radial-gradient(ellipse 34% 18% at 13% 88%, rgba(212,136,106,0.018), transparent 78%),
    /* vertical darken seats the type; starts lower so the top stays open */
    linear-gradient(180deg, rgba(11,10,9,0) 44%, rgba(14,13,11,0.5) 100%);
}

body[data-page="industries"] .hero-sub {
  max-width: 50ch;
}

body[data-page="industries"] .hero-actions {
  margin-top: 34px;
}

body[data-page="industries"] .hero-scroll-cue {
  margin-top: clamp(44px, 7vh, 84px);
}

/* =========================================================
   TRADES — constellation scene
   ========================================================= */
body[data-page="industries"] .trades {
  padding-top: clamp(92px, 10vw, 132px);
  padding-bottom: clamp(86px, 10vw, 124px);
  border-top-color: rgba(255,250,240,0.075);
}

body[data-page="industries"] .trades::before {
  background:
    radial-gradient(ellipse 58% 42% at 30% 18%, rgba(212,136,106,0.09), transparent 66%),
    radial-gradient(ellipse 60% 48% at 74% 44%, rgba(118,199,178,0.07), transparent 68%),
    linear-gradient(180deg, rgba(16,13,9,0.72) 0%, rgba(10,10,9,0.14) 100%);
}

body[data-page="industries"] .trades-head {
  max-width: none;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.48fr);
  column-gap: clamp(36px, 7vw, 92px);
  align-items: end;
}

body[data-page="industries"] .trades-head .section-eyebrow,
body[data-page="industries"] .trades-head h2,
body[data-page="industries"] .trades-intro {
  grid-column: 1;
}

body[data-page="industries"] .trades-proof {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  min-height: 140px;
  padding: 18px;
  border: 1px solid rgba(255,250,240,0.08);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 52% at 86% 12%, rgba(118,199,178,0.10), transparent 64%),
    rgba(10,10,9,0.34);
  overflow: hidden;
}

body[data-page="industries"] .trades-proof::before {
  content: "30+";
  position: absolute;
  right: 14px;
  top: 8px;
  font-family: var(--sans);
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1;
  letter-spacing: -0.07em;
  color: rgba(239,236,230,0.055);
}

body[data-page="industries"] .trade-constellation {
  border-color: rgba(255,250,240,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 36px 90px -68px rgba(0,0,0,0.95),
    0 0 0 1px rgba(212,136,106,0.025);
}

body[data-page="industries"] .trade-constellation::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 38% at 18% 24%, rgba(212,136,106,0.055), transparent 68%),
    radial-gradient(ellipse 44% 36% at 80% 68%, rgba(118,199,178,0.055), transparent 70%);
  mix-blend-mode: screen;
}

body[data-page="industries"] .trades-longtail {
  border-top: 1px solid rgba(255,250,240,0.065);
  background:
    linear-gradient(90deg, rgba(212,136,106,0.055), transparent 48%, rgba(118,199,178,0.045)),
    rgba(5,5,4,0.34);
}

/* =========================================================
   §02 — THE WORK MIX (section frame)
   Warm-top-left + teal-bottom-right ambient field, retained from the
   prior §02 trade-workflows section. The head + copy-led trade ledger
   styling follows directly below (kept in this page module).
   ========================================================= */
body[data-page="industries"] .work-mix {
  padding-top: clamp(92px, 10vw, 132px);
  padding-bottom: clamp(86px, 10vw, 124px);
  border-top: 1px solid rgba(255,250,240,0.075);
}

body[data-page="industries"] .work-mix::before {
  background:
    radial-gradient(ellipse 58% 44% at 18% 22%, rgba(118,199,178,0.085), transparent 66%),
    radial-gradient(ellipse 62% 46% at 82% 78%, rgba(212,136,106,0.075), transparent 68%),
    linear-gradient(180deg, rgba(8,14,13,0.42) 0%, rgba(11,10,9,0.14) 100%);
}

/* ---- §02 work-mix: head + copy-led trade ledger ----
   Head mirrors the §01/§03 head rhythm. The ledger is an editorial
   index — per flagship trade: name + warm shape-tag pills (the focal
   point: the multi-shape mix legible at a glance) + a signature-day
   clause. Warm tags pull the section off all-gray/teal; teal stays on
   the proof chips. No record card / convergence imagery (that's the
   hero's) — the wedge lives in copy + the tag mix. */
.work-mix-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 44px;
  max-width: 64ch;
}
.work-mix-head h2 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(32px, 4.4vw, 56px);
  text-wrap: balance;
  color: var(--ink);
}
.work-mix-sub {
  margin: 0;
  max-width: 60ch;
  color: var(--ink-sub);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
}

/* proof-chip row — carried over from the prior §02 (teal-dot pills). */
.work-mix-proof {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.work-mix-proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,0.015);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-sub);
}
.work-mix-proof-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 7px var(--signal);
  flex: none;
}

/* trade ledger — a tight editorial index of operators' actual days.
   Three-tier hierarchy, two columns, width-constrained (a beat, not a
   table):
     1. trade name  — the SCAN ANCHOR: near-white sans, the label a
        visitor hunts down the left column to find their trade;
     2. day-clause  — the PAYOFF: ink, right column, the lived day that
        nothing else on the page carries;
     3. shape tags  — quiet warm support (that breakdown is §01's job).
   Opening rule is a touch crisper than the row dividers so the index
   has a defined start; rows align on the name/day baseline. */
.work-mix-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 880px;
  border-top: 1px solid var(--rule-hi);
}
.wm-row {
  display: grid;
  grid-template-columns: minmax(0, 234px) minmax(0, 1fr);
  align-items: baseline;
  gap: 7px 36px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

/* left: identity — anchor name over quiet tags */
.wm-id { min-width: 0; }
.wm-trade {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.wm-tags {
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--warm-ink);
}
.wm-tags li { display: inline; }
.wm-tags li:not(:last-child)::after {
  content: " · ";
  color: var(--warm-rule);
}

/* right: the day — the payoff line */
.wm-day {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* mobile: stack identity -> day within each row */
@media (max-width: 720px) {
  .work-mix-head { margin-bottom: 32px; }
  .wm-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 18px 0;
  }
  .wm-day { font-size: 16px; }
}

/* =========================================================
   v9 — TRADE CONSTELLATION DETAIL PANEL
   Renders below the constellation in .trades-stage; subscribes
   to tc:activate / tc:clear events from trade-constellation.v3.js.
   Desktop-only — mobile keeps the existing .tc-stack-detail
   inline expansion behavior.
   ========================================================= */
.tc-detail-panel {
  margin-top: 18px;
  padding: 26px 28px 24px;
  min-height: 200px;
  border: 1px solid rgba(255,250,240,0.075);
  border-top: 1px solid rgba(118,199,178,0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.014), transparent 60%),
    rgba(5,5,4,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.022),
    0 18px 50px -44px rgba(0,0,0,0.85);
}

/* State swap: opacity transition on the inner content blocks.
   default + active panes both live in the DOM at all times; JS
   toggles the [hidden] attribute on whichever is inactive. */
.tc-detail-panel-default,
.tc-detail-panel-active {
  transition: opacity 220ms ease;
}
.tc-detail-panel[data-state="active"] .tc-detail-panel-default { display: none; }
.tc-detail-panel[data-state="default"] .tc-detail-panel-active { display: none; }

/* Default state — demonstrative copy (decomposes one trade into shapes) */
.tc-detail-panel-default {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tc-detail-panel-default .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tc-detail-panel-default .body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-sub);
  max-width: 64ch;
  text-wrap: pretty;
}

/* Active state — populated by JS from §03 trade-card or §04
   ops-tile content. Layout mirrors .trade-card's rhythm: head
   (name + tags), body, fit row, footer actions. */
.tc-detail-panel-active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tc-detail-panel-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-detail-panel-name {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}
.tc-detail-panel-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tc-detail-panel-tags li { display: inline-flex; align-items: center; }
.tc-detail-panel-tags li:not(:last-child)::after {
  content: "\00B7";
  margin: 0 8px;
  color: var(--ink-faint);
}
.tc-detail-panel-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-sub);
  max-width: 64ch;
  text-wrap: pretty;
}
.tc-detail-panel-fit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.tc-detail-panel-fit .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tc-detail-panel-fit .v {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-sub);
  text-wrap: pretty;
}
.tc-detail-panel-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tc-detail-panel-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.tc-detail-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-sub);
  transition: color 220ms ease;
}
.tc-detail-panel-link:hover { color: var(--signal); }
.tc-detail-panel-link .arr { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.tc-detail-panel-link:hover .arr { transform: translateX(3px); }
.tc-detail-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  border-radius: 6px;
  background: var(--ink);
  color: #0a0a0a;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background 260ms ease, transform 260ms cubic-bezier(.2,.6,.1,1), box-shadow 260ms ease;
}
.tc-detail-panel-cta .arr {
  border-left: 1px solid rgba(0,0,0,0.18);
  padding-left: 10px;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.tc-detail-panel-cta:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(255,255,255,0.22);
}
.tc-detail-panel-cta:hover .arr { transform: translateX(2px); }

/* Mobile: panel collapses entirely — .tc-stack-detail handles
   the equivalent interaction inline within the constellation. */
@media (max-width: 767px) {
  .tc-detail-panel { display: none; }
}

/* =========================================================
   OPERATING SHAPES — field map + tiles
   ========================================================= */
body[data-page="industries"] .workflow {
  padding-top: clamp(92px, 10vw, 128px);
  padding-bottom: clamp(92px, 10vw, 128px);
  border-top-color: rgba(255,250,240,0.075);
}

body[data-page="industries"] .workflow::before {
  background:
    radial-gradient(ellipse 62% 46% at 68% 12%, rgba(72,140,170,0.085), transparent 66%),
    radial-gradient(ellipse 58% 44% at 24% 72%, rgba(118,199,178,0.065), transparent 68%),
    linear-gradient(180deg, rgba(8,14,15,0.64) 0%, rgba(11,10,9,0.12) 100%);
}

body[data-page="industries"] .workflow-head {
  max-width: 70ch;
}

body[data-page="industries"] .field-map {
  border-color: rgba(255,250,240,0.10);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.030),
    0 30px 80px -60px rgba(0,0,0,0.85),
    0 0 0 1px rgba(118,199,178,0.018);
}

/* v3 TUNE: field-map atmosphere reduced ~25%. The trade
   constellation already operates as the page's visual centerpiece;
   another full-strength orbital scene above the operating-shape
   cards reads as a second galaxy. Field-map remains beautiful
   but now sits as scene texture under the cards. */
body[data-page="industries"] .field-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 50% 0%, rgba(118,199,178,0.045), transparent 68%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.28));
}

body[data-page="industries"] .ops-grid {
  position: relative;
  border-color: rgba(255,250,240,0.075);
  background:
    radial-gradient(ellipse 80% 52% at 50% -10%, rgba(118,199,178,0.055), transparent 70%),
    rgba(5,5,4,0.18);
  box-shadow: 0 26px 80px -68px rgba(0,0,0,0.95);
}

body[data-page="industries"] .ops-grid::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: -18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(118,199,178,0.28), transparent);
  opacity: 0.72;
}

body[data-page="industries"] .ops-tile {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.016), transparent 52%);
  transition:
    background 260ms ease,
    border-color 260ms ease,
    transform 260ms cubic-bezier(.2,.6,.1,1);
}

body[data-page="industries"] .ops-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 80% 58% at 50% 0%, rgba(118,199,178,0.075), transparent 66%);
  transition: opacity 260ms ease;
}

body[data-page="industries"] .ops-tile:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.026);
}
body[data-page="industries"] .ops-tile:hover::before { opacity: 1; }

body[data-page="industries"] .ops-tile[data-shape="breakfix"]::before,
body[data-page="industries"] .ops-tile[data-shape="seasonal"]::before {
  background: radial-gradient(ellipse 80% 58% at 50% 0%, rgba(212,136,106,0.078), transparent 66%);
}

body[data-page="industries"] .ops-fit {
  background: linear-gradient(90deg, rgba(118,199,178,0.045), transparent 72%);
  margin-left: -2px;
  margin-right: -2px;
  padding-left: 2px;
  padding-right: 2px;
}

/* =========================================================
   Mobile
   v7: motion + 1080 breakpoint blocks deleted — only consumers
   were the removed hero panel. Hero responsive sizing now lives
   in industries.html inline (clamp-based, viewport-driven).
   ========================================================= */
@media (max-width: 860px) {
  body[data-page="industries"] .trades-head {
    grid-template-columns: 1fr;
  }
  body[data-page="industries"] .trades-proof {
    grid-column: auto;
    grid-row: auto;
    min-height: 96px;
    align-items: center;
  }
}

@media (max-width: 620px) {
  /* v7: hero rule overrides + all panel-specific overrides deleted
     with the panel itself. Inline industries.html hero clamp handles
     most sizing — but the inline H1 floor of 48px is too aggressive
     for the new ~74-char H1 at narrow viewports (8 lines at 360px).
     Override to lower the floor so the wrap stays at ~5 lines,
     matching item 3's documented mobile state. The "plumbing,"
     orphan on line 2 is structural under text-wrap: balance and
     persists at any mobile font size; documented and accepted. */
  body[data-page="industries"] .hero h1 {
    font-size: clamp(38px, 10vw, 48px);
  }
  body[data-page="industries"] .trades,
  body[data-page="industries"] .work-mix,
  body[data-page="industries"] .workflow {
    padding-top: 68px;
    padding-bottom: 72px;
  }
  body[data-page="industries"] .ops-tile:hover {
    transform: none;
  }
}