/* ==========================================================================
   Impact Path — styles
   Every colour, font and key metric is a token in :root.
   No raw hex or hardcoded font-size below this block. See CLAUDE.md.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted variable fonts. Archivo carries a WIDTH axis (62.5%–125%).
   There is no separate "Archivo Expanded" family — width is set via font-stretch.
   The display face runs at --stretch-expanded / --weight-display. See CLAUDE.md.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62.5% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62.5% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/libre-franklin-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/libre-franklin-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* colour */
  --near-black:   #16090C;
  --maroon:       #6E2130;
  --maroon-dark:  #451018;
  --amber:        #E0A32E;
  --amber-bright: #F2BE55;
  --cream:        #F7EFE6;

  --text-muted-light: #5C5049;
  --text-muted-dark:  rgb(247 239 230 / 0.72);
  --text-faint-dark:  rgb(247 239 230 / 0.6);
  --text-body-dark:   rgb(247 239 230 / 0.65);
  --text-step-dark:   rgb(247 239 230 / 0.75);
  --hairline:         rgb(247 239 230 / 0.12);
  --border-btn:       rgb(247 239 230 / 0.35);
  --border-card:      rgb(247 239 230 / 0.18);
  --separator:        rgb(247 239 230 / 0.25);
  --row-hover:        rgb(224 163 46 / 0.14);
  --text-footer:      rgb(247 239 230 / 0.5);

  --hero-bg: linear-gradient(160deg, var(--near-black) 40%, var(--maroon-dark) 100%);

  /* type */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-ui:      'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Libre Franklin', system-ui, -apple-system, sans-serif;
  /* Archivo's width axis, applied to all display type (h1/h2/h3, wordmark) via .display.
     100% matches the mockup. The handoff asked for "Archivo Expanded" (125%), but that was
     reviewed against the mockup and rejected as too wide — do not raise this without asking. */
  --stretch-expanded: 100%;
  /* The handoff says 800 for display type, but the mockup's font request only loaded
     500/600/700, so its headings rendered at 700. Matching the mockup. */
  --weight-display: 700;

  /* Display sizes follow the mockup's proportions, not the handoff's written maxima.
     The mockup resolved its vw units against a ~940px viewport while laying the page
     out at 1440px, so its headings are ~0.69x the spec. We reproduce that by capping
     each clamp at its 940px value: type grows fluidly up to ~940px, then holds.
     Spec maxima, for reference: h1 88, h2 52, mission 48, cta 58, row 30. */
  --fs-h1:          clamp(48px, 6.5vw, 61px);
  --fs-h2:          clamp(32px, 4vw, 38px);
  --fs-h2-mission:  clamp(30px, 3.6vw, 34px);
  --fs-h2-cta:      clamp(34px, 4.4vw, 41px);
  --fs-row-title:   clamp(20px, 2.2vw, 21px);
  --fs-card-title:  24px;
  --fs-name:        20px;
  --fs-lede:        18px;
  --fs-body:        15px;
  --fs-body-sm:     14.5px;
  --fs-btn:         14px;
  --fs-btn-lg:      15px;
  --fs-nav:         13.5px;
  --fs-footer:      13px;
  --fs-eyebrow:     12px;
  --fs-num:         15px;
  --fs-disc:        17px;
  --fs-wordmark:    17px;

  --lh-tight:  1;
  --lh-h1:     0.98;
  --lh-title:  1.05;
  --lh-body:   1.6;
  --lh-ui:     1.2;   /* buttons + small uppercase labels: must not inherit the 1.6 body leading */
  --lh-lede:   1.65;

  --ls-tight:   -0.02em;
  --ls-tighter: -0.01em;
  --ls-nav:     0.04em;
  --ls-btn:     0.06em;
  --ls-role:    0.14em;
  --ls-eyebrow: 0.24em;

  /* layout */
  --content-max: 1280px;
  --pad-x:       48px;
  --pad-y:       100px;
  --pad-y-lg:    110px;
  --nav-pad-y:   24px;
  --radius:      4px;
  --radius-card: 6px;
  --rule:        2px;

  /* motion */
  --rise-distance: 24px;
  --rise-duration: 0.7s;
  --spin-duration: 24s;
}

