/* Strategic Labs — V002-M6 OWNER FLAGSHIP BUSINESS MODEL CANVAS + HERO COMPOSITION
   REFINEMENT. Loads last. Two authorized defects only:
   PART 01 — Home hero: metrics ↔ five-practice strip as one composition (desktop).
   PART 02 — /services/business-model: the nine-block Business Model Canvas as a
   flagship consulting instrument (master canvas · zones · detail layer · phone
   translation) + the approved financial statement composed as its foundation. */

/* ======================================================================
   PART 01 — HOME HERO COMPOSITION (large desktop / web)
   The copy block used to centre itself in whatever the viewport left over, so
   the distance between the metrics and the glass strip grew with the screen
   (53px at 1440×900 → 141px at 1920×1080 → 321px at 2560×1440). The block now
   packs to the foot of the hero with ONE deliberate, bounded air to the strip;
   the surplus of a tall viewport rises above the headline (sky and skyline),
   where it reads as scale, never as a dead zone. Nothing else in the hero moves.
   ====================================================================== */
@media (min-width: 1024px) {
  .hm-hero--owner .hm-hero__grid { align-content: end; padding-block-end: clamp(2.25rem, 1.75rem + 1.25vw, 3rem); }
}

/* ----------------------------------------------------------------------
   NARROW HERO TOP-FILL AMEND (Owner visual correction, 2026-09-17)
   Packing the block to the foot moved the whole surplus of a tall viewport
   ABOVE the headline (246px of empty ceiling at 1920×1080). A fixed-height
   block inside a 100svh hero always leaves that surplus somewhere, so the
   composition now (1) grows with the viewport's height — display type,
   numerals and the stack's rhythm take svh-aware sizes, bounded — and (2) the
   hero's height is driven by its content: 100svh up to 1000px, never more.
   What little air remains is split between a bounded top air and the bounded
   metrics → strip air, so the headline sits under the header on every screen
   and the strip stays part of the composition. Copy, CTAs, metrics, strip,
   asset and crop are unchanged; ≤1023px is untouched.
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hm-hero--owner { min-block-size: min(100svh, 1000px); }
  /* the copy block (headline → metrics) sits between two bounded spacer rows: top air · block · air to the strip */
  .hm-hero--owner .hm-hero__grid { align-content: stretch; grid-template-rows: minmax(2.5rem, 1fr) auto minmax(2.75rem, .85fr); padding-block: 0; }
  .hm-hero--owner .hm-hero__copy { grid-row: 2; }
  /* the stack breathes with the viewport's height (identical at ≤ 900px tall) */
  /* every svh term is capped so the stack never balloons; the title cap (5rem) keeps the approved two-line headline in its 40rem column */
  .hm-hero--owner .hm-hero__eyebrow { margin-bottom: min(max(var(--s5), 2.6svh), 2.25rem); }
  .hm-hero--owner .hm-hero__title { font-size: clamp(2.5rem, max(1.3rem + 3.5vw, 8.2svh), 5rem); }
  .hm-hero--owner .hm-hero__lead { margin-top: min(max(var(--s4), 2svh), 1.5rem); font-size: clamp(.98rem, max(.94rem + .25vw, 1.9svh), 1.2rem); }
  .hm-hero--owner .hm-hero__actions { margin-top: min(max(clamp(1.25rem, 1rem + 1vw, 1.75rem), 3.2svh), 2.5rem); }
  .hm-hero--owner .hm-metrics { margin-top: min(max(clamp(1.4rem, 1.1rem + 1.1vw, 2rem), 3.6svh), 2.75rem); padding-top: min(max(clamp(1rem, .8rem + .8vw, 1.4rem), 2.4svh), 1.75rem); }
  .hm-hero--owner .hm-metrics b { font-size: clamp(1.9rem, max(1.3rem + 1.9vw, 5.4svh), 3.4rem); }
}

/* ======================================================================
   PART 02 — BUSINESS MODEL CANVAS
   ====================================================================== */
.bmc-section { overflow: clip; }
.bmc-section__head { display: grid; justify-items: center; text-align: center; max-width: 66ch; margin-inline: auto; row-gap: var(--s3); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.bmc-section__head .eyebrow { justify-content: center; margin-bottom: 0; }
.bmc-section__head .lead { margin: 0; max-width: 58ch; }
.bmc-section__stage { width: min(1320px, calc(100% - 64px)); margin-inline: auto; }

/* ---- the instrument: contextual frame → master canvas → zones → detail layer ---- */
.bmc { --bmc-line: rgba(174,226,209,.16); --bmc-line-2: rgba(174,226,209,.34); --bmc-surface: #071F1D; --bmc-surface-2: #0A2B28; --bmc-t: 220ms;
  position: relative; isolation: isolate; padding: 10px; border-radius: 36px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(26,75,68,.075), rgba(26,75,68,.025)); }
