/* EDGE Worldwide · Approach page
   Scoped to #page-approach and limited to the existing palette. */

#page-approach{overflow:clip}
/* Vertical only, as longhands. The padding shorthand would reset the
   horizontal value and pin it to a constant, overriding the site's gutter
   ladder (.s = 48px / 32px @1024 / 20px @768) and pushing this section out of
   alignment with its neighbours at every width below 1024px. */
#page-approach>.bg-deep.s{padding-top:clamp(52px,6vw,78px)!important;padding-bottom:clamp(52px,6vw,78px)!important}
/* Single-column editorial opening: one column and one text measure, so the
   eyebrow, heading, paragraphs, statistic and link read as one order. */
#page-approach>.bg-deep>.in{display:block}
#page-approach>.bg-deep>.in>.eye{margin:0 0 18px;color:var(--f-terra-l,#e0a184)}
#page-approach>.bg-deep>.in>.t1{max-width:24ch!important;margin:0;color:#fff;font-size:clamp(42px,5.4vw,68px);line-height:1.04;letter-spacing:-.028em}
/* One measure shared by both paragraphs, so they read as a pair. */
/* Introduction now sits in its own light block beneath the hero: the hero
   holds the eyebrow and title only. */
/* Wider than the old 80% cap so there's no dead space, but still bounded to
   a balanced measure. Editorial two-column split: the lead carries the band
   as a serif statement with a brand rule, the detail paragraph sits beside it,
   and the experience line reads as a figure closing the block. */
#page-approach .ap-intro-copy{max-width:min(100%,1160px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(34px,4.4vw,72px);row-gap:0;align-items:start}
#page-approach .ap-intro-copy .lead{grid-column:1;margin:0;font-family:var(--serif);font-size:clamp(21px,2.1vw,29px)!important;line-height:1.32!important;color:var(--ink)!important;font-weight:400;max-width:26ch;text-wrap:pretty;padding-top:18px;border-top:2px solid var(--forest)}
#page-approach .ap-intro-copy .body{grid-column:2;grid-row:1;margin:0!important;font-size:16px;line-height:1.8;max-width:56ch;text-wrap:pretty}
#page-approach .ap-intro-copy .ap-stat{grid-column:1;margin-top:clamp(32px,3.6vw,50px);padding-top:22px;border-top:1px solid var(--border);font-family:var(--serif);font-size:clamp(19px,1.9vw,25px);line-height:1.35;color:var(--ink);max-width:40ch;text-wrap:pretty}
/* Link sits directly under the detail paragraph in the second column, level
   with the top of the experience line, so no gap opens between them. */
#page-approach .ap-intro-copy .tlink{grid-column:2;grid-row:2;align-self:start;justify-self:start;margin-top:calc(clamp(32px,3.6vw,50px) + 22px)}
@media(max-width:900px){
  #page-approach .ap-intro-copy{grid-template-columns:1fr;row-gap:clamp(20px,2.6vw,30px)}
  #page-approach .ap-intro-copy .lead,#page-approach .ap-intro-copy .body,#page-approach .ap-intro-copy .ap-stat,#page-approach .ap-intro-copy .tlink{grid-column:1;grid-row:auto;max-width:none}
  #page-approach .ap-intro-copy .tlink{margin-top:4px;max-width:max-content}
}
/* The stat and link inherit the page's dark ink here — the white overrides
   above are scoped to .bg-deep, so they no longer apply. */
