/* =====================================================================
   AD Advisors — Circle of Support
   Palette:  black #000 · white #fff · brand gold #CEB479
   Type:     Helvetica Neue / Arial  (nav, menu, UI)
             Chivo Mono 700          (hero wordmark lockup)
   Layout values are taken from the guiding mockups in
   "Guiding Images For Ai" and expressed fluidly so the proportions hold.
   ===================================================================== */

:root {
  --black: #000;
  --white: #fff;
  --gold: #ceb479;

  /* The whole site runs black, nav included. Everything reads from these. */
  --surface: #000;         /* page and section background */
  --ink: #fff;             /* body text on --surface */
  --ink-soft: #c6c6c6;     /* secondary copy */
  --ink-faint: #9a9a9a;    /* captions, roles, meta */
  --line: #2b2b2b;         /* rules and borders */
  --card: #0d0d0d;         /* raised panel on --surface */

  /* on black, gold needs no taking down */
  --gold-ink: #ceb479;     /* gold used as text on --surface */

  /* golds for the travelling highlight — darker than --gold on purpose */
  --sheen-gold: #b8963f;
  --sheen-gold-dark: #8a6a2f;
  --sheen-gold-light: #f6e3a8;

  --font-ui: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mark: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* page gutter — 2.9% of width in the mock */
  --pad: clamp(20px, 2.92vw, 44px);
  /* the nav runs its own, marginally wider, so the bar's outer items sit
     just inside the page gutter on both sides */
  --nav-gutter: clamp(20px, 3.5vw, 54px);
  /* nav bar height, and the logo that sits at ~half of it */
  --nav-h: clamp(64px, 10.8vw, 156px);
  --logo-h: clamp(34px, 5.28vw, 76px);

  /* hero lockup width — everything inside it is a ratio of this */
  --lock: clamp(280px, 58vw, 840px);

  --bar: clamp(2px, 0.28vw, 4px);   /* hamburger line thickness */

  /* metallic sheen that travels across the hero lockup */
  --sheen-band: linear-gradient(
    105deg,
    transparent 38%,
    rgba(0, 0, 0, 0.32) 44%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.32) 56%,
    transparent 62%
  );
  --sheen-time: 6.5s;
  /* near-linear: a highlight sliding over metal shouldn't whip through the middle */
  --sheen-ease: cubic-bezier(0.42, 0.12, 0.58, 0.88);

  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --menu-speed: 0.55s;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Visually hidden but available to screen readers & search engines. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* =====================================================================
   NAV
   ===================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--nav-h);
  background: var(--black);
}

/* The mark, alone, first thing in the bar. No wordmark beside it: the
   shield already sets "AD ADVISORS" inside itself, so a text lockup next to
   it said the name twice. --logo-h was cut for a square emblem at about
   half the bar's height; the shield is portrait (roughly 4:5) and is now
   carrying the brand on its own, so it runs larger than that. */
.nav-mark {
  flex: none;
  display: flex;
  align-items: center;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.nav-mark:hover { opacity: 0.75; }

.nav-emblem {
  flex: none;
  width: auto;
  height: calc(var(--logo-h) * 1.3);
}

.nav-inner {
  height: 100%;
  width: 100%;
  /* Symmetric, and a shade wider than --pad so the outer items sit just
     inside the page gutter rather than hard against it. The bar no longer
     follows the 1280 content column — the wordmark answers to this gutter
     instead, which is why it starts left of the copy below it. */
  padding: 0 var(--nav-gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.78vw, 40px);
}

/* ---- primary links ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
  margin-right: auto;
}

.nav-links a {
  font-size: clamp(12px, 1.02vw, 16px);
  line-height: 1;
  padding: 6px 0;
  color: var(--white);
  transition: opacity 0.2s ease;
}
.nav-links a:hover { opacity: 0.55; }

/* links step aside while the full menu is open (as in the mockup) */
.nav.is-open .nav-links {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.1vw, 30px);
}

/* ---- Contact Us ---- */
.btn-contact {
  flex: none;
  background: var(--gold);
  color: var(--black);
  font-size: clamp(13px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1;
  padding: 0.48em 0.72em;
  transition: background 0.2s ease;
}
.btn-contact:hover { background: #ddc79a; }

/* ---- icon button (hamburger) ---- */
.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(30px, 3.1vw, 44px);
  height: clamp(30px, 3.1vw, 44px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
}

.menu-toggle { width: clamp(30px, 3.6vw, 52px); }

/* ---- hamburger → X ---- */
.burger {
  position: relative;
  display: block;
  width: clamp(22px, 3.3vw, 48px);
  height: clamp(16px, 2.36vw, 34px);
}
.burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bar);
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.2s ease 0.1s, top 0.3s var(--ease);
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: calc(50% - var(--bar) / 2); }
.burger i:nth-child(3) { top: calc(100% - var(--bar)); }

.menu-toggle[aria-expanded="true"] .burger i:nth-child(1) {
  top: calc(50% - var(--bar) / 2);
  transform: rotate(45deg);
  transition: top 0.3s var(--ease), transform 0.4s var(--ease) 0.15s;
}
.menu-toggle[aria-expanded="true"] .burger i:nth-child(2) {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.menu-toggle[aria-expanded="true"] .burger i:nth-child(3) {
  top: calc(50% - var(--bar) / 2);
  transform: rotate(-45deg);
  transition: top 0.3s var(--ease), transform 0.4s var(--ease) 0.15s;
}

/* =====================================================================
   FULL-SCREEN MENU
   Slides down out of the nav and takes over the whole viewport.
   ===================================================================== */

.menu {
  position: fixed;
  z-index: 50;               /* under the nav, which stays visible */
  top: var(--nav-h);
  left: 0; right: 0;
  height: calc(100dvh - var(--nav-h));
  background: var(--black);
  color: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform var(--menu-speed) var(--ease),
    visibility 0s linear var(--menu-speed);
}

.menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform var(--menu-speed) var(--ease),
    visibility 0s linear 0s;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px) 0;
  /* the mock indents the grid further than the page gutter */
  padding: clamp(20px, 3.1vw, 46px) var(--pad) 64px clamp(24px, 8.33vw, 120px);
}

/* Four columns is a desktop shape. On a phone it was already tight, and the
   Services column is longer now that it carries the three pillars — so the
   grid drops to two columns and then one, and the menu scrolls. */
