/* ==========================================================================
   Munde Herlambang & Partners — Thema 4
   Design language derived from aoshearman.com:
     · deep pine green primary (#00342B) with bright green accent (#00AD62)
     · pale mint tints instead of grey for secondary surfaces
     · high-contrast display serif over a neo-grotesque UI sans
     · sharp-cornered imagery, pill buttons, uppercase letterspaced micro-labels
   Signature of this theme: a single-row header — awards left, brand centred,
   nav right — over a full-bleed video hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — lifted from the A&O Shearman stylesheet */
  --ink-900: #002620;   /* deepest pine — footer */
  --ink:     #00342B;   /* primary. header, dark bands */
  --ink-700: #044D40;
  --ink-600: #0c594c;
  --green-700: #00713f;
  --green-600: #00884d;  /* accent text on white — 4.5:1 */
  --green-500: #009b55;
  --green-400: #00ad62;  /* accent on dark green — 4.7:1 */
  --sage-600: #457c73;
  --sage-400: #5fa297;
  --mint-300: #adccc7;
  --mint-200: #cce5e1;
  --mint-100: #ddf1ee;
  --mint-050: #f2faf7;

  /* Neutrals */
  --paper:     #ffffff;
  --paper-alt: #f8fcfc;
  --grey-700:  #4d4d4d;  /* body copy — 8.6:1 */
  --grey-500:  #7f7f7f;  /* smallest text — 4.6:1 */
  --grey-100:  #f4f4f4;

  /* Reserved highlights, used sparingly */
  --coral: #ff5f46;
  --gold:  #deab16;

  /* Type */
  --font-display: "Playfair Display", "Hatton", Georgia, "Times New Roman", serif;
  --font-sans: "Archivo", "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(42px, 6.4vw, 104px);
  --fs-h1:      clamp(36px, 5vw, 78px);
  --fs-h2:      clamp(27px, 3vw, 48px);
  --fs-h3:      clamp(19px, 1.5vw, 26px);
  --fs-lede:    clamp(17px, 1.3vw, 21px);
  --fs-body:    16.5px;
  --fs-micro:   12px;

  /* Layout — single-row header: awards · brand (centred) · nav + tools */
  --head: 96px;
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1600px;
  --sec: clamp(56px, 7vw, 120px);

  --line: rgba(0, 52, 43, .14);
  --line-dark: rgba(255, 255, 255, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Below the desktop breakpoint the nav collapses into the drawer. */
@media (max-width: 1180px) {
  :root { --head: 66px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--head);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--grey-700);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.home { padding-top: 0; }
body.is-locked { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

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

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

/* Deep links must clear the fixed header. */
[id] { scroll-margin-top: calc(var(--head) + 24px); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.1em; }

button, input, select, textarea { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--green-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.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;
}

.skip-link {
  position: fixed; top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-140%);
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   3. Layout utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .62); }
.section--alt { background: var(--paper-alt); }
.section--mint { background: var(--mint-100); }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, .78); }
.section--ink h2, .section--ink h3 { color: #fff; }

.measure { max-width: 62ch; }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-600);
  margin: 0 0 16px;
}
.section--ink .eyebrow, .on-ink .eyebrow { color: var(--green-400); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--grey-700);
  max-width: 68ch;
  text-align: justify;
}

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

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 52px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { margin: 0; }
.section-head--sm h2 { font-size: var(--fs-h3); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   4. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn:hover { background: var(--ink); color: #fff; }

.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--green-600); border-color: var(--green-600); }

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

