/* ============================================================
   Amber Fugedi — shared styles (all four pages)
   Soft pastel aura theme: warm cream base, drifting pastel
   color clouds, coral accent, rounded and friendly.

   Offer color system (used consistently on every page):
     Courses     = warm peach   (#FCE4C4 fill / #8A5A14 text)
     Automations = soft lavender(#DAD4F5 fill / #574AA6 text)
     Consulting  = blush pink   (#FBD5E4 fill / #A63563 text)
   Pastel fills never carry text lighter than the deep tones —
   every deep tone is ≥4.5:1 on cream AND on its pastel.
   ============================================================ */

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

:root {
  --bg: #FDF9F5;
  --bg-raised: #FFFFFF;
  --ink: #2E2A27;          /* headings + body — 13.3:1 on cream */
  --body: #3E3833;         /* ~11:1 */
  --muted: #5C544B;        /* secondary text — ~7:1, no pale grays */
  --coral: #FF6F61;        /* fills/buttons only — NOT for text on cream */
  --coral-deep: #B8354A;   /* coral used AS text — 5.5:1 on cream */
  --blush: #FBD5E4;
  --peach: #FCE4C4;
  --lavender: #DAD4F5;
  --courses-deep: #8A5A14;
  --automations-deep: #574AA6;
  --consulting-deep: #A63563;
  --line: rgba(46, 42, 39, 0.12);
  --shadow-soft: 0 14px 40px -18px rgba(46, 42, 39, 0.18);
  --radius: 24px;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Type scale (2026-07): one fluid system, 390px -> 1440px.
     mobile / desktop: h1 48/72, h2 36/50, h3 24/30, intro 19/21,
     body 17/18, small 14/15, eyebrow 12/13. */
  --fs-h1: clamp(2.5rem, 1.943rem + 2.2857vw, 4rem); /* 40 -> 64: ONE display size on every page, hero included */
  --fs-h2: clamp(1.875rem, 1.55rem + 1.3333vw, 2.75rem); /* 30 -> 44: a clear step below the 40/64 display */
  --fs-h3: clamp(1.5rem, 1.361rem + 0.5714vw, 1.875rem);
  --fs-intro: clamp(1.1875rem, 1.141rem + 0.1905vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.977rem + 0.0952vw, 1.0625rem); /* 16 -> 17: body never outranks the hero deck */
  --fs-small: clamp(0.875rem, 0.852rem + 0.0952vw, 0.9375rem);
  --fs-eyebrow: clamp(0.75rem, 0.727rem + 0.0952vw, 0.8125rem);
  --nav-h: 62px;
  /* the mobile menu panel — the one full-bleed surface on the site */
  --menu-bg: #EDE9F7;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--body);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* Project/card titles: a step heavier than the display headlines */
h3 { font-weight: 600; }

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

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

::selection { background: var(--blush); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link: hidden until keyboard-focused */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 10px 18px;
  border-radius: 24px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Body links: coral + underline — never color alone */
main p a, .form-note a {
  color: var(--coral-deep);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 53, 74, 0.4);
  transition: text-decoration-color 0.2s;
}
main p a:hover, .form-note a:hover {
  text-decoration-color: var(--coral-deep);
}

/* ============ Aura (the signature) ============
   Pastel color clouds drifting on very slow loops; JS adds a
   gentle cursor-following ease on the whole layer. Static under
   reduced motion. */
.aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
  opacity: calc(var(--aura-base, 1) * var(--aura-stage, 1));
  transition: opacity 1.2s var(--ease);
}
/* Home: the aura settles in with the hero — a slow expand into place */
.page-home .aura { animation: aura-settle 2.4s var(--ease); }
@keyframes aura-settle {
  from { opacity: 0; scale: 1.06; }
}
.aura-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
  transition: filter 1.4s var(--ease), border-radius 1.4s var(--ease),
              rotate 1.4s var(--ease), scale 1.4s var(--ease);
}

/* ---- Focus stages: the idea gathering clarity as the page unfolds.
   Stage 0 (hero): diffuse. Stage 1 (problem/work): gathering — less
   blur, first hint of shape. Stage 2 (why/offers): focused — tighter,
   directional, and the layer steps back so dense copy leads. Stage 3
   (quotes to CTA): momentum — sharpest, leaning forward. Orbit
   keyframes (transform), cursor/tilt parallax (translate), and these
   stage channels (scale/rotate/filter) all compose independently. */
body[data-aura-stage="1"] .aura-blob {
  filter: blur(38px);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
}
body[data-aura-stage="2"] .aura { --aura-stage: 0.6; }
body[data-aura-stage="2"] .aura-blob {
  filter: blur(31px);
  scale: 0.96 1.03;
  rotate: -3deg;
  border-radius: 41% 59% 56% 44% / 54% 43% 57% 46%;
}
body[data-aura-stage="3"] .aura { --aura-stage: 0.92; }
body[data-aura-stage="3"] .aura-blob {
  filter: blur(26px);
  scale: 1.05 0.93;
  rotate: -5deg;
  border-radius: 37% 63% 60% 40% / 57% 41% 59% 43%;
}
/* Saturated pastel cores with defined edges, moving on CONTINUOUS
   orbits (loop keyframes, linear timing) — constant velocity, so
   the clouds never settle into a stall the eye reads as static.
   `alternate` + ease-in-out was spending most of its time nearly
   stopped at the path ends. */
.aura-blob-1 {
  width: 50vw; height: 50vw;
  min-width: 460px; min-height: 460px;
  top: -18%; left: -8%;
  background: radial-gradient(circle at 40% 40%,
    rgba(246, 158, 199, 0.95), rgba(251, 213, 228, 0.0) 60%);
  animation: aura-drift-l 21s linear infinite;
}
.aura-blob-2 {
  width: 44vw; height: 44vw;
  min-width: 420px; min-height: 420px;
  top: -12%; right: -10%;
  background: radial-gradient(circle at 55% 45%,
    rgba(248, 190, 116, 0.95), rgba(252, 228, 196, 0.0) 60%);
  animation: aura-drift-r 21s linear infinite;
}
.aura-blob-3 {
  width: 40vw; height: 40vw;
  min-width: 380px; min-height: 380px;
  top: 26%; left: 28%;
  background: radial-gradient(circle at 50% 50%,
    rgba(172, 158, 232, 0.92), rgba(218, 212, 245, 0.0) 60%);
  animation: aura-orbit-c 14s linear infinite;
}
/* Left cloud of the wing pair: wanders, gathers toward center at 30%,
   then briefly unfolds out-left-up (30-38%) mirroring its partner —
   an abstract wing beat, aura first, wings only for a moment. */
@keyframes aura-drift-l {
  0%   { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(6vw, 7vh) scale(1.12); }
  30%  { transform: translate(10vw, 10vh) scale(1.04); }
  38%  { transform: translate(-2vw, 2vh) scale(1.22); }
  52%  { transform: translate(-4vw, 11vh) scale(1.1); }
  74%  { transform: translate(4vw, 17vh) scale(1.24); }
  100% { transform: translate(0, 0) scale(1); }
}
/* Right cloud: the mirror of aura-drift-l, phase-aligned at 21s so
   the 30-38% parting reads as two forms opening together. */
@keyframes aura-drift-r {
  0%   { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(-6vw, 8vh) scale(1.14); }
  30%  { transform: translate(-10vw, 11vh) scale(1.05); }
  38%  { transform: translate(2vw, 3vh) scale(1.24); }
  52%  { transform: translate(4vw, 12vh) scale(1.08); }
  74%  { transform: translate(-5vw, 18vh) scale(1.18); }
  100% { transform: translate(0, 0) scale(1); }
}
/* Diagonal loop through the middle, deepest breath of the three */
@keyframes aura-orbit-c {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(11vw, -12vh) scale(1.26); }
  50%  { transform: translate(-4vw, -19vh) scale(0.84); }
  75%  { transform: translate(-13vw, -8vh) scale(1.16); }
  100% { transform: translate(0, 0) scale(1); }
}
/* Mobile: desktop min-widths make every blob larger than the whole
   screen — they merge into one static-looking wash. Size the clouds
   to the phone, lighten the blur (GPU cost), and run a touch faster. */
@media (max-width: 760px) {
  /* Portrait art direction: the two warm clouds meet above and beside
     the headline like a loose open pair; the lavender cloud anchors
     depth behind the CTAs. Deliberate crop: all three bleed off the
     edges. Denser cores + tighter falloff = present, not faint. */
  .aura-blob { filter: blur(24px) saturate(1.26); }
  .aura-blob-1 {
    width: 96vw; height: 96vw;
    min-width: 0; min-height: 0;
    top: 1%; left: -32%;
    background: radial-gradient(circle at 44% 42%,
      rgba(246, 158, 199, 1), rgba(251, 213, 228, 0) 56%);
    animation-duration: 18s;
  }
  .aura-blob-2 {
    width: 88vw; height: 88vw;
    min-width: 0; min-height: 0;
    top: -8%; right: -34%;
    background: radial-gradient(circle at 55% 45%,
      rgba(248, 190, 116, 1), rgba(252, 228, 196, 0) 56%);
    animation-duration: 18s;
  }
  .aura-blob-1 { animation-name: aura-m-l; animation-duration: 16s; }
  .aura-blob-2 { animation-name: aura-m-r; animation-duration: 16s; }
  .aura-blob-3 {
    width: 92vw; height: 92vw;
    min-width: 0; min-height: 0;
    top: 30%; left: 6%;
    background: radial-gradient(circle at 50% 46%,
      rgba(172, 158, 232, 0.98), rgba(218, 212, 245, 0) 58%);
    animation-duration: 13s;
  }
  /* Interior pages: the fainter echo washes out entirely on small
     screens — hold a little more color there. */
  body.page-sub .aura { --aura-base: 0.55; }
  /* Stages simplify on phones: opacity and scale only — no blur or
     shape morphs on mobile GPUs. */
  body[data-aura-stage] .aura-blob {
    filter: blur(24px) saturate(1.26);
    rotate: 0deg;
    border-radius: 50%;
  }
}

/* Mobile wing pair: the desktop choreography at phone-scale
   amplitudes (vw shrinks on small screens, so distances grow). */
@keyframes aura-m-l {
  0%   { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(14vw, 5vh) scale(1.12); }
  30%  { transform: translate(22vw, 8vh) scale(1.04); }
  38%  { transform: translate(-6vw, 1vh) scale(1.2); }
  52%  { transform: translate(-10vw, 7vh) scale(1.08); }
  74%  { transform: translate(8vw, 12vh) scale(1.22); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes aura-m-r {
  0%   { transform: translate(0, 0) scale(1); }
  14%  { transform: translate(-14vw, 6vh) scale(1.14); }
  30%  { transform: translate(-22vw, 9vh) scale(1.05); }
  38%  { transform: translate(6vw, 2vh) scale(1.22); }
  52%  { transform: translate(10vw, 8vh) scale(1.06); }
  74%  { transform: translate(-9vw, 13vh) scale(1.18); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Interior pages: fainter echo behind the header so text stays readable */
body.page-sub .aura { --aura-base: 0.45; }

/* All page content sits above the aura */
.site-nav, main, footer { position: relative; z-index: 1; }

/* ============ Shared nav ============ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(253, 249, 245, 0.8);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-nav.scrolled { border-bottom-color: var(--line); background: rgba(253, 249, 245, 0.96); }
/* With the menu open the bar and the panel are ONE surface. The bar is
   normally 80% cream over a blur, so the page aura shows through it
   while the panel below is solid — which is exactly the "header and
   menu body feel like two separate designs" Amber flagged (2026-07).
   `:has()` is already used elsewhere on the site. */
.site-nav:has(.nav-links.open) {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1.5625rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand-mark { width: 22px; height: 22px; display: block; }
/* responsive exception only: below 350px the mark stands alone */
@media (max-width: 350px) { .brand-name { display: none; } }

/* six links plus the CTA: the gap has to breathe with the viewport or
   the brand and the menu collide before the mobile menu takes over at
   760 (Courses was added 2026-07 and pushed the row to the edge) */
.nav-links { display: flex; gap: clamp(18px, 2.2vw, 32px); list-style: none; align-items: center; }
.nav-links a {
  text-decoration: none;
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--muted);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--coral-deep), var(--coral-deep));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: color 0.2s, background-size 0.2s var(--ease);
}
.nav-links a:hover { color: var(--ink); background-size: 100% 2px; }
.nav-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  background-size: 100% 2px;
}
.nav-links a.nav-cta {
  color: var(--coral-deep);
  border: 1.5px solid var(--coral);
  padding: 6px 16px;
  border-radius: 24px;
  background-image: none;
  transition: background 0.2s, color 0.2s;
}
.nav-links a.nav-cta:hover { background: var(--coral); color: var(--ink); }
/* the secondary group and the CTA note exist for the mobile menu only */
/* the secondary group, the CTA note and the Shop group label all
   exist for the mobile menu only */
.nav-secondary, .nav-note, .nav-group-label { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 15px 9px; /* 45x44+ tap target around the 27px lines */
  margin-right: -9px;
}
.nav-toggle span {
  display: block;
  width: 27px; height: 1.5px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* The last stretch before the mobile menu takes over at 760. With six
   links plus the CTA the row runs out of room around 790, so the type
   and the gap step down rather than letting the brand collide with the
   menu (2026-07, after Courses joined the nav). */
/* ---- Shop dropdown ----
   "Shop" is a DISCLOSURE, not a link: there is no /shop page and there
   should not be one until it has something to hold. The button opens a
   one-item menu today (Courses) and is built to take more.
   Keyboard and pointer both drive it: hover opens on a fine pointer,
   click and Enter/Space toggle, Escape closes and returns focus, and
   focus leaving the group closes it. */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0 0 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--ink); }
/* the current-page underline the plain nav links get */
.nav-drop-btn.is-current { color: var(--ink); font-weight: 600; box-shadow: 0 2px 0 -1px var(--coral); }
.nav-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.nav-drop-btn[aria-expanded="true"] .nav-caret { transform: translateY(1px) rotate(-135deg); }

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 176px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 46px -26px rgba(46, 42, 39, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 60;
}
/* :focus-within is the no-JS path. Focusing the button — which a
   click also does — opens the menu with CSS alone, so Courses stays
   reachable by pointer AND keyboard with scripting off. JS then adds
   the aria state, hover-open, Escape and click-outside on top. */
.nav-drop-btn[aria-expanded="true"] ~ .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-drop-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--body);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-drop-menu a:hover { background: rgba(46, 42, 39, 0.045); color: var(--ink); }
.nav-drop-menu a[aria-current="page"] { color: var(--coral-deep); font-weight: 600; }

/* The tablet nav step-down lives at the END of this file, after the
   type layer: `.nav-links a { font-size: 1rem }` is set there, and a
   media query written up here loses to it on source order no matter
   how narrow the breakpoint. Search "TABLET NAV STEP-DOWN". */
@media (max-width: 760px) {
  :root { --nav-h: 60px; }
  .brand { font-size: 1.375rem; gap: 10px; }
  .brand-mark { width: 19px; height: 19px; }
  .nav-toggle { display: block; }

  /* ---- Mobile menu ----
     A FULL-BLEED LAVENDER PANEL (Amber, July 2026, choosing this over
     cream and over charcoal). The structure comes from a reference she
     sent — mark and close in circles, edge-to-edge hairline rows, one
     solid CTA — translated into her palette rather than copied.
     WHY LAVENDER: cream alone was not enough of a moment and dark was
     wrong. This is saturated the way the brand is saturated, pastel
     rather than dark, and it appears nowhere else on the site, so
     opening the menu IS a moment instead of a paler version of the
     page behind it.
     WHAT WAS CHANGED FROM THE REFERENCE, and why it is not a copy:
     hairlines at 1px/16% instead of their heavy white rules, a small
     coral dot for the current page instead of a chevron (a chevron
     promises something expands), and a pill CTA on the site's own 26px
     radius instead of a rectangle. */
  .site-nav:has(.nav-links.open) { background: var(--menu-bg); }
  .site-nav:has(.nav-links.open) .nav-inner { padding-top: 12px; }
  /* the name drops: you already know whose site it is, and the mark
     carries it alone inside the circle */
  .site-nav:has(.nav-links.open) .brand-name { display: none; }
  .site-nav:has(.nav-links.open) .brand {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bg);
    display: grid;
    place-items: center;
  }
  .site-nav:has(.nav-links.open) .brand-mark { width: 30px; height: 30px; }
  .site-nav:has(.nav-links.open) .nav-toggle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bg);
    position: relative;
    padding: 0;
    margin: 0;
  }
  /* the bars have to be placed absolutely to cross at the centre of a
     circle; the stacked-margin version drifts into a chevron */
  .site-nav:has(.nav-links.open) .nav-toggle span {
    position: absolute; top: 50%; left: 50%; margin: 0;
    width: 21px; height: 1.6px;
    background: var(--ink);
  }
  .site-nav:has(.nav-links.open) .nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
  .site-nav:has(.nav-links.open) .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-nav:has(.nav-links.open) .nav-toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

  .nav-links {
    /* `.site-nav` carries a backdrop-filter, which makes it the
       containing block even for `position: fixed` children — so the
       panel is positioned against the 60px BAR, not the viewport, and
       its height has to be stated rather than stretched. */
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: calc(100vh - var(--nav-h) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--menu-bg);
    border-bottom: 0;
    padding: 20px 26px calc(30px + env(safe-area-inset-bottom, 0px));
    /* scrollable again now the aura cannot inflate it: on a short
       phone the rows must be reachable rather than clipped */
    overflow: hidden auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
                visibility 0s linear 0.22s;
  }
  .nav-links.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  }

  /* ONE soft field, off the right edge behind the middle of the list.
     Coral and gold on lavender — no third hue, no full-screen haze. */
  /* INSET: 0, not an oversized circle. An absolutely-positioned child
     that overhangs the panel extends its scrollable area, which is how
     the CTA ended up unreachable at 360x640. Painted as gradients
     inside a box that exactly fits, it can never do that. */
  .nav-links::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(58% 32% at 108% 44%, rgba(232, 132, 107, 0.30), rgba(232, 132, 107, 0) 72%),
      radial-gradient(52% 28% at 118% 62%, rgba(242, 196, 110, 0.26), rgba(242, 196, 110, 0) 72%);
  }
  .nav-links > li { position: relative; z-index: 1; width: 100%; text-align: left; }

  /* rows, edge to edge */
  .nav-links > li > a,
  .nav-links .nav-drop-menu a {
    display: block;
    padding: 16px 0;
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    background-image: none;
    border-bottom: 1px solid rgba(46, 42, 39, 0.16);
    transition: color 0.2s var(--ease);
  }
  .nav-links > li:first-child > a { border-top: 1px solid rgba(46, 42, 39, 0.16); }
  .nav-links > li > a:hover,
  .nav-links .nav-drop-menu a:hover { color: var(--coral-deep); }
  /* current page: a small coral dot, not a chevron — a chevron would
     promise the row expands */
  .nav-links > li > a[aria-current="page"],
  .nav-links .nav-drop-menu a[aria-current="page"] { position: relative; }
  .nav-links > li > a[aria-current="page"]::after,
  .nav-links .nav-drop-menu a[aria-current="page"]::after {
    content: "";
    position: absolute; right: 2px; top: 50%;
    transform: translateY(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--coral);
  }

  /* SHOP KEEPS ITS ROW and Courses sits under it, the way the
     reference handles a parent item: the button becomes a full-width
     row with a caret and the list opens beneath it, indented. */
  .nav-drop { display: block; }
  .nav-drop-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    border-bottom: 1px solid rgba(46, 42, 39, 0.16);
  }
  .nav-drop-btn .nav-caret { width: 9px; height: 9px; border-width: 2px; margin-right: 4px; }
  /* the desktop current-page underline has no place on a row */
  .nav-drop-btn.is-current { box-shadow: none; }
  .nav-group-label { display: none; }
  .nav-drop-menu {
    position: static;
    min-width: 0; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    text-align: left;
    display: none;
  }
  .nav-drop-menu::before { content: none; }
  .nav-drop-btn[aria-expanded="true"] ~ .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu { display: block; }
  .nav-links .nav-drop-menu a {
    padding-left: 18px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--body);
  }

  /* the closing group, pushed to the bottom */
  .nav-secondary { display: block; margin-top: auto; padding-top: 0; border-top: 0; }
  .nav-links > li.nav-secondary > a {
    display: inline-block;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    background-image: none;
    border: 0;
  }
  .nav-links > li.nav-secondary > a:hover { color: var(--coral-deep); }
  .nav-note { display: block; margin-top: 4px; }
  .nav-note span {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--muted);
  }
  /* one solid pill, on the site's own radius */
  .nav-links a.nav-cta {
    display: block;
    margin-top: 14px;
    padding: 17px 22px;
    border: 0;
    border-radius: 26px;
    /* the softer coral, not the hot --coral: at full width the bright
       fill shouts against the lavender */
    background: #E8846B;
    color: var(--ink);
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav-links a.nav-cta:hover { background: #E07359; }
}
/* Short phones: seven rows at 65px plus the closing block does not fit
   in 580px, so the rows step down rather than pushing Let's talk off
   the screen. */
@media (max-width: 760px) and (max-height: 720px) {
  .nav-links { padding-top: 14px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .nav-links > li > a,
  .nav-links .nav-drop-menu a,
  .nav-drop-btn { padding: 12px 0; font-size: 1.4rem; }
  .nav-links .nav-drop-menu a { font-size: 1.15rem; }
  .nav-links a.nav-cta { padding: 14px 20px; margin-top: 10px; }
  .nav-secondary { margin-top: auto; }
}

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 15px 32px;
  border-radius: 24px;
  transition: transform 0.16s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  border: 0;
  font-family: var(--font-body);
}
.btn-arrow::after { content: " →"; }
.btn-primary {
  background: linear-gradient(135deg, var(--coral), #F85B55);
  color: var(--ink); /* dark on coral = 5.4:1; white would fail */
  box-shadow: 0 12px 30px -12px rgba(255, 111, 97, 0.65);
}
.btn-primary:hover {
  background: #F85B55;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(255, 111, 97, 0.7);
}
.btn-outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0) scale(0.98); }