/* --- Base ----------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* keeps anchored sections clear of the sticky-feeling nav on small screens */
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--near-black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* the hero glyph bleeds off-canvas right */
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--amber); }
a:hover { color: var(--amber-bright); }
img { max-width: 100%; display: block; }

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

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
}

.amber { color: var(--amber); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--amber);
  color: var(--near-black);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-btn);
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--pad-x);
  top: var(--nav-pad-y);
  color: var(--near-black);
}

/* --- Shared display type -------------------------------------------------- */

.display,
.hero__title,
.section-head__title,
.mission__title,
.cta__title,
.criteria__title,
.steps__title,
.nav__wordmark {
  font-family: var(--font-display);
  font-stretch: var(--stretch-expanded);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: var(--lh-ui);
  color: var(--amber);
  margin-bottom: 20px;
}

/* --- Logo + hero glyph ---------------------------------------------------
   Styled here, not via presentation attributes: var() is not resolved inside
   SVG attributes like fill="…" — it only works in CSS.
   -------------------------------------------------------------------------- */

.logo__disc { fill: var(--amber); }
.logo__step { stroke: var(--near-black); }

.hero__ring { stroke: var(--maroon); }
.hero__arc  { stroke: var(--amber); }
.hero__step { stroke: var(--amber); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: var(--lh-ui);
  padding: 16px 32px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--sm {
  font-size: var(--fs-eyebrow);
  padding: 12px 24px;
}

.btn--amber {
  background: var(--amber);
  color: var(--near-black);
}
.btn--amber:hover {
  background: var(--amber-bright);
  color: var(--near-black);
}

.btn--outline {
  color: var(--cream);
  border-color: var(--border-btn);
}
.btn--outline:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.btn--dark {
  background: var(--near-black);
  color: var(--cream);
  font-size: var(--fs-btn-lg);
  padding: 20px 40px;
}
.btn--dark:hover {
  background: var(--maroon-dark);
  color: var(--cream);
}

/* --- Nav ------------------------------------------------------------------ */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: var(--nav-pad-y) var(--pad-x);
  border-bottom: 1px solid var(--hairline);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--cream);
}
.nav__brand:hover { color: var(--cream); }

.nav__mark { flex-shrink: 0; }

.nav__wordmark {
  font-weight: var(--weight-display);
  font-size: var(--fs-wordmark);
  letter-spacing: var(--ls-tighter);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
}

.nav__link {
  color: var(--cream);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--amber); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--pad-y) var(--pad-x) var(--pad-y-lg);
  background: var(--hero-bg);
}

.hero__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* `top: 50%` with no translate is deliberate — it puts the glyph's TOP edge at the hero's
   midpoint, so the circle runs off the bottom of the hero and its lower half is buried under
   the cream section. That burial is what hides the join where the amber path meets the maroon
   ring, and it is how the mockup renders.

   Do not "fix" this by adding transform: translateY(-50%) to centre it. The rise animation ends
   on `transform: none`, which silently cancels any transform set here — the mockup has the same
   conflict, which is why it renders uncentred. Setting it anyway would make reduced-motion users
   (who skip the animation) see a different layout from everyone else. */
.hero__glyph {
  position: absolute;
  right: -120px;
  top: 50%;
  opacity: 0.9;
  pointer-events: none;
  animation: rise 1s 0.2s ease both;
}

.hero__arc {
  transform-origin: center;
  animation: spin var(--spin-duration) linear infinite;
}

.hero__title {
  font-weight: var(--weight-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  max-width: 14ch;
}

.hero__lede {
  margin-top: 40px;
  max-width: 50ch;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--text-muted-dark);
}

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

/* --- Section header (Focus + Team) ---------------------------------------- */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 56px;
}

.section-head__title {
  font-weight: var(--weight-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

.section-head__intro {
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted-light);
}
.section-head__intro--on-dark { color: var(--text-faint-dark); }

/* --- Focus ---------------------------------------------------------------- */

.focus {
  background: var(--cream);
  color: var(--near-black);
  padding: var(--pad-y) var(--pad-x);
}

.criteria {
  display: flex;
  flex-direction: column;
  border-top: var(--rule) solid var(--near-black);
}

.criteria__row {
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  padding: 28px 8px;
  border-bottom: var(--rule) solid var(--near-black);
  transition: background-color 0.2s ease;
}
.criteria__row:hover { background: var(--row-hover); }

.criteria__num {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-num);
  color: var(--maroon);
}