.btn--plain { border-color: transparent; padding-inline: 0; color: var(--green-600); }
.btn--plain:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.btn--chev::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-600);
  letter-spacing: .01em;
}
.arrow-link::after {
  content: "";
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: width .3s var(--ease);
}
.arrow-link:hover::after { width: 34px; }
.on-ink .arrow-link, .section--ink .arrow-link { color: var(--green-400); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* --------------------------------------------------------------------------
   5. Header spacer — balances the nav so the brand stays page-centred
   -------------------------------------------------------------------------- */
/* Empty on purpose. Its only job is to give .site-header__top a left-hand
   flex child with the same flex: 1 1 0 as .site-header__right, which is what
   centres the brand on the row (see the README for the full centring math).
   Awards live in the hero banner now (.hero__awards), not the header. */
.site-header__spacer { flex: 1 1 0; }

@media (max-width: 900px) { .site-header__spacer { display: none; } }

/* --------------------------------------------------------------------------
   6. Header + primary navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 110;
  height: var(--head);
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}

/* On the home page the header floats over the video until the visitor scrolls. */
body.home .site-header { background: transparent; border-bottom-color: transparent; }
body.home .site-header.is-stuck {
  background: var(--ink);
  border-bottom-color: rgba(255, 255, 255, .09);
}

/* One row: awards (left) · brand (centred) · nav + tools (right).
   The two side groups carry equal flex bases (`flex: 1 1 0`), which is what
   actually centres the brand on the row — a plain `margin-left:auto` or a
   `1fr auto 1fr` grid would not, because the right group is far wider than the
   left and would push the brand off centre.
   Neither side is given `min-width: 0`, so each stops shrinking at its
   min-content width. Below roughly 1450px the right group needs more than half
   the row; the left group then yields and the brand drifts left rather than the
   row overflowing. It never overlaps. */
/* Capped to --maxw and centred, so the row sits on the same grid as the page
   content and the awards / nav are drawn inward instead of out to the screen
   edges. The brand still lands on the page centre: the row is centred in the
   viewport, and the equal side groups below centre the brand within the row.
   That only holds while the row is wide enough for both sides to reach equal
   width — see the budget note in the README before changing any size here. */
.site-header__top {
  height: var(--head);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
}

.brand {
  flex: 0 0 auto;
  margin-inline: clamp(20px, 2vw, 40px);   /* clear space either side */
}
.brand img {
  width: clamp(210px, 17vw, 360px);
  filter: brightness(0) invert(1);
}

.site-header__right {
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: clamp(6px, 0.7vw, 12px);
  height: 100%;
}

/* Gaps are deliberately tight: every pixel here is doubled against the awards
   side, so widening them pushes the brand off centre on narrower desktops. */
.nav {
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 0.6vw, 10px);
  height: 100%;
}
.nav__item { display: flex; align-items: stretch; }

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  position: relative;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; bottom: 34px;
  height: 1.5px;
  background: var(--green-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: #fff; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.header-tools .icon-btn { color: #fff; }
.icon-btn--menu { display: none; }

.burger { position: relative; }
.burger span {
  position: absolute;
  left: 12px; width: 18px; height: 1.6px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20.4px; }
.burger span:nth-child(3) { top: 25.8px; }
[aria-expanded="true"].burger span:nth-child(1) { transform: translateY(5.4px) rotate(45deg); }
[aria-expanded="true"].burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"].burger span:nth-child(3) { transform: translateY(-5.4px) rotate(-45deg); }

/* Mega menu ---------------------------------------------------------------- */
.mega {
  position: fixed;
  top: var(--head); left: 0; right: 0;
  background: var(--ink-700);
  color: rgba(255, 255, 255, .8);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  box-shadow: 0 30px 60px rgba(0, 38, 32, .28);
}
.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }

.mega__inner {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2.1fr;
  gap: clamp(28px, 4vw, 72px);
  padding-block: clamp(34px, 3.4vw, 56px);
}
.mega__aside h2 { color: #fff; font-size: clamp(26px, 2.2vw, 38px); margin-bottom: 12px; }
.mega__aside p { color: rgba(255, 255, 255, .68); margin-bottom: 22px; max-width: 34ch; }

.mega__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 56px); }
.mega__col h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-400);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li + li { margin-top: 2px; }
.mega__list a {
  display: block;
  padding: 7px 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .8);
  border-bottom: 1px solid transparent;
  transition: color .22s var(--ease), padding-left .28s var(--ease);
}
.mega__list a:hover { color: #fff; padding-left: 8px; }
.mega__foot { margin-top: 22px; }

@media (max-width: 1180px) { .mega { display: none; } }

/* --------------------------------------------------------------------------
   7. Search panel + drawer
   -------------------------------------------------------------------------- */
.search-panel {
  position: fixed;
  top: var(--head); left: 0; right: 0;
  z-index: 105;
  background: var(--ink-700);
  color: #fff;
  padding-block: clamp(28px, 3vw, 48px);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .38s var(--ease), opacity .3s, visibility .38s;
}
.search-panel.is-open { transform: none; opacity: 1; visibility: visible; }
.search-panel__hint { margin: 14px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .62); }

