/* ==========================================================================
   West Point Advisory Group — design stylesheet

   Dark, bold, city (plan: "Custom, dark, bold, city feel. Chicago skyline and
   lakefront photography."). Ink page, silver hairlines lifted from the logo's
   compass rose, Cormorant Garamond display over Manrope text.

   Signature element: the compass tick — a brass diamond on a silver hairline
   (the logo's star point, drawn in CSS) that opens every section title.

   Tokens live in style.css section 1. Reference them with var(--token) —
   never hardcode a hex here, or Theme Options colours stop working.

   Order: base → layout → header → nav → banner → home → interior →
   components → footer → responsive → motion.
   ========================================================================== */

/* ==========================================================================
   1. Base
   ========================================================================== */

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

html {
  scroll-padding-top: calc(var(--header-height-compact) + 24px);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--color-heading);
}

h1 { font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.25rem); }
h2 { font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); font-weight: 600; }

p { margin: 0 0 1.25em; }

a {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

a:hover,
a:focus {
  color: var(--color-accent);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

figure { margin: 0; }

/* Visible keyboard focus everywhere. Do not remove without replacing it. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */

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

.section {
  position: relative;
  padding-block: clamp(72px, 9vw, 144px);
}

.section-alt {
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-rule);
}

.section-body {
  max-width: 64ch;
}

.section-body > *:last-child,
.wysiwyg-content > *:last-child {
  margin-bottom: 0;
}

.section-centered {
  text-align: center;
}

.section-centered .section-body,
.section-centered .section-title {
  margin-inline: auto;
}

.section-centered .section-title {
  max-width: 20ch;
}

.section-action {
  margin: 40px 0 0;
}

/* The compass tick: a brass diamond (::after) on a silver hairline (::before)
   opening every section and page title. */
.section-title,
.page-title {
  position: relative;
}

.section-title::before,
.page-title::before {
  content: '';
  display: block;
  width: 88px;
  height: 9px;
  margin-bottom: 28px;
  background: linear-gradient(var(--color-primary), var(--color-primary)) 18px 50% / calc(100% - 18px) 1px no-repeat;
}

.section-title::after,
.page-title::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

.section-centered .section-title::before {
  margin-inline: auto;
  width: 112px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 0 50% / calc(50% - 12px) 1px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 100% 50% / calc(50% - 12px) 1px no-repeat;
}

.section-centered .section-title::after {
  left: calc(50% - 4px);
}

/* ==========================================================================
   3. Header

   Transparent at rest over the hero video / page banner on every page; past
   80px of scroll main.js adds `.is-compact`, which paints it ink and shrinks
   it. The logo is the reversed cut of the client's option #10.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(7, 9, 12, 0.75), rgba(7, 9, 12, 0));
  transition: background-color 400ms var(--ease-out), height 400ms var(--ease-out),
    box-shadow 400ms var(--ease-out);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.site-logo a {
  display: block;
}

.site-logo img {
  width: auto;
  height: 72px;
  max-width: 62vw;
  transition: height 400ms var(--ease-out);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header.is-compact {
  height: var(--header-height-compact);
  background: rgba(11, 15, 20, 0.94);
  box-shadow: 0 1px 0 var(--color-rule);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header.is-compact {
    background: rgba(11, 15, 20, 0.82);
    backdrop-filter: blur(14px);
  }
}

.site-header.is-compact .site-logo img {
  height: 52px;
}

.has-banner .site-inner {
  padding-top: 0;
}

/* ==========================================================================
   4. Navigation
   ========================================================================== */

.main-nav .nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav .nav-menu > li {
  position: relative;
}

.main-nav .nav-menu a {
  display: block;
  padding-block: 8px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.main-nav .nav-menu > li > a::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 6px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}

.main-nav .nav-menu > li:hover > a::after,
.main-nav .nav-menu > li:focus-within > a::after,
.main-nav .nav-menu > li.current-menu-item > a::after {
  transform: scaleX(1);
}

.main-nav .nav-menu a:hover,
.main-nav .nav-menu a:focus {
  color: var(--color-white);
}

.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--color-secondary);
  border: 1px solid var(--color-rule);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 200ms ease-out;
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.main-nav .sub-menu a {
  padding: 8px 20px;
}

.header-cta {
  padding: 10px 20px;
  border: 1px solid var(--color-primary);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.header-cta:hover,
.header-cta:focus {
  background: var(--color-white);
  color: var(--color-bg);
}

/* Hamburger. */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hamburger-box {
  position: relative;
  display: block;
  width: 28px;
  height: 18px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-white);
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.hamburger-inner { top: 8px; }
.hamburger-inner::before { content: ''; top: -8px; }
.hamburger-inner::after { content: ''; top: 8px; }

.hamburger[aria-expanded='true'] .hamburger-inner { transform: rotate(45deg); }
.hamburger[aria-expanded='true'] .hamburger-inner::before { opacity: 0; }
.hamburger[aria-expanded='true'] .hamburger-inner::after { transform: rotate(-90deg) translateX(8px); }

/* Mobile drawer. */
.mobile-navigation {
  position: fixed;
  inset: var(--header-height-compact) 0 auto;
  z-index: 99;
  max-height: 0;
  overflow: hidden;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  visibility: hidden;
  transition: max-height 300ms var(--ease-out), visibility 0s linear 300ms;
}

.mobile-navigation.is-open {
  max-height: calc(100vh - var(--header-height-compact));
  overflow-y: auto;
  visibility: visible;
  transition: max-height 300ms var(--ease-out), visibility 0s;
}

.mobile-navigation .nav-menu,
.mobile-navigation .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-navigation a {
  display: block;
  padding: 18px var(--gutter);
  border-top: 1px solid var(--color-rule);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  text-decoration: none;
}

.mobile-navigation a:hover,
.mobile-navigation a:focus {
  color: var(--color-accent);
}

/* The drawer sits under a compact header, so paint the header while open. */
body.nav-open .site-header {
  height: var(--header-height-compact);
  background: var(--color-bg);
}

body.nav-open .site-logo img {
  height: 52px;
}

/* ==========================================================================
   5. Page banner
   ========================================================================== */

.entry-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Shorter than the first build (was min(68vh, 720px)) - change request
     2026-10-15. */
  min-height: clamp(400px, 50vh, 560px);
  padding: calc(var(--header-height) + 32px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate;
}

/* No photo (change request 2026-10-16): charcoal at the top easing down to
   exactly the page ink, so the banner dissolves into Tier 1. A soft radial
   lift behind the title keeps the field from reading as flat black. */
.entry-header {
  background:
    radial-gradient(ellipse 70% 90% at 50% 38%, rgba(167, 170, 175, 0.07), transparent 70%),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-secondary), var(--color-primary) 10%) 0%,
      var(--color-secondary) 38%,
      color-mix(in srgb, var(--color-secondary), var(--color-bg) 55%) 72%,
      var(--color-bg) 100%
    );
}

