/* ==========================================================================
   Percept
   Type: Gilroy (SVN-Gilroy). The interface is black and white — no accent
   hues, no colour tokens. All the colour comes from the images, which run
   untreated; type over an image is carried by a scrim, never by the image
   being tame.
   ========================================================================== */

/* -------------------------------------------------------------- 1. Fonts */

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- 2. Tokens */

:root {
  /* Ink and paper — the whole palette */
  --ink-deep: #0A0A09;
  --ink: #111110;
  --ink-raised: #17171A;
  --paper: #F4F4F1;
  --paper-warm: #EDEDE9;

  /* Greys, dark surfaces */
  --grey-100: #DEDED9;
  --grey-200: #C8C8C0;
  --grey-400: #8C8C85;
  --grey-500: #6E6E66;
  --grey-600: #57574F;
  --line: #2A2A26;

  /* Greys, light surfaces */
  --line-ink: rgba(17, 17, 16, 0.14);
  --grey-ink: #5A5A54;

  /* One decorative rule, greyscale */
  --rail: linear-gradient(90deg, var(--paper) 0%, var(--grey-600) 100%);
  --rail-ink: linear-gradient(90deg, var(--ink) 0%, rgba(17, 17, 16, 0.2) 100%);

  /* ---- One type scale, used everywhere. No one-off font sizes. ---- */
  --fs-d1: clamp(2.6rem, 6.4vw, 5.4rem);      /* hero headline */
  --fs-d2: clamp(2rem, 4.2vw, 3.4rem);        /* section headline */
  --fs-d3: clamp(1.4rem, 2.1vw, 1.9rem);      /* card headline */
  --fs-d4: clamp(1.1rem, 1.5vw, 1.3rem);      /* sub-head, statement line */
  --fs-lead: clamp(1.04rem, 1.3vw, 1.22rem);  /* intro paragraphs */
  --fs-body: 1rem;                            /* body copy */
  --fs-sm: 0.875rem;                          /* secondary copy */
  --fs-label: 0.72rem;                        /* uppercase labels, buttons */
  --fs-numeral: clamp(3.4rem, 7vw, 6rem);     /* the big 01 / 02 / 03 */

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1320px;
  --section-y: clamp(72px, 9vw, 132px);
  --radius: 16px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------- 3. Reset */

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

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

body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--paper);
  font-family: 'Gilroy', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

::selection { background: var(--paper); color: var(--ink); }

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

/* ------------------------------------------------------- 4. Type helpers */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.display {
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.d1 { font-size: var(--fs-d1); }
.d2 { font-size: var(--fs-d2); }
.d3 { font-size: var(--fs-d3); letter-spacing: -0.026em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--rail);
  flex: none;
}

.lede {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--grey-200);
  max-width: 58ch;
}

.rail {
  height: 2px;
  width: 100%;
  background: var(--rail);
  border: 0;
  margin: 0;
}

/* Photographs run untreated, in colour. There used to be one shared filter
   here — `.ph { filter: grayscale(1) contrast(1.04) }` on every <img> — and
   putting the whole set back under one treatment again means restoring that
   rule and its class, nothing else. */

/* --------------------------------------------------------- 5. Section kit */

.section { padding-block: var(--section-y); position: relative; }

.section--tight { padding-block: clamp(52px, 6vw, 88px); }

/* Light sections: same components, inverted */
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper .lede { color: var(--grey-ink); }
.section--paper .eyebrow { color: var(--grey-ink); }
.section--paper .eyebrow::before { background: var(--rail-ink); }
.section--paper .rail { background: var(--rail-ink); }

/* Two paper sections in a row (the dark one between them hidden): no
   double padding, a hairline instead of a change of ground. */
.section--paper + .section--paper,
.section--paper + [hidden] + .section--paper { padding-top: 0; }
.section--paper + .section--paper > .wrap::before,
.section--paper + [hidden] + .section--paper > .wrap::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--rail-ink);
  margin-bottom: clamp(52px, 6vw, 88px);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4.4vw, 64px);
}

.section-head__title { display: grid; gap: 1.1rem; }

@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}

/* ------------------------------------------------------------ 6. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--solid { background: var(--paper); color: var(--ink); }
.btn--solid:hover { background: var(--grey-100); }

.btn--ghost { border-color: rgba(244, 244, 241, 0.3); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(244, 244, 241, 0.08); }

.section--paper .btn--solid { background: var(--ink); color: var(--paper); }
.section--paper .btn--solid:hover { background: #2A2A26; }
.section--paper .btn--ghost { border-color: rgba(17, 17, 16, 0.3); color: var(--ink); }
.section--paper .btn--ghost:hover { border-color: var(--ink); background: rgba(17, 17, 16, 0.05); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 0.35em;
  background-image: var(--rail);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.45s var(--ease);
}
.link:hover { background-size: 100% 2px; }
.section--paper .link { background-image: var(--rail-ink); }

/* ------------------------------------------------- 7. Disclosure toggles */
/* Native <details>, so the long copy is in the DOM and findable, just folded
   away until asked for. No JavaScript involved. */