/* ============ Custom line-art graphics ============
   Hand-authored SVGs, stroke-drawn in brand colors. pathLength=100
   lets one dasharray rule drive every draw-in. */
.glyph {
  display: block;
  margin-bottom: 14px;
}
.glyph .stroke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.reveal.in-view .glyph .stroke {
  animation: draw-stroke 1.2s var(--ease) forwards;
}
.reveal.in-view .glyph .stroke:nth-of-type(2) { animation-delay: 0.3s; }
.glyph .fill { opacity: 0; }
.reveal.in-view .glyph .fill {
  animation: fill-fade 0.9s var(--ease) 0.55s forwards;
}
@keyframes fill-fade { to { opacity: 1; } }
.card.offer-courses .glyph     { color: var(--courses-deep); }
.card.offer-automations .glyph { color: var(--automations-deep); }
.card.offer-consulting .glyph  { color: var(--consulting-deep); }
.offer-section.offer-courses .glyph     { color: var(--courses-deep); }
.offer-section.offer-automations .glyph { color: var(--automations-deep); }
.offer-section.offer-consulting .glyph  { color: var(--consulting-deep); }

/* Offer card art: layered composition (blob + enlarged mark + accents) */
.card-art { margin-bottom: 18px; }
.card-art .glyph { width: 100%; height: auto; margin-bottom: 0; }

/* Problem section: text left, stuck-then-free path mark right */
.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: center;
}
.problem-art .glyph { width: 100%; max-width: 340px; margin: 0 auto; height: auto; }
/* Choreography: ideas enter scattered, tangle in the band, pause,
   then the one clear path draws out. Clarity, not speed. */
.reveal.in-view .problem-art .ln-1 { animation-duration: 1.8s; }
.reveal.in-view .problem-art .ln-2 { animation-duration: 1.8s; animation-delay: 0.15s; }
.reveal.in-view .problem-art .ln-3 { animation-duration: 1.8s; animation-delay: 0.3s; }
.reveal.in-view .problem-art .ln-4 { animation-duration: 1.8s; animation-delay: 0.45s; }
.reveal.in-view .problem-art .ln-out { animation-duration: 1.1s; animation-delay: 2.9s; }
.reveal.in-view .problem-art .ln-tick { animation-delay: 3.8s; }
@media (max-width: 1020px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-art { display: none; }
}

/* Hero proof column: real results as tilted chips, desktop only */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(398px, 29.5vw, 424px);
  gap: 32px;
  align-items: center;
}
/* The proof column is one art-directed composition: a descending
   diagonal of three cards (PERQ largest, StormwaterONE smallest)
   floating on a soft aura glow that ties them to the hero. */
.hero-proof {
  position: relative;
  margin-top: -64px;
  /* Clear gutter between the copy column and the nearest card —
     roughly one CTA button wide at common widths. */
  padding-left: clamp(40px, 7.6vw, 110px);
}
.hero-proof::before {
  content: "";
  position: absolute;
  inset: -12% -16%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 38% 28%, rgba(218, 212, 245, 0.5), transparent 72%),
    radial-gradient(closest-side at 72% 78%, rgba(251, 213, 228, 0.42), transparent 70%);
  filter: blur(18px);
}
.proof-chip {
  display: block;
  width: fit-content;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 22px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.proof-chip:hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-3px);
  box-shadow: 0 18px 44px -18px rgba(46, 42, 39, 0.26);
}
.proof-chip .proof-stat {
  display: block;
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.proof-chip .proof-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-top: 2px;
}
.pc-lavender { --tilt: -1.6deg; margin: 0; padding: 27px 33px; }
.pc-lavender .proof-stat { font-size: 2.45rem; }
.pc-lavender .proof-label { font-size: 0.95rem; }
.pc-peach    { --tilt: 1.1deg;  margin: 7px 0 0 14%; }
.pc-peach .proof-stat { font-size: 1.52rem; }
.pc-peach .proof-label { font-size: 0.9rem; }
.pc-blush    { --tilt: -1deg;   margin: 4px 0 0 15%; padding: 14px 19px; }
.pc-blush .proof-stat { font-size: 1.24rem; }
.pc-blush .proof-label { font-size: 0.84rem; }
/* Stat numbers carry the single brand accent; the pastel washes
   alone differentiate the cards (fills, per their documented role) */
.proof-chip .proof-stat { color: var(--coral-deep); }
@media (max-width: 1020px) {
  /* minmax(0,1fr): the credibility marquee's nowrap track must not
     set the column's min-content width */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* The numbers are the hook: on smaller screens the chips become a
     compact stat strip under the hero copy instead of disappearing. */
  .hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
  }
  .proof-chip,
  .proof-chip:hover { transform: none; }
  .hero-proof { margin-top: 4px; padding-left: 0; }
  .hero-proof::before { display: none; }
  .pc-lavender, .pc-peach, .pc-blush { --tilt: 0deg; margin: 0; padding: 10px 14px; }
  .proof-chip { padding: 10px 14px; border-radius: 14px; }
  .pc-lavender .proof-stat, .pc-peach .proof-stat, .pc-blush .proof-stat { font-size: 1.05rem; }
  .pc-blush .proof-label { font-size: 0.72rem; }
  .proof-chip .proof-stat { font-size: 1.05rem; }
  .proof-chip .proof-label { font-size: 0.72rem; margin-top: 1px; }
}
/* Phones: the chips become a wide results strip — one pastel row per
   result, hand-placed rather than stacked: alternating micro-tilts,
   staggered widths, and the soft lift kept, echoing the desktop
   cascade and the paper-tab language. */
@media (max-width: 760px) {
  .hero h1 { line-height: 1.1; }
  .hero .subhead { margin-bottom: 34px; }
  /* A concise credibility strip: three identical-width one-line rows,
     tight to the experience statement, whisper of tilt for texture. */
  .hero-proof { flex-direction: column; gap: 10px; margin-top: 18px; }
  .proof-chip {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 22px -16px rgba(46, 42, 39, 0.14);
  }
  .proof-chip,
  .proof-chip:hover { transform: rotate(var(--tilt, 0deg)); }
  /* Fixed stat column: the widest stat (Scanoptics) sets it, so all
     three labels start at the same point. */
  .proof-chip .proof-stat { font-size: 0.95rem; white-space: nowrap; min-width: 7.6em; }
  .proof-chip .proof-label { font-size: 0.8rem; margin-top: 0; white-space: nowrap; }
  .pc-lavender { --tilt: -0.6deg; margin: 0; background: rgba(218, 212, 245, 0.32); border-color: rgba(87, 74, 166, 0.12); }
  .pc-lavender .proof-stat { font-size: 0.95rem; min-width: 7.6em; }
  .pc-lavender .proof-label { font-size: 0.8rem; }
  .pc-peach    { --tilt: 0.5deg;  margin: 0; background: rgba(252, 228, 196, 0.36); border-color: rgba(138, 90, 20, 0.11); }
  .pc-blush    { --tilt: -0.4deg; margin: 0; background: rgba(251, 213, 228, 0.34); border-color: rgba(166, 53, 99, 0.11); }
}
/* Small phones: keep every strip row on one line (the Scanoptics
   stat is the widest — give it a touch less width, per the brief) */
@media (max-width: 380px) {
  .proof-chip { gap: 8px; padding: 12px 13px; }
  .proof-chip .proof-stat,
  .pc-lavender .proof-stat { font-size: 0.88rem; min-width: 7.6em; }
  .proof-chip .proof-label,
  .pc-lavender .proof-label { font-size: 0.73rem; }
}
/* Under ~355px the longest label ("Qualified leads at StormwaterONE")
   cannot hold one line at any legible size. The one-line rule gives way
   here rather than scrolling the page sideways. */
@media (max-width: 355px) {
  .proof-chip .proof-stat,
  .pc-lavender .proof-stat { min-width: 6.4em; }
  .proof-chip .proof-label,
  .pc-lavender .proof-label { white-space: normal; line-height: 1.3; }
}

/* Hand-drawn underline beneath the hero accent word */
.hero h1 em {
  position: relative;
  display: inline-block;
}
.squiggle {
  position: absolute;
  left: 2%;
  bottom: -0.16em;
  width: 96%;
  height: 0.24em;
  overflow: visible;
  transform: scaleX(0);
  transform-origin: left center;
  animation: swash-wipe 0.8s var(--ease) 0.8s forwards;
}
@keyframes swash-wipe { to { transform: scaleX(1); } }

/* Layered paper tabs — the section-headline emphasis device.
   Two soft rounded pastel tabs sit behind one short phrase: a deeper
   back tab offset down-right, a lighter front tab directly behind the
   text. One phrase per major section headline, 2-4 words, ink text on
   top. Color follows meaning (see MASTER.md): blush = clarity/what to
   build, peach = working together, lavender = different needs/paths,
   butter = the next step. */
.tab-em {
  --trb: 0.9deg;   /* back tab rotation — very slight tilt */
  --trf: -0.45deg; /* front tab rotation */
  position: relative;
  display: inline-block;
  padding: 0 0.14em 0.02em;
  margin: 0 -0.02em;
  z-index: 0;
}
.tab-em::before,
.tab-em::after {
  content: "";
  position: absolute;
  z-index: -1;
}
/* Both tabs are trimmed toward cap-height and baseline so the
   highlight reads as part of the type, not a pill pasted over it. */
.tab-em::before { /* back tab: deeper tone at ~68% alpha, small offset */
  inset: 0.18em -0.08em -0.06em 0.12em;
  background: var(--tab-back);
  border-radius: 0.08em 0.13em 0.07em 0.11em / 0.1em 0.15em 0.09em 0.13em;
  transform: rotate(var(--trb));
}
.tab-em::after { /* front tab: sits directly behind the phrase */
  inset: 0.1em 0 0.04em 0;
  background: var(--tab-front);
  border-radius: 0.11em 0.08em 0.13em 0.09em / 0.14em 0.1em 0.13em 0.11em;
  transform: rotate(var(--trf));
}
/* Two-color logic: blush marks the tension side (problems, open
   questions), butter marks the possibility side (collaboration,
   solutions, next steps). Peach/lavender tab variants retired. */
.tab-blush  { --tab-front: var(--blush); --tab-back: rgba(246, 187, 211, 0.68); }
.tab-butter { --tab-front: #FBEDBF;      --tab-back: rgba(242, 220, 156, 0.68); }

/* Entrance: inside a reveal, the back tab slides up into place first,
   the front tab follows; the text itself never moves. */
.reveal .tab-em::before,
.reveal .tab-em::after {
  opacity: 0;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.reveal .tab-em::before { transform: rotate(var(--trb)) translateY(0.2em); }
.reveal .tab-em::after  { transform: rotate(var(--trf)) translateY(0.15em); }
.reveal.in-view .tab-em::before {
  opacity: 1;
  transform: rotate(var(--trb));
  transition-delay: 0.18s;
}
.reveal.in-view .tab-em::after {
  opacity: 1;
  transform: rotate(var(--trf));
  transition-delay: 0.34s;
}

/* Mobile: tighter offset, gentler rotation, compact padding */
@media (max-width: 760px) {
  .tab-em {
    --trb: 0.6deg;
    --trf: -0.3deg;
    padding: 0.02em 0.12em 0.03em;
  }
  .tab-em::before { inset: 0.07em -0.08em -0.09em 0.1em; }
}


@keyframes draw-stroke {
  to { stroke-dashoffset: 0; }
}

/* Course-assembly strip (services, Courses band): the five parts of
   a course pop into place left to right, arrows joining them, once
   the strip scrolls into view. */
.course-build {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 26px;
  margin: 64px 0 0;
}
.cb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 92px;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
}
.cb-step svg { width: 46px; height: 46px; }
.cb-step span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--courses-deep);
  text-align: center;
}
.cb-arrow {
  width: 26px;
  flex: none;
  margin-top: 17px;
  opacity: 0;
  transform: translateX(-6px);
}
.course-build.in-view .cb-step { animation: cb-pop 0.5s var(--ease) both; }
.course-build.in-view .cb-arrow { animation: cb-slide 0.35s var(--ease) both; }
.course-build.in-view > :nth-child(2) { animation-delay: 0.3s; }
.course-build.in-view > :nth-child(3) { animation-delay: 0.44s; }
.course-build.in-view > :nth-child(4) { animation-delay: 0.74s; }
.course-build.in-view > :nth-child(5) { animation-delay: 0.88s; }
.course-build.in-view > :nth-child(6) { animation-delay: 1.18s; }
.course-build.in-view > :nth-child(7) { animation-delay: 1.32s; }
.course-build.in-view > :nth-child(8) { animation-delay: 1.62s; }
.course-build.in-view > :nth-child(9) { animation-delay: 1.76s; }
@keyframes cb-pop { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cb-slide { to { opacity: 1; transform: translateX(0); } }
@media (max-width: 640px) {
  .course-build { column-gap: 10px; }
  .cb-arrow { display: none; }
}

/* ============ Sections shared ============ */
section { padding: 104px 0; }
/* The section directly under a sticky anchor bar sits closer to it
   (Amber: the tab-to-title gap read large) — applies to Services
   and Work alike */
.anchor-nav + section { padding-top: 74px; }
@media (max-width: 760px) {
  .anchor-nav + section { padding-top: 48px; }
}
/* Equal rhythm: last-child margins must not leak through section
   wraps into the seam (2026-07 spacing audit) */
.wrap > :last-child { margin-bottom: 0; }
.page-head h1:last-child { margin-bottom: 0; }
/* Phones: the desktop rhythm doubles into 200px+ of dead scroll
   between sections — tighten it. 48px per side (Amber, July 2026:
   the 64px rhythm still read as "big gaps" around sparse content —
   single links, band lines, floating photos). Bridge and CTA band
   scale down with it so every joint stays equal. */
@media (max-width: 760px) {
  section { padding: 48px 0; }
  section.bridge { padding: 40px 0; }
  .section-foot-link { margin-top: 30px; }
  .foot-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 20px;
  }
  .foot-links .arrow-link { padding-top: 10px; padding-bottom: 10px; background-position: 0 calc(100% - 8px); }
  .wrap .eyebrow, .wrap .xp-divider { margin-bottom: 18px; }

/* not a section eyebrow: a divider inside the experience list,
   the one place the uppercase label still does a job the heading
   cannot (2026-07) */
  section[aria-labelledby="why-title"] .section-title { margin-bottom: 30px; }
  .cap-card { padding: 20px 20px 22px; }
  .cap-card h3 { margin-bottom: 8px; }
  /* proof rows: a touch more air on the right for the longest label */
  .proof-chip { padding-left: 14px; padding-right: 16px; }
}

/* NOT a section eyebrow. Section eyebrows are retired site-wide
   (2026-07: ten of eighteen only restated the heading beneath them,
   and the rest left section headings sitting at two different heights,
   166px or 132px, depending on whether one was present). This is the
   single survivor and it does a different job: a divider inside the
   About experience list. */
