/* ============================================================================
   THE GLOBAL RESILIENCE FOUNDATION
   Design system: "The Open Ring"
   ----------------------------------------------------------------------------
   Derived from GRF Brand Guidelines v1.0 (3 August 2026).
   Palette, gradient stops, typography rules and contrast pairings are taken
   directly from the guidelines. Section 08 proportion is respected:
   ~60% white/black, ~25% Deep Green & Teal, ~10% Resilience Green, ~5% accents.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* Core palette — guidelines §08 */
  --green:  #2EB285;   /* Resilience Green — PRIMARY, emphasis only        */
  --cyan:   #2EC6CD;   /* Signal Cyan      — HIGHLIGHT, accent only        */
  --teal:   #008E98;   /* Teal             — MID, panels & headings        */
  --deep:   #007E63;   /* Deep Green       — DEPTH, AA body text on white  */
  --aqua:   #73C1CB;   /* Light Aqua       — LIGHT, accent only            */

  /* Neutrals — guidelines §08 */
  --ink:    #000000;
  --slate:  #6B6B6B;   /* body text on white — AA 5.33:1 */
  --grey:   #8E8E8E;
  --paper:  #FFFFFF;
  --mist:   #F4F8F8;   /* light neutral ground */
  --line:   #DCE6E6;
  --line-d: rgba(255,255,255,.16);

  /* The gradient — guidelines §09, exact stops, light → dark only */
  --grad: linear-gradient(90deg,#73C1CB 0%,#3EAAB6 20%,#008E98 50%,#008783 70%,#00816F 90%,#007E63 100%);
  --grad-v: linear-gradient(180deg,#73C1CB 0%,#3EAAB6 20%,#008E98 50%,#008783 70%,#00816F 90%,#007E63 100%);

  /* The symbol's fifteen-segment ramp (§02), used across the hero at client
     direction. NOTE: §08 reserves these values for the symbol and states they
     "should not be applied to type, panels or graphics" — flagged for sign-off.
     Every other gradient on the page remains the official §09 gradient. */
  --ramp-135: linear-gradient(135deg,
    #2EC6CD 0%,  #2EC4CD 7%,  #2EC2CD 14%, #2EBACD 21%, #2EB6CD 29%,
    #2EB0CD 36%, #2EB2BD 43%, #2EB2BB 50%, #2EB29E 57%, #2EB29C 64%,
    #2EB295 71%, #2EB28A 79%, #2EB285 86%, #2EB26C 93%, #2EB24C 100%);
  --ramp-90: linear-gradient(90deg,
    #2EC6CD 0%,  #2EC4CD 7%,  #2EC2CD 14%, #2EBACD 21%, #2EB6CD 29%,
    #2EB0CD 36%, #2EB2BD 43%, #2EB2BB 50%, #2EB29E 57%, #2EB29C 64%,
    #2EB295 71%, #2EB28A 79%, #2EB285 86%, #2EB26C 93%, #2EB24C 100%);

  /* Rhythm */
  --shell: 1320px;
  --pad: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 11vw, 168px);
  --gap: clamp(20px, 2.2vw, 32px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:300;                    /* guidelines §10 — body is Light   */
  font-size:16px;                     /* never below 16px, §10            */
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:1100px){ body{ font-size:17px; } }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
blockquote{ margin:0; }
dl,dd{ margin:0; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--green); color:#fff; }

:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:14px 20px;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------------- LAYOUT */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); position:relative; }

.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.col-1-5{  grid-column:1 / span 5;  }
.col-1-6{  grid-column:1 / span 6;  }
.col-1-7{  grid-column:1 / span 7;  }
.col-6-12{ grid-column:6 / span 7;  }
.col-7-12{ grid-column:7 / span 6;  }
.col-8-12{ grid-column:8 / span 5;  }
.col-full{ grid-column:1 / -1;      }

@media (max-width:900px){
  .grid-12{ grid-template-columns:1fr; }
  .col-1-5,.col-1-6,.col-1-7,.col-6-12,.col-7-12,.col-8-12{ grid-column:1 / -1; }
}

/* ------------------------------------------------------------ TYPOGRAPHY */
/* §10: headings ExtraLight/Light with tightened tracking; hierarchy comes
   from weight + scale, never from Bold. Bold/Black are never used. */

h1,h2,h3{ margin:0; color:var(--ink); font-weight:200; letter-spacing:-.016em; }

.display{
  font-size:clamp(2.6rem, 5.4vw, 5.4rem);
  line-height:1.04;
  letter-spacing:-.022em;
  font-weight:200;
}
.display em{ font-style:normal; color:var(--green); }

h2{
  font-size:clamp(1.95rem, 3.5vw, 3.4rem);
  line-height:1.1;
}
h3{
  font-size:clamp(1.15rem, 1.5vw, 1.45rem);
  line-height:1.3;
  font-weight:400;
  letter-spacing:-.008em;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.05rem, 1.3vw, 1.28rem);
  line-height:1.6;
  color:var(--slate);
}
.lead-light{ color:rgba(255,255,255,.78); }

