/* =========================================================================
   OUR WORK — page-scoped styles
   Loaded alongside the shared css/styles.css. Journey: Scale (hero) ->
   The Problem -> Why It Matters Here -> The ~1% Philosophy -> The Value
   Equation -> What We Deliver -> Complex Terrain (nature interlude) ->
   The Impact of Our Work -> Value Beyond Savings -> Major Programme
   (Lonza) -> Experience Behind the Advice -> Six Routes (Strategic
   Services) -> Purpose -> Trust -> Close.

   ART-DIRECTION PASS (2026): the content/argument is unchanged from the
   prior pass; this pass disciplines the EXECUTION.
    - Typographic system reduced to four consistent levels — see the
      "TYPOGRAPHIC SYSTEM" block below .mark-stop. Big statements
      (Problem, ~1%, Purpose, CTA) now share .display; every other
      section heading now shares .h-lg — previously an arbitrary mix of
      .h-xl/.h-lg with no governing logic.
    - One new full-bleed nature interlude ("Complex Terrain. Clearer
      decisions.") breaks up what was a four-section run of consecutive
      light/bone-2 sections between What We Deliver and Lonza — see 06B.
    - The Impact of Our Work: Switzerland/Hospitality dropped from the
      grid (no approved image exists) rather than shown as a text-only
      card beside photographs; Belgium/Ireland now form an even two-up
      row instead of a leftover slot in a three-column grid — see 07.
    - Experience Behind the Advice gains Belgium as a sixth photographic
      case (same photo as its Impact card — established reuse discipline)
      so the grid is a clean 3+3 with no orphan cell, and the weak
      "Also — Hospitality... UK..." footnote has been removed — see 10.
   ONE visual language throughout: warm bone / bone-2 for light rhythm,
   theme-forest-deep for the three dark "reset" moments (~1%, Complex
   Terrain, Lonza), lime used only as a controlled accent (never a giant
   number covering a photograph). One shared numeric-evidence component
   (.ow-fact) is used everywhere a figure appears, on light or dark
   backgrounds, so the page reads as one system rather than a sequence of
   bespoke designs. .statement/.chars/.when are reused verbatim from
   styles.css (the same components Home already uses) rather than
   inventing new ones.
   ========================================================================= */

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

/* -------------------------------------------------------------------------
   SECTION-RHYTHM OVERRIDES
   .section's shared padding-block can compound to ~18rem where two
   consecutive sections both carry it in full (no .section--tight, no
   custom-padded interlude between them). Three such seams on this page;
   halved on the second section's leading edge only, same technique as
   About's #character override.
   ------------------------------------------------------------------------- */
#value { padding-top: clamp(2.4rem, 4vw, 4rem); }
#deliver { padding-top: clamp(2.4rem, 4vw, 4rem); }
#trusted { padding-top: clamp(2.4rem, 4vw, 4rem); }

/* -------------------------------------------------------------------------
   TYPOGRAPHIC SYSTEM — four levels, applied consistently (art-direction
   pass). Rather than each section choosing its own heading class:
     A. MAJOR STATEMENTS — .display (shared, already used by Hero/CTA):
        The Problem headline, the ~1% pairing (numeral + .h-xl below it),
        Purpose's headline, the closing CTA. Used selectively.
     B. SECTION HEADINGS — .h-lg on every other section head (Why It
        Matters, Value Equation, What We Deliver, Impact of Our Work,
        Value Is More Than Savings, Experience Behind the Advice, How We
        Get There). Previously a mix of .h-xl/.h-lg with no clear logic.
     C. BODY/INTRO — .lead + .measure/.measure-sm, consistently.
     D. EVIDENCE/METADATA — .eyebrow, .ow-fact__k, .ow-prove__loc etc,
        already a disciplined small-caps system; unchanged.
   The rules below also fold in spacing that was previously scattered as
   one-off inline style="" attributes (eyebrow margins, .chars margins,
   .ow-source width) so the same values are declared once. ------------- */
