/* ==========================================================================
   Pro Beauty Care - Direction A "Open Air"
   Palette source: Andrea Sampson, new board supplied Aug 24 2026.
   Five swatches: pale blue, deep navy, light grey, cream, pale pink.
   Page background stays white, per Andrea on the Aug 24 call.

   COLOUR SYSTEM RULE (locked, applies to every page):
     navy   = structure (dark grounds, headings on light, footer)
     accent = the single interactive colour (buttons, links, focus)
     NOTE: the new board contains no distinct accent hue, so accent is
     currently the deep navy. If Andrea wants buttons to read as their own
     colour, she needs to name a sixth swatch - it is a one-line change here.
     sky / cream / pink / grey / white = grounds
     Tints are category grounds ONLY. Never on an interactive element, never
     as a text colour. They tint whole tiles, nothing smaller.

   SHAPE RULE (locked): buttons = pill, cards/tiles = 16px, small chips = 10px.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* palette */
  --navy:        #1b1f3b;
  --navy-deep:   #12152b;
  --navy-lift:   #2b3157;
  --sky:         #cfe0f2;
  --sky-wash:    #e8f1fa;
  --cream:       #fdf3d9;
  --pink:        #f9dbe2;
  --accent:      #1b1f3b;
  --accent-lift: #2b3157;
  --grey:        #c8c9cb;
  --grey-wash:   #eaebed;
  --grey-line:   #e6e6e8;
  /* Chip/tag outline. Navy rather than black so the edge stays in the same
     family as the pastel grounds instead of reading as dirt. 0.34 is the
     lowest alpha that clears 1.55:1 against the darkest ground a chip sits on
     (sky) while holding 2.09:1 against the white chip fill. */
  --chip-line:   rgba(27, 31, 59, 0.34);
  --paper:       #ffffff;

  /* ink - Andrea: "main colour for text is black" */
  --ink:         #111111;
  --ink-soft:    #4a4a4a;
  --ink-mute:    #6e6e6e;

  /* type */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* motion - copied exactly from the motion rulebook */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 160ms;
  --dur-ui:    200ms;
  --dur-panel: 240ms;
  --dur-reveal: 620ms;

  /* layer scale - the only z-indexes in this file */
  --z-base:  1;
  --z-nav:   50;
  --z-panel: 60;

  --shell: 1400px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- utility ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-panel);
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- type scale ---------- */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; }
.d2 { font-size: clamp(2rem, 4.2vw, 3.3rem);  line-height: 1.06; letter-spacing: -0.025em; }
.d3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -0.02em; }
.d4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0;
}
.body { color: var(--ink-soft); max-width: 62ch; margin: 0; }
.body + .body { margin-top: 1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-ui) ease,
              color var(--dur-ui) ease,
              border-color var(--dur-ui) ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--ghost   { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--onDark  { background: var(--cream); color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-lift); }
  .btn--ghost:hover   { background: var(--ink); color: var(--paper); }
  .btn--onDark:hover  { background: #fff; }
}
.btn:active { transform: scale(0.97); }

.textlink {
  color: var(--accent);
  font-weight: 500;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { opacity: 0.68; }
}

