:root {
  /* Warm ink-black, not a neutral dark-mode grey. */
  --bg: #161513;
  --text: #f2efe8;
  --text-dim: #c2beb5;
  --nav-ink: #b4b0a7;
  --text-mute: #8f8b83;
  --accent: #6fa99b;
  /* Brand ivory, held for the wordmark and marks — the colorway rule
     names this exact value for an ink ground. */
  --ivory: #f4f2ee;
  --wordmark-size: clamp(26.14px, 2.788vw, 40.08px);
  --ink: #0e1013;

  --col: 720px;

  --pad-x: clamp(20px, 5vw, 48px);
  --pad-top: clamp(28px, 5vw, 56px);

  --t-nav: clamp(12px, 0.95vw, 13px);
  --t-body: 16px;

  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html,
body { margin: 0; padding: 0; }

html {
  scrollbar-gutter: stable;
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Anything scrolled to by anchor stops below the sticky nav rather
     than under it: the nav's top offset plus its own height. */
  scroll-padding-top: calc(clamp(12px, 2vw, 20px) + 72px);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: clip;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* --- Header ---------------------------------------------------- */
/* Header holds only the wordmark and scrolls away with the page; the
   nav is a sibling that becomes a sticky pill at the top. */

.site-header {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--pad-top) var(--pad-x) clamp(14px, 2vw, 28px);
}
/* The official lockup: mark then wordmark, at the proportions the
   supplied lockup-star-*.svg is drawn to — mark box 1.5x the
   wordmark's font-size, gap 0.917x, mark optically centred on the
   cap height rather than the text's bounding box. Composed from the
   approved mark path plus live Archivo text, because the supplied
   lockup files set the wordmark as <text> and would fall back to a
   substitute face on any machine without Archivo.
   Sizing is in em of --wordmark-size, so the whole lockup scales as
   one object. */
.logo {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  font-size: var(--wordmark-size);
  gap: 0.917em;
  line-height: 0;
  text-decoration: none;
  color: var(--ivory);
  /* Ivory mark on the page ground; --ground feeds the tile knockout. */
  --ground: #161513;
  /* The optical nudge now carries the whole lockup, not just the text. */
  transform: translateY(0.03em);
}
.logo__mark {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  /* The mark stands taller than the wordmark's cap-height line box.
     Collapsing the difference into negative block margins keeps the
     header exactly the height it was — the mark overhangs into
     padding that already existed. */
  margin-block: calc((0.698em - 1.5em) / 2);
}
.logo__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* The wordmark is type, not art: Archivo Semibold, uppercase, with
   uniform 0.18em tracking and no optical kerning. Sized so its cap
   height matches the wordmark it replaced, keeping the masthead's
   vertical rhythm unchanged. Cap height stays above 14px at every
   viewport, so the 0.14em small-size tracking never applies. */
.wordmark {
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  /* Sized from Archivo's 0.698em cap height, inherited from .logo so
     mark and wordmark stay locked to one scale. */
  font-size: 1em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Cap-height line box, so the span occupies exactly what the SVG
     did and the masthead's vertical rhythm doesn't shift. Safe here:
     an all-caps BEDLOE has no descenders. */
  line-height: 0.698;
  white-space: nowrap;
  /* Ivory on the oxblood ground, inherited via currentColor. */
  color: currentColor;
  /* Tracking adds a trailing space after the final E, which throws
     the optical centering of a centered masthead. Cancel just that
     trailing space — inter-letter tracking stays uniform. */
  margin-right: -0.18em;
}

/* --- Link bar (sticky nav pill) -------------------------------- */

.site-nav {
  position: sticky;
  top: clamp(12px, 2vw, 20px);
  z-index: 50;
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 0 auto clamp(28px, 4vw, 44px);
  --pill-pad-y: 6px;
  --pill-pad-x: 6px;
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: 999px;
  font-size: var(--t-nav);
  background: transparent;
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    box-shadow 0.35s ease;
}
.site-nav.is-stuck {
  /* Fully opaque: a sticky bar necessarily has content pass behind
     it, so the fix is that nothing shows through. The tint sits a
     step darker than the page so it still reads as a floating bar. */
  background: var(--nav-tint, var(--bg));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* Inner active-link pill — hugs the active link's bounds; JS drives
   left/width. */
.site-nav__pill {
  position: absolute;
  top: var(--pill-pad-y);
  left: 0;
  height: calc(100% - var(--pill-pad-y) * 2);
  width: 0;
  background: rgba(242, 239, 232, 0.1);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  transform-origin: 50% 50%;
}
.site-nav:has(.site-nav__home.is-active) .site-nav__pill {
  background: var(--text);
}

.site-nav__link {
  position: relative;
  z-index: 1;
  /* Wider side padding is what opens the space between labels — the
     links sit flush, so their padding is the gap. */
  padding: 11px 19px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--nav-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.35s ease;
  white-space: nowrap;
}
.site-nav__link.is-active { color: var(--text); }
.site-nav__link:not(.is-active):hover { opacity: 0.7; }

/* Home (F icon) — collapsed at page top, grows in once the nav sticks. */
.site-nav__link.site-nav__home {
  width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-nav__home-icon {
  width: 16px;
  height: auto;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  transition: filter 0.35s ease;
}
.site-nav__link.is-active .site-nav__home-icon { filter: brightness(0); }

/* --- Page column ----------------------------------------------- */

.page {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  /* The added 3.4vh drops the hero block; the taller wordmark and
     the wider gap under it contribute the rest, putting the block a
     net ~5% of viewport height lower than before. */
  padding: calc(clamp(80px, 12vw, 160px) + 3.4vh) var(--pad-x)
    clamp(64px, 7.5vw, 108px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 96px);
}

/* --- Hero ------------------------------------------------------ */

.hero h1 {
  margin: 0 auto;
  font-family: var(--font-sans);
  /* Same breakout as before, the ramp scaled up ~15%. */
  font-size: clamp(32px, 5.18vw, 62px);
  /* Light, editorial — not a heavy marketing headline. */
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-align: center;
  color: var(--text);
  /* Break out of the .page 720px column so the lead headline can
     breathe, with a side gutter equal to var(--pad-x). */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100vw - var(--pad-x) * 2));
  max-width: 100vw;
}

/* Inter Tight draws the trademark near cap height, which at hero
   scale competes with the words. Scale it back and lift it so it
   sits as a mark against the cap line, not as a seventh letter. */
.hero__tm {
  font-size: 0.34em;
  letter-spacing: 0;
  position: relative;
  top: -0.92em;
  margin-left: 0.04em;
}

/* Supporting copy — held to a narrower measure than the headline's
   breakout so it reads as a sub, not a second headline. */
.hero__sub {
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  max-width: 620px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: -0.004em;
  text-align: center;
  text-wrap: pretty;
  color: var(--text-dim);
}

/* Understated CTA: text and arrow on a hairline rule. No fill. */
.hero__cta {
  display: inline-block;
  margin: clamp(30px, 3.6vw, 44px) auto 0;
  padding-bottom: 7px;
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  /* A lighter tint of the same accent, and a firmer rule — more
     legible without becoming a button. */
  color: #8cc0b3;
  border-bottom: 1px solid color-mix(in srgb, #8cc0b3 55%, transparent);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.hero__cta:hover {
  border-bottom-color: #8cc0b3;
}
.hero__cta-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.36, 1);
}
.hero__cta:hover .hero__cta-arrow {
  transform: translateX(3px);
}
/* The hero is a centred column; the CTA is inline so its rule hugs
   the text rather than spanning the measure. */
