/* ============================================================
   GOLDARCH INVESTOR RELATIONS
   Design system v2 — built to the client content/flow brief.
   Palette + type per the official brand deck.
   ============================================================ */

:root {
  /* Brand palette (brand deck) */
  --green-900: #16302a;   /* deepest — alumni / intro */
  --green-800: #1e3a33;   /* primary */
  --green-700: #274a41;   /* raised / hover */
  --sage:      #7fa393;   /* secondary green */
  --sage-200:  #a7c0b4;
  --sage-100:  #e7ece8;   /* light sage tint */
  --taupe:     #af9b84;   /* champagne accent */
  --taupe-600: #9a866f;
  --taupe-300: #cbbca7;
  --sand:      #d8d2c4;
  --ink:       #262626;   /* near-black text */
  --ink-soft:  #55524c;
  --grey:      #bdbab1;
  --cream:     #f0ede6;
  --offwhite:  #f7f5f1;
  --white:     #ffffff;

  --line:      #e2ddd3;
  --line-dark: rgba(175,155,132,0.22);
  --on-dark:   #eef1ee;
  --on-dark-soft: #b8c4bd;

  /* Type — per brand deck: Book Antiqua (display), Geist (body) */
  --serif: "Book Antiqua", "Palatino Linotype", "Palatino", "URW Palladio L", "Palatino LT STD", Georgia, serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --wrap-narrow: 880px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(2.5rem, 4.2vw, 4.5rem);
  --radius: 3px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--offwhite);
  line-height: 1.65;
  font-size: 1.02rem;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---------- Typography ----------
   Harmonised scale — use these everywhere; avoid per-element font-size overrides.
   --fs-hero  : page / landing hero titles (largest)
   --fs-stmt  : large centred statements (mission, CTA)
   --fs-title : every section heading
   --fs-lead  : intros / lead paragraphs
*/
:root {
  --fs-hero: clamp(2.6rem, 5.2vw, 4.2rem);
  --fs-stmt: clamp(2rem, 3.6vw, 2.9rem);
  --fs-title: clamp(1.7rem, 2.7vw, 2.05rem);
  --fs-lead: clamp(1.08rem, 1.45vw, 1.28rem);
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.14; letter-spacing: -0.005em; color: var(--green-800); }
.display { font-family: var(--serif); font-weight: 500; font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.01em; }
h2.section-title, .section-title { font-size: var(--fs-title); font-weight: 500; line-height: 1.14; }
h3 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); }
p { color: var(--ink-soft); }
.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-soft); font-weight: 400; }
/* consistent CTA-band heading */
.cta-title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-stmt); line-height: 1.12; color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-title .accent { color: var(--taupe); }
.prose p + p { margin-top: 1.1rem; }