.pg-work .section-head .eyebrow,
.pg-work .when .eyebrow,
.pg-work .statement__grid .eyebrow { margin-bottom: 1.4rem; }
.pg-work .chars { margin-top: 1.4rem; }
.ow-onepct__headline { margin-top: 0.6rem; }
.ow-prove__intro { margin-top: 0.8rem; }
.ow-purpose__coda { margin-top: 1.4rem; font-style: italic; }

/* -------------------------------------------------------------------------
   01 — HERO — PORTFOLIO SCALE
   Unchanged. Full-bleed photographic hero (shared .hero/.hero__media/
   .hero__lines from styles.css). Three real, verified aggregate facts,
   not project-specific claims.
   ------------------------------------------------------------------------- */
.hero--work h1 { max-width: 20ch; }
.hero--work .hero__support { max-width: 58ch; }

.ow-hero__facts {
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-wrap: wrap; gap: clamp(1.8rem, 4vw, 3.4rem);
}
.ow-hero__fact { display: flex; flex-direction: column; gap: 0.4rem; max-width: 22ch; }
.ow-hero__fact-v { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; color: var(--bone); }
.ow-hero__fact-k { font-family: var(--sans); font-size: 0.8rem; line-height: 1.4; color: #B9C8BC; }

/* -------------------------------------------------------------------------
   SHARED — .ow-fact (the one numeric-evidence component, used throughout)
   A restrained serif value + a small sans key. var(--fg)/var(--accent)
   resolve correctly on every theme this page uses (light, bone-2,
   forest-deep) so the SAME markup works everywhere without a colour
   override — this is what keeps the page one visual language rather than
   a different treatment per section. --lg is for the two spacious
   "reset" moments (~1%, and available if a section needs real emphasis);
   nothing on this page uses a figure larger than --lg, and never over a
   photograph without a contained/scrim treatment.
   ------------------------------------------------------------------------- */
.ow-facts-row { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 3.6rem); }
.ow-facts-row--top { margin-top: clamp(2rem, 4vw, 2.8rem); }
.ow-fact { display: flex; flex-direction: column; gap: 0.5rem; }
.ow-fact__v { font-family: var(--serif); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; color: var(--fg); font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.ow-fact__k { font-family: var(--sans); font-size: 0.82rem; line-height: 1.4; color: var(--fg-soft); max-width: 26ch; }
.ow-fact--accent .ow-fact__v { color: var(--accent); }
.ow-fact--lg .ow-fact__v { font-size: clamp(3rem, 6.4vw, 5rem); }

/* Small source/citation line — used after the Problem stats and inline
   for the BCG sentence, plus the ~1% disclaimer. Never styled as a KPI;
   always a quiet footnote, and always the same measure. */
.ow-source { margin-top: 0.9rem; max-width: 58ch; font-size: 0.82rem; color: var(--fg-faint); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; }
.ow-source .link { font-size: 0.82rem; }

/* -------------------------------------------------------------------------
   02 — THE PROBLEM
   The 79%/52% McKinsey figures (.ow-fact--accent, shared scale) carry the
   visual authority. This second block is deliberately quieter: a smaller
   intro line, a plain (non-accent) .ow-fact scoped down below the shared
   scale, and a short supporting sentence - a footnote to the main
   evidence, not a second stat row competing with it.
   ------------------------------------------------------------------------- */
.ow-problem__better { margin-top: clamp(2.2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule); max-width: 60ch; }
.ow-problem__better-t { font-family: var(--sans); font-size: 0.92rem; color: var(--fg-soft); margin-bottom: 1rem; }
.ow-problem__better .ow-fact__v { font-size: clamp(1.5rem, 2.2vw, 1.8rem); }
.ow-problem__better .ow-fact__k { font-size: 0.78rem; }
.ow-problem__better-d { margin-top: 0.7rem; font-size: 0.86rem; color: var(--fg-faint); }
.ow-problem__better .ow-source { margin-top: 0.6rem; font-size: 0.78rem; }

/* -------------------------------------------------------------------------
   03 — CAPITAL PROJECT PERFORMANCE IS BUSINESS PERFORMANCE
   Short transition. The four-phrase list reuses .chars (shared,
   styles.css) rather than four cards.
   ------------------------------------------------------------------------- */
.ow-stakes { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* -------------------------------------------------------------------------
   04 — THE ~1% PHILOSOPHY
   The one deliberately large, spacious, dark moment before Lonza. No
   photograph — the figure earning real scale here has nothing to compete
   with, which is precisely why it is allowed to be large (contrast with
   every other figure on this page, which sits beside/under a contained
   image or none at all). At >=1500px the text column no longer fills the
   width, so a restrained line-art device (a single measurement scale with
   a dimension-bracketed, solid-filled leading segment - the ~1% marked
   off against the full length it protects) fills the right column rather
   than a photo or more copy — see @media block below.
   ------------------------------------------------------------------------- */
.ow-onepct { text-align: left; }
.ow-onepct__grid { display: block; }
.ow-onepct__inner { max-width: 42rem; }
.ow-onepct__fig { font-family: var(--serif); font-weight: 300; font-size: clamp(3.4rem, 7vw, 5.6rem); line-height: 1; color: var(--lime); margin-top: clamp(1rem, 2vw, 1.4rem); }
.ow-onepct__lead { margin-top: clamp(1.4rem, 2.6vw, 2rem); color: var(--fg-soft); font-size: 1.02rem; line-height: 1.6; max-width: 52ch; }
.ow-onepct__example { margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: clamp(1.4rem, 2.6vw, 2rem); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 3.6rem); }
/* The CHF100m / ~CHF1m pair is a supporting illustration of the ~1%
   figure above, not a second primary statistic - scoped down from the
   shared .ow-fact__v scale (also used for this page's actual evidence
   numbers) to read as secondary/tertiary. */
.ow-onepct__example .ow-fact__v { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.ow-onepct__note { margin-top: clamp(1.6rem, 3vw, 2.2rem); font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--fg-soft); font-size: 1.05rem; }
.ow-onepct__graphic { display: none; }

/* -------------------------------------------------------------------------
   05 — THE VALUE EQUATION
   Light, structured, information-rich — but typographic, not cards: a
   thin top rule per column, a figure, a category label, and a quiet
   enumeration line (not bullets, not chips) for the eight-ish
   contributing factors.
   ------------------------------------------------------------------------- */
.ow-value { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.6vw, 3rem); border-top: 1px solid var(--rule); }
.ow-value__col { padding-top: clamp(1.6rem, 3vw, 2.2rem); }
.ow-value__label { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.ow-value__list { margin-top: clamp(1rem, 2vw, 1.4rem); color: var(--fg-faint); font-size: 0.86rem; line-height: 1.6; max-width: 30ch; }
.ow-value__principle { margin-top: clamp(2.2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule); color: var(--fg-soft); font-size: 0.98rem; line-height: 1.6; max-width: 62ch; }
.ow-value__principle strong { color: var(--fg); font-weight: 600; }

@media (max-width: 820px) {
  .ow-value { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* -------------------------------------------------------------------------
   06 — WHAT WE DELIVER
   The heart of the page. Deliberately NOT cards: a two-column editorial
   field, thin top rule per item, bold short headline + one scannable
   line. No numbers (numbering is reserved for Six Routes, later, where
   it means something specific). Compressed from ten items to six outcome
   families in the 2026 refinement pass — same grid, same treatment.
   ------------------------------------------------------------------------- */
.ow-deliver { margin-top: clamp(2rem, 4vw, 2.8rem); display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2.4rem, 4vw, 3.6rem); }
.ow-deliver__item { padding: clamp(1.4rem, 2.6vw, 1.9rem) 0; border-top: 1px solid var(--rule); }
.ow-deliver__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--fg); margin-bottom: 0.5rem; }
.ow-deliver__d { color: var(--fg-soft); font-size: 0.92rem; line-height: 1.5; max-width: 40ch; }