.entry-header {
  text-align: center;
}

.entry-header .page-title {
  margin: 0 auto;
  max-width: 18ch;
  color: var(--color-white);
}

/* Interior pages carry no compass tick above their headlines - neither the
   banner title nor the section titles (change request 2026-10-16). The
   homepage keeps it. */
.has-banner .page-title::before,
.has-banner .page-title::after,
.has-banner .section-title::before,
.has-banner .section-title::after {
  display: none;
}

/* Centered compass tick: hairline either side of the diamond. */
.entry-header .page-title::before {
  width: 112px;
  margin-inline: auto;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 0 50% / calc(50% - 12px) 1px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 100% 50% / calc(50% - 12px) 1px no-repeat;
}

.entry-header .page-title::after {
  left: calc(50% - 4px);
}

/* ==========================================================================
   6. Homepage
   ========================================================================== */

/* Hero */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-height) + 48px) 0 var(--hero-inset);
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate;
}

.hero-media,
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media {
  z-index: -2;
}

.hero-video {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.hero-video.is-playing {
  opacity: 1;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Lightened 2026-10-15 ("lighten up the dark casting"): the top and middle
     of the frame carry far less ink; the bottom still lands on solid ink so
     the hero dissolves into Tier 1, and the lower-left stays dark enough for
     the headline and sub-headline. */
  /* The first layer (2026-11-03, accessibility) is a scrim behind the
     header only, so the 12px nav keeps 4.5:1 over bright sky. */
  background:
    linear-gradient(to bottom, rgba(11, 15, 20, 0.62) 0, rgba(11, 15, 20, 0.4) 120px, rgba(11, 15, 20, 0) 240px),
    linear-gradient(to top, var(--color-bg) 0%, rgba(11, 15, 20, 0.72) 14%, rgba(11, 15, 20, 0.3) 42%, rgba(11, 15, 20, 0.08) 75%, rgba(11, 15, 20, 0.12) 100%),
    linear-gradient(to right, rgba(11, 15, 20, 0.42) 0%, rgba(11, 15, 20, 0) 60%);
}

/* Pinned 60px from the left and bottom edges at desktop (--hero-inset),
   deliberately outside the 1500px container so it sits against the frame. */
.hero {
  --hero-inset: 60px;
}

.hero-content {
  width: 100%;
  padding-inline: var(--hero-inset);
}

.hero-title {
  margin-bottom: 0.4em;
  color: var(--color-white);
  font-size: clamp(3rem, 1.2rem + 5.2vw, 6.75rem);
  line-height: 1;
}

/* One block per line: "Strategic Counsel for" / "Stronger Outcomes".
   The overflow mask is what the entrance animation rises out of; Cormorant's
   descenders (the g's) hang ~0.22em below the baseline, so the padding gives
   them room and the negative margin keeps the line spacing unchanged. */
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.24em;
  margin-bottom: -0.16em;
}

.hero-title .line > span {
  display: inline-block;
}

.hero-sub {
  max-width: 52ch;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--color-accent);
  color: var(--color-text);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

.hero-toggle {
  position: absolute;
  right: var(--hero-inset);
  bottom: var(--hero-inset);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(11, 15, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}

.hero-toggle[hidden] {
  display: none;
}

.hero-toggle:hover,
.hero-toggle:focus-visible {
  border-color: var(--color-accent);
  background: rgba(11, 15, 20, 0.7);
}

/* Pause glyph (two bars) by default; play triangle when paused. */
.hero-toggle-icon {
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}

.hero-toggle[aria-pressed='true'] .hero-toggle-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-block: 6px solid transparent;
  border-inline: 0;
  border-left: 10px solid currentColor;
}

/* Split: copy + layered photo, sharing one row. */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 7vw, 120px);
}

.split {
  overflow: hidden;
  isolation: isolate;
}

.split-copy .section-body {
  max-width: 60ch;
}

/* The layering photo (Option D, "Fade"): the photo fills one side of the
   section edge to edge and dissolves into the ink toward the copy - no
   frame, no edge. It is positioned against the section, not the grid, so
   the copy alone holds the opposite column. */
.split {
  display: flex;
  align-items: center;
  min-height: clamp(640px, 52vw, 880px);
}

.split > .container {
  width: 100%;
}

/* Revised 2026-10-15: the photo is narrower (56%, was 62%) so the ink
   behind the copy and watermark runs further, and the fade toward the copy
   is an eased curve rather than a straight ramp. A second mask softens the
   top and bottom edges so a photo never butts hard against the next tier;
   the two masks intersect. */