.bmc__frame { position: relative; overflow: clip; border-radius: 27px; background: linear-gradient(180deg, #082421 0%, #04110F 100%); border: 1px solid rgba(174,226,209,.2); box-shadow: var(--hm-shadow), inset 0 1px 0 rgba(255,255,255,.06); color: var(--on-dark); }

/* the five approved framework axes — column captions, read right to left */
.bmc__axes { list-style: none; margin: 0; padding: 0 clamp(.75rem, .4rem + 1vw, 1.5rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block-end: 1px solid var(--bmc-line); }
.bmc__axis { position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem; min-block-size: 54px; padding: .6rem .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--on-dark-muted); text-align: center; transition: color var(--bmc-t) var(--hm-ease); }
.bmc__axis + .bmc__axis::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 16px; inline-size: 1px; background: var(--bmc-line); }
.bmc__axis-mark { flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background var(--bmc-t) var(--hm-ease), border-color var(--bmc-t) var(--hm-ease), box-shadow var(--bmc-t) var(--hm-ease); }
.bmc__axis.is-active { color: var(--mint); }
.bmc__axis.is-active .bmc__axis-mark { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(68,188,167,.18); }

/* ONE canvas, NINE zones — shared hairline boundaries on the recognised topology (RTL: column 1 = right) */
.bmc__canvas { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: minmax(156px, auto) minmax(156px, auto) minmax(128px, auto); gap: 1px; background: var(--bmc-line); border-block-end: 1px solid var(--bmc-line);
  grid-template-areas:
    "segments segments relationships relationships value value activities activities partners partners"
    "segments segments channels channels value value resources resources partners partners"
    "revenue revenue revenue revenue revenue cost cost cost cost cost"; }
.bmc__zone { position: relative; overflow: clip; min-width: 0; margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: start; padding: clamp(1rem, .8rem + .6vw, 1.35rem) clamp(1rem, .8rem + .7vw, 1.5rem); border: 0; border-radius: 0; background: var(--bmc-surface); color: var(--on-dark); text-align: start; font: inherit; cursor: pointer;
  transition: background var(--bmc-t) var(--hm-ease), box-shadow var(--bmc-t) var(--hm-ease), color var(--bmc-t) var(--hm-ease); }
.bmc__zone--segments { grid-area: segments; } .bmc__zone--relationships { grid-area: relationships; } .bmc__zone--channels { grid-area: channels; }
.bmc__zone--value { grid-area: value; } .bmc__zone--activities { grid-area: activities; } .bmc__zone--resources { grid-area: resources; }
.bmc__zone--partners { grid-area: partners; } .bmc__zone--revenue { grid-area: revenue; } .bmc__zone--cost { grid-area: cost; }
.bmc__zone-head { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; }
.bmc__n { font-size: .76rem; font-weight: 700; letter-spacing: .16em; color: var(--brand); }
/* family cue — one tick language: solid (customer side) · split (delivery side) · fine (financial foundation) */
.bmc__tick { inline-size: 20px; block-size: 2px; border-radius: 1px; background: var(--brand); opacity: .6; }
.bmc__zone--delivery .bmc__tick { background: linear-gradient(to left, var(--brand) 0 40%, transparent 40% 60%, var(--brand) 60%); }
.bmc__zone--economics .bmc__tick { block-size: 1px; inline-size: 26px; background: var(--mint); }
.bmc__ico { margin-inline-start: auto; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 11px; border: 1px solid var(--bmc-line-2); background: rgba(255,255,255,.03); color: var(--mint); transition: background var(--bmc-t) var(--hm-ease), color var(--bmc-t) var(--hm-ease), border-color var(--bmc-t) var(--hm-ease), opacity var(--bmc-t) var(--hm-ease); }
.bmc__ico .hm-ico { inline-size: 19px; block-size: 19px; }
/* the oversized ghost numeral — depth on hover, presence when active */
.bmc__ghost { position: absolute; z-index: 0; inset-inline-end: -.05em; inset-block-end: -.2em; font-size: clamp(5.5rem, 3.5rem + 4.5vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; color: var(--mint); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 260ms var(--hm-ease), transform 320ms var(--hm-ease); }
.bmc__title { position: relative; z-index: 1; align-self: end; grid-row: 3; margin: 0; font-size: clamp(1.02rem, .9rem + .45vw, 1.3rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; max-inline-size: 15ch; transition: color var(--bmc-t) var(--hm-ease); }

/* the centrepiece — القيمة المقترحة: the hinge between market and delivery */
.bmc__zone--value { grid-template-rows: auto auto; align-content: center; justify-items: center; text-align: center;
  background: radial-gradient(120% 90% at 50% 40%, rgba(21,112,94,.6) 0%, rgba(14,58,53,.62) 48%, var(--bmc-surface) 100%); box-shadow: inset 0 0 0 1px rgba(174,226,209,.3); }
.bmc__zone--value .bmc__zone-head { flex-direction: column; gap: 1rem; }
.bmc__zone--value .bmc__tick { display: none; }
.bmc__zone--value .bmc__ico { margin-inline-start: 0; inline-size: 58px; block-size: 58px; border-radius: 50%; border-color: rgba(174,226,209,.5); background: rgba(4,17,15,.35); box-shadow: 0 0 0 9px rgba(174,226,209,.06), 0 0 46px rgba(68,188,167,.28); }
.bmc__zone--value .bmc__ico .hm-ico { inline-size: 26px; block-size: 26px; }
.bmc__zone--value .bmc__title { grid-row: 2; align-self: start; margin-top: 1rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); max-inline-size: none; color: var(--white); }
.bmc__zone--value .bmc__ghost { inset-inline-end: auto; inset-inline-start: -.05em; }

/* the financial foundation — a stronger baseline, a quieter grounded surface, horizontal reading */
.bmc__zone--economics { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; column-gap: clamp(1rem, .6rem + 1.2vw, 2rem); background: #061A18;
  background-image: repeating-linear-gradient(135deg, rgba(174,226,209,.035) 0 1px, transparent 1px 10px); box-shadow: inset 0 1px 0 rgba(174,226,209,.36); }
.bmc__zone--economics .bmc__zone-head { gap: .8rem; }
.bmc__zone--economics .bmc__ico { margin-inline-start: .2rem; }
.bmc__zone--economics .bmc__title { grid-row: auto; align-self: center; max-inline-size: none; font-size: clamp(1.1rem, .95rem + .55vw, 1.45rem); }
.bmc__zone--economics .bmc__ghost { inset-block-end: -.32em; }

/* states — hover is a whisper, selection is the statement, relations illuminate, the rest recede */
.bmc__zone:hover { background: var(--bmc-surface-2); }
.bmc__zone--value:hover { background: radial-gradient(120% 90% at 50% 40%, rgba(21,112,94,.75) 0%, rgba(14,58,53,.7) 48%, var(--bmc-surface-2) 100%); }
.bmc__zone:hover .bmc__ghost { opacity: .08; transform: none; }
.bmc__zone:focus-visible { outline: 3px solid var(--mint); outline-offset: -5px; z-index: 2; }
.bmc__zone.is-active { z-index: 1; background: linear-gradient(160deg, #15705E 0%, #0E3A35 100%); box-shadow: inset 0 0 0 1px rgba(174,226,209,.6), 0 20px 50px rgba(0,0,0,.28); }
.bmc__zone--value.is-active { background: radial-gradient(120% 90% at 50% 40%, rgba(47,167,146,.72) 0%, rgba(21,112,94,.78) 46%, #0E3A35 100%); }
.bmc__zone--value.is-active .bmc__n { color: rgba(4,17,15,.8); }
.bmc__zone.is-active .bmc__ghost { opacity: .2; transform: none; }
.bmc__zone.is-active .bmc__n { color: var(--mint); }
.bmc__zone.is-active .bmc__tick { background: var(--mint); opacity: 1; }
.bmc__zone.is-active .bmc__ico { background: var(--brand); border-color: var(--brand); color: var(--ink-900); box-shadow: none; }
.bmc__zone.is-active .bmc__title { color: var(--white); }
.bmc__zone.is-related { box-shadow: inset 0 0 0 1px rgba(174,226,209,.42); }
.bmc__zone--value.is-related { box-shadow: inset 0 0 0 1px rgba(174,226,209,.55); }
.bmc__zone.is-related .bmc__title { color: var(--white); }
.bmc__zone.is-dim .bmc__title { color: rgba(242,248,245,.64); }
.bmc__zone.is-dim .bmc__ico { opacity: .72; }

/* the foundation title block — the approved financial axis */
.bmc__base { display: flex; align-items: center; gap: 1rem; min-block-size: 48px; padding: .6rem clamp(1rem, .6rem + 1vw, 1.75rem); font-size: .8rem; font-weight: 600; color: var(--on-dark-muted); transition: color var(--bmc-t) var(--hm-ease); }
.bmc__base-fin { display: inline-flex; align-items: center; gap: .65rem; white-space: nowrap; }
.bmc__base-ico { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; border: 1px solid var(--bmc-line-2); color: var(--mint); }
.bmc__base-ico .hm-ico { inline-size: 14px; block-size: 14px; }
.bmc__base-rule { flex: 1; block-size: 1px; background: linear-gradient(to left, var(--bmc-line-2), transparent); }
.bmc__base.is-active { color: var(--mint); }

/* the detail layer — the instrument's readout */
.bmc__detail { position: relative; margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem) clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem); border-radius: 27px; border: 1px solid rgba(174,226,209,.18); background: var(--bmc-surface); color: var(--on-dark); overflow: clip; box-shadow: var(--hm-shadow-sm); }
.bmc__detail-body { position: relative; display: grid; gap: .9rem; justify-items: start; min-block-size: 150px; }
.bmc__detail-ghost { position: absolute; z-index: 0; inset-inline-start: -.06em; inset-block-start: -.42em; font-size: clamp(6rem, 4rem + 5vw, 10.5rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; color: var(--mint); opacity: .09; pointer-events: none; }
.bmc__detail-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: .85rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; color: var(--brand); }
.bmc__detail-group { padding-inline-start: .85rem; border-inline-start: 1px solid var(--bmc-line-2); font-weight: 600; letter-spacing: .01em; color: var(--on-dark-soft); }
.bmc__detail-title { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; gap: .9rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--white); }
.bmc__detail-ico { flex: none; display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 13px; border: 1px solid var(--bmc-line-2); color: var(--mint); }
.bmc__detail-ico .hm-ico { inline-size: 22px; block-size: 22px; }
.bmc__chips { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bmc__chips a, .bmc__chips span { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--bmc-line-2); background: rgba(255,255,255,.03); color: var(--on-dark); font-size: .9rem; font-weight: 600; text-decoration: none; transition: background var(--bmc-t) var(--hm-ease), color var(--bmc-t) var(--hm-ease), border-color var(--bmc-t) var(--hm-ease); }
.bmc__chips a::after { content: "←"; font-size: .85em; color: var(--brand); transition: color var(--bmc-t) var(--hm-ease); }
.bmc__chips a:hover { background: var(--brand); border-color: var(--brand); color: var(--ink-900); }
.bmc__chips a:hover::after { color: var(--ink-900); }
.bmc__chips a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.bmc__chips span { color: var(--on-dark-soft); }
.bmc__related { position: relative; z-index: 1; inline-size: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .8rem; padding-top: .7rem; border-block-start: 1px solid var(--bmc-line); }
.bmc__related-ico { margin-top: .5rem; }
.bmc__related-ico { display: grid; place-items: center; inline-size: 24px; block-size: 24px; color: var(--brand); }
.bmc__related-ico .hm-ico { inline-size: 18px; block-size: 18px; }
.bmc__related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.bmc__related-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .3rem .15rem; border: 0; border-block-end: 1px solid transparent; border-radius: 0; background: transparent; color: var(--on-dark-soft); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: color 180ms var(--hm-ease), border-color 180ms var(--hm-ease); }
.bmc__related-btn .lat { font-size: .68rem; letter-spacing: .14em; color: var(--brand); }
.bmc__related-btn:hover { color: var(--white); border-block-end-color: var(--brand); }
.bmc__related-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
/* the live mini-map — the block's position inside the frame, no words */
.bmc__map { inline-size: clamp(150px, 12vw, 196px); block-size: auto; align-self: center; }
.bmc__map-cell { fill: rgba(174,226,209,.06); stroke: rgba(174,226,209,.3); stroke-width: .6; transition: fill var(--bmc-t) var(--hm-ease), stroke var(--bmc-t) var(--hm-ease); }
.bmc__map-cell.is-related { fill: rgba(174,226,209,.14); stroke: var(--mint); stroke-width: 1; }
.bmc__map-cell.is-active { fill: var(--brand); stroke: var(--brand); }

/* motion — short state transitions only; the readout enters once per selection */
@media (prefers-reduced-motion: no-preference) {
  .bmc__detail-body { animation: bmc-in 260ms var(--hm-ease) both; }
  @keyframes bmc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .bmc *, .bmcm *, .bmc-fin * { animation: none !important; transition: none !important; }
  .bmc__ghost, .bmc__zone:hover .bmc__ghost { transform: none; }
}

/* ---- the approved financial statement, composed as the foundation beneath the canvas ---- */
.bmc-fin__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 1.5rem + 3vw, 5rem); row-gap: 2rem; align-items: center; }
.bmc-fin__copy .eyebrow { margin-bottom: var(--s4); }
.bmc-fin__copy .h2 { margin: 0; }
.bmc-fin__copy .lead { margin: var(--s4) 0 0; max-width: 52ch; }
.bmc-fin__ledger { position: relative; padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); }
.bmc-fin__poles { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.bmc-fin__poles::before { content: ""; position: absolute; inset-inline: 10%; inset-block-start: 50%; block-size: 1px; background: var(--line-strong); }
.bmc-fin__poles li { position: relative; display: grid; justify-items: center; gap: .45rem; padding: 1rem .9rem; background: var(--paper-2); text-align: center; }
.bmc-fin__poles li:first-child { justify-self: start; }
.bmc-fin__poles li:last-child { justify-self: end; }
.bmc-fin__pole-n { font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--brand-mid); }
.bmc-fin__poles strong { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.25; color: var(--ink); }
.bmc-fin__poles small { font-size: .84rem; color: var(--ink-soft); }
.bmc-fin__hinge { position: absolute; z-index: 1; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(50%, -50%); display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 50%; background: var(--hm-night); color: var(--mint); box-shadow: 0 0 0 7px var(--paper-2), 0 12px 26px rgba(7,22,20,.2); }
.bmc-fin__hinge .hm-ico { inline-size: 22px; block-size: 22px; }