#page-approach .ap-intro-copy .ap-stat{border-top:1px solid var(--border);color:var(--ink)}
#page-approach .ap-intro-copy .tlink{display:inline-block;margin-top:20px}
/* The hero is now short, so the image panel needs a floor to stay readable. */
#page-approach .ap-hero{min-height:clamp(300px,34vw,420px);display:flex;align-items:center}
#page-approach .ap-hero.s{padding-bottom:clamp(52px,6vw,78px)!important}
#page-approach>.bg-deep .lead{color:rgba(255,255,255,.97)!important;font-size:clamp(17px,1.4vw,18px)!important;line-height:1.7!important}
#page-approach>.bg-deep .body{color:rgba(255,255,255,.93)!important;font-size:16px!important;line-height:1.7!important}
/* Statistic and link stay subordinate to the copy above them. */
/* Standard body size rather than the smaller 14px caption scale. */
#page-approach .ap-stat{margin-top:24px;padding-top:20px;max-width:46ch;font-size:16px!important;line-height:1.7}
#page-approach>.bg-deep .tlink{margin-top:20px;color:var(--f-terra-l,#e0a184)!important}
/* ── Opening hero ──
   The photograph is a panel in the right of the hero, not a full-bleed
   ground. Two soft masks blend it into the green: horizontal for the inner
   edge where it meets the copy, vertical for the top and bottom. The copy
   therefore sits on plain green at full contrast. */
#page-approach .ap-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep)}
#page-approach .ap-hero-img{
  position:absolute;right:0;z-index:0;
  width:min(47%,640px);
  /* Deliberately taller than the panel and pulled up, so the parent clips the
     lower band of the file. The panel and the file are close in aspect ratio,
     so cover alone crops almost nothing and object-position cannot remove the
     lower-left corner on its own — the extra height is what creates the crop
     room. Keeps the joined hands central. */
  top:-22%;height:124%;
  object-fit:cover;object-position:52% 26%;opacity:1;
  /* A short blend on the inner edge only, so the panel meets the copy
     without a hard seam. The top, bottom and outer edges stay full
     strength — fading all four made the photograph look washed out. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%);
  mask-image:linear-gradient(90deg,transparent 0,#000 20%)}
/* Copy clears the panel rather than running under it. */
#page-approach .ap-hero-in{position:relative;z-index:2;width:100%;padding-right:min(50%,680px)}
#page-approach .ap-hero.s{padding-top:clamp(52px,6vw,78px)!important;padding-bottom:clamp(52px,6vw,78px)!important}
@media(max-width:860px){
  /* Panel becomes a band above the copy, so nothing overlaps. */
  /* As a wide band, cover crops vertically instead, so the offset moves. */
  #page-approach .ap-hero-img{position:static;width:100%;height:clamp(200px,34vw,290px);margin-bottom:clamp(22px,3vw,32px);object-position:center 36%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%)}
  #page-approach .ap-hero-in{padding-right:0}
}

/* Three paddings stacked before the closing band — the last process row's
   own padding, the section's, and the band's margin — which together left
   ~200px of empty ground. The row keeps its rhythm; the section and band
   close up against it. */
#page-approach #how-it-developed .s{padding-top:clamp(50px,6vw,78px);padding-bottom:0}
#page-approach .proc-row:last-child{padding-bottom:clamp(24px,3vw,38px)}
/* 20ch forced three lines; wider measure sets it on two. */
#page-approach #how-it-developed .t2{max-width:34ch;margin-top:12px;text-wrap:balance}
#page-approach .proc{margin-top:clamp(28px,3.4vw,42px);border-top:0}
#page-approach .proc-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,5fr);gap:clamp(30px,4.5vw,64px);padding:clamp(34px,4.2vw,56px) 0;border-top:1px solid var(--border);border-bottom:0;align-items:start}
#page-approach .proc-body{max-width:none}
#page-approach .proc-body h3{max-width:22ch;font-size:clamp(25px,2.7vw,36px);line-height:1.1;margin-bottom:16px}
/* One paragraph rhythm for the whole row rather than per-element margins,
   so consecutive paragraphs sit evenly however many there are. */
#page-approach .proc-body p{max-width:66ch;font-size:15px;line-height:1.75;margin-bottom:0}
#page-approach .proc-body p+p{margin-top:14px}
#page-approach .proc-lede{font-family:var(--disp);font-size:clamp(17px,1.35vw,20px)!important;line-height:1.45!important;color:var(--ink)!important}
/* Small editorial transition into the Hub material, not another heading
   level competing with the h3 above it. */
