/* ==========================================================================
   Homepage — implemented from Homepage.dc.html
   Loaded after base.css.
   ========================================================================== */

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--edge-x);
  background: linear-gradient(180deg, rgba(7, 20, 17, .92), rgba(7, 20, 17, 0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.masthead.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.masthead__mark {
  width: 34px;
  height: auto;
  display: block;
  flex-shrink: 0;
}
.masthead__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--bone);
  text-transform: uppercase;
  white-space: nowrap;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}

.masthead__divider {
  width: 1px;
  height: 20px;
  background: rgba(232, 236, 231, .2);
}

.navlink--portal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .6);
  white-space: nowrap;
}
.navlink--portal:hover { color: var(--gold-light); }
.navlink--portal span { font-size: 12px; }

/* Doubles as the close control: site.js swaps the glyph and the label. */
.menu-toggle {
  display: none;
  z-index: 41;              /* must stay clickable above the open menu */
  background: none;
  border: 1px solid rgba(244, 241, 234, .25);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  color: var(--bone);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: border-color .3s ease, color .3s ease;
}
.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
  border-color: var(--gold);
  color: var(--gold);
}

/* ==========================================================================
   Full-screen mobile menu
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--ink);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;        /* keeps the links out of the tab order when shut */
  pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* min-height lets the links centre when they fit and scroll when they don't —
   justify-content: center alone would clip the top of an overflowing list.
   The top padding clears the fixed masthead. */
.menu__inner {
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: max(88px, 8vw) 8vw max(40px, 8vw);
}

.menu__link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 8vw;
  color: var(--bone);
  letter-spacing: -.02em;
}
.menu__link:hover { color: var(--gold-light); }

.menu__portal {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  border: 1px solid rgba(201, 162, 77, .55);
  border-radius: 999px;
  padding: 13px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold);
}

.menu__email {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold);
}


/* ==========================================================================
   Hero — the "portal": two plates part to reveal the lockup
   Scroll choreography lives in site.js; this file owns the resting state.
   ========================================================================== */
.hero {
  position: relative;
  height: 260vh;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ink);
}

.hero__orbit {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(62vh, 52vw);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .15;
  animation: fs-spin-centered 90s linear infinite;
  pointer-events: none;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, rgba(201, 162, 77, .10), rgba(7, 20, 17, 0) 46%),
    radial-gradient(circle at 50% 50%, rgba(7, 20, 17, 0) 40%, rgba(7, 20, 17, .86) 100%);
}

/* --- Centre lockup + mission ------------------------------------------- */
.hero__center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  opacity: 0;
  transform: scale(.95);
}

.hero__lockup {
  width: clamp(240px, 30vw, 420px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 40px rgba(201, 162, 77, .28));
}

.hero__mission {
  max-width: 860px;
  margin-top: clamp(4px, 1vw, 10px);
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}

.hero__mission .rule-wide { margin-bottom: clamp(16px, 2.2vw, 26px); }

.hero__kicker {
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  font-family: var(--font-mono);
  font-size: clamp(9.5px, .82vw, 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(232, 236, 231, .62);
}

.hero__claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 3.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.042em;
  color: var(--cream);
}
.hero__claim--gold { color: var(--gold-light); }

/* --- Sliding plates ---------------------------------------------------- */
.plate {
  position: absolute;
  top: 0;
  width: 50.2vw;
  height: 100vh;
  z-index: 6;
  overflow: hidden;
  background: var(--ink-plate);
  will-change: transform;
  backface-visibility: hidden;
}
.plate--left  { left: 0; }
.plate--right { left: 49.8vw; }

/* Each plate is a window onto one full-viewport-wide image, so the two
   halves read as a single photograph before they part. */
