/* =========================================================================
   GLENGARRA — Strategic Services page
   Page-scoped extensions to the approved homepage design system.
   Loaded ONLY on strategic-services.html — it never touches the homepage.
   Reuses styles.css tokens/components; adds only what this page needs.
   ========================================================================= */

/* Lime full-stop accent — page-scoped so we can use it freely as the
   established brand signal (styles.css scopes it per-context on the homepage). */
.pg-strategic .mark-stop { color: var(--lime); }

/* -------------------------------------------------------------------------
   CLOSING CTA — page-scoped lightening so the TSMC Fab 21 capital project
   actually reads (the shared homepage treatment was tuned for a much
   quieter background image and buries this one almost entirely).
   ------------------------------------------------------------------------- */
.pg-strategic .cta__media img { opacity: 0.85; }
.pg-strategic .cta__media::after {
  background:
    linear-gradient(90deg, rgba(11,32,20,0.92) 0%, rgba(11,32,20,0.78) 32%, rgba(11,32,20,0.32) 62%, rgba(11,32,20,0.18) 100%),
    linear-gradient(180deg, rgba(11,32,20,0.12) 0%, rgba(11,32,20,0.32) 100%);
}

/* -------------------------------------------------------------------------
   CINEMATIC PAUSE — image-only visual breath (no headline, no data).
   Deliberately lighter tint than the other photo treatments on this page:
   the point is to keep the natural pattern legible, not darken it for text.
   ------------------------------------------------------------------------- */
.section-cine { position: relative; overflow: hidden; isolation: isolate; height: clamp(20rem, 42vw, 32rem); }
.section-cine__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.04); }
.section-cine::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,40,25,0.12) 0%, rgba(14,40,25,0.06) 45%, rgba(14,40,25,0.5) 100%);
  mix-blend-mode: multiply;
}
.section-cine__credit {
  position: absolute; left: clamp(1.2rem, 3vw, 2rem); bottom: clamp(0.9rem, 2vw, 1.3rem); z-index: 1;
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.03em; color: #E4EDE6;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* -------------------------------------------------------------------------
   PROPORTION & HIERARCHY (protected baseline, restored to original)
   The page was too long and too many elements read at statement scale.
   Tighten section rhythm and set a clear three-level type hierarchy:
     L1  .display  — a few major editorial statements only
     L2  .h-xl / .engage__q — section & proposition headlines
     L3  Inter body — compact, highly readable
   These overrides are page-scoped; the homepage is unaffected. The
   large-desktop layer near the end of this file grows these further
   above 1500px without touching this protected baseline.
   ------------------------------------------------------------------------- */
.pg-strategic .section { padding-block: clamp(3.4rem, 6vw, 6.25rem); }
.pg-strategic .display  { font-size: clamp(2.3rem, 5vw, 4.3rem); }
.pg-strategic .h-xl     { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.015em; }
.pg-strategic .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.pg-strategic .lead { font-size: clamp(1.1rem, 0.8vw + 0.9rem, 1.35rem); }

/* -------------------------------------------------------------------------
   INTERIOR HERO — now carries a strong engineered-environment image.
   Enters the proposition faster than the homepage hero.
   ------------------------------------------------------------------------- */
.hero--interior { min-height: clamp(33rem, 74vh, 46rem); }
.hero--interior .hero__inner {
  padding-block: clamp(6.75rem, 13vh, 9rem) clamp(2.6rem, 6vh, 4.4rem);
}
.hero--interior h1 { max-width: 18ch; }
.hero--interior .hero__support { max-width: 56ch; }

/* -------------------------------------------------------------------------
   HERO — illustrative project intelligence strip
   ------------------------------------------------------------------------- */
.hero-intel { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); padding-top: clamp(1.2rem, 2.5vw, 1.8rem); border-top: 1px solid rgba(244,241,233,0.22); max-width: 52rem; }
.hero-intel__tag { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: 0.9rem; }
.hero-intel__row { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 3vw, 2.6rem); }
.hero-intel__stat { display: flex; flex-direction: column; gap: 0.3rem; }
.hero-intel__v { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--bone); font-variant-numeric: tabular-nums; }
.hero-intel__k { font-family: var(--sans); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; color: #C6D3C6; }

/* -------------------------------------------------------------------------
   Shared artefact scaffolding — used across sections 01–06
   ------------------------------------------------------------------------- */
.artefact-head { max-width: 52rem; }
.artefact-head__lead { margin-top: 1rem; color: var(--fg-soft); font-size: 1.05rem; max-width: 56ch; }
.artefact-tag { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 1.2rem; }
.theme-forest-deep .artefact-tag { color: var(--lime); }

.invopt, .assure, .diag, .gov, .waterfall, .portfolio { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }

/* Shared 1–5 segment scale (diagnostic ratings, portfolio status) */
.segbar { display: inline-flex; gap: 3px; }
.segbar i { display: block; width: 9px; height: 9px; background: var(--rule); border-radius: 1px; }
.segbar[data-level="1"] i:nth-child(-n+1),
.segbar[data-level="2"] i:nth-child(-n+2),
.segbar[data-level="3"] i:nth-child(-n+3),
.segbar[data-level="4"] i:nth-child(-n+4),
.segbar[data-level="5"] i:nth-child(-n+5) { background: var(--accent); }

/* -------------------------------------------------------------------------
   01 — INVESTMENT DECISION (three-option comparison + confidence metrics)
   ------------------------------------------------------------------------- */
.invopt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 0.4rem; }
.invopt__col { background: var(--bg); padding: clamp(1.2rem, 2.5vw, 1.8rem); display: flex; flex-direction: column; gap: 0.35rem; }
.invopt__col--reco { box-shadow: inset 3px 0 0 var(--accent); }
.invopt__label { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.invopt__cost { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--fg); font-variant-numeric: tabular-nums; margin-top: 0.3rem; }
.invopt__dur { font-family: var(--sans); font-size: 0.85rem; color: var(--fg-soft); }
.invopt__note { font-family: var(--sans); font-size: 0.78rem; color: var(--fg-faint); margin-top: 0.4rem; }
.invopt__col--reco .invopt__note { color: var(--accent); font-weight: 600; }