#page-approach .proc-subhead{margin:28px 0 12px;padding-top:20px;border-top:1px solid var(--border);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--terra-t)}
#page-approach .proc-fig{position:sticky;top:132px;min-width:0}
#page-approach .proc-fig .imgslot{min-height:0;overflow:hidden;border:1px solid var(--border);background:var(--sand)}
#page-approach .proc-fig .imgslot-43{aspect-ratio:4/3}
#page-approach .proc-fig .imgslot-45{aspect-ratio:4/5}
#page-approach .proc-fig img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
#page-approach .proc-row:nth-child(2) .proc-fig{width:min(100%,480px);max-width:480px;justify-self:start}
#page-approach .proc-row:nth-child(2) .proc-fig .imgslot{width:100%;max-height:360px}
#page-approach .proc-row:nth-child(even) .proc-body{grid-column:2;grid-row:1}
#page-approach .proc-row:nth-child(even) .proc-fig{grid-column:1;grid-row:1}
#page-approach .aq{margin-top:26px;padding:22px 0 0;border-left:0;border-top:1px solid var(--terra);background:transparent;max-width:34ch}

/* Light sage ground for the principles block — the same tint the design
   system uses elsewhere — rather than the sand used by neighbouring bands.
   Scoped to this page's own child so other .bg-sand sections are untouched.
   The cards are transparent, so they need a hairline lift to stay legible
   against a tinted ground. */
#page-approach>.bg-sand{background:#e7eae1}
#page-approach>.bg-sand .s{padding-top:clamp(52px,6vw,80px);padding-bottom:clamp(52px,6vw,80px)}
/* Quiet photographic ground: the student at the world-map mural sits behind
   the band on the right, faded into the sage so the cards stay fully legible.
   Decorative — pseudo-element, no markup, out of the a11y tree. */
#page-approach>.bg-sand{position:relative;isolation:isolate;overflow:hidden}
#page-approach>.bg-sand::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("img/edge-cambodia-educational-charity-student-world-map-mural.webp");
  background-size:cover;background-position:72% 38%;background-repeat:no-repeat;
  opacity:.2;filter:saturate(.72);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 78%);
  mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 78%)}
#page-approach>.bg-sand>.s{position:relative;z-index:1}
@media(max-width:900px){
  #page-approach>.bg-sand::before{background-position:64% 34%;opacity:.14;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 62%);
    mask-image:linear-gradient(180deg,transparent 0,#000 62%)}
}

#page-approach>.bg-sand .principle{background:rgba(255,255,255,.55)}

/* Railway connector between the principles — same vocabulary as the Legacy
   timeline. The link sits in the gap at mid-height: a hairline spanning the
   gap with a ring dot centred on it, so the three cards read as stations on
   one line. The grid gap is widened from 16px to 30px to give the node room;
   card padding and type are unchanged.
   Decorative only, drawn with pseudo-elements, so nothing enters the
   accessibility tree. */
#page-approach .principle{position:relative}
#page-approach>.bg-sand .principle:not(:last-child)::before{content:"";position:absolute;z-index:0;
  top:50%;right:-30px;width:30px;height:2px;margin-top:-1px;background:var(--terra)}
#page-approach>.bg-sand .principle:not(:last-child)::after{content:"";position:absolute;z-index:1;
  top:50%;right:-22px;width:10px;height:10px;margin-top:-7px;
  border:2px solid var(--terra);border-radius:50%;background:#e7eae1}
/* Stacked: the line turns to run down between the cards.
   A03 · 720px, not 860px: the cards themselves only collapse to one column
   at 720px, so between 721 and 860 the connectors were drawn vertically
   while the cards were still three across. The connector now turns at the
   same width the layout it describes actually stacks. */
