/* The Demand Stream, 2026 design.
   Shared by every page under /v2. Edit here, not in the pages. */

:root{
  /* brand */
  --teal:#244855;
  --teal-deep:#1d3c47;
  --sage:#90AEAD;
  --sage-hero:#AFC3C0;   /* hero band: sage lifted toward paper */
  --coral:#E64833;
  --logo:#5F747C;   /* the logo is subdued, not the full teal */
  /* The same red, lifted just enough for reversed type. Full-strength #E64833
     on the dark band measures 2.50:1 and the edges shimmer, because a saturated
     red and a dark blue-green are close to complementary. This is the smallest
     lift that still clears the 3:1 line: 3.00:1, and much nearer the brand red
     than the 3.45:1 version it replaced, which read pink. */
  --coral-on-dark:#EA6352;
  --amber:#F0B429;
  --cream:#FBE9D0;
  --paper:#F6F5F1;       /* DAISY band */
  --white:#FFFFFF;
  --ink:#24404B;
  --line:rgba(36,72,85,.14);

  --wrap:1180px;
  --gut:clamp(22px,5vw,64px);
  /* The air at every section break. One token, used by the top and bottom
     padding of every band, so the rhythm is the same the whole way down and
     cannot drift apart at a width nobody looked at. 70px on a wide screen.
     The hero's TOP padding is deliberately not this: that is the space under
     the nav, not a break between two sections. */
  --break-gap:clamp(36px,4.8vw,70px);
  /* The footer's own measure: rule to words, and words to the foot of the page.
     Not --break-gap, because the space under the last line is closing the
     footer off, not separating two sections. */
  --foot-gap:clamp(18px,2.2vw,26px);
  --font:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --cond:'Teko','Figtree',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}

/* ---------- type ---------- */
h1,h2{font-weight:800;letter-spacing:-.022em;line-height:1.0}
h1{font-size:clamp(40px,6.6vw,86px)}
h2{font-size:clamp(32px,4.9vw,60px)}
/* The bar is sticky, so an anchor jump would otherwise park a section's first
   line underneath it. #top is in here too: it sits on <main>, which starts
   directly under the bar, so the logo's jump home was hiding the headline. This mirrors the bar's own height exactly (its two
   paddings plus the mark) and adds a little air, so #daisy and #about land
   clear of it. Change the bar's padding or mark size and change this with it. */
section[id],#top{scroll-margin-top:calc(clamp(18px,2.4vw,30px) * 2 + clamp(53px,5.5vw,72px) + 22px)}

.eyebrow{
  font-size:clamp(14px,1.45vw,18px);font-weight:800;text-transform:uppercase;
  letter-spacing:.085em;color:var(--teal);margin-bottom:clamp(10px,1.2vw,15px);
}
.eyebrow .hl{color:var(--coral)}
p{font-size:clamp(16px,1.45vw,18px);font-weight:500;line-height:1.45}
.copy p + p{margin-top:1.15em}

/* ---------- nav ---------- */
.site-head{position:sticky;top:0;z-index:60;background:var(--sage-hero);transition:background .3s ease,box-shadow .3s ease}
/* No hairline under the bar. It read as a seam across the page; the soft drop
   shadow alone is enough to lift the bar off what is scrolling under it. */
.site-head.past-hero .menu a{color:var(--teal)}
.site-head.past-hero .menu a:hover,.site-head.past-hero .menu a.is-here{color:var(--logo)}
.site-head.past-hero{background:rgba(246,245,241,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px -22px rgba(36,72,85,.5)}
.site-head .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:clamp(18px,2.4vw,30px);padding-bottom:clamp(18px,2.4vw,30px);
}
.brand{display:flex;align-items:center;gap:clamp(9px,1.05vw,14px)}
/* The mark hangs outside the text column, so it reads as a mark rather than as
   the first word of the nav. The outdent is capped at the gutter minus 8px, so
   on a narrow screen it shrinks instead of running off the edge. */
.brand{margin-left:calc(-1 * min(50px, var(--gut) - 8px))}
.brand .mark{height:clamp(53px,5.5vw,72px);width:auto}
/* the wordmark is set to the menu exactly: same size, same weight, same
   tracking. Change one and change the other, or the bar stops lining up. */
.brand .wordmark{
  font-family:var(--cond);text-transform:uppercase;color:var(--logo);
  font-size:clamp(17px,1.55vw,21px);font-weight:500;letter-spacing:.045em;
  line-height:1;white-space:nowrap;
}
.menu{display:flex;align-items:center;gap:clamp(20px,3vw,44px);list-style:none}
.menu a{
  font-family:var(--cond);font-size:clamp(17px,1.55vw,21px);font-weight:500;
  text-transform:uppercase;letter-spacing:.045em;color:var(--white);
  position:relative;padding:4px 0;transition:color .2s ease;
}
/* Hover and "you are here" are the same state: the subdued logo blue with the
   red dot above.

   :focus-visible is kept in a rule of its OWN on purpose. A comma-separated
   selector list is discarded whole if any one selector in it is not understood,
   so pairing it with .is-here means a browser without :focus-visible silently
   loses the active state as well. That is exactly what happened here: the class
   was on the element and the colour never changed. */
.menu a:hover,.menu a.is-here{color:var(--logo)}
.menu a:focus-visible{color:var(--logo)}
.menu a::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--coral);
  opacity:0;transition:opacity .2s ease;
}
.menu a:hover::before,.menu a.is-here::before{opacity:1}
.menu a:focus-visible::before{opacity:1}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.burger span{display:block;width:26px;height:2.5px;background:var(--teal);border-radius:2px}
.burger span + span{margin-top:6px}