/* ==========================================================================
   NAV - translucent layer, content scrolls under it. Single line, 72px.
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
}
.nav__in {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__mark {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
  align-self: center;
  /* PLACEHOLDER: swap for the real PBC mark once Andrea sends the logo files */
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  text-decoration: none;
  font-size: 0.94rem;
  color: var(--ink-soft);
  padding-block: 0.4rem;
  transition: color var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--ink); }
}
.nav__links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.nav__cta { display: flex; align-items: center; gap: 0.75rem; }
.nav__cta .btn { padding: 0.68rem 1.25rem; font-size: 0.92rem; }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(17,17,17,0.16);
  border-radius: 10px;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.nav__toggle:active { transform: scale(0.97); }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-ui) var(--ease-out), opacity 120ms ease;
}
.nav__toggle span::before { transform: translateY(-5.5px); }
.nav__toggle span::after  { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(17,17,17,0.07);
    /* clip from the top edge so the panel reads as arriving from the bar */
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-panel) var(--ease-drawer);
  }
  .nav__links[data-open="true"] { clip-path: inset(0 0 0 0); }
  .nav__links a { display: block; padding-block: 0.9rem; font-size: 1rem; }
  .nav__links a[aria-current="page"] { box-shadow: none; }
  .nav__cta .btn { display: none; }
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.sec { padding-block: clamp(4.5rem, 9vw, 8rem); }
.sec--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.sec--cream { background: var(--cream); }
.sec--sky   { background: var(--sky-wash); }
.sec--navy  { background: var(--navy); color: #fff; }
.sec--navy .d1, .sec--navy .d2, .sec--navy .d3, .sec--navy .d4 { color: #fff; }
.sec--navy .body, .sec--navy .lede { color: rgba(255,255,255,0.78); }
/* The kicker inherits var(--accent), which IS navy - on a navy ground it
   measured 1.00:1, i.e. the text was simply not there. Only the 404 hero puts
   a kicker on navy today, but the rule belongs with the other .sec--navy
   inversions so the next one does not rediscover it. */
.sec--navy .kicker { color: var(--sky); }
/* Scoped to navy on purpose. Elsewhere a .lede after a .d1 sits inside a hero
   grid that supplies the gap; adding a global margin would double it on three
   existing heroes. The 404 hero is a plain .shell, so it needs its own. */
.sec--navy .d1 + .lede,
/* Same defect found on the Benefits and Academy closing sections 2026-09-01:
   a .d2 sitting directly on its .lede with a 0px gap. The index and contact
   closes are unaffected because a .close__trio sits between the two there,
   which is why this went unnoticed - it only bites where the list is absent. */
.sec--navy .d2 + .lede { margin-top: 1.15rem; }
.sec--navy .lede + .btn { margin-top: 2rem; }

.sec__head { max-width: 46rem; }
.sec__head .body { margin-top: 1.1rem; }

/* ==========================================================================
   HERO - asymmetric split, text left / image right, offset
   ========================================================================== */
.hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
.hero__copy .d1 { max-width: 19ch; }
.hero__copy .lede { margin-top: 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Photo frame. This carried a navy duotone (luminosity blend + a sky/navy
   gradient wash) while the slots held picsum placeholders. Real photography
   landed 2026-08-31 and Mack pulled the treatment: photos now run at their
   own colour, untinted and unfiltered. The class names stay so the markup
   is unchanged; .duo--sky / .duo--accent now only set the colour that shows
   in the split second before an image paints. */
.duo {
  /* <figure> carries a UA default margin of 1em 40px. Unnoticed in the old
     two-column band layouts, but in the overlap composition it inset the
     image 40px from the panel's right edge, so the image's edge met the
     panel's top edge in a square notch a few pixels off the panel's own
     rounded corner. Zeroing it also gives every other .duo back the 80px of
     width it was quietly losing. */
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--navy);
}
.duo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.duo--sky { background: var(--sky); }
.duo--accent { background: var(--accent); }

/* Two portraits filling one wide frame. Andrea has no horizontal photography
   (email 2026-08-31) and suggested pairing verticals to make a horizontal, so
   this fills a landscape slot without reshaping it.

   Deliberately two boxes rather than one pre-flattened diptych: the frames
   this sits in change aspect across the breakpoint (.overlap__media is 16/9
   then 21/9), and a single baked image would centre-crop the whole strip -
   eating the seam and the outer edge of both subjects at once. As a grid,
   each half runs its own object-fit: cover and keeps its own subject.
   The gap shows .duo's background, so the seam is the frame, not a filter. */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Explicit single row. Left auto, the row sizes to the images' intrinsic
     height (square sources = a 626px row inside a 538px band), which overflows
     the frame and gets clipped from the bottom by .duo's overflow:hidden -
     top-anchored clipping, not the centred object-fit crop these files are
     cut for. 1fr pins the row to the frame so cover does the work. */
  grid-template-rows: 1fr;
  gap: 4px;
  width: 100%;
  height: 100%;
}
.diptych img { display: block; min-width: 0; min-height: 0; }


.hero__media { aspect-ratio: 4 / 5; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 5vw, 5rem); }
  .hero__media { aspect-ratio: 4 / 4.6; margin-top: 2.5rem; }
}