.layered {
  --fade-dir: to right;
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 56%;
  -webkit-mask-image:
    linear-gradient(var(--fade-dir), #000 0%, #000 18%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.3) 66%, rgba(0, 0, 0, 0.14) 78%, rgba(0, 0, 0, 0.04) 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(var(--fade-dir), #000 0%, #000 18%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.3) 66%, rgba(0, 0, 0, 0.14) 78%, rgba(0, 0, 0, 0.04) 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.layered-right {
  --fade-dir: to left;
  inset: 0 0 0 auto;
}

.layered img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

/* Hairline fix. The photo's faded edge lands on a fractional pixel (633.6px
   at 1440), and the browser rasterises the image's first column one pixel
   outside the masked box - a faint vertical line along every fade section.
   That edge is fully transparent anyway, so clipping 2px off the faded side
   removes the sliver invisibly. (Verified by isolation: the line went with
   the photo hidden, stayed with the watermark hidden.) The masks are also
   set not to tile, which they otherwise do by default. */
.layered {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.layered {
  clip-path: inset(0 2px 0 0);
}

.layered-right {
  clip-path: inset(0 0 0 2px);
}

/* Copy takes the column opposite the photo. */
.split-copy {
  grid-column: 1;
}

.split:has(.layered-left) .split-copy {
  grid-column: 2;
}

/* Tier 2 */
.evaluation {
  overflow: hidden;
  isolation: isolate;
}

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

.evaluation-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evaluation::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Solid ink at both edges so the backdrop fades in from the tier above
     and out into the one below, instead of starting on a hard line. */
  background: linear-gradient(to bottom, var(--color-bg) 0%, rgba(11, 15, 20, 0.9) 14%, rgba(11, 15, 20, 0.88) 40%, rgba(11, 15, 20, 0.94) 70%, var(--color-bg) 100%);
}

.evaluation-intro {
  margin-bottom: clamp(56px, 7vw, 96px);
}

/* Wider measure for the Tier 2 intro (agency request). */
.evaluation-intro .section-body {
  max-width: 90ch;
}

/* Compass quadrants: the four services as the quarters around the rose at
   the centre of the grid. Top row hangs its copy from the top edge, bottom
   row sits it on the bottom edge; the right column is right-aligned - so all
   four read outward from the compass. */
.quads {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1200px;
  margin-inline: auto;
}

.quad {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 300px;
  padding: 36px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-secondary);
  color: var(--color-heading);
  text-decoration: none;
}

.quad-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: saturate(0.4);
  transform: scale(1.05);
  transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out), transform 1200ms var(--ease-out);
}

.quad::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(11, 15, 20, 0.9), rgba(11, 15, 20, 0.2));
}

.has-rose .quad:nth-child(1),
.has-rose .quad:nth-child(2) {
  justify-content: flex-start;
}

.has-rose .quad:nth-child(1)::after,
.has-rose .quad:nth-child(2)::after {
  background: linear-gradient(to bottom, rgba(11, 15, 20, 0.9), rgba(11, 15, 20, 0.2));
}

.has-rose .quad:nth-child(2),
.has-rose .quad:nth-child(4) {
  align-items: flex-end;
  text-align: right;
}

.quad-icon {
  width: 36px;
  height: 36px;
  color: var(--color-accent);
}

/* One line, always. The size is set by the card's own width (cqi), not
   the viewport, so it fits whatever column the quad lands in: 6.4cqi lets
   the longest title, "Corporate & Balance Sheet Advisory", fill the card
   exactly; every title shares the size, capped at 1.75rem. */
.quad {
  container-type: inline-size;
}

.quad-title {
  margin: 0;
  white-space: nowrap;
  font-size: min(1.75rem, 6.4cqi);
  line-height: 1.15;
}

.quad.is-on .quad-image,
.quad:hover .quad-image,
.quad:focus-visible .quad-image {
  opacity: 0.75;
  filter: saturate(1);
  transform: none;
}

.quads-rose {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(150px, 16vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 0 0 12px var(--color-bg-alt);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.quads-rose img {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
}

.quads-needle {
  position: absolute;
  inset: 0;
  transform: rotate(-45deg);
  transition: transform 800ms var(--ease-in-out);
}

.quads-needle svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9%;
  height: 84%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

/* Tier 4 */
.conversation {
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(112px, 14vw, 200px);
}

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

.conversation-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.conversation::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--color-bg) 0%, rgba(11, 15, 20, 0) 22%, rgba(11, 15, 20, 0) 78%, var(--color-bg) 100%),
    radial-gradient(ellipse at center, rgba(11, 15, 20, 0.72) 0%, rgba(11, 15, 20, 0.9) 75%);
}

.conversation .section-body {
  max-width: 54ch;
  font-size: 1.125rem;
}

/* ==========================================================================
   7. Interior lists
   ========================================================================== */

.item-grid {
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.item-card {
  padding: clamp(32px, 4vw, 56px);
  background: var(--color-bg);
  transition: background-color 300ms var(--ease-out);
}

.item-card:hover,
.item-card:target {
  background: var(--color-secondary);
}

/* Line icon, brass, above the title. */
.item-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  color: var(--color-accent);
  transition: transform 400ms var(--ease-out);
}

.item-card:hover .item-icon {
  transform: translateY(-3px);
}

.item-title {
  margin-bottom: 0.6em;
}

.item-body > *:last-child {
  margin-bottom: 0;
}

/* Approach: the compass dial (see partials/section-approach.php). Stations
   sit on the ring at positions computed in PHP; main.js turns the rose by
   --step-deg per step and sweeps the brass arc (--arc) to match. */
@property --arc {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

.approach-dial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}

.dial {
  position: relative;
  justify-self: center;
  width: min(560px, 100%);
  aspect-ratio: 1;
}

.dial-ring,
.dial-arc {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
}

.dial-ring {
  border: 1px solid var(--color-rule);
}