.invopt__metrics { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: grid; gap: 0.9rem; }
.imetric { display: grid; grid-template-columns: 11rem 1fr; align-items: center; gap: 1rem; }
.imetric__k { font-family: var(--sans); font-size: 0.82rem; color: var(--fg-soft); }
.imetric__bar { display: block; height: 5px; background: var(--rule); border-radius: 1px; overflow: hidden; }
.imetric__fill { display: block; height: 100%; background: var(--accent); }
.imetric__fill--risk { background: var(--ink-faint); }

.invopt__reco { margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: 1.2rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.invopt__reco-k { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.invopt__reco-v { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--accent); }

@media (max-width: 760px) {
  .invopt__grid { grid-template-columns: 1fr; }
  .imetric { grid-template-columns: 8.5rem 1fr; }
}

/* Closing editorial statements — shared by portfolio, etc. */
.bp-emph, .portfolio__close {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.22; letter-spacing: -0.01em;
  max-width: 40ch; color: var(--fg);
  margin-top: clamp(1.8rem, 3.5vw, 2.4rem);
}

/* -------------------------------------------------------------------------
   02 — ASSURANCE (schedule confidence range · cost range · risk figures)
   Cinematic treatment: full-bleed dark image, data floats over the photo.
   ------------------------------------------------------------------------- */
.assure-cine { position: relative; overflow: hidden; isolation: isolate; }
.pg-strategic .assure-cine { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.assure-cine__media { position: absolute; inset: 0; z-index: -2; background: var(--forest-deep); }
.assure-cine__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.5);
  mix-blend-mode: luminosity; opacity: 0.9;
}
.assure-cine__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,40,25,0.62) 0%, rgba(14,40,25,0.75) 45%, rgba(14,40,25,0.92) 100%);
}
.assure-cine__lines { position: absolute; inset: 0; z-index: -1; opacity: 0.45; pointer-events: none; }
.assure-cine__inner { position: relative; z-index: 1; }
.assure-cine__lead { max-width: 58ch; }