.hero {
  text-align: center;
}

/* --- Mark in the nav identity slot ------------------------------ */

/* The slot was sized for the 16px raster F; the marks are specified
   at 20-24px in nav, so the box grows to fit them. Sizing lives on
   the mark itself (per-mark, from the approved geometry). */
.site-nav__home-icon {
  width: auto;
  /* The mark sets the bar's height whenever the home pill is open,
     so this is the dial that actually scales the nav. */
  --nav-mark: 25px;
  /* Ivory mark on the oxblood cover. The nav's own tint is the
     ground behind it, so the tile knocks out to that. */
  color: var(--ivory);
  --ground: #161513;
  /* The raster F needed a filter to flip tone; an inlined mark
     follows currentColor instead. */
  filter: none;
}
.site-nav.is-stuck .site-nav__home-icon {
  --ground: #100f0d;
}
/* Active: the ivory pill sits behind the slot, so the colorway
   flips — ink mark on ivory ground. */
.site-nav__link.is-active .site-nav__home-icon {
  color: var(--ink);
  --ground: #f2efe8;
  filter: none;
}
.site-nav__home-icon svg {
  display: block;
  width: var(--nav-mark);
  height: var(--nav-mark);
}

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

/* ─── After the hero ─────────────────────────────────────────────
   One continuous surface: same ground, no section background of its
   own. The rule, the statement and the organization rail sit on
   three different measures — gutter-wide, a reading column, and
   full width — which is what gives the section its structure. */

/* The handoff out of the hero, read top to bottom: a full-width
   horizontal edge, then a centred vertical rule holding the pause
   before the statement lands. The two are sequential rather than
   crossing — the rule closes the hero, the vertical opens section
   two. */
.seam {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Architectural, not a content separator: it runs nearly the full
   width, far wider than any column it sits between. */
.rule {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(242, 239, 232, 0.18);
  width: calc(100% - clamp(16px, 2.2vw, 32px) * 2);
  margin: 0;
}

/* The pause. Long enough to read as a deliberate device rather than
   a tick mark, with air on both sides so it isn't crowded by either
   section. */
.seam__line {
  width: 1px;
  height: clamp(94px, 7.4vw, 106px);
  margin-top: clamp(28px, 2.9vw, 42px);
  background: rgba(242, 239, 232, 0.24);
}

.thesis {
  /* The deeper bottom padding is the dark chapter's own breathing
     room: the logo row finishes, the black holds, and only then does
     the ivory sheet arrive over it. */
  padding: clamp(42px, 4.2vw, 60px) var(--pad-x) clamp(104px, 11.5vw, 168px);
}

/* Wider than the hero's reading column so the statement carries at
   large sizes, still short of the rule's span. */
.thesis__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

/* Manifesto scale — well above the hero's 62px, so the section
   states what Bedloe is rather than echoing what it does. Tight
   leading at this size is what reads as confidence; the weight
   stays at regular. */
.thesis__lead {
  margin: 0 auto;
  font-size: clamp(33px, 6.3vw, 82px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text);
  /* Both statements are near-identical in length, so they have to
     set to the same line count — otherwise the bright one reads
     smaller than the gray one. At 1080px both balance to three
     lines with even rags, and the pattern holds unchanged down to
     920px, so the break is stable rather than knife-edge. */
  text-wrap: balance;
}
/* Second beat: same scale, dropped to a soft gray so the two read
   as a hierarchy rather than as two competing headlines. */
.thesis__lead--soft {
  margin-top: clamp(22px, 2.6vw, 40px);
  color: #a5a199;
}

/* Understated label, a long beat after the statement. */
.trust {
  margin: clamp(58px, 6.2vw, 90px) auto 0;
  font-size: clamp(13px, 0.98vw, 14px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-mute);
  text-align: center;
}

/* Full-width rail. Negative inline margins cancel the section's
   gutter rather than using 100vw, which would overshoot by the
   scrollbar gutter and clip. Overflow is hidden, not auto: the row
   moves on its own now, so there is nothing to hand-scroll. */
.orgs-rail {
  margin: clamp(24px, 2.8vw, 38px) calc(var(--pad-x) * -1) 0;
  overflow: hidden;
}

/* Two identical copies travelling left as one strip. Translating by
   exactly -50% lands copy two where copy one began, so the loop has
   no seam. The trailing padding on each copy supplies the gap across
   the join, which is what keeps the spacing even through it. */
.orgs-marquee {
  display: flex;
  width: max-content;
  animation: orgs-drift 52s linear infinite;
}
.orgs-marquee:hover {
  animation-play-state: paused;
}
@keyframes orgs-drift {
  to {
    transform: translateX(-50%);
  }
}

.orgs {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.5vw, 84px);
  padding: 0 clamp(40px, 5.5vw, 84px) 0 0;
  margin: 0;
  list-style: none;
}

/* No drift: fall back to a single static row the reader can scroll
   by hand. Declared after the animation so it wins the cascade. */
@media (prefers-reduced-motion: reduce) {
  .orgs-marquee {
    animation: none;
  }
  .orgs-rail {
    overflow-x: auto;
  }
  .orgs[aria-hidden="true"] {
    display: none;
  }
}

.orgs li {
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: 0.004em;
  color: #aaa69d;
  white-space: nowrap;
}

/* ─── Approach ───────────────────────────────────────────────────
   The chapter break. The section paints its own ivory ground over
   the page's ink, so the change lands on one hard edge — no fade,
   no gradient, no transition on the property. The dark opening
   carries identity and ambition; this one has to explain, so it
   trades the centred manifesto axis for an asymmetric editorial
   grid and a smaller, calmer voice. */
.approach {
  background-color: #f4f1e8;
  color: #171714;
  /* Inset from both edges and rounded only at the top, so the ivory
     reads as a sheet laid over the black rather than the next block
     in a stack — the dark stays visible down both margins and in the
     two top corners. No border, no card. */
  margin-inline: clamp(16px, 2vw, 28px);
  border-radius: clamp(14px, 1.25vw, 18px) clamp(14px, 1.25vw, 18px) 0 0;
  /* Deep enough at the top that the ivory reads as a new chapter
     rather than a change of paint. */
  padding: clamp(124px, 14vw, 204px) var(--pad-x) clamp(110px, 13vw, 200px);
  /* The sheet settles the last stretch of its arrival. Default state
     is the resting one, so with no JS the panel simply sits there. */
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.85s ease;
}
/* Armed by JS just before the panel comes into view. Movement is
   small and one-directional — a sheet sliding into place, not a
   parallax layer. */