.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--taupe-600);
  display: inline-flex; align-items: center; gap: 0.9rem;
}
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--taupe); display: inline-block; }
.eyebrow.center::before { display: none; }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--taupe-300); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--wrap-narrow); }
section { padding-block: var(--section-y); }
.stack > * + * { margin-top: 1.25rem; }
.eyebrow + h1, .eyebrow + h2, .eyebrow + .display, .eyebrow + .section-title { margin-top: 1.3rem; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split.lead-left { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 860px) { .split, .split.lead-left { grid-template-columns: 1fr; gap: 2.25rem; } }

.bg-green { background: var(--green-800); color: var(--on-dark); }
.bg-green p, .bg-green .lead { color: var(--on-dark-soft); }
.bg-green h1, .bg-green h2, .bg-green h3, .bg-green h4 { color: #fff; }
.bg-sage { background: var(--sage-100); }
.bg-cream { background: var(--cream); }
.bg-green.with-waves { background-color: var(--green-900); background-image: url("../assets/bg-dark.png"); background-size: cover; background-position: center; }
/* never stack two wave panels back-to-back: the last green band before the footer goes
   flat so the footer's waves stand alone. This also flattens the home closing CTA, which
   sits between the waved experience band and the waved footer. */
.bg-green.with-waves:has(+ .site-footer) { background-image: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1.05rem 2.1rem; border: 1px solid var(--green-800);
  background: var(--green-800); color: #fff; border-radius: 0;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover { background: var(--green-700); transform: translateY(-2px); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.taupe { background: var(--taupe); border-color: var(--taupe); color: var(--green-900); }
.btn.taupe:hover { background: var(--taupe-300); border-color: var(--taupe-300); }
.btn.ghost { background: transparent; color: var(--green-800); }
.btn.ghost:hover { background: var(--green-800); color: #fff; }
.btn.ghost.on-dark { color: #fff; border-color: rgba(255,255,255,0.45); }
.btn.ghost.on-dark:hover { background: #fff; color: var(--green-900); border-color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-800);
  padding-bottom: 3px; border-bottom: 1px solid var(--taupe);
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.link-arrow:hover { gap: 0.9rem; color: var(--taupe-600); }
.on-dark .link-arrow, .link-arrow.on-dark { color: #fff; }
/* email links keep their real casing (info@goldarchIR.com), not uppercased */
a.link-arrow[href^="mailto:"] { text-transform: none; letter-spacing: 0.01em; }

/* ---------- Intro logo animation (split lock-up + seamless diagonal sweep) ----------
   Two copies of the real horizontal logo are clipped so one shows the "GR" icon
   (left) and the other the wordmark (right). They start aligned as the full
   lock-up, then separate outward. The dark green is ONE oversized panel with a
   single fixed diagonal edge; it only translates left and settles exactly onto
   the hero's diagonal, so the reveal is one continuous sweep with no seams. */
.intro {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--green-900);
  /* flat uniform tint over the wave image — no directional gradient, so no diagonal banding */
  background-image: linear-gradient(rgba(19,43,37,0.9), rgba(19,43,37,0.9)), url("../assets/bg-dark.png");
  background-size: cover; background-position: center bottom;
  transition: opacity .7s var(--ease);
}
/* hold the logo, then fade the whole overlay out to reveal the page — no diagonal sweep */
.intro.v-split, .intro.v-sweep { opacity: 0; }
.intro-sweep { display: none; }

.intro-logo { position: relative; z-index: 2; width: min(460px, 76vw); aspect-ratio: 2560 / 734; }
.intro-logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--ease); }
.intro-icon { clip-path: inset(0 71% 0 0); }
.intro-word { clip-path: inset(0 0 0 29%); }
/* fade the complete lock-up in */
.intro.v-in .intro-logo img { opacity: 1; }

/* one-time metallic light reflection across the complete lock-up. The sweep is
   masked to the logo artwork, so it lights the letters without redrawing them. */
.intro-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  -webkit-mask: url("../assets/logo-horizontal-white.svg") center / contain no-repeat;
          mask: url("../assets/logo-horizontal-white.svg") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(216,210,196,0.5) 48%, rgba(255,255,255,0.88) 50%, rgba(216,210,196,0.5) 52%, transparent 58%);
  background-repeat: no-repeat; background-size: 260% 100%; background-position: 150% 0;
}
.intro.v-in .intro-shine { animation: introShine 1.25s cubic-bezier(0.42, 0, 0.2, 1) 0.6s 1 both; }
@keyframes introShine {
  0%   { opacity: 0; background-position: 150% 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; background-position: -60% 0; }
}

/* reduced motion: hold the logo then crossfade, no shine */
@media (prefers-reduced-motion: reduce) {
  .intro-logo img { transition: none; }
  .intro-shine { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-block: 1.3rem;
  transition: background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-header .logo { height: 52px; transition: height .45s var(--ease); }
.site-header .logo img { height: 100%; width: auto; }
.logo-white { display: block; }
.logo-color { display: none; }

.site-header.scrolled, .site-header.solid {
  background: rgba(247,245,241,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.site-header.scrolled { padding-block: 0.8rem; }
.site-header.scrolled .logo { height: 44px; }
.site-header.scrolled .logo-white, .site-header.solid .logo-white { display: none; }
.site-header.scrolled .logo-color, .site-header.solid .logo-color { display: block; }
.site-header.scrolled .nav-links a, .site-header.solid .nav-links a { color: var(--ink); }
.site-header.scrolled .nav-links a:hover, .site-header.solid .nav-links a:hover { color: var(--green-800); }
.site-header.scrolled .nav-cta, .site-header.solid .nav-cta { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.site-header.scrolled .nav-cta:hover, .site-header.solid .nav-cta:hover { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.site-header.scrolled .menu-toggle span, .site-header.solid .menu-toggle span { background: var(--ink); }
.site-header.scrolled .nav-links a.active, .site-header.solid .nav-links a.active { color: var(--green-800); }

.nav { display: flex; align-items: center; gap: 2.4rem; }
.nav-links { display: flex; align-items: center; gap: 1.8rem; }
.nav-links a {
  font-family: var(--sans); font-weight: 400; font-size: 0.82rem; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9); position: relative; padding-block: 4px; transition: color .3s var(--ease);
}
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--taupe); transition: width .35s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: #fff; }
.nav-cta {
  font-family: var(--sans); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.7rem 1.35rem; border: 1px solid rgba(255,255,255,0.55); color: #fff; border-radius: var(--radius); transition: all .35s var(--ease);
}
.nav-cta:hover { background: #fff; color: var(--green-900); border-color: #fff; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.menu-toggle span { width: 26px; height: 2px; background: #fff; transition: all .35s var(--ease); }
@media (max-width: 1040px) { .nav-links, .nav > .nav-cta { display: none; } .menu-toggle { display: flex; } }

.mobile-nav {
  position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1.15rem; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
  background-color: var(--green-900); background-image: url("../assets/bg-dark.png"); background-size: cover; background-position: center; }
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav a { font-family: var(--serif); font-size: 1.7rem; color: #fff; font-weight: 500; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mobile-nav.open a { opacity: 1; transform: none; }
.mobile-nav a:nth-child(2){transition-delay:.05s}.mobile-nav a:nth-child(3){transition-delay:.1s}.mobile-nav a:nth-child(4){transition-delay:.15s}.mobile-nav a:nth-child(5){transition-delay:.2s}.mobile-nav a:nth-child(6){transition-delay:.25s}.mobile-nav a:nth-child(7){transition-delay:.3s}.mobile-nav a:nth-child(8){transition-delay:.35s}
.mobile-nav .close { position: absolute; top: 1.5rem; right: var(--gutter); font-size: 2.4rem; font-family: var(--sans); color: #fff; background: none; border: none; }

/* ---------- Photo slot (placeholder for licensed photography) ----------
   Swap: set background-image to the real photo and add class .filled
   (removes the wave overlay + hides the marker). */
.photo-slot {
  position: relative; overflow: hidden; background-color: var(--green-900);
  background-image: url("../assets/bg-dark.png"); background-size: cover; background-position: center;
}
.photo-slot.light {
  background-color: var(--sage-100);
  background-image: linear-gradient(140deg, rgba(231,236,232,0.4), rgba(215,210,196,0.55)), url("../assets/bg-light.jpg");
}
.photo-slot.filled { background-image: var(--photo); }
.photo-slot .photo-tag {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3;
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); background: rgba(22,48,42,0.55); border: 1px solid rgba(255,255,255,0.25);
  padding: 0.3rem 0.6rem; border-radius: 100px; backdrop-filter: blur(4px);
}
.photo-slot.light .photo-tag { color: var(--green-800); background: rgba(255,255,255,0.6); border-color: rgba(30,58,51,0.2); }
.photo-slot.filled .photo-tag { display: none; }

/* ---------- Who we are: experience panel + values band ---------- */
h2.drives-heading { font-size: var(--fs-title); line-height: 1.16; }
.exp-panel { background: var(--cream); padding: clamp(1.5rem, 3vw, 2.25rem); }
.exp-label { font-family: var(--sans); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-600); margin-bottom: 1.25rem; }
.exp-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* white tiles so every logo reads consistently regardless of its own background */
.exp-firm { background: #fff; display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 104px; }
.exp-firm img { max-height: 42px; max-width: 82%; object-fit: contain; }
/* square/compact marks need more height to match the visual weight of the wide Goldman wordmark */
.exp-firm img[src*="carlyle"], .exp-firm img[src*="tenzing"], .exp-firm img[src*="arma"] { max-height: 64px; max-width: 92%; }
.exp-firm span { font-family: var(--serif); color: var(--green-800); font-size: 1rem; text-align: center; line-height: 1.15; }
.exp-firm img + span { display: none; }
.exp-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: none; }
.exp-cat { background: var(--cream); padding: 1.25rem 1rem; }
.exp-cat h5 { font-family: var(--sans); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-600); }
.exp-cat p { font-size: 0.84rem; line-height: 1.45; margin-top: 0.5rem; color: var(--ink-soft); }
@media (max-width: 520px) { .exp-wall, .exp-cats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Experience band (full-width, dark) ---------- */
/* min-height matches the page hero (approved) so cover-scaled waves read cleanly,
   not as a cropped sliver; content is centred in the band */
.experience-band { position: relative; overflow: hidden; min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.experience-band > .wrap { position: relative; z-index: 2; }
.exp-logos { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; justify-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.exp-logos img { max-height: 38px; max-width: min(100%, 132px); object-fit: contain; filter: brightness(0) invert(1); opacity: 0.92; }
/* square/compact marks sit larger to balance the wide wordmarks */
.exp-logos img[src*="tenzing"] { max-height: 54px; }
.exp-logos img[src*="carlyle"] { max-height: 76px; }
.exp-logos img[src*="arma"] { max-height: 76px; max-width: min(100%, 165px); }
.exp-cat-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 74%; }
.exp-cat-col h5 { font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe-300); }
.exp-cat-col p { color: #fff; margin-top: 0.85rem; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.45; }
.cr-watermark { position: absolute; right: -1%; top: 50%; transform: translateY(-42%); width: clamp(200px, 22vw, 330px); opacity: 0.08; pointer-events: none; z-index: 1; }
@media (max-width: 900px) {
  .exp-logos { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .exp-cat-cols { grid-template-columns: 1fr; max-width: 100%; gap: 1.75rem; }
  .cr-watermark { display: none; }
}
@media (max-width: 520px) { .exp-logos { grid-template-columns: repeat(2, 1fr); } }

.values-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vb-item { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.5rem) 1.25rem; text-align: center; border-left: 1px solid var(--line); }
.vb-item:first-child { border-left: none; }
.vb-item .ico { width: 34px; height: 34px; color: var(--sage); }
.vb-item span { font-family: var(--serif); color: var(--green-800); font-size: 1.05rem; line-height: 1.3; }
@media (max-width: 820px) { .values-band { grid-template-columns: repeat(2, 1fr); } .vb-item:nth-child(3) { border-left: none; } .vb-item:nth-child(odd) { border-left: none; } .vb-item:nth-child(even) { border-left: 1px solid var(--line); } }
@media (max-width: 460px) { .values-band { grid-template-columns: 1fr; } .vb-item, .vb-item:nth-child(even) { border-left: none; } .vb-item + .vb-item { border-top: 1px solid var(--line); } }

/* ---------- News: branded featured visual ---------- */
.featured-visual {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
  background-color: var(--green-900);
  background-size: cover; background-position: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.featured-visual:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -40px rgba(22,48,42,0.5); }
.featured-visual .fv-mark {
  position: absolute; right: -6%; bottom: -8%; width: 58%; opacity: 0.14;
  filter: brightness(0) invert(1);
}
.featured-visual .fv-cat {
  position: absolute; top: 1.6rem; left: 1.75rem; font-family: var(--sans);
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe-300);
}
.featured-visual .fv-label {
  position: absolute; bottom: 1.75rem; left: 1.75rem; display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: #fff;
}
.featured-visual .fv-line { width: 2.2rem; height: 1px; background: var(--taupe); display: inline-block; }

/* ---------- About: "the work" two-column layout ---------- */
.about-work { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 4.5vw, 4rem); }
.about-work .about-left { max-width: 46ch; }
.about-final { max-width: 54ch; margin-top: clamp(1.25rem, 2vw, 1.75rem); font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 860px) {
  /* mobile order: headline, final paragraph, then the first two paragraphs */
  .about-work { grid-template-columns: 1fr; }
  .about-work .about-right { order: -1; }
  .about-final { margin-top: 1.5rem; }
}

/* ---------- About: mission statement, embed/execute/adapt, guides ---------- */
.mission-statement { font-family: var(--serif); font-weight: 500; color: var(--green-800); font-size: var(--fs-stmt); line-height: 1.18; letter-spacing: -0.01em; max-width: 18em; margin: 1.3rem auto 0; }
.approach-rows { display: flex; flex-direction: column; }
.approach-row { display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem; align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.approach-row:first-child { border-top: none; padding-top: 0; }
/* the forced two-line break is desktop-only; on mobile let the heading wrap naturally */
@media (max-width: 860px) { .br-approach { display: none; } }
/* on desktop, balance the split down the middle; first row lines up with the title and
   the rows spread evenly to the bottom of the text column */
@media (min-width: 861px) {
  .approach-section .split { align-items: stretch; grid-template-columns: 1.02fr 0.98fr; }
  .approach-section .approach-rows { justify-content: space-between; padding-top: 2.6rem; }
}
.approach-row h5 { font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe-600); padding-top: 0.2rem; }
.approach-row p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }
/* first letters spell G I R (Goldarch Investor Relations) */
.approach-row h5 .gir { color: var(--green-800); font-weight: 600; }
.approach-section { position: relative; overflow: hidden; }
.approach-watermark { position: absolute; right: -3%; top: 50%; transform: translateY(-50%); width: clamp(210px, 26vw, 360px); opacity: 0.05; pointer-events: none; z-index: 0; }
@media (max-width: 760px) { .approach-watermark { display: block; width: clamp(230px, 72vw, 340px); right: -14%; top: 74%; opacity: 0.05; } }
/* reusable faint corner watermark for otherwise-empty sections */
.watermark-section { position: relative; overflow: hidden; padding-block: clamp(4rem, 6vw, 5.75rem); }
.watermark-section > .wrap { position: relative; z-index: 1; }
.section-watermark { position: absolute; right: 2%; top: auto; bottom: -6%; height: 104%; width: auto; transform: none; opacity: 0.08; pointer-events: none; z-index: 0; }
@media (max-width: 760px) { .section-watermark { height: auto; width: clamp(220px, 62vw, 360px); right: -6%; bottom: -4%; opacity: 0.06; } }
.guides { display: grid; grid-template-columns: repeat(3, 1fr); }
.guide { text-align: left; padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); border-left: 1px solid var(--line); }
.guide:first-child { border-left: none; padding-left: 0; }
.guide h4 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--green-800); }
.guide p { font-size: 0.92rem; line-height: 1.6; margin-top: 0.85rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .approach-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .guides { grid-template-columns: 1fr; }
  .guide { border-left: none; padding-left: 0; padding-right: 0; }
  .guide + .guide { border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 2rem; }
}

/* ---------- Landing (centered hero + value drivers) ---------- */
.hero-center { position: relative; overflow: hidden; text-align: center; min-height: 86vh; display: flex; align-items: center; padding-block: clamp(9rem, 18vh, 12.5rem) clamp(5rem, 10vh, 7rem); }
.hero-center > .wrap { position: relative; z-index: 2; max-width: 62rem; }
.hero-statement { font-family: var(--serif); font-weight: 500; color: #fff; font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.05; letter-spacing: -0.015em; margin-top: 0; }
/* hero: 2 lines on desktop, 3 lines on phones */
.br-hero-m { display: none; }
.br-hero-d { display: inline; }
@media (max-width: 600px) {
  .br-hero-m { display: inline; }
  .br-hero-d { display: none; }
  .hero-statement { font-size: clamp(1.7rem, 8vw, 2.2rem); }
}

/* italic gold accent word inside section titles */
.section-title .accent { color: var(--taupe); font-style: italic; }
.hero-lead { color: var(--on-dark-soft); font-family: var(--sans); font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.6; max-width: 62ch; margin: 1.9rem auto 0; }
.hero-center .actions { justify-content: center; display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.6rem; }
/* keep the two hero / CTA action buttons the same width, sized to the wider label */
.hero-center .actions .btn, .cta-band .actions .btn { justify-content: center; min-width: 13rem; }
@media (max-width: 520px) {
  .hero-center .actions, .cta-band .actions { flex-direction: column; align-items: center; }
}
.two-blocks { align-items: start; }
.block-statement { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.28; color: var(--green-900); margin-top: 1.1rem; }
.guides.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .guides.cols-4 { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; } .guides.cols-4 .guide:nth-child(2n+1) { border-left: none; padding-left: 0; } }
@media (max-width: 560px) { .guides.cols-4 { grid-template-columns: 1fr; } .guides.cols-4 .guide { border-left: none; padding-left: 0; padding-right: 0; } }

/* ---------- Purpose & mission (Venn style: Goldarch at the intersection) ---------- */
.purpose-mission .pm-interlock { position: relative; display: flex; align-items: stretch; max-width: 64rem; margin-inline: auto; }
.pm-card { flex: 1 1 0; padding: clamp(1.5rem, 2.5vw, 2.15rem) clamp(2rem, 3.4vw, 3rem); position: relative; display: flex; flex-direction: column; justify-content: flex-start; }
.pm-purpose { background: var(--green-900); color: #fff; padding-right: clamp(3.4rem, 5.5vw, 4.75rem); box-shadow: 0 34px 62px -46px rgba(22,48,42,0.6); }
.pm-mission { background: var(--sand); color: var(--green-900); padding-left: clamp(3.4rem, 5.5vw, 4.75rem); box-shadow: 0 34px 62px -46px rgba(22,48,42,0.32); }
.pm-label { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-600); margin-bottom: 1rem; }
.pm-purpose .pm-label { color: var(--taupe-300); }
.pm-text { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.32; color: var(--green-900); }
.pm-card .pm-text { font-size: clamp(1.08rem, 1.4vw, 1.4rem); line-height: 1.36; }
.pm-purpose .pm-text { color: #fff; }
/* the intersection badge — Goldarch, where purpose and mission meet */
.pm-badge { align-self: center; flex: 0 0 auto; z-index: 3; width: 110px; height: 110px; margin: 0 -55px; border-radius: 50%; background: var(--offwhite); border: 1px solid rgba(22,48,42,0.12); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px -16px rgba(22,48,42,0.45); }
.pm-badge img { width: 70%; height: 70%; }
@media (max-width: 700px) {
  .purpose-mission .pm-interlock { flex-direction: column; max-width: 30rem; }
  .pm-card { justify-content: flex-start; }
  .pm-purpose { padding-right: clamp(1.8rem, 6vw, 2.6rem); padding-bottom: 5.75rem; }
  .pm-mission { padding-left: clamp(1.8rem, 6vw, 2.6rem); padding-top: 5.75rem; }
  .pm-badge { margin: -55px auto; }
}

/* ---------- Diagonal split hero (Home) ---------- */
.hero-split { position: relative; min-height: 100vh; overflow: hidden; background: var(--green-900); }
.hero-split::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 160px; z-index: 4; background: linear-gradient(180deg, rgba(18,42,36,0.55), rgba(22,48,42,0)); pointer-events: none; }
.hero-split .panel { position: absolute; inset: 0; background-position: center bottom; }
.hero-split .panel-left { z-index: 2; clip-path: polygon(0 0, 60% 0, 44% 100%, 0 100%); }
/* the lighter right side fades in as the intro opens, tying the two together.
   Drop a photo at assets/hero-right.jpg and it appears automatically (top layer);
   without it, the wave placeholder shows through. */
.hero-split .panel-right {
  z-index: 1; opacity: 0; transition: opacity 1.2s var(--ease);
  background-image: url("../assets/hero-right.jpg");
  background-size: cover; background-position: center;
}
body.hero-ready .hero-split .panel-right { opacity: 1; }
/* deep, near-solid gradients keep the wave texture as a whisper, not a busy swirl */
.hero-split .panel-left::after { content: ""; position: absolute; inset: 0; background: var(--green-900); }
.hero-split .panel-right::after { content: ""; position: absolute; inset: 0; background: rgba(18,42,36,0.68); }
/* placeholder tag hidden on the hero for a clean, finished look */
.hero-split .photo-tag { display: none; }
.hero-content {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center;
  width: 100%; padding: 7.5rem clamp(2rem, 6vw, 6rem) 4rem; left: 0; right: 0;
}
/* width is a share of the viewport (not the centred wrap) so the text always
   stays left of the hero's diagonal, whatever the screen size */
.hero-content .inner { max-width: 48%; }
.hero-content h1 { color: #fff; }
.hero-headline { font-size: clamp(2.1rem, 3.5vw, 2.95rem); line-height: 1.08; letter-spacing: -0.015em; max-width: none; }
/* phones: shrink the headline + tighten side padding so "Investor Relations for" holds
   on one line, giving a clean 2-line hero (no orphaned "for") */
@media (max-width: 600px) {
  .hero-content { padding-left: 1.35rem; padding-right: 1.35rem; }
  .hero-headline { font-size: clamp(1.25rem, 6vw, 1.75rem); line-height: 1.14; }
}
.hero-rule { display: block; width: 56px; height: 2px; background: var(--taupe); margin: clamp(1.6rem, 3vw, 2.4rem) 0; }
.hero-sub { color: var(--on-dark-soft); font-family: var(--sans); font-weight: 400; font-size: clamp(1.08rem, 1.55vw, 1.34rem); line-height: 1.6; max-width: 42ch; }
/* homepage reveal (triggered by the existing opening animation via body.hero-ready):
   a single restrained whole-element fade per line — no per-word animation */
.hero-content .hero-headline, .hero-content .hero-rule, .hero-content .hero-sub, .hero-content .insight-link { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
body.hero-ready .hero-content .hero-headline { opacity: 1; transform: none; transition-delay: .2s; }
body.hero-ready .hero-content .hero-rule { opacity: 1; transform: none; transition-delay: .4s; }
body.hero-ready .hero-content .hero-sub { opacity: 1; transform: none; transition-delay: .55s; }
body.hero-ready .hero-content .insight-link { opacity: 1; transform: none; transition-delay: .75s; }
/* navigation reveals first, only while the intro plays */
body.intro-run .site-header { opacity: 0; transform: translateY(-10px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
body.intro-run.hero-ready .site-header { opacity: 1; transform: none; transition-delay: .1s; }
/* Featured insight, a compact editorial line rather than a boxed visual card:
   label, a fine accent rule, then the headline, all on one clickable row */
.insight-link {
  display: inline-flex; align-items: center; gap: 0.9rem; margin-top: clamp(1.75rem, 3.5vh, 2.75rem);
  max-width: 52ch; text-decoration: none; padding: 0.2rem 0;
}
.insight-link .il-k {
  flex: 0 0 auto; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--taupe-300); white-space: nowrap;
}
.insight-link .il-rule { flex: 0 0 auto; width: 2rem; height: 1px; background: rgba(175,155,132,0.55); transition: width .4s var(--ease), background .4s var(--ease); }
.insight-link .il-t { font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.3; color: rgba(255,255,255,0.9); transition: color .35s var(--ease); }
.insight-link:hover .il-rule { width: 2.9rem; background: var(--taupe); }
.insight-link:hover .il-t { color: var(--sage); }
@media (max-width: 520px) { .insight-link { flex-wrap: wrap; gap: 0.55rem 0.9rem; } .insight-link .il-rule { display: none; } }
.hero-scrollcue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-soft); text-align: center; }
.hero-scrollcue::after { content: ""; display: block; width: 1px; height: 34px; background: linear-gradient(var(--taupe), transparent); margin: 0.6rem auto 0; }
@media (max-width: 860px) {
  .hero-split { min-height: auto; }
  .hero-split .panel-right { display: none; }
  .hero-split .panel-left { clip-path: none; }
  /* landing hero waves on phones (no photo): a single flowing composition, top and bottom */
  .hero-split .panel-left::after { background-color: var(--green-900); background-image: url("../assets/bg-dark.png"); background-size: 260% auto; background-position: 40% 100%; }
  .hero-content { position: relative; inset: auto; min-height: 86vh; }
  .hero-content .inner { max-width: 100%; }
}

/* ---------- Banner bar (green heading bar) ---------- */
.banner {
  background: var(--green-800); color: #fff; text-align: center;
  padding: 0.85rem clamp(1.25rem, 3vw, 2.5rem); border-radius: 0;
}
.banner h2, .banner .btxt { font-family: var(--serif); font-weight: 500; color: #fff; font-size: clamp(1.02rem, 1.8vw, 1.4rem); line-height: 1.25; }
.banner.sage { background: var(--sage); }
.banner.sage .btxt { color: var(--green-900); }

/* ---------- Mission / flex cards ---------- */
.flex-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 900px) { .flex-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .flex-cards { grid-template-columns: 1fr; } }
.fcard {
  background: var(--green-800); color: #fff; border-radius: 0; padding: 1.85rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.8rem; border-top: 2px solid var(--taupe);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
}
.fcard:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -30px rgba(22,48,42,0.6); background: var(--green-700); }
.fcard .ico { width: 30px; height: 30px; color: var(--taupe-300); stroke-width: 1.25; }
.fcard h3 { color: #fff; font-size: 1.2rem; }
.fcard p { color: var(--on-dark-soft); font-size: 0.94rem; }

/* Cards (light) — sharp, architectural, with a drawn top accent on hover */
.card {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 0;
  padding: clamp(1.5rem, 2.2vw, 2rem); transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.card::before { content: ""; position: absolute; top: -1px; left: -1px; height: 2px; width: 0; background: var(--taupe); transition: width .55s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -40px rgba(22,48,42,0.42); border-color: var(--sand); }
.card:hover::before { width: calc(100% + 2px); }
.card .ico { width: 34px; height: 34px; color: var(--sage); stroke-width: 1.25; }
.card .num { font-family: var(--serif); font-size: 1rem; color: var(--taupe-600); font-style: italic; }
.card h3 { margin-top: 0.85rem; font-size: clamp(1.15rem, 1.45vw, 1.32rem); line-height: 1.22; }
.card p { margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.5; }
.card.link-card { display: flex; flex-direction: column; }
.card.link-card .go { margin-top: auto; padding-top: 1.2rem; }
.card .go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-800); font-weight: 500; }
.card:hover .go { color: var(--taupe-600); }

/* ---------- Client-type pills ---------- */
.client-types { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.client-types .ct {
  font-family: var(--serif); font-size: clamp(0.92rem, 1.3vw, 1.12rem); color: var(--green-800);
  background: var(--white); border: 1px solid var(--sand); border-radius: 0;
  padding: 0.5rem 1.15rem; transition: all .35s var(--ease);
}
.client-types .ct:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); }

/* ---------- Sector block (fits one screen) ---------- */
.sectors-block { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
.sector-heading { font-family: var(--serif); font-weight: 500; color: var(--green-800); font-size: var(--fs-title); line-height: 1.14; margin-top: 0.9rem; letter-spacing: -0.005em; }
/* sector-page intro lead: 60% width on laptop/desktop, full width on phones */
.sector-lead { max-width: 60%; }
@media (max-width: 860px) { .sector-lead { max-width: 100%; } }
/* defensive: never render a stray sector-lead break (in case an old cached page still has one) */
.br-sector { display: none !important; }
/* client-type list (Private Equity / Venture Capital / Independent Sponsors) */
.sector-list { display: flex; flex-direction: column; }
.sector-item { display: grid; grid-template-columns: auto 1px 1fr; gap: clamp(1.15rem, 2.4vw, 2rem); align-items: stretch; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--line); }
.sector-item:first-child { border-top: none; padding-top: 0; }
.sector-num { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.3vw, 2.1rem); color: var(--taupe); line-height: 1; padding-top: 0.15rem; }
.sector-divider { background: var(--line); }
.sector-name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.8vw, 1.7rem); color: var(--green-900); line-height: 1.15; }
.sector-desc { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); margin-top: 0.5rem; }
.sector-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.5rem; }
.sbox {
  font-family: var(--serif); font-size: clamp(0.95rem, 1.35vw, 1.2rem); color: var(--green-800);
  background: var(--white); border: 1px solid var(--sand); border-radius: 0; padding: 0.55rem 1.35rem;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.sbox:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.sector-connector { margin-top: 1.35rem; font-family: var(--serif); font-weight: 500; font-style: normal; color: var(--green-800); font-size: var(--fs-title); line-height: 1.14; letter-spacing: -0.005em; }

/* Industry grid — borderless, large icons, staggered reveal */
.industry-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.35rem, 2.4vw, 2.25rem) 1rem; }
@media (max-width: 1000px) { .industry-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .industry-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; } }
.ind {
  background: transparent; border: none; border-radius: 0; padding: 0.3rem;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  transition: transform .5s var(--ease);
}
.ind:hover { transform: translateY(-6px); }
.ind .ico { width: clamp(40px, 3vw, 50px); height: clamp(40px, 3vw, 50px); color: var(--green-800); transition: color .4s var(--ease); }
.ind:hover .ico { color: var(--sage); }
.ind .ico svg { width: 100%; height: 100%; }
.ind .label { font-size: 0.92rem; line-height: 1.4; color: var(--ink); font-weight: 400; }
.industry-grid .ind.reveal:nth-child(1){transition-delay:.00s}
.industry-grid .ind.reveal:nth-child(2){transition-delay:.05s}
.industry-grid .ind.reveal:nth-child(3){transition-delay:.10s}
.industry-grid .ind.reveal:nth-child(4){transition-delay:.15s}
.industry-grid .ind.reveal:nth-child(5){transition-delay:.20s}
.industry-grid .ind.reveal:nth-child(6){transition-delay:.05s}
.industry-grid .ind.reveal:nth-child(7){transition-delay:.10s}
.industry-grid .ind.reveal:nth-child(8){transition-delay:.15s}
.industry-grid .ind.reveal:nth-child(9){transition-delay:.20s}
.industry-grid .ind.reveal:nth-child(10){transition-delay:.25s}
.industry-grid .ind.reveal:nth-child(11){transition-delay:.10s}
.industry-grid .ind.reveal:nth-child(12){transition-delay:.15s}
.industry-grid .ind.reveal:nth-child(13){transition-delay:.20s}
.industry-grid .ind.reveal:nth-child(14){transition-delay:.25s}
.industry-grid .ind.reveal:nth-child(15){transition-delay:.30s}