.eyebrow{                              /* §10 — Medium 500, caps, +22% track */
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--deep);
  margin:0 0 1.4em;
  display:flex; align-items:center; gap:.9em;
}
.eyebrow-light{ color:var(--cyan); }
/* Section index. The PDF supplies the section titles, so those become the H2 —
   the eyebrow carries only the number and a rule. */
.eyebrow .num{
  display:flex; align-items:center; gap:.9em;
  font-weight:400; letter-spacing:.12em;
}
.eyebrow .num::after{
  content:''; width:38px; height:1px; background:currentColor; opacity:.45;
}

/* §11 — Mid Grey is 3.28:1 on white and fails AA. On light grounds every
   piece of running text, captions included, uses Slate (5.33:1) or darker.
   Mid Grey is kept for dark grounds only, where it measures 6.41:1. */
.cap{
  margin-top:18px; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); font-weight:400;
}
.cap-light{ color:rgba(255,255,255,.5); }

.hl{ color:var(--green); }

.sec-head{ max-width:820px; margin-bottom:clamp(48px,6vw,88px); }
.sec-head-center{ max-width:860px; margin-inline:auto; text-align:center; }
.sec-head-center .eyebrow{ justify-content:center; }
.sec-head .lead{ margin-top:1.1em; }

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px;
  font-size:.82rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid transparent; border-radius:999px;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.btn-solid{ background:var(--deep); color:#fff; }
.btn-solid:hover{ background:var(--green); transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(255,255,255,.55); color:#fff; }       /* dark grounds  */
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
/* Light grounds, including the gradient banner — a dark outline holds on both
   without needing a fill behind it. */
.btn-outline{ border-color:rgba(0,0,0,.4); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); background:rgba(0,0,0,.06); transform:translateY(-2px); }
.btn-sm{ padding:12px 22px; font-size:.72rem; }

/* ---------------------------------------------- SHARED: ORB (image + ring) */
/* The "open ring" device — a circular image with an arc that never closes.  */
.orb{ position:relative; width:100%; aspect-ratio:1; }
.orb > img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--pos, 50% 50%);  /* per-image focal point */
  border-radius:50%;
  clip-path:circle(50% at 50% 50%);     /* safari-safe circular mask */
}
.orb-ring{
  position:absolute; inset:-5.5%;
  width:111%; height:111%;
  overflow:visible; pointer-events:none;
}

/* Once the grid stacks, a full-column orb becomes a 700px circle. Cap it so
   the portrait stays a considered element rather than a full-bleed accident. */
@media (max-width:900px){
  .who-media .orb, .diff-media .orb{ max-width:440px; }
}

/* Rotation: continuous, very slow. Motion is the point of the identity,
   but it must stay calm — 60s+ per revolution. */
.spin-slow{ animation:spin 90s linear infinite; }
.spin-rev { animation:spin 70s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================================
   HEADER
   ====================================================================== */
/* Always a solid white bar. With the banner running full gradient, this is the
   only ground on which the full-colour lockup is permitted (§06) — the symbol's
   cyans and greens would otherwise sit in the same tonal range as the ramp and
   stop separating from it. */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:18px;
  background:var(--paper);
  transition:padding .45s var(--ease), box-shadow .45s var(--ease);
}
.head-inner{ display:flex; align-items:center; gap:var(--gap); }

.brand{ flex:none; position:relative; display:block; line-height:0; }
/* §05 — the lockup is never shown below 140px wide on screen.
   At the fixed 3.49:1 ratio, 44px tall is 154px wide.
   §06 — full colour throughout: every ground it meets here is white. */
.brand-mark{ height:44px; width:auto; }