.criteria__title {
  font-weight: 700;
  font-size: var(--fs-row-title);
  letter-spacing: var(--ls-tighter);
}

.criteria__desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted-light);
}

/* --- Mission -------------------------------------------------------------- */

.mission {
  background: var(--maroon);
  color: var(--cream);
  padding: var(--pad-y-lg) var(--pad-x);
}

.mission__title {
  font-weight: var(--weight-display);
  font-size: var(--fs-h2-mission);
  line-height: var(--lh-title);
  max-width: 26ch;
  margin-bottom: 72px;
}

/* separators are the container background showing through a 2px grid gap */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rule);
  background: var(--separator);
}

.steps__card {
  background: var(--maroon);
  padding: 36px 32px 40px;
}

.steps__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--near-black);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-disc);
}

.steps__title {
  font-weight: 700;
  font-size: var(--fs-card-title);
  letter-spacing: var(--ls-tighter);
  margin-bottom: 12px;
}

.steps__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-lede);
  color: var(--text-step-dark);
}

/* --- Team ----------------------------------------------------------------- */

.team {
  background: var(--near-black);
  color: var(--cream);
  padding: var(--pad-y-lg) var(--pad-x);
}

.directors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.director {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 36px 32px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  transition: border-color 0.2s ease;
}
.director:hover { border-color: var(--amber); }

.director__photo {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: var(--radius);
  object-fit: cover;
}


.director__name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-name);
  margin-bottom: 4px;
}

.director__role {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-role);
  text-transform: uppercase;
  line-height: var(--lh-ui);
  color: var(--amber);
  margin-bottom: 12px;
}

.director__bio {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-lede);
  color: var(--text-body-dark);
}

/* --- Contact CTA ---------------------------------------------------------- */

.cta {
  background: var(--amber);
  color: var(--near-black);
  padding: var(--pad-y-lg) var(--pad-x);
}

.cta__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
}

.cta__title {
  font-weight: var(--weight-display);
  font-size: var(--fs-h2-cta);
  line-height: var(--lh-tight);
  max-width: 18ch;
}


/* --- Footer --------------------------------------------------------------- */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 26px var(--pad-x);
  background: var(--near-black);
  color: var(--text-footer);
  font-size: var(--fs-footer);
  border-top: 1px solid var(--hairline);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Motion --------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(var(--rise-distance)); }
  to   { opacity: 1; transform: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.rise { animation: rise var(--rise-duration) ease both; }
.rise--1 { animation-delay: 0.1s; }
.rise--2 { animation-delay: 0.2s; }

/* --- Responsive ----------------------------------------------------------- */

/* The glyph is deliberately NOT resized between full-size and hidden. Shrinking it made the
   circle smaller while the hero stayed the same height, so proportionally less of it was
   clipped — exposing the join where the amber path meets the maroon ring. Two states only,
   matching the mockup: full size, or gone. */

@media (max-width: 900px) {
  :root {
    --pad-x: 28px;
    --pad-y: 72px;
    --pad-y-lg: 76px;
  }

  /* the glyph would sit under the copy at this width */
  .hero__glyph { display: none; }

  .mission__title { margin-bottom: 48px; }
  .section-head { margin-bottom: 40px; }

  /* number + title on one line, description beneath */
  .criteria__row {
    grid-template-columns: 56px 1fr;
    gap: 8px 16px;
    align-items: baseline;
  }
  .criteria__desc { grid-column: 2; margin-top: 4px; }
}

@media (max-width: 700px) {
  :root { --pad-x: 20px; }

  .nav { gap: 16px; }
  .nav__links { gap: 20px; width: 100%; }

  .directors { grid-template-columns: 1fr; }
  .director { padding: 28px 24px; }

  .hero__actions .btn { flex: 1 1 auto; text-align: center; }

  /* the email is the longest unbreakable string on the page — let it shrink */
  .btn--dark {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .footer { justify-content: flex-start; }
}

@media (max-width: 480px) {
  /* side-by-side leaves the bio ~5 words wide — stack instead */
  .director { flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* no transform override here — see the note on .hero__glyph. Reduced-motion and normal
     rendering must land the glyph in exactly the same place. */
  .rise, .hero__glyph { animation: none; opacity: 1; transform: none; }
  .hero__arc { animation: none; }
}