.field-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 10px;
}
.search-panel .field-label, .drawer .field-label { color: var(--green-400); }

.field-underline {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 10px;
  transition: border-color .25s var(--ease);
}
.field-underline:focus-within { border-color: var(--green-600); }
.field-underline input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: clamp(17px, 1.6vw, 22px);
  outline: none;
}
.field-underline input::placeholder { color: var(--grey-500); }
.field-underline > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--grey-500); stroke-width: 1.6; stroke-linecap: round; }

.search-panel .field-underline { border-bottom-color: rgba(255, 255, 255, .35); }
.search-panel .field-underline:focus-within { border-bottom-color: var(--green-400); }
.search-panel input { color: #fff; }
.search-panel input::placeholder { color: rgba(255, 255, 255, .5); }
.search-panel .icon-btn { color: #fff; }

.select-underline {
  position: relative;
  border-bottom: 1.5px solid var(--line);
  transition: border-color .25s var(--ease);
}
.select-underline:focus-within { border-color: var(--green-600); }
.select-underline::after {
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--grey-500);
  border-bottom: 1.5px solid var(--grey-500);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select-underline select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 26px 10px 0;
  font-size: 15.5px;
  appearance: none;
  outline: none;
  cursor: pointer;
}

/* Drawer ------------------------------------------------------------------- */
.drawer {
  position: fixed;
  top: var(--head); left: 0; right: 0; bottom: 0;
  z-index: 104;
  background: var(--ink);
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 26px 60px;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .4s var(--ease), visibility .4s;
}
.drawer.is-open { transform: none; visibility: visible; }

.drawer__link, .drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.drawer__toggle::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--green-400);
  border-bottom: 1.6px solid var(--green-400);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease);
}
.drawer__toggle[aria-expanded="true"]::after { transform: rotate(225deg) translate(-3px, -3px); }

.drawer__panel {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}
.drawer__panel.is-open { max-height: 720px; }
.drawer__panel li a {
  display: block;
  padding: 11px 0 11px 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, .76);
  border-left: 1px solid rgba(255, 255, 255, .18);
  margin-left: 2px;
}
.drawer__panel li:first-child a { padding-top: 16px; }
.drawer__panel li a:hover { color: #fff; border-left-color: var(--green-400); }

.drawer__meta {
  margin-top: 34px;
  font-size: 14px;
  color: rgba(255, 255, 255, .64);
}
.drawer__meta a { color: var(--green-400); }

/* --------------------------------------------------------------------------
   8. Hero — full-bleed video slider
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--ink); color: #fff; }

.hero__slides { display: grid; }

/* Flex column + justify-content:end bottom-anchors the whole stack of in-flow
   children as a group — needed now that there are two (.hero__awards, then
   .hero__inner), not one. A single-child grid with align-items:end (the
   previous approach) only bottom-anchors reliably with exactly one in-flow
   item; with two, the implicit grid rows pack from the grid's start edge
   instead, which would pin the group to the top. .hero__media stays
   absolutely positioned, so it's out of flow either way. */
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0, 38, 32, .92) 0%, rgba(0, 38, 32, .52) 42%, rgba(0, 38, 32, .3) 70%, rgba(0, 38, 32, .55) 100%),
    linear-gradient(to right, rgba(0, 52, 43, .78) 0%, rgba(0, 52, 43, .18) 58%, transparent 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* No top padding: .hero__awards (its preceding sibling) is now the topmost
     element in the bottom-anchored stack and carries the header-clearance
     padding instead — see .hero__awards below. */
  padding-block: 0 clamp(130px, 17vh, 210px);
}

/* --------------------------------------------------------------------------
   8b. Hero awards strip — CSS-only auto-scrolling marquee
   -------------------------------------------------------------------------- */
/* In-flow, at the top of the text block (above the eyebrow) — duplicated into
   each slide's .hero__inner rather than shared, since it now sits inside the
   normal flow instead of as an absolutely-positioned sibling band. The two
   copies are identical, so nothing visibly changes across the slide fade. */