.dial-arc {
  background: conic-gradient(var(--color-accent) var(--arc, 0deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  transition: --arc 1100ms var(--ease-in-out);
}

.dial-rose {
  position: absolute;
  inset: 24%;
}

.dial-turn {
  position: absolute;
  inset: 0;
  transition: transform 1100ms var(--ease-in-out);
}

.dial-turn img {
  width: 100%;
  height: 100%;
}

.dial-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9%;
  height: 92%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.dial-needle-n { fill: var(--color-accent); }
.dial-needle-s { fill: var(--color-primary); opacity: 0.45; }
.dial-needle-hub { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 2; }

.dial-station {
  position: absolute;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out,
    transform 300ms var(--ease-out);
}

.dial-station:hover {
  border-color: var(--color-accent);
  transform: scale(1.06);
}

.dial-station[aria-selected='true'] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.dial-panels {
  position: relative;
}

.dial-panel-num {
  display: block;
  margin-bottom: 18px;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.dial-panel-title {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.dial-panel-body {
  max-width: 52ch;
  font-size: 1.0625rem;
}

.dial-panel-body > *:last-child {
  margin-bottom: 0;
}

/* Deep links land on the panel; the panel sits mid-height beside the dial,
   so this margin brings the whole dial into view under the header. */
.dial-panel {
  scroll-margin-top: calc(var(--header-height-compact) + 200px);
}

.dial-panel:focus-visible {
  outline: 1px solid var(--color-rule);
  outline-offset: 16px;
}

/* No JS: hide the stations and show every step as a list. */
.approach-dial:not(.is-ready) .dial-station {
  display: none;
}

.approach-dial:not(.is-ready) .dial-panel + .dial-panel {
  margin-top: 40px;
}

/* JS: only the selected panel shows; the outgoing one fades as it leaves. */
.approach-dial.is-ready .dial-panel {
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.approach-dial.is-ready .dial-panel[hidden] {
  display: block;
  position: absolute;
  inset: 0 0 auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* How We Help: the bearing line (see partials/section-help.php). One stop
   per service; the compass puck rolls along the line to the selected stop
   (main.js sets its translateX and a rotation proportional to the distance
   travelled) and the brass fill follows it. */
.bearing-track {
  position: relative;
  margin-bottom: clamp(56px, 6vw, 96px);
  padding-top: 64px;
}

.bearing-line,
.bearing-fill {
  position: absolute;
  left: 0;
  top: 64px;
  height: 1px;
}

.bearing-line {
  right: 0;
  background: var(--color-rule);
}

.bearing-fill {
  width: var(--fill, 0%);
  background: var(--color-accent);
  transition: width 1000ms var(--ease-in-out);
}

.bearing-puck {
  position: absolute;
  top: 64px;
  left: 0;
  z-index: 1;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  transition: transform 1000ms var(--ease-in-out);
  pointer-events: none;
}

/* Masks the line behind the rose so it reads as sitting on the route. */
.bearing-puck::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--color-bg-alt);
}

.bearing-turn {
  position: absolute;
  inset: 0;
  transition: transform 1000ms var(--ease-in-out);
}

.bearing-turn img {
  width: 100%;
  height: 100%;
}

.bearing-stops {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.bearing-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 32px 8px 0;
  background: none;
  border: 0;
  color: var(--color-muted);
  text-align: center;
  cursor: pointer;
}

/* The stop's diamond, sitting on the line. */
.bearing-stop::before {
  content: '';
  width: 11px;
  height: 11px;
  margin-top: -37.5px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-primary);
  transform: rotate(45deg);
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}

.bearing-stop.is-past::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* The icon replaces the numeral; it clears the 84px puck. */
.bearing-icon {
  margin-top: 44px;
  color: var(--color-primary);
  transition: color 300ms ease-out, transform 300ms var(--ease-out);
}

.bearing-icon-svg {
  display: block;
  width: 40px;
  height: 40px;
}

.bearing-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 300ms ease-out;
}

.bearing-stop:hover .bearing-icon,
.bearing-stop:hover .bearing-label {
  color: var(--color-heading);
}

.bearing-stop:hover .bearing-icon {
  transform: translateY(-3px);
}

.bearing-stop[aria-selected='true'] .bearing-icon {
  color: var(--color-accent);
}

.bearing-stop[aria-selected='true'] .bearing-label {
  color: var(--color-heading);
}

.bearing-panels {
  position: relative;
}

.bearing-panel {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.bearing-panel + .bearing-panel {
  margin-top: 48px;
}

.bearing-panel-title {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.bearing-panel-body {
  max-width: 62ch;
  font-size: 1.125rem;
}

.bearing-panel-body > *:last-child {
  margin-bottom: 0;
}

/* Deep links land on the panel; this margin keeps the route above it (and
   its rolling compass) in view under the compact header. */
.bearing-panel {
  scroll-margin-top: calc(var(--header-height-compact) + 330px);
}

.bearing-panel:focus-visible {
  outline: 1px solid var(--color-rule);
  outline-offset: 16px;
}

/* No JS: no route, every service listed. JS: one panel at a time. */
.bearing:not(.is-ready) .bearing-track {
  display: none;
}

.bearing.is-ready .bearing-panel + .bearing-panel {
  margin-top: 0;
}

.bearing.is-ready .bearing-panel {
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.bearing.is-ready .bearing-panel[hidden] {
  display: grid;
  position: absolute;
  inset: 0 0 auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* ---- Change request 2026-10-15 ----------------------------------------- */

/* Jump arrow under a page's Tier 1 copy (How We Help, Approach). */
.jump {
  margin: 40px 0 0;
}

.jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-accent);
  transition: border-color 200ms ease-out, background-color 200ms ease-out, transform 300ms var(--ease-out);
}

.jump-link:hover,
.jump-link:focus-visible {
  border-color: var(--color-accent);
  background: rgba(200, 182, 142, 0.08);
  transform: translateY(3px);
}

.jump-arrow {
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .jump-arrow {
    animation: jump-nudge 2400ms var(--ease-in-out) infinite;
  }
}

@keyframes jump-nudge {
  0%, 60%, 100% { translate: 0 0; }
  30% { translate: 0 4px; }
}

/* Approach dial: hint under the graphic, prev/next under the panel. */
.dial-col {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.dial-hint {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.approach-dial:not(.is-ready) .dial-hint {
  display: none;
}

.dial-nav {
  display: flex;
  gap: 12px;
  margin-top: 36px;
}

.dial-nav[hidden] {
  display: none;
}

.dial-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-accent);
  cursor: pointer;
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}

.dial-nav-btn:hover,
.dial-nav-btn:focus-visible {
  border-color: var(--color-accent);
  background: rgba(200, 182, 142, 0.08);
}

.dial-nav-arrow {
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.dial-nav-arrow.is-prev {
  margin: 0 0 0 4px;
  transform: rotate(-135deg);
}

/* About: the founder profile. */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

.profile-aside {
  position: sticky;
  top: calc(var(--header-height-compact) + 32px);
  align-self: start;
}

/* overflow: hidden (set on .section-alt for the watermark) makes the
   section a scroll container, which pins the sticky photo to the section
   instead of the viewport - it sat 144px low and never stuck. clip still
   trims the watermark but creates no scroll container. */
.section-alt.profile {
  overflow: clip;
}

.profile-photo {
  aspect-ratio: 4 / 5;
  margin: 0 0 28px;
  overflow: hidden;
  background: var(--color-secondary);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The headshot is a transparent cut-out (2026-11-03): it sits on the brand
   gradient and compass watermark, anchored to the bottom edge. */
.profile-photo:not(.is-placeholder) {
  background:
    url('../media/compass-watermark.svg') 50% 38% / 110% no-repeat,
    linear-gradient(160deg, var(--color-secondary), var(--color-bg));
  border-bottom: 1px solid var(--color-accent);
}

.profile-photo:not(.is-placeholder) img {
  object-fit: contain;
  object-position: 50% 100%;
}

/* Until the headshot arrives: the brand watermark and a person outline. */
.profile-photo.is-placeholder {
  display: grid;
  place-items: center;
  background:
    url('../media/compass-watermark.svg') center / 92% no-repeat,
    linear-gradient(160deg, var(--color-secondary), var(--color-bg));
}

.profile-photo-placeholder {
  width: 38%;
  color: var(--color-primary);
  opacity: 0.55;
}

.profile-name {
  margin: 0 0 6px;
  font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem);
}

.profile-role {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.profile-bio {
  max-width: 68ch;
}

.profile-lede {
  color: var(--color-heading);
  font-size: 1.1875rem;
  line-height: 1.7;
}

.profile-heading {
  margin: 2.6em 0 0.9em;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.profile-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-list li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid var(--color-rule);
}

.profile-list li::before {
  content: '';
  position: absolute;
  top: 1.15em;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

.profile-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 8px 0 0;
  background: var(--color-dark);
}

.profile-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-dark));
}

.profile-video-play img {
  position: absolute;
  width: 46%;
  height: auto;
  opacity: 0.12;
}

.profile-video-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  transition: background-color 200ms ease-out, transform 300ms var(--ease-out);
}

.profile-video-icon::after {
  content: '';
  margin-left: 5px;
  border-block: 11px solid transparent;
  border-left: 18px solid var(--color-accent);
}

.profile-video-play:hover .profile-video-icon,
.profile-video-play:focus-visible .profile-video-icon {
  background: rgba(200, 182, 142, 0.12);
  transform: scale(1.06);
}

.profile-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Who We Serve cards sit over the hero photo's bleed: translucent ink. */
.serve-cards .item-card {
  background: rgba(11, 15, 20, 0.78);
}

@supports (backdrop-filter: blur(1px)) {
  .serve-cards .item-card {
    background: rgba(11, 15, 20, 0.62);
    backdrop-filter: blur(10px);
  }
}

.serve-cards .item-card:hover,
.serve-cards .item-card:target {
  background: rgba(21, 27, 35, 0.86);
}

/* Podcast episodes. */
.episodes .section-title {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.episode {
  display: grid;
  gap: 20px;
  height: 100%;
}

.episode-art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-secondary);
}

.episode-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-bg));
}

