/* ==========================================================================
   PMEye Management Consulting, Intl.
   Structure note: flexbox only, no CSS grid. Every block below maps to a
   native Elementor widget - flex container, heading, text editor, image,
   button, icon box, testimonial, gallery, accordion.
   ========================================================================== */

/* --- Local font fallbacks (metric-tuned to the webfonts) ------------------ */
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --orange:      #FF6A24;
  --orange-dark: #E2571400;
  --orange-deep: #B84508; /* AA 4.5+ for small text on every light section bg */
  --ink:         #0A0A0A;
  --ink-soft:    #16191D;
  --ink-2:       #22272D;
  --mist:        #E0E3E8;
  --paper:       #FFFFFF;
  --paper-2:     #F6F7F8;
  --paper-3:     #EEF0F2;
  --muted:       #565E67;
  --muted-light: #5F6873; /* AA 4.5+ on white and paper tones */
  --line:        #E0E3E8;
  --line-dark:   #2C3238;

  /* The two Fallback faces below are metric-tuned local fonts: text keeps
     (almost) the same box before and after the webfonts arrive, so the late
     font swap no longer shifts the layout. */
  --serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gap:      32px;
  --gap-lg:   48px;
  --radius:   3px;
  --shell:    1240px;
  --section-y: clamp(72px, 9vw, 132px);
  --shadow:   0 1px 2px rgba(10,10,10,.04), 0 12px 32px rgba(10,10,10,.06);
  --shadow-lg:0 2px 4px rgba(10,10,10,.05), 0 24px 60px rgba(10,10,10,.10);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the closed off-canvas menu sits just past the right edge; clip (not hidden)
     stops it creating a horizontal scrollbar without breaking sticky headers */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.04; }
h2 { font-size: clamp(1.95rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.22; }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: .5em; }

strong { font-weight: 600; color: var(--ink); }

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 14px 22px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Shell / sections ----------------------------------------------------- */
.container { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 880px; }
.container--wide   { max-width: 1400px; }

.section { padding: var(--section-y) 0; }
.section--tight { padding: clamp(52px, 6vw, 84px) 0; }
.section--paper { background: var(--paper-2); }
.section--mist  { background: var(--paper-3); }

.section--ink {
  background: var(--ink);
  color: rgba(255,255,255,.74);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink .lede { color: rgba(255,255,255,.7); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- Type helpers --------------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-deep); /* AA on light; dark sections override below */
  margin: 0 0 18px;
  display: block;
}
.eyebrow--muted { color: var(--muted-light); }
.hero .eyebrow, .page-hero .eyebrow, .section--ink .eyebrow, .cta-band .eyebrow { color: var(--orange); }

.lede {
  font-size: clamp(1.075rem, 1.5vw, 1.3rem);
  line-height: 1.62;
  color: var(--muted);
}

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.rule-top { border-top: 2px solid var(--ink); padding-top: 22px; }

/* --- Flex rows (Elementor flex containers) -------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.row--lg    { gap: var(--gap-lg); }
.row--tight { gap: 20px; }
.row--middle { align-items: center; }
.row--stretch { align-items: stretch; }

/* flex-basis driven columns wrap on their own - no media queries needed */
.col-half    { flex: 1 1 340px; min-width: 0; }
.col-third   { flex: 1 1 280px; min-width: 0; }
.col-quarter { flex: 1 1 200px; min-width: 0; }
.col-two-thirds { flex: 2 1 420px; min-width: 0; }
.col-grow    { flex: 1 1 0%; min-width: 0; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 16px 30px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--orange-deep); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--mist); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--mist); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm { padding: 12px 22px; font-size: .875rem; }

/* Icon-only contact buttons: the address and number stay private until the
   visitor's mail or WhatsApp app opens. Labels live in aria-label/title. */
.btn--icon {
  width: 54px; height: 54px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.btn--icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.btn--whatsapp { background: #25D366; border-color: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1DA851; border-color: #1DA851; color: #fff; }

.footer-contact-icons { display: flex; gap: 10px; padding-top: 6px; }
.footer-contact-icons a {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  transition: border-color .15s ease, background .15s ease;
}
.footer-contact-icons a:hover { border-color: var(--orange); background: rgba(255,106,36,.12); }
.footer-contact-icons svg {
  width: 18px; height: 18px;
  stroke: rgba(255,255,255,.85); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  border-bottom: 1.5px solid var(--orange);
  padding-bottom: 3px;
  transition: gap .18s ease, color .18s ease;
}
.arrow-link:hover { gap: 15px; color: var(--orange-deep); }
.arrow-link .chev { transition: transform .18s ease; }

.section--ink .arrow-link { color: #fff; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Uses .container, so header gutters match the page content exactly */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  min-height: 90px;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
/* 67px -> 76px. width:auto + object-fit keep the ratio; the source is
   1320px wide against ~163px displayed, so it downsamples rather than blurs. */
.brand img {
  height: 76px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.site-nav { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 40px); }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.2vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li { margin: 0; display: flex; }

/* line-height:1 + inline-flex so the text box is the glyph box — this is what
   makes the links sit on the same optical centre line as the logo and CTA */
.nav-list a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 9px 0;
  position: relative;
  transition: color .16s ease;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-list a:hover { color: var(--ink); }
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* CTA stays the dominant element; explicit line-height centres it against the
   nav links rather than inheriting the body's 1.7 */
.site-header .btn--sm {
  line-height: 1;
  padding: 14px 26px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.4);
  z-index: 110;
}
.nav-backdrop.is-visible { display: block; }

/* 1100px: seven links + the larger logo + wider gaps need the switch earlier
   than the old 1000px, otherwise the row crowds on tablets */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    top: 0; right: 0;
    width: min(380px, 86vw);
    height: 100dvh;
    background: var(--paper);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 96px 30px 40px;
    transform: translateX(100%);
    /* visibility (not just transform) so the closed panel leaves the
       accessibility tree and cannot be tabbed into or intercept clicks */
    /* visibility:hidden takes the closed panel out of the accessibility tree
       and makes it unfocusable. Driven entirely by this media query, so it can
       never be left in a stale state the way a JS-set flag can.
       visibility is not interpolatable — hence a delayed switch on close and an
       instant one on open. */
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 130;
  }
  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-list li { border-bottom: 1px solid var(--line); display: block; }
  .nav-list a {
    display: block;
    line-height: 1.35;
    padding: 16px 0;
    font-size: 1.0625rem;
    font-family: var(--serif);
    font-weight: 600;
  }
  .nav-list a::after { display: none; }
  .nav-list a[aria-current="page"] { color: var(--orange); }

  .site-nav .btn { margin-top: 26px; justify-content: center; }
  .site-header .btn--sm { padding: 16px 26px; }

  /* tablet: ease the logo down a touch so the header stays compact */
  .brand img { height: 62px; }
  .header-inner { min-height: 86px; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* substantial, but header (90px) + hero stays inside the first viewport so a
     sliver of the next section shows and invites scrolling */
  min-height: min(80vh, 780px);
  padding: clamp(90px, 12vh, 150px) 0 clamp(56px, 7vw, 88px);
  background: var(--ink);
  overflow: hidden;
}

/* Full opacity — the gradient does the darkening, so the photograph keeps its
   detail and colour on the right where the people are */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  opacity: 1;
}