@media (max-width: 900px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 40px); }
}
@media (max-width: 520px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
}

.menu-col {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}
.menu.is-open .menu-col {
  opacity: 1;
  transform: none;
}
.menu.is-open .menu-col:nth-child(1) { transition-delay: 0.18s; }
.menu.is-open .menu-col:nth-child(2) { transition-delay: 0.24s; }
.menu.is-open .menu-col:nth-child(3) { transition-delay: 0.30s; }
.menu.is-open .menu-col:nth-child(4) { transition-delay: 0.36s; }

.menu-head {
  margin: 0 0 clamp(12px, 1.35vw, 20px);
  font-size: clamp(26px, 3.1vw, 45px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
.menu-head a { transition: opacity 0.2s ease; }
.menu-head a:hover { opacity: 0.55; }

/* pillar heads inside the Services column — the three pillars are the
   architecture now, so the column is grouped rather than one flat list */
.menu-sub {
  margin: clamp(18px, 1.8vw, 30px) 0 clamp(7px, 0.7vw, 11px);
  color: var(--gold-ink);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.menu-sub:first-of-type { margin-top: clamp(12px, 1.2vw, 20px); }
.menu-sub a { transition: opacity 0.2s ease; }
.menu-sub a:hover { opacity: 0.6; }

.menu-list {
  margin: 0;
  padding: 0 0 0 clamp(4px, 0.7vw, 10px);
  list-style: none;
}
.menu-list li + li { margin-top: clamp(7px, 0.78vw, 11px); }
.menu-list a {
  display: inline-block;
  font-size: clamp(12px, 0.97vw, 14px);
  font-weight: 700;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}
.menu-list a:hover { opacity: 0.5; }

/* =====================================================================
   HERO
   ===================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  /* the mock centres the block in the viewport; here it also has to clear
     the fixed nav, so that height folds into the top padding */
  padding: calc(var(--nav-h) + clamp(24px, 5vw, 72px)) clamp(20px, 5vw, 96px)
           clamp(24px, 5vw, 72px);
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* keep hero-wash's multiply blend from reaching the page behind it */
  isolation: isolate;
}

/* ---------------------------------------------------------------------
   Hero video
   Four layers, back to front: the clip, a left-to-right grey-to-white
   wash that multiplies over it so the type side stays dark enough to
   read, a flat veil to settle the whole thing, then the content.
   --------------------------------------------------------------------- */

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(
    to right,
    #2e2e2e 0%, #3d3d3d 16%, #6b6b6b 34%,
    #9e9e9e 50%, #d4d4d4 68%, #ffffff 82%, #ffffff 100%
  );
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.34);
}

.hero-content {
  position: relative;
  z-index: 3;
}

/* ---------------------------------------------------------------------
   Hero
   Eyebrow in gold with a sheen that runs continuously across the
   letterforms, so the type reads as polished metal rather than flat
   paint. The gradient is clipped to the glyphs; what animates is its
   background-position, not the colour.

   Its golds are deliberately darker than the site's --gold (#ceb479),
   which the sheen needs in order to have anything to travel over. They
   are scoped here rather than redefined at :root, where --gold also
   drives buttons, rules and the Circle portrait rings.
   --------------------------------------------------------------------- */

.hero {
  --hero-gold: #b8963f;
  --hero-gold-dark: #8a6a2f;
  --hero-gold-light: #f6e3a8;
}

.hero-eyebrow {
  margin: 0 0 clamp(10px, 1.4vw, 22px);
  font-size: clamp(13px, 1.5vw, 24px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;

  background-image: linear-gradient(
    100deg,
    var(--hero-gold-dark) 0%,
    var(--hero-gold-dark) 32%,
    var(--hero-gold) 42%,
    var(--hero-gold-light) 50%,
    var(--hero-gold) 58%,
    var(--hero-gold-dark) 68%,
    var(--hero-gold-dark) 100%
  );
  background-size: 300% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation:
    reveal-phrase 0.72s cubic-bezier(0.22, 0.68, 0.24, 1) 0.12s forwards,
    gold-sheen 8.5s linear 0.6s infinite;
  opacity: 0;
}

@keyframes gold-sheen {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* ---------------------------------------------------------------------
   Page titles carry the hero's travelling gold, so "Our Services",
   "Our Work" and the rest read as the same piece as the landing.
   Same gradient, same 8.5s linear loop as .hero-eyebrow — what moves is
   background-position, not the colour.
   --------------------------------------------------------------------- */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .phero h1,
  .page-title,
  .bio-name {
    background-image: linear-gradient(
      100deg,
      var(--sheen-gold-dark) 0%,
      var(--sheen-gold-dark) 32%,
      var(--sheen-gold) 42%,
      var(--sheen-gold-light) 50%,
      var(--sheen-gold) 58%,
      var(--sheen-gold-dark) 68%,
      var(--sheen-gold-dark) 100%
    );
    background-size: 300% 100%;
    background-position: 150% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gold-sheen 8.5s linear infinite;
  }
}

/* Locked to exactly two lines: each line is its own nowrap block and the
   size is driven by vw, so the pair scales together instead of reflowing
   to three. */
.hero-head {
  margin: 0;
  color: var(--white);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.hero-line {
  display: block;
  white-space: nowrap;
}

/* Each element rises a fraction of its own size and resolves out of a
   soft blur, staggered by --i so the eyebrow lands first. */
.reveal {
  opacity: 0;
  transform: translateY(0.22em);
  filter: blur(6px);
  animation: reveal-phrase 0.72s cubic-bezier(0.22, 0.68, 0.24, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.14s + 0.12s);
}

@keyframes reveal-phrase {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* =====================================================================
   SECTION TWO — "We've sat in the chair"  [UNUSED]
   The section was pulled from the landing page on 2026-08-28. The rules
   are kept so it can be dropped back in as-is; nothing renders them now.

   Original note:
   "We've sat in the chair"
   The headline rises line by line and the copy fades up behind it, once,
   when the section first scrolls into view.
   ===================================================================== */

.chair {
  background: var(--surface);
  /* headline only now — the copy that needed the taller frame has gone */
  padding: clamp(56px, 6.5vw, 104px) 0 clamp(52px, 6vw, 96px);
}

.chair-inner {
  width: 100%;
  /* 1280 like .wrap, .circle-inner and .nav-inner — one column governs the
     whole site, so the first nav link sits on the same left edge as the copy */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.chair-head {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(27px, 3.85vw, 62px);
  line-height: 1.18;
  letter-spacing: -0.016em;
}

/* each line is masked so it can rise into view on scroll */
.chair-line {
  display: block;
  overflow: hidden;
}
.chair-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.72s cubic-bezier(0.22, 0.68, 0.24, 1);
}
/* the brand phrase is the payoff of the three lines, so it carries the gold */
.chair-line em { font-style: normal; color: var(--gold-ink); }

.chair.is-in .chair-line > span { transform: translateY(0); }
.chair.is-in .chair-line:nth-child(2) > span { transition-delay: 0.09s; }
.chair.is-in .chair-line:nth-child(3) > span { transition-delay: 0.18s; }

/* =====================================================================
   THE CIRCLE — leadership roster
   A three-up roster: circular portrait ringed in gold, then name, role,
   one line of credential, and a read-more. Rows are left-packed, so a
   short final row sits under the first two columns rather than centring.
   ===================================================================== */

/* The mockup was a standalone page, so its top padding cleared the fixed
   nav. Here the section sits mid-page between two rules — no nav to clear. */
.circle {
  background: var(--surface);
  padding: clamp(40px, 5vw, 88px) 0 clamp(64px, 8vw, 120px);
}

.circle-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad);
  /* statement holds the left rail, roster fills the right — the portraits
     shrink to suit, so all five sit in view instead of running down the page */
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: start;
}


.circle-head {
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* the statement under the head; .lede supplies size and colour */
.circle .lede {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(16px, 1.25vw, 20px);
}

.circle-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 34px);
  row-gap: clamp(28px, 3vw, 46px);
}