.approach[data-reveal="pending"] {
  transform: translateY(52px);
  opacity: 0.97;
}
@media (prefers-reduced-motion: reduce) {
  .approach,
  .approach[data-reveal="pending"] {
    transform: none;
    opacity: 1;
    transition: none;
  }
}
.approach__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.approach__eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #66635d;
}

/* Hairline across the full measure — the section's top edge, and the
   line everything below hangs from. */
.approach__rule {
  height: 0;
  border: 0;
  border-top: 1px solid #d9d5cc;
  margin: 0 0 clamp(44px, 5.6vw, 84px);
}

/* Asymmetric: the statement takes the wide left measure, the
   explanation sits in a narrow column beside it. */
.approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.approach__statement {
  margin: 0;
  font-size: clamp(28px, 4.3vw, 58px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #171714;
  text-wrap: balance;
}

/* Significantly smaller than the statement, and set in the secondary
   tone so the two never compete. The top offset drops its first line
   onto the statement's first baseline rather than its box top. */
.approach__body {
  margin: 0.5em 0 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: -0.003em;
  color: #66635d;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .approach__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 36px);
  }
  .approach__body {
    margin-top: 0;
  }
}

/* ─── Who we serve ───────────────────────────────────────────────
   Back into the dark environment. The ivory sheet ends and the black
   resumes full-bleed, so the chapter turns on the ground itself
   rather than on a device. Left-aligned throughout — the centred
   axis belongs to the opening chapter; this one is structural. */
.serve {
  background-color: #161513;
  color: #f2efe8;
  padding: clamp(104px, 12vw, 184px) 0 clamp(110px, 13vw, 190px);
}
.serve__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.serve__eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9a59d;
}
.serve__rule {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(242, 239, 232, 0.14);
  margin: 0 0 clamp(52px, 6.4vw, 96px);
}

/* Two sentences, one hard break — the turn between them is the whole
   statement, so it never gets to depend on where the measure runs
   out. */