.disclose { margin-top: clamp(20px, 2.4vw, 30px); }

.disclose > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-400);
  padding: 0.7em 1.2em;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.disclose > summary::-webkit-details-marker { display: none; }

.disclose > summary::after {
  content: '+';
  font-size: 1.15em;
  line-height: 0;
  transform: translateY(-0.04em);
}

.disclose[open] > summary::after { content: '\2013'; }

.disclose > summary:hover { color: var(--paper); border-color: var(--grey-500); }

.section--paper .disclose > summary { color: var(--grey-ink); border-color: var(--line-ink); }
.section--paper .disclose > summary:hover { color: var(--ink); border-color: var(--ink); }

.disclose__body { padding-top: clamp(20px, 2.4vw, 30px); }

/* ---------------------------------------------------------------- 8. Nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.nav.is-stuck {
  background: rgba(10, 10, 9, 0.86);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line);
}

/* Three columns with the outer two equal, so the links sit on the page's
   centre line whatever the logo and the button either side measure. With
   space-between they sat halfway between those two instead, off-centre by
   half the difference in their widths: 28px left on the home page, 21 on
   careers, 10 on the events pages. The columns are pinned because on a
   phone the links leave the flow as a fixed panel, and the button would
   otherwise fall into the middle column. */
.nav__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: 74px;
}

.wordmark { grid-column: 1; justify-self: start; }

/* The logo file is black on transparent; invert(1) is exact for pure black. */
.wordmark__img {
  display: block;
  height: 20px;
  width: auto;
  filter: invert(1);
}

.nav__links {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav__links a {
  color: var(--grey-200);
  position: relative;
  padding-block: 4px;
  transition: color 0.3s var(--ease);
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--paper);
  transition: width 0.4s var(--ease);
}

.nav__links a:hover { color: var(--paper); }
.nav__links a:hover::after { width: 100%; }

.nav__cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }

.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 244, 241, 0.26);
  border-radius: 999px;
  position: relative;
}

.nav__burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--paper);
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { bottom: 16px; }

.nav.is-open .nav__burger span:nth-child(1) { transform: translate(-50%, 4.25px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translate(-50%, -4.25px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__links {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 28px;
    transform: translateY(-120%);
    transition: transform 0.5s var(--ease);
    font-size: var(--fs-body);
  }
  .nav.is-open .nav__links { transform: translateY(0); }
  .nav__links a { width: 100%; padding-block: 15px; border-bottom: 1px solid var(--line); }
  .nav__burger { display: block; }
  .nav__cta .btn { display: none; }
}

/* --------------------------------------------------------------- 9. Hero */

.hero {
  position: relative;
  min-height: min(90svh, 800px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(140px, 18vw, 168px) clamp(60px, 7vw, 92px);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-deep);
  text-align: center;
}

/* The image is wide (2000×923) enough that at every hero height the box is
   proportionally narrower — cover always shows full height and trims the
   sides. Centred keeps the image's dark tunnel behind the type at any width. */
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: contents; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 60% at 50% 46%, rgba(10, 10, 9, 0.76), transparent 72%),
    linear-gradient(to bottom, rgba(10, 10, 9, 0.6) 0%, rgba(10, 10, 9, 0.18) 34%, rgba(10, 10, 9, 0.28) 64%, rgba(10, 10, 9, 0.78) 100%);
}

.hero__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 740px;
  margin-inline: auto;
}


.hero h1 { margin-bottom: clamp(24px, 3vw, 36px); max-width: 15ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(26px, 3.2vw, 38px);
}

