/* Components: header, hero, marquees, field card, accordion, section frame, footer */

/* ───── Top nav ───── */
.topnav {
  padding: 20px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  position: relative;
  z-index: 2;
}
.topnav .brand {
  display: flex; align-items: baseline; gap: 14px;
}
.topnav .brand .wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
}
.topnav .brand .est {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.topnav nav {
  display: flex; gap: 28px; align-items: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}
/* Split-layout wrapper: groups the brand link + nav links on the left side
   of the top bar; the Let's-talk! button is a direct child of .topnav and
   sits on the right via space-between. */
.topnav .nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topnav nav a {
  color: var(--ink);
  text-decoration: none;
}
.topnav nav a.dim { opacity: 0.55; }
.topnav nav a[aria-current="page"] { opacity: 1; }

/* Section-page top nav variant — wordmark left + Curr/Fac/Cult/CTA right */
.topnav.sp {
  padding: 28px var(--pad-x);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}
.topnav.sp a.home {
  color: var(--ink);
  text-decoration: none;
}

/* ───── Atmospheric ground ─────
   Body-level layers that paint behind .canvas (which has z-index: 1).

   .bg-bokeh is position:absolute so it stretches the full body height —
   its gradient zones evolve top→bottom (warm/green → soft blue → muted
   purple) and scroll naturally with the page.

   .bg-grain-* are position:fixed so the film texture stays locked to the
   viewport and blends with whatever bokeh region is currently visible. */
.bg-paper-grain,
.bg-bokeh,
.bg-grain-1,
.bg-grain-2 {
  pointer-events: none;
  z-index: 0;
}
.bg-paper-grain,
.bg-grain-1,
.bg-grain-2 {
  position: fixed;
  inset: 0;
}
.bg-bokeh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* TOP — warm cream + green (existing vibe) */
    radial-gradient(45% 14% at 22% 4%,  rgba(245, 225, 175, 0.40), transparent 65%),
    radial-gradient(38% 12% at 72% 2%,  rgba(255, 240, 200, 0.22), transparent 70%),
    radial-gradient(40% 12% at 84% 10%, rgba(195, 215, 165, 0.30), transparent 70%),

    /* UPPER-MID — warm-to-cool transition */
    radial-gradient(40% 10% at 14% 22%, rgba(210, 220, 170, 0.20), transparent 75%),
    radial-gradient(38% 10% at 86% 28%, rgba(190, 210, 180, 0.18), transparent 75%),

    /* MID — first whisper of blue */
    radial-gradient(46% 12% at 22% 44%, rgba(170, 195, 215, 0.26), transparent 75%),
    radial-gradient(42% 12% at 80% 50%, rgba(160, 185, 210, 0.22), transparent 75%),

    /* LOWER-MID — deeper blue + first hint of purple */
    radial-gradient(48% 14% at 18% 66%, rgba(155, 170, 205, 0.26), transparent 75%),
    radial-gradient(44% 12% at 80% 72%, rgba(170, 160, 200, 0.22), transparent 75%),

    /* BOTTOM — subtle dusk purple */
    radial-gradient(52% 16% at 30% 86%, rgba(170, 160, 200, 0.28), transparent 75%),
    radial-gradient(46% 14% at 76% 92%, rgba(150, 140, 190, 0.22), transparent 75%);
}
.bg-grain-1 {
  opacity: 0.7;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}