.serve__thesis {
  margin: 0;
  /* No measure cap: at 76px the first sentence runs 1051px inside a
     1240px column, so the <br> stays the only break in the line. A
     cap here would have re-wrapped it after "is". */
  font-size: clamp(32px, 5.6vw, 76px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: #f2efe8;
}
.serve__sub {
  margin: clamp(32px, 4vw, 56px) 0 0;
  max-width: 560px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.66;
  letter-spacing: -0.003em;
  color: #a9a59d;
  text-wrap: pretty;
}

/* --- The map ---------------------------------------------------- */

/* Wider than the reading column so it reads as architecture rather
   than as an illustration sitting inside the text. */
.serve-map {
  margin: clamp(64px, 8vw, 124px) auto clamp(56px, 7vw, 104px);
  max-width: 1560px;
  padding-inline: clamp(12px, 2vw, 32px);
}
.serve-map svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Land is a grid of small squares sampled from real coastline data,
   held far back so it reads as texture, not as a chart. */
.serve-map__land {
  fill: rgba(242, 239, 232, 0.2);
}
/* A handful of points, no connecting lines — the claim is that the
   talent is distributed, not that it forms a network. */
.serve-map__node {
  fill: #6fa99b;
  animation: serve-node 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.42s);
}
@keyframes serve-node {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* --- Audience rows ---------------------------------------------- */

/* Rows, not cards: hairlines top and bottom, no fill, no radius, no
   icon. Each one is a category in a list, the way a firm states what
   it covers. */
.serve__list {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
  list-style: none;
}
.serve-row {
  display: grid;
  grid-template-columns: 68px minmax(200px, 0.95fr) minmax(0, 1.7fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: baseline;
  padding: clamp(30px, 3.4vw, 46px) clamp(10px, 1.4vw, 22px);
  margin-inline: clamp(-10px, -1.4vw, -22px);
  border-top: 1px solid rgba(242, 239, 232, 0.12);
  transition: background-color 0.35s ease;
}
.serve-row:last-child {
  border-bottom: 1px solid rgba(242, 239, 232, 0.12);
}
.serve-row:hover {
  background-color: rgba(242, 239, 232, 0.028);
}
.serve-row__index {
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #66635d;
  transition: color 0.35s ease;
}
.serve-row:hover .serve-row__index {
  color: #6fa99b;
}
.serve-row__title {
  margin: 0;
  font-size: clamp(20px, 1.95vw, 27px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: #f2efe8;
}
.serve-row__desc {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.62;
  color: #a9a59d;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .serve-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .serve-row__index {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .serve-map__node {
    animation: none;
    opacity: 0.9;
  }
}

/* ─── Why Bedloe ─────────────────────────────────────────────────
   Second chapter inside the same dark environment. No new ground —
   the separation is carried by a long run of black and by the
   eyebrow-and-hairline that opens every chapter on this page. */
.why {
  background-color: #161513;
  color: #f2efe8;
  /* The deep bottom padding is the runway for the ivory sheet that
     follows: the Method panel arrives inset and rounded over this
     black the same way Approach does over the logo row. */
  padding: clamp(80px, 9vw, 132px) 0 clamp(104px, 11.5vw, 168px);
}
.why__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.why__eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9a59d;
}
.why__rule {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(242, 239, 232, 0.14);
  margin: 0 0 clamp(44px, 5.4vw, 80px);
}

/* Large and left-aligned, but deliberately under the two opening
   statements — the manifesto at 82px and the global thesis at 76px
   still own the top of the page. */
.why__statement {
  margin: 0 0 clamp(56px, 7vw, 104px);
  font-size: clamp(30px, 4.9vw, 66px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: #f2efe8;
}

/* --- Differentiator rows ---------------------------------------- */

/* Same institutional row language as Who We Serve, set larger so the
   two chapters read as related rather than repeated. */
.why__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.why-row {
  display: grid;
  grid-template-columns: 84px minmax(240px, 1fr) minmax(0, 1.45fr);
  gap: clamp(16px, 3vw, 60px);
  align-items: baseline;
  padding: clamp(34px, 4vw, 56px) clamp(10px, 1.4vw, 22px);
  margin-inline: clamp(-10px, -1.4vw, -22px);
  border-top: 1px solid rgba(242, 239, 232, 0.12);
  /* The teal arrives on the rule itself — the only hover move. */
  transition: border-top-color 0.4s ease;
}
.why-row:last-child {
  border-bottom: 1px solid rgba(242, 239, 232, 0.12);
}
.why-row:hover {
  border-top-color: #6fa99b;
}
.why-row__num {
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.14em;
  color: #66635d;
  transition: color 0.4s ease;
}
.why-row:hover .why-row__num {
  color: #6fa99b;
}
.why-row__title {
  margin: 0;
  font-size: clamp(21px, 2.25vw, 31px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #f2efe8;
}
.why-row__desc {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.62;
  color: #a9a59d;
  transition: color 0.4s ease;
  text-wrap: pretty;
}
.why-row:hover .why-row__desc {
  color: #c2beb5;
}

@media (max-width: 860px) {
  .why-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .why-row__num {
    order: -1;
  }
}

/* ─── Method ─────────────────────────────────────────────────────
   Back to ivory, using the same sheet language as Approach: inset
   from both edges, rounded at the top only, arriving over the black
   of Why Bedloe. Values mirror .approach deliberately — the two are
   the same page layer at two points in the scroll. */
.method {
  background-color: #f4f1e8;
  color: #171714;
  margin-inline: clamp(16px, 2vw, 28px);
  border-radius: clamp(14px, 1.25vw, 18px) clamp(14px, 1.25vw, 18px) 0 0;
  padding: clamp(124px, 14vw, 204px) var(--pad-x) clamp(110px, 13vw, 200px);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.85s ease;
}
.method[data-reveal="pending"] {
  transform: translateY(52px);
  opacity: 0.97;
}
@media (prefers-reduced-motion: reduce) {
  .method,
  .method[data-reveal="pending"] {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

.method__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.method__eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #66635d;
}
.method__rule {
  height: 0;
  border: 0;
  border-top: 1px solid #d9d5cc;
  margin: 0 0 clamp(44px, 5.4vw, 80px);
}

/* Approach states a belief; this one states a sequence. Set a step
   below the Approach statement so the philosophical line stays the
   louder of the two. */
.method__statement {
  margin: 0 0 clamp(56px, 7vw, 100px);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.024em;
  color: #171714;
  /* Sets the headline in two balanced lines; the longer "published
     media recognition" wording needs 740px to avoid a third. */
  max-width: 780px;
  text-wrap: balance;
}

/* --- Stages: horizontal framework -------------------------------- */

/* Four equal columns reading as one system. The hairlines are the
   grid's own background showing through 1px gaps, which keeps them
   continuous and correct in every breakpoint — including the 2x2,
   where a border-based approach needs per-cell nth-child rules.
   Why Bedloe stacks reasons vertically; this is a process, so it
   runs across. */
.method-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background-color: #d9d5cc;
  border-top: 1px solid #d9d5cc;
  border-bottom: 1px solid #d9d5cc;
  margin: 0;
  padding: 0;
  list-style: none;
}
.method-stage {
  /* Matching the section ground, so the cells are invisible and only
     the hairlines between them read. Not a card: no border of its
     own, no radius, no separate fill. */
  background-color: #f4f1e8;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.2vw, 34px);
}
/* Understated: the numeral measures the stage, the title carries it. */
.method-stage__num {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 34px);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #a9a49a;
}
.method-stage__title {
  margin: 0 0 clamp(10px, 1.1vw, 15px);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #171714;
}
.method-stage__desc {
  margin: 0;
  font-size: clamp(13px, 0.98vw, 14.5px);
  font-weight: 400;
  line-height: 1.6;
  color: #66635d;
  text-wrap: pretty;
}

/* Tablet: 2 x 2, same hairline mechanism, no rule changes needed. */
@media (max-width: 1040px) {
  .method-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .method-flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .method-stage__num {
    margin-bottom: 14px;
  }
}

@media (max-width: 860px) {
  .method__statement {
    max-width: none;
  }
}

/* ─── Press ──────────────────────────────────────────────────────
   Back to black after the ivory Method sheet. Treated as an archive
   the company keeps, not a logo wall it displays — publication names
   stay small and quiet, the headline is the object. */
.press {
  background-color: #161513;
  color: #f2efe8;
  padding: clamp(96px, 11vw, 168px) 0 clamp(104px, 12vw, 180px);
}
.press__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.press__eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9a59d;
}
.press__rule {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(242, 239, 232, 0.14);
  margin: 0 0 clamp(44px, 5.4vw, 80px);
}
.press__statement {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: #f2efe8;
}
.press__sub {
  margin: clamp(26px, 3vw, 40px) 0 clamp(56px, 7vw, 104px);
  max-width: 620px;
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 300;
  line-height: 1.66;
  color: #a9a59d;
  text-wrap: pretty;
}

/* --- Entries ----------------------------------------------------- */

.press__list {
  border-top: 1px solid rgba(242, 239, 232, 0.12);
}
/* Whole row is one link: publication, headline, date and arrow are a
   single target rather than four. */
.press-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.5fr) minmax(0, 2.2fr) minmax(110px, 0.42fr) 24px;
  gap: clamp(16px, 2.6vw, 48px);
  align-items: baseline;
  padding: clamp(30px, 3.6vw, 50px) clamp(8px, 1.2vw, 18px);
  margin-inline: clamp(-8px, -1.2vw, -18px);
  border-bottom: 1px solid rgba(242, 239, 232, 0.12);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.35s ease;
}
.press-row:hover {
  background-color: rgba(242, 239, 232, 0.028);
}
.press-row__pub {
  font-size: clamp(10px, 0.8vw, 11px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a9a59d;
  transition: color 0.35s ease;
}
.press-row:hover .press-row__pub {
  color: #6fa99b;
}
/* The strongest element in the row. */
.press-row__headline {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.016em;
  color: #f2efe8;
  text-wrap: pretty;
}
.press-row__date {
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #66635d;
}
.press-row__arrow {
  justify-self: end;
  font-size: 16px;
  color: #66635d;
  transition: transform 0.35s cubic-bezier(0.2, 1, 0.36, 1), color 0.35s ease;
}
.press-row:hover .press-row__arrow {
  color: #6fa99b;
  transform: translateX(4px);
}
/* "Read article" is kept for screen readers and for narrow layouts,
   where the bare arrow is not a label on its own. */
.press-row__cta {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.press__all {
  display: inline-block;
  margin-top: clamp(44px, 5vw, 72px);
  padding-bottom: 7px;
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8cc0b3;
  border-bottom: 1px solid color-mix(in srgb, #8cc0b3 55%, transparent);
  transition: border-color 0.3s ease;
}
.press__all:hover {
  border-bottom-color: #8cc0b3;
}
.press__all-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.36, 1);
}
.press__all:hover .press__all-arrow {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .press-row {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 8px clamp(12px, 3vw, 20px);
    align-items: start;
  }
  .press-row__pub {
    grid-column: 1;
  }
  .press-row__headline {
    grid-column: 1;
  }
  .press-row__date {
    grid-column: 1;
  }
  .press-row__arrow {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
}

/* The archive route reuses the homepage's press styles wholesale;
   only the standalone page's top spacing differs. */
.press--archive {
  padding-top: clamp(80px, 9vw, 132px);
  min-height: 100vh;
}

/* ─── Insights ───────────────────────────────────────────────────
   Bedloe's own writing, so it gets the ivory sheet — the same page
   layer as Approach and Method — rather than the dark environment
   Press sits in. Press is the outside world; this is the house. */
.insights {
  background-color: #f4f1e8;
  color: #171714;
  margin-inline: clamp(16px, 2vw, 28px);
  border-radius: clamp(14px, 1.25vw, 18px) clamp(14px, 1.25vw, 18px) 0 0;
  padding: clamp(110px, 12.5vw, 184px) var(--pad-x) clamp(104px, 12vw, 176px);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.85s ease;
}
.insights[data-reveal="pending"] {
  transform: translateY(52px);
  opacity: 0.97;
}
.insights__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.insights__eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #66635d;
}
.insights__rule {
  height: 0;
  border: 0;
  border-top: 1px solid #d9d5cc;
  margin: 0 0 clamp(44px, 5.4vw, 80px);
}
.insights__statement {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.024em;
  color: #171714;
}
.insights__sub {
  margin: clamp(24px, 2.8vw, 38px) 0 clamp(56px, 6.5vw, 96px);
  max-width: 560px;
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 400;
  line-height: 1.66;
  color: #66635d;
  text-wrap: pretty;
}

/* Lead entry across the top, three beneath — a front page, not a
   grid of equal cards. Hairlines do the separating; nothing is
   boxed, filled or shadowed. */
.insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 56px);
  row-gap: 0;
}
.insight {
  display: block;
  padding: clamp(26px, 3vw, 40px) 0 clamp(28px, 3.2vw, 44px);
  border-top: 1px solid #d9d5cc;
  text-decoration: none;
  color: inherit;
}
.insight--feature {
  grid-column: 1 / -1;
  padding-bottom: clamp(36px, 4.4vw, 60px);
}
.insight__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.insight__category {
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #66635d;
  transition: color 0.35s ease;
}
.insight:hover .insight__category {
  color: #4d8a7c;
}
.insight__date {
  font-size: clamp(10px, 0.78vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a09c93;
}
.insight__headline {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-size: clamp(19px, 1.65vw, 23px);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.017em;
  color: #171714;
  text-wrap: pretty;
}
.insight--feature .insight__headline {
  max-width: 24ch;
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.023em;
}
.insight__dek {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  color: #66635d;
  text-wrap: pretty;
}
.insight--feature .insight__dek {
  max-width: 54ch;
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.65;
}
.insight__cta {
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4d8a7c;
}
.insight__cta span {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.36, 1);
}
.insight:hover .insight__cta span {
  transform: translateX(4px);
}