@media(max-width:720px){
  #page-approach>.bg-sand .principle:not(:last-child)::before{
    top:auto;bottom:-30px;right:auto;left:clamp(26px,2.8vw,38px);width:2px;height:30px;margin-top:0}
  #page-approach>.bg-sand .principle:not(:last-child)::after{
    top:auto;bottom:-22px;right:auto;left:calc(clamp(26px,2.8vw,38px) - 4px);margin-top:0}
}
/* .mb32 is neutralised here so the band's own top margin is the only
   heading-to-photograph gap; otherwise the two stack to ~64px. */
/* The photograph no longer sits between the heading and the cards, so the
   heading needs its own gap restored. */
/* Wider measure so the heading sets on two lines rather than three,
   saving section height. */
#page-approach>.bg-sand .t2{max-width:30ch;margin-bottom:clamp(24px,3vw,32px)}
#page-approach>.bg-sand .t2{text-wrap:balance}
#page-approach .principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:0;border-top:0}
#page-approach .principle{min-width:0;padding:clamp(26px,2.8vw,38px)!important;border:1px solid var(--border)!important;background:transparent;transition:transform .25s ease,border-color .25s ease}
#page-approach .principle h3{font-size:clamp(20px,1.8vw,24px)}

@media(hover:hover) and (pointer:fine){
  #page-approach .principle:hover{transform:translateY(-3px);border-color:var(--terra)!important}
/* The connector is drawn on the card, so a hover lift would carry it up and
   break the line. On the railway row the hover keeps its border change but
   drops the translate. */
#page-approach>.bg-sand .principle:hover{transform:none}
}
@media(max-width:920px){
  #page-approach .proc-row{grid-template-columns:1fr;gap:32px}
  #page-approach .proc-row:nth-child(even) .proc-body,#page-approach .proc-row:nth-child(even) .proc-fig{grid-column:1;grid-row:auto}
  #page-approach .proc-fig{position:static}
  #page-approach .proc-row:nth-child(2) .proc-fig{margin-left:0;margin-right:auto}
}
@media(max-width:720px){
  #page-approach .principles{grid-template-columns:1fr}
}
@media(max-width:560px){
  #page-approach>.bg-deep.s{padding-top:62px!important;padding-bottom:62px!important}
  /* Continuous with the base clamp, which pins to 42px below ~778px:
     7.5vw hits exactly 42px at 560 and shrinks from there, so the heading
     never grows as the viewport narrows. Floor of 30px keeps the longest
     word ("relationships,") inside the 320px gutter. */
  #page-approach>.bg-deep>.in>.t1{font-size:clamp(30px,7.5vw,42px)}
  #page-approach .proc-row{padding:44px 0}
}
@media(prefers-reduced-motion:reduce){
  #page-approach .principle{transition:none}
  #page-approach .principle:hover{transform:none}
}

/* ── Principles band: entrance life ──────────────────────────────────
   The cards are adopted individually by motion.js (.principle is in its 'up'
   set), so they can arrive together. A per-card delay walks them across the
   row, the icon disc settles in behind its own heading, and a hairline draws
   out under the section title as the band enters. */