.assure__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); margin-top: 0.4rem; padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule); }
.assure__k { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.8rem; }
.assure__foot { display: block; margin-top: 0.9rem; font-size: 0.82rem; color: var(--fg-soft); }

.rangebar__track { position: relative; height: 5px; background: var(--rule); border-radius: 1px; margin-top: 1.8rem; margin-bottom: 2.4rem; }
.rangebar__band { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: 0.3; border-radius: 1px; }
.rangebar__mark { position: absolute; top: -5px; width: 1px; height: 15px; background: var(--accent); }
.rangebar__mark em { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--sans); font-weight: 600; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--fg-faint); white-space: nowrap; }
.rangebar__mark b { position: absolute; top: 1.1rem; left: 50%; transform: translateX(-50%); font-weight: 500; font-family: var(--sans); font-size: 0.78rem; color: var(--fg-soft); white-space: nowrap; }

.costrange { display: flex; flex-direction: column; gap: 0.3rem; }
.costrange__v { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 2.3rem); color: var(--fg); font-variant-numeric: tabular-nums; }
.costrange__l { font-family: var(--sans); font-size: 0.82rem; color: var(--fg-soft); }
.costrange__delta { margin-top: 0.5rem; font-family: var(--sans); font-size: 0.85rem; color: var(--fg-faint); }

.riskfigs { display: flex; gap: clamp(1.6rem, 3vw, 2.4rem); }
.riskfigs__v { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 2.3rem); color: var(--fg); font-variant-numeric: tabular-nums; }
.riskfigs__l { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--fg-soft); margin-top: 0.2rem; }

@media (max-width: 900px) { .assure__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* -------------------------------------------------------------------------
   03 — INDEPENDENT DIAGNOSTIC
   The scorecard is reduced to a quiet evidence strip; the example finding
   is the centrepiece — a senior finding pulled from a confidential review.
   ------------------------------------------------------------------------- */
.diag__strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.8rem clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 0.6rem; padding-bottom: clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--rule);
}
.diag__strip-item { display: flex; align-items: center; gap: 0.6rem; }
.diag__sk { font-family: var(--sans); font-weight: 500; font-size: 0.78rem; color: var(--fg-soft); }
.diag__strip-meta { margin-left: auto; font-family: var(--sans); font-size: 0.75rem; color: var(--fg-faint); }
@media (max-width: 760px) { .diag__strip-meta { margin-left: 0; flex-basis: 100%; } }

.finding--feature {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(2rem, 4vw, 2.8rem); border-top: 2px solid var(--ink);
}
.finding__ref { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.8rem; }
.finding__ref-n { font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.finding__id { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0; }
.finding__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); max-width: 22ch; }
.finding__implication { margin-top: 1.3rem; font-size: 1rem; line-height: 1.6; color: var(--fg-soft); max-width: 58ch; }
.finding__implication .finding__k { display: inline; margin-right: 0.5em; }
.finding__meta { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 3vw, 2.4rem); }
.finding__k { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.finding__v { display: block; margin-top: 0.25rem; font-family: var(--sans); font-size: 0.9rem; color: var(--fg-soft); }

@media (max-width: 700px) {
  .finding__ref { flex-wrap: wrap; gap: 0.4rem 0.9rem; }
}

/* -------------------------------------------------------------------------
   04 — DECISION SYSTEM (bespoke flow diagram, not an org chart)
   Information → Recommendation → Authority → Decision → Action, with
   management-judgement annotations pinned to where the system stalls.
   ------------------------------------------------------------------------- */
.decflow__stage { position: relative; height: clamp(12.5rem, 17vw, 14.5rem); margin-top: clamp(1.8rem, 3.5vw, 2.4rem); }
.decflow__svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--fg-faint); }

.decflow__node { position: absolute; top: 56%; transform: translateX(-50%); width: 7.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.3rem; }
.decflow__nn { font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em; color: var(--fg-faint); }
.decflow__nt { font-family: var(--sans); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.01em; color: var(--fg); }
.decflow__node--flag .decflow__nn { color: var(--accent); }
.decflow__node--flag .decflow__nt { color: var(--fg); font-weight: 700; }