.insights__all {
  display: inline-block;
  margin-top: clamp(44px, 5vw, 72px);
  padding-bottom: 7px;
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #4d8a7c;
  border-bottom: 1px solid rgba(77, 138, 124, 0.5);
  transition: border-color 0.3s ease;
}
.insights__all:hover {
  border-bottom-color: #4d8a7c;
}
.insights__all-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.36, 1);
}
.insights__all:hover .insights__all-arrow {
  transform: translateX(3px);
}

/* ─── Final CTA ──────────────────────────────────────────────────
   Returns to the hero's centred axis — the page opens and closes on
   the same composition, which is what separates it from the
   left-aligned attorney block directly above. */
.final-cta {
  background-color: #161513;
  color: #f2efe8;
  padding: clamp(96px, 11vw, 168px) var(--pad-x) clamp(104px, 12vw, 180px);
  text-align: center;
}
.final-cta__inner {
  max-width: 900px;
  margin: 0 auto;
}
.final-cta__eyebrow {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9a59d;
}
.final-cta__statement {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(28px, 3.9vw, 52px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.024em;
  color: #f2efe8;
  text-wrap: balance;
}
.final-cta__sub {
  margin: clamp(24px, 2.8vw, 36px) auto 0;
  max-width: 560px;
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 300;
  line-height: 1.66;
  color: #a9a59d;
  text-wrap: pretty;
}
/* Reuses the hero's CTA treatment verbatim — same link, same rule. */
.final-cta__link {
  margin-top: clamp(34px, 4vw, 52px);
}

/* ─── Footer ─────────────────────────────────────────────────────
   A shade under the page black rather than a new colour. Carries the
   architecture the floating nav deliberately leaves out. */
.site-footer {
  background-color: #100f0d;
  color: #f2efe8;
  padding: clamp(72px, 8vw, 116px) var(--pad-x) clamp(36px, 4vw, 52px);
}
.site-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.site-footer__brand {
  padding-bottom: clamp(44px, 5vw, 72px);
}
/* Same lockup proportions as the masthead, set smaller. */
.footer-lockup {
  display: inline-flex;
  align-items: center;
  font-size: clamp(19px, 1.5vw, 22px);
  gap: 0.917em;
  line-height: 0;
  text-decoration: none;
  color: var(--ivory);
  --ground: #100f0d;
}
.footer-lockup__mark {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  margin-block: calc((0.698em - 1.5em) / 2);
}
.footer-lockup__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.site-footer__tagline {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: #f2efe8;
}
.site-footer__descriptor {
  margin: clamp(10px, 1.1vw, 14px) 0 0;
  max-width: 34ch;
  font-size: clamp(13px, 1vw, 14.5px);
  font-weight: 300;
  line-height: 1.6;
  color: #a9a59d;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 4.6vw, 68px) 0;
  border-top: 1px solid rgba(242, 239, 232, 0.1);
  border-bottom: 1px solid rgba(242, 239, 232, 0.1);
}
.footer-col__title {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #66635d;
}
.footer-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-col__list li + li {
  margin-top: clamp(9px, 1vw, 13px);
}
.footer-col__list a {
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 300;
  color: #a9a59d;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-col__list a:hover {
  color: #f2efe8;
}

.site-footer__legal {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px clamp(24px, 3vw, 48px);
  padding-top: clamp(28px, 3.2vw, 42px);
}
.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__legal-links a {
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.08em;
  color: #66635d;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer__legal-links a:hover {
  color: #a9a59d;
}
.site-footer__copyright {
  margin: 0;
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.08em;
  color: #66635d;
}
/* Present and findable, never dominant. */
.site-footer__disclaimer {
  grid-column: 1 / -1;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  max-width: 62ch;
  font-size: clamp(10.5px, 0.78vw, 11.5px);
  font-weight: 300;
  line-height: 1.55;
  color: #5a5751;
}

@media (max-width: 1040px) {
  .insights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(32px, 5vw, 48px);
  }
}
@media (max-width: 760px) {
  .insights__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-footer__legal {
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
  }
}
/* Narrow mobile: footer columns stack rather than squeezing two
   across — "For immigration attorneys" does not fit a 165px column. */
@media (max-width: 560px) {
  .site-footer__nav {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 6vw, 40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .insights,
  .insights[data-reveal="pending"] {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ─── Consultation form ──────────────────────────────────────────
   Lives inside the dark final section. Controls are transparent with
   hairline underlines — no filled fields, no cards, no shadows, and
   no default browser chrome. The heading above stays centred; the
   form itself reads left, because a centred form is unusable. */
.consult {
  max-width: 860px;
  margin: clamp(48px, 5.5vw, 76px) auto 0;
  text-align: left;
}
.consult__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(28px, 3.2vw, 44px);
}
.consult__field {
  display: flex;
  flex-direction: column;
}
/* An author-set display beats the UA's [hidden] rule, so the
   conditional attorney field would render even while hidden. */
.consult__field[hidden] {
  display: none;
}
.consult__label,
.consult__legend {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  /* A <legend> otherwise cuts a notch in its fieldset's border;
     floating it makes the hairline run unbroken across the group. */
  float: left;
  width: 100%;
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a9a59d;
}
.consult__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 239, 232, 0.22);
  border-radius: 0;
  color: #f2efe8;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 300;
  line-height: 1.5;
  transition: border-color 0.3s ease;
}
.consult__input::placeholder {
  color: #66635d;
}
.consult__input:focus {
  outline: none;
  border-bottom-color: #6fa99b;
}
.consult__input:focus-visible {
  outline: none;
}
/* Kills the blue autofill wash Chrome paints over dark fields. */
.consult__input:-webkit-autofill,
.consult__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f2efe8;
  -webkit-box-shadow: 0 0 0 1000px #161513 inset;
  caret-color: #f2efe8;
}