/* A sibling of .hero__inner now, not a child of it — so it needs its own
   copy of .hero__inner's horizontal container treatment (width/max-width/
   margin-inline/padding-inline) to line up with the eyebrow and buttons
   beneath it, plus position:relative + z-index so it paints above
   .hero__media's absolutely-positioned video (a static in-flow element would
   otherwise paint *behind* it). It also carries the header-clearance top
   padding that used to live on .hero__inner, since it's the topmost element
   in the bottom-anchored flex stack now.
   The bottom margin/padding/border give it its own "as recognised by" zone,
   distinct from the eyebrow beneath it — the divider is the same language
   .section-head uses elsewhere on the site. */
.hero__awards {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: calc(var(--head) + 40px);
  margin-bottom: 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.hero__awards-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.hero__awards-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(56px, 6vw, 100px);
  animation: hero-awards-scroll 26s linear infinite;
}
/* Pointer-only: on touch, hovering isn't a real gesture, so leave the loop running. */
@media (hover: hover) {
  .hero__awards:hover .hero__awards-track { animation-play-state: paused; }
}

.hero__award { display: flex; align-items: center; gap: 20px; flex: none; }

/* Placeholder logo tile. Replace with:
   <span class="hero__award-logo"><img src="assets/img/awards/name.png" alt=""></span> */
.hero__award-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px; height: 120px;
  flex: none;
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 2px;
  background: rgba(255, 255, 255, .06);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
/* Absolutely positioned rather than a plain 100%/100% grid child: inside a
   `display: grid` box, a percentage-sized <img> lets the implicit row track
   grow to the image's intrinsic aspect ratio (a tall logo like 1060x1484
   ends up taller than the 100px card, e.g. ~136px), so every card stops
   being the same size. Pinning the image to the box's edges fixes it to
   exactly 100% x 100% of the card regardless of its native proportions. */
.hero__award-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2px; }

.hero__award-text { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.hero__award-title { font-size: 20px; font-weight: 600; letter-spacing: .01em; color: #fff; }
.hero__award-meta { font-size: 14px; color: rgba(255, 255, 255, .62); letter-spacing: .03em; }

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

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-400);
  margin: 0 0 16px;
}
.hero__eyebrow::before {
  content: "";
  width: 40px; height: 1.5px;
  background: var(--green-400);
}

/* Sized down from the site's display scale (--fs-display) so the headline
   stays modest next to the (now larger) awards strip above it. */
.hero h1 {
  color: #fff;
  font-size: clamp(26px, 3.6vw, 56px);
  max-width: 17ch;
  margin: 0 0 16px;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--mint-200); }

.hero__sub {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  max-width: 56ch;
  margin: 0 0 22px;
  text-align: justify;
}

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