.site-header.is-stuck{
  padding-block:12px;
  box-shadow:0 1px 0 var(--line);
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav ul{ display:flex; gap:clamp(18px,2.2vw,34px); }

/* Link rules are scoped away from the CTA throughout — it is a button, and the
   nav's colour and underline states would otherwise fight its own styling.
   The header always sits on a white ground, so links are always dark. */
.nav a:not(.nav-cta){
  font-size:.84rem; font-weight:400; letter-spacing:.02em;
  color:var(--ink); position:relative; padding-block:6px;
  transition:color .35s var(--ease);
}
.nav a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--deep); transition:width .4s var(--ease);
}
.nav a:not(.nav-cta):hover{ color:var(--deep); }
.nav a:not(.nav-cta):hover::after{ width:100%; }

/* Solid Deep Green pill, white type — 5.04:1, AA. */
.nav-cta{ padding:12px 24px; font-size:.72rem; background:var(--deep); color:#fff; }
.nav-cta:hover{ background:var(--green); color:#fff; }

.burger{
  display:none; margin-left:auto;
  width:46px; height:46px; border:0; background:transparent; cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:11px; width:24px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.burger span:nth-child(1){ top:20px; }
.burger span:nth-child(2){ top:27px; }

@media (max-width:1080px){
  .burger{ display:block; }
  .nav{
    /* The header carries backdrop-filter once stuck, which makes it the
       containing block for its fixed children. Size the panel explicitly so
       it fills the viewport in both header states. */
    position:fixed; top:0; left:0; z-index:-1;
    width:100vw; height:100vh; height:100dvh;
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:0; padding:0 var(--pad);
    /* Light panel, so the full-colour lockup and dark type both hold (§06). */
    background:
      radial-gradient(56% 40% at 92% 6%,  rgba(46,198,205,.20) 0%, rgba(46,198,205,0) 70%),
      radial-gradient(60% 44% at 4%  96%, rgba(46,178,133,.20) 0%, rgba(46,178,133,0) 72%),
      var(--paper);
    clip-path:circle(0% at calc(100% - 46px) 42px);
    transition:clip-path .7s var(--ease);
    pointer-events:none;
  }
  .nav ul{ flex-direction:column; gap:6px; }
  .nav a:not(.nav-cta){
    color:var(--ink); font-size:clamp(1.6rem,7vw,2.6rem);
    font-weight:200; letter-spacing:-.02em;
  }
  .nav a:not(.nav-cta):hover{ color:var(--deep); }
  .nav a:not(.nav-cta)::after{ display:none; }
  .nav-cta{ margin-top:36px; font-size:.78rem; padding:16px 30px; }
  body.menu-open .nav{ clip-path:circle(150% at calc(100% - 46px) 42px); pointer-events:auto; }
  body.menu-open{ overflow:hidden; }
  body.menu-open .burger span:nth-child(1){ top:23px; transform:rotate(45deg); }
  body.menu-open .burger span:nth-child(2){ top:23px; transform:rotate(-45deg); }
}

/* =========================================================================
   HERO
   ====================================================================== */
/* ---- Hero ------------------------------------------------------------------
   White ground. §06 requires a white or black ground for the full-colour
   lockup — on a gradient field the symbol's cyans and greens stop separating
   from the background. So the gradient appears as arc forms and soft washes
   over white, never as a flood behind the mark.                             */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:150px; padding-bottom:90px;
  background:var(--paper);
  overflow:hidden;
  isolation:isolate;
}
/* Full-bleed field of the symbol's fifteen values, corner to corner.
   ---------------------------------------------------------------------------
   The ramp is deepened by a flat 34% black. That is what white type costs:
   at full brightness the ramp measures 2.08:1 against white at the cyan end
   and 2.82:1 at the green end — both well under the 3:1 floor even for
   display sizes. Deepened, white lands at 4.8:1 (cyan) to 6.2:1 (green).
   The hue and the cyan→green movement are untouched; only the value drops.
   Raise --hero-depth toward 0 for a brighter field, but the type must go
   black again below about .28.                                             */
.hero{ --hero-depth:.34; }
.hero-wash{
  position:absolute; inset:0; z-index:-3;
  background:
    linear-gradient(0deg,
      rgba(0,0,0,var(--hero-depth)), rgba(0,0,0,var(--hero-depth))),
    var(--ramp-135);
}
/* The static arc composition — the gradient as structure, not as a fill. */
.hero-arcs{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  pointer-events:none;
}
/* Centred behind the copy. `translate` is a separate property from `transform`,
   so it survives the rotation animation without needing a wrapper. */
.hero-ring{
  --ring: min(84vh, 760px);
  position:absolute; z-index:-1;
  width:var(--ring); height:var(--ring);
  left:50%; top:50%;
  margin-left:calc(var(--ring) * -.5);
  margin-top:calc(var(--ring) * -.5);
  transform-origin:50% 50%;
  opacity:.5;
  pointer-events:none;
}
.hero-inner{ width:100%; }

.hero-copy{
  width:100%; max-width:860px;
  margin-inline:auto;
  text-align:center;
}
.hero-copy .eyebrow{ justify-content:center; }

/* The H1 is the client's full mission statement — 90 characters. It needs a
   size that lets it read as three or four editorial lines, not ten. */
.hero .display{
  color:var(--ink);
  font-size:clamp(2.05rem, 3.6vw, 3.6rem);
  line-height:1.14;
  margin-bottom:.7em;
  max-width:22ch;
  margin-inline:auto;
}
/* White throughout. On the deepened ramp Resilience Green would still sit in
   the same tonal family as the ground and stop separating, so the headline
   stays one colour — emphasis comes from scale, not hue. */
.hero .display{ color:#fff; }
.hero .display em{ color:inherit; }
.hero-copy .eyebrow{ color:#fff; }
/* Black fill, white label: 4.4:1 against the ground for the pill's own edge,
   21:1 for the label inside it. */
.hero-actions .btn-solid{ background:var(--ink); }
.hero-actions .btn-solid:hover{ background:var(--deep); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.4em; justify-content:center; }

@media (max-width:1100px){
  .hero{ padding-top:130px; padding-bottom:100px; }
  .hero-ring{ --ring: min(112vw, 620px); opacity:.45; }
  /* The arc composition is drawn for a landscape frame. On a tall viewport
     `slice` crops it hard, so let the gradient field carry the section and
     keep the arcs as a quiet trace. */
  .hero-arcs{ opacity:.7; }
}
@media (max-width:430px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .cta .hero-actions{ align-items:stretch; }
}

/* =========================================================================
   PURPOSE
   ====================================================================== */
.purpose{
  position:relative; overflow:hidden;
  padding-block:clamp(84px,12vw,180px);
  background:var(--paper);
}
.purpose-art{
  position:absolute; right:-14%; top:50%; transform:translateY(-50%);
  width:min(62vw,760px); opacity:.5; pointer-events:none;
  mix-blend-mode:multiply;
}
/* The gradient as a "page spine" — guidelines §09 permits the gradient as a
   slim rule. It runs light → dark, top to bottom. Never reversed. */
.spine-block{
  position:relative; padding-left:clamp(22px,3.4vw,52px);
  max-width:min(100%, 900px);
}
.spine-block::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px;
  background:var(--grad-v); border-radius:2px;
}
.statement{
  font-size:clamp(1.8rem, 3.6vw, 3.5rem);
  line-height:1.16; letter-spacing:-.018em; max-width:22ch;
}

/* =========================================================================
   WHO WE ARE
   ====================================================================== */
.who-grid{ align-items:center; row-gap:clamp(48px,6vw,0px); }
.who-media{ position:relative; }
.who-copy h2{ margin-bottom:.5em; }
.who-copy .lead{ font-size:clamp(1.15rem,1.7vw,1.6rem); max-width:32ch; }

/* =========================================================================
   WHAT WE DO
   ====================================================================== */
.programmes{ background:var(--mist); }
.programmes .sticky{ position:sticky; top:130px; }

.tick-ring{
  width:min(74%,230px); margin-top:clamp(36px,4vw,60px);
  opacity:.85;
  animation:spin 120s linear infinite;
}

.prog-list{ border-top:1px solid var(--line); }
.prog{ border-bottom:1px solid var(--line); }
.prog > a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(18px,2.4vw,40px);
  padding-block:clamp(26px,3vw,42px);
  transition:padding-left .5s var(--ease);
}
.prog-n{
  font-size:.72rem; font-weight:500; letter-spacing:.18em; color:var(--slate);
  transition:color .4s var(--ease);
  align-self:start; padding-top:.5em;
}
/* The programme titles stand alone, so they carry the row typographically. */
.prog-body h3{
  margin:0; font-weight:300;
  font-size:clamp(1.2rem,2vw,1.75rem);
  transition:color .4s var(--ease);
}

/* Inline thumb: the only image treatment on tablet/mobile */
.prog-thumb{
  width:76px; height:76px; flex:none; display:block;
  border-radius:50%; overflow:hidden;
  clip-path:circle(50% at 50% 50%);
  opacity:.9;
}
.prog-thumb img{ width:100%; height:100%; object-fit:cover; }

@media (hover:hover) and (min-width:901px){
  .prog-thumb{ display:none; }        /* replaced by the floating peek */
  .prog > a:hover{ padding-left:clamp(10px,1.4vw,26px); }
  .prog > a:hover .prog-body h3{ color:var(--deep); }
  .prog > a:hover .prog-n{ color:var(--green); }
}
@media (max-width:900px){
  .programmes .sticky{ position:static; }
  .tick-ring{ width:170px; }
}
/* On small screens the photograph carries the row. A pill crop keeps the
   circular language of the identity without shrinking the image to a token. */
@media (max-width:600px){
  .prog > a{ grid-template-columns:auto 1fr; row-gap:20px; }
  .prog-thumb{
    grid-column:1 / -1;
    width:100%; height:190px;
    border-radius:999px; clip-path:none;
    margin-top:4px;
  }
}

/* ---- Proof of work: the evidence block under the programme list ----------
   Spans the full container and starts at its left edge. It carries its own
   12-column grid: because it is full width and uses the same gap as the
   parent, its tracks land on the parent's, so the heading sits on the page's
   left rhythm and the body on the same axis as the programme list above.
   A gradient tick on the rule marks it as a distinct kind of content. */
.proof{
  margin-top:clamp(48px,5vw,72px);
  padding-top:clamp(30px,3.4vw,42px);
  border-top:1px solid var(--line);
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:start;
}
.proof::before{
  content:''; position:absolute; left:0; top:-1px; width:44px; height:3px;
  background:var(--grad); border-radius:2px;
}
.proof-head{ grid-column:1 / span 4; }
.proof-body{ grid-column:6 / span 7; }
.proof h3{
  margin:0; font-weight:300;
  font-size:clamp(1.3rem,2.1vw,1.85rem);
  text-wrap:balance;
}
.proof p{ font-size:.98rem; max-width:62ch; }

@media (max-width:900px){
  .proof{ grid-template-columns:1fr; row-gap:clamp(20px,3vw,28px); }
  .proof-head,
  .proof-body{ grid-column:1 / -1; }
}
.proof a{
  color:var(--deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .3s var(--ease);
}
.proof a:hover{ color:var(--green); }

/* Floating circular preview that follows the cursor — the "abstract movement
   around imagery" idea, kept to one element so it never becomes noisy. */
.prog-peek{
  position:fixed; z-index:60; top:0; left:0;
  width:240px; height:240px; margin:-120px 0 0 -120px;
  border-radius:50%; overflow:hidden;
  clip-path:circle(50% at 50% 50%);
  pointer-events:none; opacity:0;
  transform:scale(.82);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.prog-peek img{ width:100%; height:100%; object-fit:cover; }
.prog-peek.on{ opacity:1; transform:scale(1); }
@media (max-width:900px), (hover:none){ .prog-peek{ display:none; } }

/* =========================================================================
   WHAT MAKES US DIFFERENT
   ====================================================================== */
.difference{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:rgba(255,255,255,.72);
  padding-block:clamp(88px,12vw,190px);
}
.diff-art{
  position:absolute; z-index:-1; right:-20%; top:-18%;
  width:min(84vw,1000px); opacity:.13;
  mix-blend-mode:screen; pointer-events:none;
}
.diff-ring{
  position:absolute; z-index:-1; left:-14%; bottom:-34%;
  width:min(70vw,620px); aspect-ratio:1; opacity:.4; pointer-events:none;
}
.diff-grid{ align-items:center; row-gap:clamp(56px,7vw,0px); }

.pullquote{
  font-size:clamp(1.85rem, 3.9vw, 3.7rem);
  line-height:1.14; letter-spacing:-.02em; font-weight:200;
  color:#fff; margin-bottom:.7em; max-width:19ch;
}
/* Resilience Green is AAA reversed out of black — §11 */
.pullquote em{ font-style:normal; color:var(--green); }
/* Set after the quote, so it reads as the attribution rather than a title. */
.pull-label{
  margin:0; font-size:.72rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan);
}
.diff-media{ position:relative; }

/* =========================================================================
   WHO WE SERVE — three orbs set on a shared arc
   ====================================================================== */
.serve-arc{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,56px);
  align-items:start;
}
.serve-item figcaption{ margin-top:clamp(22px,2.4vw,34px); }
.serve-item h3{ margin:0; font-weight:300; font-size:clamp(1.2rem,1.9vw,1.6rem); }
.orb-sm{ max-width:340px; }

/* The arc: middle item lifts, outer items drop — a curve, not a row.
   Offset with margin, not transform: these items also carry .reveal, whose
   settled state sets `transform:none` and would cancel a translate. */
@media (min-width:901px){
  .serve-arc{ align-items:start; }
  .serve-item:nth-child(1){ margin-top:64px; }
  .serve-item:nth-child(2){ margin-top:0; }
  .serve-item:nth-child(3){ margin-top:74px; }
  /* Caption centred under its portrait. The orb is capped at 340px inside a
     wider column, so it has to be centred too — otherwise the label would
     centre on the column and sit off-axis from the circle above it. */
  .serve-item{ text-align:center; }
  .serve-item .orb-sm{ margin-inline:auto; }
}
@media (max-width:900px){
  .serve-arc{ grid-template-columns:1fr; gap:clamp(44px,7vw,64px); max-width:520px; }
  .serve-item figure{ display:grid; grid-template-columns:130px 1fr; gap:24px; align-items:center; }
  .serve-item figcaption{ margin-top:0; }
}
@media (max-width:480px){
  /* Stacked again below 480px, so the caption re-centres under the portrait.
     Between 481 and 900 the figure is image-beside-text and stays left. */
  .serve-item figure{ grid-template-columns:1fr; }
  .orb-sm{ max-width:210px; margin-inline:auto; }
  .serve-item{ text-align:center; }
}

/* =========================================================================
   VALUES
   ====================================================================== */
.values{ background:var(--mist); position:relative; overflow:hidden; }
.values-art{
  position:absolute; inset:auto 0 -10% 0; width:100%;
  opacity:.7; pointer-events:none; mix-blend-mode:multiply;
}
.value-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,2.6vw,44px);
  position:relative;
}
.value{
  position:relative;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.value::before{                          /* one stroke from the ring */
  content:''; position:absolute; left:0; top:-1px; width:34px; height:3px;
  background:var(--grad); border-radius:2px;
}
.value-n{
  display:block; font-size:.7rem; font-weight:500; letter-spacing:.2em;
  color:var(--teal); margin-bottom:1.2em;
}
.value h3{ margin-bottom:.5em; font-size:clamp(1.3rem,1.9vw,1.75rem); font-weight:300; }
.value p{ font-size:.95rem; }

/* The four values sit on a shallow arc on desktop. Margin, not transform —
   see the note on .serve-item. */
@media (min-width:1001px){
  .value-grid{ align-items:start; }
  .value:nth-child(1){ margin-top:26px; }
  .value:nth-child(4){ margin-top:26px; }
}
@media (max-width:1000px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .value-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   NAMESAKE — full-bleed gradient, white type only (§09)
   ====================================================================== */
.namesake{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--grad);
  padding-block:clamp(72px,9vw,132px);
  color:#fff;
}
.name-arcs{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; }
/* .shell already centres and pads; constrain the copy, not the shell, so the
   band stays flush with the page's left rhythm. */
.namesake-inner .namesake-def{ max-width:46ch; }
/* §09 — a full-bleed gradient field carries white type only. Not tinted white:
   the light-aqua end of the ramp gives a semi-transparent label too little
   contrast to hold. */
.namesake .eyebrow{ color:#fff; }
.namesake-word{
  color:#fff; font-weight:200;
  font-size:clamp(3.2rem,9vw,8rem); line-height:1; letter-spacing:-.03em;
  margin-bottom:.28em;
}
.namesake-def{
  font-size:clamp(1.05rem,1.5vw,1.4rem);   /* never below 16px on gradient */
  line-height:1.55; color:#fff; max-width:44ch; font-weight:300;
}

/* =========================================================================
   WHERE WE WORK
   ====================================================================== */
.where-grid{ row-gap:clamp(56px,6vw,0px); }
.where h2{ margin-bottom:.6em; }

.orbit{
  width:min(100%,500px); margin-top:clamp(40px,4vw,64px);
  overflow:visible;
}
.orbit-node text{
  font-family:inherit; font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; fill:var(--slate);
}
.orbit-node circle{ transition:r .4s var(--ease); }

.where-list{ display:grid; gap:0; align-content:start; }
.loc{
  padding-block:clamp(22px,2.4vw,30px);
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(150px,.28fr) 1fr; gap:var(--gap);
  align-items:baseline;
}
.loc:first-child{ border-top:1px solid var(--line); }
.loc-tag{
  font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin:0;
}
.loc-tag-deep{ color:var(--deep); }
.loc-tag-cyan{ color:var(--teal); }
.loc h3{ margin-bottom:.4em; font-size:clamp(1.35rem,2.1vw,1.9rem); font-weight:300; }
.loc p{ font-size:.95rem; margin:0; max-width:48ch; }
.loc > .loc-tag{ grid-column:1; }
.loc > h3,
.loc > p:not(.loc-tag){ grid-column:2; }
@media (max-width:640px){
  .loc{ grid-template-columns:1fr; gap:10px; }
  /* Must match the specificity of the two-column rules above, or the explicit
     `grid-column:2` survives and grid invents a second column. */
  .loc > .loc-tag,
  .loc > h3,
  .loc > p:not(.loc-tag){ grid-column:1; }
}

/* =========================================================================
   PARTNERS
   ====================================================================== */
.partners{ position:relative; }
.partner-rail{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,1.6vw,26px);
  border-top:1px solid var(--line); padding-top:clamp(32px,4vw,52px);
}
.partner-rail li{
  font-size:clamp(1.05rem,2.1vw,1.9rem); font-weight:200; letter-spacing:-.012em;
  color:var(--ink);
  display:flex; align-items:center; gap:clamp(14px,1.6vw,26px);
}
/* The separator is the identity in miniature: a ring with a gap in it. */
.partner-rail li::after{
  content:''; width:13px; height:13px; flex:none;
  border:1.5px solid var(--aqua);
  border-right-color:transparent;
  border-radius:50%;
  transform:rotate(-40deg);
}
.partner-rail li:last-child::after{ display:none; }
/* The second half of the sentence the rail above lists — split at the
   semicolon exactly as the source content punctuates it. */
.partner-close{
  margin-top:clamp(32px,4vw,52px);
  font-size:clamp(1.1rem,1.7vw,1.5rem); font-weight:300;
  color:var(--deep); max-width:34ch;
}

/* =========================================================================
   LEADERSHIP BOARD
   ====================================================================== */
.board{ background:var(--mist); }

/* Flex rather than grid: with seven members the final row centres itself
   instead of hanging left, and it stays centred at every breakpoint. */
.board-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(36px,4vw,64px) clamp(24px,3vw,52px);
}
.board-member{
  flex:0 0 auto;
  width:clamp(150px, 18vw, 216px);
  text-align:center;
}
.board-member h3{
  margin-top:22px;
  font-size:clamp(.95rem,1.1vw,1.08rem);
  font-weight:400; line-height:1.35; letter-spacing:0;
  text-wrap:balance;
}