.bg-grain-2 {
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* All page sections sit above the ground layers */
.canvas > section,
.canvas > header,
.canvas > footer,
.canvas > .field-card,
.canvas > .cta-panel {
  position: relative;
  z-index: 1;
}

/* ───── Hero ───── */
.hero {
  padding: 88px var(--pad-x) 32px;
}
.hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 84px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.hero h1 .signature {
  display: inline-block;
  height: 96px;
  vertical-align: -22px;
  margin-left: 8px;
}
body[data-atmospheric] .hero h1 .signature {
  filter: invert(1) brightness(2);
}
.hero p {
  /* Display font (Schibsted Grotesk) to match every other H2/H3 on the site. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-top: 32px;
  text-wrap: pretty;
}

/* ───── Photo marquee ───── */
.photo-marquee {
  padding: 24px 0 48px;
  overflow: hidden;
}
.photo-marquee-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: courtMarqueeD 60s linear infinite;
  align-items: center;
}
.photo-marquee-track .frame {
  border: 1px solid var(--ink);
  flex-shrink: 0;
  overflow: hidden;
}
.photo-marquee-track .frame img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
@keyframes courtMarqueeD {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ───── A decade in / how I work ───── */
.decade {
  padding: 40px var(--pad-x) 8px;
}
.decade-inner {
  max-width: 880px;
  margin: 0 auto;
}
.decade-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  text-wrap: pretty;
}

/* Lead-in paragraph that introduces the three offering tiles below.
   Ends with "Here are three ways we can work together." so it feeds directly
   into the 3-column grid — no separate h2 needed. */
.offerings-intro {
  max-width: 820px;
  margin: 0 auto 56px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
/* The final line is a separate, larger pseudo-h2 that bridges the body
   sentence above into the three offering tiles below.
   Painted in a distinct third accent (warm marigold) so it pops as the
   call-to-action — not blue, not persimmon, deliberately its own beat. */
.offerings-intro .intro-lead {
  display: inline-block;
  margin-top: 4px;
  font-size: 38px;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #E0954A;
}

/* Centered hairline + crosshair ornament — chapter divider between the
   logo constellation and the offerings section. Matches the field-card
   crosshair language used elsewhere on the home page. */
.section-break {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  margin: 48px auto 56px;
  color: var(--ink);
}
.section-break::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
.section-break svg {
  position: relative;
  z-index: 1;
  /* Tiny "knockout" effect: a wisp of paper-tone padding around the SVG so
     the line doesn't cut visually through the crosshair circle. */
  padding: 0 8px;
  background: color-mix(in srgb, var(--paper) 50%, transparent);
  opacity: 0.85;
}

/* Atmospheric variant: hand-drawn PNG icons (used in the offerings strip) get a
   light/invert tweak so they read against the dark sage ground. */
body[data-atmospheric] .icon-img {
  filter: invert(1) brightness(1.05);
}

/* ───── Logo marquee ───── */
.logo-marquee-wrap {
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 24px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  position: relative;
  overflow: hidden;
}
.logo-marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: courtLogosD 50s linear infinite;
  align-items: center;
  padding: 0 28px;
}
@keyframes courtLogosD {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-slot {
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.5;
  width: 140px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-atmospheric] .logo-slot { opacity: 0.6; }
.logo-slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* unified tone treatment — light variant: grayscale + multiply */
.logo-slot img {
  filter: grayscale(1) brightness(0.85) contrast(1.3);
  mix-blend-mode: multiply;
}
.logo-slot[data-dark] img {
  filter: grayscale(1) invert(1) brightness(0.85) contrast(1.3);
  mix-blend-mode: multiply;
}
/* atmospheric / dark variant: invert + screen */
body[data-atmospheric] .logo-slot img,
body[data-dark]        .logo-slot img {
  filter: grayscale(1) invert(1) brightness(2) contrast(1.4);
  mix-blend-mode: screen;
}
body[data-atmospheric] .logo-slot[data-dark] img,
body[data-dark]        .logo-slot[data-dark] img {
  filter: grayscale(1) brightness(2) contrast(1.4);
  mix-blend-mode: screen;
}

/* edge fades */
.logo-marquee-wrap::before,
.logo-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 1;
}
.logo-marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--paper), transparent);
}
.logo-marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--paper), transparent);
}

/* Per-logo width overrides */
.logo-slot[data-slug="lululemon"] { width: 200px; }
.logo-slot[data-slug="uber"]      { width: 160px; }
.logo-slot[data-slug="asana"]     { width: 200px; }