/* ==========================================================================
   STATEMENT - full-width editorial line on a tinted ground
   ========================================================================== */
.statement__lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.3vw, 2.65rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
}
.statement__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
.statement__focus {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.focus {
  padding-top: 1.1rem;
  border-top: 1.5px solid var(--ink);
}
.focus h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.focus p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

@media (min-width: 820px) {
  .statement__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .statement__focus { grid-template-columns: repeat(3, 1fr); grid-column: 1 / -1; }
}

/* ==========================================================================
   PILLARS - bento, exactly 3 cells, asymmetric, each on its own ground
   ========================================================================== */
.pillars {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
.pillar {
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  min-height: 17rem;
}
.pillar__num {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.5;
  margin-bottom: auto;
}
.pillar h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 1.75rem 0 0.75rem;
}
.pillar p { margin: 0; color: rgba(17,17,17,0.72); font-size: 0.98rem; max-width: 40ch; }
.pillar--a { background: var(--sky); }
.pillar--b { background: var(--cream); }
/* Community moved off pink 2026-09-01, matching the Academy quad. Dark ground,
   so everything inside inverts - same .sec--navy pattern used elsewhere. Note
   .pillar__num carries opacity: 0.5, which reads as a dim smudge on navy
   rather than a quiet label, so it gets an explicit colour instead. */
.pillar--c { background: var(--navy); }
.pillar--c h3 { color: #fff; }
.pillar--c p { color: rgba(255,255,255,0.74); }
.pillar--c .pillar__num { color: rgba(255,255,255,0.65); opacity: 1; }

@media (min-width: 900px) {
  .pillars { grid-template-columns: 1.25fr 1fr 1fr; }
  .pillar--a { min-height: 24rem; }
}

/* ==========================================================================
   CLUSTERS - the long "More than a benefits program" list, grouped into 3
   chunks of chips instead of a 14-row bullet list
   ========================================================================== */
.clusters {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
.cluster__label {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1.5px solid var(--ink);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  border-radius: 10px;
  background: var(--paper);
  /* See the quadcell block for the measurements behind this value. Set on the
     base component, not per-section, so one chip does not have five different
     edges depending on which ground it landed on. */
  border: 1px solid var(--chip-line);
  padding: 0.55rem 0.9rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.sec--cream .chips li { background: rgba(255,255,255,0.72); }

@media (min-width: 860px) {
  .clusters { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ==========================================================================
   FEATURE BAND - image left, copy right
   ========================================================================== */
.band { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
.band__media { aspect-ratio: 5 / 4; }
.band__copy .body { margin-top: 1.1rem; }
.band__copy .btn { margin-top: 2rem; }
.subjects { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.subjects li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  border: 1px solid var(--chip-line);
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  background: var(--paper);
}
@media (min-width: 900px) {
  .band { grid-template-columns: 0.95fr 1.05fr; }
  .band--flip .band__media { order: 2; }
}

/* ==========================================================================
   KICKER + OVERLAP - image with an offset panel riding its lower corner.
   Ported from Direction B on 2026-08-24 at Andrea's request. B sat the panel
   in a hairline box on a bone ground; Open Air's page is white, so the panel
   lifts on a shadow and carries the 16px card radius instead.
   ========================================================================== */
.kicker {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.5rem;
}
.overlap { position: relative; }
.overlap__media { aspect-ratio: 16 / 9; }   /* radius comes from .duo */
.overlap__panel {
  background: var(--paper);
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(27, 31, 59, 0.13);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  margin-top: -2.5rem;
  margin-inline: auto;
  width: min(100%, 40rem);
  position: relative;
}
.overlap__panel .body { margin-top: 1rem; }
.overlap__panel .btn { margin-top: 1.75rem; }
@media (min-width: 940px) {
  .overlap__media { aspect-ratio: 21 / 9; }
  .overlap__panel { margin: -7rem 0 0 auto; width: min(34rem, 52%); }
  .overlap--left .overlap__panel { margin-left: 0; margin-right: auto; }
}

/* ==========================================================================
   CONTACT - form card beside a column of direct-contact cards.
   Layout borrowed from the Will Klein contact page and rebuilt in Open Air's
   language: 16px cards, pill buttons, sky ground, navy as the only accent.
   ========================================================================== */
.contact { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .contact { grid-template-columns: 1.35fr 0.65fr; } }

.form-card {
  background: var(--paper);
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
}
.form-card__sub { margin: 0.75rem 0 0; color: var(--ink-soft); font-size: 0.96rem; }

/* Standing notice while the form has nowhere to send to. Delete with the
   `disabled` attribute once Formspree is wired up. */
.form__pending {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid rgba(17,17,17,0.10);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

.form { margin-top: 1.75rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-group label span { color: var(--ink-mute); font-weight: 400; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;              /* 16px stops iOS zooming the page on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--grey-line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  min-height: 44px;
  transition: border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.form-group textarea { resize: vertical; min-height: 7rem; }
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 31, 59, 0.14);
}

.form__submit { margin-top: 0.75rem; }
.form__submit[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .form__submit[disabled]:hover { background: var(--accent); }
}
.form__submit[disabled]:active { transform: none; }

/* ---------- direct contact column ---------- */
.contact-side { display: grid; gap: 1rem; }
.contact-card {
  background: var(--paper);
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
}
.contact-card__label {
  margin: 0;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-card__value {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
.contact-card__value a { color: var(--accent); }
.contact-card__note { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--ink-mute); }
.contact-side__note {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* ==========================================================================
   FOUNDERS - staggered offset rows, not three equal cards
   ========================================================================== */
.founders { display: grid; gap: 3rem; grid-template-columns: 1fr; margin-top: 3.5rem; }
.founder__media {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: var(--sky-wash);
  border: 1px solid var(--grey-line);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
/* Real portraits fill the slot. Both are pre-cropped to 4:5 at 900x1125 with
   the heads at a matched scale, so no object-position juggling is needed. */
.founder__media img { width: 100%; height: 100%; object-fit: cover; }

/* Empty portrait slot. No longer used by any founder - Francesco's headshot
   arrived 2026-08-30 and is placed. Kept as the fallback if a founder is ever
   added without a photo: drop an <img> inside .founder__media to replace. */
.founder__slot {
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-mute);
  font-size: 0.84rem;
  line-height: 1.45;
}
.founder__slot strong {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.founder h3 {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 1.35rem 0 0.3rem;
}
.founder__role {
  font-size: 0.88rem;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 0.9rem;
}
.founder p.body { font-size: 0.95rem; }

@media (min-width: 900px) {
  .founders { grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
  .founders > :nth-child(2) { margin-top: 3.5rem; }
  .founders > :nth-child(3) { margin-top: 7rem; }
}

/* ==========================================================================
   PARTNERS - expandable slot grid
   ========================================================================== */
.partners {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  background: var(--grey-line);
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 3rem;
}
.partner {
  background: var(--paper);
  min-height: 7.5rem;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
  transition: background-color var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .partner:hover { background: var(--sky-wash); }
}
/* A partner that has supplied a real logo and contact details. The monogram
   cells below are the fallback for partners who have not yet.

   Cards are top-aligned rather than centred: mixing a full card with monogram
   cells in the same auto-fit grid stretches every row to the tallest, and
   centring made the short cells read as vertically adrift. Once every partner
   is a full card this could go back to centred. */
.partners:has(.partner--full) .partner { align-items: start; }
.partner--full {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.75rem 1.25rem;
}
/* Full-width composed graphic in a partner cell - see .railcard__graphic. */
.partner__graphic {
  width: 100%; height: auto; display: block;
  border-radius: 10px; margin-bottom: 0.35rem;
}
.partner__logo {
  height: 76px;
  width: auto;
  display: block;
  margin-bottom: 0.35rem;
  /* Sizing by height alone assumes a mark that is taller than it is wide, or
     close to square - true of HUB (0.68:1) and Grand Alarms (1.48:1). Canada
     Glass is a 5.4:1 lockup, which at 76px tall wants 412px of width inside a
     card that has about 378px to give, and would have burst the padding.
     max-width caps it; object-fit keeps the aspect honest once it is capped,
     since width and height would otherwise both be fixed and stretch it. */
  max-width: 100%;
  object-fit: contain;
}
/* A partner whose logo is itself a link. Block so the anchor wraps the image
   exactly and keeps the logo's own spacing; max-width so a wide mark still
   caps to the card. */
.partner__logolink, .railcard__logolink { display: block; max-width: 100%; }
.partner__name {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.partner__role {
  font-size: 0.86rem;
  color: var(--ink-mute);
  margin: 0;
}
.partner__contact { margin: 0.35rem 0 0; font-size: 0.84rem; line-height: 1.6; }
.partner__contact a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  /* Long broker addresses must not push the grid wider than its column. */
  overflow-wrap: anywhere;
}

/* PLACEHOLDER logo slot - monogram stands in until partner logo files arrive */
.partner__mark {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.partner span { display: block; font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.3rem; }
.partner--open .partner__mark { color: var(--grey); font-weight: 400; }


/* ==========================================================================
   COVERAGE GRID - benefits page, variable-height tiles
   ========================================================================== */
.coverage { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 3rem; }
.cov {
  border-radius: 16px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--grey-line);
}
.cov h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.55rem;
}
.cov p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.cov--wide { background: var(--sky-wash); border-color: transparent; }
.cov--tint { background: var(--cream); border-color: transparent; }

@media (min-width: 760px) {
  .coverage { grid-template-columns: repeat(6, 1fr); }
  .cov { grid-column: span 2; }
  .cov--wide { grid-column: span 3; }
  .cov--half { grid-column: span 3; }
}

/* ==========================================================================
   RAIL - horizontal scroll track for the 12 academy sessions
   ========================================================================== */
.rail {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-bottom: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--grey) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--grey); border-radius: 999px; }
.session {
  flex: 0 0 min(21rem, 78vw);
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--grey-line);
  display: flex;
  flex-direction: column;
}
.session__n {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.65rem;
}
.session h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.session dl { margin: 0; display: grid; gap: 0.7rem; }
.session dt {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.session dd { margin: 0.1rem 0 0; font-size: 0.93rem; color: var(--ink-soft); }
.session:nth-child(3n+1) { background: var(--sky-wash); border-color: transparent; }
.session:nth-child(3n+2) { background: var(--cream); border-color: transparent; }

/* ==========================================================================
   DAY - the academy session structure
   ========================================================================== */
.day { display: grid; gap: 1px; background: rgba(255,255,255,0.16); margin-top: 3rem; border-radius: 16px; overflow: hidden; }
.day__part { background: var(--navy-lift); padding: clamp(1.5rem, 2.6vw, 2.2rem); }
.day__when {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0 0 0.6rem;
}
.day__what {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
}
@media (min-width: 780px) { .day { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.close { text-align: left; }
.close .d2 { max-width: 18ch; }
.close__trio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--sky);
}
.close .btn { margin-top: 2.5rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--navy-deep); color: rgba(255,255,255,0.72); padding-block: 4rem 2.5rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.foot .brand { color: #fff; }
.foot__tag { margin: 1rem 0 0; font-size: 0.94rem; max-width: 30ch; }
.foot h4 {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot a { text-decoration: none; font-size: 0.94rem; transition: color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: #fff; } }
.foot__base {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } }

/* ==========================================================================
   SCROLL REVEAL
   clip-path wipe + a short lift. IntersectionObserver drives [data-inview].
   Reduced motion keeps the opacity fade and drops all movement.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out),
    clip-path var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal][data-inview="true"] {
  opacity: 1;
  transform: none;
  /* Negative inset, NOT inset(0 0 0 0). The settled state still clips to the
     border box, and the display faces run tighter leading than the font's own
     glyph box: .d1/.d2 are line-height 1.06 while Outfit's ascent+descent is
     ~1.28em, so half-leading is about -4px at 37px type and every descender
     already paints outside the line box. inset(0 0 0 0) then shaved ~2px off
     the bottom of every g, y, p, q and j on the last line of a heading - the
     "Unlimited growth." cut. Expanding the rest state past the box fixes it
     without touching the leading, which is a deliberate typographic choice.
     Same root cause as the .overlap__panel box-shadow exemption below. */
  clip-path: inset(-0.5em -0.5em -0.5em -0.5em);
}
.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* The reveal's clip-path is an inset rectangle on the border box, so it clips
   away anything painted OUTSIDE that box - which includes a box-shadow. On the
   overlap panel that left the corners as bare grey nubs with no soft lift under
   them. The panel reveals on opacity and transform only; it does not wipe. */
.overlap__panel[data-reveal],
.overlap__panel[data-reveal][data-inview="true"] { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transform: none;
    clip-path: none;
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }
  .nav__links { transition: none; }
  .btn, .nav__toggle { transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
  .btn:active, .nav__toggle:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .nav__links { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .cov, .chips li, .subjects li, .session { border-color: var(--ink); }
  .body, .lede, .cov p, .session dd { color: var(--ink); }
}

/* ==========================================================================
   HERO VARIANT - copy left, full-bleed landscape band beneath (inner pages)
   ========================================================================== */
.hero--stack .hero__grid { grid-template-columns: 1fr; align-items: start; }
.hero--stack .hero__grid > .d1 { max-width: 19ch; }
.hero--stack .hero__copy .body { margin-top: 1.4rem; }
.hero__wide { aspect-ratio: 16 / 7; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .hero--stack .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 6vw, 6rem); }
  .hero--stack .hero__copy .body { margin-top: 0; }
}

/* ==========================================================================
   BIG LIST - large-type items, no containers, two columns
   ========================================================================== */
.bigList {
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: 1fr;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.bigList li {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(17,17,17,0.14);
}
@media (min-width: 780px) { .bigList { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   LADDER - offset rows, each indented one step further
   ========================================================================== */
.ladder { display: grid; gap: 1.5rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.ladder li {
  padding: 1.2rem 0 0;
  border-top: 1.5px solid var(--ink);
  max-width: 34rem;
}
.ladder li h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
}
.ladder li p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
@media (min-width: 900px) {
  .ladder li:nth-child(2) { margin-left: 8%; }
  .ladder li:nth-child(3) { margin-left: 16%; }
  .ladder li:nth-child(4) { margin-left: 24%; }
  .ladder li:nth-child(5) { margin-left: 32%; }
}

/* ==========================================================================
   QUAD - four-cell bento for the Academy pillars
   ========================================================================== */
.quad { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 3rem; }
.quadcell {
  border-radius: 16px;
  padding: clamp(1.75rem, 3vw, 2.4rem);
}
.quadcell h3 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.quadcell > p { margin: 0 0 1.25rem; color: rgba(17,17,17,0.7); font-size: 0.96rem; }
/* Chip outlines here are load-bearing, not decoration. A white chip on a pale
   ground has no edge of its own, so when the border is too faint the chips read
   as blobs floating on colour - the client's "kindergarten class" note,
   2026-09-01. Measured against the grounds they actually sit on, the old
   rgba(17,17,17,0.08) scored 1.01:1 on grey-wash and 1.07:1 on cream: not
   subtle, invisible. Navy at 0.34 clears 1.55:1 or better on every pastel
   ground and 2.09:1 against the chip fill. Navy rather than black so the edge
   sits in the same family as the grounds instead of reading as dirt. */
/* Each card sets its own --chip-fill, a lighter shade of its own ground, so
   the chips belong to the card instead of sitting on it as white cut-outs.
   Literal values rather than color-mix() - measured, and one place to nudge.
   Mixed ~55% toward white, which is the same level as the existing --sky-wash
   (#e8f1fa lands within a point of the computed sky tint), so this sits on the
   palette's existing "wash" tier rather than inventing a new one.

   Tinting drops the chip's luminance step against its card (cream is only
   1.06:1 now), which is fine and intended: definition comes from --chip-line,
   not from the fill. The tint actually makes that border read slightly
   BETTER against the card than the white chips did - cream 1.89 -> 1.97 -
   because the border is composited over a marginally darker fill. */
.quadcell .chips li { background: var(--chip-fill, var(--paper)); }
.quadcell--a { background: var(--sky);       --chip-fill: #e9f1f9; }
.quadcell--b { background: var(--cream);     --chip-fill: #fefaee; }
.quadcell--c { background: var(--navy);      --chip-fill: rgba(255,255,255,0.10); }
.quadcell--d { background: var(--grey-wash); --chip-fill: #f6f6f7; }

/* Brand Academy moved from pink to navy, 2026-09-01. A dark ground inverts
   everything inside it, so this follows the same on-navy pattern the rest of
   the site uses (.sec--navy): white heading, softened white subtitle, and a
   translucent chip instead of a solid white one - four solid white chips on
   navy would punch far harder than the pastel cards and unbalance the quad.
   Measured on #1b1f3b: chip fill 1.35:1 against the card, border 2.50:1
   against the fill and 3.38:1 against the card, chip text 9.63:1. */
.quadcell--c h3 { color: #fff; }
.quadcell--c > p { color: rgba(255,255,255,0.72); }
.quadcell--c .chips li {
  border-color: rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.88);
}

@media (min-width: 880px) { .quad { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   LEGAL - long-form prose for the privacy policy and terms of use. Narrower
   measure than .body because these are read start to finish, not scanned.
   ========================================================================== */
.legal { max-width: 44rem; }
.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 3rem 0 0.9rem;
}
.legal h2:first-of-type { margin-top: 2.5rem; }
.legal h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}
.legal p, .legal li { color: var(--ink-soft); line-height: 1.65; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--accent); text-underline-offset: 0.22em; }
.legal__meta {
  font-size: 0.88rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--sky);
  padding-left: 1rem;
  margin: 0 0 2rem;
}

/* ==========================================================================
   RAIL CARD - generic scroll-track card (affiliate offers, brand partners)
   ========================================================================== */
.railcard {
  flex: 0 0 min(19rem, 76vw);
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--grey-line);
}
.railcard h3 {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
}
.railcard p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }
/* A named partner card carries their mark and a way to reach them. The others
   in this rail are still category placeholders with neither. */
/* max-width/object-fit for the same reason as .partner__logo - see there. */
.railcard__logo {
  height: 44px; width: auto; display: block; margin: 0 0 0.9rem;
  max-width: 100%; object-fit: contain;
}
/* A partner who supplied a composed graphic rather than a bare mark. It runs
   at the card's full width instead of in the small logo slot, because their
   name and message are set inside the artwork and would be illegible at 44px.
   The same text is repeated as real text below it - the image cannot be read
   by a screen reader or a search engine, and alt text alone is thin cover for
   a partner's actual offer. */
.railcard__graphic {
  width: 100%; height: auto; display: block;
  border-radius: 10px; margin: 0 0 1rem;
}
.railcard__contact { margin-top: 0.85rem !important; font-size: 0.86rem !important; }
.railcard__contact a { color: var(--accent); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
/* The partner rail is not a scroller, but .rail is: it is shared with
   academy.html, where 12 session cards genuinely need a horizontal track.
   Benefits now carries four partners, which fit one row at any desktop width.
   They only ever scrolled because .railcard is a rigid 19rem, so four of them
   plus gaps overran the shell by 8px - just enough to arm a scrollbar for no
   reason. This variant lets them flex to fill the row instead, then wrap to
   two-up and one-up as the viewport narrows. Academy keeps its track. */
.rail--wrap {
  /* Grid, not flex-wrap. Wrapping the flex track worked until a width left
     one card alone on the last row, where flex-grow stretched that single
     partner across the full 1065px while its three siblings sat at 344.
     Grid gives every card the same column whether the row is full or not.
     This is the same auto-fit pattern .partners uses on the homepage, so the
     two partner displays now break at the same points.
     18rem, not .railcard's 19rem: four at 19rem plus gaps come to 1264px
     against a 1256px shell, over by the 8 that armed the scrollbar.
     14rem since 2026-10-06: Mack Kalish Photography made it five partners,
     and at 18rem the fifth sat alone on a second row. 14rem is the same
     minimum .partners uses, so both displays still break together. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  align-items: start;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}
.rail--wrap > .railcard {
  flex: initial;
  scroll-snap-align: none;
}

.railcard:nth-child(even) { background: var(--cream); border-color: transparent; }
.sec--cream .railcard:nth-child(even) { background: var(--sky-wash); }

/* ==========================================================================
   NOTE - the plan-language disclaimer the benefits copy needs
   ========================================================================== */
.note {
  margin-top: 2.5rem;
  padding: 1.1rem 1.35rem;
  border-left: 2px solid var(--accent);
  background: rgba(28,59,52,0.045);
  border-radius: 0 10px 10px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.sec--navy .note { background: rgba(255,255,255,0.07); border-left-color: var(--sky); color: rgba(255,255,255,0.8); }

/* ==========================================================================
   MOBILE AUDIT FIXES (2026-08-20)
   Three things the mobile pass caught: label text under 12px, tap targets
   under the 44px minimum, and a toggle 2px short of it.
   ========================================================================== */

/* No visible label sits under 12px. Uppercase tracked text is the hardest
   thing on the page to read small, and it was the smallest. */
.brand__mark { width: 30px; height: 30px; font-size: 0.75rem; }
.session dt  { font-size: 0.78rem; }

/* 44px minimum on everything tappable. */
.nav__toggle { width: 44px; height: 44px; }

@media (max-width: 860px) {
  /* Header and footer wordmarks are both links, so both need the target
     size, not just the one in the header. */
  .brand { padding-block: 0.5rem; }

  /* Footer links were 19px tall inline boxes stacked 9.6px apart. Made them
     block-level with real vertical padding so each one is a comfortable
     target rather than a thin line of text. */
  .foot ul { gap: 0.15rem; }
  .foot ul a { display: block; padding-block: 0.7rem; }
  .foot__base { gap: 0.5rem 1.75rem; }
  .foot__base a { display: inline-block; padding-block: 0.8rem; }
}

/* The generic `.foot a` font-size was beating `.brand` on specificity, so the
   footer wordmark was rendering at body-link size instead of logo size. This
   applies at every width, not just mobile. */
.foot .brand { font-size: 1.16rem; }

/* The open mobile menu was see-through, with the hero headline legible behind
   the links. Cause: .nav carries a backdrop-filter, which makes it a backdrop
   root, so the panel's own backdrop-filter sampled the already-composited
   parent instead of the page and did nothing. That left rgba(255,255,255,0.94)
   over a translucent nav to do all the work. A menu that overlays body copy is
   never allowed to be translucent, so the panel is now fully opaque and its
   redundant filter is removed. Direction B was unaffected: its panel background
   was already a solid colour. */
@media (max-width: 860px) {
  .nav__links {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 12px 24px -18px rgba(17, 17, 17, 0.45);
  }
}