@media (max-width: 780px) {
  .ow-deliver { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   06B — COMPLEX TERRAIN (NATURE INTERLUDE)
   One substantial full-bleed photographic pause between What We Deliver
   and The Impact of Our Work, art-directed to match the hero exactly:
   same grayscale + luminosity-blend + forest gradient treatment (not a
   new visual system). Centred, minimal copy — this section's job is
   rhythm and brand-metaphor, not another argument.
   ------------------------------------------------------------------------- */
.ow-interlude {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(26rem, 50vw, 36rem);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--bone);
}
.ow-interlude__media { position: absolute; inset: 0; z-index: -2; }
.ow-interlude__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.58);
  mix-blend-mode: luminosity; opacity: 0.9;
}
.ow-interlude__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,40,25,0.5) 0%, rgba(14,40,25,0.22) 45%, rgba(14,40,25,0.72) 100%);
}
.ow-interlude__inner { max-width: 44rem; margin-inline: auto; padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.ow-interlude__sig {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  color: #A9BBAE; font-size: 1rem; margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.ow-interlude__sig .mark { font-style: normal; }
.ow-interlude h2 { color: var(--bone); }
.ow-interlude__lead { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); max-width: 50ch; margin-inline: auto; color: #D3DDD3; }

/* -------------------------------------------------------------------------
   07 — THE IMPACT OF OUR WORK (formerly "Prove It" / "We've done it")
   ONE consistent tile treatment (image or no image — the grid cell shape
   and typography never change). Figures are anonymised, indicative
   percentages (>20%, >10%) rather than absolute client budgets — see the
   claim-discipline note at the top of our-work.html.
   Art-direction pass: the Switzerland/Biotechnology programme's three
   figures are grouped into one full-width lead card
   (.ow-prove__item--lead, no longer grid-column'd inside a 3-up grid —
   the section is now a simple vertical stack: lead card, then an even
   two-up row for Belgium/Ireland). Switzerland Hospitality has been
   dropped from this grid rather than shown without a photograph — every
   card here now carries a real image.
   ------------------------------------------------------------------------- */
.ow-prove { margin-top: clamp(2.2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: clamp(2.4rem, 4vw, 3.4rem); }
.ow-prove__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 3.6vw, 2.8rem); }
.ow-prove__item { display: flex; flex-direction: column; }
.ow-prove__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; margin-bottom: 1.2rem; }
.ow-prove__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.94) contrast(1.03); }
.ow-prove__item:not(.ow-prove__item--image) { padding-top: clamp(1.2rem, 2.2vw, 1.6rem); border-top: 1px solid var(--rule); }
.ow-prove__loc { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.7rem; }
.ow-prove__fig { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; color: var(--fg); }
.ow-prove__k { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 0.6rem; }
.ow-prove__d { margin-top: 0.7rem; color: var(--fg-soft); font-size: 0.88rem; line-height: 1.55; max-width: 34ch; }