/* Native select chrome removed; the caret is a plain CSS wedge, not
   an icon set. */
.consult__select {
  position: relative;
}
.consult__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  cursor: pointer;
}
.consult__select::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1px solid #a9a59d;
  border-bottom: 1px solid #a9a59d;
  transform: rotate(45deg);
  pointer-events: none;
}
.consult__select select option {
  background: #161513;
  color: #f2efe8;
}

.consult__help {
  margin: 10px 0 0;
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 300;
  line-height: 1.5;
  color: #66635d;
}

/* --- Radio groups ------------------------------------------------ */

.consult__group {
  margin: 0 0 clamp(28px, 3.2vw, 44px);
  padding: clamp(24px, 2.8vw, 36px) 0 0;
  border: 0;
  border-top: 1px solid rgba(242, 239, 232, 0.1);
}
.consult__options {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 22px) clamp(22px, 2.6vw, 38px);
}
.opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* The native input stays in the tree for semantics and keyboard use;
   the visible control is the ring beside it. */
.opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.opt__dot {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(242, 239, 232, 0.3);
  border-radius: 50%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.opt input:checked + .opt__dot {
  border-color: #6fa99b;
  box-shadow: inset 0 0 0 3px #6fa99b;
}
.opt input:focus-visible + .opt__dot {
  outline: 2px solid #6fa99b;
  outline-offset: 3px;
}
.opt__label {
  font-size: clamp(14px, 1.05vw, 15.5px);
  font-weight: 300;
  line-height: 1.4;
  color: #f2efe8;
}

.consult__field--conditional {
  margin-bottom: clamp(28px, 3.2vw, 44px);
  max-width: 420px;
}

/* --- Validation -------------------------------------------------- */

.consult__error {
  margin: 10px 0 0;
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 400;
  line-height: 1.45;
  color: #d98b7a;
}
.consult__input[aria-invalid="true"] {
  border-bottom-color: #d98b7a;
}
.consult__group[data-invalid="true"] .opt__dot {
  border-color: rgba(217, 139, 122, 0.6);
}

/* --- Submit ------------------------------------------------------ */

.consult__submit {
  padding-top: clamp(8px, 1.2vw, 16px);
}
/* Same restrained rule-and-arrow treatment as every other CTA on the
   site — a button element, not a filled block. */
.consult__button {
  display: inline-block;
  padding: 0 0 7px;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, #8cc0b3 55%, transparent);
  border-radius: 0;
  color: #8cc0b3;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.3s ease;
}
.consult__button:hover {
  border-bottom-color: #8cc0b3;
}
.consult__button:focus-visible {
  outline: 2px solid #6fa99b;
  outline-offset: 4px;
}
.consult__button-arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.36, 1);
}
.consult__button:hover .consult__button-arrow {
  transform: translateX(3px);
}
.consult__note {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 300;
  color: #66635d;
}
.consult__status {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: clamp(12px, 0.9vw, 13.5px);
  font-weight: 400;
  line-height: 1.5;
  color: #a9a59d;
}

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

/* ─── Standalone pages (/faq, /for-attorneys) ────────────────────
   Same system as the homepage: dark hero, ivory sheet, dark close.
   No new tokens, no page-specific palette. */

.subpage-hero {
  background-color: #161513;
  color: #f2efe8;
  padding: clamp(120px, 13vw, 200px) var(--pad-x) clamp(80px, 9vw, 132px);
}
.subpage-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.subpage-hero__eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9a59d;
}
.subpage-hero__rule {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(242, 239, 232, 0.14);
  margin: 0 0 clamp(44px, 5.4vw, 80px);
}
.subpage-hero__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: #f2efe8;
}
.subpage-hero__sub {
  margin: clamp(26px, 3vw, 40px) 0 0;
  max-width: 620px;
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 300;
  line-height: 1.66;
  color: #a9a59d;
  text-wrap: pretty;
}

/* --- FAQ --------------------------------------------------------- */

/* Ivory sheet, same inset-and-rounded language as Approach/Method. */
.faq-sheet {
  background-color: #f4f1e8;
  color: #171714;
  margin-inline: clamp(16px, 2vw, 28px);
  border-radius: clamp(14px, 1.25vw, 18px) clamp(14px, 1.25vw, 18px) 0 0;
  padding: clamp(80px, 9vw, 132px) var(--pad-x) clamp(88px, 10vw, 148px);
}
.faq-sheet__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.faq-list {
  border-top: 1px solid #d9d5cc;
}
/* Native <details> so it works without JS and stays keyboard- and
   screen-reader-accessible. The name attribute makes the set behave
   as an accordion where supported; elsewhere they open independently,
   which is a fine fallback. */
.qa {
  border-bottom: 1px solid #d9d5cc;
}
.qa__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(26px, 3vw, 38px) 0;
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker {
  display: none;
}
.qa__q:focus-visible {
  outline: 2px solid #6fa99b;
  outline-offset: 4px;
}
.qa__text {
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.016em;
  color: #171714;
}
/* A hairline cross, drawn rather than iconographic: the vertical bar
   is dropped when the question opens, leaving a minus. */
.qa__mark {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 4px;
}
.qa__mark::before,
.qa__mark::after {
  content: "";
  position: absolute;
  background: #66635d;
  transition: opacity 0.25s ease;
}
.qa__mark::before {
  top: 6px;
  left: 0;
  width: 13px;
  height: 1px;
}
.qa__mark::after {
  left: 6px;
  top: 0;
  width: 1px;
  height: 13px;
}
.qa[open] .qa__mark::after {
  opacity: 0;
}
.qa__a {
  padding: 0 0 clamp(28px, 3.2vw, 40px);
  max-width: 68ch;
}
.qa__a p {
  margin: 0;
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.68;
  color: #66635d;
  text-wrap: pretty;
}

/* --- Attorney memo ----------------------------------------------- */

.memo {
  background-color: #f4f1e8;
  color: #171714;
  margin-inline: clamp(16px, 2vw, 28px);
  border-radius: clamp(14px, 1.25vw, 18px) clamp(14px, 1.25vw, 18px) 0 0;
  padding: clamp(88px, 10vw, 148px) var(--pad-x) clamp(88px, 10vw, 148px);
}
.memo__inner {
  max-width: 1240px;
  margin: 0 auto;
}
/* Statement left, argument right — the same asymmetry as Approach. */
.memo__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 88px);
  padding: clamp(40px, 4.6vw, 64px) 0;
  border-top: 1px solid #d9d5cc;
}
.memo__block:last-child {
  border-bottom: 1px solid #d9d5cc;
}
.memo__title {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: #171714;
}
.memo__body p {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.68;
  color: #66635d;
  text-wrap: pretty;
}
.memo__body p + p {
  margin-top: clamp(14px, 1.6vw, 20px);
}