.circle-card { height: 100%; }

.circle-card > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
}

/* pin the link to the foot of the card so a row shares one baseline */
.circle-more { margin-top: auto; }

/* ---- portrait: square box, circular mask, hairline gold ring ---- */
.circle-photo {
  position: relative;
  display: block;
  width: min(100%, 168px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: clamp(12px, 1.2vw, 18px);
}
.circle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the ring sits above the photo so it never gets clipped by overflow */
.circle-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  pointer-events: none;
  transition: border-color 0.2s ease;
}

.circle-name,
.circle-role,
.circle-note {
  display: block;
  font-weight: 700;
  line-height: 1.32;
}

.circle-name { font-size: clamp(14px, 1.05vw, 17px); }
.circle-role { font-size: clamp(14px, 1.05vw, 17px); }

.circle-note {
  margin-top: 0.7em;
  font-size: clamp(13px, 0.92vw, 15px);
  font-weight: 400;
  max-width: 24ch;
}

.circle-more {
  display: inline-block;
  padding-top: clamp(10px, 1vw, 16px);
  font-size: clamp(12px, 0.88vw, 14px);
  font-weight: 400;
  line-height: 1;
}
.circle-more i {
  font-style: normal;
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.2s var(--ease);
}

.circle-card > a:hover .circle-more i { transform: translateX(5px); }
.circle-card > a:hover .circle-photo::after { border-color: var(--white); }

.circle-card > a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

/* The roster sits well below the fold, so hold the base .reveal — which runs
   on load for the hero — until the section scrolls into view. */
.circle .reveal { animation: none; }

.circle.is-in .reveal {
  animation: reveal-phrase 0.72s cubic-bezier(0.22, 0.68, 0.24, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.14s + 0.12s);
}

.lockup {
  width: var(--lock);
  display: flex;
  align-items: center;
  gap: calc(var(--lock) * 0.086);
}

.lockup-mark {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--lock) * 0.298);
}
.lockup-mark img { width: 100%; height: auto; }

.lockup-type {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: calc(var(--lock) * 0.1234);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------
   Metallic sheen
   One highlight travels across the whole lockup. Both halves share a
   coordinate frame measured in --lock, so the emblem and the wordmark
   read as a single piece of metal catching the light. The wordmark sits
   38.4% along the lockup, hence --sheen-x.
   --------------------------------------------------------------------- */

.lockup-mark-sheen {
  position: absolute;
  inset: 0;
  filter: brightness(1.85) saturate(0.72);
  -webkit-mask-image: var(--sheen-band);
          mask-image: var(--sheen-band);
  -webkit-mask-size: calc(var(--lock) * 1.4) 100%;
          mask-size: calc(var(--lock) * 1.4) 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--lock) * -1.4) 0;
          mask-position: calc(var(--lock) * -1.4) 0;
  animation: sheen-mark var(--sheen-time) var(--sheen-ease) infinite;
  pointer-events: none;
}

@keyframes sheen-mark {
  0%        { -webkit-mask-position: calc(var(--lock) * -1.4) 0;
                      mask-position: calc(var(--lock) * -1.4) 0; }
  45%, 100% { -webkit-mask-position: calc(var(--lock) * 1.05) 0;
                      mask-position: calc(var(--lock) * 1.05) 0; }
}

/* the wordmark is painted through the same band, clipped to the glyphs */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lockup-type {
    --sheen-x: calc(var(--lock) * -0.384);
    background-image:
      linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 250, 236, 0.30) 44%,
        rgba(255, 253, 246, 0.95) 50%,
        rgba(255, 250, 236, 0.30) 56%,
        transparent 62%
      ),
      linear-gradient(var(--gold), var(--gold));
    background-size: calc(var(--lock) * 1.4) 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: calc(var(--lock) * -1.4 + var(--sheen-x)) 0, 0 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: sheen-type var(--sheen-time) var(--sheen-ease) infinite;
  }
}

@keyframes sheen-type {
  0%        { background-position: calc(var(--lock) * -1.4 + var(--sheen-x)) 0, 0 0; }
  45%, 100% { background-position: calc(var(--lock) * 1.05 + var(--sheen-x)) 0, 0 0; }
}

.lockup-line {
  display: block;
  line-height: 0.87;
}