/* ─────────────────────────────────────────
   Logo constellation
   Scattered, absolutely-positioned logos with a
   centered statement in the middle. Position +
   width set inline per .logo-spot so layout is
   trivial to tweak. Mobile falls back to a grid
   (see mobile.css).
   ───────────────────────────────────────── */
.logo-constellation {
  position: relative;
  width: 100%;
  max-width: 1140px;
  /* Grown from 480 → 560 so the centered text below can sit at top:50%
     with the same padding above as below (the spacing you liked). */
  height: 560px;
  margin: 24px auto 0;
}
.logo-constellation .logo-spot {
  position: absolute;
  /* Fixed display height so every logo reads at a similar visual weight,
     regardless of source aspect ratio (portrait Paramount, wide lululemon, etc.). */
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.logo-constellation .logo-spot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Lululemon's source file has lots of whitespace padding around the wordmark,
   so its container needs more room before the actual logo content reads at a
   comparable size to its neighbors. */
.logo-constellation .logo-spot[data-slug="lululemon"] { height: 110px; }
/* Unified tone treatment — same logic as the marquee */
.logo-constellation .logo-spot img {
  filter: grayscale(1) brightness(0.85) contrast(1.3);
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.logo-constellation .logo-spot[data-dark] img {
  filter: grayscale(1) invert(1) brightness(0.85) contrast(1.3);
  mix-blend-mode: multiply;
}
body[data-atmospheric] .logo-constellation .logo-spot img {
  filter: grayscale(1) invert(1) brightness(2) contrast(1.4);
  mix-blend-mode: screen;
  opacity: 0.85;
}
body[data-atmospheric] .logo-constellation .logo-spot[data-dark] img {
  filter: grayscale(1) brightness(2) contrast(1.4);
  mix-blend-mode: screen;
}
/* Pure-white silhouette treatment for logos whose multicolor source doesn't
   flatten cleanly through the screen-blend approach (Google's multicolor
   letters) or that need to read as crisp white regardless of source
   (Paramount, Asana). brightness(0) blacks out every opaque pixel, then
   invert(1) flips that to pure white. Transparent pixels stay transparent. */
body[data-atmospheric] .logo-constellation .logo-spot[data-slug="google"] img,
body[data-atmospheric] .logo-constellation .logo-spot[data-slug="paramount"] img,
body[data-atmospheric] .logo-constellation .logo-spot[data-slug="asana"] img {
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
  opacity: 0.92;
}

.logo-constellation .constellation-text {
  position: absolute;
  /* Vertically centered so the breathing room above the paragraph matches
     the breathing room below it. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 540px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  /* Matches the hero paragraph: 24px display, line-height 1.4 */
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

/* Subtle floating animation — each logo drifts on its own clock so the
   constellation breathes organically rather than pulsing in unison. */
@keyframes constellation-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -6px); }
}
.logo-constellation .logo-spot {
  animation: constellation-float 6s ease-in-out infinite;
  will-change: transform;
}
.logo-constellation .logo-spot:nth-child(1)  { animation-duration: 5.5s; animation-delay:  0s;   }
.logo-constellation .logo-spot:nth-child(2)  { animation-duration: 6.2s; animation-delay: -1.4s; }
.logo-constellation .logo-spot:nth-child(3)  { animation-duration: 5.8s; animation-delay: -2.7s; }
.logo-constellation .logo-spot:nth-child(4)  { animation-duration: 6.5s; animation-delay: -3.1s; }
.logo-constellation .logo-spot:nth-child(5)  { animation-duration: 5.3s; animation-delay: -0.8s; }
.logo-constellation .logo-spot:nth-child(6)  { animation-duration: 6.0s; animation-delay: -2.1s; }
.logo-constellation .logo-spot:nth-child(7)  { animation-duration: 5.7s; animation-delay: -3.4s; }
.logo-constellation .logo-spot:nth-child(8)  { animation-duration: 6.4s; animation-delay: -0.5s; }
.logo-constellation .logo-spot:nth-child(9)  { animation-duration: 5.9s; animation-delay: -1.8s; }
.logo-constellation .logo-spot:nth-child(10) { animation-duration: 6.3s; animation-delay: -2.9s; }
.logo-constellation .logo-spot:nth-child(11) { animation-duration: 5.6s; animation-delay: -3.7s; }

