/* =========================================================================
   GLENGARRA — Homepage
   Page-scoped extensions. Loaded ONLY on index.html — never touches
   Strategic Services. Reuses styles.css tokens/components wherever an
   existing class already does the job (svc, ppa, evcase, testi, mk-tag,
   mstep, dims are all reused from styles.css unchanged); the rules below
   are only the small set of new compact components this pass needs:
   the Strategic Services engagement-lifecycle grid, the compact Programme
   & Portfolio Advisory band, and the side-by-side testimonial pair.
   ========================================================================= */

/* -------------------------------------------------------------------------
   00 — NAV: WHAT WE DO (two top-level propositions)
   .mega-item--primary (styles.css) auto-appends "Centre of Glengarra" via
   ::after — correct for Strategic Services, wrong for Delivery Capability,
   so this is a twin rule (same visual weight, no auto-kicker) rather than
   reusing --primary on both.
   ------------------------------------------------------------------------- */
.mega-item--delivery { grid-column: 1 / -1; background: var(--forest); color: var(--bone); }
.mega-item--delivery:hover { background: var(--forest-deep); }
.mega-item--delivery .mega-item__d { color: #C6D3C6; }

/* -------------------------------------------------------------------------
   03 — STRATEGIC SERVICES
   Six propositions as a scannable grid: timing/engagement kicker, name,
   one line. Not a service catalogue — no paragraphs.
   ------------------------------------------------------------------------- */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.8rem, 3vw, 2.6rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.svc-tile {
  position: relative; display: block; padding-left: 1.5rem;
  text-decoration: none; transition: padding-left .25s var(--ease);
}
.svc-tile::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 2px; height: 1.2rem; background: var(--forest-line); transition: height .25s var(--ease); }
.svc-tile:hover { padding-left: 1.8rem; }
.svc-tile:hover::before { height: 1.5rem; }
.svc-tile:hover .svc-tile__t { color: var(--accent); }
.svc-tile__k {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.svc-tile__t { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.22; color: var(--fg); margin-bottom: 0.5rem; transition: color .25s var(--ease); }
.svc-tile__d { display: block; color: var(--fg-soft); font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   03b — PORTFOLIO -> PROGRAMME -> PROJECT -> DELIVERY SYSTEM
   The system the six services operate within. Restrained, static,
   isometric-icon artefact — not a maturity-model flowchart. Icons carry
   the "zoom in" idea through their own form (scattered / grouped / single
   / internally layered), so the arrows are just reading-order markers,
   not the point.
   ------------------------------------------------------------------------- */
.zoom {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.zoom__stage { flex: 1 1 10rem; min-width: 9rem; }
.zoom__icon { width: 4rem; height: auto; display: block; margin-bottom: 0.9rem; }
.zoom__k { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.92rem; color: var(--fg); }
.zoom__d { display: block; margin-top: 0.35rem; color: var(--fg-soft); font-size: 0.85rem; line-height: 1.45; max-width: 22ch; }
.zoom__arrow { align-self: center; color: var(--fg-faint); font-size: 1rem; padding-top: 1.6rem; }
@media (max-width: 760px) {
  .zoom { flex-direction: column; }
  .zoom__arrow { display: none; }
  .zoom__stage { border-left: 2px solid rgba(198,243,81,0.3); padding-left: 1rem; }
}


/* -------------------------------------------------------------------------
   05 — SELECTED WORK (v2)
   Four editorial image+narrative chapters, not cards. .case--reverse flips
   media/narrative to the opposite side for cases 02 and 04. On mobile,
   .case__narrative becomes display:contents so its children reflow as
   direct flex items of .case, letting each piece (meta, title, media,
   challenge, intervention, outcome) get its own explicit order - this is
   what produces the "image after headline, before challenge" mobile
   sequence without duplicating markup.
   ------------------------------------------------------------------------- */
.cases {
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  border-top: 1px solid var(--rule);
}
.case {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: clamp(2.2rem, 4.5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}
.case--reverse .case__media { order: 2; }
.case--reverse .case__narrative { order: 1; }
.case__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.case__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) contrast(1.03); }
.case__media--pending {
  display: flex; align-items: center; justify-content: center;
  background: rgba(198,243,81,0.05); border: 1px solid rgba(198,243,81,0.25);
}
.case__media-note { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.case__meta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.case__num { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.case__tags { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.case__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; margin-bottom: 1rem; }
.case__challenge { color: var(--fg-soft); font-size: 0.98rem; line-height: 1.58; margin-bottom: 1.3rem; max-width: 52ch; }
.case__intervention p { color: var(--fg-soft); font-size: 0.92rem; line-height: 1.52; margin-bottom: 0.8rem; max-width: 52ch; }
.case__intervention ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.2rem; margin-bottom: 1.5rem; }
.case__intervention li { font-size: 0.84rem; line-height: 1.4; color: var(--fg-soft); padding-left: 0.9rem; position: relative; }
.case__intervention li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 1px; background: var(--accent); }
.case__outcome { padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.case__outcome-k { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.55rem; }
.case__outcome p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.42; color: var(--fg); max-width: 46ch; }

@media (max-width: 820px) {
  .case { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .case__narrative { display: contents; }
  .case__meta { order: 1; }
  .case__title { order: 2; }
  .case__media { order: 3; margin-bottom: 0.4rem; }
  /* .case--reverse sets order:2/order:1 on .case__media/.case__narrative
     for the desktop flip (2-class specificity); these mobile rules must
     match that specificity to actually win, "order:3" on the bare
     .case__media above will lose to it otherwise regardless of source
     order. */
  .case--reverse .case__media { order: 3; }
  .case__challenge { order: 4; max-width: none; }
  .case__intervention { order: 5; }
  .case__intervention p { max-width: none; }
  .case__intervention ul { grid-template-columns: 1fr; }
  .case__outcome { order: 6; }
  .case__outcome p { max-width: none; }
}

/* -------------------------------------------------------------------------
   06 — NATURE / STRUCTURE TRANSITION
   One brand moment between Selected Work (evidence) and Method (thinking).
   Unlike Strategic Services' caption-free cinematic pause, this one carries
   the brand line — it is the homepage's visual restatement of it, not a
   mechanical copy of the Strategic Services treatment. Image is provisional
   pending final selection.
   ------------------------------------------------------------------------- */
.section-nature { position: relative; overflow: hidden; isolation: isolate; height: clamp(18rem, 34vw, 26rem); }
.section-nature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.03); }
.section-nature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,32,20,0.18) 0%, rgba(11,32,20,0.08) 42%, rgba(11,32,20,0.66) 100%);
}
.section-nature__inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 4vw, 3rem); }
.section-nature__line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--bone); }
.section-nature__line .mark { font-style: normal; color: var(--lime); }
@media (max-width: 600px) { .section-nature { height: 15rem; } }