#page-approach>.bg-sand .principle[data-m]{transition-delay:.04s}
#page-approach>.bg-sand .principle:nth-child(2)[data-m]{transition-delay:.14s}
#page-approach>.bg-sand .principle:nth-child(3)[data-m]{transition-delay:.24s}
.js.motion-ready #page-approach>.bg-sand .principle[data-m]:not(.m-in) .pmark{opacity:0;transform:scale(.84)}
.js.motion-ready #page-approach>.bg-sand .principle[data-m]:not(.m-in) h3{opacity:0;transform:translateY(8px)}
#page-approach>.bg-sand .principle .pmark{transition:transform .38s cubic-bezier(.34,1.25,.64,1),opacity .3s ease,box-shadow .3s ease}
#page-approach>.bg-sand .principle h3{transition:opacity .36s ease,transform .4s cubic-bezier(.2,.65,.25,1)}
#page-approach>.bg-sand .principle.m-in .pmark,#page-approach>.bg-sand .principle.m-in h3{opacity:1;transform:none}
#page-approach>.bg-sand .principle.m-in .pmark{transition-delay:.12s}
#page-approach>.bg-sand .principle.m-in h3{transition-delay:.2s}
#page-approach>.bg-sand .t2{position:relative;padding-bottom:20px}
#page-approach>.bg-sand .t2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--forest);opacity:.6;transition:width .7s cubic-bezier(.2,.65,.25,1) .1s}
#page-approach>.bg-sand .t2.m-in::after,html:not(.js) #page-approach>.bg-sand .t2::after,html:not(.motion-ready) #page-approach>.bg-sand .t2::after{width:clamp(72px,9vw,132px)}
@media(prefers-reduced-motion:reduce){
  .js.motion-ready #page-approach>.bg-sand .principle[data-m]:not(.m-in) .pmark,
  .js.motion-ready #page-approach>.bg-sand .principle[data-m]:not(.m-in) h3{opacity:1;transform:none}
  #page-approach>.bg-sand .principle .pmark,#page-approach>.bg-sand .principle h3,#page-approach>.bg-sand .t2::after{transition:none;transition-delay:0s}
  #page-approach>.bg-sand .t2::after{width:clamp(72px,9vw,132px)}
}

/* ── Process rows: staggered text entry ──────────────────────────────
   The row is released by motion.js adding .m-in (it stamps .is-revealed at
   setup, so that class cannot gate anything). This walks the row's own parts
   in behind it — heading, then each paragraph, then the transition label and
   pull-quote — so the copy reads as it arrives rather than landing at once. */
.js.motion-ready #page-approach .proc-row[data-m]:not(.m-in) .proc-body>*{opacity:0;transform:translateY(10px)}
.js.motion-ready #page-approach .proc-row[data-m]:not(.m-in) .proc-fig{opacity:0;transform:translateY(12px)}
#page-approach .proc-row .proc-body>*,#page-approach .proc-row .proc-fig{transition:opacity .44s ease,transform .52s cubic-bezier(.2,.65,.25,1)}
#page-approach .proc-row.m-in .proc-body>*,#page-approach .proc-row.m-in .proc-fig{opacity:1;transform:none}
#page-approach .proc-row.m-in .proc-body>*:nth-child(1){transition-delay:.06s}
#page-approach .proc-row.m-in .proc-body>*:nth-child(2){transition-delay:.15s}
#page-approach .proc-row.m-in .proc-body>*:nth-child(3){transition-delay:.24s}
#page-approach .proc-row.m-in .proc-body>*:nth-child(4){transition-delay:.33s}
#page-approach .proc-row.m-in .proc-body>*:nth-child(5){transition-delay:.42s}
#page-approach .proc-row.m-in .proc-body>*:nth-child(n+6){transition-delay:.5s}
#page-approach .proc-row.m-in .proc-fig{transition-delay:.12s}
/* Step numbers use the page's own disc vocabulary — the same tinted circle as
   .pmark on the principles above — with the numeral set in the display serif
   so 01/02/03 read as part of the element system, not a bolted-on label. */
#page-approach .proc{counter-reset:procstep}
#page-approach .proc-row{counter-increment:procstep}
#page-approach .proc-body h3{position:relative}
#page-approach .proc-body h3::before{content:counter(procstep,decimal-leading-zero);display:grid;place-items:center;width:clamp(44px,3.6vw,52px);height:clamp(44px,3.6vw,52px);margin-bottom:16px;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--serif);font-size:clamp(16px,1.3vw,19px);font-weight:400;line-height:1;letter-spacing:.01em}
#page-approach .proc-row:nth-child(2) .proc-body h3::before{background:var(--teal);color:#fff}
#page-approach .proc-row:nth-child(3) .proc-body h3::before{background:var(--deep);color:#fff}
#page-approach .proc-body h3::after{content:"";display:block;width:34px;height:2px;margin-top:14px;background:var(--forest);opacity:.55}
#page-approach .proc-body .proc-lede{text-wrap:pretty}
@media(prefers-reduced-motion:reduce){
  .js.motion-ready #page-approach .proc-row[data-m]:not(.m-in) .proc-body>*,
  .js.motion-ready #page-approach .proc-row[data-m]:not(.m-in) .proc-fig{opacity:1;transform:none}
  #page-approach .proc-row .proc-body>*,#page-approach .proc-row .proc-fig{transition:none;transition-delay:0s}
}