@media (prefers-reduced-motion: reduce) {
  .logo-constellation .logo-spot { animation: none; }
}

/* ───── Three offerings strip (home) ───── */
.offerings {
  /* Tightened top padding so the intro paragraph sits visually centered
     between the bottom of the logo constellation and the "Three ways to
     work together" h2 below it. */
  padding: 24px var(--pad-x) 32px;
}
.offerings h2 {
  max-width: 1180px;
  margin: 0 auto 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.offerings-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.offering {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.offering + .offering {
  border-left: 1px solid color-mix(in srgb, var(--ink) 19%, transparent);
}
.offering .head {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
}
.offering .head .ico { display: block; flex-shrink: 0; }
.offering .head .title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
  flex: 1;
}
.offering .blurb {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 14px;
  text-wrap: pretty;
}
.offering .explore {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillion);
  text-decoration: none;
}

/* ───── Field card (bordered + crosshair corners) ─────
   Deep eggplant/wine base with bokeh + grain. Originally lived on the home
   page; now hosted on the About page (light paper variant), so we scope
   --ink / --muted to cream tones inside the card so text, borders, and
   accordion rules remain legible against the dark eggplant background
   regardless of which page hosts it. */
.field-card {
  /* Local color scope: the field card always reads cream-on-deep-eggplant */
  --ink: #ECE7D9;
  --muted: #B6A6AC;
  color: var(--ink);

  margin: 64px 32px 0;
  padding: 56px 56px 48px;
  border: 1px solid var(--ink);
  background:
    radial-gradient(50% 38% at 22% 18%, rgba(225, 175, 195, 0.20), transparent 65%),
    radial-gradient(48% 36% at 80% 78%, rgba(170, 110, 145, 0.22), transparent 70%),
    radial-gradient(38% 28% at 72% 25%, rgba(220, 190, 175, 0.10), transparent 70%),
    radial-gradient(42% 32% at 18% 78%, rgba(195, 145, 175, 0.12), transparent 70%),
    #3A1A2A;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Corner crosshair stroke uses a deep wine tone so it remains visible
   against the paper-colored corner "cutouts" (which are var(--paper) from
   the page itself — cream on About, sage on the atmospheric home). */
.field-card .crosshair {
  color: #2A0F1E;
}
.field-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}
.field-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.field-card .crosshair {
  position: absolute;
  background: var(--paper);
  padding: 2px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}
.field-card .crosshair.tl { top: -7px; left: -7px; }
.field-card .crosshair.tr { top: -7px; right: -7px; }
.field-card .crosshair.bl { bottom: -7px; left: -7px; }
.field-card .crosshair.br { bottom: -7px; right: -7px; }

.field-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.field-card .sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 14px;
  max-width: 640px;
}

/* ───── Accordion (lessons + practice + case studies) ───── */
.accordion { margin-top: 36px; }
.accordion-row {
  border-top: 1px solid var(--ink);
  padding: 20px 0;
  cursor: pointer;
  position: relative;
}
.accordion-row:last-child {
  border-bottom: 1px solid var(--ink);
}
.accordion-row .row-head {
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  gap: 20px;
  align-items: center;
}
.accordion-row .row-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.accordion-row .row-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.accordion-row .row-toggle {
  justify-self: end;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.accordion-row[aria-expanded="true"] .row-toggle {
  transform: rotate(45deg);
}
.accordion-row .row-body {
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  gap: 20px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s;
}
.accordion-row[aria-expanded="true"] .row-body {
  max-height: 320px;
  opacity: 1;
}
.accordion-row .row-body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  margin-top: 12px;
  max-width: 760px;
  text-wrap: pretty;
}