.decflow__annot { position: absolute; transform: translateX(-50%); width: 8rem; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; }
.decflow__annot--up { bottom: 64%; }
.decflow__annot--down { top: 64%; }
.decflow__av { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--fg); font-variant-numeric: tabular-nums; }
.decflow__al { font-family: var(--sans); font-weight: 500; font-size: 0.7rem; color: var(--fg-soft); }
.decflow__annot--flag .decflow__av { color: var(--accent); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.decflow__annot--flag .decflow__al { color: var(--accent); font-weight: 600; }

.decflow__annot--stack { bottom: 64%; display: flex; flex-direction: column; gap: 0.5rem; }
.decflow__annot--stack > div { display: flex; flex-direction: column; gap: 0.1rem; }
.decflow__av2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.decflow__al2 { font-family: var(--sans); font-weight: 500; font-size: 0.64rem; color: var(--fg-faint); }

.decflow__verdict { margin-top: clamp(2rem, 4vw, 2.8rem); padding-left: clamp(1.2rem, 2.5vw, 1.8rem); border-left: 2px solid var(--forest-line); }
.decflow__verdict-k { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.6rem; }
.decflow__verdict-t { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.24; letter-spacing: -0.01em; max-width: 38ch; color: var(--fg); }

.decflow__mobile { display: none; }
.decflow__mobile-stats { display: none; }

.gov__stats { margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: clamp(1.8rem, 3.5vw, 2.8rem); }
.gov__sv { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--fg); font-variant-numeric: tabular-nums; }
.gov__sl { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--fg-soft); margin-top: 0.2rem; }

@media (max-width: 760px) {
  .decflow__stage { display: none; }
  .decflow__mobile {
    display: flex; flex-direction: column; margin-top: 1.6rem;
    border-top: 1px solid var(--rule); list-style: none; padding: 0;
  }
  .decflow__mobile li {
    display: flex; align-items: baseline; gap: 0.9rem;
    padding: 0.75rem 0; border-bottom: 1px solid var(--rule);
    font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--fg);
  }
  .decflow__mobile li b { font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--fg-faint); }
  .decflow__mobile--flag { border-left: 2px solid var(--accent); padding-left: 0.8rem; margin-left: -0.9rem; }
  .decflow__mobile--flag, .decflow__mobile--flag b { color: var(--accent); }
  .decflow__mobile-stats { display: flex; margin-top: 1.8rem; padding-top: 0; border-top: 0; }
  .decflow__verdict { margin-top: 1.8rem; }
}

/* -------------------------------------------------------------------------
   05 — INTERVENTION WATERFALL
   Split composition: photographic backdrop + a bolder, more authoritative
   waterfall — the section's "imagery/optimisation" moment.
   ------------------------------------------------------------------------- */
.pg-strategic .opt-split { padding-block: 0; }
.opt-split__grid { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch; isolation: isolate; }
.opt-split__media { position: relative; overflow: hidden; min-height: 22rem; }
.opt-split__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.62);
  mix-blend-mode: luminosity; opacity: 0.92;
}
.opt-split__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,40,25,0.15) 0%, rgba(14,40,25,0.3) 78%, rgba(14,40,25,0.72) 100%),
              linear-gradient(180deg, rgba(14,40,25,0.3) 0%, rgba(14,40,25,0.5) 70%, rgba(14,40,25,0.78) 100%);
}
/* The seam: a single accent line threading photo into analysis, so the
   two halves read as one composed piece rather than image beside chart. */