.xp-divider,
.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.62rem, 4vw, 2.75rem);
  margin-bottom: 18px;
}
.section-lede {
  color: var(--muted);
  margin-bottom: 56px;
}

.section-foot-link { margin-top: 40px; }
/* Closing link pair (Selected Work): primary link leads, the
   secondary reads quieter in muted ink. Editorial, not buttons. */
.foot-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 28px;
}
.foot-links .foot-secondary {
  color: var(--muted);
  background-image: linear-gradient(var(--muted), var(--muted));
}
.foot-links .foot-secondary:hover { color: var(--coral-deep); background-image: linear-gradient(var(--coral-deep), var(--coral-deep)); }

/* ============ Scroll reveal ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal.settled { transition-delay: 0s !important; }

/* ============ Hero (home) ============ */
.hero {
  min-height: 72vh;
  min-height: 72dvh;
  display: flex;
  align-items: flex-start;
  /* fixed top offset: the hero headline starts 95px under the nav,
     exactly like every page-head (2026-07 hero audit) */
  padding: 158px 0 64px;
}
.hero-content { max-width: 760px; }
/* With the proof column, the hero spans the full wrap; copy keeps
   its comfortable measure inside the grid. */
.hero-content.hero-grid { max-width: 1120px; }
.hero-grid .hero-copy { max-width: 690px; }


.hero h1 {
  font-size: var(--fs-h1); /* the shared display size — no hero exception */
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.hero h1 em { font-style: italic; color: var(--coral-deep); }

.hero .subhead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--body);
  letter-spacing: -0.01em;
  line-height: 1.5;
  max-width: 640px;
  margin-bottom: 42px;
}

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Transition band: many industries, one goal — a quiet bridge
   between the problem statement and the work. Static by design. */
.bridge {
  padding: 52px 0;
  background: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(46, 42, 39, 0.08);
  border-bottom: 1px solid rgba(46, 42, 39, 0.08);
}
.bridge .wrap { text-align: center; }
/* Building: curated collection — category header left, featured
   project rows right; rows are whole-row links with hairline
   dividers, no cards */
.bld-cat {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px 56px;
  align-items: start;
  /* same card surface as the case studies above, so the three
     sections read as one family (Amber) */
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 34px 38px 30px;
}
.bld-cat + .bld-cat { margin-top: 22px; }
.bld-cat-head .glyph { margin-bottom: 10px; display: block; width: 56px; height: 56px; }
/* category titles sit on the card-title grade (they were inheriting
   the browser-default h3 size, the one off-token text on the site) */
.bld-cat-head h3 { margin-bottom: 8px; font-size: var(--fs-intro); line-height: 1.3; }
/* small like the project descriptions: the project title dominates,
   category copy recedes to a supporting label */
.bld-cat-head p { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.bld-items { list-style: none; margin: 0; padding: 0; }
/* Each project is a ROW ON A HAIRLINE, not a card. Nested cards inside
   the category card made the section read as a product directory —
   boxes inside boxes, worst on a phone (Amber, July 2026). One surface
   per section: the category card holds, the rows divide. */
.bld-item {
  display: block;
  padding: 15px 0;
  text-decoration: none;
  border-top: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}
.bld-items li:first-child .bld-item { border-top: 0; padding-top: 0; }
.bld-item-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline; /* arrow rides the title's first baseline */
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
  transition: color 0.2s;
  font-size: var(--fs-body);
}
/* lighter than --muted but still ~5.2:1 on the card; the small grade
   gives each row its own hierarchy (title 16/17 > description) */
.bld-item-desc {
  display: block;
  color: #6F675D;
  font-size: var(--fs-small);
  line-height: 1.5;
  /* no measure cap: the row is now the full card column and a
     58ch clamp broke one-sentence descriptions mid-thought */
  text-wrap: pretty;
}
/* Linked cards (external project sites, new tab) carry a ↗ in the
   top-right corner; cards without a destination stay plain divs */
a.bld-item:hover .bld-item-name { color: var(--coral-deep); }
a.bld-item .bld-item-arrow {
  color: var(--coral-deep);
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 860px) {
  .bld-item { padding: 13px 0; }
  /* stacked, the first row sits directly under the category
     description and needs its own rule to separate them */
  .bld-items li:first-child .bld-item { border-top: 1px solid var(--line); padding-top: 13px; }
  .bld-cat { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px 18px; }
  .bld-cat-head p { margin-bottom: 0; }
}
/* When the band leads into a white section, one hairline is enough */
.bridge + .band-white { border-top: 0; }
.bridge-line {
  font-family: var(--font-body);
  color: var(--body);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* Hero entrance: staggered rise on load (home only) */
.page-home .hero h1,
.page-home .hero .subhead,
.page-home .hero .cta-row,
.page-home .hero .hero-proof {
  opacity: 0;
  transform: translateY(26px);
  animation: hero-in 0.8s var(--ease) forwards;
}
.page-home .hero .subhead { animation-delay: 0.15s; }
.page-home .hero .cta-row { animation-delay: 0.28s; }
.page-home .hero .hero-proof { animation-delay: 0.42s; }
@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* Interior page headers */
/* 158/149 rather than 124/112: with the page-head eyebrows removed
   (Amber, July 2026) the headline has to absorb the eyebrow block's
   height, or every sub-page headline rides ~34px higher than the home
   hero's. The measured target is the same as it always was: h1 top at
   158 desktop / 149 phone. */
/* ============ INTERIOR HERO SYSTEM (2026-08) ============
   ONE FRAME FOR SIX PAGES. Before this pass the interior heroes shared
   colour and type but nothing else: Services ran 1358px tall with a
   1072px diagram, Work ran 334px with no visual at all, and the copy
   sat in a different place on almost every page.

   The frame every interior head now shares:
   · 76px of air beneath the nav, 80px below
   · one h1 scale (with the documented long variant)
   · the lede DIRECTLY under the h1, never elsewhere in the hero
   · a two-column grid whenever a visual is present
   · the visual inside ONE bounding area, secondary to the h1
   · typical height 480-580, hard cap 620
   Variant A (editorial: Expertise, Work, Services, Courses) splits
   48/52. Variant B (portrait: My Approach, About) splits 44/56. The
   only difference between them is that ratio. */
.page-head { padding: calc(var(--nav-h) + 76px) 0 80px; }

/* RESTORED 2026-08. This whole block was deleted by accident in the
   "Quiet the Expertise map" commit: a scripted range-replace computed
   its end position with a loose search and swallowed the Services head
   along with it. Services then rendered its 480x272 diagram at the
   full 1072px container width, with the phone drawing showing beneath
   it, and the head ran 1358px tall. If that hero ever looks enormous
   again, check that these selectors still exist. */
/* ---- Services head: copy left, marketing-system diagram right ----
   The art is wide and short (480x272) so the row height stays driven
   by the copy. TWO TRAPS, both learned the hard way: `.reveal.in-view`
   sets `opacity: 1` and `transform: none` at higher specificity than
   `.head-art`, so BOTH the fade-back and the nudge have to ride the
   inner svg or they silently do nothing. */
.head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 400px);
  gap: 40px;
  /* copy starts at the top so its h1 lands on the same line as every
     other page's; only the art centres against the row */
  align-items: start;
}
.head-grid .head-art { align-self: center; }
.head-art .glyph { width: 100%; height: auto; margin-bottom: 0; opacity: 0.92; }
/* One rule drives every draw-in; per-element timing rides --d/--fd.
   Reuses the existing stroke draw-on — no new motion device. */
.reveal.in-view .head-art .stroke { animation-duration: 1.5s; animation-delay: var(--d, 0s); }
.reveal.in-view .head-art .fill { animation-delay: var(--fd, 0.6s); }
/* The composition runs past the wrap into the gutter so a node and a
   line dissolve off the page edge; the head clips the overflow. */
.page-head-art { overflow: hidden; }
@media (min-width: 1021px) {
  .head-art .glyph { transform: translateX(clamp(0px, (100vw - 1060px) / 6, 58px)); }
}
@media (min-width: 1180px) {
  .head-art { width: calc(100% + 68px); max-width: none; margin-right: -68px; }
}
/* Tablet: same composition, smaller and quieter. */
@media (max-width: 1020px) {
  .head-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
  .head-art .glyph { opacity: 0.68; }
}
/* Phone: single-column, no art column */
@media (max-width: 760px) {
  .head-grid { grid-template-columns: 1fr; gap: 10px; }
  .page-head-art { padding-bottom: 16px; }
}

/* ---- Services hero: three stacked service cards ----
   Courses (peach) → Workflow & AI (lavender) → Consulting (blush).
   Each card is absolutely placed, offset right-down, with a slight
   tilt so the trio reads as a composed stack. The wide-viewport
   overflow rule for the old SVG (.head-art width: calc(100%+68px))
   must not apply here — overridden below. */
.svc-trio {
  position: relative;
  /* enough room for three cards each offset 58px down */
  height: clamp(286px, 28vw, 328px);
  /* cancel the SVG-era bleed that nudged the art past the column */
  width: auto !important;
  max-width: none;
  margin-right: 0 !important;
  align-self: center;
  /* pad top so the first card doesn't sit flush against the grid edge */
  padding-top: 8px;
}
.svc-card {
  position: absolute;
  width: clamp(196px, 70%, 244px);
  padding: 18px 20px 20px;
  border-radius: 16px;
  border: 1px solid rgba(46,42,39,0.1);
  box-shadow: 0 6px 28px -8px rgba(46,42,39,0.13);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.svc-card:hover {
  box-shadow: 0 10px 36px -8px rgba(46,42,39,0.18);
}
.svc-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.svc-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.svc-desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}
/* Per-card: position, tilt, and category tint */
.sc-courses {
  background: rgba(252,228,196,0.52);
  border-color: rgba(138,90,20,0.14);
  top: 0; left: 0;
  transform: rotate(-1.6deg);
  z-index: 1;
}
.sc-workflow {
  background: rgba(218,212,245,0.52);
  border-color: rgba(87,74,166,0.14);
  top: 58px; left: 34px;
  transform: rotate(1.2deg);
  z-index: 2;
}
.sc-consulting {
  background: rgba(251,213,228,0.52);
  border-color: rgba(166,53,99,0.14);
  top: 118px; left: 62px;
  transform: rotate(-0.8deg);
  z-index: 1;
}
/* Hover lifts the card out of the stack */
.sc-courses:hover  { transform: rotate(-1.6deg) translateY(-4px); }
.sc-workflow:hover { transform: rotate(1.2deg)  translateY(-4px); }
.sc-consulting:hover { transform: rotate(-0.8deg) translateY(-4px); }

/* Tablet: compress the cascade */
@media (max-width: 1020px) {
  .svc-trio { height: 262px; }
  .svc-card { width: 188px; padding: 14px 16px 16px; }
  .sc-workflow   { top: 52px;  left: 26px; }
  .sc-consulting { top: 106px; left: 48px; }
  .svc-name { font-size: 0.97rem; }
  .svc-desc { font-size: 0.76rem; }
  .svc-icon { width: 28px; height: 28px; }
}

/* Mobile: the anchor nav below already lists all three sections,
   so showing the cards again is redundant — hide the whole stack. */
@media (max-width: 760px) {
  .svc-trio { display: none; }
}


.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
.hero-split-portrait { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
/* The copy block: h1 and lede together, top-aligned against the row so
   every hero's headline starts on the same line. */
.hero-split .head-copy { align-self: center; }
.hero-split .head-copy h1 { margin-bottom: 20px; }
.hero-split .head-copy .section-lede { margin-bottom: 0; max-width: 46ch; }
/* THE BOUNDING AREA. Every hero visual lives inside this, so no page
   gets a bigger footprint than another. */
.hero-visual {
  align-self: center;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.hero-visual > * { max-height: 336px; }

@media (max-width: 900px) {
  .page-head { padding: calc(var(--nav-h) + 40px) 0 44px; }
  .hero-split,
  .hero-split-portrait { grid-template-columns: 1fr; gap: 26px; }
  .hero-visual { max-width: none; margin-left: 0; }
  .hero-visual > * { max-height: 300px; }
}

/* Work: two cropped builds, overlapped. Two, not a grid — the hero
   states the range and the page below does the showing. */
.work-pair { position: relative; padding-bottom: 42px; }
.work-pair img {
  width: 78%;
  /* height:auto or the HTML height attribute wins as a presentational
     hint and aspect-ratio is ignored entirely. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(46, 42, 39, 0.12);
  border-radius: 6px;
  background: #FFFDFA;
}
.work-pair img:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  rotate: -1.4deg;
}

/* Courses: the cover at hero scale, not the sales card. */
.crs-thumb-hero { width: 100%; max-width: 380px; margin-left: auto; }

/* About: the portrait moved out of its own section and into the head
   (Amber, 2026-08). It keeps the oval crop and the outline, at a
   smaller scale and cropped to the upper body. */
.hero-visual.about-shot { max-width: 312px; }

/* REBALANCED 2026-08 (Amber: "the h1 looks squished on desktop, the
   container can be bigger and the picture can be moved").
   Measured at 1440 before: the copy held 446px, the portrait 312px,
   and 315px between them was empty — 29% of the hero was nothing,
   which is why the headline was cramped into five lines while the row
   looked half-used. The old answer had been to shrink the h1 to 44px,
   a size that exists nowhere else on the site as an h1 and collides
   with the h2 grade.
   The cause was the split, not the type. Widening the container to
   1200 (as Expertise) and taking the copy to 66% gives the headline
   room to sit at the shared .h1-long grade and pulls the portrait
   left into the copy at the same time. Nav and footer stay at 1120. */
.page-about main .wrap { max-width: 1200px; }
.page-about .hero-split-portrait {
  grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
}
/* The portrait is pinned to the container's right edge, so widening the
   wrap alone pushes it further from the copy. Growing it is what closes
   the distance: 312 -> 340 at the 4/5 crop puts its left edge 28px
   nearer and gives the right side of the hero something to hold. The
   crop is the ceiling here — every extra 10px of width costs 12.5px of
   head height, and the head is already at the top of the six-page
   range. */
.page-about .hero-visual.about-shot { max-width: 340px; }
/* The shared hero lede caps at 46ch, which was measured against a
   446px copy column. Against 722px it left the paragraph looking like
   a narrow inset under a full-width headline. 56ch keeps it inside the
   56-62ch reading measure the site uses everywhere else. */
.page-about .hero-split .head-copy .section-lede { max-width: 56ch; }
/* MUST STAY AFTER the .page-about rules above. The shared collapse at
   900px is `.hero-split-portrait` (0,2,0); the page-scoped rules are
   also (0,2,0), so source order decides and the page rules would have
   kept About in two columns on a phone — the portrait rendered 114px
   wide at 390. Re-state the collapse here, after them. */
@media (max-width: 900px) {
  .page-about .hero-split-portrait { grid-template-columns: 1fr; gap: 26px; }
  .page-about .hero-visual.about-shot { max-width: 240px; }
  .page-about .hero-split .head-copy .section-lede { max-width: none; }
}
@media (max-width: 560px) {
  .page-about .hero-visual.about-shot { max-width: 190px; }
}
.hero-visual .about-portrait { width: 100%; }
.hero-visual .about-portrait img { object-position: 50% 22%; }
.hero-visual > .about-portrait,
.hero-visual.about-shot > * { max-height: none; }

@media (max-width: 900px) {
  .work-pair img { width: 72%; }
  .work-pair img:last-child { width: 56%; }
  .crs-thumb-hero { margin-left: 0; }
  .page-about .hero-visual.about-shot { max-width: 240px; }
}
@media (max-width: 560px) {
  /* About stacks the longest headline on the site above a portrait and
     ran 809px on a phone, past the 760 cap. The portrait gives way
     first — the face still reads at 190px. */
  .page-about .hero-visual.about-shot { max-width: 190px; }
  .page-about .head-copy h1.h1-long { font-size: 1.75rem; }
}

/* ---- Expertise head: copy left, layered expertise map right ----
   56/44. The copy starts at the top so its h1 lands on the same line as
   every other page head; the object centres against the WHOLE copy
   block, headline and paragraph together.

   ONE COMPACT OBJECT (Amber, July 2026). The previous version ran four
   full-width bands, which "feel like a decorative list and repeat the
   content shown immediately below". These are strips sized to their own
   content, stepped on a constant 26px offset and overlapping by 10px —
   a stack of paper, not four rectangles floating in a column. No
   spine, no thread, no icons: the overlap is the whole idea. */
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.head-copy h1 { margin-bottom: 20px; }
.head-split .head-copy { align-self: center; }

.xmap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.xmap-list li {
  position: relative;
  width: max-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  gap: 1px 12px;
  padding: 13px 26px 14px 18px;
  background: var(--plane);
}
.xmap-list .xm-num { grid-row: span 2; align-self: center; }
.xmap-list li + li { margin-top: -10px; }
/* A constant step, so the cascade reads as one deliberate object. */
.xmap-list li:nth-child(1) { margin-left: 0; }
.xmap-list li:nth-child(2) { margin-left: 26px; }
.xmap-list li:nth-child(3) { margin-left: 52px; }
.xmap-list li:nth-child(4) { margin-left: 78px; }
/* Very subtle butter, blush and lavender. Butter runs lowest: at equal
   alpha it reads brightest, and the first strip must not look first. */
.xmap-list li:nth-child(1) { --plane: linear-gradient(102deg, rgba(242, 169, 59, 0.13), rgba(242, 169, 59, 0.05)); }
.xmap-list li:nth-child(2) { --plane: linear-gradient(98deg, rgba(251, 213, 228, 0.5), rgba(251, 213, 228, 0.2)); }
.xmap-list li:nth-child(3) { --plane: linear-gradient(104deg, rgba(150, 138, 214, 0.18), rgba(150, 138, 214, 0.07)); }
.xmap-list li:nth-child(4) { --plane: linear-gradient(96deg, rgba(198, 178, 216, 0.26), rgba(198, 178, 216, 0.09)); }

.xm-num { font-weight: 600; letter-spacing: 0.08em; color: var(--muted); opacity: 0.7; }
.xm-name { font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.xm-note { color: var(--muted); grid-column: 2; }

/* ---- Expertise content width (Amber, 2026-08: "approximately
   1180-1240px") ----
   Six three-column rows need more room than the 1120 shared container.
   Scoped to main so the nav and footer keep the site-wide 1120 and
   stay aligned with every other page — the 40px per side shows up as
   the rows breathing slightly wider than the header, which is the
   trade she asked for. */
.page-expertise main .wrap { max-width: 1200px; }

/* ---- Expertise hero: six overlapping sheets ----
   Lives in .hero-visual (not .head-art), so needs its own width rule
   and its own --d/--fd timing hooks to match the head-art draw-on. */
.xp-visual .glyph { width: 100%; height: auto; margin: 0; opacity: 0.92; }
/* The 420-wide viewBox renders around 476px on a desktop head and only
   ~342px on a phone, so the 10px labels fall to about 8px there. Step
   them up in viewBox units, and buy the width back out of the tracking
   rather than the sheets. Measured ceiling: at 12px/0.9 four of the six
   labels run past their own sheet, so 11.5/0.45 is the fit. */
@media (max-width: 760px) {
  .xp-visual .glyph text { font-size: 11.5px; letter-spacing: 0.45px; }
}
.reveal.in-view .xp-visual .glyph .stroke { animation-duration: 1.5s; animation-delay: var(--d, 0s); }
.reveal.in-view .xp-visual .glyph .fill   { animation-delay: var(--fd, 0.5s); }

/* ---- Services hero: three-path converge SVG ----
   Replaces svc-trio; .head-art already handles sizing/animation.
   Hide on mobile — the anchor nav below already lists the sections. */
.svc-vis { align-self: center; }
@media (max-width: 760px) { .svc-vis { display: none; } }

/* HEAD -> FIRST SECTION. Amber asked for 60-90px at this joint in July
   2026, when the Expertise head "was leaving a large empty field under
   the paragraph". She raised the same complaint about About in 2026-08.
   Measured across the six heads before the fix: expertise 24,
   my-approach 78, courses 184, about 184, projects 224, services 224 —
   one joint, six values, and only two inside the band she set.
   Projects and Services are a different joint: both carry an
   .anchor-nav between the head and the first section, so their gap is
   serving that nav and is left alone. About and Courses share this
   exact structure and now share one value: the head keeps its 80px
   bottom padding and the section adds nothing, so the joint is 80.
   MUST STAY BEFORE the .page-head-tight rules below — same
   specificity, source order decides, and Expertise opts into the
   tighter joint deliberately. */
.page-head + section { padding-top: 0; }
/* My Approach's head is also a .page-head, so the rule above caught it
   and flattened the bridge under it from 78 to 26. It was already
   inside the band; put it back. */
.hero-band + section { padding-top: 52px; }

.page-head-tight { padding-bottom: 0; }
.page-head-tight + section { padding-top: 24px; }

@media (max-width: 900px) {
  .head-split { grid-template-columns: 1fr; gap: 26px; }
  .head-split .xmap { align-self: start; }
  .xmap-list li { padding: 12px 22px 13px 16px; }
  .xmap-list li:nth-child(2) { margin-left: 18px; }
  .xmap-list li:nth-child(3) { margin-left: 36px; }
  .xmap-list li:nth-child(4) { margin-left: 54px; }
  .page-head-tight + section { padding-top: 20px; }
}
@media (max-width: 480px) {
  /* The step has to give way before the strips do — a 54px indent on a
     360px screen costs more than the cascade is worth. */
  .xmap-list li:nth-child(2) { margin-left: 10px; }
  .xmap-list li:nth-child(3) { margin-left: 20px; }
  .xmap-list li:nth-child(4) { margin-left: 30px; }
}

.band-white {
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ============ Cards (offers + work teasers) ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  transform-style: preserve-3d;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.card h3 { font-size: 1.45rem; margin-bottom: 12px; }
.card p { font-size: 0.97rem; color: var(--body); margin-bottom: 24px; }
.card .card-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 12px;
}

/* Per-offer color coding — tags, borders, links, corner washes */
.card.offer-courses     { background: radial-gradient(circle at top right, rgba(252,228,196,0.55), transparent 55%), var(--bg-raised); }
.card.offer-automations { background: radial-gradient(circle at top right, rgba(218,212,245,0.55), transparent 55%), var(--bg-raised); }
.card.offer-consulting  { background: radial-gradient(circle at top right, rgba(251,213,228,0.55), transparent 55%), var(--bg-raised); }
.card.offer-courses:hover     { border-color: var(--peach); }
.card.offer-automations:hover { border-color: var(--lavender); }
.card.offer-consulting:hover  { border-color: var(--blush); }
.card.offer-courses .arrow-link     { color: var(--courses-deep);     background-image: linear-gradient(var(--courses-deep), var(--courses-deep)); }
.card.offer-automations .arrow-link { color: var(--automations-deep); background-image: linear-gradient(var(--automations-deep), var(--automations-deep)); }
.card.offer-consulting .arrow-link  { color: var(--consulting-deep);  background-image: linear-gradient(var(--consulting-deep), var(--consulting-deep)); }

/* Arrow links: coral underline draws in on hover */
.arrow-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--coral-deep);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--coral-deep), var(--coral-deep));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: background-size 0.2s var(--ease);
}
/* Non-breaking space before the arrow: on a link long enough to wrap
   ("See the Scanoptics demand generation rebuild") a normal space let
   the arrow drop to a line of its own. */