/* Left-to-right scrim: dense behind the copy, clearing toward the subjects */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10,10,10,.88) 0%,
    rgba(10,10,10,.84) 20%,
    rgba(10,10,10,.60) 45%,
    rgba(10,10,10,.40) 72%,
    rgba(10,10,10,.28) 100%);
}

.hero .container { position: relative; z-index: 2; }

.hero .eyebrow { color: var(--orange); margin-bottom: 20px; }
.hero h1 {
  color: #fff;
  max-width: 17ch;
  line-height: 1.07;
  letter-spacing: -.022em;
  margin-bottom: 24px;
}
.hero .lede {
  color: rgba(255,255,255,.88);
  max-width: 58ch;
  margin-bottom: 38px;
}

/* Secondary CTA: restrained — a lift in tint and border, never a full invert */
.hero .btn--outline-light {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.38);
}
.hero .btn--outline-light:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.72);
  color: #fff;
}

/* Narrow screens: copy spans the full width, so a horizontal scrim no longer
   works — switch to a vertical one and re-frame the crop to hold the subjects */
@media (max-width: 860px) {
  .hero__img { object-position: 68% 40%; }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(10,10,10,.72) 0%,
      rgba(10,10,10,.62) 35%,
      rgba(10,10,10,.78) 70%,
      rgba(10,10,10,.90) 100%);
  }
}

/* Page hero - shorter, for interior pages */
.page-hero {
  background: var(--ink);
  color: rgba(255,255,255,.74);
  padding: clamp(76px, 9vw, 132px) 0 clamp(60px, 7vw, 100px);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: rgba(255,255,255,.72); max-width: 62ch; }
.page-hero__inner { position: relative; z-index: 2; }

/* --- Stats ---------------------------------------------------------------- */
.stat { flex: 1 1 170px; min-width: 0; }
.stat__num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.4vw, 3.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.03em;
  display: block;
  margin-bottom: 12px;
}
.stat__num .unit { color: var(--orange); }
.stat__label {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.section--ink .stat__num { color: #fff; }
.section--ink .stat__label { color: rgba(255,255,255,.62); border-top-color: var(--line-dark); }

/* --- Figure stat (a single emphasised metric inside a section) ------------- */
.figure-stat {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 24px;
  border-top: 2px solid var(--orange);
  max-width: 22rem;
}
.figure-stat__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 10px;
}
.figure-stat__num .unit { color: var(--orange); }
.figure-stat__label {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.section--ink .figure-stat__num { color: #fff; }
.section--ink .figure-stat__label { color: rgba(255,255,255,.72); }

/* --- Cards / icon boxes --------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); font-size: .9688rem; }
.card__foot { margin-top: auto; padding-top: 22px; }

.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* Cards that are links: whole surface clickable, with a visible focus ring */
a.card { color: inherit; text-decoration: none; }
a.card:focus-visible,
a.sector-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
a.card .card__arrow {
  margin-top: auto;
  padding-top: 20px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .18s ease;
}
a.card:hover .card__arrow { gap: 14px; }
.section--ink a.card .card__arrow { color: var(--orange); }

.card--ink {
  background: var(--ink-2);
  border-color: var(--line-dark);
}
.card--ink p { color: rgba(255,255,255,.68); }
.card--ink .card__num { color: var(--orange); }
.card--ink:hover { border-color: var(--orange); }

.card__num {
  font-family: var(--serif);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--orange-deep);
  letter-spacing: .06em;
  display: block;
  margin-bottom: 18px;
}

/* Icon + number row at the top of a card (Elementor: Icon Box widget) */
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.card__head .card__num { margin-bottom: 0; }

.card__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  transition: background .2s ease;
}
.card__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.card:hover .card__icon { background: var(--orange); }
.card:hover .card__icon svg { stroke: #fff; }

.icon-box { display: flex; flex-direction: column; }
.icon-box__icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  margin-bottom: 22px;
  flex-shrink: 0;
}
.icon-box__icon svg { width: 20px; height: 20px; stroke: var(--orange); }

/* Numbered step */
.step { display: flex; flex-direction: column; }
.step__num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--mist);
  letter-spacing: -.03em;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--orange);
  display: block;
}
.section--ink .step__num { color: var(--line-dark); }