/* Evidence band between the section heading and the principles: the photograph
   shows the in-country presence the principles describe. Ratio is fixed by the
   slot, so no layout shift while it loads. */
/* The shared full-bleed rule in motion.css sets margin-block with
   !important; an id-scoped !important is the only way to tighten it from
   here without editing that shared file. */
/* Now closes the section beneath the cards: more space above than below. */

/* ── Principle icons ───────────────────────────────────────────────────
   Reuses three glyphs from the homepage value set rather than introducing
   new artwork: the Cambodia outline for local leadership, the paired discs
   for relationships, the cycle for continuous review. Decorative only
   (aria-hidden) — each heading already states the principle. The disc
   tints rotate through the palette the same way .vmark does. */
#page-approach .principle-hd{display:flex;align-items:center;gap:14px;margin-bottom:12px}
#page-approach .principle-hd h3{margin-bottom:0}
#page-approach .pmark{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
#page-approach .pmark svg{width:52%;height:52%;display:block;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
#page-approach .pmark-map svg{width:68%;height:68%;stroke-width:1.5;stroke-linejoin:miter;stroke-miterlimit:2.4}
#page-approach .principle:nth-child(1) .pmark{background:rgba(90,110,58,.13);color:var(--forest)}
#page-approach .principle:nth-child(2) .pmark{background:rgba(61,74,42,.11);color:var(--teal)}
#page-approach .principle:nth-child(3) .pmark{background:rgba(28,42,20,.09);color:var(--deep)}
/* Subtle pop: each card sits slightly off the sand ground on its own soft
   shadow, and lifts a touch on hover. The connector line is drawn on the
   card, so the lift is carried by the shadow and the mark, not a translate. */
#page-approach>.bg-sand .principle{background:rgba(255,255,255,.82);box-shadow:0 1px 2px rgba(24,24,15,.04),0 10px 22px -14px rgba(28,42,20,.18);transition:box-shadow .3s ease,background-color .3s ease,border-color .25s ease}
#page-approach>.bg-sand .principle .pmark{transition:transform .32s cubic-bezier(.34,1.2,.64,1),box-shadow .3s ease}
@media(hover:hover) and (pointer:fine){
  #page-approach>.bg-sand .principle:hover{background:#fff;box-shadow:0 2px 4px rgba(24,24,15,.05),0 18px 34px -16px rgba(28,42,20,.26)}
  #page-approach>.bg-sand .principle:hover .pmark{transform:translateY(-4px);box-shadow:0 8px 18px -10px rgba(28,42,20,.4)}
}
@media(prefers-reduced-motion:reduce){
  #page-approach>.bg-sand .principle,#page-approach>.bg-sand .principle .pmark{transition:none}
  #page-approach>.bg-sand .principle:hover .pmark{transform:none}
}
@media(max-width:768px){#page-approach .principle-hd{gap:12px}#page-approach .pmark{width:40px;height:40px}}

/* Second opening paragraph sits in its own light band below the hero, so the
   hero carries the headline, lead, statistic and link only. Copy unchanged. */

/* ── Principles band photograph ──
   Brand treatment rather than a raw full-bleed frame: the edges dissolve
   into the sand ground instead of butting against it, saturation is eased
   back, and a low green-to-terracotta wash in multiply pulls the image
   into the palette. Overlay is aria-neutral and takes no pointer input. */
/* No edge mask. The band is full-bleed and now sits flush at the foot of
   the section, so fading its top and bottom read as a printing fault rather
   than softness — a clean edge is what makes a bleed look deliberate. The
   softening comes from the tone below instead. */

/* Gentle brand tone, no blend mode: multiply darkened the shadows enough to
   read as a colour cast on the students' faces. */


/* ── Closing image band ────────────────────────────────────────────────
   Full-bleed photograph closing the page above the footer. Scrollbar-safe
   width (--sbw is measured in essential.js and defaults to 0). A gentle
   brand tone only — no edge mask, since a clean edge is what makes a bleed
   read as deliberate. */
#page-approach .ap-outro{position:relative;isolation:isolate;overflow:hidden;
  width:calc(100vw - var(--sbw));margin-inline:calc(50% - ((100vw - var(--sbw)) / 2));
  margin-top:0;background:var(--deep)}