/* ───── Closing CTA panel ───── */
.cta-panel {
  margin: 64px 32px 32px;
  padding: 56px 56px 52px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.cta-panel .crosshair {
  position: absolute;
  background: var(--paper);
  padding: 2px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}
.cta-panel .crosshair.tl { top: -7px; left: -7px; }
.cta-panel .crosshair.tr { top: -7px; right: -7px; }
.cta-panel .crosshair.bl { bottom: -7px; left: -7px; }
.cta-panel .crosshair.br { bottom: -7px; right: -7px; }
.cta-panel p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  max-width: 900px;
}
/* Sign-off line that sits directly under the headline.
   "— with love," + signature, inline so it reads like a letter close. */
.cta-panel .signoff {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cta-panel .signoff .with-love {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.01em;
  opacity: 0.7;
}
.cta-panel .signoff img {
  height: 44px;
  /* Original black signature reads on the cream CTA panel.
     (Was inverted to white in the old dark-panel design.) */
  opacity: 0.92;
}

.cta-panel .cta-action {
  margin-top: 40px;
}

/* ───── Footer ───── */
.footnav {
  padding: 20px var(--pad-x) 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.footnav a {
  color: var(--ink);
  text-decoration: none;
}

/* ───── Section page chrome ─────
   Grid layout so the h1 + sp-intro stack as one column on the left while
   the (much taller) 240px accent icon sits in its own column on the right
   without dictating the height between h1 and the H2 below it. */
.sp-header {
  padding: 88px var(--pad-x) 56px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 40px;
  align-items: start;
}
.sp-header-row { display: contents; }
.sp-header h1 {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 900px;
  text-wrap: balance;
}
.sp-header > .sp-intro {
  grid-column: 1;
  grid-row: 2;
  margin-top: 28px;
}
.sp-header .accent-mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 8px;
}
/* Hand-drawn PNG icons (knot / sticks / spark) — same icon family used in
   the home offerings tiles, doubled in size to anchor the section header. */
.sp-header .accent-mark img {
  display: block;
  height: 240px;
  width: auto;
}
.sp-intro {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 400; /* override browser default when .sp-intro is on an <h2> */
  line-height: 1.5;
  color: var(--muted);
  margin-top: 40px;
  max-width: 760px;
  text-wrap: pretty;
}

.sp-index {
  padding: 0 var(--pad-x) 16px;
  border-bottom: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.sp-cases {
  padding: 0 var(--pad-x);
}
.sp-case {
  border-bottom: 1px solid var(--ink);
  padding: 40px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  cursor: pointer;
}
.sp-case .case-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 14px;
}
.sp-case .case-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.sp-case .case-head-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}
.sp-case .case-logo {
  display: block;
}
.sp-case .case-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.8) contrast(1.35);
  mix-blend-mode: multiply;
}
.sp-case .case-logo[data-dark] img {
  filter: grayscale(1) invert(1) brightness(0.8) contrast(1.35);
  mix-blend-mode: multiply;
}
body[data-dark] .sp-case .case-logo img {
  filter: grayscale(1) invert(1) brightness(2) contrast(1.4);
  mix-blend-mode: screen;
}
body[data-dark] .sp-case .case-logo[data-dark] img {
  filter: grayscale(1) brightness(2) contrast(1.4);
  mix-blend-mode: screen;
}

.sp-case h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 820px;
}
.sp-case .open-toggle {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 9999px;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-case .case-body {
  display: none;
  margin-top: 36px;
  grid-template-columns: 1fr 1fr;
  gap: 44px 72px;
  padding-bottom: 8px;
}
.sp-case[aria-expanded="true"] .case-body {
  display: grid;
}
.sp-case[aria-expanded="true"] .open-toggle::before {
  content: '— Close';
}
.sp-case .open-toggle::before {
  content: '+ Open';
}
.sp-case .sect {
}
.sp-case .sect.wide {
  grid-column: 1 / -1;
}
.sp-case .sect .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--vermillion);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sp-case .sect p,
.sp-case .sect li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.sp-case .sect ul {
  margin: 0; padding: 0; list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-case .sect ul li {
  padding-left: 18px;
  position: relative;
}
.sp-case .sect ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--vermillion);
}