/* ---------- buttons (icon + outlined tab) ---------- */
.tab-btn{
  display:inline-flex;align-items:center;gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(28px,3.6vw,44px);
}
.tab-btn .ic{width:clamp(38px,4vw,50px);height:auto;flex:0 0 auto;transition:transform .3s ease}
.tab-btn .lbl{
  font-family:var(--font);font-weight:800;font-size:clamp(14px,1.3vw,16px);
  text-transform:uppercase;letter-spacing:.075em;color:var(--teal);
  border:1.5px solid var(--teal);border-bottom-width:2.5px;border-radius:999px;
  padding:.62em 1.35em .5em;
  /* 20% white, so the button lifts off the artwork behind it instead of
     washing into it. */
  background:rgba(255,255,255,.2);
  transition:background .25s ease,color .25s ease;
}
.tab-btn:hover .ic{transform:rotate(-14deg)}
.tab-btn:hover .lbl{background:var(--teal);color:var(--paper)}
.tab-btn.on-dark .lbl{color:var(--white);border-color:rgba(255,255,255,.8)}
.tab-btn.on-dark:hover .lbl{background:var(--white);color:var(--teal)}

/* ---------- hero ---------- */
.hero{background:var(--sage-hero);padding:clamp(28px,4vw,56px) 0 var(--break-gap)}
.hero h1{color:var(--teal);max-width:20ch}
.hero h1 .light{color:var(--white)}
/* The subheading takes the eyebrow's face, size and tracking. Weight is the one
   thing it does not copy: 800 carries a three-word label, but across two lines
   of running text at this tracking it reads as a shout. 600 holds the same
   colour on the page without hammering. Dial it here, in one place. */
.hero .lead,.page-head .lead{
  font-family:var(--font);
  font-size:clamp(14px,1.45vw,18px);
  font-weight:700;
  letter-spacing:.012em;
  color:var(--teal);line-height:1.34;
}
/* A hard break, because the wrap alone will not put it here. Off on narrow
   screens, where the column is doing its own wrapping and a forced break just
   leaves a stranded short line. */
.wide-only{display:none}
@media (min-width:761px){.wide-only{display:inline}}

/* 60ch, not a round number: it is the measure that breaks the sentence after
   "businesses" and leaves "that matters most." on its own last line. Measured,
   not guessed. Capitals were tried here and were too shouty across a whole
   paragraph; they need 72ch for the same break, if that ever comes back.
   Change the size or the copy and this needs re-checking. */
.hero .lead{margin-top:clamp(16px,1.8vw,24px);max-width:none}

/* ---------- DAISY band ---------- */
.band-daisy{background:var(--paper);position:relative;overflow:hidden;
  padding:var(--break-gap) 0}
.band-daisy .wrap{position:relative;z-index:2}
/* Section background: the DAISY header artwork, held at 40% so the type on
   top of it keeps its contrast. The paper ground stays underneath, which is
   what the 60% resolves against. */