.board-orb{ position:relative; width:100%; aspect-ratio:1; }
.board-orb > img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--pos, 50% 50%);   /* keeps the face inside the mask */
  border-radius:50%;
  clip-path:circle(50% at 50% 50%);
}

/* Awaiting a portrait — the open ring carries the initials instead. */
.board-orb-empty{
  display:grid; place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
    var(--grad);
}
.board-initials{
  font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:200;
  letter-spacing:.06em; color:var(--deep);
}
.board-pending{
  margin-top:6px; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate);
}

@media (max-width:560px){
  .board-grid{ gap:34px 22px; }
  .board-member{ width:calc(50% - 11px); }
}

/* =========================================================================
   CTA
   ====================================================================== */
/* Light ground: the facet artwork carries the section instead of a flat fill.
   §11 — on a light field, running text is Black, Deep Green or Slate Grey. */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--mist); color:var(--slate);
  padding-block:clamp(88px,12vw,180px);
  text-align:center;
}
.cta-art{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover;
  object-position:center center;
}
/* A soft veil through the middle so the heading always has a clean field
   under it — light enough that the facets still read at the edges. */
.cta::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,
    rgba(255,255,255,.66) 0%, rgba(255,255,255,.4) 55%, rgba(255,255,255,0) 100%);
}
.cta-inner{ max-width:820px; margin-inline:auto; }
.cta .eyebrow{ justify-content:center; }
.cta h2{ color:var(--ink); margin-bottom:.55em; }
.cta .lead{ margin-inline:auto; color:var(--slate); }
.cta .hero-actions{ justify-content:center; }
/* The CTA reuses .hero-actions for layout only — its ground is near-white, so
   the primary button keeps the brand Deep Green. */
