/* Tandem AI Advisors — site styles.
   Every colour comes from css/tokens.css. No hex values in this file.
   Mobile first. Breakpoints: 640px, 1024px (and 768px for the nav links only). */

/* ---------- Layout and type variables ---------- */
:root {
  --nav-h: 68px;
  --gutter: 20px;
  --section-pad: 64px;
  --measure: 65ch;

  --fs-display: clamp(2.5rem, 1.982rem + 2.21vw, 3.75rem);      /* 40 → 60 */
  --lh-display: calc(1em + 4px);                                /* 44 → 64 */
  --fs-h2: clamp(1.875rem, 1.616rem + 1.105vw, 2.5rem);         /* 30 → 40 */
  --lh-h2: calc(1em + 6px);                                     /* 36 → 46 */
  --fs-h3: clamp(1.1875rem, 1.1616rem + 0.1105vw, 1.25rem);     /* 19 → 20 */
  --lh-h3: 26px;
  --fs-lead: clamp(1.125rem, 1.0732rem + 0.221vw, 1.25rem);     /* 18 → 20 */
  --lh-lead: calc(1em + 10px);                                  /* 28 → 30 */
  --fs-quote: clamp(1.5rem, 1.3446rem + 0.663vw, 1.875rem);     /* 24 → 30 */
  --lh-quote: clamp(2.125rem, 1.9178rem + 0.884vw, 2.625rem);   /* 34 → 42 */
}
@media (min-width: 640px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 64px; --section-pad: 96px; --nav-h: 84px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a { color: var(--sage-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

[id] { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  min-height: 44px;
  background: var(--sage-deep);
  color: var(--on-sage);
  border-radius: var(--radius-md);
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Logo (inline SVG, themed via variables) ---------- */
.lg-sage, .lg-gold, .lg-gap {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-sage { stroke: var(--sage); }
.lg-gold { stroke: var(--gold); }
.lg-gap { stroke: var(--paper); }
.lockup__word {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 72px;
  letter-spacing: -0.5px;
  fill: var(--ink);
}
.lockup__sub {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 5px;
  fill: var(--gold-deep);
}

/* ---------- Shared type ---------- */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
h4 {
  font-size: 19px;
  line-height: 26px;
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-muted);
  max-width: var(--measure);
}
.body-text { max-width: var(--measure); }
.eyebrow,
.proof__eyebrow {
  font: var(--text-label);
  font-size: 15px;   /* larger than the 13px label token: these title each section */
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 16px;
}
.proof__eyebrow { color: var(--gold-deep); }
@media (min-width: 1024px) {
  .eyebrow, .proof__eyebrow { font-size: 16px; line-height: 22px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}
.btn--primary { background: var(--sage-deep); color: var(--on-sage); }
.btn--secondary { background: var(--gold); color: var(--on-gold); }
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Sticky nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1280px;
  height: var(--nav-h);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.site-nav__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: 0 1 auto;
  min-width: 0;
}
/* Logo width follows the free space: it always leaves 16px or more before
   the links or the Let's talk button. */
.lockup {
  width: clamp(124px, calc(100vw - 170px), 210px);
  height: auto;
  aspect-ratio: 496 / 106;
}
.site-nav__links { display: none; }
.site-nav__cta { padding-inline: 16px; flex: none; }
@media (min-width: 768px) {
  .site-nav__links {
    display: flex;
    margin-left: auto;
  }
  .site-nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 8px;
    font: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .site-nav__links a:hover { text-decoration: underline; }
  .site-nav__cta { padding-inline: 24px; }
  .lockup { width: clamp(180px, calc(100vw - 588px), 230px); }
}
@media (min-width: 1024px) {
  .lockup { width: 264px; }
  .site-nav__links { gap: 8px; }
  .site-nav__links a { padding-inline: 12px; }
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--hairline);
}
.band { border-top: 0; }
.band--deep { background: var(--paper-deep); }
.band--sage { background: var(--sage-tint); }
.band + .section:not(.band) { border-top: 0; }
.section h2 { margin-bottom: 16px; }
.section__lead { margin-bottom: 0; }

/* 12-column grid on desktop */
@media (min-width: 1024px) {
  .hero__grid,
  .sponsors,
  .about {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
  }
}

/* ---------- Hero ---------- */
.hero { padding-block: 48px var(--section-pad); }
.hero__grid { display: grid; gap: 48px; }
.hero__grid:focus { outline: none; }
.hero__text .lead { margin-top: 24px; }
.proof {
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.stat { padding-block: 16px; }
.stat + .stat { border-top: 1px solid var(--hairline); }
.stat:last-child { padding-bottom: 0; }
.stat__num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 44px;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.stat__text {
  margin-top: 4px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
}
/* Hero reveal (js/main.js). reveal-pending is set by the inline script in
   <head> and always cleared within 1200ms. */
.reveal-pending [data-reveal],
.reveal-pending [data-reveal-follow] { visibility: hidden; }
/* SplitText line masks: extend the clip box down so descenders (y, g) are
   not cut off. The negative margin cancels it, and flow-root stops that
   margin collapsing out of the h1, so the layout is unchanged. */
[data-reveal="lines"] { display: flow-root; }
.reveal-line-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; }
.countup__num { display: inline-block; text-align: right; }
@media (min-width: 1024px) {
  .hero { padding-top: 96px; }
  .hero__text { grid-column: 1 / span 7; }
  .proof { grid-column: 8 / span 5; align-self: start; padding: 32px; }
  .hero__grid { gap: 32px; }
}

/* ---------- How an engagement runs ---------- */
.how {
  position: relative;
  margin-top: 32px;
  padding-left: 24px; /* braid strip, mobile */
}
.braid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 100%;
  overflow: visible;
}
/* Braid strands (js/main.js). Decorative shapes: flat colour only. */
.braid path {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.braid__sage { stroke: var(--sage); }
.braid__gold { stroke: var(--gold); }
/* Casing behind the upper strand at a crossing, in the band's own colour. */
.braid .braid__casing { stroke: var(--paper-deep); stroke-linecap: butt; }
.braid__dot { fill: var(--gold); }
.steps { counter-reset: none; }
.step {
  padding-block: 16px;
  padding-left: 16px;
}
.step + .step { border-top: 1px solid var(--hairline); }
.step__num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.step h3 { margin-bottom: 4px; }
.step p { color: var(--ink-muted); }
@media (min-width: 1024px) {
  /* The braid runs across a reserved 56px band above the step row. */
  .how { padding-left: 0; padding-top: 56px; margin-top: 48px; }
  .braid { width: 100%; height: 56px; bottom: auto; }
  .braid path { stroke-width: 2.5px; }
  .braid .braid__casing { stroke-width: 6.5px; }
  .steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .step { padding: 0 24px; }
  .step + .step { border-top: 0; border-left: 1px solid var(--hairline); }
}

/* ---------- Example projects ---------- */
.areas {
  display: grid;
  gap: 48px;
  margin-top: 48px;
}
.area { display: grid; gap: 16px; align-content: start; }
.area h3 { margin-bottom: -8px; }
.area__promise { color: var(--ink-muted); }
/* Each card reads as "what happens", then a rule, then "what we measure".
   From 1024px, cards side by side share rows, so their titles, text and
   rules line up. */
.card {
  background: var(--paper-deep);
  border-radius: var(--radius-md);
  padding: 24px;
}
.card h4 { margin-bottom: 8px; }
.card__tandem { margin-bottom: 16px; }
.card__fact {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}
.card__facts {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.card__fact + .card__fact { margin-top: 8px; }
.card__label {
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 4px;
}
.card__label--measure { color: var(--sage-deep); }
.card__label--done { color: var(--gold-deep); }
@media (min-width: 1024px) {
  /* The areas sit side by side on one shared row grid (subgrid), so their
     titles, promises and each row of cards line up across the columns.
     Each area spans 2 rows (title, promise) plus 3 per card (title, text,
     facts): 2 + 3 × 3 cards = 11. If you change the number of areas or
     cards, update the column count and the span. Below 1024px the areas
     stack; three columns would be too narrow to read. */
  .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
  .area { grid-row: span 11; grid-template-rows: subgrid; }
  .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

/* Tabbed view (js/main.js adds .areas--tabbed and the tab bar). One area
   shows at a time. All areas share one grid cell, so the section keeps the
   height of the tallest and nothing below jumps when you switch. Without
   JavaScript the layout above is used and every area shows. */
.area-tabs {
  display: flex;
  margin-top: 40px;
  border-bottom: 1px solid var(--hairline);
}
.area-tabs button {
  flex: 1 1 0;
  min-height: 48px;
  margin-bottom: -1px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-muted);
  font: 600 15px/20px var(--font-sans);
  text-align: center;
  cursor: pointer;
}
.area-tabs button:hover { color: var(--ink); }
.area-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--sage-deep);
}
.areas--tabbed { margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
.areas--tabbed .area { position: relative; grid-area: 1 / 1; }
.areas--tabbed .area:not(.is-active) { visibility: hidden; }
/* The tab names the area, so its heading is kept for screen readers only. */
.areas--tabbed .area h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .area-tabs { gap: 8px; }
  .area-tabs button { flex: 0 0 auto; padding-inline: 20px; font-size: 17px; line-height: 24px; }
}
@media (min-width: 1024px) {
  /* The active area's three cards sit side by side, rows aligned. */
  .areas--tabbed .area {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    column-gap: 32px;
  }
  .areas--tabbed .area__promise { grid-column: 1 / -1; }
}

/* ---------- For sponsors ---------- */
.sponsors { display: grid; gap: 32px; }
.sponsors__rows { border-top: 1px solid var(--hairline); }
.row {
  padding-block: 24px;
  border-bottom: 1px solid var(--hairline);
}
.row h3 { margin-bottom: 4px; }
@media (min-width: 1024px) {
  .sponsors__intro { grid-column: 1 / span 5; }
  .sponsors__rows { grid-column: 7 / span 6; align-self: start; }
  .row:first-child { padding-top: 24px; }
}

/* ---------- Who you work with ---------- */
.about { display: grid; gap: 32px; }
.headshot {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--paper-deep); /* shows while the photo loads */
}
.about__text .body-text + .body-text { margin-top: 16px; }
@media (min-width: 1024px) {
  /* The photo stays in view while the (longer) bio scrolls past it. */
  .headshot { grid-column: 1 / span 4; max-width: none; position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
  .about__text { grid-column: 6 / span 7; align-self: start; }
}

/* ---------- Quote ---------- */
.section--quote { padding-block: 0; border-top: 0; }
.quote {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: 48px;
  text-align: center;
}
.quote blockquote p {
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  text-wrap: balance;
}
.quote figcaption {
  margin-top: 16px;
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* Quotes that follow each other share one pair of rules, with no line between. */
.quote:has(+ .quote) { border-bottom: 0; padding-bottom: 0; }
.quote + .quote { border-top: 0; padding-top: 40px; }
.section--quote + .section { border-top: 0; }
@media (min-width: 1024px) {
  .quote { padding-block: 64px; }
  .quote + .quote { padding-top: 48px; }
}

/* ---------- Contact ---------- */
/* Centred: the text, the width-capped lead, and the row of actions. */
.contact { text-align: center; }
.contact .lead { margin: 16px auto 0; }
.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.contact__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-variant-numeric: tabular-nums;
}
.contact__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .contact__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px));
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.footer-mark { width: 40px; height: 40px; flex: none; }
.site-footer__name { flex: 1 1 auto; }
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
.theme-toggle button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--sage-deep);
  color: var(--on-sage);
}
#built-note { flex-basis: 100%; }
#built-note:empty { display: none; }