/* --- Three principles -------------------------------------------- */

.principles {
  background-color: #161513;
  color: #f2efe8;
  padding: clamp(80px, 9vw, 132px) var(--pad-x) clamp(80px, 9vw, 132px);
}
.principles__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.principle {
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(242, 239, 232, 0.14);
}
.principle__title {
  margin: 0 0 clamp(10px, 1.2vw, 15px);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.016em;
  color: #f2efe8;
}
.principle__desc {
  margin: 0;
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 300;
  line-height: 1.6;
  color: #a9a59d;
  text-wrap: pretty;
}
.principles__closing {
  margin: clamp(56px, 6.5vw, 96px) 0 0;
  max-width: 30ch;
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: #f2efe8;
}

/* --- Closing CTA (shared by both pages) --------------------------- */

.closing-cta {
  background-color: #161513;
  color: #f2efe8;
  padding: clamp(80px, 9vw, 132px) var(--pad-x) clamp(96px, 11vw, 160px);
  border-top: 1px solid rgba(242, 239, 232, 0.1);
  text-align: center;
}
.closing-cta__inner {
  max-width: 780px;
  margin: 0 auto;
}
.closing-cta__eyebrow {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9a59d;
}
.closing-cta__title {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #f2efe8;
  text-wrap: balance;
}
.closing-cta__sub {
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  max-width: 540px;
  font-size: clamp(15px, 1.1vw, 16.5px);
  font-weight: 300;
  line-height: 1.66;
  color: #a9a59d;
  text-wrap: pretty;
}
/* Same restrained rule-and-arrow CTA used everywhere else. */
.closing-cta__link {
  display: inline-block;
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-bottom: 7px;
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8cc0b3;
  border-bottom: 1px solid color-mix(in srgb, #8cc0b3 55%, transparent);
  transition: border-color 0.3s ease;
}
.closing-cta__link:hover {
  border-bottom-color: #8cc0b3;
}
.closing-cta__arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.36, 1);
}
.closing-cta__link:hover .closing-cta__arrow {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .memo__block {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .principles__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 5vw, 36px);
  }
}

/* Archive variant of the Insights sheet. The homepage section carries
   an eyebrow, rule, statement and sub above its grid; on /insights the
   subpage hero already does that work, so the sheet opens straight
   onto the entries and the top padding tightens to match. */

.insights--archive {
  padding-top: clamp(56px, 6vw, 88px);
}

/* --- Team roster --------------------------------------------------
   The house sheet again — same ivory layer as Approach, Method and
   Insights. Portrait boxes sit on a four-up grid that reflows to two
   and then one; the bio runs directly beneath its own portrait so a
   long biography lengthens only its own column. */

.team {
  background-color: #f4f1e8;
  color: #171714;
  margin-inline: clamp(16px, 2vw, 28px);
  border-radius: clamp(14px, 1.25vw, 18px) clamp(14px, 1.25vw, 18px) 0 0;
  padding: clamp(72px, 8vw, 120px) var(--pad-x) clamp(88px, 10vw, 148px);
}
.team__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.team__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 2.6vw, 40px);
  row-gap: clamp(48px, 5.5vw, 80px);
}

/* Portrait. A quiet filled block rather than a hairline frame — an
   empty outline reads as a broken image, a filled one reads as a
   reserved slot. Swapping in an <img> keeps the same ratio. */
.team-member__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: clamp(18px, 2vw, 26px);
  background-color: #e6e1d4;
  border-radius: clamp(8px, 0.7vw, 11px);
  object-fit: cover;
}
.team-member__photo-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a7a298;
}
.team-member__name {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: #171714;
}
.team-member__role {
  margin: 8px 0 clamp(12px, 1.3vw, 16px);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a877f;
}
.team-member__bio {
  margin: 0;
  font-size: clamp(14px, 1vw, 15.5px);
  font-weight: 400;
  line-height: 1.66;
  color: #66635d;
  text-wrap: pretty;
}

/* Placeholder members stay visibly unfinished so an empty roster can
   never quietly ship as if it were real. */
.team-member[data-placeholder="true"] .team-member__name,
.team-member[data-placeholder="true"] .team-member__role {
  color: #a7a298;
}

@media (max-width: 900px) {
  .team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .team__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(40px, 9vw, 56px);
  }
}

/* --- Legal documents ----------------------------------------------
   Privacy, Terms, Disclaimer. These are read, not browsed, so the
   sheet drops to a single measured column and the numbered hairline
   rhythm from Who We Serve and Why Bedloe carries the sections. */

.legal {
  background-color: #f4f1e8;
  color: #171714;
  margin-inline: clamp(16px, 2vw, 28px);
  border-radius: clamp(14px, 1.25vw, 18px) clamp(14px, 1.25vw, 18px) 0 0;
  padding: clamp(64px, 7vw, 104px) var(--pad-x) clamp(88px, 10vw, 148px);
}
.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}

/* The placeholder banner. Loud enough that nobody mistakes this for a
   live policy, quiet enough to sit inside the design. Delete the
   element outright when real copy lands. */