.cta .hero-actions .btn-solid{ background:var(--deep); }
.cta .hero-actions .btn-solid:hover{ background:var(--green); }

/* =========================================================================
   FOOTER
   ====================================================================== */
.site-footer{
  background:var(--ink); color:rgba(255,255,255,.6);
  padding-top:clamp(56px,7vw,96px);
  position:relative; overflow:hidden; isolation:isolate;
}
.foot-ring{
  position:absolute; z-index:-1;
  right:-8%; bottom:-40%;
  width:min(64vw,660px); aspect-ratio:1;
  opacity:.5; pointer-events:none;
}

/* ---- sign-off band ---- */
.foot-top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(28px,4vw,64px);
  padding-bottom:clamp(44px,5vw,72px);
  border-bottom:1px solid var(--line-d);
}
/* §06 — full colour on black is an approved pairing */
.foot-logo{ height:60px; width:auto; margin-bottom:clamp(24px,3vw,38px); }
.foot-statement{
  font-size:clamp(1.45rem,3vw,2.9rem);
  line-height:1.16; letter-spacing:-.02em; font-weight:200;
  color:#fff; max-width:19ch; margin:0;
}
/* Resilience Green is AAA reversed out of black — §11 */
.foot-statement em{ font-style:normal; color:var(--green); }