.art{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.art .shot{
  position:absolute;inset:0;
  background:url("/images/daisy/daisy-header.jpg") center/cover no-repeat;
  opacity:.4;
}

.daisy-h2{color:var(--teal);max-width:18ch}
.daisy-h2 .soft{color:var(--sage)}
.daisy-grid{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(30px,4vw,54px);
}
.daisy-grid .copy p{color:var(--teal)}

/* ---------- DAISY product vignette ---------------------------------------
   Ported wholesale from daisyondemand.com so the two sites show the same
   thing moving the same way. Its own design tokens are declared on .flow
   rather than :root, so they stay inside the component and cannot reach the
   rest of this page. Only the fonts are remapped, onto this site's face.
   -------------------------------------------------------------------------- */
.flow{
  --colour-primary:#F0B429;
  --colour-heading:#244855;
  --colour-text:#595959;
  --colour-text-muted:#5f6878;
  --colour-surface:#ffffff;
  --colour-surface-muted:#f5f7fa;
  --colour-border:#d9dee7;
  --radius-small:.375rem;
  --radius-medium:.75rem;
  --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem;
  --font-sans:var(--font);
  --font-heading:var(--font);
}


    /* ---- Product vignette -------------------------------------------
       A looping, four-scene mock of the DAISY flow: suspect accepted,
       account allocated, LinkedIn request, first email. Built from the
       page's own tokens, no screenshots, so it stays crisp and weighs
       nothing. All motion is driven by a single [data-beat] attribute
       the script sets on .flow-panel. */
    .flow { position: relative; margin: var(--space-6) 0 0; }

    .flow-panel {
      display: grid;
      grid-template-columns: 12rem minmax(0, 1fr);
      overflow: hidden;
      background: var(--colour-surface);
      border: 2px solid var(--colour-primary);
      border-radius: var(--radius-medium);
      box-shadow: 0 18px 40px -30px rgb(23 32 51 / 45%);
    }

    .flow-rail {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      padding: var(--space-4) var(--space-3);
      background: var(--colour-surface-muted);
      border-right: 1px solid var(--colour-border);
    }
    .flow-brand {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin-bottom: var(--space-4);
      padding-left: 0.55rem;
      color: var(--colour-heading);
      font-family: var(--font-heading);
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 0.06em;
    }
    .flow-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.4rem;
      padding: 0.42rem 0.55rem;
      color: var(--colour-text-muted);
      border-radius: var(--radius-small);
      font-size: 0.85rem;
      font-weight: 600;
      transition: background 240ms ease, color 240ms ease;
    }
    .flow-group {
      margin: var(--space-3) 0 0.25rem;
      padding-left: 0.55rem;
      color: rgb(36 72 85 / 45%);
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .flow-nav > span, .flow-nav { white-space: nowrap; }
    .flow-badge {
      display: grid;
      overflow: hidden;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 0.3rem;
      place-items: center;
      color: var(--colour-heading);
      background: var(--colour-primary);
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 800;
      transition: background 260ms ease, color 260ms ease;
    }
    /* A cleared queue shows nothing at all, the same as the app. */
    .flow-badge.is-empty { display: none; }
    .flow-badge i { display: block; font-style: normal; }
    .flow-badge.is-ticking { animation: badge-pop 460ms ease; }
    .flow-badge.is-ticking i { animation: badge-roll 460ms ease; }
    @keyframes badge-pop {
      0%, 100% { transform: scale(1); }
      40% { transform: scale(1.22); }
    }
    @keyframes badge-roll {
      0% { transform: translateY(0); opacity: 1; }
      42% { transform: translateY(-95%); opacity: 0; }
      58% { transform: translateY(95%); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }

    /* Beat 3: the card is done with, so it leaves to the left the way a
       cleared card does in the app. */
    .flow-panel[data-beat="4"] .flow-scene.is-on .flow-card {
      opacity: 0;
      transform: translateX(-115%);
      transition: transform 520ms cubic-bezier(.4, 0, .2, 1), opacity 380ms ease;
    }
    .flow-nav.is-on {
      color: var(--colour-heading);
      background: rgb(240 180 41 / 20%);
    }
    /* While the overnight run plays, the ICP row pulses: that is the thing
       being watched. */
    .flow-nav[data-rail="run"].is-on { animation: nav-pulse 1.5s ease-in-out infinite; }
    @keyframes nav-pulse {
      0%, 100% { background: rgb(240 180 41 / 18%); }
      50% { background: rgb(240 180 41 / 60%); }
    }

    /* Tall enough for the deepest scene (the email draft) so nothing clips
       and the panel never changes height mid-loop. */
    /* Click anywhere on the panel to hold it still. */
    .flow-toggle {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: grid;
      place-items: start end;
      padding: var(--space-3);
      background: transparent;
      border: 0;
      cursor: pointer;
    }
    .flow-toggle-label {
      padding: 0.2rem 0.5rem;
      color: #ffffff;
      background: var(--colour-heading);
      border-radius: var(--radius-small);
      font-family: var(--font-heading);
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 200ms ease;
    }
    .flow-toggle[aria-pressed="true"] .flow-toggle-label { opacity: 1; }
    .flow-toggle:focus-visible { outline: 3px solid rgb(240 180 41 / 60%); outline-offset: -3px; }

    .flow-stage { position: relative; min-height: 19rem; padding: var(--space-5); }
    @keyframes run-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

    .flow-scene {
      position: absolute;
      inset: var(--space-5);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 320ms ease, transform 320ms ease;
      pointer-events: none;
    }
    .flow-scene.is-on { opacity: 1; transform: none; }

    /* The overnight run: what DAISY did while nobody was watching. */
    .flow-scene[data-scene="0"] { display: flex; flex-direction: column; justify-content: center; }
    .flow-run-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
    .flow-run-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
      color: var(--colour-heading);
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.45;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 380ms ease, transform 380ms ease;
    }
    .flow-tick {
      display: grid;
      flex: 0 0 auto;
      width: 1.15rem;
      height: 1.15rem;
      margin-top: 0.1rem;
      place-items: center;
      color: var(--colour-heading);
      background: var(--colour-primary);
      border-radius: 999px;
      font-size: 0.66rem;
      font-weight: 800;
    }
    .flow-run-note {
      margin: var(--space-5) 0 0;
      padding-top: var(--space-4);
      color: var(--colour-heading);
      border-top: 1px solid var(--colour-border);
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 800;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 380ms ease, transform 380ms ease;
    }
    .flow-panel[data-beat="0"] .flow-scene.is-on .flow-run-list li:nth-child(1),
    .flow-panel[data-beat="1"] .flow-scene.is-on .flow-run-list li:nth-child(-n+2),
    .flow-panel[data-beat="2"] .flow-scene.is-on .flow-run-list li:nth-child(-n+3),
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-run-list li,
    .flow-panel[data-beat="4"] .flow-scene.is-on .flow-run-list li { opacity: 1; transform: none; }
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-run-note,
    .flow-panel[data-beat="4"] .flow-scene.is-on .flow-run-note { opacity: 1; transform: none; }

    .flow-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 var(--space-4);
      color: var(--colour-text-muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .flow-count { color: var(--colour-primary); }

    .flow-card {
      position: relative;
      padding: var(--space-4) var(--space-4) var(--space-3);
      background: var(--colour-surface);
      border: 1px solid var(--colour-border);
      border-radius: var(--radius-small);
      transition: border-color 300ms ease, background 300ms ease;
    }
    .flow-card-top { display: flex; align-items: center; gap: 0.7rem; }

    .flow-avatar {
      display: grid;
      flex: 0 0 auto;
      width: 2.1rem;
      height: 2.1rem;
      place-items: center;
      color: var(--colour-heading);
      background: rgb(36 72 85 / 8%);
      border-radius: var(--radius-small);
      font-family: var(--font-heading);
      font-size: 0.72rem;
      font-weight: 800;
    }
    .flow-avatar-person { border-radius: 999px; }

    .flow-name {
      display: grid;
      flex: 1;
      min-width: 0;
      gap: 0.1rem;
      color: var(--colour-heading);
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: 700;
    }
    .flow-name em {
      color: var(--colour-text-muted);
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-style: normal;
      font-weight: 400;
    }
    .flow-score {
      display: grid;
      flex: 0 0 auto;
      justify-items: center;
      padding: 0.2rem 0.6rem;
      color: var(--colour-heading);
      background: rgb(240 180 41 / 22%);
      border-radius: var(--radius-small);
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.1;
    }
    .flow-score em {
      color: var(--colour-text-muted);
      font-family: var(--font-sans);
      font-size: 0.6rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .flow-why {
      margin: var(--space-3) 0 0;
      color: var(--colour-text);
      font-size: 0.78rem;
      line-height: 1.45;
    }
    .flow-why strong { color: var(--colour-heading); }

    .flow-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1rem;
      margin: var(--space-3) 0 0;
      padding-top: var(--space-2);
      border-top: 1px solid var(--colour-border);
    }
    .flow-meta div { display: flex; align-items: baseline; gap: 0.35rem; }
    .flow-meta dt {
      color: var(--colour-text-muted);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .flow-meta dd { margin: 0; color: var(--colour-heading); font-size: 0.78rem; font-weight: 600; }

    .flow-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: var(--space-3); }
    .flow-chip {
      padding: 0.2rem 0.5rem;
      color: var(--colour-text-muted);
      background: var(--colour-surface-muted);
      border: 1px solid var(--colour-border);
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .flow-chip-signal { color: var(--colour-heading); border-color: rgb(240 180 41 / 55%); }
    .flow-chip-signal::before {
      content: "";
      display: inline-block;
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.35rem;
      background: var(--colour-primary);
      border-radius: 999px;
      vertical-align: 0.05rem;
    }

    /* LinkedIn colouring so the channel is unmistakable at a glance. */
    .flow-count-li {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.16rem 0.42rem;
      color: #ffffff;
      background: #0a66c2;
      border-radius: 0.2rem;
      font-size: 0.66rem;
      letter-spacing: 0.06em;
    }
    .flow-count-li svg { width: 0.8rem; height: 0.8rem; fill: #ffffff; }
    .flow-avatar-li { color: #ffffff; background: #0a66c2; }
    .flow-scene[data-scene="3"] .flow-quote { border-left-color: #0a66c2; }
    .flow-btn-li { background: #0a66c2; border-color: #0a66c2; border-radius: 999px; }
    /* Extra class in the selector so this beats the generic gold pressed
       state regardless of source order. */
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-btn.flow-btn-li {
      color: #ffffff;
      background: #0a66c2;
      border-color: #0a66c2;
    }

    .flow-quote {
      margin: var(--space-3) 0 0;
      padding-left: var(--space-3);
      color: var(--colour-text);
      border-left: 2px solid rgb(240 180 41 / 55%);
      font-size: 0.82rem;
      line-height: 1.55;
    }
    .flow-quote-body { border-left-color: var(--colour-border); }
    .flow-field {
      display: flex;
      gap: 0.6rem;
      margin: 0 0 0.35rem;
      padding-bottom: 0.35rem;
      color: var(--colour-heading);
      border-bottom: 1px solid var(--colour-border);
      font-size: 0.82rem;
    }
    .flow-field span { flex: 0 0 3.2rem; color: var(--colour-text-muted); font-weight: 600; }

    .flow-actions { position: relative; display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: var(--space-3); }
    .flow-btn {
      padding: 0.34rem 0.8rem;
      border-radius: var(--radius-small);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .flow-btn-ghost { color: var(--colour-text-muted); border: 1px solid var(--colour-border); }
    .flow-btn-primary {
      color: #ffffff;
      background: var(--colour-heading);
      border: 1px solid var(--colour-heading);
      transition: transform 160ms ease, background 200ms ease, border-color 200ms ease;
    }

    /* The pointer reads down the card before it acts: header, then the body,
       then the button. Positions are percentages of the card, so the same
       three stops work on every card. */
    .flow-cursor {
      position: absolute;
      top: 26%;
      left: 30%;
      width: 0.85rem;
      height: 0.85rem;
      background: var(--colour-heading);
      border: 2px solid #ffffff;
      border-radius: 999px;
      box-shadow: 0 2px 6px rgb(23 32 51 / 30%);
      opacity: 0;
      transition: top 700ms cubic-bezier(.32,.72,.3,1), left 700ms cubic-bezier(.32,.72,.3,1),
                  transform 220ms ease, opacity 260ms ease;
      pointer-events: none;
    }
    .flow-panel[data-beat="0"] .flow-scene.is-on .flow-cursor { opacity: 1; top: 24%; left: 26%; }
    .flow-panel[data-beat="1"] .flow-scene.is-on .flow-cursor { opacity: 1; top: 58%; left: 44%; }
    .flow-panel[data-beat="2"] .flow-scene.is-on .flow-cursor { opacity: 1; top: 88%; left: 78%; }
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-cursor { opacity: 1; top: 88%; left: 78%; transform: scale(0.68); }
    /* The allocation screen has no button at the foot: the pointer works the
       owner picker on the first row instead. */
    .flow-panel[data-beat="0"] .flow-scene[data-scene="2"].is-on .flow-cursor { top: 34%; left: 30%; }
    .flow-panel[data-beat="1"] .flow-scene[data-scene="2"].is-on .flow-cursor { top: 44%; left: 52%; }
    .flow-panel[data-beat="2"] .flow-scene[data-scene="2"].is-on .flow-cursor { top: 22%; left: 84%; }
    .flow-panel[data-beat="3"] .flow-scene[data-scene="2"].is-on .flow-cursor { top: 22%; left: 84%; }

    .flow-stamp {
      position: absolute;
      left: var(--space-4);
      bottom: var(--space-4);
      padding: 0.28rem 0.6rem;
      color: var(--colour-heading);
      background: var(--colour-primary);
      border-radius: var(--radius-small);
      font-family: var(--font-heading);
      font-size: 0.75rem;
      font-weight: 800;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 260ms ease, transform 260ms ease;
    }

    /* The rest of the queue, collapsed under the open action the way the
       Action Queue stacks them. */
    .flow-queued {
      display: grid;
      gap: 0.35rem;
      margin: var(--space-3) 0 0;
      padding: 0;
      list-style: none;
    }
    .flow-queued li {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 0.6rem;
      color: var(--colour-text-muted);
      background: var(--colour-surface);
      border: 1px solid var(--colour-border);
      border-radius: var(--radius-small);
      font-size: 0.76rem;
    }
    .flow-queued strong { color: var(--colour-heading); font-weight: 700; }
    .flow-queued em { font-style: normal; }
    .flow-ch {
      padding: 0.1rem 0.32rem;
      color: var(--colour-text-muted);
      background: var(--colour-surface-muted);
      border-radius: 0.2rem;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .flow-ch-li { color: #ffffff; background: #0a66c2; }
    .flow-ch-mail { color: var(--colour-heading); background: rgb(240 180 41 / 30%); }

    .flow-row {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 0.7rem;
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--colour-border);
    }
    .flow-row-quiet { opacity: 0.55; }
    /* The row being allocated tints gold on the same beat the cards do. */
    .flow-row-live {
      padding-inline: 0.6rem;
      margin-inline: -0.6rem;
      border-radius: var(--radius-small);
      transition: background 300ms ease;
    }
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-row-live { background: rgb(240 180 41 / 14%); }
    /* Owner picker, swapped for the owner itself once it is chosen. */
    .flow-select {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.35rem;
      padding: 0.28rem 0.5rem;
      color: var(--colour-text-muted);
      background: var(--colour-surface);
      border: 1px solid var(--colour-border);
      border-radius: var(--radius-small);
      font-size: 0.76rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .flow-select b { color: var(--colour-heading); }
    .flow-owner[data-reveal] { position: absolute; right: 0; }
    .flow-row-live { position: relative; }
    .flow-panel[data-beat="3"] .flow-scene.is-on [data-hide] { opacity: 0; }
    [data-hide] { transition: opacity 200ms ease; }

    .flow-owner {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.4rem;
      color: var(--colour-heading);
      font-size: 0.8rem;
      font-weight: 600;
    }
    .flow-owner-pic {
      display: grid;
      width: 1.5rem;
      height: 1.5rem;
      place-items: center;
      color: #ffffff;
      background: var(--colour-heading);
      border-radius: 999px;
      font-size: 0.62rem;
      font-weight: 800;
    }
    .flow-toast {
      display: inline-block;
      margin: var(--space-4) 0 0;
      padding: 0.3rem 0.65rem;
      color: var(--colour-heading);
      background: rgb(240 180 41 / 22%);
      border-radius: var(--radius-small);
      font-size: 0.78rem;
      font-weight: 700;
    }
    [data-reveal] { opacity: 0; transform: translateY(4px); transition: opacity 320ms ease, transform 320ms ease; }

    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-btn-primary {
      background: var(--colour-primary);
      border-color: var(--colour-primary);
      color: var(--colour-heading);
      transform: translateY(1px);
    }
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-stamp,
    .flow-panel[data-beat="3"] .flow-scene.is-on [data-reveal] { opacity: 1; transform: none; }
    /* Every card tints gold once its action is done, not just the suspect. */
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-card {
      background: rgb(240 180 41 / 8%);
      border-color: rgb(240 180 41 / 65%);
    }
    .flow-panel[data-beat="3"] .flow-scene.is-on .flow-actions { opacity: 0.35; }
    .flow-actions { transition: opacity 260ms ease; }

    /* Typed note on the LinkedIn scene. The typing is done in the script by
       slicing the text, not by a CSS animation: a paused animation (hidden tab)
       sits on its first keyframe, which left the line invisible. The markup
       holds the full sentence, so with no script at all it simply reads. */
    [data-type] { display: inline-block; min-height: 1.55em; }
    [data-type]::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 0.95em;
      margin-left: 1px;
      background: var(--colour-primary);
      vertical-align: -0.12em;
      opacity: 0;
    }
    [data-type].is-typing::after { opacity: 1; }

    /* Absolute so the dots do not add height to the column: the copy beside
       it can then centre on the panel itself. */
    .flow-dots {
      position: absolute;
      right: 0;
      bottom: -1.5rem;
      left: 0;
      display: flex;
      justify-content: center;
      gap: 0.4rem;
    }
    .flow-dot {
      width: 0.4rem;
      height: 0.4rem;
      background: var(--colour-border);
      border-radius: 999px;
      transition: background 240ms ease, transform 240ms ease;
    }
    .flow-dot.is-on { background: var(--colour-primary); transform: scale(1.35); }


    @media (max-width: 900px) {
      .flow-panel { grid-template-columns: minmax(0, 1fr); }
      .flow-rail { flex-direction: row; align-items: center; gap: var(--space-3); border-right: 0; border-bottom: 1px solid var(--colour-border); }
      .flow-brand { margin-bottom: 0; }
      .flow-nav { padding: 0.3rem 0.45rem; font-size: 0.78rem; }
      .flow-stage { min-height: 31.5rem; }
    }
    @media (max-width: 560px) {
      /* The full nav will not fit, but the three queues carry the story, so
         keep those and their counts and drop the rest. */
      .flow-rail { flex-wrap: wrap; }
      .flow-nav, .flow-group { display: none; }
      .flow-nav[data-rail="suspects"],
      .flow-nav[data-rail="allocating"],
      .flow-nav[data-rail="actions"] { display: flex; }
      .flow-quote, .flow-field { font-size: 0.78rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .flow-scene, .flow-cursor, .flow-stamp, [data-reveal], .flow-btn-primary { transition: none; }
      .flow-scene.is-on [data-type] { animation: none; }
    }

    /* Copy on the left under the heading, the product vignette on the right.
       The vignette shows the same sequence the copy describes, so it carries
       the column on its own. */
    @media (min-width: 901px) {
      .judgement-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: center;
        gap: var(--space-7) clamp(2rem, 4vw, 3.5rem);
      }
      /* The heading runs the full width so neither column has to carry it. */
      .judgement-heading { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
      .judgement-copy { grid-column: 2; grid-row: 2; align-self: center; padding-top: 0; }
      /* Vignette on the left: the hero's motion sits on the right, and two
         moving things stacked on the same edge is too much. */
      .flow { grid-column: 1; grid-row: 2; margin: 0; align-self: stretch; }

      /* The panel is in a narrower column here than it was full width, so the
         rail tightens rather than eating the stage. */
      .flow-panel { grid-template-columns: 10.25rem minmax(0, 1fr); }
      .flow-nav, .flow-brand { font-size: 0.78rem; }
      .flow-nav { padding: 0.36rem 0.45rem; }
      /* Tall enough for the deepest scene at this column width. */
      .flow-stage { min-height: 29rem; padding: var(--space-4); }
      .flow-scene { inset: var(--space-4); }
    }

/* daisyondemand runs the vignette down the LEFT of its own grid, because its
   hero motion sits on the right. Here it belongs beside the copy, on the
   right, so that placement is overridden rather than cut out of the port.
   Two classes, so it wins over the ported .flow rule without !important. */
.daisy-grid .flow{grid-column:2;grid-row:1;margin:0;align-self:start}
@media (max-width:900px){.daisy-grid .flow{grid-column:1;grid-row:2}}

/* ---------- point of view ---------- */
.band-pov{background:var(--white);padding:var(--break-gap) 0}
.band-pov h2{color:var(--teal)}
.band-pov .copy{max-width:56ch;margin-top:clamp(22px,3vw,38px)}
.band-pov .copy p{color:var(--teal)}

/* ---------- about + footer (one dark band) ---------- */
.band-dark{background:var(--teal);color:var(--white);padding:var(--break-gap) 0 var(--foot-gap)}
/* Reversed out, the eyebrow needs a lighter red and a lighter weight. Light
   type on a dark ground always looks fatter than the same type the other way
   round, so 800 here reads heavier than 800 does on the pale bands. */
.band-dark .eyebrow{color:var(--coral-on-dark);font-weight:700}
.band-dark h2{color:var(--white);max-width:20ch}
.band-dark .copy{max-width:66ch;margin-top:clamp(22px,3vw,38px)}
.band-dark .copy p{color:rgba(255,255,255,.92)}
.foot{
  position:relative;
  margin-top:clamp(44px,6vw,84px);padding-top:var(--foot-gap);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
/* The rule runs the full width of the page, not the width of the container the
   footer text sits in. Safe against a scrollbar because body is overflow-x
   hidden; without that, 100vw would push the page sideways. */
.foot::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:1px;background:rgba(255,255,255,.28);
}

/* Secondary pages end on the footer alone, with no about copy above it. */
.band-foot{background:var(--teal);color:var(--white);padding:var(--break-gap) 0 var(--foot-gap)}
.band-foot .foot{margin-top:0}
.foot a,.foot span{font-family:var(--cond);font-size:clamp(15px,1.45vw,19px);font-weight:500;
  text-transform:uppercase;letter-spacing:.045em;color:var(--white)}
.foot nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.foot nav a{transition:opacity .2s ease}
.foot nav a:hover{opacity:.65}
/* No ring: the mark carries itself. 19px is the old 15px plus a quarter.

   The nudge is optical, not a fudge. Flex centres the mark on the text's line
   box, but Teko's capitals sit high in theirs: measured here, the ink centre is
   0.7px above the box centre, so a mark centred on the box reads low against
   the words beside it. This puts it on the cap centre instead. */
.foot .in{display:grid;place-items:center;transform:translateY(-1px);
  transition:opacity .2s ease}
.foot .in svg{width:19px;height:19px;fill:var(--white);transition:fill .25s ease}
.foot .in:hover{opacity:1}
.foot .in:hover svg{fill:var(--logo)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .daisy-grid{grid-template-columns:1fr}
  .hero h1,.daisy-h2{max-width:none}
}
@media (max-width:760px){
  .burger{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:2px;background:var(--sage-hero);padding:6px var(--gut) 22px;
    border-bottom:1px solid rgba(36,72,85,.15);display:none;
  }
  .menu.open{display:flex}
  .site-head.past-hero .menu{background:#F6F5F1}
  .menu a{font-size:22px;padding:9px 0}
  .menu a.is-here::before{top:50%;left:-16px;transform:translateY(-50%)}
  .site-head .wrap{position:relative}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ==========================================================================
   Secondary pages. The home page is bands of colour; these are one sage
   masthead over one column of reading, so the type does the work instead.
   ========================================================================== */

/* masthead: the hero's ground and type, at a height that suits a title alone */
.page-head{background:var(--sage-hero);padding:var(--break-gap) 0}
.page-head h1{color:var(--teal);max-width:18ch;font-size:clamp(36px,5.4vw,68px)}
.page-head h1 .light{color:var(--white)}
.page-head .lead{margin-top:clamp(18px,2.4vw,28px);max-width:60ch}

/* long-form reading. Narrow on purpose: legal text is hard enough without
   90-character lines. */
.band-read{background:var(--white);padding:var(--break-gap) 0}
.prose{max-width:70ch}
.prose h2{
  font-family:var(--font);font-size:clamp(19px,1.9vw,24px);font-weight:800;
  letter-spacing:-.01em;line-height:1.25;color:var(--teal);
  margin:clamp(34px,4vw,52px) 0 .55em;
}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--teal);margin-bottom:1.05em}
.prose ul{margin:0 0 1.15em 1.15em}
.prose li{font-size:clamp(16px,1.45vw,18px);font-weight:500;line-height:1.62;
  color:var(--teal);margin-bottom:.4em}
.prose a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose .updated{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--sage);margin-bottom:clamp(26px,3vw,38px);
}

/* contact: three ways in, one card each */
.paths{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);margin-top:clamp(30px,4vw,50px);
}
.path{
  display:flex;flex-direction:column;gap:10px;
  background:var(--white);border:1.5px solid var(--line);border-radius:14px;
  padding:clamp(20px,2.4vw,30px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.path:hover{transform:translateY(-3px);border-color:var(--teal);
  box-shadow:0 20px 40px -26px rgba(36,72,85,.55)}
.path .ico{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:var(--sage-hero);margin-bottom:4px}
.path .ico svg{width:19px;height:19px;fill:var(--teal)}
.path h3{font-family:var(--font);font-size:clamp(16px,1.5vw,19px);font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--teal)}
.path p{color:var(--teal);opacity:.82}
.path .go{margin-top:auto;padding-top:12px;font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--coral)}
@media (max-width:820px){.paths{grid-template-columns:1fr}}


/* ==========================================================================
   Booking sheet, ported from daisyondemand.com. Slides up from the foot of
   the page rather than sending the reader off to HubSpot. Its tokens are
   declared on .booker so they stay inside the component, same as the
   vignette; the calendar is only fetched the first time it is opened.
   ========================================================================== */
.booker{
  --colour-surface:#ffffff;
  --colour-primary:#F0B429;
  --colour-heading:#244855;
  --colour-text:#4a5b63;
  --colour-text-muted:#6b7c84;
  --colour-border:#d9dee7;
  --radius-medium:.75rem;
  --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
}
       the reader off to another page to pick a time. */
    .booker[hidden] { display: none; }
    .booker { position: fixed; inset: 0; z-index: 80; }
    .booker-scrim {
      position: absolute;
      inset: 0;
      background: rgb(23 32 51 / 45%);
      opacity: 0;
      transition: opacity 320ms ease;
    }
    .booker-sheet {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      width: min(100%, 62rem);
      max-height: min(94vh, 60rem);
      margin: 0 auto;
      padding: var(--space-5) var(--space-5) var(--space-4);
      /* Column layout so the calendar takes the slack and scrolls on its own.
         When the whole sheet scrolled, the two notes under the calendar fell
         below the fold on anything shorter than about 950px and the email
         option was invisible unless you thought to scroll a dialog. */
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--colour-surface);
      border: 2px solid var(--colour-primary);
      border-bottom: 0;
      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
      box-shadow: 0 -20px 50px -30px rgb(23 32 51 / 80%);
      transform: translateY(100%);
      transition: transform 460ms cubic-bezier(.22, .8, .3, 1);
    }
    .booker.is-open .booker-scrim { opacity: 1; }
    .booker.is-open .booker-sheet { transform: none; }
    .booker-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);
    }
    .booker-head h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
    .booker-head .eyebrow { margin-bottom: 0.2rem; }
    .booker-close {
      flex: 0 0 auto;
      width: 2.25rem;
      height: 2.25rem;
      color: var(--colour-heading);
      background: var(--colour-surface-muted);
      border: 1px solid var(--colour-border);
      border-radius: 999px;
      cursor: pointer;
      font-size: 1.2rem;
      line-height: 1;
    }
    .booker-close:hover { background: var(--colour-primary); border-color: var(--colour-primary); }
    /* No cropping here. HubSpot's promo band sits at the foot of their iframe,
       but so do the Back and Confirm buttons on the second step of the booking
       form, so anything that hides the band hides those too. */
    /* flex: takes whatever room is left and scrolls inside itself, so the head
       above and the two notes below are always on screen. min-height: 0 is what
       lets a flex item shrink below its content height. */
    .booker-cal { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: var(--space-4); }
    .booker-head, .booker-fallback, .booker-email { flex: 0 0 auto; }
    .booker-cal iframe { width: 100%; border: 0; }
    .booker-fallback { margin: var(--space-3) 0 0; color: var(--colour-text-muted); font-size: 0.8rem; text-align: center; }
    /* Deliberately quiet: booking is the primary path, this is the alternative
       for anyone who would rather not pick a time. The hairline keeps it apart
       from the loading note above, which is a different kind of message. */
    .booker-email {
      margin: var(--space-2) 0 0;
      padding-top: var(--space-2);
      border-top: 1px solid var(--colour-rule, rgba(0, 0, 0, 0.08));
      color: var(--colour-text-muted);
      font-size: 0.8rem;
      text-align: center;
    }
    .booker-email a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .booker-email a:hover, .booker-email a:focus { color: var(--colour-ink, inherit); }
    @media (prefers-reduced-motion: reduce) {
      .booker-sheet, .booker-scrim { transition: none; }
    }


/* This site's h2 is a 60px display face and its eyebrow carries a big bottom
   margin. Neither belongs on a dialog, so both are brought back down here. */
.booker h2{
  font-size:clamp(19px,2vw,25px);font-weight:800;letter-spacing:-.01em;
  line-height:1.2;color:var(--teal);
}
.booker .eyebrow{margin-bottom:6px;color:var(--coral)}
.booker-head{gap:18px}
.booker-close{
  background:none;border:0;cursor:pointer;font-size:30px;line-height:1;
  color:var(--teal);opacity:.55;padding:0 4px;transition:opacity .2s ease;
}
.booker-close:hover{opacity:1}

/* ==========================================================================
   Pin the footer to the foot of the window on short pages, so a page with
   little content does not leave a band of empty white below it.
   ========================================================================== */
body{min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* ==========================================================================
   Insights. Listing and post pages, generated by blog/build.py --v2.
   ========================================================================== */

.band-cards{background:var(--paper)}
.cards-all{margin-bottom:clamp(20px,2.6vw,30px)}
.cards-all a{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--coral);
}
.cards-all a:hover{text-decoration:underline;text-underline-offset:3px}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

.card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--white);border:1.5px solid var(--line);border-radius:14px;
  padding:clamp(20px,2.4vw,28px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--teal);
  box-shadow:0 20px 40px -26px rgba(36,72,85,.55)}
/* The whole card is the target. A link laid over it keeps one tab stop and one
   destination per card, rather than three that all go to the same place. */
.card-hit{position:absolute;inset:0;border-radius:inherit}
.card-title{
  font-family:var(--font);font-size:clamp(17px,1.65vw,21px);font-weight:800;
  letter-spacing:-.01em;line-height:1.22;color:var(--teal);
}
.card-title a{position:relative;z-index:1}
.card-excerpt{color:var(--teal);opacity:.82;font-size:clamp(14px,1.15vw,15.5px)}
.card-more{
  margin-top:auto;padding-top:10px;font-weight:800;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--coral);
}
.card-media img,.feature-media img{border-radius:9px;aspect-ratio:16/9;object-fit:cover;width:100%}

/* The newest post runs the full width of the grid. */
.card-feature{grid-column:1/-1}
@media (min-width:901px){
  .card-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px);align-items:center}
  .card-feature .feature-text{display:flex;flex-direction:column;gap:10px}
  .card-feature.no-media{grid-template-columns:1fr}
  .card-feature .card-title{font-size:clamp(22px,2.5vw,32px)}
}

.pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px)}
.pager a,.pager span{
  font-family:var(--cond);font-size:17px;font-weight:500;text-transform:uppercase;
  letter-spacing:.045em;color:var(--teal);padding:6px 12px;border-radius:8px;
}
.pager a:hover{background:rgba(36,72,85,.08)}
.pager .is-current{background:var(--teal);color:var(--paper)}

/* --- post page --- */
.post-back{
  display:inline-block;margin-bottom:clamp(14px,1.8vw,22px);
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--teal);opacity:.75;
}
.post-back:hover{opacity:1}
.page-head h1{font-size:clamp(30px,4.4vw,56px)}
.post-hero{margin-bottom:clamp(22px,3vw,36px)}
.post-hero img{border-radius:14px;width:100%}
/* The post body is the migrated HTML, so it styles bare tags rather than
   classes the source does not carry. */
.post-body h3,.post-body h4{
  font-family:var(--font);font-size:clamp(18px,1.8vw,23px);font-weight:800;
  letter-spacing:-.01em;line-height:1.25;color:var(--teal);
  margin:clamp(30px,3.6vw,46px) 0 .5em;
}
.post-body img{border-radius:12px;margin:1.4em 0}
.post-body blockquote{
  margin:1.5em 0;padding:2px 0 2px 18px;border-left:3px solid var(--sage);
  font-weight:600;color:var(--teal);
}
.post-body strong{font-weight:800}