.legal__notice {
  padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  margin-bottom: clamp(28px, 3vw, 40px);
  background-color: #ebe6d7;
  border-left: 2px solid #b9b2a0;
  border-radius: 0 clamp(6px, 0.5vw, 9px) clamp(6px, 0.5vw, 9px) 0;
}
.legal__notice-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a8371;
}
.legal__notice p:last-child {
  margin: 0;
  font-size: clamp(13.5px, 0.98vw, 15px);
  line-height: 1.64;
  color: #5f5b52;
  text-wrap: pretty;
}
.legal__meta {
  margin: 0 0 clamp(40px, 4.6vw, 64px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a7a298;
}

.legal__section {
  padding: clamp(30px, 3.4vw, 44px) 0;
  border-top: 1px solid #d9d5cc;
}
.legal__section:last-child {
  border-bottom: 1px solid #d9d5cc;
}
.legal__title {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: #171714;
}
.legal__num {
  flex: none;
  padding-top: 0.35em;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #a7a298;
  font-variant-numeric: tabular-nums;
}
.legal__body p {
  margin: 0;
  padding-left: calc(clamp(14px, 1.6vw, 22px) + 3.1ch);
  max-width: 68ch;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.7;
  color: #66635d;
  text-wrap: pretty;
}
.legal__body p + p {
  margin-top: clamp(12px, 1.3vw, 16px);
}

/* Unfinished sections read as unfinished. */
.legal__section[data-placeholder="true"] .legal__body p {
  color: #8a877f;
}

@media (max-width: 620px) {
  .legal__title {
    gap: 12px;
  }
  .legal__body p {
    padding-left: 0;
  }
}

/* --- Pillar pages -------------------------------------------------
   O-1A press and EB-1A press.

   These pages add almost no new visual language. Long-form prose runs
   in the existing .memo block — statement left, argument right, full
   hairline between — which is the same component the For Attorneys
   page uses. Numbered sequences reuse the .why-row idiom from Why
   Bedloe and Who We Serve. What follows is only the handful of pieces
   the site did not already have: an emphasised lead answer, list and
   subhead treatments inside a memo body, a light-ground row, and the
   two-column responsibility split. */

/* Hero gains a supporting line and the single hero CTA. */
.subpage-hero__support {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  max-width: 620px;
  font-size: clamp(14px, 1vw, 15.5px);
  font-weight: 300;
  line-height: 1.7;
  color: #8f8b83;
  text-wrap: pretty;
}
.subpage-hero__cta {
  display: inline-block;
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-bottom: 7px;
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8cc0b3;
  border-bottom: 1px solid color-mix(in srgb, #8cc0b3 55%, transparent);
  transition: border-color 0.3s ease;
}
.subpage-hero__cta:hover {
  border-bottom-color: #8cc0b3;
}

/* A memo sheet carrying many blocks needs a little less padding than
   the two-block version on For Attorneys, or the page opens on a void. */
.memo--pillar {
  padding-top: clamp(56px, 6.5vw, 96px);
  padding-bottom: clamp(64px, 7.5vw, 112px);
}

/* The direct answer. One step up from body copy, in the near-black the
   memo titles use — this is the passage most likely to be lifted into
   a search result or an answer engine, so it has to carry on its own. */
.memo__answer {
  margin: 0 0 clamp(16px, 1.8vw, 22px) !important;
  max-width: 54ch;
  font-size: clamp(15.5px, 1.18vw, 17.5px) !important;
  line-height: 1.62 !important;
  color: #2c2a26 !important;
}

.memo__body h3 {
  margin: clamp(24px, 2.6vw, 34px) 0 clamp(7px, 0.8vw, 10px);
  font-size: clamp(15px, 1.12vw, 16.5px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: #171714;
}
.memo__body > *:first-child {
  margin-top: 0;
}

.memo__list {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}
.memo__list li {
  position: relative;
  max-width: 56ch;
  padding-left: 20px;
  margin-top: clamp(8px, 0.9vw, 12px);
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.68;
  color: #66635d;
  text-wrap: pretty;
}
.memo__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 7px;
  height: 1px;
  background-color: #b9b2a0;
}

/* Key statement. The site states things plainly at size — no rules,
   no quote marks, no tinted panel. Same move as the closing line on
   For Attorneys. */
.memo__statement {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 30ch;
  font-size: clamp(19px, 1.85vw, 26px) !important;
  font-weight: 400;
  line-height: 1.28 !important;
  letter-spacing: -0.018em;
  color: #171714 !important;
}

.memo__body a {
  color: #46443f;
  text-decoration: none;
  border-bottom: 1px solid #c3bdaf;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.memo__body a:hover {
  color: #171714;
  border-bottom-color: #171714;
}
.memo__body strong {
  font-weight: 500;
  color: #46443f;
}

/* Counsel / Bedloe responsibilities, side by side in the argument
   column. Collapses to one column early — it is already narrow. */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 40px);
  margin-top: clamp(6px, 0.8vw, 10px);
}
.duo__head {
  margin: 0 0 clamp(12px, 1.3vw, 16px) !important;
  padding-bottom: clamp(10px, 1.1vw, 14px);
  border-bottom: 1px solid #d9d5cc;
  font-size: 10.5px !important;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a877f !important;
}
.duo .memo__list {
  margin-top: 0;
}
.duo .memo__list li {
  font-size: clamp(13.5px, 0.98vw, 15px);
}

/* FAQ as memo blocks — question left, answer right. Set smaller than a
   section title so twelve of them do not read as twelve chapters. */
.memo__block--faq {
  padding: clamp(26px, 2.9vw, 38px) 0;
}
.memo__block--faq .memo__title {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.28;
}

/* Light-ground version of the .why-row / .serve-row idiom, for the
   audience list where it sits on an ivory sheet rather than on black.
   Geometry is deliberately identical to .why-row. */
.lrow {
  display: grid;
  grid-template-columns: 84px minmax(240px, 1fr) minmax(0, 1.45fr);
  gap: clamp(16px, 3vw, 60px);
  align-items: baseline;
  padding: clamp(30px, 3.4vw, 46px) clamp(10px, 1.4vw, 22px);
  margin-inline: clamp(-10px, -1.4vw, -22px);
  border-top: 1px solid #d9d5cc;
  transition: border-top-color 0.4s ease;
}
.lrow:last-child {
  border-bottom: 1px solid #d9d5cc;
}
.lrow:hover {
  border-top-color: #6fa99b;
}
.lrow__num {
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.14em;
  color: #a7a298;
  transition: color 0.4s ease;
}
.lrow:hover .lrow__num {
  color: #6fa99b;
}
.lrow__title {
  margin: 0;
  font-size: clamp(19px, 1.85vw, 26px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #171714;
}
.lrow__desc {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.02vw, 15.5px);
  font-weight: 400;
  line-height: 1.66;
  color: #66635d;
  text-wrap: pretty;
}
.lrow-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Related links, sitting under the last memo block. */
.memo__related {
  margin-top: clamp(40px, 4.6vw, 64px);
}
.memo__related-head {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a877f;
}
.memo__related ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 20px) clamp(20px, 2.4vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.memo__related a {
  font-size: clamp(13.5px, 1vw, 15px);
  color: #66635d;
  text-decoration: none;
  border-bottom: 1px solid #c3bdaf;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.memo__related a:hover {
  color: #171714;
  border-bottom-color: #171714;
}

/* Closing CTA. Same construction as .closing-cta, plus the trademark
   line above the statement. */
.pillar-cta {
  background-color: #161513;
  color: #f2efe8;
  padding: clamp(88px, 10vw, 148px) var(--pad-x) clamp(96px, 11vw, 160px);
  border-top: 1px solid rgba(242, 239, 232, 0.1);
  text-align: center;
}
.pillar-cta__inner {
  max-width: 720px;
  margin: 0 auto;
}
.pillar-cta__mark {
  margin: 0 0 clamp(22px, 2.5vw, 32px);
  font-size: clamp(11px, 0.86vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a9a59d;
}
.pillar-cta__title {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #f2efe8;
  text-wrap: balance;
}
.pillar-cta__link {
  display: inline-block;
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-bottom: 7px;
  font-size: clamp(11px, 0.85vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8cc0b3;
  border-bottom: 1px solid color-mix(in srgb, #8cc0b3 55%, transparent);
  transition: border-color 0.3s ease;
}
.pillar-cta__link:hover {
  border-bottom-color: #8cc0b3;
}

@media (max-width: 860px) {
  .lrow {
    grid-template-columns: 44px minmax(0, 1fr);
    row-gap: 10px;
  }
  .lrow__desc {
    grid-column: 2;
  }
}
@media (max-width: 640px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }
}