/* =========================================================================
   DELIVERY CAPABILITY — page-scoped styles
   Loaded alongside the shared css/styles.css. Only classes not already
   defined globally live here. A handful of components (.hero--interior,
   .cta-merge-gap, .signature__sig) exist in strategic-services.css /
   homepage.css but are file-scoped by loading convention, not shared —
   this page does not load either file, so the patterns are replicated
   here rather than reused across files.
   ========================================================================= */

.pg-delivery .mark-stop { color: var(--lime); }

/* -------------------------------------------------------------------------
   01 — HERO
   No photography (see delivery-capability.html head comment). Base .hero
   already falls back to --forest-deep with no .hero__media present, so
   --nomedia only adds a faint depth vignette rather than overriding layout.
   ------------------------------------------------------------------------- */
.hero--interior { min-height: clamp(33rem, 74vh, 46rem); }
.hero--interior .hero__inner { padding-block: clamp(6rem, 13vh, 10rem) clamp(3rem, 6vh, 5rem); }
.hero--interior h1 { max-width: 19ch; }
.hero--interior .hero__support { max-width: 58ch; }
.hero--nomedia {
  background:
    radial-gradient(120% 100% at 100% 100%, rgba(198,243,81,0.06), transparent 62%),
    var(--forest-deep);
}

/* -------------------------------------------------------------------------
   03 — HOW WE ENGAGE
   Four stages, increasing structural complexity told through the icon
   grammar itself (same isometric roofline motif as the homepage .zoom
   diagram): plain mark -> mark inside a dashed borrowed boundary -> three
   connected marks -> mark inside a solid, internally-divided boundary.
   ------------------------------------------------------------------------- */
.progression { display: flex; align-items: flex-start; gap: 0; margin-top: clamp(2.6rem, 5vw, 3.6rem); padding-top: clamp(1.8rem, 3.5vw, 2.4rem); border-top: 1px solid var(--rule); }
.progression__stage { flex: 1 1 0; min-width: 0; padding-right: clamp(1rem, 2.5vw, 2rem); position: relative; }
.progression__stage:not(:last-child)::after {
  content: ""; position: absolute; top: 24px; right: clamp(0.2rem, 1vw, 0.6rem);
  width: clamp(0.8rem, 2vw, 1.6rem); height: 1px;
  /* #engage sits on the default bone background - forest-line, not lime
     (bright lime is correct only on dark backgrounds). */
  background: linear-gradient(90deg, rgba(30,92,58,0.55), rgba(30,92,58,0.1));
}
.progression__icon { width: 3.6rem; height: auto; display: block; margin-bottom: 0.9rem; }
.progression__n { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--forest-line); margin-bottom: 0.5rem; }
.progression__k { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.96rem; color: var(--fg); margin-bottom: 0.4rem; }
.progression__d { display: block; color: var(--fg-soft); font-size: 0.84rem; line-height: 1.48; max-width: 20ch; }
.progression__note { margin-top: 1.2rem; color: var(--fg-faint); font-size: 0.86rem; font-style: italic; }

@media (max-width: 820px) {
  .progression { flex-direction: column; gap: 1.8rem; }
  .progression__stage { padding-right: 0; padding-left: 1.1rem; border-left: 2px solid rgba(30,92,58,0.3); }
  .progression__stage::after { display: none; }
  .progression__d { max-width: none; }
}

/* -------------------------------------------------------------------------
   02 — DISCIPLINES
   Eight coherent groups, not an icon grid: same hairline-tick list
   pattern as .case__intervention li elsewhere on the site. Grid wraps to
   two rows of four at desktop width.
   ------------------------------------------------------------------------- */
.cap-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.8rem, 3vw, 2.4rem); margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.cap-group { padding-top: clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid var(--rule); }
.cap-group__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--fg); margin-bottom: 1rem; line-height: 1.25; }
.cap-group ul { display: flex; flex-direction: column; gap: 0.55rem; }
.cap-group li { font-size: 0.86rem; line-height: 1.4; color: var(--fg-soft); padding-left: 0.9rem; position: relative; }
.cap-group li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 1px; background: var(--fg-faint); }

@media (max-width: 900px) { .cap-groups { grid-template-columns: 1fr 1fr; gap: 2rem 1.6rem; } }
@media (max-width: 560px) { .cap-groups { grid-template-columns: 1fr; gap: 1.8rem; } }