.opt-split__grid::before {
  content: ""; position: absolute; top: 12%; bottom: 12%; left: 46.5%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent); z-index: 2;
}
.opt-split__note {
  position: absolute; left: clamp(1.2rem, 3vw, 2rem); right: clamp(1.2rem, 3vw, 2rem); bottom: clamp(1.1rem, 3vw, 1.8rem);
  z-index: 1; font-size: 0.7rem; color: #B9C8BC; letter-spacing: 0.02em;
}
.opt-split__body { position: relative; padding: clamp(3.4rem, 7vw, 5.5rem) clamp(1.6rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 900px) {
  .opt-split__grid { grid-template-columns: 1fr; }
  .opt-split__grid::before { display: none; }
  .opt-split__media { min-height: 15rem; }
}

.waterfall--bold .wf__row { padding: 0.75rem 0; }
.waterfall--bold .wf__label { font-size: 0.92rem; }
.waterfall--bold .wf__value { font-size: 1.05rem; }
.wf__net--bold { margin-top: 1.6rem; padding-top: 1.6rem; border-top-color: var(--accent); position: relative; }
.wf__net--bold .wf__net-k { font-size: 0.85rem; }
.wf__net--bold .wf__net-v { font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1; }

.wf__row { display: grid; grid-template-columns: minmax(110px, 9rem) 1fr minmax(70px, auto); align-items: center; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.wf__row--base { font-weight: 600; }
.wf__label { font-family: var(--sans); font-size: 0.85rem; color: var(--fg-soft); }
.wf__row--base .wf__label { color: var(--fg); }
.wf__track { position: relative; height: 10px; }
.wf__row--base .wf__track { background: var(--rule); }
.wf__bar { position: absolute; top: 0; bottom: 0; border-radius: 1px; }
.wf__bar--base { left: 0; background: var(--ink); }
.wf__bar--down { background: var(--accent); }
.wf__bar--up { background: var(--ink-faint); }
.wf__value { font-variant-numeric: tabular-nums; font-size: 0.92rem; text-align: right; color: var(--fg); }
.wf__value--down { color: var(--accent); }
.wf__value--up { color: var(--fg-faint); }
.wf__net { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.wf__net-k { font-family: var(--sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
.wf__net-v { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--accent); }

@media (max-width: 480px) { .wf__row { grid-template-columns: 6rem 1fr auto; gap: 0.6rem; } .wf__label { font-size: 0.78rem; } }

/* -------------------------------------------------------------------------
   06 — CAPITAL PORTFOLIO VIEW
   ------------------------------------------------------------------------- */
.portfolio__lead { margin-bottom: clamp(1.8rem, 3.5vw, 2.4rem); }
.portfolio__headline { margin-top: 0.9rem; font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.05rem); line-height: 1.28; color: var(--fg); max-width: 34ch; }
.portfolio__hv { color: var(--accent); font-weight: 400; }

/* Command view: unflagged programmes recede to quiet text; flagged ones
   carry the only weight and colour on the page — the eye lands there first. */
.portcmd { margin-top: 0.6rem; border-top: 1px solid var(--rule); }
.portcmd__row {
  display: grid; grid-template-columns: minmax(120px, 0.6fr) 4.5rem 1fr;
  align-items: baseline; gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(0.9rem, 1.8vw, 1.15rem) 0; border-bottom: 1px solid var(--rule);
  position: relative;
}
.portcmd__name { font-family: var(--sans); font-weight: 500; font-size: 0.95rem; color: var(--fg-soft); }
.portcmd__cap { font-family: var(--sans); font-size: 0.85rem; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.portcmd__note { font-family: var(--sans); font-size: 0.86rem; color: var(--fg-faint); }

.portcmd__row--flag::before { content: ""; position: absolute; left: -1rem; top: 0.3rem; bottom: 0.3rem; width: 2px; background: var(--accent); }
.portcmd__row--flag .portcmd__name { color: var(--fg); font-weight: 700; }
.portcmd__row--flag .portcmd__cap { color: var(--fg-soft); }
.portcmd__row--flag .portcmd__note { color: var(--accent); font-weight: 500; }

@media (max-width: 640px) {
  .portcmd__row { grid-template-columns: 1fr; row-gap: 0.3rem; padding: 1rem 0; }
  .portcmd__row--flag::before { left: -0.6rem; }
  .portcmd__cap::before { content: "Capital  "; color: var(--fg-faint); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .portcmd__note:empty { display: none; }
}

.portfolio__stats { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: clamp(1.8rem, 3.5vw, 2.8rem); }
.portfolio__sv { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--fg); font-variant-numeric: tabular-nums; }
.portfolio__sl { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--fg-soft); margin-top: 0.2rem; }

/* -------------------------------------------------------------------------
   MANAGEMENT INTELLIGENCE — the page's visual crescendo
   ------------------------------------------------------------------------- */
.mi__head { max-width: 56ch; }
.mi__report { margin-top: clamp(2.4rem, 5vw, 3.6rem); border: 1px solid var(--rule); padding: clamp(1.6rem, 3vw, 2.6rem); }
.mi__report-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.mi__report-period { font-family: var(--sans); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--fg-soft); }
.mi__quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2rem); }
.mi__cell { display: flex; flex-direction: column; gap: 0.5rem; }
.mi__ck { font-family: var(--sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }
.mi__cv { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--bone); font-variant-numeric: tabular-nums; }
.mi__cv em { font-style: normal; font-family: var(--sans); font-weight: 500; font-size: 0.6em; color: var(--fg-faint); margin-left: 0.3em; }
.mi__cd { font-size: 0.8rem; color: var(--fg-soft); }
.mi__cd--flag { color: var(--lime); font-weight: 600; }