/* .ow-prove__item--lead — the consolidated flagship case study. Full
   width by default (the section is a vertical stack, not a grid), so the
   three figures that belong to ONE programme read as one card, not three
   equal-weight tiles indistinguishable from unrelated projects. */
.ow-prove__item--lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.8rem, 3.6vw, 3rem); align-items: center;
}
.ow-prove__item--lead .ow-prove__media { margin-bottom: 0; aspect-ratio: 16 / 11; }
.ow-prove__lead-body { display: flex; flex-direction: column; }
.ow-prove__lead-body .ow-prove__d { max-width: 46ch; }
.ow-prove__lead-stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(1.2rem, 2.2vw, 1.6rem);
  padding-top: clamp(1.2rem, 2.2vw, 1.6rem);
  border-top: 1px solid var(--rule);
}
.ow-prove__stat { display: flex; flex-direction: column; }
.ow-prove__lead-stats .ow-prove__fig { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.ow-prove__lead-stats .ow-prove__k { margin-top: 0.4rem; max-width: 20ch; }

@media (max-width: 900px) {
  .ow-prove__item--lead { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ow-prove__row { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   08 — VALUE IS MORE THAN SAVINGS
   Reuses .when/.when__list/.when__item/.tick verbatim from styles.css —
   the exact component already built for "a short list of true statements,
   each worth a full line" (Home's "When Glengarra is valuable"). No new
   CSS required.
   ------------------------------------------------------------------------- */
.ow-beyond__lead { max-width: 60ch; margin-top: clamp(1rem, 2vw, 1.4rem); }

/* -------------------------------------------------------------------------
   09 — EXPERIENCE GROUNDED IN DELIVERY (Lonza) — .ow-anchor
   The one other dark full-bleed moment. The scale message now comes from
   the aerial photograph itself and two contained .ow-fact figures, not a
   giant lime number laid across the image.
   ------------------------------------------------------------------------- */
.ow-anchor { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(28rem, 56vw, 40rem); display: flex; align-items: center; color: var(--bone); }
.ow-anchor__media { position: absolute; inset: 0; z-index: -2; }
.ow-anchor__media img { width: 100%; height: 100%; object-fit: cover; }
.ow-anchor__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,40,25,0.9) 0%, rgba(14,40,25,0.62) 35%, rgba(14,40,25,0.18) 62%, rgba(14,40,25,0.02) 100%);
}
.ow-anchor__inner { max-width: 32rem; }
.ow-anchor__kicker { color: #7C9280; margin-bottom: 0.7rem; }
.ow-anchor__eyebrow { color: #B9C8BC; margin-bottom: clamp(1.2rem, 2.2vw, 1.6rem); }
.ow-anchor .ow-facts-row { margin-top: clamp(1.2rem, 2.2vw, 1.6rem); gap: clamp(1.6rem, 3vw, 2.4rem); }
.ow-anchor .ow-fact__v { color: var(--lime); }
.ow-anchor .ow-fact__k { color: #B9C8BC; }
.ow-anchor__body { margin-top: clamp(1.4rem, 2.6vw, 2rem); color: #D3DDD3; font-size: 0.98rem; line-height: 1.6; max-width: 44ch; }
.ow-anchor__cap { margin-top: clamp(1.2rem, 2vw, 1.6rem); font-family: var(--serif); font-style: italic; font-weight: 300; color: #A9BBAE; font-size: 0.96rem; }

@media (max-width: 760px) {
  .ow-anchor { padding-top: 11rem; padding-bottom: 3rem; }
}

/* -------------------------------------------------------------------------
   10 — EXPERIENCE BEHIND THE ADVICE
   Confidentiality pass: dropped the per-project scale figure (.ow-
   portfolio__fig) that previously sat under the location line — replaced
   with .ow-portfolio__stmt, a single 8-12 word outcome-verb-led value
   statement. Each photograph now communicates exactly two things: the
   environment (via the image + location/sector) and one crisp statement
   of the value Glengarra added, with no client-specific scale, budget or
   internal detail exposed.
   ------------------------------------------------------------------------- */
.ow-portfolio { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 1.8rem); }

.ow-portfolio__item { position: relative; overflow: hidden; border-radius: var(--radius); color: var(--bone); }
.ow-portfolio__item--lead { aspect-ratio: 4 / 5; }
.ow-portfolio__item:not(.ow-portfolio__item--lead) { aspect-ratio: 4 / 3; }

.ow-portfolio__media { position: absolute; inset: 0; z-index: -1; }
.ow-portfolio__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95) contrast(1.03); }
.ow-portfolio__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,40,25,0) 40%, rgba(14,40,25,0.6) 72%, rgba(14,40,25,0.92) 100%);
}