.hero__desc {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--grey-200);
  max-width: 44ch;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vw, 32px);
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 244, 241, 0.3);
  background: rgba(10, 10, 9, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: var(--paper);
  animation: heroScrollCue 2.6s ease-in-out infinite;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.hero__scroll:hover { border-color: var(--paper); background: rgba(10, 10, 9, 0.55); }
.hero__scroll svg { width: 15px; }

@keyframes heroScrollCue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

@media (max-width: 900px) { .hero { min-height: min(94svh, 760px); } }

/* The standee artwork puts its light beam straight through the middle of the
   frame, where the type sits, so the phone scrim is a band rather than the
   soft centre spot the wide artwork needs. Colour is left to breathe at the
   top and bottom, where nothing has to be read. Measured: every block keeps
   at least 4.5:1 against the brightest pixel behind it. */
@media (max-width: 700px) {
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(10, 10, 9, 0.66) 0%,
        rgba(10, 10, 9, 0.34) 12%,
        rgba(10, 10, 9, 0.74) 26%,
        rgba(10, 10, 9, 0.80) 60%,
        rgba(10, 10, 9, 0.42) 84%,
        rgba(10, 10, 9, 0.82) 100%);
  }
}

/* -------------------------------------------------------- 10. Stats band */

.stats__claim {
  font-size: var(--fs-d2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin-bottom: clamp(36px, 4.4vw, 60px);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 44px);
  border-top: 1px solid var(--line);
}

.section--paper .stats__grid { border-top-color: var(--line-ink); }

.stat { padding-top: clamp(22px, 2.6vw, 34px); display: grid; gap: 0.5rem; align-content: start; }

.stat__no {
  font-size: var(--fs-d2);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__k {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.section--paper .stat__k { color: var(--grey-ink); }

@media (max-width: 700px) {
  .stats__grid { grid-template-columns: 1fr; gap: 0; }
  .stat { padding-bottom: clamp(18px, 3vw, 24px); border-bottom: 1px solid var(--line); }
  .section--paper .stat { border-bottom-color: var(--line-ink); }
}

/* --------------------------------------------------------- 11. Practices */

/* The three cards share one set of rows — numeral, a spacer, then name,
   strapline and body — so every name sits on the same line as the other two
   however many lines the copy above or below it runs to. The card block is
   anchored at the bottom of the card, which is why an extra line anywhere
   used to push one card's heading out of the row.

   The height belongs on the deck, not on the card: a `1fr` row can only
   absorb slack that exists, and a grid whose height comes from its own
   content has none. Give the container the height and the spacer row takes
   the difference. */
.practices__deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto auto auto;
  min-height: clamp(420px, 44vw, 540px);
  gap: clamp(14px, 1.6vw, 22px);
}

.practice {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  transition: transform 0.55s var(--ease);
}

.practice:hover { transform: translateY(-6px); }

.practice__media { position: absolute; inset: 0; z-index: -2; }

.practice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.practice:hover .practice__media img { transform: scale(1.05); }

/* Enough scrim for white type over any frame of the photograph. The top pair
   carries the big numeral, which sits over the brightest part of the credit
   card's photograph — measured at 2.9:1 with the old values, under the 3:1
   that large type needs. */
.practice::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(10, 10, 9, 0.68) 0%,
    rgba(10, 10, 9, 0.52) 30%,
    rgba(10, 10, 9, 0.84) 72%,
    rgba(10, 10, 9, 0.94) 100%);
}

/* The wrapper only groups the copy in the markup; the three paragraphs are
   the grid items, so they are placed on the rows by hand. */
.practice__text { display: contents; }

.practice__no {
  grid-row: 1;
  font-size: var(--fs-numeral);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--paper);
}

.practice__name {
  grid-row: 3;
  align-self: end;
  font-size: var(--fs-d3);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
}

.practice__name small {
  display: block;
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--grey-200);
  margin-bottom: 0.4em;
}

.practice__line {
  grid-row: 4;
  align-self: start;
  margin-top: 0.75rem;
  font-size: var(--fs-d4);
  font-weight: 600;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.practice__body {
  grid-row: 5;
  align-self: start;
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--grey-200);
  text-wrap: pretty;
}

/* One card per row: there is nothing left to line up, so the shared rows go
   and each card is a plain column again. */
@media (max-width: 980px) {
  .practices__deck {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }
  .practice {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-row: auto;
    grid-template-rows: none;
    min-height: 380px;
  }
  .practice__text { display: block; }
  .practice__no,
  .practice__name,
  .practice__line,
  .practice__body { grid-row: auto; }
}

/* ---------------------------------------------------------- 12. Partners */

.sectors { margin-top: clamp(28px, 3.2vw, 44px); display: grid; gap: 1rem; justify-items: start; }

.sectors__lead { font-size: var(--fs-sm); color: var(--grey-ink); }

.sectors__list { display: flex; flex-wrap: wrap; gap: 10px; }

.sectors__list li {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0.5em 1em;
  border: 1px solid var(--line-ink);
  border-radius: 999px;
}

/* -------------------------------------------------------------- 13. Team */

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.member { display: grid; gap: 1rem; }