.hero__controls {
  position: absolute;
  left: 0; right: 0; bottom: clamp(28px, 5vh, 54px);
  z-index: 3;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__dots { display: flex; gap: 10px; margin-right: auto; }
.hero__dots button {
  width: 44px; height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.hero__dots button[aria-current="true"] { background: var(--green-400); }

.hero__ctrl {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.hero__ctrl:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.hero__ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.hero__ctrl .icon-play { display: none; }
.hero__ctrl[aria-pressed="true"] .icon-pause { display: none; }
.hero__ctrl[aria-pressed="true"] .icon-play { display: block; }

@media (max-width: 760px) {
  .hero__slide { min-height: 88vh; min-height: 88svh; }
  .hero__inner { padding-block: 0 150px; }
  .hero__awards { padding-top: calc(var(--head) + 24px); margin-bottom: 28px; padding-bottom: 16px; }
  .hero__awards-track { gap: 40px; }
  .hero__award { gap: 14px; }
  .hero__award-logo { width: 60px; height: 60px; }
  .hero__award-title { font-size: 16px; }
  .hero__award-meta { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   9. Statement band
   -------------------------------------------------------------------------- */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.statement__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-600);
  margin: 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
.statement__body p {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.5vw, 40px);
  line-height: 1.24;
  color: var(--ink);
  letter-spacing: -.012em;
  margin-bottom: .55em;
  text-wrap: pretty;
}
.statement__body p:last-of-type { margin-bottom: 0; }
.statement__body em { font-style: italic; color: var(--green-600); }
/* Body-size copy sitting under the display-size opening line. */
.statement__prose {
  margin-top: 28px;
  max-width: 68ch;
}
.statement__prose p {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--grey-700);
  letter-spacing: 0;
  text-align: justify;
}
.statement__foot { margin-top: 34px; }

@media (max-width: 860px) { .statement { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   10. Featured strip
   -------------------------------------------------------------------------- */
.featured-strip { background: var(--ink); color: #fff; }
.featured-strip__grid {
  display: grid;
  grid-template-columns: minmax(0, 200px) repeat(3, minmax(0, 1fr));
  gap: 0;
}
.featured-strip__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-400);
  margin: 0;
  padding: 34px 26px 34px 0;
  align-self: center;
}
.featured-strip__item {
  border-left: 1px solid rgba(255, 255, 255, .16);
  padding: 34px 26px;
}
.featured-strip__item a {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .84);
  transition: color .25s var(--ease);
}
.featured-strip__item a::after {
  content: "";
  display: block;
  width: 22px; height: 1.5px;
  margin-top: 16px;
  background: var(--green-400);
  transition: width .3s var(--ease);
}
.featured-strip__item a:hover { color: #fff; }
.featured-strip__item a:hover::after { width: 44px; }

@media (max-width: 1080px) {
  .featured-strip__grid { grid-template-columns: 1fr 1fr; }
  .featured-strip__label { grid-column: 1 / -1; padding-bottom: 0; }
  .featured-strip__item:nth-child(2) { border-left: 0; }
}
@media (max-width: 640px) {
  .featured-strip__grid { grid-template-columns: 1fr; }
  .featured-strip__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   11. Capability index with hover preview
   -------------------------------------------------------------------------- */
.index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.index__row a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: clamp(16px, 1.7vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .34s var(--ease), border-color .25s var(--ease);
}
.index__row a:hover { padding-left: 14px; border-bottom-color: var(--green-500); }

.index__num {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--grey-500);
}
.index__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -.012em;
}
.index__row a:hover .index__name { color: var(--green-700); }
.index__go {
  justify-self: end;
  width: 22px; height: 1.5px;
  background: var(--grey-500);
  transition: background .25s var(--ease), width .3s var(--ease);
}
.index__row a:hover .index__go { background: var(--green-500); width: 28px; }

.index__preview {
  position: sticky;
  top: calc(var(--head) + 40px);
  aspect-ratio: 4 / 5;
  background: var(--mint-100);
  overflow: hidden;
}
.index__preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .5s var(--ease), transform .8s var(--ease);
}
/* Fade-in is scoped to .js so the seeded image still shows without JS. */
.js .index__preview img { opacity: 0; transform: scale(1.06); }
.js .index__preview.is-live img { opacity: 1; transform: none; }

@media (max-width: 1000px) { .index { grid-template-columns: 1fr; } .index__preview { display: none; } }

/* --------------------------------------------------------------------------
   12. Feature blocks (image + text)
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.feature__media { position: relative; overflow: hidden; }
.feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.feature:hover .feature__media img { transform: scale(1.035); }
.feature__media::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--green-400);
  z-index: 2;
}
.feature--reverse .feature__media { order: 2; }
.feature--reverse .feature__media::before { left: auto; right: 0; }
.feature__body h2 { margin-bottom: 18px; }
.feature__body p { text-align: justify; }
.feature__body .btn { margin-top: 12px; }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
}

/* --------------------------------------------------------------------------
   13. Promo bands
   -------------------------------------------------------------------------- */
.promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ink);
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
}
.promo--sage { background: var(--ink-600); }
.promo--gradient { background: linear-gradient(120deg, var(--ink) 0%, var(--ink-700) 55%, var(--ink-600) 100%); }

.promo__body { padding: clamp(32px, 4vw, 68px); align-self: center; }
.promo__body h2 { color: #fff; margin-bottom: 16px; max-width: 20ch; }
.promo__body p { max-width: 48ch; margin-bottom: 26px; text-align: justify; }
.promo__media { position: relative; min-height: 260px; }
.promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .promo { grid-template-columns: 1fr; }
  .promo__media { order: -1; min-height: 220px; aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   14. Topic carousel
   -------------------------------------------------------------------------- */
.topics__viewport { overflow: hidden; }
.topics__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(16px, 1.6vw, 26px)) / 3);
  column-gap: clamp(16px, 1.6vw, 26px);
  transition: transform .55s var(--ease);
}