/* ---------- Sector tiers (grouped, diagonal green bands) ---------- */
/* ---------- Sector quadrant ---------- */
.sector-quad { position: relative; background: var(--green-900); overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); }
.sector-quad > .wrap { position: relative; z-index: 2; }
.quad-grid { display: grid; grid-template-columns: 1fr 1fr; }
.quad-cell {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.4rem, 4vw, 3.75rem);
  min-height: clamp(240px, 27vw, 320px);
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.quad-cell:nth-child(2n) { border-right: none; }
.quad-cell:nth-last-child(-n+2) { border-bottom: none; }
.quad-ico { display: block; width: clamp(44px, 4.6vw, 60px); height: clamp(44px, 4.6vw, 60px); color: var(--taupe); }
.quad-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.quad-name { font-family: var(--serif); font-weight: 500; color: #fff; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.12; margin-top: 1.4rem; }
.quad-desc { color: var(--sand); font-size: clamp(0.98rem, 1.15vw, 1.12rem); line-height: 1.55; margin-top: 0.85rem; max-width: 40ch; }
.cr-watermark.cr-tiers { top: 7%; right: 4%; transform: none; opacity: 0.07; width: clamp(150px, 15vw, 250px); z-index: 1; }
@media (max-width: 700px) {
  .quad-grid { grid-template-columns: 1fr; }
  .quad-cell { border-right: none; min-height: 0; }
  /* one divider between every stacked cell (override the 2x2 bottom-row rule) */
  .quad-cell, .quad-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .quad-cell:last-child { border-bottom: none; }
  .cr-watermark.cr-tiers { display: none; }
}

/* ---------- Alumni box ---------- */
.alumni {
  background: var(--green-900);
  border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.75rem);
}
.alumni .k { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-300); }
.alogo-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.35rem; }
.alogo {
  display: flex; align-items: center; justify-content: center; height: 92px;
  background: #fff; border-radius: 4px; padding: 0.75rem 1rem; overflow: hidden;
}
.alogo img { max-height: 40px; max-width: 84%; object-fit: contain; }
.alogo img[src*="carlyle"], .alogo img[src*="tenzing"], .alogo img[src*="arma"] { max-height: 60px; max-width: 92%; }
.alogo span { font-family: var(--serif); color: var(--green-800); font-size: 0.98rem; text-align: center; line-height: 1.1; }
.alogo img + span { display: none; }
.alumni-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.alumni-cat {
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--taupe-300); border: 1px solid rgba(175,155,132,0.32); border-radius: 100px; padding: 0.4rem 0.9rem;
}
@media (max-width: 480px) { .alogo-wall { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; color: #fff; padding-top: 7.5rem; padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
  min-height: 440px; display: flex; align-items: flex-end;
}
.page-hero > .bg { position: absolute; inset: 0; z-index: 0; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .display { color: #fff; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.page-hero .lead { color: var(--on-dark-soft); max-width: 56ch; margin-top: 1.4rem; }
.breadcrumb { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe-300); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--on-dark-soft); }
.breadcrumb a:hover { color: #fff; }

/* ---------- Capability detail ---------- */
.cap-detail { padding-top: 0; }
.cap-head { display: flex; align-items: center; gap: 1.1rem; }
.cap-head .ico { width: 42px; height: 42px; color: var(--sage); flex: none; stroke-width: 1.2; }
.cap-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cap-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem; }
@media (max-width: 820px) { .cap-sub { grid-template-columns: 1fr; } }
.subcard { background: var(--green-800); color: #fff; border-radius: 0; padding: 1.6rem 1.5rem; border-top: 2px solid var(--taupe); }
.subcard h4 { color: #fff; font-size: 1.08rem; }
.subcard p { color: var(--on-dark-soft); font-size: 0.92rem; margin-top: 0.6rem; }
.subcard.sage { background: var(--sage); border-top-color: var(--green-800); }
.subcard.sage h4 { color: var(--green-900); }
.subcard.sage p { color: rgba(22,48,42,0.8); }

/* ---------- Careers values ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 820px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .values { grid-template-columns: 1fr; } }
.value { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.value .ico { width: 46px; height: 46px; color: var(--sage); }
.value h4 { font-size: 1.15rem; }
.value p { font-size: 1rem; line-height: 1.6; }
.path-buttons { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }
.path-btn {
  flex: 1; min-width: 240px; max-width: 340px; background: var(--green-800); color: #fff; border-radius: var(--radius);
  padding: 2rem; text-align: center; font-family: var(--serif); font-size: 1.4rem; border-top: 3px solid var(--taupe);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.path-btn:hover { transform: translateY(-4px); background: var(--green-700); }
.path-btn span { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-300); margin-top: 0.6rem; }

/* ---------- Pull quote ---------- */
.pullquote blockquote { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.2; color: var(--green-800); font-style: italic; font-weight: 500; }
.bg-green .pullquote blockquote { color: #fff; }
.pullquote cite { display: block; margin-top: 1.4rem; font-style: normal; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe-600); }
.bg-green .pullquote cite { color: var(--taupe-300); }

/* ---------- Offices ---------- */
.office { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.office .city { font-family: var(--serif); font-size: 1.8rem; color: var(--green-800); }
.office .region { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-600); margin-top: 0.5rem; }
.office .addr { font-size: 0.9rem; margin-top: 0.8rem; }

/* ---------- News ---------- */
.article-row { display: grid; grid-template-columns: 200px 1fr auto; gap: clamp(1.5rem,4vw,3rem); align-items: center; padding-block: 1.9rem; border-top: 1px solid var(--line); transition: background .4s var(--ease); }
.article-row:last-child { border-bottom: 1px solid var(--line); }
.article-row:hover { background: var(--cream); }
.article-row .meta { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-600); }
.article-row h3 { font-size: 1.35rem; max-width: 40ch; }
@media (max-width: 760px) { .article-row { grid-template-columns: 1fr; gap: 0.5rem; } .article-row .plus { display: none; } }

/* ---------- Contact form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; }
.field input, .field textarea, .field select { width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 0.65rem 0; transition: border-color .35s var(--ease); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--taupe); }
.field input::placeholder, .field textarea::placeholder { color: #b7b0a4; }
/* CV file upload */
.field input[type="file"] { font-size: 0.9rem; color: var(--ink-soft); padding: 0.55rem 0; cursor: pointer; }
.field input[type="file"]::file-selector-button { font-family: var(--sans); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-800); background: transparent; border: 1px solid var(--sand); border-radius: var(--radius); padding: 0.55rem 1rem; margin-right: 0.9rem; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.field input[type="file"]::file-selector-button:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); }
/* select: strip the native chrome so it matches the underline fields, add our own chevron */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; cursor: pointer;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23af9b84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 0.15rem center;
}
/* newsletter (in the dark CTA band): stack cleanly on small screens */
@media (max-width: 560px) {
  .cta-band .contact-form { flex-direction: column; align-items: stretch; }
  .cta-band .contact-form .btn { width: 100%; justify-content: center; }
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-watermark { position: absolute; right: 2%; top: auto; bottom: -8%; height: 106%; width: auto; transform: none; opacity: 0.12; pointer-events: none; z-index: 0; }
@media (max-width: 760px) { .cta-watermark { height: auto; width: clamp(240px, 72vw, 380px); right: -6%; bottom: -5%; opacity: 0.09; } }
.cta-band .display { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta-band .lead { max-width: 52ch; margin-inline: auto; margin-top: 1.3rem; }
.cta-band .actions { justify-content: center; display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.25rem; }

/* ---------- Footer ---------- */
.site-footer { background-color: var(--green-900); color: var(--on-dark-soft); padding-top: clamp(4rem,7vw,6rem); background-image: url("../assets/bg-dark.png"); background-size: cover; background-position: center; }

/* ---------- Gated content modal (news) ---------- */
.gate-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(16,38,33,0.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s var(--ease); }
.gate-overlay:not([hidden]) { opacity: 1; }
.gate-overlay[hidden] { display: none; }
.gate-modal { position: relative; width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto; background: var(--offwhite); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: 0 50px 90px -50px rgba(16,38,33,0.7); transform: translateY(12px) scale(0.985); transition: transform .4s var(--ease); }
.gate-overlay:not([hidden]) .gate-modal { transform: none; }
.gate-close { position: absolute; top: 0.7rem; right: 0.95rem; background: none; border: none; font-size: 1.9rem; line-height: 1; color: var(--taupe-600); }
.gate-close:hover { color: var(--green-800); }
.gate-h { font-family: var(--serif); font-weight: 500; color: var(--green-800); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin-top: 0.9rem; }
.gate-sub { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.gate-sub .gate-article { font-style: italic; color: var(--green-800); }
.gate-form { margin-top: 1.5rem; }
.gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.gate-grid .field.full { grid-column: 1 / -1; }
.gate-form .field { display: flex; flex-direction: column; gap: 0.4rem; }
.gate-form label { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--green-800); font-weight: 500; }
.gate-form label span { color: #b4432f; margin-left: 1px; }
.gate-form input[type="text"], .gate-form input[type="email"] { font-family: var(--sans); font-size: 0.95rem; color: var(--ink); background: #fff; border: 1px solid var(--sand); border-radius: var(--radius); padding: 0.75rem 0.85rem; transition: border-color .3s var(--ease); }
.gate-form input:focus { outline: none; border-color: var(--taupe); }
.gate-check { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
.gate-check input { width: 16px; height: 16px; accent-color: var(--green-800); flex: 0 0 auto; }
.gate-consent { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.5; color: var(--taupe-600); }
.gate-consent a { color: var(--green-800); text-decoration: underline; }
.gate-form > .btn { margin-top: 1.4rem; }
.gate-note { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; color: var(--green-800); font-size: 1.05rem; }
.gate-note[hidden] { display: none; }
@media (max-width: 460px) { .gate-grid { grid-template-columns: 1fr; } }
body.gate-open { overflow: hidden; }
.site-footer a { color: var(--on-dark-soft); transition: color .3s var(--ease); }
.site-footer a:hover { color: var(--taupe-300); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 0.8fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .logo { height: 42px; margin-bottom: 1.4rem; }
.footer-brand p { max-width: 40ch; font-size: 0.92rem; color: var(--on-dark-soft); }
.footer-col h5 { font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe-300); margin-bottom: 1.3rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-col a, .footer-col li { font-size: 0.92rem; }
.footer-contact a { display: block; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.8rem; flex-wrap: wrap; font-size: 0.8rem; }
.footer-bottom .cities { color: var(--taupe-300); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-s { margin-top: 1.5rem; } .mt-m { margin-top: 2.5rem; } .mt-l { margin-top: clamp(2.5rem,5vw,4rem); }
.maxw { max-width: 62ch; } .maxw-narrow { max-width: 52ch; }
.rule { height: 1px; background: var(--line); border: none; }
.italic-note { font-style: italic; color: var(--ink-soft); }