.sp-case .quote {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 28px 36px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-left: 2px solid var(--vermillion);
}
.sp-case .quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  text-wrap: pretty;
}
.sp-case .quote .attr {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

/* Case-study image marquee */
.sp-case .img-marquee {
  grid-column: 1 / -1;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.sp-case .img-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: spMarquee 38s linear infinite;
}
@keyframes spMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sp-case .img-marquee .ph {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ink) 6%, transparent),
    color-mix(in srgb, var(--ink) 6%, transparent) 8px,
    color-mix(in srgb, var(--ink) 2%, transparent) 8px,
    color-mix(in srgb, var(--ink) 2%, transparent) 16px);
  border: 1px solid color-mix(in srgb, var(--ink) 19%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.sp-case .img-marquee .ph.sz1 { width: 360px; height: 240px; }
.sp-case .img-marquee .ph.sz2 { width: 240px; height: 300px; }
.sp-case .img-marquee .ph.sz3 { width: 320px; height: 220px; }
.sp-case .img-marquee .ph.sz4 { width: 280px; height: 260px; }

/* Photo-filled marquee slot: drops the placeholder hatching + label and
   lets the image (or video) cover the entire box. */
.sp-case .img-marquee .ph:has(img),
.sp-case .img-marquee .ph:has(video) {
  background: none;
  padding: 0;
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.sp-case .img-marquee .ph img,
.sp-case .img-marquee .ph video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About-page color scope: with the colorful gradient ground, dark forest
   text gets unreadable across the tan/rust band. Override the palette so
   text reads as cream throughout and the accent is the same light blue
   used on the home page (replacing the persimmon orange). */
body[data-page="about"] {
  --ink: #ECE7D9;
  --vermillion: #9CB3C9;
  --muted: #B2AE9F;
}
/* Bio paragraphs drop the colored accent entirely — emphasis is conveyed
   via bold italic alone, in the same cream as the surrounding body text.
   The rest of the About page (foundations numbers, labels, links, next
   arrow) keeps the light-blue accent. */
body[data-page="about"] .about-bio .em {
  color: inherit;
  font-weight: 600;
}

/* About-page background — CSS linear gradient using colors sampled from
   the original reference image, plus the same SVG fractal-noise grain
   layers used on the home page (smaller-scale than the JPEG's baked-in
   grain so the texture reads consistently across both pages). */
body[data-page="about"] .bg-about-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #899D94  0%,
    #8C9988 15%,
    #92957A 30%,
    #8D8264 45%,
    #775F45 60%,
    #614738 75%,
    #5A483E 90%,
    #544943 100%
  );
}
/* Grain layers stacked on top of the About gradient (mirrors the
   bg-grain-1 / bg-grain-2 treatment used on the home page atmospheric
   ground — same SVG sources, same sizes, same blend modes). */
body[data-page="about"] .bg-about-image::before,
body[data-page="about"] .bg-about-image::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body[data-page="about"] .bg-about-image::before {
  opacity: 0.7;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}
body[data-page="about"] .bg-about-image::after {
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ─────────────────────────────────────────
   About page sections
   - .about-bio: 3-paragraph narrative in display font, centered column
   - .foundations: numbered 2-col grid of methodology lenses
   - .background: training + selected engagements in 2 columns
   ───────────────────────────────────────── */

.about-bio {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px var(--pad-x) 64px;
}
/* Two-column layout: portrait left, three bio paragraphs right. */
.about-bio-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}
.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.about-bio-text p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.about-bio-text p + p {
  margin-top: 24px;
}
/* Court's handwritten signature sits at the end of the bio, sized like a
   personal letter close. The black source signature is inverted to cream
   so it reads against the warm gradient ground. */
.about-bio .bio-signoff {
  margin-top: 28px;
}
.about-bio .bio-signoff img {
  display: block;
  height: 64px;
  filter: invert(1) brightness(2);
  opacity: 0.92;
}