.post-cta{
  margin-top:clamp(38px,5vw,64px);max-width:70ch;
  background:var(--paper);border:1.5px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,38px);
}
.post-cta h2{
  font-family:var(--font);font-size:clamp(21px,2.3vw,30px);font-weight:800;
  letter-spacing:-.015em;line-height:1.15;color:var(--teal);margin-bottom:.5em;
}
.post-cta p{color:var(--teal)}
.post-cta .tab-btn{margin-top:clamp(18px,2.2vw,26px)}
.post-cta-alt{margin-top:clamp(16px,2vw,22px);font-size:14px;opacity:.8}
.post-cta-alt a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}

.nextprev{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);
  margin-top:clamp(34px,4.4vw,56px);max-width:70ch;
}
@media (max-width:640px){.nextprev{grid-template-columns:1fr}}
.np-link{
  display:block;border:1.5px solid var(--line);border-radius:12px;
  padding:clamp(14px,1.8vw,20px);color:var(--teal);font-weight:700;
  line-height:1.3;transition:border-color .25s ease,transform .25s ease;
}
.np-link:hover{border-color:var(--teal);transform:translateY(-2px)}
.np-link span{
  display:block;margin-bottom:6px;font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--coral);
}
.np-older{text-align:right}

/* ==========================================================================
   About page: the team.
   ========================================================================== */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:clamp(28px,3.6vw,46px)}