.mi__three { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mi__three-tag { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.mi__point { display: flex; gap: clamp(1.2rem, 3vw, 2rem); align-items: baseline; padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; border-top: 1px solid var(--rule); }
.mi__point:last-child { border-bottom: 1px solid var(--rule); }
.mi__pn { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--fg-faint); flex: none; width: 2.4ch; }
.mi__point p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.3; color: var(--bone); max-width: 52ch; }

@media (max-width: 800px) { .mi__quad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .mi__quad { grid-template-columns: 1fr; } .mi__point { flex-direction: column; gap: 0.4rem; } }

/* -------------------------------------------------------------------------
   SIX INTERVENTION POINTS — compact index/nav into sections 01–06
   Restored verbatim (architecture recovery pass) from commit ea3dd46,
   the last approved version. A mistaken later change had replaced this
   with a Home-style six-card overview (.svc-nav), which duplicated the
   concise directory that belongs on Home; this page's index exists only
   to navigate into the deeper pain-point/intervention/outcome content in
   sections 01-06 below. One non-architectural fix carried forward: the
   accent bar is forest-line, not the historical lime - #intervention-
   points sits on the default bone background, and bright lime is
   reserved for dark backgrounds (the sitewide colour rule established
   after ea3dd46).
   ------------------------------------------------------------------------- */
.ipoints { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.ipoints__item {
  display: grid;
  grid-template-columns: 3rem minmax(200px, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 2.5vw, 2.4rem);
  align-items: baseline;
  padding: clamp(1rem, 2vw, 1.4rem) 0.4rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: padding-left .35s var(--ease);
}
.ipoints__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--forest-line);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.ipoints__item:hover { padding-left: 1.1rem; }
.ipoints__item:hover::before { transform: scaleY(1); }
.ipoints__n { font-family: var(--sans); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--fg-faint); }
.ipoints__t { font-family: var(--sans); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em; color: var(--fg); }
.ipoints__q { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.2; color: var(--fg-soft); }
@media (max-width: 900px) {
  .ipoints__item { grid-template-columns: 2.4rem 1fr; grid-template-areas: "n t" ". q"; row-gap: 0.4rem; }
  .ipoints__n { grid-area: n; } .ipoints__t { grid-area: t; } .ipoints__q { grid-area: q; }
}
@media (max-width: 560px) {
  .ipoints__item { grid-template-columns: 1fr; grid-template-areas: "n" "t" "q"; row-gap: 0.35rem; }
}

/* -------------------------------------------------------------------------
   CLOSE — BRAND + CTA, merged into one section
   ------------------------------------------------------------------------- */