.plate__window {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plate--left  .plate__window { left: 0; }
.plate--right .plate__window { left: -49.8vw; }

.plate__art {
  position: absolute;
  inset: 0;
  background: var(--ink-plate);
  overflow: hidden;
  will-change: opacity;
}

.plate__ken {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  animation: fs-ken 46s cubic-bezier(.33, 0, .15, 1) infinite alternate;
}

/* One photograph spans both plates, splitting at the sunset vanishing point.
   A gradient of the same key sits underneath, so the hero still reads if the
   image ever fails to load. First declaration is the fallback; the second
   upgrades to WebP where image-set() is understood. */
.plate__photo {
  position: absolute;
  inset: 0;
  background-image:
    url("../img/hero-plate.jpg"),
    radial-gradient(ellipse at 50% 34%, #1c3a33 0%, #0d1d1b 46%, var(--ink-plate) 100%);
  background-image:
    image-set(
      url("../img/hero-plate.webp") type("image/webp"),
      url("../img/hero-plate.jpg")  type("image/jpeg")),
    radial-gradient(ellipse at 50% 34%, #1c3a33 0%, #0d1d1b 46%, var(--ink-plate) 100%);
  background-size: cover, cover;
  background-position: 50% 52%, 50% 52%;
  background-repeat: no-repeat, no-repeat;
}

.plate__scrim--top {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(6, 12, 18, .52) 0%,
    rgba(6, 12, 18, .12) 18%,
    rgba(6, 12, 18, 0) 34%);
}
.plate__scrim--bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5, 10, 16, .7) 0%,
    rgba(5, 10, 16, .4) 14%,
    rgba(5, 10, 16, .14) 28%,
    rgba(5, 10, 16, 0) 44%);
}

.plate__seam {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(201, 162, 77, 0), rgba(201, 162, 77, .75), rgba(201, 162, 77, 0));
}

.plate__stamp {
  position: absolute;
  left: var(--edge-x);
  top: clamp(20px, 3.4vh, 34px);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plate__stamp-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 21px);
  letter-spacing: -.015em;
  color: var(--cream-bright);
  text-shadow: 0 1px 10px rgba(6, 10, 16, .9);
}
.plate__stamp-tick {
  width: 26px;
  height: 1px;
  background: rgba(201, 162, 77, .85);
}
.plate__stamp-est,
.plate__discipline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255, 240, 214, .88);
  text-shadow: 0 1px 6px rgba(6, 10, 16, .85);
}
.plate__discipline {
  position: absolute;
  right: var(--edge-x);
  top: clamp(20px, 3.4vh, 34px);
  color: rgba(255, 240, 214, .9);
}

/* --- Hero CTAs --------------------------------------------------------- */
.hero__cta {
  position: absolute;
  z-index: 45;
  right: var(--edge-x);
  top: clamp(58px, 8.4vh, 82px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: calc(100vw - 168px);
  transition: opacity .5s ease;
}
.hero__cta.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.chip--ghost {
  border: 1px solid rgba(255, 240, 214, .42);
  color: rgba(255, 240, 214, .94);
  background: rgba(6, 10, 16, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.chip--ghost:hover {
  background: rgba(6, 10, 16, .72);
  border-color: var(--gold-light);
  color: var(--gold-light);
}
.chip--solid {
  padding: 9px 15px;
  background: var(--gold);
  font-weight: 500;
  color: var(--ink);
}
.chip--solid:hover {
  background: var(--gold-light);
  color: var(--ink);
}

/* --- Scroll cue -------------------------------------------------------- */
.hero__cue {
  position: absolute;
  z-index: 8;
  bottom: clamp(18px, 3vh, 34px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.hero__cue span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .34em;
  color: rgba(255, 232, 186, .95);
  text-shadow: 0 1px 8px rgba(6, 10, 16, .9);
}
.hero__cue-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, rgba(255, 225, 166, .75), rgba(255, 225, 166, 0));
  animation: fs-cue 2.4s ease-in-out infinite;
}

/* ==========================================================================
   What we believe
   ========================================================================== */
.believe {
  padding: clamp(84px, 11vw, 180px) var(--pad-x) clamp(84px, 11vw, 170px);
}
.believe__glow {
  background: radial-gradient(circle at 78% 12%, rgba(201, 162, 77, .10), rgba(7, 20, 17, 0) 58%);
}
.believe__label { margin-bottom: clamp(30px, 4vw, 52px); }
.believe__label .eyebrow { color: rgba(232, 236, 231, .6); }

.believe__thesis {
  margin-bottom: clamp(44px, 6vw, 86px);
  text-align: center;
}
.believe__thesis-lead {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(29px, 4.1vw, 58px);
  line-height: 1.14;
  letter-spacing: -.035em;
  color: var(--cream);
  text-wrap: pretty;
}
.believe__thesis-tail {
  margin: clamp(16px, 2vw, 26px) auto 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 38px);
  line-height: 1.2;
  letter-spacing: -.03em;
  color: rgba(244, 241, 234, .62);
}

/* An <em> used for emphasis, not italics. */
.accent {
  font-style: normal;
  color: var(--gold-light);
}
.accent--semibold { font-weight: 600; }

.personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3.6vw, 70px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.persona {
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(201, 162, 77, .55);
}
.persona__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(201, 162, 77, .85);
  margin-bottom: 14px;
}
.persona p {
  margin: 0;
  font-size: clamp(16.5px, 1.3vw, 20px);
  line-height: 1.62;
  color: rgba(244, 241, 234, .8);
  text-wrap: pretty;
  max-width: 46ch;
}