.topic-card { display: block; position: relative; overflow: hidden; background: var(--ink); }
.topic-card__media { display: block; aspect-ratio: 4 / 5; }
.topic-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .74;
  transition: transform 1s var(--ease), opacity .4s var(--ease);
}
.topic-card:hover .topic-card__media img { transform: scale(1.06); opacity: .55; }
.topic-card__chip {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  z-index: 2;
  padding: 22px 22px 24px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 38, 32, .9), transparent);
}
.topic-card::after {
  content: "";
  position: absolute;
  left: 22px; bottom: 0;
  width: 0; height: 3px;
  background: var(--green-400);
  transition: width .4s var(--ease);
  z-index: 3;
}
.topic-card:hover::after { width: calc(100% - 44px); }

.carousel-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.carousel-dots { display: flex; gap: 8px; margin-right: auto; }
.carousel-dots button {
  width: 32px; height: 3px;
  padding: 0; border: 0;
  background: var(--mint-300);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.carousel-dots button[aria-current="true"] { background: var(--ink); }
.carousel-nav > button {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.carousel-nav > button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.carousel-nav > button:disabled { opacity: .32; cursor: default; }
.carousel-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

@media (max-width: 1080px) { .topics__track { grid-auto-columns: calc((100% - clamp(16px, 1.6vw, 26px)) / 2); } }
@media (max-width: 680px)  { .topics__track { grid-auto-columns: 100%; } }

/* --------------------------------------------------------------------------
   15. Value cards / numbered grid
   -------------------------------------------------------------------------- */
.value-card {
  padding: 30px 26px 34px;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.value-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 52, 43, .1); }
.value-card__num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--mint-300);
  margin: 0 0 18px;
}
.value-card h3 { margin-bottom: 10px; }
.value-card p { font-size: 15px; margin: 0; }

/* Stats -------------------------------------------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
}
.stat { border-top: 2px solid var(--green-500); padding-top: 20px; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
}
.stat__label { font-size: 14.5px; color: var(--grey-700); margin: 0; }

@media (max-width: 900px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-strip { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16. Careers block
   -------------------------------------------------------------------------- */
.careers {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: auto auto;
  background: var(--mint-100);
}
.careers__statement { padding: clamp(34px, 4vw, 66px); align-self: center; }
.careers__statement h2 {
  font-size: clamp(30px, 3.6vw, 58px);
  margin: 0;
  max-width: 14ch;
}
.careers__photo { grid-row: 1 / span 2; }
.careers__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.careers__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px clamp(34px, 4vw, 66px);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 26px);
  transition: background .3s var(--ease);
}
.careers__cta::after {
  content: "";
  width: 30px; height: 1.6px;
  background: var(--green-400);
  flex: none;
  transition: width .3s var(--ease);
}
.careers__cta:hover { background: var(--green-700); }
.careers__cta:hover::after { width: 46px; background: #fff; }

@media (max-width: 860px) {
  .careers { grid-template-columns: 1fr; }
  .careers__photo { grid-row: auto; order: -1; }
}

/* --------------------------------------------------------------------------
   17. People preview row (home)
   -------------------------------------------------------------------------- */
.people-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.people-strip .mini { display: block; }
.people-strip .mini__photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.people-strip .mini__photo svg, .people-strip .mini__photo img { width: 100%; height: 100%; object-fit: cover; }
.people-strip .mini__name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  margin: 16px 0 4px;
}
.people-strip .mini__role { font-size: 13.5px; color: var(--grey-500); margin: 0; }
.people-strip .mini:hover .mini__name { color: var(--green-700); }