.member__photo {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-raised);
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.member:hover .member__photo img { transform: scale(1.04); }

.member__role {
  font-size: var(--fs-d4);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.member__practice {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-top: 0.4rem;
  display: block;
}

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

/* ------------------------------------------------------------ 14. Events */
/* A few chosen group photographs and nothing else until the programme is
   ready. Kien's three lead, larger, with the four from the new folder
   beneath. Twelve columns so both rows fill the width exactly: three
   photographs at four columns each, then four at three. The figures carry
   data-reveal, which owns transform, so nothing here moves them. */

/* One line across the width, the note set on the same baseline as the
   headline and pushed to the far edge, quieter than a normal lede. */
.section-head--soon {
  display: flex;
  justify-content: space-between;
  align-items: last baseline;
  flex-wrap: wrap;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 1rem;
}

/* Colour, not opacity: [data-reveal] owns opacity and would reset it. */
.section--paper .soon { color: color-mix(in srgb, var(--grey-ink) 60%, var(--paper)); }

.moments {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}

.moments figure {
  grid-column: span 3;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-warm);
}

.moments figure:nth-child(-n + 3) { grid-column: span 4; }

.moments img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two across on a phone, the first photograph the full width, so seven
   still ends on a full row. */
@media (max-width: 760px) {
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moments figure,
  .moments figure:nth-child(-n + 3) { grid-column: span 1; }
  .moments figure:first-child { grid-column: span 2; }
}

/* ------------------------------------------------------------ 15. Values */

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.value {
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.value:hover { border-color: rgba(244, 244, 241, 0.28); transform: translateY(-4px); }

.value__no {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--grey-600);
  display: block;
  margin-bottom: 1.6rem;
}

.value__name {
  font-size: var(--fs-d3);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.8rem;
}

.value__belief { font-size: var(--fs-sm); line-height: 1.55; color: var(--grey-200); }

.value__list { display: grid; gap: 0.6rem; margin-top: 1rem; }

.value__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--grey-400);
}

.value__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--grey-500);
}

@media (max-width: 1000px) { .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .values__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- 16. Manifesto */

.manifesto { background: var(--ink); border-block: 1px solid var(--line); }

/* Statement left, text right — the same split the section heads use. The
   left column is wide enough for "Some people see." to hold one line at d2,
   and it stays pinned while the fold-out is read. */
.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: start;
}

.manifesto__side {
  position: sticky;
  top: 108px;
  display: grid;
  gap: clamp(24px, 2.6vw, 34px);
}

.manifesto__label { display: grid; gap: 1.1rem; }

.manifesto__body { display: grid; gap: 1.3rem; }

.manifesto__body p {
  font-size: var(--fs-lead);
  line-height: 1.62;
  font-weight: 300;
  color: var(--grey-100);
  max-width: 54ch;
}

.manifesto__body p.is-close {
  font-weight: 700;
  font-size: var(--fs-d3);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--paper);
  padding-top: 0.4rem;
}

@media (max-width: 900px) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__side { position: static; }
}

/* --------------------------------------------------------- 17. Community */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

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

.split__copy { display: grid; gap: 1.2rem; justify-items: start; }

.facts { display: grid; border-top: 1px solid var(--line-ink); }

.fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  align-items: baseline;
  padding-block: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line-ink);
}

.fact__k {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-ink);
  min-width: 5ch;
}

.fact__v { font-size: var(--fs-d4); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

.fact__v small {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--grey-ink);
  margin-top: 0.25rem;
}

/* ------------------------------------------------------------ 18. Why us */

.creed { display: grid; gap: 0.6rem; }
.creed p { font-size: var(--fs-sm); line-height: 1.5; color: var(--grey-500); }
.creed b { color: var(--paper); font-weight: 600; }

.perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.perk {
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.perk:hover { border-color: rgba(244, 244, 241, 0.26); transform: translateY(-4px); }

.perk__no {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--grey-600);
  display: block;
  margin-bottom: 1.6rem;
}

.perk__title {
  font-size: var(--fs-d4);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.16;
  margin-bottom: 0.7rem;
}

.perk__body { font-size: var(--fs-sm); line-height: 1.55; color: var(--grey-200); }

.why__foot { margin-top: clamp(30px, 3.4vw, 46px); }

@media (max-width: 1000px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 19. Careers */

/* Page banner for careers.html */
.pagehead {
  position: relative;
  padding-block: clamp(150px, 19vw, 210px) clamp(56px, 7vw, 84px);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-deep);
}

.pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead__media picture { display: contents; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.pagehead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 10, 9, 0.82) 0%, rgba(10, 10, 9, 0.66) 50%, rgba(10, 10, 9, 0.9) 100%);
}