.believe__verdict {
  text-align: center;
  margin-bottom: clamp(52px, 7vw, 104px);
}
.believe__verdict .rule-wide { margin-bottom: clamp(22px, 2.8vw, 34px); }
.believe__verdict p {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 2.9vw, 42px);
  line-height: 1.14;
  letter-spacing: -.036em;
  color: var(--cream);
  text-wrap: pretty;
}

.believe__setup {
  max-width: 60ch;
  margin-bottom: clamp(26px, 3.4vw, 42px);
}
.believe__setup p {
  margin: 0;
  color: rgba(244, 241, 234, .82);
}

/* The three questions */
.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0 0 clamp(48px, 6.5vw, 92px);
  padding: 0;
  list-style: none;
}
.question {
  border: 1px solid rgba(232, 236, 231, .14);
  border-radius: 4px;
  padding: clamp(24px, 2.6vw, 36px);
}
.question--emphasis {
  border-color: rgba(201, 162, 77, .42);
  background: rgba(201, 162, 77, .06);
}
.question__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(232, 236, 231, .42);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.question--emphasis .question__index { color: rgba(201, 162, 77, .9); }
.question p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--cream);
}
.question--emphasis p { color: var(--gold-light); }

.believe__close {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(26px, 3.4vw, 60px);
  padding-top: clamp(30px, 4vw, 50px);
  border-top: 1px solid rgba(232, 236, 231, .13);
}
.believe__close p {
  color: rgba(244, 241, 234, .82);
  max-width: 52ch;
}
.believe__close p + p { margin: 0; }
.believe__close p:first-child { margin: 0 0 20px; }
.believe__pullquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.32;
  letter-spacing: -.028em;
  color: var(--cream);
  text-wrap: pretty;
  max-width: 32ch;
}

/* ==========================================================================
   Who we are
   ========================================================================== */
.who__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(26px, 3vw, 46px);
  align-items: start;
}
.who__label { margin-bottom: clamp(22px, 3vw, 38px); }
.who__label .eyebrow { color: rgba(12, 28, 24, .55); }
.who__body {
  padding-top: clamp(0px, 1.2vw, 16px);
  max-width: 620px;
  margin-right: auto;
}
.who__body p {
  color: rgba(12, 28, 24, .82);
  max-width: 56ch;
}
.who__body p:first-of-type { margin: 0 0 22px; }
.who__body p:nth-of-type(2) { margin: 0 0 clamp(28px, 4vw, 44px); }

.tagset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(12, 28, 24, .18);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--ink-card);
}

/* ==========================================================================
   Core values — WATCH
   Two presentations of one list: a watch dial (wide) and a timeline (narrow).
   Only one is in the layout at a time; the other is display:none.
   ========================================================================== */