/* -------------------------------------------------------------------------
   07 — MARKETS + CLIENT PERSPECTIVE (v2)
   Eight markets, 4x2 tall photographic-card grid (image-consistency pass,
   2026) — a genuine editorial image system, not a sector-icon gallery.
   Cards deliberately tall/portrait (photography-led, not a thumbnail
   strip) per the approved markets-visual-reference.png direction, adapted
   to this design system's tokens (--forest-deep gradient, --sans/--serif
   type scale, --radius) rather than copied literally. .mk-experience below
   NO LONGER shares .mk-grid's column count (was 2-up to match a 2-col
   photo grid; the photo grid is now 4-up, but two wide body-text columns
   still read best as 2-up) - it keeps its own explicit repeat(2,1fr).
   Then two testimonials side by side, reusing .testi__quote / .testi__who
   (styled standalone in styles.css) without the single-quote .testi grid.
   ------------------------------------------------------------------------- */
.mk-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
}
.mk-card {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius);
  overflow: hidden; background-size: cover; background-position: center;
  isolation: isolate;
}
.mk-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(11,32,20,0) 0%, rgba(11,32,20,0.06) 38%, rgba(11,32,20,0.62) 68%, rgba(11,32,20,0.95) 100%);
}
.mk-card__text {
  position: absolute; left: clamp(1rem, 1.6vw, 1.4rem); right: clamp(1rem, 1.6vw, 1.4rem); bottom: clamp(1.1rem, 2vw, 1.5rem); z-index: 1;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.mk-card__name { font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.15; color: var(--bone); }
.mk-card__line { font-family: var(--sans); font-size: clamp(0.78rem, 0.8vw, 0.85rem); line-height: 1.45; color: #C6D3C6; max-width: 30ch; }
.mk-card__arrow {
  margin-top: 0.2rem; font-family: var(--sans); font-weight: 500; font-size: 0.9rem;
  color: var(--lime); transition: transform .3s var(--ease);
}
.mk-card:hover .mk-card__arrow { transform: translateX(4px); }

@media (max-width: 980px) { .mk-grid { grid-template-columns: repeat(2, 1fr); } .mk-card { aspect-ratio: 4/5; } }
@media (max-width: 560px) { .mk-grid { grid-template-columns: 1fr; } .mk-card { aspect-ratio: 4/5; } }

.mk-experience {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule);
}
.mk-experience__body { margin-top: 0.8rem; color: var(--fg-soft); font-size: 0.95rem; line-height: 1.62; }
@media (max-width: 760px) { .mk-experience { grid-template-columns: 1fr; gap: 1.8rem; } }

/* -------------------------------------------------------------------------
   TESTIMONIAL CAROUSEL — one substantial quote at a time, user-controlled
   only (no autoplay). All slides sit in the same grid cell (grid-area:
   1/1) so the tallest quote sets the container height and switching
   slides never jumps the layout; .is-active crossfades via opacity.
   Editorial register only — no cards, no stars, no headshots. Behaviour
   in js/main.js.
   ------------------------------------------------------------------------- */
.testi-carousel {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule);
}
.testi-carousel__viewport { position: relative; }
.testi-carousel__list { display: grid; list-style: none; margin: 0; padding: 0; }
.testi-carousel__slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s var(--ease);
  position: relative;
}
.testi-carousel__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.testi-carousel__quote {
  margin: 0; position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.4rem, 1.6vw + 0.9rem, 2rem);
  line-height: 1.4; letter-spacing: -0.01em;
  color: var(--fg); max-width: 46ch;
}
.testi-carousel__quote::before {
  content: "\201C"; position: absolute; top: -0.6rem; left: -0.06em; z-index: -1;
  font-family: var(--serif); font-size: 4.8rem; line-height: 1; font-style: normal;
  color: var(--forest-line); opacity: 0.22;
}
.testi-carousel__who { margin-top: clamp(1.4rem, 2.5vw, 2rem); display: flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; }
.testi-carousel__role { font-family: var(--sans); font-weight: 600; font-size: 0.98rem; color: var(--fg); }
.testi-carousel__sector { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.testi-carousel__sector::before { content: "\00b7"; margin-right: 0.6em; color: var(--fg-faint); }

.testi-carousel__nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.testi-carousel__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  border: 1px solid var(--rule); background: transparent; color: var(--fg);
  font-size: 1.1rem; cursor: pointer; padding: 0;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.testi-carousel__arrow:hover { border-color: var(--accent); color: var(--accent); }
.testi-carousel__dots { display: flex; align-items: center; gap: 0.55rem; }
.testi-carousel__dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  border: 1px solid var(--rule); background: transparent; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.testi-carousel__dot.is-active { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
.testi-carousel__count { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.14em; color: var(--fg-faint); margin-left: 0.2rem; }
.testi-carousel__count #testiCount { color: var(--fg-soft); }

@media (prefers-reduced-motion: reduce) {
  .testi-carousel__slide { transition: none; }
}

.insights-note { margin-top: clamp(1.6rem, 3vw, 2.2rem); font-size: 0.85rem; color: var(--fg-faint); display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   06a — METHOD DIAGRAM, DESKTOP (instrument-panel layout)
   Two input groups (project dimensions, delivery system) stack on the
   left and visibly converge — via a vertical spine and a small ringed
   junction node — into a single line before independent judgement, then
   into clear action. Fixed-height group boxes + flex centring keep every
   connecting line perfectly horizontal — no curves, no per-item nodes.
   The convergence geometry itself carries a faint lime tint (it's the
   connective idea, not decoration); the strongest lime treatment is
   still reserved for judgement (the tick) and action (the bordered box).
   ------------------------------------------------------------------------- */
.instr {
  --instr-box-h: clamp(4.2rem, 5vw, 5.4rem);
  display: flex; align-items: center;
  gap: clamp(1.8rem, 3.5vw, 3.2rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(0.6rem, 1vw, 1rem);
}
.instr__groups {
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(1.2rem, 2.2vw, 1.7rem);
  flex: 0 0 clamp(15rem, 23vw, 20rem);
  margin-right: 0.55rem;
}
/* the vertical spine: both group boxes converge here before the single
   line onward to independent judgement — the visual "we connect these" */
.instr__groups::after {
  content: ""; position: absolute; right: -0.55rem; width: 1px;
  top: calc(var(--instr-box-h) / 2); bottom: calc(var(--instr-box-h) / 2);
  background: rgba(198,243,81,0.45);
}
/* the junction: a small ringed node marking the exact convergence point */
.instr__groups::before {
  content: ""; position: absolute; right: -0.55rem; top: 50%;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1px solid var(--lime); background: var(--forest-deep);
  transform: translate(50%, -50%); z-index: 1;
}
.instr__group {
  min-height: var(--instr-box-h);
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(198,243,81,0.3); border-radius: var(--radius);
  padding: 0.9rem clamp(1rem, 1.6vw, 1.4rem);
}
.instr__gk { display: block; font-family: var(--sans); font-weight: 600; font-size: clamp(0.95rem, 1vw, 1.15rem); color: var(--bone); }
.instr__gv { display: block; margin-top: 0.4rem; font-family: var(--sans); font-size: clamp(0.8rem, 0.85vw, 0.92rem); letter-spacing: 0.02em; color: #A9BBAE; }
.instr__line {
  flex: 0 0 clamp(1.8rem, 3.2vw, 3.2rem); align-self: center;
  height: 1px; background: rgba(198,243,81,0.45);
}
.instr__line--short { flex-basis: clamp(1.4rem, 2.4vw, 2.4rem); }
.instr__node { display: flex; align-items: center; gap: 0.7em; flex: 0 0 auto; }
.instr__node--judgement::before { content: ""; flex: 0 0 auto; width: 2px; height: 1.3em; background: var(--lime); }
.instr__node--judgement .instr__nt { font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.35rem); color: var(--bone); white-space: nowrap; }
.instr__node--action {
  border: 1px solid var(--lime); border-radius: var(--radius);
  padding: 0.7em clamp(1.1rem, 1.8vw, 1.5rem);
}
.instr__node--action .instr__nt { font-family: var(--sans); font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.35rem); color: var(--lime); letter-spacing: 0.01em; white-space: nowrap; }
@media (max-width: 900px) {
  .instr__nt { white-space: normal; }
}

/* -------------------------------------------------------------------------
   06b — METHOD DIAGRAM, MOBILE TREATMENT
   The instrument-panel layout above needs more than 760px of its own
   container to lay out without overflowing (confirmed: at 761-900px it
   pushed wider than its container and caused document-level horizontal
   scroll). Handoff moved to 900px so the desktop diagram only ever
   renders where it actually fits; below that breakpoint it is replaced
   with a compact text equivalent carrying the same relationships. Desktop
   layout itself is unchanged above the breakpoint.
   ------------------------------------------------------------------------- */
.dims__mobile { display: none; }
@media (max-width: 900px) {
  .instr { display: none; }
  .dims__mobile {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding-block: 0.6rem 0.2rem;
  }
  .dims__mrow {
    width: 100%; max-width: 22rem; text-align: center;
    border: 1px solid rgba(198,243,81,0.3); border-radius: var(--radius);
    padding: 0.85rem 1rem;
  }
  .dims__mk { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.92rem; color: var(--bone); }
  .dims__mv { display: block; margin-top: 0.35rem; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; color: #A9BBAE; }
  .dims__mrow--action { border-color: var(--lime); }
  .dims__mrow--action .dims__mk { color: var(--lime); }
  .dims__mplus, .dims__marrow { font-family: var(--sans); font-weight: 600; color: var(--lime); font-size: 0.9rem; }
}

/* -------------------------------------------------------------------------
   08 — BRAND / CTA, merged into one closing section
   Hierarchy fix: the brand signature is now a small subordinate line
   (same register as .hero__sig/.footer__sig), not a competing headline —
   "Let's talk about your next capital challenge" is the only large
   statement in this section.
   ------------------------------------------------------------------------- */
.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; }
.signature__belief { margin-top: 0.9rem; }

/* -------------------------------------------------------------------------
   10 — HOMEPAGE MEASURE OVERRIDES (protected baseline, unchanged)
   ------------------------------------------------------------------------- */
.pg-home .svc-tile__t { font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.pg-home .hero__support { max-width: 62ch; }
.pg-home .signature__inner, .pg-home .cta__inner { max-width: clamp(20rem, 46%, 44rem); }
.pg-home .cta__lead { max-width: 58ch; }

/* =========================================================================
   11 — LARGE-DESKTOP ART DIRECTION (homepage) — ≥1500px only
   Every rule below is scoped to this media query and, for sizes, written
   as clamp(ORIGINAL, calc(ORIGINAL + slope*(100vw-1500px)), CEILING) so
   1280/1366/1440/tablet/mobile render exactly as before. This is where
   sections that were "laptop-sized inside a huge canvas" actually change
   character: the six-service grid becomes a real information composition,
   Selected Work's image+narrative cases gain genuine editorial scale, the
   Method diagram becomes the hero artefact it's meant to be, Markets cards
   and the PPA band get real presence, testimonials read as a considered
   pairing rather than two text columns.
   ========================================================================= */
@media (min-width: 1500px) {
  /* "Complex doesn't have to mean complicated." — Statement (A): stays
     contained, but the two columns get a little more breathing room so
     the relationship reads as composed rather than just wide. */
  #difference .statement__grid { gap: clamp(4.5rem, calc(4.5rem + 0.089 * (100vw - 1500px)), 7rem); }
  #difference .lead { max-width: 48ch; }

  /* Strategic Services six-tile grid — Information (B). Real presence:
     bigger title/description, a taller accent rule, more internal air
     per tile so six propositions read as a considered field, not
     annotations under the headline. */
  .svc-tile { padding-left: clamp(1.5rem, 1.8vw, 2.2rem); }
  .svc-tile::before { width: 3px; }
  .svc-tile__k { font-size: clamp(0.7rem, 0.75vw, 0.82rem); margin-bottom: 0.7rem; }
  /* Original is page-scoped as .pg-home .svc-tile__t, so the override
     must match that specificity or it's silently ignored; its own curve
     (1.5vw) hasn't reached the 1.5rem ceiling until 1600px, so the floor
     here is the TRUE value at 1500px (1.406rem), not the ceiling. */
  .pg-home .svc-tile__t { font-size: clamp(1.406rem, calc(1.406rem + 0.0211 * (100vw - 1500px)), 2rem); margin-bottom: 0.7rem; }
  .svc-tile__d { font-size: clamp(0.9rem, calc(0.9rem + 0.007 * (100vw - 1500px)), 1.05rem); line-height: 1.55; }
  .svc-grid { gap: clamp(2.6rem, calc(2.6rem + 0.0284 * (100vw - 1500px)), 3.4rem); }

  /* Zoom flow diagram (Portfolio → Programme → Project → Delivery system)
     — Information (B). Icons and labels grow with the diagram instead of
     sitting small in a much wider row. */
  .zoom { gap: clamp(2.6rem, calc(2.6rem + 0.0498 * (100vw - 1500px)), 4rem); }
  .zoom__icon { width: clamp(4rem, calc(4rem + 0.033 * (100vw - 1500px)), 6rem); }
  .zoom__k { font-size: clamp(0.92rem, calc(0.92rem + 0.011 * (100vw - 1500px)), 1.15rem); }
  .zoom__d { font-size: clamp(0.85rem, calc(0.85rem + 0.007 * (100vw - 1500px)), 1rem); max-width: 26ch; }
  .zoom__arrow { font-size: clamp(1rem, calc(1rem + 0.011 * (100vw - 1500px)), 1.25rem); }

  /* Two Connected Parts — Strategic Services / Delivery Capability. Body
     copy gets real column presence instead of reading as a slightly-larger
     version of the same short paragraph. */
  .mk-experience { gap: clamp(1.2rem, calc(1.2rem + 0.0569 * (100vw - 1500px)), 2.8rem); margin-top: clamp(2.2rem, calc(2.2rem + 0.0356 * (100vw - 1500px)), 3.7rem); }
  .mk-experience .subtle-tag { font-size: clamp(0.76rem, calc(0.76rem + 0.005 * (100vw - 1500px)), 0.9rem); }
  .mk-experience__body { font-size: clamp(0.95rem, calc(0.95rem + 0.0107 * (100vw - 1500px)), 1.15rem); line-height: 1.6; max-width: 42ch; }

  /* Selected Work — Evidence/Photography (C), the clearest offender: an
     editorial split with real image presence and body copy that reads at
     genuine article scale, not a slightly-larger version of the same
     small block. Ratio nudges from 1:1.08 toward 1:1.2 so the narrative
     column has real room, while the image keeps its existing 4:3 crop
     (only the box grows — no re-crop, no aspect change). */
  .case { grid-template-columns: 1fr 1.2fr; gap: clamp(3rem, 4vw, 5rem); padding-block: clamp(4rem, 5vw, 6rem); }
  .case__title { font-size: clamp(1.85rem, calc(1.85rem + 0.03 * (100vw - 1500px)), 2.6rem); max-width: 22ch; margin-bottom: 1.3rem; }
  .case__challenge { font-size: clamp(0.98rem, calc(0.98rem + 0.0096 * (100vw - 1500px)), 1.25rem); line-height: 1.62; max-width: 58ch; }
  .case__intervention p { font-size: clamp(0.92rem, calc(0.92rem + 0.0082 * (100vw - 1500px)), 1.1rem); max-width: 58ch; }
  .case__outcome p { font-size: clamp(1.22rem, calc(1.22rem + 0.0044 * (100vw - 1500px)), 1.4rem); max-width: 50ch; }
  .case__meta { margin-bottom: 1.3rem; }
  .case__num { font-size: clamp(0.7rem, calc(0.7rem + 0.005 * (100vw - 1500px)), 0.8rem); }
  .case__tags { font-size: clamp(0.7rem, calc(0.7rem + 0.005 * (100vw - 1500px)), 0.8rem); }

  /* The Glengarra Method's dimensions instrument — Information (B), meant
     to be the hero artefact of its section. Every dimension of the
     diagram grows together (box height, group width, line lengths, all
     three type tiers) so it reads as a genuinely large, authoritative
     object rather than a small component in a big dark section. */
  .dims { padding: clamp(1.6rem, 2vw, 2.6rem) clamp(1.6rem, 2.4vw, 3rem); }
  .instr {
    /* Base --instr-box-h (5vw) hasn't reached its 5.4rem ceiling until
       1728px, so 4.6875rem is the true value at 1500px. */
    --instr-box-h: clamp(4.6875rem, calc(4.6875rem + 0.132 * (100vw - 1500px)), 8.4rem);
    gap: clamp(3.2rem, calc(3.2rem + 0.089 * (100vw - 1500px)), 5.2rem);
    padding-block: clamp(2.4rem, calc(2.4rem + 0.033 * (100vw - 1500px)), 3.9rem) clamp(0.9375rem, calc(0.9375rem + 0.0236 * (100vw - 1500px)), 1.6rem);
  }
  .instr__groups { flex-basis: clamp(20rem, calc(20rem + 0.222 * (100vw - 1500px)), 30rem); }
  /* instr__gk/gv/line/nt curves are all still on their own vw-ramp (or
     bound to the original clamp's minimum) at 1500px, not yet at their
     ceilings — floors below are the measured true values, not the
     ceilings, so nothing jumps at the threshold. */
  .instr__gk { font-size: clamp(0.95rem, calc(0.95rem + 0.0284 * (100vw - 1500px)), 1.75rem); }
  .instr__gv { font-size: clamp(0.8rem, calc(0.8rem + 0.0124 * (100vw - 1500px)), 1.15rem); }
  .instr__line { flex-basis: clamp(3rem, calc(3rem + 0.0747 * (100vw - 1500px)), 5.1rem); }
  .instr__line--short { flex-basis: clamp(2.25rem, calc(2.25rem + 0.0622 * (100vw - 1500px)), 4rem); }
  .instr__node--judgement .instr__nt,
  .instr__node--action .instr__nt { font-size: clamp(1.219rem, calc(1.219rem + 0.0402 * (100vw - 1500px)), 2.35rem); }
  .instr__node--action { padding: 0.85em clamp(1.6rem, 2.2vw, 2.4rem); }
  .dims__title { font-size: clamp(1.2rem, calc(1.2rem + 0.013 * (100vw - 1500px)), 1.5rem); }
  .mstep__t { font-size: clamp(2rem, calc(2rem + 0.02 * (100vw - 1500px)), 2.6rem); }
  .mstep__d { font-size: clamp(0.92rem, calc(0.92rem + 0.009 * (100vw - 1500px)), 1.1rem); max-width: 28ch; }

  /* Markets card grid — Evidence/Photography (C). Cards were already the
     approved 4×2 image-led direction; at large desktop they simply get
     to be substantial photographic objects, not a bigger thumbnail strip. */
  .mk-grid { gap: clamp(1.5rem, calc(1.5rem + 0.007 * (100vw - 1500px)), 2rem); }
  .mk-card__name { font-size: clamp(1.219rem, calc(1.219rem + 0.0125 * (100vw - 1500px)), 1.5rem); }
  .mk-card__line { font-size: clamp(0.78rem, calc(0.78rem + 0.0078 * (100vw - 1500px)), 1rem); max-width: 32ch; }

  /* Testimonial carousel — a genuinely large single quote, not a small
     text column, at large desktop. */
  .testi-carousel__quote { font-size: clamp(2rem, calc(2rem + 0.0213 * (100vw - 1500px)), 2.6rem); max-width: 34ch; }
  .testi-carousel__role { font-size: clamp(0.98rem, calc(0.98rem + 0.006 * (100vw - 1500px)), 1.15rem); }
  .testi-carousel__arrow { width: clamp(2.4rem, calc(2.4rem + 0.007 * (100vw - 1500px)), 2.7rem); height: clamp(2.4rem, calc(2.4rem + 0.007 * (100vw - 1500px)), 2.7rem); }
}