.arrow-link::after { content: "\00a0→"; }
.arrow-link:hover { background-size: 100% 2px; }

/* ============ Testimonials ============ */
/* Continuous marquee: two identical sets scroll -50%, seamless loop.
   Pauses on hover/focus so quotes can be read; static wrapped grid
   under reduced motion. */
.quote-marquee {
  position: relative;
  background:
    radial-gradient(60% 120% at 20% 50%, rgba(218, 212, 245, 0.28), transparent 65%),
    radial-gradient(55% 110% at 82% 50%, rgba(251, 213, 228, 0.24), transparent 60%);
  border-radius: 28px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.quote-track {
  display: flex;
  width: max-content;
  animation: quotes-scroll var(--marquee-duration, 45s) linear infinite;
}
.quote-marquee:hover .quote-track,
.quote-marquee:focus-within .quote-track,
.quote-marquee.paused .quote-track {
  animation-play-state: paused;
}


/* The marquee is its own motion. Its cards must NOT also be scroll
   reveals: the duplicated set exists off-screen to make the loop
   seamless, so it never intersects the viewport, and every card in it
   sat at opacity 0 permanently — a five-card hole in the track
   (found in the 2026-07 audit). Horizontal travel is the reveal. */
.quote-marquee .quote-card.reveal { opacity: 1; transform: none; }
/* Visible pause control (WCAG 2.2.2): hover isn't a mechanism on touch */
.marquee-toggle {
  display: block;
  margin: 0 0 14px auto;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.marquee-toggle:hover { color: var(--ink); border-color: rgba(46, 42, 39, 0.3); }
@media (max-width: 760px) {
  /* Phones read the quotes as a static stack — nothing to pause */
  .marquee-toggle { display: none; }
  .quote-track { animation: none; width: auto; flex-wrap: wrap; }
  .quote-set { flex-wrap: wrap; }
  .quote-set[aria-hidden="true"] { display: none; }
  .quote-marquee { -webkit-mask-image: none; mask-image: none; }
}
.quote-set {
  display: flex;
  gap: 20px;
  padding-right: 20px;
}
.quote-set .quote-card {
  width: min(380px, 82vw);
  flex-shrink: 0;
}
@keyframes quotes-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


.quote-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.quote-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}
.quote-card blockquote {
  font-size: 0.98rem;
  color: var(--body);
  border: 0;
  margin: 0;
}
.quote-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.quote-foot .monogram {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  /* 600, NOT 700: the Newsreader request is 400/500/600, so a 700 here
     was faux bold — Chromium smearing the 600 face (2026-07 font
     audit). Any serif weight outside 400/500/600 must either change or
     be added to the Google request first. */
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.q-peach .monogram    { background: var(--peach);    color: var(--courses-deep); }
.q-lavender .monogram { background: var(--lavender); color: var(--automations-deep); }
.q-blush .monogram    { background: var(--blush);    color: var(--consulting-deep); }
.quote-foot .who-name { font-weight: 600; color: var(--ink); font-size: 0.95rem; line-height: 1.3; }
.quote-foot .who-role { color: var(--muted); font-size: 0.85rem; }

/* ============ Services page ============ */
.anchor-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(253, 249, 245, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.anchor-nav ul {
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.anchor-nav ul::-webkit-scrollbar { display: none; }
.anchor-nav a { white-space: nowrap; }
.anchor-nav a {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 24px;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.anchor-nav a:hover { color: var(--ink); border-color: var(--line); }
@media (max-width: 760px) {
  .anchor-nav a { padding: 13px 10px; } /* ≥44px touch target */
  /* Touch targets ≥44px for links that render small on phones */
  .arrow-link { padding-top: 13px; padding-bottom: 14px; }
  /* the footer's column links stand alone on their own rows, so the
     target grows with padding rather than a taller line-height */
  .footer-col a { display: inline-block; padding: 8px 0; }
  .footer-col li + li { margin-top: 2px; }
  .form-note a { display: inline-block; padding: 14px 0; }
  .brand { padding: 8px 0; }
}
.anchor-nav a.nav-courses.active     { color: var(--courses-deep);     background: var(--peach); }
.anchor-nav a.nav-automations.active { color: var(--automations-deep); background: var(--lavender); }
.anchor-nav a.nav-consulting.active  { color: var(--consulting-deep);  background: var(--blush); }
/* Work: each section's tab takes its own color as you scroll */
.anchor-nav a.nav-lead.active  { color: var(--coral-deep);      background: rgba(255, 111, 97, 0.18); }
.anchor-nav a.nav-grow.active  { color: var(--consulting-deep); background: var(--blush); }
.anchor-nav a.nav-built.active { color: var(--automations-deep); background: var(--lavender); }
#in-house, #client-work, #builds { scroll-margin-top: 140px; }

.offer-section { scroll-margin-top: 140px; }
.offer-section.offer-courses     { background: linear-gradient(180deg, rgba(252,228,196,0.28), transparent 75%); }
.offer-section.offer-automations { background: linear-gradient(180deg, rgba(218,212,245,0.28), transparent 75%); }
.offer-section.offer-consulting  { background: linear-gradient(180deg, rgba(251,213,228,0.28), transparent 75%); }
.offer-section + .offer-section { border-top: 1px solid var(--line); }

.offer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 800px) { .offer-grid { grid-template-columns: 1fr; } }

.offer-section h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 16px; }
.offer-desc { color: var(--body); margin-bottom: 28px; max-width: 600px; }

.offer-points { list-style: none; display: grid; gap: 14px; }
.offer-points li {
  position: relative;
  padding-left: 30px;
  font-size: 0.98rem;
  color: var(--body);
}
/* THE SITE'S ONE BULLET LANGUAGE: AN OPEN RING — a pale fill inside a
   deep 2px border, in the local accent. Amber chose it over the rule
   (July 2026). It reads as a marker belonging to its item rather than
   a dash beside it, and because it is OPEN it never collides with the
   filled coral dot that means "you are here" in the mobile menu.
   Shared with the How I Work hands-on list and the Expertise chapter
   capabilities. If a new list needs a marker it takes this one. */
.offer-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.34em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--peach);
  border: 2px solid var(--coral-deep);
  box-sizing: border-box;
}

.offer-aside {
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.offer-aside .tier {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.offer-aside .who {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.35;
}
.offer-aside p { font-size: 0.92rem; color: var(--body); margin-bottom: 22px; }

/* Per-offer section accents */
/* per-offer accent: pale fill, deep border */
.offer-section.offer-courses .offer-points li::before     { background: var(--peach);    border-color: var(--courses-deep); }
.offer-section.offer-automations .offer-points li::before { background: var(--lavender); border-color: var(--automations-deep); }
.offer-section.offer-consulting .offer-points li::before  { background: var(--blush);    border-color: var(--consulting-deep); }
.offer-section.offer-courses .offer-aside     { background: var(--peach); }
.offer-section.offer-automations .offer-aside { background: var(--lavender); }
.offer-section.offer-consulting .offer-aside  { background: var(--blush); }
.offer-section.offer-courses .offer-aside .tier     { color: var(--courses-deep); }
.offer-section.offer-automations .offer-aside .tier { color: var(--automations-deep); }
.offer-section.offer-consulting .offer-aside .tier  { color: var(--consulting-deep); }

/* ============ Services — What sounds like you? ============ */
.sp-section {
  padding: clamp(60px, 8vw, 100px) 0;
  border-top: 1px solid var(--line);
  /* A very gentle wash — lavender + peach at low opacity signals this is
     a crossroads for all of the services. */
  background:
    radial-gradient(ellipse 70% 55% at 18% 8%,  rgba(218,212,245,0.18), transparent 70%),
    radial-gradient(ellipse 55% 50% at 82% 92%, rgba(252,228,196,0.14), transparent 65%);
}

.sp-head { margin-bottom: clamp(30px, 4vw, 46px); }
.sp-head .section-title { margin-bottom: 12px; }
.sp-head p { color: var(--muted); font-size: var(--fs-body); max-width: 56ch; margin: 0; }

/* ---- Two-by-two card grid. Equal heights: every card reserves the height
   of its tallest face, so opening a card never shifts the layout. ---- */
.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
}

/* Card (Amber, 2026-08: "roughly 220-260px high, not ~400px ... and
   then the card ends. No giant empty space").
   THE OLD CARD WAS A FLIP. Both faces sat in the same grid cell via
   `grid-area: 1 / 1`, and `grid-auto-rows: 1fr` then sized EVERY card
   to the tallest panel on the board — so a four-line front face was
   padded out to the height of the longest back panel. That is where
   the ~200px of empty space came from; the front content was never the
   problem. The panel now opens underneath the front in normal flow and
   the card ends where its content ends. */
.sp-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .2s var(--ease), box-shadow .3s var(--ease);
}
.sp-card:hover { border-color: rgba(46, 42, 39, 0.22); }
.sp-card.open  { border-color: rgba(46, 42, 39, 0.22); }
/* Restrained tonal variation — one family, four temperatures. These
   were written but never applied to any card, so every card rendered
   plain white. They earn their keep on HOVER and while open (Amber,
   2026-08: "on hover ... slight background tint"): at rest the board
   is calm and the four situations read as equals; the tint is the
   card answering you. */
.sp-card { background: var(--bg-raised); }
.sp-tint-peach:hover,    .sp-tint-peach.open    { background: linear-gradient(rgba(252,228,196,.26), rgba(252,228,196,.26)) var(--bg-raised); }
.sp-tint-lavender:hover, .sp-tint-lavender.open { background: linear-gradient(rgba(218,212,245,.24), rgba(218,212,245,.24)) var(--bg-raised); }
.sp-tint-butter:hover,   .sp-tint-butter.open   { background: linear-gradient(rgba(251,237,191,.30), rgba(251,237,191,.30)) var(--bg-raised); }
.sp-tint-blush:hover,    .sp-tint-blush.open    { background: linear-gradient(rgba(251,213,228,.22), rgba(251,213,228,.22)) var(--bg-raised); }

.sp-face { min-width: 0; }

/* The panel is absent until asked for — same disclosure behaviour as
   `.plat-all` and `.case-d` elsewhere on the site, and no new motion:
   the budget is closed and an expand animation would be a new device. */
.sp-card .sp-back      { display: none; }
.sp-card.open .sp-back { display: block; }

/* ---- Front: the whole face is one button ---- */
.sp-open {
  font-family: var(--font-body);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: clamp(22px, 2.4vw, 28px) clamp(22px, 3vw, 30px);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
/* The one graphical element: a hairline along the top of the card that
   draws in from the left on hover. scaleX, not width — animating width
   is layout thrash and the detector rejects it. */
.sp-open::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--coral-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--ease);
}
.sp-open:hover::before,
.sp-open:focus-visible::before { transform: scaleX(1); }
.sp-card.open .sp-open::before { transform: scaleX(1); }
.sp-open:focus-visible,
.sp-close:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.sp-n {
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--coral-deep);
}
.sp-t {
  font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 26ch;
}
.sp-s {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 40ch;
}
/* Restrained interaction cue */
.sp-cue {
  margin-top: 8px;
  color: var(--coral-deep);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: transform .22s var(--ease);
}
.sp-open:hover .sp-cue { transform: translateX(3px); }
.sp-open:hover .sp-t   { color: var(--coral-deep); }

/* ---- Back ---- */
.sp-back {
  border-top: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 26px) clamp(22px, 3vw, 30px) clamp(22px, 2.6vw, 28px);
}
.sp-close {
  font-family: var(--font-body);
  align-self: flex-start;
  margin: 14px 0 0 -6px;
  padding: 4px 6px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: color .2s var(--ease);
}
.sp-close:hover { color: var(--coral-deep); }

.sp-k {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  color: var(--coral-deep);
  margin: 0 0 4px;
}
.sp-back .sp-k + p { margin: 0 0 14px; }
.sp-back p:not(.sp-k) {
  color: var(--body);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 58ch;
}
.sp-may { color: var(--muted) !important; }
.sp-cta { margin: 4px 0 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .sp-cue, .sp-close { transition: none; }
  /* the hover hairline draws with a transform; show it, do not sweep it */
  .sp-open::before { transition: none; }
}

@media (max-width: 860px) {
  /* Stack one card per row. The panel opens UNDER the front, same as
     desktop — the old rule hid `.sp-front` when open, which was correct
     for a flip and wrong for a disclosure: tapping a card made its own
     number and title disappear. */
  .sp-grid { grid-template-columns: 1fr; }
  .sp-open { min-height: 44px; }
  .sp-t, .sp-s { max-width: none; }
  .sp-back p:not(.sp-k) { max-width: none; }
}

/* Capabilities page: impact tiers */
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; } }



/* Capabilities grid (imported from the previous site's services) */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 960px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cap-grid { grid-template-columns: 1fr; } }

.cap-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.cap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.cap-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.cap-card p {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============ Work page ============ */
.case {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(22px, 3.4vw, 32px);
  margin-bottom: 14px;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), border-radius 0.2s var(--ease);
}
/* open cards earn the fuller card treatment; collapsed rows stay
   compact and closer to the editorial styling of the rest of the site
   (Amber: the card "feels very tall and slightly disconnected") */
.case:has(.case-d[open]) { border-radius: var(--radius); padding: clamp(28px, 4.5vw, 40px); }
/* Featured-work hover: a quiet layered gradient surfaces behind the
   case content — the aura thread carried into the cards. */
.case > * { position: relative; z-index: 1; }
.case::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(252, 228, 196, 0.5), transparent 55%),
    radial-gradient(110% 85% at 6% 96%, rgba(251, 213, 228, 0.42), transparent 52%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .case:hover::before { opacity: 1; }
}
.case:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}
/* Label colour is by ROLE, not by taste: section eyebrows are
   coral (wayfinding), everything that annotates content — card
   tags, case tags, case-column labels — is muted. Coral here made
   the case tag read like a section eyebrow sitting above grey
   column labels inside the same card (Amber, July 2026). */