.watch__glow {
  background: radial-gradient(circle at 22% 40%, rgba(201, 162, 77, .09), rgba(7, 20, 17, 0) 55%);
}
.watch__head { margin-bottom: clamp(46px, 6vw, 84px); }
.watch__head .section-label { margin-bottom: 22px; }
.watch__head .eyebrow { color: rgba(244, 241, 234, .5); }
.watch__head .display-xl span { color: var(--gold); }
.watch__lede {
  margin: 18px 0 0;
  max-width: 640px;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.6;
  color: rgba(244, 241, 234, .66);
  text-wrap: pretty;
}

/* --- Dial presentation -------------------------------------------------- */
.watch__dial-layout {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.dial {
  position: relative;
  width: 460px;
  height: 460px;
  margin: 0 auto;
  cursor: crosshair;
}
.dial__ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .10);
}
.dial__ring-inner {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .07);
}
.dial__ticks {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(201, 162, 77, .85) 0deg .35deg, rgba(201, 162, 77, 0) .35deg 6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 88%, #000 88.5%, #000 96%, transparent 96.5%);
          mask-image: radial-gradient(circle, transparent 88%, #000 88.5%, #000 96%, transparent 96.5%);
  opacity: .5;
}
.dial__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .30;
  animation: fs-spin-centered 64s linear infinite;
}
.dial__hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 176px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
  transition: transform 1.15s cubic-bezier(.5, 0, .15, 1);
  background: linear-gradient(180deg, var(--gold-light), rgba(201, 162, 77, .05));
  border-radius: 2px;
}
.dial.is-tracking .dial__hand {
  transition: transform .38s cubic-bezier(.22, .9, .25, 1);
}
.dial__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px rgba(201, 162, 77, .9);
}

/* Letter badges around the bezel */
.dial__letter {
  position: absolute;
  transform: translate(-50%, -50%) scale(1);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  color: rgba(244, 241, 234, .4);
  transition:
    border-color .6s ease, color .6s ease, background .6s ease,
    transform .7s cubic-bezier(.34, 1.2, .32, 1), box-shadow .6s ease;
}
.dial__letter[data-index="0"] { left: 230px; top: 30px; }
.dial__letter[data-index="1"] { left: 420px; top: 168px; }
.dial__letter[data-index="2"] { left: 348px; top: 392px; }
.dial__letter[data-index="3"] { left: 112px; top: 392px; }
.dial__letter[data-index="4"] { left: 40px;  top: 168px; }

.dial__letter.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow: 0 0 26px rgba(201, 162, 77, .55);
}

/* --- Value rows (dial layout) ------------------------------------------- */
.values {
  display: flex;
  flex-direction: column;
}
.value {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 22px;
  padding: 20px 0;
  border-top: 1px solid rgba(244, 241, 234, .10);
  opacity: .34;
  transform: translateY(4px);
  cursor: pointer;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.value:last-child { border-bottom: 1px solid rgba(244, 241, 234, .10); }
.value.is-active {
  opacity: 1;
  transform: none;
}
.value__initial {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--gold);
}
.value h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 1.9vw, 30px);
  letter-spacing: -.02em;
}
.value p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .7);
}

/* --- Timeline presentation --------------------------------------------- */
.watch__timeline { display: none; }

.timeline {
  position: relative;
  padding-left: 46px;
}
.timeline__spine {
  position: absolute;
  left: 25px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 162, 77, .6), rgba(201, 162, 77, .08));
}
.timeline__item {
  position: relative;
  padding: 0 0 34px;
  opacity: .34;
  cursor: pointer;
  transition: opacity .5s ease, transform .5s ease;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item.is-active { opacity: 1; }
.timeline__badge {
  position: absolute;
  left: -46px;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .16);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: rgba(244, 241, 234, .5);
  transform: scale(1);
  transition:
    border-color .6s ease, color .6s ease, background .6s ease,
    transform .7s cubic-bezier(.34, 1.2, .32, 1), box-shadow .6s ease;
}
.timeline__item.is-active .timeline__badge {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
  transform: scale(1.1);
  box-shadow: 0 0 26px rgba(201, 162, 77, .55);
}
.timeline__item h3 {
  margin: 8px 0 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -.02em;
}
.timeline__item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .7);
}