.foundations {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px var(--pad-x) 40px;
}
.foundations .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.foundations h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 56px;
  text-wrap: balance;
  max-width: 720px;
}
.foundations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 72px;
}
.foundation {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
}
.foundation .num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--vermillion);
  padding-top: 6px;
}
.foundation h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.foundation p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 8px 0 0;
  text-wrap: pretty;
}
.foundation em {
  font-style: italic;
  color: var(--ink);
}

.background {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px var(--pad-x) 48px;
}
.background h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 40px;
}
.background-cols {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
}
/* Editorial section label — display italic in the accent color, sentence
   case (replaces the old mono-uppercase "AI"-feeling label style). */
.background-col .label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--vermillion);
  margin-bottom: 18px;
}
.background-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.background-col li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}
.background-col li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--vermillion);
}
/* Inline links inside the Background lists — subtle ink underline that
   warms to the vermillion accent on hover. */
.background-col a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.background-col a:hover {
  text-decoration-color: var(--vermillion);
  color: var(--vermillion);
}

/* Next section CTA on section pages */
.sp-next {
  padding: 96px var(--pad-x) 80px;
}
.sp-next-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.sp-next .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.sp-next h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.015em;
}
.sp-next h3 .arrow { color: var(--vermillion); }
/* (.sp-next .schedule is now a .btn-primary instance — see button rules below) */

/* ───────────────────────────────────────────────
   Primary action button — rounded blue pill
   Used for every "Let's talk!" CTA across the site.
   ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn-blue);
  /* Forest-green text reads against the desaturated baby-blue background
     in both light and atmospheric variants (≈ 5.5:1 contrast, AA-pass). */
  color: #1F3A2E;
  border: none;
  border-radius: 9999px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
  background: var(--btn-blue-hover);
}
.btn-primary:active {
  transform: translateY(1px);
}
/* Smaller variant for top nav and tight spaces */
.btn-primary.btn-sm {
  padding: 9px 18px;
  font-size: 13px;
}

/* ───────────────────────────────────────────────
   Custom white-dot cursor (desktop only)
   JS creates a .cursor-dot element and updates its
   position on mousemove. mix-blend-mode keeps the
   dot visible on both light paper and dark sage
   sections without losing the "white dot" feel.
   ─────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  html, body, a, button, input, textarea,
  .accordion-row, .sp-case {
    cursor: none;
  }
}
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #FFFFFF;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 0.18s ease, height 0.18s ease, margin 0.18s ease;
  will-change: transform;
}
.cursor-dot.over-link {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
}
/* Hide entirely on touch — JS also feature-detects */
@media (hover: none), (pointer: coarse) {
  .cursor-dot { display: none; }
}

/* ─────────────────────────────────────────
   Personalized welcome-letter overlay (home page)
   Activates when the URL has ?welcome=<clientKey> — see js/welcome.js.
   Renders a paper-letter modal centered over the home page; click
   anywhere outside the letter (or × / Escape) to dismiss.
   ───────────────────────────────────────── */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.welcome-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.welcome-letter {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  background: #F5F0E6;
  color: #1F3A2E;
  border: 1px solid color-mix(in srgb, #1F3A2E 30%, transparent);
  padding: 56px 56px 48px;
  transform: translateY(8px);
  transition: transform 0.32s ease;
  box-shadow: 0 30px 80px -20px rgba(10, 18, 8, 0.45);
}
.welcome-overlay.is-open .welcome-letter {
  transform: translateY(0);
}
.welcome-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  color: #1F3A2E;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.welcome-close:hover { opacity: 1; }
.welcome-greeting {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.welcome-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
  text-wrap: pretty;
}
.welcome-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  margin: 0 0 10px;
}
.welcome-signature {
  display: block;
  height: 56px;
  margin-top: 4px;
  opacity: 0.92;
}

@media (max-width: 600px) {
  .welcome-letter {
    padding: 36px 28px 28px;
  }
  .welcome-greeting { font-size: 22px; }
  .welcome-body { font-size: 17px; }
  .welcome-signoff { font-size: 17px; }
  .welcome-signature { height: 44px; }
}