/* -------------------------------------------------------------------------
   04 — WORKING WITH GLENGARRA
   "What this includes" and "Relevant to" as two restrained pill lists,
   not a branded framework or five market cards.
   ------------------------------------------------------------------------- */
.wwg-lead { max-width: 62ch; }
.owner-side__who { margin-top: clamp(2.4rem, 4.5vw, 3.2rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule); }
.owner-side__who .subtle-tag { display: block; margin-bottom: 1rem; }
.owner-side__list { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; }
.owner-side__list span { font-family: var(--sans); font-size: 0.82rem; color: var(--fg-soft); padding: 0.45rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; }

/* -------------------------------------------------------------------------
   05 — PROVEN IN DELIVERY
   Restrained reference to the approved Switzerland case; no new claims.
   ------------------------------------------------------------------------- */
.evidence { max-width: 76ch; padding-top: clamp(2rem, 4vw, 2.6rem); border-top: 1px solid var(--rule); }
.evidence__meta { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 1.2rem; }
.evidence h2 { margin-bottom: 1.4rem; }
.evidence__body { color: var(--fg-soft); font-size: 1rem; line-height: 1.62; margin-bottom: 1.6rem; max-width: 62ch; }

/* -------------------------------------------------------------------------
   06 — CLOSING CTA
   Replicated from homepage.css (.signature__sig / .cta-merge-gap) — this
   page does not load homepage.css so the pattern is reproduced here.
   ------------------------------------------------------------------------- */
.cta-merge-gap { margin-top: clamp(2.6rem, 5vw, 4rem); }
.signature__sig {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  color: #A9BBAE; font-size: clamp(1.05rem, 1vw + 0.85rem, 1.3rem);
}
.signature__sig .mark { font-style: normal; }

/* =========================================================================
   LARGE-DESKTOP ART DIRECTION (Delivery Capability) — ≥1500px only
   clamp(ORIGINAL, calc(ORIGINAL + slope*(100vw-1500px)), CEILING) throughout
   so 1280/1366/1440/tablet/mobile are untouched. Disciplines and the
   engagement progression are both Information/System sections — neither
   should still read as laptop-sized once the container has grown.
   ========================================================================= */
@media (min-width: 1500px) {
  .progression { gap: 0; margin-top: clamp(3.6rem, calc(3.6rem + 0.013 * (100vw - 1500px)), 4.2rem); }
  .progression__icon { width: clamp(3.6rem, calc(3.6rem + 0.033 * (100vw - 1500px)), 5.6rem); }
  .progression__k { font-size: clamp(0.96rem, calc(0.96rem + 0.011 * (100vw - 1500px)), 1.2rem); }
  .progression__d { font-size: clamp(0.84rem, calc(0.84rem + 0.007 * (100vw - 1500px)), 1rem); max-width: 24ch; }

  .cap-groups { gap: clamp(2.4rem, calc(2.4rem + 0.02 * (100vw - 1500px)), 3.3rem); }
  .cap-group__t { font-size: clamp(1.25rem, calc(1.25rem + 0.017 * (100vw - 1500px)), 1.65rem); }
  .cap-group li { font-size: clamp(0.86rem, calc(0.86rem + 0.007 * (100vw - 1500px)), 1.03rem); line-height: 1.5; }

  .wwg-lead { font-size: clamp(1.15rem, calc(1.15rem + 0.007 * (100vw - 1500px)), 1.32rem); }
  .owner-side__list span { font-size: clamp(0.82rem, calc(0.82rem + 0.005 * (100vw - 1500px)), 0.98rem); padding: clamp(0.45rem, calc(0.45rem + 0.002 * (100vw - 1500px)), 0.55rem) clamp(0.9rem, calc(0.9rem + 0.007 * (100vw - 1500px)), 1.15rem); }
}

/* =========================================================================
   SECTION-RHYTHM WHITESPACE TIGHTENING
   #disciplines and #engage run back-to-back with no intervening dark
   section, so their shared .section padding-block (up to 9rem top+bottom)
   was compounding to as much as 18rem between them. Scoped top-padding
   override only, same technique used on the About page (#character) -
   global --section-y untouched.
   ========================================================================= */
#engage { padding-top: clamp(2.6rem, 4.5vw, 4.5rem); }