.lockup-tag {
  display: block;
  margin-top: 0.19em;
  font-size: 0.466em;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* the inline links give way to the hamburger on narrow screens */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* below the split the statement sits back on top and stops sticking */
  .circle-inner { grid-template-columns: minmax(0, 1fr); }
  .circle .lede { max-width: 52ch; }
  .circle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  :root { --lock: min(86vw, 420px); }

  .menu-grid {
    grid-template-columns: 1fr;
    padding-left: var(--pad);
  }
  .lockup {
    flex-direction: column;
    gap: 22px;
    text-align: center;
  }
  .lockup-mark { width: calc(var(--lock) * 0.42); }
  .lockup-type {
    font-size: calc(var(--lock) * 0.175);
    /* stacked, so the wordmark shares the emblem's left edge */
    --sheen-x: 0px;
  }


  .circle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 4vw, 22px);
  }
  .circle-photo { width: min(100%, 132px); }
  .circle-note { max-width: none; }
  .circle .lede { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
  /* park the sheen rather than flicker it — the logo just sits in flat gold */
  .lockup-mark-sheen { animation: none !important; opacity: 0; }
  .lockup-type { animation: none !important; }

  /* the hero is the page's first impression — show it, don't animate it */
  .reveal,
  .hero-eyebrow {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  /* park the sheen; the gold type just sits flat */
  .hero-eyebrow {
    background: none;
    color: var(--hero-gold);
    -webkit-text-fill-color: var(--hero-gold);
  }
  .phero h1,
  .page-title,
  .bio-name {
    animation: none !important;
    background: none;
    color: var(--sheen-gold);
    -webkit-text-fill-color: var(--sheen-gold);
  }

  /* the second hero must never be left hidden behind a scroll trigger */
  .chair-line > span { transform: none !important; }

  /* hold the hero on its poster frame instead of looping the clip */
  .hero-video { display: none; }
  .hero {
    background-image: url("../assets/img/hero-poster.jpg");
    background-size: cover;
    background-position: center;
  }
}

/* =====================================================================
   INTERIOR PAGES
   Everything below is for the pages beyond the landing hero. The nav,
   menu and lockup above are unchanged.
   ===================================================================== */

.page { background: var(--surface); }

/* About and bio pages open on content, not a hero, so they take over the
   nav offset .phero used to provide. */
.page--flush { padding-top: var(--nav-h); }


/* ---- page hero: art with the title over it ---- */
.phero {
  position: relative;
  min-height: clamp(230px, 25vw, 340px);
  margin-top: var(--nav-h);
  display: grid;
  align-items: end;
  background: var(--black);
  overflow: hidden;
}
.phero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.phero:not(.phero--service)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 42%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.phero-in {
  position: relative;
  z-index: 1;                     /* above the scrim, which paints last */
  width: 100%;
  padding: var(--pad);
  padding-bottom: clamp(28px, 3.4vw, 52px);
}
.phero h1 {
  margin: 0;
  color: var(--gold);   /* fallback where background-clip: text is unsupported */
  font-size: clamp(32px, 5.2vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.phero .eyebrow {
  margin: 0 0 clamp(8px, 1vw, 16px);
  color: var(--white);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}
/* no-art variant */
.phero--plain { min-height: clamp(220px, 26vw, 360px); }

/* ---------------------------------------------------------------------
   Service page banner
   A short, wide crop rather than a tall hero — the old 560px pushed every
   page's content below the fold. Height is fixed so the photo is cropped,
   never letterboxed or scaled down.

   Legibility comes from a black-to-white gradient multiplied over the
   photo: the left stays dark enough to carry text while the right keeps
   the picture at full strength. That replaces the flat opacity: 0.55 dim,
   which washed the whole image out and still left the text fighting it.
   --------------------------------------------------------------------- */
.phero--service {
  height: clamp(340px, 26vw, 400px);
  min-height: 0;                 /* the base rule's min-height would win */
  align-items: center;           /* base aligns to end; this centres */
}

.phero--service img {
  object-fit: cover;
  object-position: center;       /* keep the subject off the crop edges */
  opacity: 1;                    /* the gradient does the darkening now */
}

.phero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--black), var(--white));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* same container and gutters as .wrap, so the text lines up with the
   page content underneath it */
.phero--service .phero-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* held to the dark half so it never runs into the lighter right side */
.phero-text { max-width: 45%; }

.phero--service h1 {
  font-size: clamp(30px, 4.1vw, 58px);
  max-width: none;
}

.phero-sub {
  margin: clamp(10px, 1.1vw, 18px) 0 0;
  color: #f1eee8;                /* off-white, not pure white */
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 860px) {
  /* the dark half is too narrow to hold a paragraph on a phone */
  .phero-text { max-width: none; }
}

@media (max-width: 560px) {
  .phero--service { height: 220px; }
  .phero--service h1 { font-size: clamp(24px, 7vw, 32px); }
  .phero-sub { font-size: 15px; }
}

/* ---- generic content shell ---- */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 6.5vw, 104px) var(--pad);
}
.wrap--tight { max-width: 860px; }