/* ---- phone translation is hidden above 599px; the canvas is hidden below ---- */
.bmcm { display: none; }

/* ======================================================================
   TABLET 1024 / 834 — 1024 keeps the canvas geometry; ≤1023 regroups: market
   column (right) · value hinge (centre, full height) · delivery column (left) ·
   financial foundation beneath. Nine blocks, same logic, same interaction.
   ====================================================================== */
@media (max-width: 1023px) {
  .bmc-section__stage { width: var(--content); }
  .bmc { padding: 8px; border-radius: 30px; }
  .bmc__frame, .bmc__detail { border-radius: 22px; }
  .bmc__axes { grid-template-columns: repeat(5, auto); justify-content: center; column-gap: .25rem; padding-inline: .5rem; }
  .bmc__axis { min-block-size: 48px; padding-inline: .8rem; font-size: .74rem; }
  .bmc__canvas { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(124px, auto) minmax(124px, auto) minmax(124px, auto) minmax(112px, auto);
    grid-template-areas:
      "segments segments value value activities activities"
      "relationships relationships value value resources resources"
      "channels channels value value partners partners"
      "revenue revenue revenue cost cost cost"; }
  .bmc__zone { padding: 1rem 1.05rem; }
  .bmc__title { font-size: 1.02rem; max-inline-size: none; }
  .bmc__zone--value .bmc__title { font-size: 1.45rem; }
  .bmc__zone--value .bmc__ico { inline-size: 54px; block-size: 54px; }
  .bmc__ghost { font-size: 5rem; }
  .bmc__detail { padding: 1.5rem 1.5rem; }
  .bmc__detail-title { font-size: 1.7rem; }
  .bmc__map { inline-size: 150px; }
  .bmc-fin__grid { grid-template-columns: minmax(0, 1fr); }
  .bmc-fin__poles::before { inset-inline: 6%; }
}
@media (max-width: 767px) {
  .bmc__detail { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .bmc__map { inline-size: 140px; justify-self: end; }
}

/* ======================================================================
   MOBILE 390 / 360 / 320 — master index of all nine, then four semantic groups
   ====================================================================== */
@media (max-width: 599px) {
  .bmc { display: none; }
  .bmcm { display: block; }
  .bmc-section__stage { width: var(--content); }
  .bmc-section__head { margin-bottom: 1.75rem; }

  .bmcm__index { list-style: none; margin: 0 0 1.25rem; padding: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); }
  .bmcm__cell { inline-size: 100%; min-height: 66px; display: grid; align-content: center; justify-items: start; gap: .2rem; padding: .55rem .65rem; border: 0; border-radius: 12px; background: var(--white); color: var(--ink); text-align: start; font: inherit; cursor: pointer; box-shadow: 0 1px 0 rgba(26,75,68,.06); transition: background 200ms var(--hm-ease), color 200ms var(--hm-ease); }
  .bmcm__cell-n { font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: var(--brand-mid); }
  .bmcm__cell-title { font-size: .78rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
  .bmcm__cell--value { background: var(--hm-night); color: var(--white); }
  .bmcm__cell--value .bmcm__cell-n { color: var(--brand); }
  .bmcm__cell.is-active { background: var(--brand-deep); color: var(--white); }
  .bmcm__cell.is-active .bmcm__cell-n { color: var(--mint); }
  .bmcm__cell:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

  .bmcm__groups { display: grid; gap: 1rem; }
  .bmcm__group { position: relative; overflow: clip; border-radius: 20px; border: 1px solid rgba(174,226,209,.18); background: var(--hm-night); color: var(--on-dark); box-shadow: var(--hm-shadow-sm); }
  .bmcm__group--value { background: linear-gradient(160deg, #15705E 0%, #0E3A35 100%); }
  .bmcm__group--economics { background-image: repeating-linear-gradient(135deg, rgba(174,226,209,.035) 0 1px, transparent 1px 10px); }
  .bmcm__group-head { display: flex; align-items: baseline; gap: .9rem; padding: 1rem 1.1rem .65rem; border-block-end: 1px solid rgba(174,226,209,.14); }
  .bmcm__group-range { font-size: 1.9rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--brand); }
  .bmcm__group--value .bmcm__group-range { color: var(--mint); }
  .bmcm__group-label { font-size: .86rem; font-weight: 600; color: var(--on-dark-soft); }
  .bmcm__rows { list-style: none; margin: 0; padding: 0; }
  .bmcm__item + .bmcm__item { border-block-start: 1px solid rgba(174,226,209,.12); }
  .bmcm__row { inline-size: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: .8rem; min-height: 62px; padding: .8rem 1.1rem; border: 0; border-radius: 0; background: transparent; color: var(--on-dark); text-align: start; font: inherit; cursor: pointer; transition: background 200ms var(--hm-ease); }
  .bmcm__row-n { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--brand); }
  .bmcm__group--value .bmcm__row-n { color: var(--mint); }
  .bmcm__row-ico { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; border: 1px solid rgba(174,226,209,.3); color: var(--mint); transition: background 200ms var(--hm-ease), color 200ms var(--hm-ease); }
  .bmcm__row-ico .hm-ico { inline-size: 17px; block-size: 17px; }
  .bmcm__row-title { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
  .bmcm__row--value .bmcm__row-title { font-size: 1.2rem; color: var(--white); }
  .bmcm__row-chev { color: var(--on-dark-muted); display: grid; place-items: center; transition: transform 220ms var(--hm-ease), color 220ms var(--hm-ease); }
  .bmcm__row-chev .hm-ico { inline-size: 18px; block-size: 18px; }
  .bmcm__row.is-active { background: rgba(174,226,209,.08); }
  .bmcm__row.is-active .bmcm__row-chev { transform: rotate(180deg); color: var(--mint); }
  .bmcm__row.is-active .bmcm__row-ico { background: var(--brand); border-color: var(--brand); color: var(--ink-900); }
  .bmcm__row:focus-visible { outline: 3px solid var(--mint); outline-offset: -4px; }
  .bmcm__panel { padding: .1rem 1.1rem 1.15rem; }
  .bmc__detail-body--compact { gap: .7rem; min-block-size: 0; }
  .bmc__detail-body--compact .bmc__chips a, .bmc__detail-body--compact .bmc__chips span { min-height: 40px; font-size: .84rem; padding-inline: .85rem; }
  .bmc__detail-body--compact .bmc__related-btn { font-size: .84rem; }

  .bmc-fin__poles::before { inset-inline: 4%; }
  .bmc-fin__poles li { padding: .75rem .5rem; }
  .bmc-fin__hinge { inline-size: 42px; block-size: 42px; box-shadow: 0 0 0 6px var(--paper-2), 0 10px 20px rgba(7,22,20,.18); }
}