/* --- Evidence cycle --------------------------------------------------------
   The four method stages with a connecting rail and an explicit feedback loop.
   Horizontal on desktop, vertical below 860px. Flexbox + inline SVG only, so it
   scales, reflows, and stays readable to screen readers.
   -------------------------------------------------------------------------- */
.cycle { display: flex; flex-wrap: wrap; gap: 36px 28px; }

.cycle__stage {
  position: relative;
  flex: 1 1 210px;
  min-width: 0;
  padding-top: 66px;
}

/* rail between badges */
.cycle__stage::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 58px;
  right: -28px;
  height: 1.5px;
  background: var(--mist);
}
.cycle__stage:last-child::before { display: none; }

.cycle__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  background: var(--paper);
  transition: background .2s ease;
}
.cycle__icon svg {
  width: 21px; height: 21px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.cycle__stage:hover .cycle__icon,
.cycle__stage:focus-within .cycle__icon { background: var(--orange); }
.cycle__stage:hover .cycle__icon svg,
.cycle__stage:focus-within .cycle__icon svg { stroke: #fff; }

.cycle__num {
  display: block;
  font-family: var(--serif);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--orange-deep);
  margin-bottom: 10px;
}
.cycle__stage h2, .cycle__stage h3 { font-size: 1.1875rem; margin-bottom: .4em; }
.cycle__stage > p { color: var(--muted); font-size: .9375rem; }

/* the loop back into the next round */
.cycle__loop {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 62px);
  padding-top: 30px;
  border-top: 1.5px dashed var(--mist);
}
.cycle__loop::before {
  content: "";
  position: absolute;
  top: -6.5px;
  left: 0;
  width: 11px;
  height: 11px;
  border-left: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  transform: rotate(45deg);
}
.cycle__loop-label {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  padding-top: 4px;
}
.cycle__loop p { margin: 0; max-width: 74ch; }

@media (max-width: 860px) {
  .cycle { flex-direction: column; gap: 0; }
  .cycle__stage {
    flex: 1 1 auto;
    padding: 0 0 34px 68px;
    min-height: 48px;
  }
  .cycle__stage:last-child { padding-bottom: 0; }
  /* rail turns vertical, running down the left */
  .cycle__stage::before {
    top: 52px;
    bottom: -4px;
    left: 23px;
    right: auto;
    width: 1.5px;
    height: auto;
  }
}

/* --- Media / split blocks ------------------------------------------------- */
.media-figure { margin: 0; }
.media-figure img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}
.media-figure figcaption {
  font-size: .8125rem;
  color: var(--muted-light);
  padding-top: 12px;
  line-height: 1.5;
}
.media-figure--tall img { aspect-ratio: 4 / 5; }
.media-figure--wide img { aspect-ratio: 16 / 10; }
.media-figure--square img { aspect-ratio: 1 / 1; }

/* --- Checklist ------------------------------------------------------------ */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 13px; height: 2px;
  background: var(--orange);
}
.section--ink .checklist li { color: rgba(255,255,255,.72); }

/* --- Chips ---------------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chip-row li { margin: 0; }
.chip {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
a.chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.section--ink .chip { border-color: var(--line-dark); color: rgba(255,255,255,.8); }
.section--ink a.chip:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* --- Sector cards (Elementor: Image Box widget) ---------------------------- */
.sector-grid { display: flex; flex-wrap: wrap; gap: 20px; }

.sector-card {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sector-card:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.sector-card__media { position: relative; overflow: hidden; }
.sector-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}
.sector-card:hover .sector-card__media img { transform: scale(1.04); }

.sector-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  margin-top: auto;
}
.sector-card__body h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
}
.sector-card__chev {
  flex: 0 0 auto;
  color: var(--orange);
  font-size: 1.05rem;
  transition: transform .2s ease;
}
.sector-card:hover .sector-card__chev { transform: translateX(4px); }

/* --- Data panel ------------------------------------------------------------
   A designed graphic, deliberately not styled to imitate a screenshot. Every
   figure here is one already stated elsewhere on the site. Flexbox only.
   -------------------------------------------------------------------------- */
.data-panel {
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
}
.data-panel__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
}

.data-tiles { display: flex; flex-wrap: wrap; gap: 24px 20px; }
.data-tile { flex: 1 1 135px; min-width: 0; }
.data-tile__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 9px;
}
.data-tile__num .unit { color: var(--orange); }
.data-tile__label {
  display: block;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgba(255,255,255,.58);
}

.data-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.data-flow b {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #fff;
}
.data-flow i { font-style: normal; color: var(--orange); }

.data-panel__foot {
  margin: 18px 0 0;
  font-size: .75rem;
  line-height: 1.55;
  color: rgba(255,255,255,.48);
}

/* --- Pathway (staged process, vertical) -----------------------------------
   Real markup rather than an image: selectable, translatable, screen-reader
   readable and reflowable. Flexbox only; maps to Elementor Icon Boxes.
   -------------------------------------------------------------------------- */
.pathway { display: flex; flex-direction: column; }

.pathway__step {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 30px;
}
.pathway__step:last-child { padding-bottom: 0; }

/* connector runs from each badge down to the next */
.pathway__step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 50px;
  bottom: 4px;
  width: 1.5px;
  background: var(--mist);
}
.pathway__step:last-child::before { display: none; }