.section-title {
  margin: 0 0 clamp(18px, 2.2vw, 34px);
  font-size: clamp(26px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lede {
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.prose p {
  margin: 0 0 1.15em;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.72;
  color: var(--ink-soft);
}
.prose p:last-child { margin-bottom: 0; }

p.bio-eyebrow {
  margin: 0 0 clamp(8px, 1vw, 14px);
  color: var(--gold-ink);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-title,
.bio-name {
  margin: 0 0 clamp(16px, 1.8vw, 28px);
  color: var(--ink);
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* the name heads the text column, so the portrait aligns to its cap height */
.bio-name { margin-top: -0.14em; }

/* ---- rule between sections ---- */

/* ---- checklist ("What We Can Do") ---- */
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.checks li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: clamp(12px, 1.1vw, 17px) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(15px, 1.15vw, 18px);
}
.checks li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: translateY(-2px);
}

/* ---- inline "read more" link ---- */
/* Used inside prose, where nothing else marks it as clickable. The boxed
   .card .more is a span and outranks this, so cards are untouched. */
a.more {
  display: inline-block;
  color: var(--gold-ink);
  font-weight: 700;
  transition: color 0.25s ease;
}
a.more i { font-style: normal; display: inline-block; margin-left: 0.4em;
           transition: transform 0.25s var(--ease); }
a.more:hover, a.more:focus-visible { color: var(--white); }
a.more:hover i, a.more:focus-visible i { transform: translateX(5px); }

/* ---- card grids ---- */
.grid {
  display: grid;
  gap: clamp(18px, 2.2vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* No box: the card sits on the page and the hover does the framing. Shared
   by the Services grid and the landing rail so the same six services do not
   read as two different components. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
  padding: clamp(18px, 1.8vw, 28px) clamp(14px, 1.4vw, 22px) clamp(22px, 2.2vw, 34px);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}

/* A hairline above each card in the Services grid. Without the boxes, nine
   blocks of text in four columns gave the eye nothing to tell one service
   from the next — this marks where each starts. Scoped to .grid, so the
   landing rail stays bare. Low-opacity white rather than --line: it reads as
   structure at this scale instead of as a stray stroke. */
.grid .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(14px, 1.4vw, 22px);
  right: clamp(14px, 1.4vw, 22px);
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.4s var(--ease), height 0.4s var(--ease);
}

a.card:hover,
a.card:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
  outline: none;
}

.grid a.card:hover::before,
.grid a.card:focus-visible::before {
  background: var(--gold);
  height: 2px;
}
a.card:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
a.card:active { transform: translateY(-1px); }

.card h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  transition: transform 0.4s var(--ease);
}
.card p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

a.card:hover h3, a.card:focus-visible h3 { transform: translateX(4px); }
a.card:hover p,  a.card:focus-visible p  { color: var(--white); transform: translateX(4px); }
.card .more {
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: transform 0.4s var(--ease);
}
a.card:hover .more, a.card:focus-visible .more { transform: translateX(4px); }

/* ---- team ---- */
.team { display: grid; gap: clamp(22px, 2.6vw, 40px);
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* The photos stay in colour. On hover a gold stroke closes in from outside
   the frame and a low glow lifts off it — the outline is drawn clear of the
   photo and travels inward, so the motion is the stroke arriving rather than
   a border switching on. Same gold as the Circle's rings and the service
   cards' borders; outline rather than border so nothing reflows. */
.member img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  background: #1a1a1a;
  outline: 1px solid transparent;
  outline-offset: 14px;
  transition:
    outline-color 0.45s var(--ease),
    outline-offset 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}

a.member:hover img,
a.member:focus-visible img {
  outline-color: var(--gold);
  outline-offset: 0;
  /* a wash around the frame rather than a drop shadow — on black a purely
     downward shadow reads as nothing at all */
  box-shadow:
    0 0 26px -4px rgba(206, 180, 121, 0.30),
    0 16px 44px -18px rgba(206, 180, 121, 0.75);
}

a.member { text-decoration: none; color: inherit; }
a.member:focus-visible { outline: none; }   /* the photo carries the focus ring */

.member h3 {
  margin: 16px 0 4px;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  transition: color 0.3s ease;
}
a.member:hover h3,
a.member:focus-visible h3 { color: var(--gold); }

.member .role { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-faint); }

/* one line of credential under the role — the roster is the pitch, so a
   name and a title alone were leaving the case unmade on this page */
.member-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---- bio page ---- */
.bio { display: grid; gap: clamp(26px, 3.4vw, 56px); grid-template-columns: 1fr;
       align-items: start; }
@media (min-width: 860px) { .bio { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
/* on a phone the portrait shouldn't run the full width before any copy */
@media (max-width: 859px) { .bio-portrait { max-width: 300px; } }
.bio-portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; }
.bio-roles { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-faint); }


/* =====================================================================
   RAIL — the shared carousel behind The Circle and How We Help
   One horizontal scroller. Touch gets native momentum swipe and snapping;
   desktop gets the arrow. Items past the edge fade under a mask rather
   than being clipped, so it reads as "there is more" without a scrollbar.
   ===================================================================== */

.rail { position: relative; }

.rail-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;
  /* room for the fade, so the last card can still reach the left edge */
  padding-right: clamp(40px, 6vw, 96px);
  /* the track is a flex row now, so the grid rules it inherited go quiet */
  grid-template-columns: none;
}
.rail-track::-webkit-scrollbar { display: none; }

.rail-track > * {
  scroll-snap-align: start;
  flex: 0 0 var(--rail-item, calc((100% - 2 * var(--rail-gap, 24px)) / 3));
  min-width: 0;
}

/* the fade only belongs there while the rail actually overflows */
.rail.is-scrollable .rail-track {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%);
}
.rail.is-end .rail-track {
  -webkit-mask-image: none;
          mask-image: none;
}

/* ---- the arrow ------------------------------------------------------ */
.rail-next {
  position: absolute;
  top: var(--rail-arrow-top, 84px);
  right: 0;
  z-index: 4;
  display: none;                         /* shown only when there is more */
  place-items: center;
  width: clamp(42px, 3.6vw, 54px);
  height: clamp(42px, 3.6vw, 54px);
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--surface);
  color: var(--gold-ink);
  cursor: pointer;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease),
    box-shadow 0.35s var(--ease);
}

.rail.is-scrollable .rail-next { display: grid; }

.rail-next svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* a slow pulse says "there is more this way" until it is first used */
.rail-next[data-idle] { animation: rail-pulse 2.4s ease-in-out infinite; }

@keyframes rail-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(206, 180, 121, 0.55); }
  55%      { box-shadow: 0 0 0 12px rgba(206, 180, 121, 0); }
}

.rail-next:hover,
.rail-next:focus-visible {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  transform: translateX(3px);
  box-shadow: 0 0 26px -4px rgba(206, 180, 121, 0.6);
}

.rail-next:active { transform: translateX(3px) scale(0.94); }

/* ---- how many fit ---------------------------------------------------- */
.circle-grid.rail-track { --rail-gap: clamp(18px, 2vw, 34px); }
.grid.rail-track        { --rail-gap: clamp(18px, 2vw, 30px); gap: var(--rail-gap); }

.circle-grid.rail-track { --rail-arrow-top: clamp(30px, 3.4vw, 52px); }
.grid.rail-track        { --rail-arrow-top: -clamp(0px, 0vw, 0px); }

.rail .grid.rail-track  { --rail-item: calc((100% - 2 * var(--rail-gap)) / 3); }