.episode-tile img {
  width: 42%;
  height: auto;
  opacity: 0.5;
}

.episode-tile-num {
  position: absolute;
  left: 20px;
  bottom: 16px;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.episode-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.episode-title {
  margin: 0;
}

.episode-guest {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.9375rem;
}

.episode-summary > *:last-child {
  margin-bottom: 0;
}

.episode-action {
  margin: 4px 0 0;
}

.episode-featured {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(56px, 7vw, 96px);
}

.episode-featured .episode-body {
  display: grid;
  gap: 16px;
}

.episode-featured .episode-title {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.episode-grid .episode-body {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* One-line headings: the How We Help service panel titles never wrap. They
   are sized to their own column (container query units): the normal size
   where it fits, scaled down only where it wouldn't. Factor = 100 / (text
   width / font size), measured in the browser, less a little margin:
     "Corporate & Balance Sheet Advisory"  741px @ 51px -> 14.5 em -> 6.6cqi
       (the longest service title; all service panel titles share it)
   The About and How We Help hero headings used this too until 2026-10-16,
   when every hero heading was set to the same size as Who We Serve's
   (--hero-size) - so those two now wrap like the rest. */
.split-copy,
.bearing-panel {
  container-type: inline-size;
}

.fit-line {
  white-space: nowrap;
}

.section-centered .section-title.fit-line,
.bearing-panel-title.fit-line {
  max-width: none;
}

.fit-service {
  font-size: min(clamp(2rem, 1.4rem + 2vw, 3.25rem), 6.6cqi);
}

/* ---- Interior page heroes (change request 2026-10-16) ---------------------
   No banner: every interior page opens on its Tier 1, laid out like How We
   Help, as the hero. It clears the fixed header itself, carries the page
   title as an eyebrow, and its heading is the page's <h1>. */
.page-hero {
  --hero-size: clamp(2.5rem, 1.3rem + 3.2vw, 4.25rem);
  min-height: clamp(700px, 100svh, 980px);
  padding-top: calc(var(--header-height) + clamp(16px, 3vw, 48px));
}

.page-hero .section-title {
  font-size: var(--hero-size);
}

.hero-eyebrow {
  margin: 0 0 20px;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Tier 1 -> Tier 2 bleeds (About, Who We Serve, Podcast). The hero photo
   runs past the bottom of its section and dissolves over the top of the next
   one, which drops its alt fill and top rule so the photo shows through.
   overflow-x: clip (not hidden) keeps the watermark from causing sideways
   scroll while letting the photo overflow downward. */
.hero-bleed {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}

.hero-bleed .layered {
  bottom: -280px;
  --fade-y: linear-gradient(to bottom, transparent 0%, #000 14%, #000 48%, rgba(0, 0, 0, 0.4) 76%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(var(--fade-dir), #000 0%, #000 18%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.3) 66%, rgba(0, 0, 0, 0.14) 78%, rgba(0, 0, 0, 0.04) 90%, transparent 100%),
    var(--fade-y);
  mask-image:
    linear-gradient(var(--fade-dir), #000 0%, #000 18%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.3) 66%, rgba(0, 0, 0, 0.14) 78%, rgba(0, 0, 0, 0.04) 90%, transparent 100%),
    var(--fade-y);
}

.section-alt.profile,
.section-alt.episodes,
.section-alt.audiences {
  background: transparent;
  border-top: 0;
}

/* About bio accordions. Collapsed only once main.js adds .is-ready;
   panels animate on grid-template-rows (0fr -> 1fr) so height needs no JS. */
/* "Meet Our Founder" spans the grid as its own row, above the headshot. */
.profile-title {
  grid-column: 1 / -1;
  margin: 0;
}

.profile-grid {
  row-gap: clamp(28px, 3vw, 44px);
}

.profile-bio .profile-name {
  margin: 0 0 6px;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
}

.profile-bio .profile-tagline {
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.5;
}

.profile-bio .profile-role {
  margin-bottom: 32px;
}

.profile-heading-lede {
  margin-top: 0;
}

.profile-lede + .profile-lede {
  margin-top: 1.1em;
}

.accordion {
  margin-top: 40px;
  border-top: 1px solid var(--color-rule);
}

.acc-item {
  border-bottom: 1px solid var(--color-rule);
}

.acc-heading {
  margin: 0;
  font-size: inherit;
}

.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: 0;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease-out;
}

.acc-trigger:hover {
  color: var(--color-heading);
}

/* Plus that turns into a minus. */
.acc-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.acc-icon::before,
.acc-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 300ms var(--ease-out);
}

.acc-icon::after {
  transform: rotate(90deg);
}

.acc-trigger[aria-expanded='true'] .acc-icon::after {
  transform: rotate(0deg);
}

.acc-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 450ms var(--ease-in-out);
}

.acc-inner {
  min-height: 0;
  overflow: hidden;
}

.acc-inner > *:last-child {
  margin-bottom: 28px;
}

.accordion.is-ready .acc-heading:has(.acc-trigger[aria-expanded='false']) + .acc-panel {
  grid-template-rows: 0fr;
}

/* A collapsed panel's contents (the video's play link) must not take
   keyboard focus; visibility flips after the close animation finishes. */
.accordion.is-ready .acc-heading:has(.acc-trigger[aria-expanded='false']) + .acc-panel .acc-inner {
  visibility: hidden;
  transition: visibility 0s linear 450ms;
}

/* Podcast definition. */
.definition {
  margin: 0 0 2em;
  padding: 24px 28px;
  border-left: 1px solid var(--color-accent);
  background: var(--color-secondary);
}

.definition dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 8px;
}

.definition-term {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

.definition-pron {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.definition dd {
  margin: 0;
}

/* Contact. */
.contact-card {
  margin-top: 40px;
  padding: 32px 36px;
  background: var(--color-secondary);
}

.contact-card .address-container {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* ==========================================================================
   8. Components
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  background: var(--color-heading);
  border: 1px solid var(--color-heading);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.button::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-out);
}

.button:hover,
.button:focus {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-white);
}

.button:hover::after,
.button:focus::after {
  transform: translateX(3px) rotate(45deg);
}

.button:active {
  transform: scale(0.98);
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.site-footer {
  padding-top: clamp(64px, 8vw, 112px);
  background: var(--color-dark);
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
}

.site-footer a {
  color: var(--color-text);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--color-accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.footer-logo img {
  width: 300px;
  max-width: 100%;
  height: auto;
}

.footer-col .address-container {
  margin: 0;
  line-height: 1.9;
}

.footer-menu .nav-menu,
.footer-menu .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}

.footer-menu a {
  display: inline-block;
  padding-block: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.social-media {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.social-media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
}

.footer-legal {
  margin-top: clamp(48px, 6vw, 80px);
  padding-block: 28px;
  border-top: 1px solid var(--color-rule);
}

.footer-legal p {
  margin: 0;
  font-size: 0.8125rem;
}

/* ==========================================================================
   10. Responsive

   `large` is the breakpoint the header switches on. .show-for-large /
   .hide-for-large need !important — components later in the file set their
   own display and win on equal specificity.
   ========================================================================== */

.show-for-large { display: none !important; }
.hide-for-large { display: block !important; }
.hamburger.hide-for-large { display: inline-flex !important; }

@media (min-width: 64em) {
  .show-for-large { display: flex !important; }
  .hide-for-large,
  .hamburger.hide-for-large { display: none !important; }
}

@media (max-width: 63.99em) {
  :root {
    --header-height: 104px;
    --header-height-compact: 72px;
  }

  .site-logo img { height: 52px; }
  .site-header.is-compact .site-logo img,
  body.nav-open .site-logo img { height: 40px; }

  .split-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Single column: the photo sits on top and fades down into the copy,
     which rises over its faded lower edge. */
  .split {
    display: block;
    min-height: 0;
    padding-top: 0;
  }

  .layered,
  .layered-right {
    position: relative;
    inset: auto;
    z-index: -1;
    width: auto;
    height: 78vw;
    max-height: 560px;
    margin: 0 calc(-1 * var(--gutter)) -22vw;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }

  .split-grid .layered { order: 0; }

  .split-copy,
  .split:has(.layered-left) .split-copy {
    grid-column: 1;
    order: 1;
    position: relative;
  }

  /* Stacked: one column, every quarter reads the same way, and the rose
     steps aside (there's no centre to sit in). */
  .quads {
    grid-template-columns: minmax(0, 1fr);
  }

  .quad,
  .has-rose .quad:nth-child(n) {
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 220px;
    padding: 28px 24px;
    text-align: left;
  }

  .has-rose .quad:nth-child(1)::after,
  .has-rose .quad:nth-child(2)::after {
    background: linear-gradient(to top, rgba(11, 15, 20, 0.9), rgba(11, 15, 20, 0.2));
  }

  .quads-rose {
    display: none;
  }

  .approach-dial {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-aside {
    position: static;
    max-width: 420px;
  }

  .episode-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bearing-panel {
    gap: 20px;
  }

  /* Stacked: hero photos sit on top and fade down, as elsewhere. */
  .hero-bleed .layered {
    bottom: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }

  /* Icons only on small screens; the label stays as the tab's accessible
     name, visually hidden. */
  .bearing-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .bearing-puck {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
  }

  .bearing-icon {
    margin-top: 32px;
  }

  .bearing-panel {
    scroll-margin-top: calc(var(--header-height-compact) + 220px);
  }

  /* Stacked: the dial sits above the panel. */
  .dial-panel {
    scroll-margin-top: calc(var(--header-height-compact) + min(440px, 100vw) - 100px);
  }

  .dial {
    width: min(440px, 100%);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40em) {
  body { font-size: 16px; }

  .item-grid-2,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dial-station {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    font-size: 1.25rem;
  }

  .hero-sub { padding-left: 18px; }

  .episode-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quad,
  .has-rose .quad:nth-child(n) {
    padding-inline: 20px;
  }

  .hero { --hero-inset: 24px; }

  /* The hero is a still (no pause toggle to clear), so the copy can use
     the full width. */
  .hero-content { padding-right: 24px; }

  .definition { padding: 20px; }

  .contact-card { padding: 24px 20px; }

  /* Mobile pass (2026-11-03). */
  .item-card { padding: 28px 24px; }

  .profile-lede { font-size: 1.0625rem; }

  .episodes { padding-block: clamp(48px, 12vw, 72px); }

  /* Phone / email: comfortable tap targets. */
  .address-container a {
    display: inline-block;
    padding-block: 6px;
  }
}

/* The email address is one long word; let it wrap instead of pushing the
   page sideways on narrow phones. */
.address-container a {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   11. Watermark

   The logo's compass rose, very faint, behind the plain sections and the
   footer - never over a photo backdrop. It turns slowly as the page scrolls
   (main.js sets --wm-turn on <html>; it stays 0 with reduced motion).
   The faintness is baked into compass-watermark.svg (fill-opacity .045).
   ========================================================================== */

.split::before,
.section-alt::before,
.site-footer::before,
.section-404::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: clamp(420px, 52vw, 900px);
  aspect-ratio: 1;
  background: url('../media/compass-watermark.svg') center / contain no-repeat;
  transform: translate(-38%, -50%) rotate(calc(var(--wm-turn, 0) * 1deg));
  pointer-events: none;
}

/* Tier 1 has its photo on the left, so its rose sits off the right edge. */
.split:has(.layered-left)::before,
.section-alt::before {
  left: auto;
  right: 0;
  transform: translate(38%, -50%) rotate(calc(var(--wm-turn, 0) * -1deg));
}

.section-alt,
.site-footer,
.section-404 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.site-footer::before {
  top: 0;
  left: auto;
  right: 0;
  width: clamp(360px, 40vw, 640px);
  transform: translate(30%, -30%) rotate(calc(var(--wm-turn, 0) * 1deg));
}

/* ==========================================================================
   12. Motion

   Three layers, all gated on html.motion (set in <head> only when JS runs
   and reduced motion is off - see westpoint_motion_flag()):

     page transition  ink panel + compass covers, then lifts (.pt-in) /
                      sweeps back up on an internal link click (.pt-out)
     entrance         above-the-fold elements, played once .is-entered lands
     reveal           everything else, as it scrolls into view ([data-reveal]
                      is tagged by main.js; .is-revealed by IntersectionObserver)
   ========================================================================== */

/* ---- Page transition ---------------------------------------------------- */

.page-transition {
  display: none;
}

html.motion .page-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
}

html.motion .page-transition-panel {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
}

html.motion .page-transition-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}

html.motion .page-transition-mark img {
  width: 96px;
  height: 96px;
}

/* A brass ring that draws around the compass. */
html.motion .page-transition-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  opacity: 0.6;
  clip-path: inset(0 0 0 0 round 50%);
}

/* Arrival: the cover lifts away as the compass turns past north. */
html.motion.pt-in .page-transition-panel {
  animation: pt-lift 900ms var(--ease-in-out) 180ms forwards;
}

/* While the cover is up the compass keeps turning - a slow, steady spin on
   the image, separate from the wrapper's lift-out animation below, so the two
   transforms never fight. It stops once the page has arrived. */
html.motion:not(.pt-in) .page-transition-mark img,
html.motion.pt-out .page-transition-mark img {
  animation: pt-spin 2400ms linear infinite;
}

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

html.motion.pt-in .page-transition-mark {
  animation: pt-mark-out 700ms var(--ease-in-out) forwards;
}

/* Departure: the cover sweeps up from below, the compass turns into place. */
html.motion.pt-out .page-transition {
  pointer-events: auto;
}

html.motion.pt-out .page-transition-panel {
  animation: pt-cover 560ms var(--ease-in-out) both;
}

html.motion.pt-out .page-transition-mark {
  animation: pt-mark-in 620ms var(--ease-out) 140ms both;
}

html.motion.pt-out .page-transition-ring {
  animation: pt-ring 620ms var(--ease-out) 140ms both;
}

@keyframes pt-lift {
  to { transform: translateY(-100%); }
}

@keyframes pt-cover {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes pt-mark-out {
  from { opacity: 1; transform: rotate(0deg) scale(1); }
  to { opacity: 0; transform: rotate(90deg) scale(0.86); }
}

@keyframes pt-mark-in {
  from { opacity: 0; transform: rotate(-90deg) scale(0.86); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes pt-ring {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 0.6; transform: scale(1); }
}

/* ---- Entrance (above the fold) ----------------------------------------- */

@keyframes enter-up {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-line {
  from { transform: translateY(105%); }
  to { transform: none; }
}

@keyframes enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes enter-settle {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

@keyframes enter-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

html.motion .site-logo,
html.motion .main-nav .nav-menu > li,
html.motion .hamburger,
html.motion .header-cta,
html.motion .hero-sub,
html.motion .hero-toggle,
html.motion .entry-header .page-title,
html.motion .hero-title .line > span {
  opacity: 0;
}

html.motion .hero-title .line > span {
  opacity: 1;
  transform: translateY(105%);
}

html.motion.is-entered .site-logo {
  animation: enter-down 900ms var(--ease-out) 150ms both;
}

html.motion.is-entered .main-nav .nav-menu > li,
html.motion.is-entered .hamburger,
html.motion.is-entered .header-cta {
  animation: enter-down 700ms var(--ease-out) both;
  animation-delay: calc(300ms + var(--i, 0) * 70ms);
}

html.motion.is-entered .main-nav .nav-menu > li:nth-child(1) { --i: 0; }
html.motion.is-entered .main-nav .nav-menu > li:nth-child(2) { --i: 1; }
html.motion.is-entered .main-nav .nav-menu > li:nth-child(3) { --i: 2; }
html.motion.is-entered .main-nav .nav-menu > li:nth-child(4) { --i: 3; }
html.motion.is-entered .main-nav .nav-menu > li:nth-child(5) { --i: 4; }
html.motion.is-entered .main-nav .nav-menu > li:nth-child(6) { --i: 5; }
html.motion.is-entered .main-nav .nav-menu > li:nth-child(n+7) { --i: 6; }

html.motion.is-entered .hero-media {
  animation: enter-settle 2200ms var(--ease-out) both;
}

html.motion.is-entered .hero-title .line > span {
  animation: enter-line 1100ms var(--ease-out) both;
}

html.motion.is-entered .hero-title .line:nth-child(1) > span { animation-delay: 250ms; }
html.motion.is-entered .hero-title .line:nth-child(2) > span { animation-delay: 380ms; }

html.motion.is-entered .hero-sub {
  animation: enter-up 1000ms var(--ease-out) 650ms both;
}

html.motion.is-entered .hero-toggle {
  animation: enter-fade 800ms ease-out 1000ms both;
}

html.motion.is-entered .entry-header .page-title {
  animation: enter-up 1100ms var(--ease-out) 300ms both;
}

html.motion.is-entered .entry-header .page-title::before {
  animation: enter-draw 1000ms var(--ease-out) 600ms both;
}

/* ---- Reveal on scroll --------------------------------------------------- */

html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out),
    border-color 300ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

html.motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Section titles: the compass tick's hairline draws in after the text. */
html.motion .section-title[data-reveal]::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease-out) 250ms;
}

html.motion .section-centered .section-title[data-reveal]::before {
  transform-origin: center;
}

html.motion .section-title[data-reveal].is-revealed::before {
  transform: none;
}

/* Layered photos fade up out of the ink and settle from a slight zoom. */
html.motion .layered[data-reveal] {
  transform: none;
}

html.motion .layered[data-reveal] img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1600ms var(--ease-out), transform 2400ms var(--ease-out);
}

html.motion .layered[data-reveal].is-revealed img {
  opacity: 0.85;
  transform: none;
}

/* Backdrop photos drift slightly as they arrive. */
html.motion .evaluation-backdrop[data-reveal],
html.motion .conversation-backdrop[data-reveal] {
  opacity: 1;
  transform: scale(1.06);
  transition: transform 2400ms var(--ease-out);
}

html.motion .evaluation-backdrop[data-reveal].is-revealed,
html.motion .conversation-backdrop[data-reveal].is-revealed {
  transform: none;
}

/* Reduced motion: html.motion is never set, so none of the hidden states
   above apply. This only stops the remaining hover/state transitions. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-video { display: none; }
}

/* ==========================================================================
   Mobile spacing (change request 2026-11-04)
   Stacked layouts only: tighten Tier 1 -> Tier 2 on About and Who We Serve,
   and the gap above the homepage's "Start a Conversation" (Tier 3 -> 4) so
   it reads like the other tier breaks.
   ========================================================================== */
@media (max-width: 63.99em) {
  .hero-bleed + .section-alt.profile,
  .hero-bleed + .section-alt.audiences {
    padding-top: 24px;
  }

  .conversation {
    padding-top: 64px;
  }
}