.pathway__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  background: var(--paper);
  transition: background .2s ease;
}
.pathway__icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.pathway__step:hover .pathway__icon { background: var(--orange); }
.pathway__step:hover .pathway__icon svg { stroke: #fff; }

.pathway__stage {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 6px;
}
.pathway__body h3 {
  font-size: 1.125rem;
  margin-bottom: .35em;
}
.pathway__body p {
  font-size: .9375rem;
  color: var(--muted);
  margin: 0;
}

.section--ink .pathway__step::before { background: var(--line-dark); }
.section--ink .pathway__icon { background: var(--ink); }
.section--ink .pathway__body p { color: rgba(255,255,255,.7); }

/* --- Testimonials --------------------------------------------------------- */
.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
}
/* Rendered as spoken quotations: a large serif opening mark, italic serif
   body, and an em-dash before the attribution. */
.testimonial blockquote {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -.01em;
}
.testimonial blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: .6;
  color: var(--orange);
  margin: 6px 0 18px;
}
.testimonial__who { margin-top: auto; }
.testimonial__name { font-weight: 600; font-size: .9375rem; color: var(--ink); margin: 0; }
.testimonial__name::before { content: "\2014\00a0"; color: var(--muted-light); font-weight: 400; }
.testimonial__role { font-size: .875rem; color: var(--muted); margin: 0; }

/* --- Assignment record ---------------------------------------------------- */
.record { list-style: none; margin: 0; padding: 0; }
.record li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.record li:first-child { border-top: 1px solid var(--line); }
.record dt, .record .record__key {
  flex: 0 0 128px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-light);
  padding-top: 3px;
}
.record dd, .record .record__val {
  flex: 1 1 260px;
  margin: 0;
  font-size: .9688rem;
  color: var(--ink-soft);
}
.section--ink .record li { border-color: var(--line-dark); }
.section--ink .record .record__val { color: rgba(255,255,255,.82); }

/* --- Gallery -------------------------------------------------------------- */
.gallery { display: flex; flex-wrap: wrap; gap: 16px; }
.gallery figure { flex: 1 1 260px; margin: 0; min-width: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform .3s ease;
}
.gallery figure:hover img { transform: scale(1.02); }
.gallery figcaption {
  font-size: .8125rem;
  color: var(--muted-light);
  padding-top: 10px;
  line-height: 1.5;
}

/* --- Credential wall ------------------------------------------------------ */
/* Credential wall. Third-party marks are the owner's permission decision -
   see ELEMENTOR-NOTES.md before adding or removing any. */
.logo-wall { display: flex; flex-wrap: wrap; gap: 14px; }
.logo-wall li {
  flex: 1 1 210px;
  max-width: 280px; /* a lone item in a row stays a card, not a full-width strip */
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.logo-wall li:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
/* Uniform optical band: logos render at natural aspect inside a 64px-tall
   lane instead of inflating to fill the cell — so a wide wordmark and a
   square seal carry the same visual weight. Greyscale at rest keeps the
   mismatched brand colours and baked backgrounds calm; hover restores
   colour. */
.logo-wall img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .2s ease, opacity .2s ease;
}
.logo-wall li:hover img,
.logo-wall li:focus-within img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .logo-wall img { transition: none; }
}

/* Grouped credential wall — keeps donor signal separate from other relationships */
.logo-group { margin-bottom: clamp(34px, 4vw, 54px); }
.logo-group:last-child { margin-bottom: 0; }
.logo-group > h3 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* --- Accordion (Elementor Accordion widget) ------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details {
  border-bottom: 1px solid var(--line);
}
.accordion summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  transition: color .16s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--orange-deep); }
.accordion summary::after {
  content: "";
  flex: 0 0 14px;
  width: 14px; height: 14px;
  margin-top: 7px;
  background:
    linear-gradient(var(--orange), var(--orange)) center/14px 1.5px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center/1.5px 14px no-repeat;
  transition: transform .22s ease;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .accordion__body { padding: 0 0 28px; max-width: 74ch; }
.accordion .accordion__body p { color: var(--muted); }

/* --- Timeline ------------------------------------------------------------- */
/* Horizontal on desktop, vertical on narrow screens. Flexbox only.
   In Elementor: a flex container of icon boxes; the rail and markers are
   border/background styling on each child, not a separate widget. */
.timeline {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 44px 0;
}
/* The journey continues: an arrowhead where the rail leaves the last node */
.timeline::after {
  content: "";
  position: absolute;
  top: 15.5px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  transform: rotate(45deg);
}

.timeline__item {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  padding: 60px 28px 0 0;
}

/* The rail — each item carries its own segment, so they join into one line.
   Soft orange: the whole span is journey already travelled. */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,106,36,.30);
}

/* Each node carries the milestone's own mark — registration shows the seal,
   the summit shows the lectern — in the same circled-icon language as the
   assignment stages. */
.timeline__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--orange);
  border-radius: 50%;
}
.timeline__node svg {
  width: 19px;
  height: 19px;
  stroke: var(--orange); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* The most recent milestone carries a soft halo: "where we are now" */
.timeline__item:last-child .timeline__node {
  box-shadow: 0 0 0 6px rgba(255,106,36,.12);
}

.timeline__year {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--orange);
  display: block;
  margin-bottom: 12px;
  line-height: 1;
  letter-spacing: -.02em;
}
.timeline__item h3 {
  font-size: 1.0625rem;
  font-family: var(--sans);
  font-weight: 600;
  margin-bottom: .45em;
}
.timeline__item p { font-size: .9375rem; color: var(--muted); }

/* On dark sections: same system, gap ring cut from ink instead of paper */
.section--ink .timeline__item::before { background: rgba(255,106,36,.34); }
.section--ink .timeline__node { background: var(--ink); }
.section--ink .timeline__item p { color: rgba(255,255,255,.68); }