.ow-portfolio__caption { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1rem, 2.2vw, 1.6rem); }
.ow-portfolio__loc { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #C6D3C6; }
.ow-portfolio__stmt { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.35; color: var(--bone); margin-top: 0.6rem; max-width: 30ch; overflow-wrap: break-word; }
.ow-portfolio__item:not(.ow-portfolio__item--lead) .ow-portfolio__stmt { font-size: 0.92rem; line-height: 1.3; margin-top: 0.4rem; max-width: 26ch; }

.ow-portfolio__aside { margin-top: clamp(1.6rem, 3vw, 2.2rem); font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--fg-faint); font-size: 0.92rem; }
.ow-portfolio__aside strong { font-style: normal; font-weight: 600; color: var(--fg-soft); }

/* .ow-portfolio__item--text — not currently used in the grid (2026
   refinement pass removed the Switzerland/Hospitality text-only tile;
   no approved image exists locally for that project, and the brief
   requires every tile in this photographic gallery to carry a real
   image). Kept in case an approved photograph is sourced later. */
.ow-portfolio__item--text {
  background: var(--bone-2); color: var(--fg);
  display: flex; align-items: flex-end;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--rule);
}
.ow-portfolio__item--text .ow-portfolio__loc { color: var(--fg-faint); }
.ow-portfolio__item--text .ow-portfolio__stmt { color: var(--fg); }