/* ---- back to top: the open ring, doing a job ---- */
.to-top{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(255,255,255,.55);
  transition:color .4s var(--ease);
}
.to-top-ring{
  position:relative; display:grid; place-items:center;
  width:72px; height:72px;
}
.to-top-ring > svg:first-child{
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform .8s var(--ease);
}
.to-top-arrow{ width:20px; height:20px; transition:transform .4s var(--ease); }
.to-top-label{
  font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
}
.to-top:hover{ color:var(--green); }
.to-top:hover .to-top-ring > svg:first-child{ transform:rotate(140deg); }
.to-top:hover .to-top-arrow{ transform:translateY(-4px); }

/* ---- link grid ---- */
.foot-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr 1.15fr;
  gap:clamp(32px,4vw,72px);
  padding-block:clamp(44px,5vw,72px);
}
.foot-h{
  font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin:0 0 1.8em;
}
.foot-col ul{ display:grid; gap:2px; }

/* A rule slides out of the left edge on hover — the arc language at link scale */
.foot-col li > a{
  position:relative; display:block;
  font-size:.95rem; padding:7px 0 7px 0;
  transition:padding-left .4s var(--ease), color .35s var(--ease);
}
.foot-col li > a::before{
  content:''; position:absolute; left:0; top:50%; margin-top:-.5px;
  width:0; height:1px; background:var(--green);
  transition:width .4s var(--ease);
}
.foot-col li > a:hover{ padding-left:24px; color:#fff; }
.foot-col li > a:hover::before{ width:16px; }

/* Where-we-work entries carry their status — useful, and it stops the column
   reading as five undifferentiated links. */
.foot-col-loc li > a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.loc-status{
  flex:none;
  font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.56);   /* ≈5.9:1 on black — it is small, caps type */
}
.loc-status.is-established{ color:var(--green); }
.loc-status.is-base{ color:var(--cyan); }