@media (max-width: 900px) { .people-strip { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   18. Subscribe band
   -------------------------------------------------------------------------- */
.subscribe { position: relative; background: var(--ink-900); color: rgba(255, 255, 255, .8); overflow: hidden; }
.subscribe__pattern {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .2;
}
.subscribe .container { position: relative; z-index: 2; }
.subscribe__inner { padding-block: clamp(52px, 6vw, 92px); max-width: 60ch; }
.subscribe__inner h2 { color: #fff; margin-bottom: 14px; }
.subscribe__inner p { margin-bottom: 26px; text-align: justify; }

/* --------------------------------------------------------------------------
   19. Interior page head
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(38px, 5vw, 80px) clamp(28px, 3.4vw, 54px); border-bottom: 1px solid var(--line); }

.breadcrumb { margin-bottom: clamp(24px, 3vw, 44px); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; font-size: 12.5px; letter-spacing: .06em; }
.breadcrumb li { color: var(--grey-500); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--mint-300); }
.breadcrumb a { color: var(--green-600); }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.title-lockup h1 { margin: 0 0 clamp(20px, 2.4vw, 34px); }
.title-lockup h1 .t-accent {
  display: block;
  font-style: italic;
  font-size: .48em;
  line-height: 1.15;
  color: var(--green-600);
  margin-top: .28em;
  letter-spacing: -.005em;
}

/* --------------------------------------------------------------------------
   20. Prose, pullquote, split
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(26px, 4vw, 76px); align-items: start; }
.split__aside h2 { margin: 0; position: sticky; top: calc(var(--head) + 30px); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__aside h2 { position: static; } }

.prose { font-size: 16.5px; line-height: 1.72; }
.prose p { text-align: justify; }
.prose h3 { margin-top: 1.9em; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 12px; height: 1.5px;
  background: var(--green-500);
}
.prose a:not(.btn):not(.arrow-link) { color: var(--green-600); text-decoration: underline; text-underline-offset: 3px; }

.pullquote {
  margin: 40px 0 0;
  padding: 26px 0 26px 30px;
  border-left: 3px solid var(--green-400);
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.3;
  color: var(--ink);
  font-style: italic;
}
.pullquote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-500);
}

/* --------------------------------------------------------------------------
   21. Capability accordion + filter blocks
   -------------------------------------------------------------------------- */
.filter-block { margin-bottom: clamp(46px, 5vw, 84px); }
.filter-block:last-child { margin-bottom: 0; }
.filter-block__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-600);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.filter-block__search { max-width: 520px; margin-bottom: 8px; }

.cap-list { list-style: none; margin: 26px 0 0; padding: 0; columns: 2; column-gap: clamp(26px, 4vw, 64px); }
.cap-list > li { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 860px) { .cap-list { columns: 1; } }

.cap-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: color .25s var(--ease);
}
.cap-row:hover { color: var(--green-700); }
.cap-row--leaf { cursor: default; padding-left: 30px; }
.cap-row--leaf:hover { color: var(--ink); }

.cap-row__icon { position: relative; width: 16px; height: 16px; flex: none; margin-top: 5px; }
.cap-row__icon::before, .cap-row__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--green-600);
  transform: translate(-50%, -50%);
  transition: transform .32s var(--ease), opacity .2s;
}
.cap-row__icon::before { width: 14px; height: 1.6px; }
.cap-row__icon::after { width: 1.6px; height: 14px; }
[aria-expanded="true"] .cap-row__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.cap-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .42s var(--ease);
}
.cap-panel.is-open { max-height: 520px; }
.cap-panel > p { padding: 18px 0 4px 30px; font-size: 15px; margin: 0; text-align: justify; }
.cap-panel > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 22px;
  padding: 0 0 0 30px;
}
.cap-panel > ul li {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mint-100);
  color: var(--ink-700);
}

.filter-empty { margin-top: 20px; font-size: 15px; color: var(--grey-500); }

/* --------------------------------------------------------------------------
   22. People directory
   -------------------------------------------------------------------------- */
.people-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  gap: 22px;
  margin-top: 26px;
}
@media (max-width: 720px) { .people-filters { grid-template-columns: 1fr; } }

/* Role groups (Partner / Advisor / Associate) — each is a label + its own
   sub-grid. All thirteen render at once; there is no "view more" limit. */
.people-section + .people-section { margin-top: clamp(48px, 6vw, 84px); }

.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}
@media (max-width: 1180px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .people-grid { grid-template-columns: 1fr; } }

.person { background: var(--paper); display: flex; flex-direction: column; }
.person__photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.person__photo svg, .person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.person:hover .person__photo img, .person:hover .person__photo svg { transform: scale(1.04); }

.person__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  border-top: 2px solid var(--green-400);
}
.person__spacer { flex: none; }
.person__name { font-size: 20px; margin: 0 0 4px; }
.person__name a:hover { color: var(--green-700); }
.person__role { font-size: 13.5px; color: var(--grey-500); margin: 0 0 20px; }
.person__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.person__icons { display: flex; gap: 6px; }
.person__icons a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.person__icons a:hover { background: var(--ink); color: #fff; }
.person__icons svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.person__foot .arrow-link { font-size: 13px; }

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 46px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--grey-500);
}
.results-bar strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   22b. Person detail page
   -------------------------------------------------------------------------- */