@media (max-width: 900px) {
  /* two portraits on a phone, one service card — a card is all copy */
  .circle-grid.rail-track { --rail-item: calc((100% - 1 * var(--rail-gap)) / 2); }
  .rail .grid.rail-track  { --rail-item: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-track { scroll-behavior: auto; }
  .rail-next[data-idle] { animation: none; }
}



/* ---------------------------------------------------------------------
   How We Help
   Scoped to the rail, so the boxed .card the Services page uses is left
   alone. No border, no panel, no rule — the cards sit on the page and the
   hover does all the framing.
   --------------------------------------------------------------------- */

.rail .card h3 { display: flex; align-items: baseline; gap: 10px; }

/* the arrow takes no width until it is wanted, so nothing reflows */
.card-arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-8px);
  color: var(--gold);
  font-size: 0.85em;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.rail a.card:hover .card-arrow,
.rail a.card:focus-visible .card-arrow { opacity: 1; transform: translateX(0); }



@media (prefers-reduced-motion: reduce) {
  .rail .card, .rail .card h3, .rail .card p,
  .card-arrow, .cta--metal, .cta-arrow {
    transition: none !important;
    transform: none !important;
  }
  .card-arrow { opacity: 1; }
  .cta--metal {
    animation: none !important;
    background-image: none;
    background-color: var(--sheen-gold);
  }
}

/* ---------------------------------------------------------------------
   Linked press article
   Its siblings on this page are plain text, so this one has to look
   clickable before anyone hovers it: a gold rule down the side and a
   "Read on ESPN" line carry that at rest. The hover lights the rule,
   turns the headline gold and walks the arrow — the same gold language
   as the team portraits and the Our Work covers.
   --------------------------------------------------------------------- */

a.press-article {
  display: block;
  color: inherit;
  text-decoration: none;
  padding-left: clamp(16px, 1.6vw, 26px);
  border-left: 2px solid var(--gold);
  transition: transform 0.35s var(--ease), border-color 0.3s ease;
}

a.press-article h3 { transition: color 0.3s ease; }