.case .case-tag,
.more-list .case-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.case h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 26px; }
.case-head h2 { margin-bottom: 6px; }

.case-cols {
  display: grid;
  /* two or three columns depending on whether the case has impact
     detail beyond its preview line — auto-fit rather than a fixed 3 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

/* ---- Case disclosures ----
   Every case previews first and opens on demand (Amber, July 2026:
   "let someone skim all of your work first, then choose where to go
   deeper"). The whole preview is the control, not an icon: <summary>
   carries the tag, name, scope, IMPACT LINE and a thumbnail strip, so
   the strongest proof and one image survive the collapse. */
.case-d > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.case-d > summary::-webkit-details-marker { display: none; }
.case-d > summary:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 6px;
  border-radius: 6px;
}
.case-head h2 { margin-bottom: 6px; }
.case-scope { color: var(--muted); margin-bottom: 10px; }
/* The project name is the hero. The impact reads at body weight in
   body ink, not coral 600 — as the loudest element it was the first
   thing the eye landed on, ahead of the name (Amber, July 2026). The
   metrics and the full story wait for the expanded view. */
.case-impact { color: var(--body); margin-bottom: 0; max-width: 62ch; }
/* The impact line previews at the top of a closed case and MOVES to
   its proper place after Approach once the case opens (Amber, July
   2026), so the open card reads challenge, approach, impact in order.
   Two copies rather than a JS move: display:none takes the hidden one
   out of the accessibility tree, so nothing is announced twice, and it
   still works with JS off. */
.case-d[open] .case-impact { display: none; }
/* the hover lift is a preview affordance; an open case is a page of
   content and should not float */