@media print {
  .site-nav { position: static; }
  .theme-toggle, .skip-link { display: none !important; }
}

/* ---------- 404 ---------- */
.not-found { border-top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.not-found__link { margin-top: 24px; }
.not-found__link a { display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Digital business card (card.html) ---------- */
/* The card fills the visible screen (dvh accounts for Safari's toolbars)
   and the QR code takes whatever height is left, so nothing scrolls. On a
   screen too short for a reliable QR (under 150px), the card keeps its
   minimum height and the page scrolls instead. */
.card-page {
  --card-pad: 12px;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(var(--card-pad), env(safe-area-inset-top, 0px)) var(--card-pad) max(var(--card-pad), env(safe-area-inset-bottom, 0px));
}
.bcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  height: calc(100vh - 2 * var(--card-pad));
  height: calc(100dvh - 2 * var(--card-pad) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: 520px;
  max-height: 860px;
  padding: 20px 20px 8px;
  text-align: center;
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
}
.bcard > * { flex: none; }
.bcard__brand { display: inline-flex; align-items: center; min-height: 40px; }
.bcard .lockup { width: 156px; }
.bcard__name {
  margin-top: 10px;
  font-size: clamp(32px, 5dvh, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.bcard__role {
  margin-top: 4px;
  font: var(--text-label);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.bcard__tagline {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}
/* One compact row per contact line, icon then value. */
.bcard__lines { width: 100%; margin-top: 14px; border-top: 1px solid var(--hairline); }
.bcard__lines li { border-bottom: 1px solid var(--hairline); }
.bcard__lines a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  color: var(--ink);
  font-size: clamp(14px, 4.2vw, 16px);
  line-height: 20px;
  text-decoration: none;
}
.bcard__lines a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bcard__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--sage-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The QR area grows into the remaining height; the code is as large as fits. */
.bcard__qr {
  flex: 1 1 0;
  min-height: 150px;
  width: 100%;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.bcard__qr svg {
  display: block;
  width: auto;
  height: min(100cqh - 28px, 100cqw, 272px);
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  shape-rendering: crispEdges;
}
.bcard__qr .qr-bg { fill: var(--qr-paper); }
.bcard__qr .qr-ink { fill: var(--qr-ink); }
/* Tap the code to fill the screen (js/card.js): easier to scan on a small
   phone or from further away. */
.bcard__qr-zoom {
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  cursor: zoom-in;
}
.bcard__qr.is-zoomed {
  position: fixed;
  inset: 0;
  z-index: 20;
  min-height: 0;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--qr-paper);
}
.bcard__qr.is-zoomed .bcard__qr-zoom { cursor: zoom-out; }
.bcard__qr.is-zoomed svg { height: min(100cqh - 64px, 100cqw - 32px, 560px); }
.bcard__qr.is-zoomed figcaption { display: block; font-size: 15px; color: var(--qr-ink); }
.bcard__qr figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
/* On a short screen the caption gives its space to the code. */
@container (max-height: 210px) {
  .bcard__qr svg { height: min(100cqh, 100cqw, 272px); }
  .bcard__qr figcaption { display: none; }
}
.bcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}
.bcard__actions .btn { flex: 1 1 140px; min-height: 46px; }
.bcard__actions button.btn { border: 0; cursor: pointer; }
.bcard__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  margin-top: 2px;
  font-size: 14px;
  color: var(--ink-muted);
}
.bcard__more a { display: inline-flex; align-items: center; min-height: 40px; }
/* Very short screens (iPhone SE in Safari): tighter, and the tagline goes. */
@media (max-height: 620px) {
  .bcard { padding-top: 14px; }
  .bcard .lockup { width: 132px; }
  .bcard__name { margin-top: 6px; font-size: 30px; }
  .bcard__tagline { display: none; }
  .bcard__lines { margin-top: 10px; }
  .bcard__lines a { min-height: 38px; }
  .bcard__qr { margin-top: 10px; min-height: 140px; }
  .bcard__actions { margin-top: 10px; }
  .bcard__actions .btn { min-height: 44px; }
  .bcard__more a { min-height: 36px; }
}

/* ---------- Case studies ---------- */
/* Opening a case study, the card grows into the page's header panel (they
   share a view-transition-name), and Back reverses it. Browsers without
   cross-page view transitions simply change page. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-group(*) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* A card with a case study: a gold rule along the top and a gold tag. The
   rule is painted, not a border, so the card keeps its size and alignment. */
.card--case {
  position: relative;
  background:
    linear-gradient(var(--gold), var(--gold)) top / 100% 3px no-repeat,
    var(--paper-deep);
}
.card--case::before {
  content: "Case study";
  position: absolute;
  top: 16px;
  right: 16px;
  font: var(--text-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.card--case h4 { padding-right: 6.5em; }
.card__link { color: inherit; text-decoration: none; }
/* The title link covers the whole card, so a tap anywhere opens it. */
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card--case:has(.card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.card__more {
  margin-top: 12px;
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
@media (hover: hover) {
  .card--case { transition: transform 0.2s ease; }
  .card--case:hover { transform: translateY(-2px); }
  .card--case:hover .card__more { text-decoration: underline; text-underline-offset: 3px; }
}

/* The case study page. */
.case-hero {
  padding-block: 40px 48px;
  background: var(--paper-deep);
}
.case-hero__back { margin-bottom: 16px; }
.case-hero__back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.case-hero__back a:hover { text-decoration: underline; }
.case-hero .lead { margin-top: 20px; }
.case-results { border-top: 0; }
.case-results__list { display: grid; }
.case-story__grid { display: grid; gap: 40px; }
.case-story h2 { margin-bottom: 8px; font-size: 24px; line-height: 30px; }
@media (min-width: 768px) {
  .case-results__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .case-results .stat + .stat { border-top: 0; border-left: 1px solid var(--hairline); padding-left: 32px; }
  .case-results .stat:last-child { padding-bottom: 16px; }
}
@media (min-width: 1024px) {
  .case-hero { padding-block: 64px 72px; }
  .case-story__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
}