.press-cite {
  display: inline-block;
  margin-top: clamp(12px, 1.2vw, 18px);
  color: var(--gold);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.press-cite i {
  font-style: normal;
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 0.25s var(--ease);
}

a.press-article:hover,
a.press-article:focus-visible {
  transform: translateX(4px);
  border-left-color: var(--gold-light, #f6e3a8);
}

a.press-article:hover h3,
a.press-article:focus-visible h3 { color: var(--gold); }
a.press-article:hover .press-cite i,
a.press-article:focus-visible .press-cite i { transform: translateX(6px); }

a.press-article:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }

/* ---------------------------------------------------------------------
   Press strip — the mastheads AD Advisors has appeared in, sat at the head
   of As Seen In. The source logos come in on different grounds (ESPN red on
   white, D1.ticker white and red on a dark field), so they are keyed to
   white marks on transparent and shown as one set. No divider under it;
   the strip's own space does the separating.
   --------------------------------------------------------------------- */

.press-strip {
  padding: clamp(38px, 4.4vw, 72px) 0 clamp(34px, 4vw, 64px);
}

/* .wrap brings its own generous block padding; inside the strip that stacks
   with the strip's own and leaves the logos marooned */
.press-strip .wrap { padding-block: 0; }

.press-logos {
  list-style: none;
  margin: clamp(18px, 2vw, 30px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

.press-logo img {
  display: block;
  width: auto;
  height: var(--mark-h, clamp(36px, 4.7vw, 70px));
  opacity: 0.82;
  transition: opacity 0.3s ease;
}

.press-logo:hover img { opacity: 1; }

/* matched by eye, not by measure — ESPN's block letterforms carry far more
   weight per pixel of height than D1.ticker's lighter serif */
/* Matched by eye and sized so all four sit on one line at full width.
   SBJ is a stacked lockup and carries more height than a wordmark; Front
   Office Sports is a long thin single line and needs far less; ESPN's block
   letterforms weigh more per pixel than D1.ticker's lighter serif. */
.press-logo--espn { --mark-h: clamp(22px, 2.7vw, 40px); }
.press-logo--d1   { --mark-h: clamp(25px, 3.1vw, 45px); }
.press-logo--sbj  { --mark-h: clamp(27px, 3.3vw, 48px); }
.press-logo--fos  { --mark-h: clamp(11px, 1.3vw, 19px); }

@media (max-width: 560px) {
  .press-logos { gap: clamp(26px, 8vw, 40px); }
}

/* ---- press / white-paper items ---- */
.press { display: grid; gap: clamp(26px, 3.2vw, 48px); }

/* Written to work as <article> now and <a> once the papers have somewhere to
   point — the highlight hangs off .press-item, not off :link. */
.press-item {
  display: grid;
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s var(--ease);
}

@media (min-width: 780px) { .press-item { grid-template-columns: 260px 1fr; } }

.press-item img {
  width: 100%;
  border: 1px solid var(--line);
  /* the stroke sits clear of the cover and closes in, the same move as the
     team portraits — outline so it stays out of layout and nothing reflows */
  outline: 1px solid transparent;
  outline-offset: 10px;
  transition:
    outline-color 0.4s var(--ease),
    outline-offset 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.press-item h3 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.press-item:hover img,
.press-item:focus-visible img {
  outline-color: var(--gold);
  outline-offset: 0;
  border-color: var(--gold);
  box-shadow:
    0 0 26px -4px rgba(206, 180, 121, 0.28),
    0 16px 44px -18px rgba(206, 180, 121, 0.7);
}

.press-item:hover h3,
.press-item:focus-visible h3 { color: var(--gold); }

.press-item:hover .press-cite i,
.press-item:focus-visible .press-cite i { transform: translateX(6px); }

a.press-item:hover { transform: translateY(-3px); }
a.press-item:focus-visible { outline: none; }
.credit { margin: 8px 0 0; font-size: 12px; color: #8a8a8a; letter-spacing: 0.04em; }

/* ---- pill list (What Sets Us Apart) ---- */
/* ---------------------------------------------------------------------
   What Sets Us Apart
   Bullets, not boxes. Fifteen items is too many to read as a wall of
   pills, so they run two abreast and arrive in pairs as the list scrolls
   in — each pair shares a --i, which is what makes them land two at a
   time rather than one by one.
   --------------------------------------------------------------------- */

.pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(11px, 1.1vw, 17px) clamp(24px, 3vw, 60px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pills li {
  position: relative;
  border: 0;
  padding: 0 0 0 clamp(18px, 1.6vw, 26px);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
}

/* the same gold square the checklist uses */
.pills li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--gold);
}

.pills.is-in li {
  animation: pill-in 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 0.09s);
}

@keyframes pill-in {
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .pills { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  /* never leave the list hidden behind a scroll trigger */
  .pills li { opacity: 1; transform: none; animation: none !important; }
}

/* ---- quote ---- */
.quote { margin: 0; }
.quote blockquote {
  margin: 0 0 18px;
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.4;
  font-weight: 400;
}
.quote figcaption { font-size: 14px; color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   Let's connect band
   Photo, then a black-to-white gradient multiplied over it, then a flat
   veil, then the content — the same stack the hero video uses. Under
   multiply the black end darkens the picture and the white end leaves it
   alone, so the wash carries contrast without flattening the image.
   --------------------------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  /* keep the wash's multiply inside the section */
  isolation: isolate;
  background: var(--card);
  color: var(--ink);
}

.band-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* hold the stacked hands in frame */
  z-index: 0;
}

.band-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  /* full strength — the blend does the work, not an opacity dial */
  opacity: 1;
  /* White at the middle, black out to the edge: under multiply the centre
     keeps the photo and the edges go to black, so the huddle reads as a
     spotlight rather than a flat dimmed picture.

     An ellipse, not a circle. A circle on a band this wide is sized to the
     farthest corner, which left the top and bottom edges only a third of the
     way along the ramp — the sky along the bottom stayed bright and read as a
     pale strip under the photo.

     The radii are percentages of the whole box, not of the half.

     The dark end stops at #5a5a5a rather than #000: taken all the way to
     black the corners crushed the photo out entirely and the band read as a
     vignette with a hole in it. Holding the floor at mid-grey keeps the
     stadium and the crowd legible out to the edge while the hands still
     carry the brightest part of the frame. */
  background: radial-gradient(
    ellipse 72% 56% at 50% 50%,
    #ffffff 0%,
    #f6f6f6 34%,
    #d8d8d8 58%,
    #a2a2a2 79%,
    #5a5a5a 100%
  );
}


.band > .wrap { position: relative; z-index: 3; }
.band .section-title, .band .lede { color: var(--white); }
.band .prose p { color: #cfcfcf; }

/* The spotlight leaves the middle of the picture at full brightness, which
   is exactly where the type sits. The dark halo underneath buys the contrast
   back; the gold above it is the glow. */
.band-head {
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.04;
  max-width: 18ch;
  margin-inline: auto;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.78),
    0 0 44px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(206, 180, 121, 0.42),
    0 0 66px rgba(206, 180, 121, 0.22);
}

.band .lede {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 34px rgba(0, 0, 0, 0.5);
  max-width: 46ch;
  margin-inline: auto;
}

.cta { display: inline-block; background: var(--gold); color: var(--black);
       font-weight: 700; font-size: clamp(14px, 1.15vw, 17px); line-height: 1;
       padding: 1em 1.4em; transition: background 0.2s ease; }
.cta:hover { background: #ddc79a; }
.band .cta { background: var(--gold); color: var(--black); }
.band .cta:hover { background: #ddc79a; }

/* ---- All services: gold worked as metal -----------------------------
   Must sit after .cta and .cta:hover. Both are single-class, so on equal
   specificity source order decides — and .cta's `background` shorthand
   resets background-image, which was wiping the gradient out entirely.
   Everything here uses longhands for the same reason.
   --------------------------------------------------------------------- */

.cta--metal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #17140c;
  font-size: clamp(12px, 0.95vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--sheen-gold);
  padding: clamp(15px, 1.3vw, 22px) clamp(26px, 2.4vw, 44px);
  /* the sheen travels by moving an oversized gradient, not by animating
     colour — same trick as the hero eyebrow and the page titles */
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    var(--sheen-gold-dark) 0%,
    var(--sheen-gold-dark) 30%,
    var(--sheen-gold) 41%,
    var(--sheen-gold-light) 50%,
    var(--sheen-gold) 59%,
    var(--sheen-gold-dark) 70%,
    var(--sheen-gold-dark) 100%
  );
  background-size: 300% 100%;
  background-position: 150% 0;
  animation: gold-sheen 8.5s linear infinite;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.cta-arrow { display: inline-block; transition: transform 0.35s var(--ease); }

/* Hover restates the background longhands so .cta:hover's shorthand cannot
   flatten it, and deliberately leaves animation-duration alone: retiming a
   running animation makes the sheen jump to a new position mid-sweep. */
.cta--metal:hover,
.cta--metal:focus-visible {
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    var(--sheen-gold-dark) 0%,
    var(--sheen-gold-dark) 30%,
    var(--sheen-gold) 41%,
    var(--sheen-gold-light) 50%,
    var(--sheen-gold) 59%,
    var(--sheen-gold-dark) 70%,
    var(--sheen-gold-dark) 100%
  );
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--sheen-gold-light), 0 12px 30px -14px rgba(206, 180, 121, 0.8);
  outline: none;
}

.cta--metal:hover .cta-arrow,
.cta--metal:focus-visible .cta-arrow { transform: translateX(5px); }
.cta--metal:focus-visible { box-shadow: 0 0 0 2px var(--sheen-gold-light); }
.cta--metal:active { transform: translateY(-1px); }

/* Same travelling highlight as the hero eyebrow and the page titles, run
   across the button's gold fill instead of clipped to glyphs. */
.cta--glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 rgba(206, 180, 121, 0);
  transition: background 0.2s ease, box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.cta--glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  background-size: 300% 100%;
  background-position: 150% 0;
  animation: gold-sheen 8.5s linear infinite;
}

.cta--glow:hover,
.cta--glow:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 30px -2px rgba(206, 180, 121, 0.55),
    0 18px 40px -16px rgba(206, 180, 121, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .cta--glow::after { animation: none !important; opacity: 0; }
}

/* ---- contact ---- */
.contact-grid { display: grid; gap: clamp(28px, 3.4vw, 56px); }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
              text-transform: uppercase; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  font: inherit; font-size: 16px; background: var(--card); color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.detail { margin: 0 0 22px; }
.detail dt { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a6a; }
.detail dd { margin: 5px 0 0; font-size: clamp(17px, 1.5vw, 22px); }