@media (max-width:900px){.people{grid-template-columns:1fr}}
.person{
  background:var(--white);border:1.5px solid var(--line);border-radius:14px;
  padding:clamp(20px,2.4vw,28px);
}
/* Placeholder until the headshots are shot. Initials rather than a grey box,
   so an unfinished page still looks deliberate. */
.person-shot{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--sage-hero);margin-bottom:16px;
}
.person-shot span{
  font-family:var(--font);font-weight:800;font-size:24px;letter-spacing:.02em;
  color:var(--white);
}
.person h3{
  font-family:var(--font);font-size:clamp(18px,1.7vw,21px);font-weight:800;
  letter-spacing:-.01em;color:var(--teal);
}
.person-role{
  margin:2px 0 12px;font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--coral);
}
.person p{color:var(--teal);font-size:clamp(15px,1.2vw,16px)}
.person-li{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--logo);transition:color .2s ease;
}
.person-li svg{width:16px;height:16px;fill:currentColor}
.person-li:hover{color:var(--teal)}

/* Latest insights: its own band, wearing the Insights listing's clothes. Same
   paper ground and same white cards, so arriving here and then clicking through
   feels like one place rather than two. */
.band-insights{background:var(--paper);padding:var(--break-gap) 0}
.latest-h2{color:var(--teal);max-width:20ch;margin-top:0}
.latest-intro{max-width:62ch;margin:clamp(14px,1.8vw,22px) 0 0}
.latest .cards{margin-top:clamp(28px,3.4vw,44px)}
.latest .tab-btn{margin-top:clamp(26px,3.2vw,42px)}