/* ---- contact ---- */
.foot-contact{ display:grid; gap:18px; }
.foot-contact dt{
  font-size:.62rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.56); margin-bottom:5px;
}
.foot-contact dd{ font-size:.95rem; }
.pend{ color:var(--grey); font-style:italic; }   /* Mid Grey on black — 6.41:1 */

.foot-link-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
  padding-bottom:7px; border-bottom:1px solid rgba(46,178,133,.35);
  transition:border-color .35s var(--ease), gap .35s var(--ease);
}
.foot-link-cta:hover{ border-color:var(--green); gap:16px; }

/* ---- legal ---- */
.foot-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding-block:26px;
  border-top:1px solid var(--line-d);
  font-size:.78rem; color:var(--grey);
}
.foot-legal p{ margin:0; }

/* §09 — the gradient as a footer bar. Light → dark, left to right. */
.grad-bar{ height:6px; background:var(--grad); }

@media (max-width:900px){
  .foot-top{ flex-direction:column; align-items:flex-start; gap:36px; }
  .to-top{ flex-direction:row; align-items:center; gap:16px; }
  .to-top-ring{ width:54px; height:54px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:40px 32px; }
  .foot-col:last-child{ grid-column:1 / -1; }
  .foot-ring{ right:-30%; bottom:-24%; opacity:.24; }
}
@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr; }
  .foot-col:last-child{ grid-column:1; }
}

/* =========================================================================
   MOTION — reveals. Everything is visible by default; JS opts in.
   ====================================================================== */
html.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
html.js .reveal.d1{ transition-delay:.09s; }
html.js .reveal.d2{ transition-delay:.18s; }
html.js .reveal.d3{ transition-delay:.27s; }
html.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .spin-slow,.spin-rev,.tick-ring{ animation:none !important; }
  .prog-peek{ display:none !important; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}