#page-approach .ap-outro-img{display:block;width:100%;height:clamp(240px,30vw,400px);object-fit:cover;object-position:center 38%}
#page-approach .ap-outro-tone{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,42,20,.1) 0%,rgba(28,42,20,.03) 50%,rgba(196,112,75,.06) 100%)}

/* Closing band carries an About preview: the photograph is the ground, the
   copy sits over its scrimmed left side. */
#page-approach .ap-outro-img{height:clamp(360px,42vw,520px)}
#page-approach .ap-outro-tone{background:
  linear-gradient(90deg,rgba(20,30,14,.94) 0%,rgba(20,30,14,.86) 40%,rgba(20,30,14,.58) 68%,rgba(20,30,14,.24) 92%,rgba(20,30,14,.12) 100%),
  linear-gradient(180deg,rgba(20,30,14,.4) 0%,rgba(20,30,14,.28) 55%,rgba(20,30,14,.2) 100%)}
/* .wrap's centring cannot work through inset:0 on an absolutely positioned
   box unless the max-width and auto side margins are restated — without them
   the copy started at the full-bleed band's own left edge, not the page
   container's. Padding is restated for the same reason. */
#page-approach .ap-about{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;
  max-width:1280px;margin-inline:auto;padding:clamp(28px,4vw,48px) clamp(20px,4vw,56px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#page-approach .ap-about .ch-label{color:var(--f-terra-l,#e0a184);margin:0 0 12px}
#page-approach .ap-about-t{font-family:var(--disp);font-size:clamp(24px,2.6vw,36px);font-weight:400;line-height:1.14;letter-spacing:-.022em;color:#fff;margin:0 0 14px;max-width:26ch;text-wrap:balance}
#page-approach .ap-about-p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.93);margin:0 0 20px;max-width:58ch}
#page-approach .ap-about .tlink{color:var(--f-terra-l,#e0a184)}
@media(max-width:820px){
  /* Stacked, the copy needs the full band, so the wash goes vertical and the
     band grows to fit rather than clipping the text. */
  #page-approach .ap-outro-img{height:clamp(420px,64vw,560px)}
  #page-approach .ap-outro-tone{background:
    linear-gradient(180deg,rgba(20,30,14,.9) 0%,rgba(20,30,14,.86) 55%,rgba(20,30,14,.82) 100%)}
  #page-approach .ap-about-p{max-width:none}
}

/* A02 · .ap-hero is display:flex. Below 860px the photograph switches to
   position:static, which makes it a flex ITEM beside the copy instead of a
   block above it — two squeezed columns rather than a stack. An explicit
   column direction is what actually makes the intended stacking happen. */
@media(max-width:860px){
  #page-approach .ap-hero{flex-direction:column;align-items:stretch;min-height:0}
  /* The 80% measure is a desktop device; on a phone it just wastes a fifth
     of an already narrow column. */
  #page-approach .ap-intro-copy{max-width:100%}
}