@media (max-width: 900px) {
  .ow-portfolio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ow-portfolio { grid-template-columns: 1fr; }
  .ow-portfolio__item--lead { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------------------
   11 — SIX ROUTES TO A BETTER OUTCOME
   The only place on this page that reconnects to the Strategic Services
   taxonomy — restrained, no descriptions, nothing resembling that page's
   own treatment (no .svc-list numbered grid with a question line; just a
   compact 3-col field with a number, a short verb-phrase and the official
   category name beneath it).
   ------------------------------------------------------------------------- */
.ow-routes { margin-top: clamp(2rem, 4vw, 2.8rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--rule); }
.ow-route { padding-top: clamp(1.2rem, 2.2vw, 1.6rem); }
.ow-route__n { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--fg-faint); }
.ow-route__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--fg); margin-top: 0.5rem; }
.ow-route__k { font-family: var(--sans); font-size: 0.78rem; color: var(--fg-faint); margin-top: 0.4rem; }
.ow-routes__foot { margin-top: clamp(1.8rem, 3vw, 2.4rem); }

@media (max-width: 780px) {
  .ow-routes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ow-routes { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   13 — TRUSTED ACROSS COMPLEX CAPITAL DELIVERY
   Unchanged — continuous slow marquee, quiet register, already correctly
   pitched.
   ------------------------------------------------------------------------- */
.trusted__eyebrow {
  text-align: center; color: var(--fg-soft);
  padding-top: clamp(3rem, 6vw, 4.4rem);
  margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.logo-rail { overflow: hidden; padding-bottom: clamp(3rem, 6vw, 4.4rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-rail__track {
  display: flex; align-items: center; width: max-content;
  animation: logo-rail-scroll 38s linear infinite;
}
.logo-rail:hover .logo-rail__track { animation-play-state: paused; }
.logo-rail__item { display: flex; align-items: center; justify-content: center; flex: none; width: clamp(8rem, 12vw, 11rem); padding-inline: clamp(1rem, 2vw, 1.6rem); }
.logo-rail__item img {
  max-width: 100%; max-height: 2.1rem; width: auto; height: auto; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.72; transition: opacity .3s var(--ease);
}
.logo-rail__item:hover img { opacity: 1; }

@keyframes logo-rail-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-rail__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .logo-rail__item:nth-child(n+11) { display: none; }
}

@media (max-width: 640px) {
  .logo-rail__item { width: 7rem; padding-inline: 0.8rem; }
  .logo-rail__item img { max-height: 1.6rem; }
}

/* -------------------------------------------------------------------------
   14 — CLOSE
   .cta__media / .cta__media img / .cta__media::after are shared components
   already defined in styles.css; only the brand-signature pattern needs
   replicating here (this page does not load homepage.css). .cta__actions
   now carries a primary + a secondary text link.
   ------------------------------------------------------------------------- */
.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; }
.cta__actions { align-items: center; }
.cta__actions .link { color: var(--bone); border-bottom-color: var(--lime); }

/* =========================================================================
   LARGE-DESKTOP ART DIRECTION (Our Work) — ≥1500px only
   clamp(ORIGINAL, calc(ORIGINAL + slope*(100vw-1500px)), CEILING) throughout
   so 1280/1366/1440/tablet/mobile are untouched. The Value Equation, the
   evidence/portfolio photography and Six Routes were the clearest
   offenders — Information/System and Evidence/Photography sections that
   need to genuinely use the canvas. The ~1% moment and the statement
   sections (Purpose, "Value isn't always a saving") stay contained by
   design — growing them would fight their own restraint.
   ========================================================================= */
@media (min-width: 1500px) {
  /* The Problem — Evidence (C), same tier as the case-study evidence
     below: the 79%/52% figures already grow via the shared .ow-fact__v
     rule further down this block, but the row's own gap previously
     capped at 3.6rem regardless of viewport, leaving the two figures
     huddled together on a much wider canvas. */
  .ow-facts-row { gap: clamp(2rem, calc(2rem + 0.05 * (100vw - 1500px)), 6.5rem); }

  /* ~1% Philosophy — Statement (A), but the CHF100m/~CHF1m relationship
     should still read with real presence, not just the "~1%" figure. The
     text column stops filling the available width past this point, so a
     restrained line-art device takes the right column instead of leaving
     it empty (no photo, no extra copy — see markup + base rule above). */
  .ow-onepct__fig { font-size: clamp(5.6rem, calc(5.6rem + 0.033 * (100vw - 1500px)), 7.1rem); }
  .ow-onepct__example { gap: clamp(3.6rem, calc(3.6rem + 0.024 * (100vw - 1500px)), 5.4rem); }
  .ow-onepct__lead { font-size: clamp(1.02rem, calc(1.02rem + 0.007 * (100vw - 1500px)), 1.2rem); }
  .ow-onepct__note { font-size: clamp(1.05rem, calc(1.05rem + 0.007 * (100vw - 1500px)), 1.22rem); }
  .ow-onepct__grid { display: grid; grid-template-columns: minmax(0, 42rem) 1fr; align-items: center; gap: clamp(3rem, calc(3rem + 0.05 * (100vw - 1500px)), 6rem); }
  .ow-onepct__graphic { display: flex; justify-content: center; align-items: center; }
  .ow-onepct__graphic svg { width: clamp(220px, calc(220px + 0.19 * (100vw - 1500px)), 340px); height: auto; }

  /* What We Deliver — the only major content family on this page with no
     large-desktop growth: six outcomes reading as a modest two-column
     list at 1920px+ when everything around it has real presence. */
  .ow-deliver { gap: 0 clamp(3.6rem, calc(3.6rem + 0.019 * (100vw - 1500px)), 4.8rem); }
  .ow-deliver__item { padding: clamp(1.9rem, calc(1.9rem + 0.012 * (100vw - 1500px)), 2.4rem) 0; }
  .ow-deliver__t { font-size: clamp(1.35rem, calc(1.35rem + 0.02 * (100vw - 1500px)), 1.9rem); }
  .ow-deliver__d { font-size: clamp(0.92rem, calc(0.92rem + 0.007 * (100vw - 1500px)), 1.05rem); max-width: 46ch; }

  /* Value Equation — Information (B). Three propositions across the
     screen, not three modest paragraphs in a wide row. */
  .ow-value { gap: clamp(3rem, calc(3rem + 0.033 * (100vw - 1500px)), 5rem); }
  .ow-value__label { font-size: clamp(0.72rem, calc(0.72rem + 0.004 * (100vw - 1500px)), 0.92rem); }
  .ow-fact__v { font-size: clamp(2.6rem, calc(2.6rem + 0.038 * (100vw - 1500px)), 4.3rem); }
  .ow-fact__k { font-size: clamp(0.82rem, calc(0.82rem + 0.007 * (100vw - 1500px)), 1rem); max-width: 30ch; }
  .ow-value__list { font-size: clamp(0.86rem, calc(0.86rem + 0.005 * (100vw - 1500px)), 1.03rem); max-width: 36ch; }
  .ow-value__principle { font-size: clamp(0.98rem, calc(0.98rem + 0.007 * (100vw - 1500px)), 1.15rem); max-width: 70ch; }

  /* Impact of Our Work / Experience evidence grids — Evidence/Photography
     (C). Premium project case studies, not modest cards in empty space. */
  .ow-prove { gap: clamp(3.4rem, calc(3.4rem + 0.0178 * (100vw - 1500px)), 3.9rem); }
  .ow-prove__row { gap: clamp(2.8rem, calc(2.8rem + 0.0124 * (100vw - 1500px)), 3.15rem); }
  .ow-prove__fig { font-size: clamp(2rem, calc(2rem + 0.024 * (100vw - 1500px)), 2.9rem); }
  .ow-prove__d { font-size: clamp(0.88rem, calc(0.88rem + 0.007 * (100vw - 1500px)), 1.05rem); max-width: 38ch; }
  .ow-prove__lead-body .ow-prove__d { max-width: 52ch; }
  .ow-prove__lead-stats .ow-prove__fig { font-size: clamp(1.6rem, calc(1.6rem + 0.016 * (100vw - 1500px)), 2.2rem); }

  .ow-portfolio { gap: clamp(1.8rem, calc(1.8rem + 0.013 * (100vw - 1500px)), 2.4rem); }
  .ow-portfolio__loc { font-size: clamp(0.72rem, calc(0.72rem + 0.004 * (100vw - 1500px)), 0.92rem); }
  .ow-portfolio__stmt { font-size: clamp(1.3rem, calc(1.3rem + 0.016 * (100vw - 1500px)), 1.9rem); max-width: 34ch; }
  .ow-portfolio__item:not(.ow-portfolio__item--lead) .ow-portfolio__stmt { font-size: clamp(0.92rem, calc(0.92rem + 0.009 * (100vw - 1500px)), 1.1rem); max-width: 28ch; }

  /* Six Routes — Information (B), currently the worst-populated section
     relative to available width: give each route real column presence. */
  .ow-routes { gap: clamp(2.2rem, calc(2.2rem + 0.024 * (100vw - 1500px)), 4rem) clamp(2.4rem, calc(2.4rem + 0.024 * (100vw - 1500px)), 4.2rem); }
  .ow-route { padding-top: clamp(1.6rem, calc(1.6rem + 0.009 * (100vw - 1500px)), 2rem); }
  .ow-route__n { font-size: clamp(0.72rem, calc(0.72rem + 0.004 * (100vw - 1500px)), 0.92rem); }
  .ow-route__t { font-size: clamp(1.25rem, calc(1.25rem + 0.024 * (100vw - 1500px)), 2.05rem); margin-top: 0.7rem; }
  .ow-route__k { font-size: clamp(0.78rem, calc(0.78rem + 0.005 * (100vw - 1500px)), 0.95rem); margin-top: 0.55rem; }
}