.person-detail { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(30px, 4vw, 72px); text-align: justify; }

.person-detail__aside { position: sticky; top: calc(var(--head) + 30px); }

.person-detail__photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); margin-bottom: 26px; }
.person-detail__photo svg,
.person-detail__photo img { width: 100%; height: 100%; object-fit: cover; }

.person-detail__teaser { font-size: 15px; line-height: 1.65; color: var(--grey-700); margin: 0 0 26px; }

.person-detail__contact { margin: 0 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.person-detail__contact dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 6px;
}
.person-detail__contact dd { margin: 0 0 18px; font-size: 15px; color: var(--ink); }
.person-detail__contact dd:last-child { margin-bottom: 0; }
.person-detail__contact a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

.person-detail__body h2 { font-size: var(--fs-h3); margin-bottom: 18px; }

@media (max-width: 900px) {
  .person-detail { grid-template-columns: 1fr; }
  .person-detail__aside { position: static; max-width: 320px; }
}

/* --------------------------------------------------------------------------
   23. Jobs, contact, form
   -------------------------------------------------------------------------- */
.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper);
  border-left: 4px solid var(--green-400);
}
.job h3 { margin-bottom: 10px; }
.job p { font-size: 15px; margin-bottom: 16px; text-align: justify; }
.job__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.job__tags li {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mint-100);
  color: var(--ink-700);
}
@media (max-width: 720px) { .job { grid-template-columns: 1fr; } }

.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 4vw, 76px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-detail {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.contact-detail svg { grid-row: span 2; width: 22px; height: 22px; margin-top: 3px; fill: none; stroke: var(--green-600); stroke-width: 1.5; stroke-linecap: round; }
.contact-detail dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 6px;
}
.contact-detail dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.contact-detail dd a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.field label span { color: var(--coral); }
.field input, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  padding: 10px 0;
  font-size: 16px;
  outline: none;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--green-600); }
.field input::placeholder, .field textarea::placeholder { color: var(--grey-500); }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: var(--coral); }

.form-note { font-size: 13px; line-height: 1.6; color: var(--grey-500); margin: 0; }

.map-embed { aspect-ratio: 16 / 8; background: var(--mint-100); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   24. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: rgba(255, 255, 255, .7); padding-block: clamp(48px, 5vw, 82px) 30px; }
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 62px);
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 860px) { .site-footer__main { grid-template-columns: 1fr; } }

.footer-brand img { width: 210px; filter: brightness(0) invert(1); margin-bottom: 22px; }
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-400);
  margin-bottom: 18px;
}
.footer-address { font-style: normal; font-size: 14.5px; line-height: 1.75; }
.footer-address strong { display: block; color: #fff; margin-bottom: 10px; font-weight: 600; }
.footer-address a { color: rgba(255, 255, 255, .84); }
.footer-address a:hover { color: var(--green-400); }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { font-size: 14.5px; transition: color .22s var(--ease), padding-left .28s var(--ease); }
.footer-links a:hover { color: #fff; padding-left: 6px; }

.socials { display: flex; gap: 10px; }
.socials a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.socials a:hover { background: var(--green-600); border-color: var(--green-600); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }
.site-footer__bottom a:hover { color: var(--green-400); }

/* --------------------------------------------------------------------------
   25. Scroll reveal — scoped to .js so a JS failure never hides content
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   26. Mobile shell
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  body.home { padding-top: 0; }
  /* Only the nav collapses — .site-header__right still carries the tools,
     and it is what balances the awards group to keep the brand centred. */
  .nav { display: none; }
  .icon-btn--menu { display: inline-grid; }
  .site-header { background: var(--ink); }
  body.home .site-header { background: transparent; }
  .index__row a { grid-template-columns: 40px minmax(0, 1fr) 24px; }
}

/* With the awards strip gone there is no left group left to balance against,
   so drop the centring margin and let the brand sit at the left edge. */
@media (max-width: 900px) {
  .brand { margin-inline: 0; }
  .brand img { width: 172px; }
}