/* d1 is the home page's hero scale; an inner page head sits one step down so
   the hierarchy between them is obvious. */
.pagehead__inner { display: grid; gap: 1.2rem; max-width: 720px; }
.pagehead__inner h1 { max-width: 16ch; }
.pagehead__inner .lede { max-width: 46ch; }

/* The hiring process — big numerals, one step per row */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(18px, 3vw, 56px);
  align-items: start;
  padding-block: clamp(24px, 2.8vw, 38px);
  border-bottom: 1px solid var(--line);
}

.step__no {
  font-size: var(--fs-d2);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--grey-600);
  min-width: 2.2ch;
}

.step__title { font-size: var(--fs-d4); font-weight: 700; letter-spacing: -0.024em; line-height: 1.2; }
.step__body { font-size: var(--fs-sm); line-height: 1.6; color: var(--grey-200); }

@media (max-width: 760px) {
  .step { grid-template-columns: auto minmax(0, 1fr); }
  .step__body { grid-column: 2 / 3; }
}

.roles { margin-top: clamp(30px, 3.6vw, 48px); border-top: 1px solid var(--line); }

.role {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 36px);
  align-items: center;
  padding-block: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
}

.role__title { font-size: var(--fs-d4); font-weight: 600; letter-spacing: -0.024em; }
.role__practice { font-size: var(--fs-sm); color: var(--grey-400); }

/* Same reason as the event rows: a role row carries data-reveal, so the
   hover moves its children by transform, never the row's own padding. */
.role__title,
.role__practice { transition: transform 0.45s var(--ease); }

.role__go {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244, 244, 241, 0.22);
  display: grid;
  place-items: center;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

@media (hover: hover) {
  .role:hover { background: rgba(244, 244, 241, 0.03); }

  .role:hover .role__title,
  .role:hover .role__practice { transform: translateX(8px); }

  .role:hover .role__go {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    transform: rotate(45deg);
  }
}

.role__go svg { width: 14px; }

@media (max-width: 720px) {
  .role { grid-template-columns: minmax(0, 1fr) auto; }
  .role__practice { grid-column: 1 / 2; }
}

/* ------------------------------------------------------- 20. Contact form */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 4.5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 72px);
  margin-bottom: clamp(40px, 4.6vw, 64px);
  border-bottom: 1px solid var(--line);
}

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

.contact-info { display: grid; gap: 1.4rem; align-content: start; }

.contact-info__h {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-600);
}

.contact-info__list { display: grid; gap: 1.05rem; }
.contact-info__list li { display: grid; gap: 0.25rem; }

.contact-info__k {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-600);
}

.contact-info__v {
  font-size: var(--fs-d4);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
  transition: color 0.3s var(--ease);
}

a.contact-info__v:hover { color: var(--grey-200); }

.contact-form { display: grid; gap: 14px; align-content: start; }

.cf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

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

.cf__field {
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.cf__field input,
.cf__field textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--paper);
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8em 0.95em;
  resize: vertical;
  transition: border-color 0.3s var(--ease);
}

.cf__field textarea { min-height: 104px; }
.cf__field input:focus,
.cf__field textarea:focus { outline: none; border-color: var(--grey-400); }

.cf__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 6px; }

.cf__note {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--grey-600);
}

/* ------------------------------------------------------------- 21. Footer */

.footer { background: var(--ink); border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 116px); }

.footer__eyebrow { margin-bottom: 1.1rem; }
.footer__ask { margin-bottom: 1.2rem; }
.footer__lede { margin-bottom: clamp(36px, 4.4vw, 56px); }
.footer__h4--gap { margin-top: 1.6rem; }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(40px, 4.6vw, 64px);
}

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

/* align-content: start, or the rows stretch to the height of the link
   column beside them and the wordmark, the line and the rule drift apart. */
.footer__brand { display: grid; gap: 1rem; justify-items: start; align-content: start; }

.footer__wordmark {
  font-size: var(--fs-d2);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 0.92;
}

.footer__tag { font-size: var(--fs-d4); font-weight: 600; letter-spacing: -0.02em; color: var(--grey-200); }

.footer__col h4 {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-600);
  margin-bottom: 1rem;
}

.footer__col li + li { margin-top: 0.55rem; }

.footer__col a,
.footer__col span { font-size: var(--fs-body); color: var(--grey-200); transition: color 0.3s var(--ease); }

.footer__col a:hover { color: var(--paper); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--grey-600);
}

/* -------------------------------------------------------- 22. Reveal anim */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

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