/* ==========================================================================
   Choose your path
   ========================================================================== */
.paths__inner {
  max-width: 1320px;
  margin: 0 auto;
}
.paths__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.paths__head .section-label { margin-bottom: 20px; }
.paths__head .eyebrow { color: rgba(12, 28, 24, .55); }
.paths__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 78px);
  line-height: .96;
  letter-spacing: -.035em;
}
.paths__note {
  margin: 0;
  max-width: 330px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(12, 28, 24, .6);
}

.paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(400px, 40vw, 520px);
  padding: clamp(26px, 2.4vw, 38px);
  border-radius: 4px;
  background: var(--ink-card);
  color: var(--bone);
  overflow: hidden;
}
.path-card[data-reveal] {
  transition:
    opacity .9s var(--ease-out),
    transform .5s var(--ease-out),
    background .5s ease;
}
.path-card:hover { background: var(--ink-card-hover); }

.path-card__mark {
  position: absolute;
  right: -60px;
  bottom: -50px;
  width: 300px;
  height: auto;
  opacity: .16;
  pointer-events: none;
}
.path-card__index {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--gold);
}
.path-card__body { position: relative; }
.path-card__body h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 46px);
  line-height: .98;
  letter-spacing: -.035em;
}
.path-card__body p {
  margin: 0 0 26px;
  font-size: 16.5px;
  line-height: 1.5;
  color: rgba(244, 241, 234, .66);
}
.path-card__enter {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--gold);
}
.path-card__enter i {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--gold);
  transition: width .4s var(--ease-out);
}
.path-card:hover .path-card__enter i { width: 54px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding: clamp(70px, 9vw, 130px) var(--pad-x) 40px;
  overflow: hidden;
}
.site-footer__glow {
  background: radial-gradient(circle at 50% 120%, rgba(201, 162, 77, .10), rgba(7, 20, 17, 0) 60%);
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(34px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 70px);
  border-bottom: 1px solid rgba(244, 241, 234, .1);
}

.site-footer__lockup {
  width: 210px;
  height: auto;
  display: block;
  margin: -20px 0 0 -14px;
}
.site-footer__reach {
  margin: 8px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(244, 241, 234, .66);
  max-width: 320px;
}
.site-footer__promise {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--gold-light);
  max-width: 340px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col h2 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
}
.site-footer__col a {
  font-size: 16px;
  color: rgba(244, 241, 234, .8);
  transition: color .3s ease;
  width: fit-content;
}
.site-footer__col a:hover { color: var(--gold); }

.site-footer__address {
  margin-top: 14px;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .62);
}
.social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(244, 241, 234, .75);
  transition: border-color .3s ease, color .3s ease;
}
.social a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 26px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: rgba(244, 241, 234, .36);
}

/* ==========================================================================
   Responsive — the 1000px line is where the canvas switched to "mobile"
   ========================================================================== */
@media (max-width: 1120px) {
  /* Keep the 460px dial from crowding the value list on narrow desktops. */
  .watch__dial-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 5vw, 56px);
  }
}

@media (max-width: 1000px) {
  .masthead__nav { display: none; }
  .menu-toggle   { display: block; }

  /* WATCH swaps presentation wholesale. */
  .watch__dial     { display: none; }
  .watch__timeline { display: block; }
}

@media (max-width: 720px) {
  /* On a phone the stamp and the chips both want the top-left corner. The
     stamp runs to about 78px, so the chips are dropped clear of it instead
     of landing on "EST. 2020", and the pair is widened into two equal
     halves — tidier than two different-width pills, and a real tap target
     rather than the 33px the desktop sizing gave. */
  .hero__cta {
    top: clamp(100px, 13.5vh, 126px);
    left: var(--edge-x);
    right: var(--edge-x);
    max-width: none;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .hero__cta .chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 13px 8px;
    font-size: 10px;
    letter-spacing: .14em;
  }
  .plate__discipline { display: none; }
  .menu__link { font-size: 11vw; }
  .site-footer__base { font-size: 9.5px; }
}