/* Vertical below 720px — rail runs down the left; the onward arrow points down */
@media (max-width: 720px) {
  .timeline { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .timeline::after {
    top: auto;
    bottom: -14px;
    right: auto;
    left: 15.5px;
    transform: rotate(135deg);
  }

  .timeline__item {
    flex: 1 1 auto;
    padding: 0 0 34px 56px;
  }
  .timeline__item:last-child { padding-bottom: 0; }

  .timeline__item::before {
    top: 46px;
    bottom: -4px;
    left: 19px;
    right: auto;
    width: 2px;
    height: auto;
  }
  /* short tail below the final marker for the onward arrow to hang from */
  .timeline__item:last-child::before { bottom: -10px; }

  .timeline__year { margin-bottom: 8px; }
}

/* --- Geographic phone lines ------------------------------------------------
   Region label sits quiet above a slightly stronger number. Used in the footer
   (dark) and on the contact page (light); colours adapt to context.
   -------------------------------------------------------------------------- */
.phone-item { margin-bottom: 12px; }
.phone-item:last-of-type { margin-bottom: 0; }

.phone-item__label {
  display: block;
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 2px;
}
.phone-item a {
  white-space: nowrap;
  display: inline-block;
  padding: 3px 0;
  font-size: .9688rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.phone-item a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* footer sits on near-black */
.site-footer .phone-item__label { color: rgba(255,255,255,.55); }
.site-footer .phone-item a { color: rgba(255,255,255,.76); font-weight: 500; }
.site-footer .phone-item a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* comfortable touch targets on small screens */
@media (max-width: 700px) {
  .phone-item { margin-bottom: 6px; }
  .phone-item a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
  }
}

/* --- Contact / forms ------------------------------------------------------ */
.contact-block { margin-bottom: 34px; }
.contact-block h3 {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.contact-block p, .contact-block a { color: var(--muted); font-size: .9688rem; }
.contact-block a { border-bottom: 1px solid var(--mist); transition: border-color .16s ease, color .16s ease; }
.contact-block a:hover { color: var(--orange); border-color: var(--orange); }
.section--ink .contact-block p, .section--ink .contact-block a { color: rgba(255,255,255,.74); }
.section--ink .contact-block a { border-bottom-color: var(--line-dark); }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
}
.field { display: flex; flex-direction: column; margin-bottom: 20px; }
.field label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  padding: 14px 16px;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: var(--paper);
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 132px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,106,36,.14);
}
.form-note { font-size: .8125rem; color: var(--muted-light); margin-top: 6px; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--ink); color: rgba(255,255,255,.74); padding: clamp(52px, 6vw, 80px) 0; }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band .lede { color: rgba(255,255,255,.7); max-width: 54ch; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.62); padding: clamp(44px, 5vw, 60px) 0 0; border-top: 1px solid var(--line-dark); }
.site-footer a { color: rgba(255,255,255,.62); transition: color .16s ease; }
.site-footer a:hover { color: var(--orange); }
.footer-brand img { height: 58px; width: auto; margin-bottom: 22px; }
.footer-brand p { font-size: .9375rem; max-width: 34ch; color: rgba(255,255,255,.6); }

.footer-col h3 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; font-size: .9375rem; line-height: 1.5; }

.footer-bottom {
  margin-top: clamp(44px, 5vw, 68px);
  border-top: 1px solid var(--line-dark);
  padding: 26px 0 34px;
}
.footer-bottom .row { align-items: center; justify-content: space-between; gap: 12px 32px; }
.footer-bottom p { font-size: .8125rem; color: rgba(255,255,255,.44); margin: 0; }

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .brand img { height: 54px; }
  .header-inner { min-height: 76px; gap: 16px; }
  .hero { min-height: 74vh; padding-top: 116px; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .record dt, .record .record__key { flex: 0 0 100%; }
}

/* ==========================================================================
   CHAT AGENT
   Overlay widget, injected by assets/js/chat.js. Not part of the page flow,
   so it does not affect the Elementor section structure. On WordPress this
   is replaced wholesale by the AI agent provider's embed script.
   ========================================================================== */

.chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  border: 0;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255,106,36,.34), 0 2px 6px rgba(10,10,10,.16);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.chat-launcher:hover { background: var(--orange-deep); transform: translateY(-2px); }
.chat-launcher svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.8; }
.chat-launcher.is-hidden { opacity: 0; pointer-events: none; transform: scale(.9); }

.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 210;
  display: flex;
  flex-direction: column;
  width: min(392px, calc(100vw - 44px));
  height: min(620px, calc(100dvh - 44px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
  /* visibility (not just opacity) so the closed panel leaves the accessibility
     tree - otherwise its Close button and input stay in the tab order */
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.chat-panel.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s; }

.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 18px 22px;
  background: var(--ink);
  flex-shrink: 0;
}
.chat-panel__title { display: flex; flex-direction: column; }
.chat-panel__title strong {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.chat-panel__title span { font-size: .75rem; color: rgba(255,255,255,.6); }

.chat-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background .16s ease, border-color .16s ease;
}
.chat-close:hover { background: var(--ink-2); border-color: var(--orange); }

.chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper-2);
}

.chat-msg {
  max-width: 88%;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: .9375rem;
  line-height: 1.6;
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--orange);
  color: #fff;
  border: 1px solid var(--orange);
}
.chat-msg p { margin: 0 0 .7em; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg a { color: var(--orange-deep); border-bottom: 1px solid currentColor; font-weight: 600; }
.chat-msg--user a { color: #fff; }
.chat-msg ul { margin: .4em 0 0; padding-left: 1.1em; }
.chat-msg li { margin-bottom: .3em; }

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 16px;
  background: var(--paper-2);
  flex-shrink: 0;
}
.chat-chip {
  padding: 8px 14px;
  border: 1px solid var(--mist);
  border-radius: 100px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.chat-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.chat-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.chat-foot input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: .9375rem;
  padding: 12px 14px;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  color: var(--ink);
}
.chat-foot input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,106,36,.14);
}
.chat-send {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .16s ease;
}
.chat-send:hover { background: var(--orange-deep); }
.chat-send svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }

@media (max-width: 560px) {
  .chat-launcher { right: 16px; bottom: 16px; padding: 13px 20px 13px 16px; }
  .chat-panel {
    right: 0; bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
}

/* Note: scroll-reveal rules were removed deliberately. They hid sections by
   default and relied on IntersectionObserver firing for each one; when it did
   not, sections stayed invisible. Only the metric count-up remains, in
   assets/js/motion.js, which cannot hide anything. */

/* ==========================================================================
   METHODS & INSTRUMENTS
   Compact summary rail, 2x2 methodology matrix, technology groups, QA flow.
   Flexbox only. Nothing here is hidden by default or depends on JS.
   ========================================================================== */

/* --- Evidence pathway rail (7 compact stages) ----------------------------- */
.rail { display: flex; flex-wrap: wrap; }
.rail__step {
  position: relative;
  flex: 1 1 112px;
  min-width: 0;
  padding-top: 54px;
  text-align: center;
}
/* thin orange connector between markers */
.rail__step::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 50%;
  right: -50%;
  height: 1.5px;
  background: var(--orange);
  opacity: .32;
}
.rail__step:last-child::before { display: none; }

.rail__icon {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  background: var(--paper-3);
  transition: background .2s ease;
}
.rail__icon svg {
  width: 18px; height: 18px;
  stroke: var(--orange); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease;
}
.rail__step:hover .rail__icon { background: var(--orange); }
.rail__step:hover .rail__icon svg { stroke: #fff; }

.rail__label {
  display: block;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.35;
  padding: 0 4px;
}

@media (max-width: 760px) {
  .rail { flex-direction: column; }
  .rail__step {
    flex: 1 1 auto;
    text-align: left;
    padding: 0 0 26px 58px;
    min-height: 40px;
  }
  .rail__step:last-child { padding-bottom: 0; }
  .rail__step::before {
    top: 44px; bottom: -2px; left: 19px;
    right: auto; width: 1.5px; height: auto;
  }
  .rail__icon { left: 0; transform: none; }
  .rail__label { padding: 10px 0 0; }
}

/* --- Methodology matrix (2 x 2) ------------------------------------------- */
.method-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.method-card {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 34px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.method-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }

.method-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.method-card__icon {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  transition: background .2s ease;
}
.method-card__icon svg {
  width: 19px; height: 19px;
  stroke: var(--orange); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease;
}
.method-card:hover .method-card__icon { background: var(--orange); }
.method-card:hover .method-card__icon svg { stroke: #fff; }

.method-card__cat {
  display: block;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 3px;
}
.method-card__head h3 { margin: 0; font-size: 1.1875rem; }
.method-card__purpose { color: var(--muted); font-size: .9375rem; margin-bottom: 20px; }

.method-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.method-list li {
  margin: 0;
  padding: 9px 0;
  font-size: .875rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

/* --- Technology groups ---------------------------------------------------- */
.tech-groups { display: flex; flex-wrap: wrap; gap: 30px 26px; }
.tech-group { flex: 1 1 220px; min-width: 0; }
.tech-group__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.tech-group__title svg {
  width: 16px; height: 16px;
  stroke: var(--orange); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 16px;
}
.tech-chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.tech-chips li { margin: 0; }
.tech-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--mist);
  border-radius: 100px;
  font-size: .8125rem;
  color: var(--ink-soft);
  background: var(--paper);
  transition: border-color .18s ease;
}
/* Generic line icons, not vendor trademarks - see ELEMENTOR-NOTES.md */
.tech-chips svg {
  width: 15px; height: 15px;
  flex: 0 0 15px;
  stroke: var(--muted-light); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s ease;
}
.tech-chips span:hover { border-color: var(--ink); }
.tech-chips span:hover svg { stroke: var(--orange); }

/* --- What digital fieldwork enables --------------------------------------- */
.enables { display: flex; flex-wrap: wrap; gap: 24px 20px; }
.enable { flex: 1 1 180px; min-width: 0; }
.enable__icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.enable__icon svg {
  width: 22px; height: 22px;
  stroke: var(--orange); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.enable h4 {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 7px;
}
.enable p { font-size: .875rem; color: var(--muted); margin: 0; }

/* --- QA flow (numbered, arrowed) ------------------------------------------ */
.qa-flow { display: flex; flex-wrap: wrap; gap: 14px 10px; align-items: stretch; }
.qa-step {
  flex: 1 1 138px;
  min-width: 0;
  position: relative;
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.qa-step__n {
  display: block;
  font-family: var(--serif);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--orange-deep);
  margin-bottom: 6px;
}
.qa-step p { margin: 0; font-size: .875rem; font-weight: 500; color: var(--ink-soft); line-height: 1.4; }

/* --- Orange callout ------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--orange);
  background: var(--paper);
  padding: clamp(24px, 3vw, 32px);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout h3 { margin-bottom: .5em; }
.callout p { color: var(--muted); margin: 0; }

/* --- Non-photographic sector card face ------------------------------------
   Used where a photograph would misrepresent the work. MHPSS evaluation is
   delivered remotely and turns on confidential case material, so there is
   nothing that can honestly be photographed - an in-person workshop photo
   borrowed from another assignment was the previous, wrong, answer.
   Deliberately abstract: no brain, head silhouette, heart or medical cross. */
.sector-card__media--mark {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  background-image: radial-gradient(circle at 32% 26%, rgba(255,106,36,.20), transparent 58%);
}
.sector-card__media--mark svg {
  width: 64%;
  max-width: 210px;
  height: auto;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .4s ease;
}
.sector-card:hover .sector-card__media--mark svg { transform: scale(1.04); }
.sector-card__media--mark .n-arc  { stroke: rgba(255,255,255,.17); stroke-width: 1.1; }
.sector-card__media--mark .n-line { stroke: rgba(255,255,255,.32); stroke-width: 1.1; }
.sector-card__media--mark .n-dot  { fill: rgba(255,255,255,.92); stroke: none; }
.sector-card__media--mark .n-hub  { fill: var(--orange); stroke: none; }

/* The arrow inside a card that is itself a link is a <span>, not an <a> - an
   anchor inside an anchor is invalid and the parser silently splits the card,
   leaving an empty box on the page. Hover has to come from the card. */
.card:hover .arrow-link { gap: 15px; color: var(--orange-deep); }

/* --- Footprint map --------------------------------------------------------
   The map is a dot-grid world on a dark panel; the country names beneath it
   are the real content, so the map can fail to load without losing meaning. */
.map-panel {
  background: var(--ink);
  border-radius: var(--radius);
  padding: clamp(18px, 2.6vw, 34px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.map-panel img { width: 100%; height: auto; display: block; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
  list-style: none;
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  padding: clamp(16px, 2.4vw, 22px) 0 0;
  border-top: 1px solid var(--line-dark);
}
.map-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: .8125rem;
  color: rgba(255,255,255,.72);
}
/* Keys mirror the map fills exactly: white-ringed orange = offices,
   solid orange = assignments, faded orange = representation. */
.map-key { flex: 0 0 20px; width: 20px; height: 14px; border-radius: 3px; }
.map-key--hq   { background: var(--orange); box-shadow: 0 0 0 1.5px #fff; }
.map-key--work { background: var(--orange); }
.map-key--rep  { background: var(--orange); opacity: .45; }

/* Country labels stop being legible below roughly 720px, so the map scrolls
   inside its own panel rather than shrinking into illegibility. The country
   list underneath carries the same information for anyone who does not scroll. */
.map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.map-scroll img { min-width: 900px; }


/* ==========================================================================
   HEADER SEARCH
   Button lives in .header-tools so it stays on the right at every width,
   including when the nav collapses off-canvas. The panel is injected by
   search.js and drops out of the sticky header.
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* pushes nav + tools to the right edge as one group */
.site-nav { margin-left: auto; }

.search-toggle {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.search-toggle svg {
  width: 18px; height: 18px;
  stroke: var(--ink); fill: none;
  stroke-width: 1.7; stroke-linecap: round;
}
.search-toggle:hover { border-color: var(--ink); }
.search-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.search-toggle[aria-expanded="true"] svg { stroke: #fff; }

.search-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: clamp(18px, 2.4vw, 28px) 0 clamp(20px, 2.6vw, 30px);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 12px;
}
.search-field > svg {
  flex: 0 0 20px; width: 20px; height: 20px;
  stroke: var(--muted-light); fill: none; stroke-width: 1.7; stroke-linecap: round;
}
.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--ink);
  padding: 4px 0;
}
.search-field input:focus { outline: none; }
.search-field input::placeholder { color: var(--muted-light); }

.search-dismiss {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.search-dismiss svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 1.7; stroke-linecap: round; }
.search-dismiss:hover { background: var(--paper-3); }
.search-dismiss:hover svg { stroke: var(--ink); }

.search-hint {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin: 22px 0 6px;
}

.search-list { list-style: none; margin: 8px 0 0; padding: 0; }
.search-list li { margin: 0; }
.search-list a {
  display: block;
  padding: 13px 14px;
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.search-list a:hover,
.search-list a:focus-visible {
  background: var(--paper-2);
  border-left-color: var(--orange);
}
.search-list__cat {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 3px;
}
.search-list__title { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; }
.search-list__desc  { display: block; font-size: .875rem; color: var(--muted); margin-top: 2px; }

.search-empty { margin: 26px 0 0; color: var(--muted); }
.search-empty a { border-bottom: 1.5px solid var(--orange); font-weight: 600; color: var(--ink); }


@media (max-width: 560px) {
  .search-toggle { width: 42px; height: 42px; }
  .search-list__desc { display: none; }
}

/* --- Footer credentials strip ---------------------------------------------
   Was a trust bar directly under the homepage hero. Moved here because it
   interrupted the hero-to-proposition read, and because registrations and
   working languages are reference facts a procurement reader looks for at
   the bottom of any page, not a headline. */
.footer-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--line-dark);
}
.footer-facts p {
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.52);
}
.footer-facts strong { color: rgba(255,255,255,.9); font-weight: 600; }

/* --- Credential cards (registrations) --------------------------------------
   Smaller than a standard card because these are reference facts, not
   propositions. Icons are drawn in the site's own line style - see the
   third-party logos note in ELEMENTOR-NOTES.md for why no official
   regulator or UN emblems appear here. */
.card--cred { padding: clamp(20px, 2.2vw, 28px); }
.card--cred .card__num { font-size: .8125rem; margin-bottom: 12px; }
.card--cred h3 { font-size: 1.0625rem; line-height: 1.25; margin-bottom: .45em; }
.card--cred p { font-size: .875rem; line-height: 1.55; }

.cred__icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  margin-bottom: 16px;
  transition: background .2s ease;
}
.cred__icon svg {
  width: 18px; height: 18px;
  stroke: var(--orange); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease;
}
.card--cred:hover .cred__icon { background: var(--orange); }
.card--cred:hover .cred__icon svg { stroke: #fff; }

/* Explore links run 2-up so eight destinations occupy four rows - the same
   height as the address and telephone columns beside them. */
.footer-links { display: flex; flex-wrap: wrap; }
.footer-links li { flex: 0 0 50%; min-width: 0; padding-right: 10px; }
@media (max-width: 480px) { .footer-links li { flex: 0 0 100%; } }

/* --- Phone flags -----------------------------------------------------------
   Inline SVG, not emoji: Windows renders flag emoji as bare letters, and the
   site style forbids emoji as interface icons. The International line gets a
   line-style globe (a US flag under "International" would contradict it). */
.phone-item__label { display: flex; align-items: center; gap: 7px; }
/* .flag-chip is the same mark used inline in running text and lists */
.phone-flag,
.flag-chip {
  flex: 0 0 18px;
  width: 18px; height: 12px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(127,127,127,.4);
}
.phone-flag svg,
.flag-chip svg { display: block; width: 100%; height: 100%; }
.flag-chip {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 9px;
}
.phone-flag--globe {
  flex-basis: 14px; width: 14px; height: 14px;
  border-radius: 0; overflow: visible; box-shadow: none;
}

/* Step head holds the ghost number and its underline; the stage icon sits
   in front of the stage name below, so glyph and label read as one unit. */
.step__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}
.step__head .step__num { margin-bottom: 0; }
.step__icon {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
}
.step__icon svg {
  width: 17px; height: 17px;
  stroke: var(--orange); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.step__head + h3 { display: flex; align-items: center; gap: 13px; }

/* Contact block headings carry a small identifying mark - a flag for the
   location blocks, a line icon for the channels. */
.contact-block h3 { display: flex; align-items: center; gap: 9px; }
.cb-icon {
  flex: 0 0 17px;
  width: 17px; height: 17px;
  display: inline-flex;
}
.cb-icon svg {
  width: 100%; height: 100%;
  stroke: var(--orange-deep); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.contact-block h3 .flag-chip { margin-right: 0; vertical-align: 0; }

/* --- Vision / mission large glyphs ----------------------------------------
   Oversized thin-stroke marks: the eye is the firm's own name, the key is
   the mission's "unlocking potential". Thin stroke keeps them editorial
   rather than decorative. */
.vm-icon {
  display: block;
  width: clamp(56px, 7vw, 84px);
  height: clamp(56px, 7vw, 84px);
  margin-bottom: 20px;
}
.vm-icon svg {
  width: 100%; height: 100%;
  stroke: var(--orange); fill: none;
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}

/* Skill bullets: each carries its own mark instead of the generic dash */
.skill-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 0;
}
.skill-list li::before { display: none; }
.skill-icon {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  margin-top: 3px;
}
.skill-icon svg {
  width: 100%; height: 100%;
  stroke: var(--orange-deep); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Hero ghost glyph ------------------------------------------------------
   Each page hero carries its own concept at watermark scale in the empty
   right half, with a one-time zoom-settle on load. Pure CSS from a visible
   end state - nothing depends on JS firing (the scroll-reveal lesson). The
   global reduced-motion rule disables the animation. Hidden below 900px,
   where it would collide with the text. */
.page-hero__inner { position: relative; }
.page-hero__glyph {
  position: absolute;
  top: 50%;
  right: clamp(24px, 7vw, 110px);
  width: clamp(260px, 26vw, 400px);
  height: clamp(260px, 26vw, 400px);
  transform: translateY(-50%);
  pointer-events: none;
  animation: heroGlyph .9s ease-out both;
}
.page-hero__glyph svg {
  width: 100%; height: 100%;
  stroke: rgba(255,255,255,.13); fill: none;
  stroke-width: .9; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes heroGlyph {
  from { opacity: 0; transform: translateY(-50%) scale(1.14); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* Glyphs drawn on a 96-unit canvas carry their own weight - the .9 stroke
   is calibrated for 24-unit icons and renders 4x too heavy on them. */
.page-hero__glyph--rich svg { stroke-width: 3; }
@media (max-width: 900px) { .page-hero__glyph { display: none; } }

/* --- Assignment routes (contact) -------------------------------------------
   Three alternatives, not three buttons: hover affordance removed so nothing
   promises a click it cannot honour, "or" pills mark them as choices, and
   one arrow-link below carries the actual action to the form. */
.card--static:hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}
.card--static:hover .card__icon { background: transparent; }
.card--static:hover .card__icon svg { stroke: var(--orange); }

.route-or {
  align-self: center;
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-light);
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
}
@media (max-width: 900px) {
  .route-or { flex-basis: 100%; border: 0; background: transparent; text-align: center; padding: 0; }
}

/* Contact: the form leads and takes the wider share; details follow */
.col-wide { flex: 2.5 1 460px; min-width: 0; }

/* The three decisions in the hero proposition carry the brand accent */
.hero .lede strong, .page-hero .lede strong { color: var(--orange); font-weight: 600; font-style: italic; }

/* Hero eyebrow: each capability leads with a small white mark - white so the
   icons read against the orange text, the same glyphs the site uses for
   these capabilities everywhere else. */
.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}
.hero-eyebrow__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero-eyebrow__item svg {
  flex: 0 0 15px;
  width: 15px; height: 15px;
  stroke: rgba(255,255,255,.92); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .15s ease;
}
/* The eyebrow capabilities link to their detail pages: colours invert on
   hover (text to white, mark to orange) so the affordance reads without an
   underline breaking the letterspaced caps. */
a.hero-eyebrow__item { color: inherit; text-decoration: none; transition: color .15s ease; }
a.hero-eyebrow__item:hover, a.hero-eyebrow__item:focus-visible { color: #fff; }
a.hero-eyebrow__item:hover svg, a.hero-eyebrow__item:focus-visible svg { stroke: var(--orange); }