/* ---- footer ---- */
.foot { background: var(--black); color: #bdbdbd; }
.foot-in {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(44px, 5vw, 76px) var(--pad) clamp(28px, 3vw, 44px);
  display: grid; gap: clamp(26px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.foot h4 { margin: 0 0 14px; color: var(--white); font-size: 13px; font-weight: 700;
           letter-spacing: 0.14em; text-transform: uppercase; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { margin-bottom: 9px; font-size: 15px; }
.foot a:hover { color: var(--white); }
.foot-base {
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--pad) clamp(28px, 3vw, 44px);
  font-size: 13px; color: #7d7d7d;
}

/* =====================================================================
   THE THREE PILLARS — Revenue · Operations · Performance
   The services are one platform now, not nine separate offerings, so the
   page is built as three pillars with their capabilities underneath
   rather than as a flat grid of cards. Same vocabulary as the rest of the
   site: no boxes, a hairline where a group starts, gold squares for the
   specifics, and the pillar name carried at display size in gold.
   ===================================================================== */

/* anything anchored has to clear the fixed bar */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

.pillar { background: var(--surface); }

/* A rule between pillars rather than around them — three stacked sections
   need a join, not a frame. The first one is drawn by the intro above it. */
.pillar + .pillar > .wrap { border-top: 1px solid var(--line); }

.pillar-head {
  display: grid;
  gap: clamp(10px, 1vw, 16px);
  margin-bottom: clamp(34px, 4vw, 62px);
  max-width: 62ch;
}

.pillar-index {
  margin: 0;
  color: var(--ink-faint);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.pillar-name {
  margin: 0;
  color: var(--gold-ink);
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.pillar-promise {
  margin: 0;
  font-size: clamp(19px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.pillar-lede {
  margin: clamp(4px, 0.6vw, 10px) 0 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---- capabilities under a pillar ---- */
.caps {
  display: grid;
  gap: clamp(26px, 3vw, 46px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.cap {
  position: relative;
  padding-top: clamp(18px, 1.8vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.cap h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}

.cap > p {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.cap-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }

.cap-list li {
  position: relative;
  padding-left: clamp(15px, 1.3vw, 20px);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* the same gold square the checklist and the pills use */
.cap-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--gold);
}

/* where a capability already has a page of its own, it says so */
.cap-links {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.cap-links a {
  display: inline-block;
  color: var(--gold-ink);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  transition: color 0.25s ease, transform 0.3s var(--ease);
}
.cap-links a i { font-style: normal; display: inline-block; margin-left: 0.4em;
                 transition: transform 0.25s var(--ease); }
.cap-links a:hover, .cap-links a:focus-visible { color: var(--white); }
.cap-links a:hover i, .cap-links a:focus-visible i { transform: translateX(5px); }

/* =====================================================================
   HOW WE ENGAGE — the four steps
   A numbered run, not boxes: the number sits over a hairline and the step
   hangs under it, so four of them read as one sequence.
   ===================================================================== */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(22px, 2.6vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--line);
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: clamp(8px, 0.9vw, 13px);
  color: var(--gold-ink);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.steps h3 {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.2;
}

.steps p {
  margin: 0;
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* =====================================================================
   WHERE WE'VE BEEN — the institutions behind the circle
   Set as type, not as logos: these are the places the advisors have led
   and advised, and borrowed marks would read as a client roster instead.
   The rule between items is what makes a list of names look deliberate.
   ===================================================================== */

.creds {
  margin: clamp(20px, 2.4vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.3vw, 20px) clamp(22px, 2.4vw, 38px);
}

/* Marked with the house gold square rather than separated by rules: a
   divider between items dangles at the end of every wrapped line, and this
   list wraps at almost every width. */
.creds li {
  position: relative;
  padding-left: clamp(16px, 1.4vw, 22px);
  font-size: clamp(15px, 1.35vw, 21px);
  line-height: 1.2;
  color: var(--ink);
}
.creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 6px;
  height: 6px;
  background: var(--gold);
}

.creds-note {
  margin: clamp(20px, 2.2vw, 32px) 0 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 70ch;
}

/* =====================================================================
   NOT ANOTHER CONSULTANT — how the engagement is built
   Three claims, each with the detail under it. Sits on hairlines like the
   capabilities do, so the whole Services page reads as one system.
   ===================================================================== */

.stances {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(24px, 2.8vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.stances li {
  padding-top: clamp(16px, 1.6vw, 24px);
  border-top: 1px solid var(--line);
}

.stances h3 {
  margin: 0 0 10px;
  color: var(--gold-ink);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}

.stances p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* the closing line under a section — one sentence, centred, gold */
.kicker {
  margin: clamp(30px, 3.4vw, 52px) 0 0;
  padding-top: clamp(22px, 2.4vw, 36px);
  border-top: 1px solid var(--line);
  color: var(--gold-ink);
  font-size: clamp(17px, 1.75vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

/* =====================================================================
   HOW WE HELP on the landing page — the same three pillars, as links
   ===================================================================== */

.pillar-cards {
  display: grid;
  gap: clamp(22px, 2.6vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

a.pillar-card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 26px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.pillar-card h3 {
  margin: 0 0 10px;
  color: var(--gold-ink);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease);
}

.pillar-card > p {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink);
}

.pillar-card .cap-list li { color: var(--ink-faint); }

.pillar-card .more {
  margin-top: auto;
  padding-top: clamp(16px, 1.6vw, 24px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: transform 0.4s var(--ease);
}
.pillar-card .more i { font-style: normal; display: inline-block; margin-left: 0.4em;
                       transition: transform 0.25s var(--ease); }

a.pillar-card:hover,
a.pillar-card:focus-visible {
  border-top-color: var(--gold);
  transform: translateY(-4px);
  outline: none;
}
a.pillar-card:hover h3,
a.pillar-card:focus-visible h3 { transform: translateX(4px); }
a.pillar-card:hover .more i,
a.pillar-card:focus-visible .more i { transform: translateX(5px); }
a.pillar-card:focus-visible { box-shadow: 0 0 0 2px var(--gold); }

@media (prefers-reduced-motion: reduce) {
  a.pillar-card, .pillar-card h3, .cap-links a { transition: none !important; transform: none !important; }
}

/* ---- footer mark ---- */
.foot-base {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}
.foot-emblem { flex: none; width: auto; height: clamp(26px, 2.4vw, 36px); opacity: 0.75; }