/* ==========================================================================
   BASE — reset, typography, layout primitives, utilities
   ========================================================================== */

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

/* [hidden] must beat component display rules (.reviews__head is display:flex) */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; }
p, ul, ol, figure, blockquote { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.2em; }
img, picture, video, svg, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold); text-decoration: none; }
hr { border: 0; height: 1px; background: var(--ink-line); margin: var(--s-5) 0; }
address { font-style: normal; }

/* --- Focus: always visible, never removed -------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--gold-lite);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--gold);
  color: var(--ink-deep);
  padding: .85rem 1.4rem;
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus-visible { left: 0; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 100;
  letter-spacing: -.022em;
  line-height: 1.08;
  color: var(--white);
  text-wrap: balance;
}
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--white);
}

.t-hero { font-size: var(--t-hero); }
h1, .t-h1 { font-size: var(--t-h1); }
h2, .t-h2 { font-size: var(--t-h2); }
h3, .t-h3 { font-size: var(--t-h3); }
h4, .t-h4 { font-size: var(--t-h4); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--mist);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Eyebrow / kicker label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .6;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .6;
  flex: none;
}

/* Gold-leaf shimmer applied to display type */
.gilt {
  background: var(--gold-grad);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}

/* Body copy limited to a comfortable measure */
.prose { max-width: 68ch; }
.prose p, .prose li { color: var(--mist); }
.prose h2, .prose h3 { margin-top: 1.8em; }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

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

.sec {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8.5rem);
  overflow: clip;
}
.sec--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sec--flush-top { padding-top: 0; }

/* Section tones — alternate down the page for cadence */
.sec--dark  { background: var(--ink); }
.sec--deep  { background: var(--ink-deep); }
.sec--soft  { background: var(--ink-soft); }
.sec--light { background: var(--bone); color: var(--stone); }
.sec--light h1, .sec--light h2, .sec--light h3,
.sec--light h4, .sec--light h5, .sec--light h6 { color: var(--walnut); }
.sec--light .lead, .sec--light p, .sec--light li { color: var(--stone); }

/* --gold (#C8A02E) is only 2.22:1 on parchment and fails AA. --gold-deep
   (#8A6A18) measures 4.56:1 on --bone, so every gold accent that sits on a
   light surface is restated here. Gold stays as-is on dark (7.44:1). */
.sec--light .eyebrow,
.sec--light a,
.sec--light .quote__by,
.sec--light .post-card__meta,
.sec--light .timeline__meta,
.sec--light .award__year,
.sec--light .review__more,
.sec--light .field .req { color: var(--gold-deep); }

/* Buttons and the dark info card own their colours — restore them. */
.sec--light .btn--gold { color: var(--ink-deep); }
.sec--light .btn--ink  { color: var(--white); }
.sec--light .info-card a { color: var(--white); }
.sec--light .info-card a:hover { color: var(--gold-lite); }
.sec--light .info-card dt { color: var(--gold); }

/* A hairline rule that reads as an inlaid brass strip */
.rule-gold {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
  margin: 0;
}

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack   { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.center  { text-align: center; }
.center .lead { margin-inline: auto; }

/* Oversized ghost numeral sitting behind content */
.ghost-num {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(9rem, 22vw, 20rem);
  font-weight: 300;
  line-height: .8;
  color: var(--white);
  opacity: .04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sec--light .ghost-num { color: var(--walnut); opacity: .05; }

/* ==========================================================================
   GRAIN — one fixed noise layer over the whole page
   ========================================================================== */

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-dropdown);
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }

.relative { position: relative; z-index: var(--z-base); }
.no-scroll { overflow: hidden; }

/* Long pages.
   `content-visibility: auto` was trialled here and removed: on these pages the
   saving was marginal, while offscreen sections stopped painting in full-page
   captures and printing, and the contain-intrinsic-size estimate caused
   scroll-anchoring jumps. The hook is kept so sections can opt in later. */
.cv-auto { contain: layout style; }