.case:has(.case-d[open]):hover { transform: none; box-shadow: none; }
.case-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--coral-deep);
}
.case-d > summary:hover .case-toggle { color: #96263C; }
.tg-b { display: none; }
.case-d[open] .tg-a { display: none; }
.case-d[open] .tg-b { display: inline; }
.case-chev { display: inline-block; transition: transform 0.2s var(--ease); }
.case-d[open] .case-chev { transform: rotate(180deg); }
/* the detail sits under a hairline so the seam reads as structure */
.case-body { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
/* Provenance lives here rather than in the collapsed tag: it is a good
   detail, but it is not the first thing anyone needs. It still has to
   exist somewhere, so an employer is never implied to be a client. */
.case-rel {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 22px;
}
@media (max-width: 800px) { .case-cols { grid-template-columns: 1fr; gap: 20px; } }

.case-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  padding-top: 14px;
  border-top: 2px solid var(--peach);
}
.case-col p { font-size: 0.95rem; color: var(--body); }
/* All three column rules stay peach. The Impact rule used to run
   coral: side by side that read as emphasis, but stacked on a phone
   it just looked like one divider was the wrong colour (Amber,
   July 2026). The coral bold Impact text carries the emphasis. */
.case-col.result p {
  font-weight: 600;
  color: var(--coral-deep);
}

/* ============ Expertise page ============
   Rebuilt 2026-07 around what the page is FOR, not what it can list.
   Amber set the three-page split: Projects = what was built and
   changed; Expertise = the kinds of problems she knows how to solve;
   How I Work = what working with her is like. Everything that made
   this page a second portfolio came out — the two work artifacts, the
   four oversized result figures, the "how my expertise shows up"
   rows, the always-visible tool line.
   RESIST ADDING. Also built here and also removed: a typographic word
   composition, a numbered capability index, a company-logo strip, an
   asymmetric platform grid. Twelve equal capability cards would read
   as a generic agency page — four substantial areas is the format. */

/* --- 1. Four chapters ---
   Four oversized words, each opening a chapter (Amber, July 2026:
   "imagine four oversized words that dominate the page ... it becomes
   almost like reading chapters in a book. No cards. No icons. No
   feature grid. Just beautiful typography.").
   THE WORDS SIT AT --fs-h3, the card-title grade. They were at --fs-h1
   and it was wrong: 59px against a 47px h1 and a 41px section title
   INVERTED THE LADDER, so the chapter names out-shouted the page
   headline (Amber, July 2026: "they're too big"). The ladder now runs
   h1 47 > section h2 41 > chapter 29 > belief line 21 > body 17. A
   chapter name is a card title in function, and it takes that rung.
   Prominence here comes from the coloured rule and the space around
   each block, not from size.
   RESIST ADDING. Built here and removed across five passes: a
   typographic word composition, four oversized statement rows, a
   numbered capability index, an asymmetric platform grid, a company
   logo strip, two outcome-led artifacts, a four-across results row, a
   six-item "especially useful when" list, and the four working
   documents — those moved to How I Work, where they belong. --- */
.chapters { margin-top: 34px; }
/* THREE-PART ROW (Amber, July 2026): the name, then the problem and
   its capabilities, then the contribution and its proof link. Every
   row identical — no stagger, no cards, one neutral hairline. The
   gutter came in hard: the old two-column split left the problem and
   the contribution reading as two distant halves.
   SIX ROWS, NOT FOUR (Amber, 2026-08). Two things had to give. The
   title column went 0.62 -> 0.86fr because the names are phrases now,
   not single words: at 0.62 "Marketing and sales operations" broke
   three ways. And the padding came down 34/36 -> 28/30, because six
   rows at the old rhythm ran the section past 1500px. */
.ch {
  display: grid;
  grid-template-columns: 68px minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: clamp(18px, 2.2vw, 34px);
  /* the columns want a wide gutter; the revealed capability row does
     not, and inheriting the column gutter left it floating well below
     the toggle that opened it */
  row-gap: 4px;
  align-items: start;
  border-top: 1px solid rgba(84, 76, 112, 0.22);
  padding: 24px 0 26px; /* -14% now the capability lists are collapsed */
}
/* MARK + TWO COLUMNS (Amber, 2026-08, against a comp: "this feels
   closer"). Three columns of text made the eye cross the full width
   six times and put the capability list — the least important thing in
   the row — in the middle where it fought the situation line. The name,
   situation and capabilities now travel together and the contribution
   keeps its own column, so the row reads left to right once.
   THE MARK IS THE PART THAT BREAKS THE WALL. It is also the part this
   page spent five rebuilds removing (Amber, July 2026: "No cards. No
   icons. No feature grid. Just beautiful typography.") — flagged, and
   her call to keep.
   THREE TINTS, NOT SIX. The comp gives every row its own colour, which
   would undo her own Expertise colour brief (charcoal content, coral
   for interaction, pastels as atmosphere). The three brand pastels
   rotate instead, so each appears twice and no new hue enters. */
.ch-mark {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ch-mark .glyph { width: 34px; height: 34px; margin: 0; }
/* SIX TINTS, NONE REPEATED (Amber, 2026-08: "icon colors shouldn't
   repeat"). Not six arbitrary hues: a six-step ramp through the warm
   family the site already owns, butter to peach to coral to blush to
   orchid to lavender, so the set reads as one palette rotating rather
   than six decisions. Every stroke clears 4.5:1 on its own tint AND on
   cream — the pale coral needed #AE2F44 rather than --coral-deep,
   which measured 4.40:1 on it. */
.ch-strategy   .ch-mark { background: #FBEDBF; }
.ch-demand     .ch-mark { background: #FCE4C4; }
.ch-brand      .ch-mark { background: #FFD9CC; }
.ch-ops        .ch-mark { background: #FBD5E4; }
.ch-ai         .ch-mark { background: #EDD7EF; }
.ch-leadership .ch-mark { background: #DAD4F5; }
.ch-problem .ch-word { margin-bottom: 10px; }

/* ---- "What this can include" ----
   A quiet editorial action, not a control: no fill, no border, no pill.
   The capability list is the only thing that hides; the situation, the
   contribution and the proof link stay visible, so the scan pattern —
   what is happening, how Amber helps, proof — survives collapsed. */
.ch-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 12px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.ch-toggle:hover,
.ch-toggle:focus-visible { color: var(--coral-deep); }
.ch-sign { font-size: 1.05em; line-height: 1; width: 0.7em; text-align: center; }

/* Height via grid-template-rows so nothing measures or thrashes.
   THE PANEL SPANS THE ROW (Amber, 2026-08: "should be a full row, not
   just half a column ... it goes under the case study link"). It sits
   under BOTH columns, starting at the title's left edge rather than the
   mark's, so a seven-item capability list runs as one line instead of
   wrapping four times inside a half-width column. */
.ch-detail {
  grid-column: 2 / -1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s var(--ease), opacity 0.2s var(--ease), visibility 0.28s;
}
.ch-detail-in { overflow: hidden; }
/* visibility, not just clipping: 0fr hides the list on screen but
   leaves it in the accessibility tree, so a screen reader would read
   six collapsed capability lists as part of the running copy. */
.ch-detail { visibility: hidden; }
.ch.open .ch-detail { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.ch .ch-caps { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .ch-detail { transition: none; }
}
.ch:last-child { border-bottom: 1px solid rgba(84, 76, 112, 0.22); }
.ch-id { display: flex; align-items: baseline; gap: 12px; }
/* 600, not 500: the h3 grade carries 600 everywhere else on the site
   (`.xp-company` is the only other 30px display element and it is 600;
   every 21px card title is 600). 500 is the SECTION-HEADLINE weight. */
.ch-word {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.ch-for { color: var(--muted); margin-bottom: 10px; }
/* Capabilities are editorial text now, not a ringed list. The rings
   stay the site's bullet language everywhere they are still a LIST;
   here the four items read as one line of metadata. */
.ch-caps { color: var(--body); margin-bottom: 0; }
/* The contribution is the focal point of the row: display face, a
   grade up from the problem copy, full ink against its muted. */
/* 500 is the display weight the whole site uses; Newsreader 400 at this
   grade appeared only here. Size and colour are untouched, so the
   contribution still reads larger and darker than the situation copy. */
.ch-line {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.ch-link { margin-bottom: 0; }

/* --- Tools preview (2026-08). The section was a heading, a sentence
   and a link, which read as unfinished. Four categories give it
   structure; the full nine-group list stays behind the disclosure so
   the page order holds: problem, expertise, proof, tools. No cards, no
   logo wall, no per-category colour. --- */
.tl-preview {
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.6vw, 40px);
}
.tl-preview li + li {
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 2.6vw, 40px);
}
.tl-cat {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.tl-eg { display: block; color: var(--muted); }
@media (max-width: 860px) {
  .tl-preview { grid-template-columns: 1fr 1fr; gap: 22px clamp(20px, 3vw, 34px); }
  .tl-preview li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tl-preview li + li { border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .tl-preview { grid-template-columns: 1fr; gap: 0; }
  .tl-preview li + li {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px;
  }
}

/* EXPANDED: ONE LEVEL, NOT TWO (Amber, 2026-08). The nine-group 3x2
   grid under a four-category preview was two taxonomies stacked, which
   is what made the section read as a software resume. Four groups on
   hairlines, label left, tools inline right. Breadth, not taxonomy. */
.plat-list {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* dl > div > dt + dd: the wrapper is what carries the rule. With the
   border on dt and dd separately it broke across the column gap and
   read as two short rules per group. */
.plat-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 0 clamp(20px, 2.6vw, 40px);
  padding: 11px 0;
}
.plat-row + .plat-row { border-top: 1px solid var(--line); }
.plat-list dt { font-weight: 600; color: var(--ink); margin: 0; }
.plat-list dd { margin: 0; color: var(--muted); }
/* expanded should not read as another page section */
.plat-all[open] { padding-bottom: 4px; }
@media (max-width: 760px) {
  .plat-row { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
}

/* the summary swaps its own label, so no script is needed and
   <summary> keeps its native expanded semantics */
.plat-all .pa-hide { display: none; }
.plat-all[open] .pa-show { display: none; }
.plat-all[open] .pa-hide { display: inline; }
.plat-all[open] .pa-sign { transform: none; }

/* --- 3. Tools: collapsed by default, and it stays that way. No logo
   wall — it would read more junior and more software-focused than she
   is (Amber, July 2026). "Smallest section" means least content, not
   less padding: the site rhythm is uniform. --- */
.tools-section .section-lede { margin-bottom: 22px; }
/* A short bridge between expertise and proof, not a standalone feature
   block: the 104px section seam either side was making it read as one
   (Amber, 2026-08). */
.tools-section { padding-bottom: 64px; }
.tools-section + .showcase { padding-top: 64px; }
.plat-all summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  font-family: var(--font-body); font-weight: 600;
  color: var(--coral-deep);
  padding: 6px 0;
}
.plat-all summary::-webkit-details-marker { display: none; }
.plat-all .pa-sign { display: inline-block; width: 0.72em; text-align: center; font-weight: 600; }
.plat-all[open] .pa-sign { transform: rotate(90deg); }
.plat-all summary:hover { color: #96263C; }
.plat-grid {
  display: grid;
  /* three across so six groups resolve to two even rows */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 32px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.plat h3 { font-family: var(--font-body); font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.plat p { color: var(--muted); opacity: 0.86; margin-bottom: 0; }

/* --- 4. Evidence rows (2026-08, Amber's brief). The four-column
   version put the intro in its own column and squeezed three projects
   into narrow strips. The intro is full width above now, and each
   project is one open editorial row: identity, story, proof. The metric
   is deliberately the loudest thing in the row — the section answers
   "why should I believe any of this", so the number outranks the
   description rather than matching it. No marks, no colour coding, no
   metric badges, and no vertical rules. --- */
.ev-intro { max-width: 62ch; margin-bottom: clamp(26px, 2.8vw, 38px); }
.ev-intro .section-title { margin-bottom: 14px; }
.ev-intro p { color: var(--muted); margin-bottom: 18px; }
.ev-intro .section-foot-link { margin-top: 0; }

.ev-list { list-style: none; margin: 0; padding: 0; }
.ev {
  display: grid;
  grid-template-columns: minmax(0, 21fr) minmax(0, 50fr) minmax(0, 29fr);
  gap: clamp(22px, 3vw, 52px);
  align-items: start;
  border-top: 1px solid rgba(84, 76, 112, 0.22);
  padding: 26px 0 28px;
}
.ev:last-child { border-bottom: 1px solid rgba(84, 76, 112, 0.22); }
.ev-label {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin: 4px 0 0;
}
.ev-head {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.ev-story p { color: var(--muted); margin-bottom: 0; }
.ev-metric {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
}
.ev-metric-label { color: var(--muted); margin: 0 0 14px; }
.ev-link { margin: 0; }
/* the row list already closes on a full-width rule, so the industries
   line drops its own shorter one rather than stacking two. It also
   drops the 62ch cap: under a 1152px rule a half-width line wrapping to
   two looked like an unfinished column (Amber, 2026-08: "this should be
   full length"). It sits on one line at full width. */
.showcase .industries {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
  max-width: none;
}

@media (max-width: 1020px) {
  .ev { grid-template-columns: minmax(0, 26fr) minmax(0, 74fr); gap: 18px 30px; }
  .ev-proof { grid-column: 2; }
}
@media (max-width: 760px) {
  .ev { grid-template-columns: 1fr; gap: 12px; padding: 24px 0 26px; }
  .ev-proof { grid-column: 1; }
  .ev-label { margin-top: 0; }
}

/* --- 4. The bridge to Projects: three full-width rows, never cards
   and never thumbnails. Projects carries the case studies; this page
   only points. Quieter than the expertise content above it: the
   titles stay INK and coral is spent only on the arrows and the
   closing link. --- */
/* the same measure as the "especially useful" list above, so the two
   sections read as one thought and the arrow never sits marooned at
   the far side of a 1120px row */
.work-strip { list-style: none; margin: 34px 0 0; padding: 0; max-width: 60ch; }
.work-strip li { border-top: 1px solid var(--line); }
.work-strip li:last-child { border-bottom: 1px solid var(--line); }
/* the whole row is the target, not the arrow */
.work-strip a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  /* the tint is inset on the left so the hover reads as a row, not a
     block butted against the measure */
  margin-left: -16px;
  padding: 20px 16px;
  border-radius: 10px;
  font-family: var(--font-display);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.2s var(--ease);
}
.work-strip a:hover { background: rgba(46, 42, 39, 0.035); }
.work-strip a:active { background: rgba(46, 42, 39, 0.06); }
/* a flex item, so it can never be stranded on a line of its own when
   the title wraps on a phone */
.ws-arrow {
  color: var(--coral-deep);
  flex: none;
  transition: transform 0.2s var(--ease);
}
.work-strip a:hover .ws-arrow { transform: translateX(3px); }

/* the industries line: small context, not a section of its own
   (Amber, July 2026) */
/* ---- The bridge to Projects: three proof rows ----
   It was a hover showcase with a preview stage: a portfolio
   interaction dropped into the middle of an expertise page, and a
   second Work page in miniature. Now it is evidence — full width,
   no images, no interaction. Label, one sentence that runs challenge
   to change to result, a quiet published figure at the right where
   one exists, and one coral link.
   THE THIRD ROW HAS NO FIGURE ON PURPOSE. There is no published
   number for the products and tools, and the row reads fine without
   one; inventing a proof point to balance a grid is not a reason. */
.proofs { list-style: none; margin: 38px 0 0; padding: 0; }
.proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: 30px 0 32px;
  border-top: 1px solid rgba(84, 76, 112, 0.22);
}
.proof:last-child { border-bottom: 1px solid rgba(84, 76, 112, 0.22); }
.pr-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 9px;
}
.pr-head {
  font-family: var(--font-display);
  font-weight: 600; /* h3 grade, same as .ch-word */
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  max-width: 22em;
}
.pr-copy p { color: var(--muted); max-width: 58ch; margin-bottom: 0; }
.pr-link { margin-top: 16px; }
/* The figure sits quiet and right-aligned: a label over the number,
   never a stat tile. No border, no fill, no chip. */
.pr-proof {
  justify-self: end;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted);
  margin: 4px 0 0;
}
.pr-proof span {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--ink);
}

@media (max-width: 760px) {
  .proof { grid-template-columns: 1fr; gap: 18px; padding: 24px 0 26px; }
  .pr-proof {
    justify-self: start;
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    margin-top: 0;
  }
}

.industries {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 0;
}

/* --- two actions in the closing band --- */
.cta-actions {
  display: flex; gap: 14px;
  justify-content: center; align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 1020px) {
  .plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
  .ch { grid-template-columns: 60px minmax(0, 1fr); gap: 18px 26px; padding: 30px 0 32px; }
  .ch-give { grid-column: 2; }
  .ch-detail { grid-column: 2; }
  .ch-mark { width: 60px; height: 60px; }
  .ch-mark .glyph { width: 30px; height: 30px; }
}
@media (max-width: 760px) {
  /* One idea per screen: everything stacks left-aligned, nothing
     staggers, and no section carries two columns of text. */
  /* the stagger goes: at 390px an indent reads as a broken margin */
  /* Phones stack in reading order: number and name, problem,
     capabilities, contribution, link. */
  .chapters { margin-top: 24px; }
  /* The mark goes ABOVE the copy on phones. Held beside it, a 52px
     column plus its gap took 70px out of 342 and every line in the row
     wrapped harder for it. */
  .ch { grid-template-columns: 1fr; gap: 12px; padding: 26px 0 28px; }
  .ch-give { grid-column: 1; }
  .ch-detail { grid-column: 1; }
  .ch-mark { width: 48px; height: 48px; margin-bottom: 2px; }
  .ch-mark .glyph { width: 25px; height: 25px; }

  .industries { margin-top: 24px; padding-top: 16px; }
  .plat-grid { grid-template-columns: 1fr; gap: 16px; }
  .work-strip { margin-top: 26px; }
  .work-strip a { padding: 16px 12px; margin-left: -12px; gap: 16px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
}


/* ---- Asset lightbox ----
   Client work is shown in its own window rather than on the page. The
   backdrop is the site's warm ink so the room reads as ours while the
   asset inside stays entirely the client's. New interaction, added to
   the motion budget deliberately: a 0.2s fade at the UI-response
   tier, nothing else, and none of it under reduced motion. */
.lightbox {
  border: 0;
  padding: 0;
  /* the UA centres a modal dialog with auto margins; setting width
     here loses that, so it has to be restated */
  margin: auto;
  max-width: min(1180px, 94vw);
  max-height: 92vh;
  /* fit-content so the frame wraps the asset: with a portrait piece a
     fixed width parked the arrows at the far edges of the screen */
  width: fit-content;
  background: transparent;
  overflow: visible;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--bg);
}
.lightbox::backdrop {
  background: rgba(26, 23, 20, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.lb-stage { margin: 0; grid-column: 2; min-width: 0; }
.lb-stage img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
  background: var(--bg-raised);
}
.lb-stage figcaption {
  margin-top: 14px;
  text-align: center;
  color: #D9D2C9; /* 9.2:1 on the backdrop */
  max-width: 66ch;
  margin-left: auto;
  margin-right: auto;
}
.lb-close, .lb-nav {
  /* a <dialog> resets the UA font, and these buttons are built in JS
     with no family of their own — without this they render in Arial */
  font-family: var(--font-body);
  border: 1px solid rgba(253, 249, 245, 0.34);
  background: rgba(253, 249, 245, 0.08);
  color: var(--bg);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: rgba(253, 249, 245, 0.18); border-color: rgba(253, 249, 245, 0.7); }
/* fixed, not absolute: a tall asset pushes the dialog to the top of
   the viewport and an absolutely placed close button goes off-screen */
.lb-close { position: fixed; top: 20px; right: 20px; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-nav[hidden] { display: none; }
.lb-count {
  grid-column: 2;
  text-align: center;
  color: #D9D2C9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 4px;
}
@media (max-width: 760px) {
  .lightbox { grid-template-columns: minmax(0, 1fr); max-width: 94vw; gap: 12px; }
  .lb-stage { grid-column: 1; }
  .lb-stage img { max-height: 66vh; }
  .lb-count { grid-column: 1; }
  /* on a phone the arrows sit under the image rather than beside it */
  .lb-prev, .lb-next { grid-column: 1; justify-self: center; position: absolute; bottom: -56px; }
  .lb-prev { transform: translateX(-32px); }
  .lb-next { transform: translateX(32px); }
  .lb-close { top: 14px; right: 14px; }
}
/* the trigger is a real link: it reads as one, and it opens the asset
   with JS off */
.art-open { display: block; border-radius: 4px; }
.art-open:hover img { border-color: rgba(46, 42, 39, 0.3); }
/* The case offers its work as a named link rather than a strip of
   previews (Amber, July 2026). The label says what the thing IS —
   "See the campaign creative", "See the website", "See the signage" —
   not how many pieces there are. */
.art-link { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid rgba(46, 42, 39, 0.1); }
.art-link a {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--coral-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--coral-deep), var(--coral-deep));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size 0.2s var(--ease);
}
.art-link a::after { content: " \2197"; }
/* 22px of text is under the 24px minimum target: the padding buys the
   hit area without moving the baseline (2026-07 audit) */
.art-link a, .more-list a { display: inline-block; padding: 4px 0; }

/* Clients whose website exists but whose case study does not. A
   short labelled list at the end of the chapter, never cards: each
   entry carries the same industry tag the cases above use, so both
   read as equally real, and the lightbox does the showing. The first
   pass ran them inline in one sentence and the stray "and" and full
   stop broke onto their own lines (Amber, July 2026). */
.more-sites { margin-top: 44px; }
.more-title { font-size: var(--fs-intro); line-height: 1.3; margin-bottom: 16px; }
.more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
}
.more-list li { padding: 16px 0; border-top: 1px solid var(--line); }
.more-list a {
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--coral-deep), var(--coral-deep));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size 0.2s var(--ease);
}
.more-list a::after { content: " \2197"; }
.more-list a:hover { background-size: 100% 2px; }
@media (max-width: 760px) {
  .more-sites { margin-top: 34px; }
  .more-list { grid-template-columns: 1fr; }
}
.art-link a:hover { background-size: 100% 2px; }

/* ---- Case study artifacts (Projects) ----
   Real client work sitting under the case it belongs to: a short row
   of small pieces, never a gallery. Every image is sized by HEIGHT so
   a row of portrait flyers and a row of landscape screenshots both
   line up without per-case rules. */
@media (max-width: 760px) {
}

/* ============ Courses page ============
   A COURSE LIBRARY, not a sales page (Amber, July 2026: "the current
   page contains too much explanation about Build Your Marketing
   Foundation"). Everything that explains the course — the framework,
   the seven foundations, the outcomes, the audience columns, the
   instructor bio, the workbook spreads — moved to the individual
   course page. Five sections and nothing more.
   NOT A SEPARATE COURSE BRAND. Same cream, same serif heads, same
   coral CTA, same hairlines, same container, same rhythm. No
   ecommerce styling, no giant rounded tiles, no gradients, no
   handwritten annotations scattered across the page. --- */

/* deliberately secondary: no button, no fill, just a link */
.co-login { margin: 26px 0 0; color: var(--muted); }
.co-login a {
  display: inline-block;
  padding: 5px 0;
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--coral-deep), var(--coral-deep));
  background-repeat: no-repeat; background-size: 0 2px; background-position: 0 100%;
  transition: background-size 0.2s var(--ease);
}
.co-login a:hover { background-size: 100% 2px; }

/* --- 2. Available courses ---
   A REPEATABLE GRID. auto-fill at 300px means one card sits in one
   column and the next two drop in with no redesign — a single card
   stretched across 1120px would have to be undone the moment a second
   course ships. --- */
.crs-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}
.crs-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* NO PADDING: the cover bleeds to the card's own rounded corners.
     A padded cover inside a padded card read as a card inside a card
     (Amber, July 2026). */
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- The course cover ----
   THE ONE DARK SURFACE on a very light site, which is the whole point
   of it: contrast without noise. Warm plum, not black and not a jewel
   tone — it is the site's charcoal pulled toward the lavender already
   in the palette, so it reads as the same family.
   REUSABLE: the next course swaps the title and keeps everything else.
   The three segments TOUCH on purpose. Three separated blocks would
   say "three things"; one track split three ways says "one system",
   which is the argument the course makes. */
.crs-thumb {
  aspect-ratio: 4 / 3;
  padding: clamp(20px, 4.5%, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(158deg, #3A2E3E 0%, #2C2331 52%, #241D28 100%);
}
.ct-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: #F7F1EB;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
  max-width: 12em;
}
.ct-system { margin-top: auto; }
.ct-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ct-found       { background: #E8846B; }
.ct-chosen      { background: #A99BE0; }
.ct-remembered  { background: #E4B569; }
.ct-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ct-stages li {
  color: #CFC5CE;          /* 8.4:1 on the darkest stop */
  line-height: 1.3;
}

/* ---- the card content ---- */
.crs-body { padding: clamp(20px, 4.5%, 26px); display: flex; flex-direction: column; flex: 1; }
.crs-body h3 { font-family: var(--font-display); margin-bottom: 10px; letter-spacing: -0.015em; }
.crs-body h3 a {
  display: inline-block;
  padding: 2px 0;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.crs-body h3 a:hover { color: var(--coral-deep); }
.crs-body > p { color: var(--muted); margin-bottom: 20px; }
/* a definition list, not a bullet run: label and value line up in two
   columns so the four facts scan as a spec rather than a loose list */
.crs-meta {
  margin: 0 0 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.crs-meta > div {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.crs-meta dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.crs-meta dd { margin: 0; color: var(--body); }
.crs-cta { margin: auto 0 0; }
.crs-cta .btn { display: block; text-align: center; }

/* --- 3. Coming soon: topic markers, never placeholder cards --- */
.co-next {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.co-next .section-title { margin-bottom: 14px; }
.co-next > div > p { color: var(--muted); max-width: 46ch; }
.crs-topics {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.crs-topics li {
  padding: 7px 15px;
  border: 1px solid rgba(133, 121, 201, 0.4);   /* lavender hairline */
  border-radius: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* --- 4. Teaching philosophy: one line, on a hairline, no cards --- */
.crs-teach {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.crs-teach .section-title { margin-bottom: 0; }
.crs-teach-body p { color: var(--muted); max-width: 50ch; }
.crs-teach-body p:last-child { margin-bottom: 0; }

/* --- 5. Student login: a utility close, quieter than the course --- */
.crs-login-wrap { padding-bottom: clamp(72px, 8vw, 120px); }
.crs-login {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 32px;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 40px);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.crs-login h2 { font-family: var(--font-display); margin-bottom: 4px; letter-spacing: -0.015em; }
.crs-login p { color: var(--muted); margin-bottom: 0; }

@media (max-width: 1020px) {
  .co-next, .crs-teach { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  /* The course sits high and nothing full-screen gets in the way of
     it. Tighter rhythm than the desktop grid, per the brief. */
  .co-login { margin-top: 20px; }
  .crs-grid { margin-top: 26px; gap: 18px; grid-template-columns: 1fr; }
  .crs-card { padding: 0; }
  .crs-body > p { margin-bottom: 16px; }
  .crs-meta { margin-bottom: 20px; padding-top: 14px; }
  .crs-meta > div { grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; }
  .co-next > div > p { max-width: none; }
  .crs-topics { gap: 8px; }
  .crs-teach-body p { max-width: none; }
  .crs-login { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  .crs-login .btn { width: 100%; text-align: center; }
}

/* ============ About page ============ */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-portrait {
  aspect-ratio: 4 / 5;
  border-radius: 58% 42% 46% 54% / 45% 52% 48% 55%;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 25% 20%, var(--blush), transparent 60%),
    radial-gradient(circle at 80% 75%, var(--peach), transparent 55%),
    var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.about-grid > div:first-child { position: relative; }
/* Offset hand-drawn outline echoing the blob */
.about-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.about-blob-outline {
  position: absolute;
  inset: -14px -10px 10px 14px;
  border: 2px solid var(--coral);
  border-radius: 54% 46% 50% 50% / 48% 50% 46% 56%;
  transform: rotate(-3deg);
  pointer-events: none;
  opacity: 0.55;
}
/* Once the grid is one column the portrait sits flush with the wrap,
   so the outline's right-hand overhang has to come inside or it scrolls
   the page (measured: +9px at 760). */
@media (max-width: 860px) {
  .about-blob-outline { inset: -12px 2px 10px 16px; }
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

.about-copy p {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  margin-bottom: 20px;
}

/* ============ Experience: career story ============
   Two columns: sticky thesis left, three featured chapters and a
   compact appendix right. No continuous timeline line — each
   chapter opens with a short coral tick. */
.xp-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.xp-intro { position: sticky; top: 110px; }
.xp-intro .section-title { margin-bottom: 20px; }
.nowrap { white-space: nowrap; }
.xp-lede { color: var(--muted); }
.xp-chapter { padding: 40px 0 44px; }
.xp-chapter + .xp-chapter { border-top: 1px solid rgba(46, 42, 39, 0.1); }
.xp-chapter:first-child { padding-top: 6px; }
.xp-tick {
  display: block;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--coral-deep);
  margin-bottom: 18px;
}
.xp-company { margin-bottom: 6px; }
.xp-role { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.xp-years { color: var(--muted); margin-bottom: 14px; }
.xp-desc { color: var(--body); max-width: 60ch; }
.xp-proof {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.xp-proof li { color: var(--body); display: flex; align-items: baseline; gap: 8px; }
.xp-proof li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--coral-deep);
  transform: translateY(-1px);
  flex-shrink: 0;
}
.xp-proof strong { color: var(--coral-deep); font-weight: 700; }
.xp-chapter .arrow-link { margin-top: 16px; display: inline-block; }
.xp-areas { margin-top: 14px; color: var(--muted); }
.xp-earlier { margin-top: 10px; border-top: 1px solid rgba(46, 42, 39, 0.1); padding-top: 26px; }
.xp-earlier .xp-divider { display: block; margin-bottom: 6px; }
.xp-earlier details { border-top: 1px solid rgba(46, 42, 39, 0.07); }
.xp-earlier details:first-of-type { border-top: 0; }
.xp-earlier summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto 20px;
  gap: 20px;
  padding: 14px 0;
  align-items: baseline;
}
.xp-earlier summary::-webkit-details-marker { display: none; }
.xp-earlier summary:hover .xp-ttl { color: var(--coral-deep); }
.xp-chev {
  justify-self: end;
  width: 9px; height: 9px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}
.xp-earlier details[open] .xp-chev { transform: rotate(225deg) translateY(-1px); }
.xp-yr, .xp-co { color: var(--muted); }
.xp-ttl { font-weight: 600; color: var(--ink); }
.xp-note { margin: -6px 0 14px 140px; color: var(--muted); max-width: 56ch; }
/* Desktop: the appendix sits open (main.js sets it) — the chevron
   and toggle are a phone affordance, where collapsing keeps the
   scroll short */
@media (min-width: 761px) {
  .xp-earlier summary { pointer-events: none; }
  .xp-chev { display: none; }
}
@media (max-width: 1020px) {
  .xp-grid { grid-template-columns: 1fr; gap: 40px; }
  .xp-intro { position: static; }
}
@media (max-width: 760px) {
  .xp-chapter { padding: 30px 0 34px; }
  .xp-earlier summary { grid-template-columns: 92px minmax(0, 1fr) 20px; }
  .xp-co { grid-column: 2; margin-top: 2px; }
  .xp-chev { grid-column: 3; grid-row: 1; }
  .xp-note { margin: -4px 0 14px 112px; }
}

.edu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 860px) { .edu-grid { grid-template-columns: 1fr; } }
.edu-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.edu-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.edu-card p { font-size: 0.9rem; color: var(--muted); }

/* ============ Contact ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-intro > p { color: var(--body); margin-bottom: 32px; max-width: 420px; }

.email-capture .capture-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 12px;
}
.capture-row { display: flex; gap: 10px; flex-wrap: wrap; }
.capture-row input { flex: 1; min-width: 200px; }

/* Reduce 300ms tap delay on touch devices */
a, button, input, textarea, .btn { touch-action: manipulation; }

input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg-raised);
  border: 1.5px solid rgba(46, 42, 39, 0.2);
  border-radius: 14px;
  padding: 14px 18px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--coral-deep);
  box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.3);
}
textarea { resize: vertical; min-height: 140px; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
/* Honeypot: visually gone, present for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form { display: grid; gap: 16px; }
.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}
.form-note { font-size: 0.85rem; color: var(--muted); }
.req { color: var(--coral-deep); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--coral-deep); }
.field-error {
  display: none;
  color: var(--coral-deep);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 6px;
}
.field-error.show { display: block; animation: feedback-in 0.18s var(--ease); }
.form-status.show { animation: feedback-in 0.18s var(--ease); }
@keyframes feedback-in {
  from { opacity: 0; transform: translateY(-2px); }
}
.form-status {
  font-weight: 600;
  color: var(--coral-deep);
  min-height: 1.4em;
  font-size: 0.95rem;
}

/* ============ Pre-footer CTA band ============ */
.cta-band-wrap { padding: 104px 0; }
/* Warm-dark closing band: the ink text color becomes the room, the
   aura bleeds faintly into the corners, and coral flips from wall to
   action — the button is the brightest object on the page. */
.cta-band {
  background:
    radial-gradient(circle at 10% 0%, rgba(251, 213, 228, 0.16), transparent 46%),
    radial-gradient(circle at 92% 100%, rgba(218, 212, 245, 0.15), transparent 46%),
    radial-gradient(circle at 70% -10%, rgba(252, 228, 196, 0.10), transparent 40%),
    var(--ink);
  border-radius: 28px;
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  color: var(--bg); /* 12.9:1 on the ink band */
  margin-bottom: 12px;
}
.cta-band h2 .tab-em { color: var(--ink); } /* ink on the butter tab, 12:1 */
.cta-band p {
  color: #D9D2C9; /* 9.2:1 on the ink band */
  max-width: 480px;
  margin: 0 auto 30px;
}
.cta-band .btn {
  background: var(--coral);
  color: #17140F; /* 6.7:1 on coral */
  box-shadow: none;
}
.cta-band .btn:hover { background: #FF8477; transform: translateY(-2px); }
/* secondary action: outline on the dark band. Declared after the
   coral fill above, which it would otherwise lose to on specificity. */
.cta-band .btn-ghost {
  background: transparent;
  color: var(--bg);
  border: 1px solid rgba(253, 249, 245, 0.42);
  box-shadow: none;
}
.cta-band .btn-ghost:hover {
  background: rgba(253, 249, 245, 0.1);
  border-color: rgba(253, 249, 245, 0.72);
  transform: translateY(-2px);
}

/* ============ Footer ============ */
/* Footer: a brand block, three labelled columns, and a bottom bar
   (Amber, July 2026: "the footer needs more structure"). It replaced
   one flat row of seven links, which gave every destination the same
   weight and no grouping. The columns mirror the nav's own shape, so
   Shop reads as Shop in both places. */
footer {
  border-top: 1px solid var(--line);
  padding: clamp(48px, 5vw, 72px) 0 26px;
  background: var(--bg);
  color: var(--muted);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(36px, 5vw, 92px);
  align-items: start;
}
.footer-brand p { max-width: 32ch; margin: 16px 0 0; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(20px, 3vw, 52px);
}
.footer-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 10px; }
.footer-col a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.footer-col a:hover { color: var(--coral-deep); text-decoration: underline; }

.footer-bar {
  margin-top: clamp(40px, 4.5vw, 66px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.footer-bar p { margin: 0; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-brand p { max-width: 46ch; }
}
@media (max-width: 560px) {
  /* Two columns, so "Start a conversation" is never squeezed into a
     third of a phone. The last group takes the second row. */
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
}
/* The nav hides the wordmark under 350px; the footer has the room. */
@media (max-width: 350px) { .footer-brand .brand-name { display: inline; } }

/* Touch: taps fire sticky :hover — keep lifts for real pointers only */
@media (hover: none), (pointer: coarse) {
  .btn-primary:hover, .btn-outline:hover, .card:hover, .case:hover,
  .cap-card:hover, .quote-card:hover,
  .proof-chip:hover, .cta-band .btn:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Capabilities tool stack: 8 cards sit 4+4 on wide screens */
@media (min-width: 1100px) {
  section[aria-labelledby="stack-title"] .cap-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aura { animation: none; transition: none; }
  .aura-blob { animation: none; transition: none; }
  .case::before { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .glyph .stroke { stroke-dashoffset: 0; animation: none !important; }
  .cb-step, .cb-arrow { opacity: 1; transform: none; animation: none !important; }
  .glyph .fill { opacity: 1; animation: none !important; }
  .squiggle { transform: none; animation: none !important; }
  .reveal .tab-em::before { opacity: 1; transform: rotate(var(--trb)); transition: none; }
  .reveal .tab-em::after  { opacity: 1; transform: rotate(var(--trf)); transition: none; }
  .quote-track { animation: none; width: auto; flex-wrap: wrap; }
  .quote-set { flex-wrap: wrap; }
  .quote-set[aria-hidden="true"] { display: none; }
  .quote-marquee { -webkit-mask-image: none; mask-image: none; }
  .page-home .hero h1,
  .page-home .hero .subhead,
  .page-home .hero .cta-row,
  .page-home .hero .hero-proof { opacity: 1; transform: none; animation: none; }
  .reveal[data-delay="1"], .reveal[data-delay="2"] { transition-delay: 0s; }
  .btn:hover, .card:hover, .case:hover, .cap-card:hover,
  .quote-card:hover, .proof-chip:hover,
  .cta-band .btn:hover, .btn:active { transform: none; }
  .work-strip a:hover .ws-arrow { transform: none; }
  .hw-principles li:hover .pr-mark { transform: none; }
  .xp-chev { transition: none; }
  .lb-close, .lb-nav { transition: none; }
  .nav-links { transition: none; transform: none; }
  .field-error.show, .form-status.show { animation: none; }
  /* Color, underline, and opacity feedback stays: reduced motion
     means fewer and gentler animations, not zero. All movement is
     neutralized explicitly above. */
}


/* ---- How I Work hero: the site's one photograph ----
   Amber's collage, CUT OUT of its paper ground so the aura drifts
   behind it instead of the collage sitting on a pasted rectangle.
   That removed the seam problem entirely: there is no band colour to
   match, because there is no band. The ground was flat enough
   (std < 2) to separate by flood-filling from the frame edges; drop
   shadows survive as translucent darkening, and the frame edges fade
   so the desk dissolves rather than stopping.
   The asset is cropped past the transparent third on the left, so the
   image is 73.09% of the band's width and sits right. Band height is
   still 0.5628 x width, which is what the copy offset below depends
   on: 6.64% of WIDTH equals 11.8% of HEIGHT at this ratio. Written
   that way on purpose — percentage padding resolves against width, so
   the headline holds the site's 158px line at full size and scales
   with the collage below it rather than drifting into her notebook. */
/* ---- My Approach head: the site's one photograph ----
   It used to run 939px tall and behave like a full-screen homepage
   hero (Amber, July 2026: "substantially shorter, more focused, and
   better balanced"). Nothing about the composition changed; its SCALE
   and CROP did.

   THE COLLAGE IS ONE FLAT IMAGE, so "show fewer objects" can only be
   done with the crop. The box is wide (15/8) and `object-fit: cover`
   pulls the frame up, which drops the laptop, the mug and the lower
   sticky notes off the bottom while keeping every element Amber named:
   Campaign Roadmap, "Start with what moves the business", the homepage
   wireframe, the Content Ideas notebook, the colour swatch, the
   butterfly and the drawn arrow. Nothing is cropped horizontally, so
   no element is half-lost at a side. */
.hero-band { padding: var(--nav-h) 0 26px; margin: 0; }
/* The band stays full-bleed and pads itself to the wrap's left edge,
   so the copy lines up with every other page while the photograph
   still runs off the right of the viewport — that bleed is what keeps
   it from reading as a boxed poster. */
.hero-band .band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding-left: max(24px, calc((100% - 1120px) / 2 + 24px));
}
.hero-band .band-copy .wrap { max-width: none; padding: 0; }
.hero-band picture {
  display: block;
  aspect-ratio: 15 / 8;
  /* Two constraints from the brief that fight on a short laptop: 560
     to 640px tall AND no more than 65vh. The px range wins, because a
     hero that shrinks with the window stops being a composition. At
     900vh this lands on 600px and 0.67vh. */
  max-height: clamp(350px, 40vh, 400px);
  overflow: hidden;
  /* Soft at the bottom and the right so the photograph reads as part
     of the page rather than a poster dropped onto it, and so the
     bottom edge leads down into the section below. */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%),
                      linear-gradient(to right, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 74%, transparent 100%),
              linear-gradient(to right, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.hero-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 12% keeps the face high in the frame and spends the crop on the
     desk rather than the headroom. */
  object-position: 50% 12%;
}
/* The stanza carries the bottom half of the band seam itself: 26 + 30
   + 44 + the quote band's 52 lands on the 157px figure the rest of the
   site uses. */
.hero-band-after { padding-top: 30px; padding-bottom: 44px; }
.hero-band-after .hw-stanza { margin-top: 0; }

@media (min-width: 1021px) {
  .hero-band .band-copy { z-index: 3; }
  .hero-band .head-copy { max-width: 430px; }
  .hero-band .section-lede { margin-bottom: 0; }
}
@media (max-width: 1020px) {
  /* Tablet KEEPS TWO COLUMNS down to the mobile breakpoint. Stacking
     here pushed the head past 900px: the photograph gets the full
     column width and its height goes with it. */
  .hero-band { padding: calc(var(--nav-h) + 26px) 0 20px; }
  .hero-band .band { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 24px; }
  .hero-band .head-copy { max-width: none; }
  .hero-band .section-lede { margin-bottom: 0; }
  .hero-band picture { max-height: 300px; }
}
@media (max-width: 760px) {
  /* Phone: a tighter crop that keeps the face and the two strongest
     artifacts rather than trying to show the whole board. */
  .hero-band { padding: calc(var(--nav-h) + 22px) 0 12px; }
  .hero-band .band { grid-template-columns: 1fr; gap: 20px; padding-left: 24px; }
  .hero-band picture { aspect-ratio: 4 / 3; max-height: none; }
  .hero-band img { object-position: 56% 8%; }
  /* Phones already sit on the 89px band seam without the extra pad. */
  .hero-band-after { padding-top: 22px; padding-bottom: 0; }
}

/* ---- Every project starts with the same question ----
   Moved here from Expertise (Amber, July 2026).
   Copy left, working materials right. THE MATERIALS ARE DRAWN, not
   photographed: three paper sheets in the site's own line-art
   language plus one loose note. Nothing here claims to be a real
   client deliverable, which is the only honest way to show a working
   session nobody photographed — the site's one real photograph is
   the How I Work hero and it stays spent there.
   RULES THIS SECTION KEEPS (Amber, July 2026): four elements, not a
   scrapboard · minimal overlap · no tape, pins or sticky notes · no
   dashboards or glow · shadows almost invisible · no rounded
   container around the section itself · slightly imperfect, not
   decorative. --- */
.diagnose {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
/* July 2026: this is now the SECOND ROW of "I solve business
   problems", not a section of its own, so it carries the gap that
   used to come from the section boundary. The copy beside it is down
   to a question and one line — the documents answer it, so they take
   the width the paragraph used to need. */
.diagnose-inline {
  margin-top: clamp(56px, 6.5vw, 104px);
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
}
.diag-copy p { color: var(--muted); max-width: 46ch; margin-bottom: 16px; }
.diag-copy p:last-child { margin-bottom: 0; }
/* the question, set apart: coral italic serif is the one contrasting
   treatment on the page, and coral-deep keeps it above the 4.5 floor */
.diag-q {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--coral-deep) !important;
  letter-spacing: -0.015em;
  margin: 18px 0 0;
  max-width: 18em !important;
}
.diag-rule {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--coral);
  margin: 26px 0 24px;
}

/* --- the materials: FOUR WORKING DOCUMENTS, not diagrams (Amber,
   July 2026: "scrap both the triangle and the clean checklist …
   create 3-4 authentic strategy artifacts that look like they came
   straight from your desk"). A page marked up in pen, a
   prioritization page, a campaign flow, and a messaging worksheet
   with the first answer crossed out.
   WHAT MAKES THEM READ AS REAL, and what to preserve if these are
   ever redrawn: rules BOW (quadratic curves, never straight lines) ·
   box corners DO NOT CLOSE, they overshoot or stop short · the pen
   is coral-deep #B8354A and only ever annotates, it never draws the
   document itself · handwriting is Newsreader ITALIC, printed labels
   are Manrope uppercase at 9.5px · every sheet carries at least one
   correction, strike or arrow, because a document with no second
   thought in it is a graphic, not an artifact.
   A CLEAN VERSION OF ANY OF THESE IS THE FAILURE MODE. The triangle
   diagram and the tidy checklist that came before were both correct
   and both dead. --- */
.diag-art {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 26px 16px;
  align-items: start;
}
.mat {
  margin: 0;
  border: 1px solid rgba(46, 42, 39, 0.09);
  border-radius: 3px;
  box-shadow: 0 16px 34px -28px rgba(46, 42, 39, 0.34);
  padding: 14px 12px;
  /* the `rotate` property, NOT transform: .reveal owns transform and
     a rotation written there is wiped the moment the item enters */
}
.mat svg { display: block; width: 100%; height: auto; }
.mat-wire { grid-column: 1; grid-row: 1; background: #FFFDFA; rotate: -1.1deg; }
.mat-prio {
  grid-column: 2; grid-row: 1;
  background: #FCF4F1;            /* palest blush */
  /* the ONE overlap, and it is a corner: the prioritization page
     clips the sketch's paper edge, never its drawing */
  margin: 74px 0 0 -16px;
  rotate: 1.3deg;
  position: relative;
  z-index: 2;
}
.mat-flow {
  grid-column: 1; grid-row: 2;
  background: #F5F2FB;            /* palest lavender */
  margin: 4px 0 0 14px;
  rotate: 0.8deg;
}
.mat-msg {
  grid-column: 2; grid-row: 2;
  background: #FBF6EE;            /* cream, one step warmer than the page */
  margin: 60px 0 0 0;
  rotate: -0.6deg;
}


@media (max-width: 1020px) {
  .diagnose { gap: 44px; }
  .diag-art { gap: 20px 12px; }
  .mat-prio { margin: 58px 0 0 -10px; }
  .mat-flow { margin-left: 8px; }
  .mat-msg { margin-top: 44px; }
}
@media (max-width: 760px) {
  .diagnose { grid-template-columns: 1fr; gap: 40px; }
  .diag-copy p { max-width: none; }
  .diag-rule { margin: 22px 0 20px; }
  /* one column and a real gap, so nothing has to be nudged by margin.
     THREE of the four: the campaign flow goes, because at 390px its
     boxes and arrows are the least readable and the other three each
     say something the flow does not. */
  .diag-art { grid-template-columns: 1fr; gap: 30px; }
  .mat-flow { display: none; }
  .mat-wire, .mat-prio, .mat-msg { grid-column: 1; grid-row: auto; margin: 0 !important; }
  .mat { padding: 15px 13px; }
  .mat-wire { rotate: -0.9deg; }
  .mat-prio { rotate: 1deg; }
  .mat-msg { rotate: -0.6deg; }
}

/* ============ How I Work page ============
   An editorial feature, not another card page: alternating two-column
   splits, one artifact panel per section at most, hairline rules
   instead of boxes, and two pull quotes on opposite sides. Reuses the
   Services head-grid, the Expertise coral-rule markers, and the
   existing reveal + stroke draw-on. No new motion. */

/* The head's second paragraph: four short lines under the lede,
   quieter than it so the page top stays restrained. */
.hw-stanza { margin: 14px 0 0; max-width: 480px; color: var(--muted); }

/* Body prose blocks. Measure caps at ~64 characters so the sections
   read as columns of an article, never as full-width slabs. */
.hw-body p { max-width: 64ch; margin-bottom: 18px; }
.hw-body > :last-child { margin-bottom: 0; }

/* Pull quotes: short coral rule, then the line in the display face at
   400 so it reads as something spoken. Two per page, opposite sides. */
.hw-quote {
  position: relative;
  max-width: 17em;
  margin: 66px 0 0;
  padding-top: 26px;
}
.hw-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--coral);
}
.hw-quote p {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
/* Second quote flips the rule under the line so the two moments are
   not the same component twice. */
.hw-quote-under { margin-top: 44px; padding-top: 0; padding-bottom: 24px; }
.hw-quote-under::before { top: auto; bottom: 0; }

/* The line a section lands on. NOT a third pull quote: the display
   face at the card-title grade over a shorter coral rule, so the
   argument closes on a beat without outranking the two quotes.
   Needs .hw-body specificity — the type layer sets .hw-body p. */
.hw-body .hw-kicker {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin: 34px 0 0;
  padding-top: 22px;
}
.hw-kicker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--coral);
}

/* The simplifying questions, on paper. Same drawn-sheet treatment as
   the four working documents, and the messaging worksheet's exact
   language: a printed label, italic answers, a hairline under each.
   No bullet — the ring belongs to lists, and this is a worksheet. */
.hw-check {
  background: #FFFDFA;
  border: 1px solid rgba(46, 42, 39, 0.09);
  border-radius: 3px;
  box-shadow: 0 16px 34px -28px rgba(46, 42, 39, 0.34);
  padding: 24px 24px 20px;
  rotate: -0.7deg;
}
.hw-check ul { list-style: none; margin: 16px 0 0; padding: 0; }
.hw-check li {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 11px 0;
  border-bottom: 1px solid rgba(46, 42, 39, 0.14);
}
.hw-check li:last-child { border-bottom: 0; padding-bottom: 2px; }

/* Alternating splits: copy column plus one artifact. */
.hw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 48px 72px;
  align-items: start;
  margin-top: 34px;
}
.hw-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr); }
/* Reversed rows put the artifact first on desktop and keep the copy
   first in the source order, so reading order never depends on CSS.
   The tracks swap with it: the copy always gets the wider column. */
.hw-reverse { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
.hw-reverse .hw-body-second { order: 2; }
.hw-reverse .hw-map { order: 1; }

/* The questions panel: the one boxed artifact on the page. Numbered
   rows on hairlines, questions in the display face. */
.hw-notebook {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 30px 26px;
  /* The panel's BOX already sits flush with the first paragraph, but
     its 28px of inner padding pushes the label down, so the card reads
     as starting late against the copy beside it (Amber, 2026-08: "move
     the checklist up around 30-50px"). Lift it by its own top padding
     so the LABEL lands on the paragraph's first line instead. Desktop
     only — the columns stack below 900 and the offset would just crop
     into the copy above. */
  margin-top: -34px;
}
@media (max-width: 900px) { .hw-notebook { margin-top: 0; } }
.nb-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}
.nb-list { list-style: none; margin: 0; padding: 0; counter-reset: nb; }
.nb-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid rgba(46, 42, 39, 0.1);
}
.nb-list li:first-child { border-top: 0; padding-top: 2px; }
.nb-list li:last-child { padding-bottom: 2px; }
.nb-list li::before {
  counter-increment: nb;
  content: counter(nb, decimal-leading-zero);
  color: var(--coral-deep);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding-top: 0.42em;
}
.nb-list span {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.32;
}

/* The hands-on list: the site's open ring as the marker, so every
   page shares one bullet language. Two columns filled DOWN then
   across, full width under the split rather than a tall single
   column in it (Amber, July 2026: "compact two-column list"). The
   hairlines went with the second column — two stacks of rules read
   as noise where the rings alone read as a list. */
.hw-doing { margin-top: clamp(48px, 5vw, 76px); }
.hw-do {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 2px clamp(28px, 4vw, 64px);
  max-width: 880px;
}
.hw-do li {
  position: relative;
  padding: 11px 0 11px 28px;
  color: var(--body);
}
.hw-do li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 111, 97, 0.28);
  border: 2px solid var(--coral-deep);
  box-sizing: border-box;
}

/* Margin annotations: a short hand-drawn coral gesture over an italic
   line in the display face. The site's one sanctioned handwriting
   stand-in — never letterforms, never a scribble. Two per page. */
.hw-note { margin-top: 34px; max-width: 34ch; }
.hw-note svg { display: block; width: 92px; height: 22px; color: var(--coral-deep); margin-bottom: 6px; }
.hw-note p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  margin: 0;
}

/* Outcomes: a hairline grid, not cards. Rules alternate coral and
   lavender so the entries do not read as one repeated component; on
   three columns that lands as a checkerboard rather than stripes.
   Six on three columns fills two rows with no orphan cell — the list
   ran to eight on four columns until July 2026, when two entries were
   folded into the ones they repeated. */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 44px;
  margin-top: 52px;
}
.lead { padding-top: 16px; border-top: 1px solid rgba(255, 111, 97, 0.42); }
.lead:nth-child(2n) { border-top-color: rgba(150, 138, 214, 0.5); }
.lead h3 { margin-bottom: 7px; line-height: 1.25; }
.lead p { color: var(--muted); margin: 0; }

/* The connection map sits a little low against its copy so the two
   columns do not start on the same line. */
.hw-map { padding-top: 10px; }
.hw-map .glyph { width: 100%; max-width: 300px; height: auto; margin: 0; display: block; }

/* Closing band: the last line carries the page, so it reads at the
   band's full width rather than the 480px supporting measure. */
.cta-band .cta-band-close { max-width: 620px; color: var(--bg); }
/* Secondary action is a text link, not a second button; the arrow
   underline flips to cream on the ink band. */
.cta-band .arrow-link {
  color: var(--bg);
  background-image: linear-gradient(var(--bg), var(--bg));
}
.cta-band .arrow-link:hover {
  color: #FFD9CC;
  background-image: linear-gradient(#FFD9CC, #FFD9CC);
}
.cta-band .cta-actions { align-items: center; }

@media (max-width: 1020px) {
  .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 40px; }
  .lead:nth-child(2n) { border-top-color: rgba(255, 111, 97, 0.42); }
  .lead:nth-child(4n+2), .lead:nth-child(4n+3) { border-top-color: rgba(150, 138, 214, 0.5); }
}
@media (max-width: 860px) {
  .hw-split, .hw-split-even { grid-template-columns: 1fr; gap: 32px; }
  /* On one column the artifact always follows its copy. */
  .hw-reverse .hw-body-second { order: 0; }
  .hw-reverse .hw-map { order: 1; }
  .hw-map .glyph { max-width: 260px; }
}
@media (max-width: 760px) {
  .hw-quote { margin-top: 40px; max-width: none; padding-top: 22px; }
  .hw-quote-under { margin-top: 34px; padding-bottom: 20px; }
  .hw-notebook { padding: 22px 20px 20px; }
  .hw-check { padding: 20px 20px 16px; rotate: -0.5deg; }
  /* Three across (Amber, 2026-08). At 390 each column is ~104px, and
     the 28px ring indent would leave 76px of text — six lines on the
     longest label. The ring moves above the label instead, which keeps
     the site's one bullet language and buys the full column width. */
  .hw-do {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
  }
  .hw-do li { padding: 22px 0 0; }
  .hw-do li::before { top: 0; }
  .hw-doing { margin-top: 40px; }
  .hw-body .hw-kicker { margin-top: 28px; padding-top: 18px; max-width: none; }
  .nb-list li { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 13px 0; }
  .hw-note { margin-top: 26px; max-width: none; }
  .lead-grid { gap: 30px 26px; margin-top: 34px; }
  .hw-body p { margin-bottom: 16px; }
}
@media (max-width: 430px) {
  .lead-grid { grid-template-columns: 1fr; gap: 26px; }
  .lead:nth-child(2n) { border-top-color: rgba(150, 138, 214, 0.5); }
  .lead:nth-child(4n+3) { border-top-color: rgba(255, 111, 97, 0.42); }
}


/* ---- The people side of the work ----
   Copy left, five principles right, pull quote across the bottom. The
   one section on How I Work built on a lavender accent rather than
   coral, because it is about the team rather than the work. Light and
   editorial: hairlines, no cards, no borders, no shadows.
   NO EYEBROW. Section eyebrows are retired site-wide, and
   "HOW I WORK WITH PEOPLE" over "The people side of the work matters
   just as much as the strategy" is exactly the restatement that got
   them retired (2026-07). */
/* July 2026: copy above, principles in TWO columns below, rather
   than a narrow copy rail beside one tall stack. Same hairlines,
   same marks, roughly half the height. */
.hw-people { display: block; }
.hw-people-copy { max-width: 64ch; }
.hw-people-copy p { color: var(--muted); margin-bottom: 18px; }
.hw-people-copy p:last-child { margin-bottom: 0; }

.hw-principles {
  list-style: none;
  margin: clamp(40px, 4.5vw, 68px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(36px, 4.5vw, 76px);
}
.hw-principles li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 22px;
  padding: 24px 0;
  border-top: 1px solid rgba(133, 121, 201, 0.28);   /* lavender hairline */
  transition: border-color 0.25s var(--ease);
}
/* The top row opens without a rule; the fifth runs the full width and
   closes the block. Nth-child, not first/last: in a two-column grid
   TWO items sit on the top row. */
.hw-principles li:nth-child(1),
.hw-principles li:nth-child(2) { padding-top: 0; border-top: 0; }
/* The fifth runs full width and now carries the closing rule itself:
   the pull quote that used to close the block became a quote banner
   in July 2026, taking its top hairline with it. */
.hw-principles li:nth-child(5) {
  grid-column: 1 / -1;
  border-bottom: 1px solid rgba(133, 121, 201, 0.28);
}
.pr-mark {
  display: block;
  margin-top: 2px;
  transition: transform 0.25s var(--ease);
}
.hw-principles h3 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  transition: color 0.25s var(--ease);
}
.hw-principles p { color: var(--muted); margin-bottom: 0; max-width: 56ch; }
/* understated on purpose: the title deepens, the mark steps 3px, the
   rule brightens. Colour and a 3px nudge only — the UI-response tier
   the rest of the site already uses, not a new motion device. */
.hw-principles li:hover { border-top-color: rgba(133, 121, 201, 0.6); }
/* The "brighten the next rule too" trick was dropped with the second
   column: source order is no longer visual order, so it lit a rule
   across the gutter. */
.hw-principles li:hover h3 { color: #4A3F86; }
.hw-principles li:hover .pr-mark { transform: translateX(3px); }

@media (max-width: 900px) {
  .hw-people-copy { max-width: none; }
  .hw-principles { grid-template-columns: 1fr; margin-top: 34px; }
  /* Back to one column, so the second item gets its rule back. */
  .hw-principles li:nth-child(2) { padding-top: 22px; border-top: 1px solid rgba(133, 121, 201, 0.28); }
  .hw-principles li { grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .pr-mark { width: 26px; height: 26px; }
  .hw-principles p { max-width: none; }
}

/* ============ Type system (see MASTER.md) ============
   One responsive scale across every page. Deliberate exceptions:
   the home hero h1 (3-line rule), the home problem h2 (mobile
   visibility rule), the long about h1 (.h1-long -> h2 size), and
   metric/metadata micro-type (proof chips, feat stats, tags-as-
   labels, case-column labels). */
body { font-size: var(--fs-body); line-height: 1.55; }

.page-head h1,
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.page-head h1.h1-long {
  /* long-display slot: 36 -> 50, between the display and h2 grades */
  font-size: clamp(2.25rem, 1.925rem + 1.3333vw, 3.125rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.section-title,
.case h2,
.offer-section h2,
.cta-band h2 {
  font-size: var(--fs-h2);
  line-height: 1.09;
  letter-spacing: -0.02em;
}
/* .ch-title IS GONE (Amber, 2026-08: "the font for Where I help and the
   section beneath are not following brand guidelines"). It was added in
   July to keep "Where I help" from reading as a second hero headline,
   and it invented a 28-34 grade that existed nowhere else on the site —
   a scan of every Newsreader element across all seven pages found 34px
   exactly once, here. Worse, the fix was only applied to that one h2,
   so the page's most important section title was 34 while "Tools I've
   worked in" and "See the expertise in action." sat at 44 below it.
   The ladder concern it answered was already solved upstream: h2 was
   stepped down from 50 to 44 precisely so it clears every h1 including
   the long-display pages. 50 > 44 is the sanctioned step. */
/* Long conversational headlines (10+ words) step down one grade so
   they read as sentences, not walls — same pattern as .h1-long. */
.h2-long { font-size: clamp(1.625rem, 1.346rem + 1.1429vw, 2.375rem); line-height: 1.18; } /* 26 -> 38, below h2 */

/* Card titles read at the intro grade — the h3 display slot was a
   heading trapped in a card (Amber, 2026-07). h3 token stays
   reserved for structural subheads. */
.card h3,
.cap-card h3,
.edu-card h3 {
  font-size: var(--fs-intro);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
/* Career chapters are structural subheads, not card titles */
.xp-company { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.015em; }
.xp-lede { font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }

/* ALL running text reads at body — one paragraph size site-wide,
   ledes and band statements included (Amber, 2026-07: "it should
   all be body text", 16 mobile / 17 desktop). The intro rung
   belongs to card titles only. Ledes keep the heading's width. */
.section-lede { font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }
/* Page heads are hero ground and stay restrained (Amber): capped
   h1, body-scale lede at reading measure — no page opens heavier
   than home. */
.page-head .section-lede { font-size: var(--fs-body); line-height: 1.55; max-width: 600px; }
.offer-desc { font-size: var(--fs-body); line-height: 1.55; }
/* Band statements match the ledes: body scale */
.bridge-line { font-size: var(--fs-body); line-height: 1.55; }
/* Hero subhead matches the page-head ledes: body scale (the old
   15 -> 17.5 clamp overshot body at desktop and undershot the other
   heads on phones' widest siblings) */
.hero .subhead { font-size: var(--fs-body); line-height: 1.55; }

.card p,
.cap-card p,
.quote-card blockquote,
.case-col p,
.xp-desc,
.xp-role,
.offer-points li,
.offer-aside p,
.contact-intro p,
.about-copy p { font-size: var(--fs-body); line-height: 1.55; }

.who-role,
.quote-foot .who-role,
.quote-foot .who-name,
.form-note,
.xp-years,
.xp-yr,
.xp-co,
.xp-note,
.xp-areas,
.xp-proof li,
.edu-card p,
.contact-form label,
.cb-step span,
footer p,
.footer-col a { font-size: var(--fs-small); line-height: 1.4; }
.footer-brand p { line-height: 1.55; }
.footer-head { font-size: var(--fs-eyebrow); }
/* sentence paragraphs are body, never small */
.offer-aside p,
.offer-aside .who { font-size: var(--fs-body); line-height: 1.5; }
.anchor-nav a { font-size: var(--fs-small); } /* compact utility tabs: small slot */
/* Expertise sits almost entirely on the shared scale now: row and
   category titles on the card-title grade, every descriptor at body,
   the tools list and company note at small. Two display grades stay
   off-token by design: the result figures and the pull-quote grade it
   shares with How I Work. */
/* The labels grew a grade against the planes (Amber: "the labels and
   descriptors feel small compared with the size of the bands"); the
   planes shrank at the same time, from both ends of the problem. */
/* Smaller than the last version, and clearly under the h1. */
.xm-num { font-size: var(--fs-eyebrow); line-height: 1.4; }
.xm-note { font-size: var(--fs-eyebrow); line-height: 1.4; }
.xm-name { font-size: var(--fs-intro); line-height: 1.2; }
.ch-word { font-size: var(--fs-h3); }
.ch-for { font-size: var(--fs-body); line-height: 1.55; }
.ch-caps, .industries { font-size: var(--fs-small); line-height: 1.55; }
/* Proof rows: the sentence at body, the row title on the card-title
   grade, label and figure caption at eyebrow. */
.pr-label, .pr-proof { font-size: var(--fs-eyebrow); line-height: 1.4; }
/* The metric outranks the headline on purpose: this section is proof,
   not another description. */
.ev-label { font-size: var(--fs-eyebrow); letter-spacing: 0.08em; line-height: 1.4; }
.ev-head { font-size: var(--fs-intro); line-height: 1.25; }
.ev-story p { font-size: var(--fs-body); line-height: 1.55; }
.ev-metric { font-size: var(--fs-h3); line-height: 1.1; }
.ev-metric-label { font-size: var(--fs-small); line-height: 1.4; }
.ev-intro p { font-size: var(--fs-body); line-height: 1.55; }
.tl-cat { font-size: var(--fs-eyebrow); line-height: 1.4; }
.tl-eg { font-size: var(--fs-small); line-height: 1.5; }
.plat-list dt, .plat-list dd { font-size: var(--fs-small); line-height: 1.5; }
.pr-head { font-size: var(--fs-h3); line-height: 1.2; }
.pr-copy p { font-size: var(--fs-body); line-height: 1.55; }
.pr-proof span { font-size: var(--fs-intro); line-height: 1.2; }
.ch-line { font-size: var(--fs-intro); line-height: 1.35; }
.work-strip a { font-size: var(--fs-intro); line-height: 1.35; }
.diag-q { font-size: var(--fs-h3); line-height: 1.3; }
/* Courses */
.crs-body h3, .crs-login h2 { font-size: var(--fs-intro); line-height: 1.3; }
.crs-topics li, .crs-meta dt { font-size: var(--fs-eyebrow); letter-spacing: 0.08em; }
.crs-meta dd, .co-login, .crs-login p { font-size: var(--fs-small); line-height: 1.5; }
.ct-title { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 1.95rem); }
.ct-stages li { font-size: clamp(0.72rem, 0.66rem + 0.28vw, 0.8rem); }
@media (max-width: 760px) { .work-strip a { font-size: 1.125rem; } }
.plat h3, .plat p { font-size: var(--fs-small); line-height: 1.45; }
 .case-scope, .art-link a{ font-size: var(--fs-small); line-height: 1.55; }
.case-rel { font-size: var(--fs-eyebrow); }
.lb-stage figcaption { font-size: var(--fs-small); line-height: 1.5; }
.lb-count { font-size: var(--fs-eyebrow); }
.case-impact { font-size: var(--fs-body); line-height: 1.5; }
.case-toggle { font-size: var(--fs-small); }
.plat-all summary { font-size: var(--fs-small); }

/* How I Work joins the shared scale: prose at body, panel questions
   and outcome titles on the card-title grade, numbers and panel
   labels at eyebrow. The pull quotes take one new display grade,
   deliberately set between h2 and h3 so they never outrank a section
   title; the kicker line sits a grade below them, on h3. */
.hw-stanza,
.hw-body p,
.hw-check li,
.hw-note p { font-size: var(--fs-body); line-height: 1.55; }
/* "Things I end up doing" is a list of labels, not running text, so it
   takes the small grade like the Expertise capability lines do (Amber,
   2026-08: "the bullet font ... may be too large"). */
.hw-do li { font-size: var(--fs-small); line-height: 1.45; }
.hw-body .hw-kicker { font-size: var(--fs-h3); line-height: 1.3; }
.hw-note p { line-height: 1.45; }
.nb-list span,
.lead h3 { font-size: var(--fs-intro); }
.lead p { font-size: var(--fs-small); line-height: 1.5; }
.nb-label,
.nb-list li::before { font-size: var(--fs-eyebrow); }
.hw-quote p { font-size: clamp(1.55rem, 1.316rem + 0.96vw, 2.25rem); line-height: 1.28; }
.hw-principles h3 { font-size: var(--fs-intro); line-height: 1.3; }
.hw-principles p { font-size: var(--fs-body); line-height: 1.55; }

/* Uppercase tags and tier chips read as eyebrow-grade metadata */
.card .card-tag,
.case .case-tag,
.more-list .case-tag,
.email-capture .capture-label,
.offer-aside .tier { font-size: var(--fs-eyebrow); }
.case-col.result p { font-size: var(--fs-body); } /* Impact lines join body scale */

.xp-divider,
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.btn { font-size: 1.0625rem; }
.nav-links a { font-size: 1rem; }
.arrow-link { font-size: 1rem; } /* interactive text sits in the 16-17px slot */

/* Inline conversion prompt: one quiet line at the decision moment
   on long proof pages (work, capabilities). Editorial, not a pill. */
.inline-cta { font-size: var(--fs-body); color: var(--muted); }

@media (max-width: 760px) {
  .page-head h1, .hero h1 { line-height: 1.05; letter-spacing: -0.025em; }
  /* phone hero: same 88px nav-to-headline gap as every page head */
  .hero { min-height: 0; padding: 149px 0 48px; }
  .section-title,
  .case h2,
  .offer-section h2,
  .cta-band h2 { line-height: 1.1; }
  /* CTA practice on phones: buttons keep dominance through coral,
     not bulk — 16px labels in calmer pills (still 44px+ targets),
     level with the 16px hero subhead. */
  .btn { font-size: 1rem; padding: 12px 22px; }
}

/* Phone rhythm: class-padded sections join the 64px mobile scale,
   and page heads start at the same height as the home hero */
@media (max-width: 760px) {
  .cta-band-wrap { padding: 48px 0 64px; }
  .page-head { padding: calc(var(--nav-h) + 34px) 0 36px; }
}

/* Portrait accents: one small blob photo at the home about teaser
   and one at the contact moment — the only two photo repeats; the
   full portrait lives on About. Same organic radius family. */
.about-teaser { display: flex; gap: 44px; align-items: flex-start; }
.teaser-photo {
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  border-radius: 54% 46% 50% 50% / 48% 50% 46% 56%;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.about-teaser-copy { min-width: 0; }
.contact-photo {
  width: 108px;
  height: 108px;
  border-radius: 58% 42% 46% 54% / 45% 52% 48% 55%;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
}
@media (max-width: 760px) {
  .about-teaser { flex-direction: column; gap: 22px; }
  .teaser-photo { flex-basis: auto; width: 118px; height: 118px; }
  .contact-photo { width: 96px; height: 96px; margin-bottom: 16px; }
}

/* Minimal consolidation (2026-07): one uppercase-label tracking,
   one radius scale — 24px cards/pills/bands, 14px compact elements
   and inputs, 8px phone strip rows, 50% circles, organic blobs. */
.card .card-tag,
.case .case-tag,
.more-list .case-tag,
.offer-aside .tier,
.email-capture .capture-label,
.case-col h3 { letter-spacing: 0.08em; }
.cta-band,
.quote-marquee { border-radius: 24px; }
.marquee-toggle { border-radius: 24px; }
@media (min-width: 761px) {
  .proof-chip { border-radius: 14px; }
}

/* Small phones: anchor tabs step to the 15px small slot so the
   sticky nav holds one row (cascade: must follow the type system) */
@media (max-width: 380px) {
  .anchor-nav a { padding: 13px 8px; }
}


/* ============ TABLET NAV STEP-DOWN ============
   Seven primary links plus the Shop group and the CTA (Amber, July
   2026: Home was added and Projects became Work). Between the mobile
   menu at 760 and roughly 900 the row only fits if the labels, the
   gaps and the wordmark all step down together.
   THIS MUST STAY AFTER THE TYPE LAYER. `.nav-links a` is set to 1rem
   up there at equal specificity, so an earlier media query is dead
   on arrival — that is exactly how the previous step-down silently
   stopped changing the font size. Six primary links plus Shop and the
   CTA need this one band and nothing tighter; a second band under
   840 was added for seven and removed again when Home came out.
   Measured one row at every width from 1440 down to 761, tightest
   brand clearance 163px at 960. */
@media (max-width: 900px) and (min-width: 761px) {
  .nav-links { gap: 10px; }
  .nav-links a, .nav-drop-btn { font-size: 0.8rem; }
  .nav-cta { padding-left: 11px; padding-right: 11px; }
  .brand { font-size: 1.25rem; }
}