.signature__coda { margin-top: 1.1rem; font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--fg-soft); font-size: clamp(1.05rem, 0.7vw + 0.9rem, 1.25rem); }
.cta-merge-gap { margin-top: clamp(2.6rem, 5vw, 4rem); }
.cta__meta { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 0.35rem; }
.cta__meta .cta__loc { font-size: 0.95rem; letter-spacing: 0.02em; color: #C6D3C6; }
.cta__meta .cta__seg { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #85998A; font-weight: 500; }

/* =========================================================================
   LARGE-DESKTOP ART DIRECTION (Strategic Services) — ≥1500px only
   Sizes use clamp(ORIGINAL, calc(ORIGINAL + slope*(100vw-1500px)), CEILING)
   so 1280/1366/1440/tablet/mobile are untouched. This page's analytical
   artefacts — the decision-system diagram, the cost/schedule/risk
   waterfall, the portfolio oversight table, the six-intervention index —
   are the core differentiator the brief calls out: at large desktop they
   become genuinely substantial objects, not small diagrams in wide cream
   space. The page keeps its own (smaller than Home's) statement-type
   ceiling — that is deliberate character, not neglect.
   ========================================================================= */
@media (min-width: 1500px) {
  /* This page's own (smaller than Home's) statement-type ceiling still
     grows for large desktop — just to a lower peak, preserving its
     denser "instrument" character rather than matching Home's scale. */
  .pg-strategic .display { font-size: clamp(4.3rem, calc(4.3rem + 0.033 * (100vw - 1500px)), 5.5rem); }
  .pg-strategic .h-xl { font-size: clamp(2.8rem, calc(2.8rem + 0.022 * (100vw - 1500px)), 3.7rem); }
  .pg-strategic .lead { font-size: clamp(1.35rem, calc(1.35rem + 0.007 * (100vw - 1500px)), 1.55rem); }
  /* Grows in step with the headline above so a heading never wraps
     tighter than the type driving it needs. */
  .artefact-head { max-width: clamp(52rem, calc(52rem + 0.089 * (100vw - 1500px)), 62rem); }
  .artefact-head__lead { font-size: clamp(1.05rem, calc(1.05rem + 0.009 * (100vw - 1500px)), 1.24rem); }
  .mi__head { max-width: clamp(56ch, calc(56ch + 0.022 * (100vw - 1500px)), 68ch); }

  /* Six Points Where We Intervene — Information (B): a real scannable
     index, not rules stretched across empty width. */
  .ipoints__item { padding-block: clamp(1.4rem, calc(1.4rem + 0.011 * (100vw - 1500px)), 1.85rem); }
  .ipoints__t { font-size: clamp(0.86rem, calc(0.86rem + 0.0084 * (100vw - 1500px)), 1.06rem); }
  .ipoints__q { font-size: clamp(1.35rem, calc(1.35rem + 0.017 * (100vw - 1500px)), 1.75rem); }
  .ipoints__n { font-size: clamp(0.78rem, calc(0.78rem + 0.004 * (100vw - 1500px)), 0.88rem); }

  /* Decision-system diagram — Information (B), the page's hero artefact.
     Node positions are %-based in the HTML so they stay correctly placed
     as the stage grows; only the stage height, node/annotation box widths
     and every type tier grow with it. */
  .decflow__stage { height: clamp(14.5rem, calc(14.5rem + 0.167 * (100vw - 1500px)), 22rem); margin-top: clamp(2.4rem, calc(2.4rem + 0.013 * (100vw - 1500px)), 3rem); }
  .decflow__node { width: clamp(7.5rem, calc(7.5rem + 0.056 * (100vw - 1500px)), 10.5rem); }
  .decflow__nn { font-size: clamp(0.66rem, calc(0.66rem + 0.004 * (100vw - 1500px)), 0.86rem); }
  .decflow__nt { font-size: clamp(0.86rem, calc(0.86rem + 0.007 * (100vw - 1500px)), 1.16rem); }
  .decflow__annot { width: clamp(8rem, calc(8rem + 0.056 * (100vw - 1500px)), 11rem); }
  .decflow__av { font-size: clamp(1.7rem, calc(1.7rem + 0.02 * (100vw - 1500px)), 2.6rem); }
  .decflow__al { font-size: clamp(0.7rem, calc(0.7rem + 0.004 * (100vw - 1500px)), 0.9rem); }
  .decflow__annot--flag .decflow__av { font-size: clamp(2.1rem, calc(2.1rem + 0.024 * (100vw - 1500px)), 3.15rem); }
  .decflow__av2 { font-size: clamp(1.2rem, calc(1.2rem + 0.011 * (100vw - 1500px)), 1.7rem); }
  .decflow__al2 { font-size: clamp(0.64rem, calc(0.64rem + 0.004 * (100vw - 1500px)), 0.84rem); }
  .decflow__verdict-t { font-size: clamp(1.9rem, calc(1.9rem + 0.017 * (100vw - 1500px)), 2.65rem); max-width: 50ch; }
  .finding__implication { font-size: clamp(1rem, calc(1rem + 0.007 * (100vw - 1500px)), 1.17rem); }
  .gov__stats { gap: clamp(1.8rem, calc(1.8rem + 0.024 * (100vw - 1500px)), 3.6rem); }
  .gov__sv { font-size: clamp(2.2rem, calc(2.2rem + 0.02 * (100vw - 1500px)), 3.1rem); }
  .gov__sl { font-size: clamp(0.78rem, calc(0.78rem + 0.004 * (100vw - 1500px)), 0.98rem); }

  /* Cost/schedule/risk waterfall — Information (B). */
  .wf__label { font-size: clamp(0.85rem, calc(0.85rem + 0.005 * (100vw - 1500px)), 1.02rem); }
  .wf__value { font-size: clamp(0.92rem, calc(0.92rem + 0.005 * (100vw - 1500px)), 1.09rem); }
  .waterfall--bold .wf__label { font-size: clamp(0.92rem, calc(0.92rem + 0.007 * (100vw - 1500px)), 1.15rem); }
  .waterfall--bold .wf__value { font-size: clamp(1.05rem, calc(1.05rem + 0.007 * (100vw - 1500px)), 1.28rem); }
  .wf__track { height: 13px; }
  .wf__net-v { font-size: clamp(2.2rem, calc(2.2rem + 0.017 * (100vw - 1500px)), 2.95rem); }
  .wf__net--bold .wf__net-v { font-size: clamp(2.3rem, calc(2.3rem + 0.017 * (100vw - 1500px)), 3rem); }

  /* Management Intelligence — the page's visual crescendo (per the
     component's own header comment), but the report card's own padding
     and the quad grid's gap were both already pinned at their base-rule
     ceiling well below 1500px, so they never grew with the rest of the
     section. */
  .mi__report { padding: clamp(2.6rem, calc(2.6rem + 0.02 * (100vw - 1500px)), 3.6rem); }
  .mi__quad { gap: clamp(2rem, calc(2rem + 0.02 * (100vw - 1500px)), 3.2rem); }

  /* Portfolio oversight table + the €-scale headline/stats — Information
     (B). The command view was much too small relative to the canvas. */
  .portfolio__headline { font-size: clamp(2.05rem, calc(2.05rem + 0.024 * (100vw - 1500px)), 2.95rem); max-width: 40ch; }
  .portcmd__row { padding-block: clamp(1.15rem, calc(1.15rem + 0.007 * (100vw - 1500px)), 1.4rem); }
  .portcmd__name { font-size: clamp(0.95rem, calc(0.95rem + 0.007 * (100vw - 1500px)), 1.18rem); }
  .portcmd__cap { font-size: clamp(0.85rem, calc(0.85rem + 0.005 * (100vw - 1500px)), 1.02rem); }
  .portcmd__note { font-size: clamp(0.86rem, calc(0.86rem + 0.005 * (100vw - 1500px)), 1.03rem); }
  .portfolio__stats { gap: clamp(1.8rem, calc(1.8rem + 0.024 * (100vw - 1500px)), 3.6rem); }
  .portfolio__sv { font-size: clamp(2.2rem, calc(2.2rem + 0.02 * (100vw - 1500px)), 3.1rem); }
  .portfolio__sl { font-size: clamp(0.78rem, calc(0.78rem + 0.004 * (100vw - 1500px)), 0.98rem); }
}