/* Components — Figma homepage 1322:20808. Values from tokens.css only. */

/* === NAV (1322:20893) — fixed === */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  width: var(--page-w);
  max-width: 100%;                 /* below 1440 the fixed bar must fit the window, or "04 Resume" sits off-screen */
  height: var(--nav-h);
  margin: 0 auto;
  padding: var(--sp-16) var(--page-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--c-bg);
}
.nav__logo { position: relative; display: block; flex: none; width: var(--nav-seal); height: var(--nav-seal); color: var(--c-brand-paper); }   /* the full UR. seal (owner 2026-10-10) */
/* Figma 1322:20894: 40×40 frame; artwork (Subtract) is 42×42 at -1,-1 */
.nav__logo svg { display: block; width: 100%; height: 100%; }
.nav__logo .seal-dot { fill: var(--c-brand); }   /* the full stop: brand yellow; ring spins with scroll (js/nav-seal.js) */
@media (max-width: 767.98px) { .nav__logo { width: var(--nav-seal-phone); height: var(--nav-seal-phone); } }
.nav__list { display: flex; gap: var(--sp-37); }
.nav__item { display: flex; flex-direction: column; gap: var(--sp-5); white-space: nowrap; }
.nav__label {
  font-family: var(--font-figtree);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-auto);
  color: var(--c-white);
}
/* hover (brand sweep 2026-10-10): a yellow underline draws in under the label (was: number turns blue) */
.nav__label { background: linear-gradient(var(--c-brand), var(--c-brand)) 0 100% / 0 var(--bs-underline) no-repeat; transition: background-size var(--bs-dur-line) ease; }
.nav__item:not(.nav__item--active):hover .nav__label, .nav__item:not(.nav__item--active):focus-visible .nav__label { background-size: 100% var(--bs-underline); }
.nav__item--active .nav__label { color: var(--c-brand); }   /* active item: brand yellow (owner 2026-10-10; Figma blue) */
/* === SECTION HEAD (title + sub-label + line) === */
.section { position: relative; background: var(--c-bg); }
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  height: var(--title-block-h);
}
.section-title {
  font-family: var(--font-figtree);
  font-weight: var(--fw-light);
  font-size: var(--fs-r-display);  /* 138 at >= 1190 */
  line-height: var(--lh-auto);
  color: var(--c-white);
  white-space: pre;
}
.section-title em { font-style: italic; font-weight: var(--fw-semibold); }
.section-title--reviews em { letter-spacing: var(--ls-reviews); }
.section-sub { display: flex; align-items: center; gap: var(--sp-40); }
.section-sub__label {
  font-family: var(--font-glegoo);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  line-height: var(--lh-auto);
  text-transform: uppercase;
  color: var(--c-grey-787878);
  white-space: pre;
}
.section-sub__line { flex: 1; height: var(--bw-1); background: var(--c-grey-1b1b1c); }

/* === HERO (1322:20809) === */
.hero { height: var(--hero-h); overflow: hidden; }
.hero__text {
  position: absolute;
  left: var(--hero-text-x);
  top: var(--hero-text-y);
  width: var(--hero-text-w);
  font-weight: var(--fw-medium);
  font-size: var(--fs-82);
  line-height: var(--lh-hero);
  color: var(--c-grey-8e8e8e);
}
.hero__para { display: block; }
.hero__para:first-child { margin-bottom: var(--hero-para-gap); }
.hero__text .hl { color: var(--c-grey-e6e9f3); }

/* Scroll cue (1322:20827) — fades out on first scroll */
.scroll-cue {
  position: absolute;
  left: var(--cue-x);
  top: var(--cue-y);
  width: var(--cue-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity var(--dur-cue) var(--ease-out);
}
.scroll-cue.is-hidden { opacity: 0; }
.scroll-cue__label {
  height: var(--cue-label-h);
  font-family: var(--font-glegoo);
  font-weight: var(--fw-bold);
  font-size: var(--fs-8);
  line-height: var(--lh-scroll);
  letter-spacing: var(--ls-scroll);
  text-transform: uppercase;
  color: var(--c-grey-bcbcbc);
  white-space: nowrap;
}
.scroll-cue svg { width: var(--icon-24); height: var(--icon-24); color: var(--c-grey-4b4c4d); }
@media (prefers-reduced-motion: reduce) { .scroll-cue { display: none; } }

/* === CASE STUDIES (1322:20828) === */
.cases { padding: 0 var(--page-margin) var(--sp-160); display: flex; flex-direction: column; gap: var(--sp-80); }
.cases__row { display: flex; align-items: center; gap: var(--sp-57); }

.timeline {
  width: var(--tl-col-w);
  height: var(--tl-col-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-48);
}
.timeline__item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.timeline__logo { width: var(--icon-40); height: var(--icon-40); border-radius: var(--r-8); object-fit: cover; }
.timeline__logo--verdance { background: var(--c-verdance-bg); color: var(--c-verdance-fg); }
.timeline__year, .timeline__tag {
  font-family: var(--font-glegoo);
  font-weight: var(--fw-bold);
  line-height: var(--lh-auto);
  text-transform: uppercase;
  color: var(--c-grey-787878);
}
.timeline__year { font-size: var(--fs-16); }
.timeline__dates { display: flex; flex-direction: column; align-items: center; }
.timeline__dates .timeline__year { height: var(--tl-text-h); line-height: var(--tl-text-h); }   /* Figma fixed-height box, text centred */
.timeline__tag { font-size: var(--fs-10); height: var(--tl-text-h); }
.timeline__line { width: var(--bw-1); background: var(--c-grey-2c2c2d); }
.timeline__line--a { height: var(--tl-line-a); }
.timeline__line--b { height: var(--tl-line-b); }
.timeline__line--c { height: var(--tl-line-c); }
.timeline__line--d { height: var(--tl-line-d); }

.cases__list { display: flex; flex-direction: column; gap: var(--sp-70); width: var(--cs-img-w-wide); }
.cs-card { display: flex; flex-direction: column; gap: var(--sp-16); width: var(--cs-card-w); }
.cs-card__media { position: relative; width: var(--cs-card-w); height: var(--cs-img-h); }
.cs-card__media--clip { overflow: hidden; }
.cs-card__media img { position: absolute; left: 0; top: 0; }
.cs-card__media img { border-radius: var(--r-media); }   /* all case-study card images (Figma: 16 on two, 0 on two -> 16 for all) */
.cs-card__media .cs-card__hover { opacity: 0; transition: opacity var(--dur-card) var(--ease-out); }
.cs-card:hover .cs-card__hover, .cs-card:focus-visible .cs-card__hover { opacity: 1; }
.cs-card__bar {
  height: var(--cs-bar-h);
  padding: var(--sp-8);
  border-radius: var(--r-12);
  background: var(--g-title-bar);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cs-card__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-auto);
  text-transform: uppercase;
  color: var(--c-white);
}
.cs-card__title--italic { font-style: italic; }

/* === ARTICLES (1322:20851): the section (the old article cards are gone; the index is css/articles-index.css) === */
.articles { padding: 0 var(--page-margin) var(--sp-160); display: flex; flex-direction: column; gap: var(--sp-80); }

/* === PLAYGROUND (1322:20865) — group hover === */
.playground { padding: 0 var(--page-margin) var(--sp-160); display: flex; flex-direction: column; gap: var(--sp-78); }
.pg-grid { display: flex; gap: var(--sp-16); }
.pg-col { display: flex; flex-direction: column; gap: var(--sp-16); }
.pg-col--1 { width: var(--pg-col-1); }
.pg-col--2 { width: var(--pg-col-2); }
.pg-col--3 { width: var(--pg-col-3); }
.pg-item { position: relative; border-radius: var(--r-16); overflow: hidden; }
.pg-item--offset { margin-left: var(--pg-offset-x); }
.pg-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-black-70);
  transition: opacity var(--dur-hover) var(--ease-out);
}
.pg-grid:hover .pg-item::after { opacity: 0; }

/* === REVIEWS (1322:20872) — group hover === */
.reviews { padding: 0 var(--page-margin); display: flex; flex-direction: column; gap: var(--sp-80); }
.rv-grid { display: flex; flex-direction: column; gap: var(--sp-24); }
.rv-row { display: flex; gap: var(--sp-16); }
.rv-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  height: var(--rv-h);
  padding: var(--sp-24);
  border-radius: var(--r-16);
  background: var(--c-grey-1a1a1b);
  opacity: var(--op-review);
  transition: opacity var(--dur-hover) var(--ease-out);
}
.rv-card--s { width: var(--rv-w-s); }
.rv-card--l { width: var(--rv-w-l); }
.rv-grid:hover .rv-card { opacity: 1; }
.rv-card__text {
  height: var(--rv-text-h);
  font-size: var(--fs-16);
  line-height: var(--lh-review);
  color: var(--c-white);
}
.rv-card__person { display: flex; gap: var(--sp-12); }
.rv-card__avatar { width: var(--icon-40); height: var(--icon-40); border-radius: var(--r-16); flex: none; }
.rv-card__avatar--icon { color: var(--c-grey-fafbff); }
.rv-card__who { display: flex; flex-direction: column; gap: var(--sp-4); }
.rv-card__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: var(--lh-auto);
  text-transform: capitalize;
  color: var(--c-white);
}
.rv-card__role {
  font-size: var(--fs-14);
  line-height: var(--lh-auto);
  text-transform: capitalize;
  color: var(--c-grey-8e8e8e);
}

/* === FOOTER (1322:20879) === */
.footer { position: relative; margin-top: var(--sp-80); padding: 0 var(--page-margin) var(--sp-80); display: flex; flex-direction: column; gap: var(--sp-80); }
.footer .section-title { color: var(--c-grey-1e1e1e); }
.footer .section-title em { font-weight: var(--fw-bold); }
.social { display: flex; gap: var(--sp-12); align-self: center; }
.social__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-48);
  height: var(--icon-48);
  border-radius: var(--r-24);
  background: var(--g-social);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-464646);
  color: var(--c-grey-dddeea);
}
.social__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-24);
  background: var(--g-social-hover);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-464646);
  opacity: 0;
  transition: opacity var(--dur-social) var(--ease-out);
}
.social__link:hover::before, .social__link:focus-visible::before { opacity: 1; }
.social__link svg { position: relative; width: var(--icon-24); height: var(--icon-24); }

.to-top {
  position: absolute;
  right: var(--page-margin);       /* = Figma x 1352 on the 1440 frame */
  top: var(--top-btn-y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-48);
  height: var(--icon-48);
  border-radius: var(--r-24);
  background: var(--c-grey-232324);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-272729);
  color: var(--c-white);
}
.to-top svg { width: var(--icon-24); height: var(--icon-24); }

/* === BUTTON (set 2646:140900: Default 697:6748, Hover 2646:140901 — instant) === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-24);
  background: var(--c-btn-bg);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border), var(--shadow-btn);
  font-family: var(--font-figtree);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-20);
  color: var(--c-grey-e6e9f3);
  white-space: nowrap;
}
/* SECONDARY button (owner 2026-10-10): DEFAULT = the original dark pill (Figma 697:6748 colours: --c-btn-bg, 1 px
   --c-btn-border, light text), Figtree Medium 16 / 44 tall from 768 up (phone keeps its earlier size). HOVER / keyboard
   focus on pointer devices only = Figma 3215:40572: --c-brand-20 fill, 1 px brand border, white text, lift 2 px.
   Touch: always the default (no sticky hover). The yellow PRIMARY buttons override this (case-study.css); the Team
   Workspace image viewer's buttons are case-study content and keep their original look (Figma 2646:140900 / 140901). */
.btn:not(.tw-viewer__btn) {
  min-height: var(--btn-h); padding: 0 var(--btn-pad-x);
  background: var(--c-btn-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border), var(--shadow-btn);
  font-weight: var(--fw-medium); font-size: var(--btn-fs); color: var(--c-grey-e6e9f3);
  transition: background-color var(--dur-btn) ease, box-shadow var(--dur-btn) ease, color var(--dur-btn) ease, transform var(--dur-btn) ease;
}
@media (hover: hover) {
  .btn:not(.tw-viewer__btn):hover, .btn:not(.tw-viewer__btn):focus-visible {
    background: var(--c-brand-20); box-shadow: inset 0 0 0 var(--bw-1) var(--c-brand), var(--shadow-btn); color: var(--c-white); transform: translateY(-2px); }
}
@media (max-width: 767.98px) { .btn:not(.tw-viewer__btn) { min-height: 0; padding: var(--btn-pad-phone); font-size: var(--btn-fs-phone); } }
.tw-viewer__btn:hover, .tw-viewer__btn:focus-visible {
  background: var(--c-btn-bg-hover);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border-hover), var(--shadow-btn);
}
@media (prefers-reduced-motion: reduce) { .btn:not(.tw-viewer__btn):hover, .btn:not(.tw-viewer__btn):focus-visible { transform: none; } }
.btn svg { width: var(--icon-16); height: var(--icon-16); flex: none; }
.btn svg.btn__icon--next { transform: rotate(180deg); }
/* the site's one arrow set (owner 2026-10-13, tools/gen/arrows.py): every button and pill uses these 16 px, 1.5-stroke icons,
   8 px from the label, vertically centred; never a typed arrow character */
.ico-arrow { display: inline-block; width: var(--icon-16); height: var(--icon-16); flex: none; vertical-align: middle; margin-left: var(--sp-8); }
:is(.btn, .idv-cta, .idv-inkbtn, .ax-pill, .pgw-card__go, .cs-pill__visit) { align-items: center; }
:is(.btn, .idv-cta, .idv-inkbtn, .cur-pill) .ico-arrow { margin-left: 0; }   /* flex buttons already set the 8 px gap */

/* =====================================================================
   RESPONSIVE — shared (homepage + About). >= 1190 unchanged.
   ===================================================================== */

/* Phone nav (decision D1 = B): "Menu" button + full-width panel. Hidden at >= 768. */
.nav__menu { display: none; }
/* v4.5.1b (owner 2026-10-14, option A "words only"): the desktop / tablet nav is four words, no numbers, no arrows; all four on one
   baseline, 36 px from the end of one word to the start of the next, right edge unchanged. The ↗ svg stays in the shared markup
   only for the phone menu (shown by its rule below 768); nothing here draws it. LinkedIn / Resume say "(opens in a new tab)" to
   screen readers (visually hidden). */
.nav__item { flex-direction: row; align-items: baseline; gap: var(--sp-4); }
.nav__ext { display: none; }
@media (min-width: 768px) {
  .nav__list { align-items: baseline; gap: var(--sp-36); }
}
@media (max-width: 767.98px) {
  .nav__menu {
    display: inline-flex;
    align-items: center;
    gap: var(--nav-menu-gap);
    height: var(--tap);
    padding: 0 var(--sp-16);
    border-radius: var(--r-24);
    background: var(--c-btn-bg);
    box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--c-grey-e6e9f3);
  }
  .nav__menu svg { width: var(--icon-16); height: var(--icon-16); flex: none; }
  .nav__menu-open, .nav__menu-close { display: inline-flex; align-items: center; gap: var(--nav-menu-gap); }
  .nav__menu-close, .nav.is-open .nav__menu-open { display: none; }
  .nav.is-open .nav__menu-close { display: inline-flex; }
  .nav__menu:focus-visible { outline: var(--bw-2) solid var(--c-blue); outline-offset: var(--sp-2); }

  .nav__panel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-h);
    bottom: 0;
    padding: var(--sp-8) var(--page-margin) var(--sp-24);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--menu-rise) * -1));
    transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out), visibility 0s linear var(--dur-menu);
  }
  .nav.is-open .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out), visibility 0s linear 0s;
  }
  .nav__panel .nav__list { flex-direction: column; gap: 0; }
  .nav__panel .nav__list li .nav__item {
    width: auto;
    height: var(--nav-panel-row-h);
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-16);
    padding-top: var(--sp-12);
    box-shadow: inset 0 calc(var(--bw-1) * -1) 0 var(--c-grey-1b1b1c);
  }
  .nav__panel .nav__label { font-size: var(--fs-nav-panel); }
  /* arrow sits on the baseline, then moves down so its centre meets the word's visual centre (half its 0.725em ascent) */
  .nav__panel .nav__ext { display: inline-block; align-self: baseline; width: var(--icon-24); height: var(--icon-24); color: var(--c-white);
    transform: translateY(calc(var(--icon-24) / 2 - var(--fs-nav-panel) * var(--nav-ext-mid))); }
  .nav__item--active .nav__ext { color: var(--c-brand); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .nav__panel, .nav.is-open .nav__panel { transform: none; transition: none; }
}

/* Section sub-label: may wrap on phone (spaces kept) */
@media (max-width: 767.98px) {
  .section-title { white-space: pre-line; }       /* never below 40 px: long titles wrap instead of shrinking */
  .section-sub__label { white-space: pre-wrap; }
}

/* Footer (homepage + About): back-to-top moves to the bottom-right, level with the socials */
@media (max-width: 1189.98px) {
  .footer .to-top { left: auto; right: var(--page-margin); top: auto; bottom: var(--sp-80); }
}

/* Touch screens (hover: none): hover highlights off; hover REVEALS shown by default (owner 2026-10-04). Focus styles stay. */
@media (hover: none) {
  .nav__item:hover:not(:focus-visible) .nav__label { background-size: 0 var(--bs-underline); }   /* touch: no sticky hover underline */
  .cs-card__media .cs-card__hover { opacity: 1; }                     /* reveal: the bright hover image */
  .pg-item::after, .pg-grid:hover .pg-item::after { opacity: 0; }    /* no dimming */
  .rv-card, .rv-grid:hover .rv-card { opacity: 1; }                   /* no dimming */
  .social__link:hover:not(:focus-visible)::before { opacity: 0; }
  .tw-viewer__btn:hover:not(:focus-visible) { background: var(--c-btn-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border), var(--shadow-btn); }
}
@media (max-width: 767.98px) { .footer .section-head { height: auto; } }

/* =====================================================================
   HOMEPAGE — fluid (build 2). At 1440 every value below computes to the
   Figma px value; 1190–1439 scales from those numbers (no sideways scroll).
   100cqw = page width (.page--home is the container).
   ===================================================================== */
.page--home { width: 100%; max-width: var(--page-w); container-type: inline-size; }
.page--home {
  --hm-content: calc(100cqw - 2 * var(--page-margin));
  --hm-list: calc(var(--hm-content) - var(--tl-col-w) - var(--sp-57));
}

/* Hero: text keeps its Figma inset (80) and line breaks; the type scales down with the width below 1440 */
.page--home .hero__text {
  width: calc(100% - 2 * var(--hero-text-x));
  font-size: min(var(--fs-82), calc((100cqw - 2 * var(--hero-text-x)) * var(--n-82) / var(--n-hero-w)));
}
.page--home .scroll-cue { left: calc(50% + var(--cue-x) - var(--page-w) / 2); }

/* Section titles: always fit the content width */
.page--home .section-title { font-size: min(var(--fs-r-display), calc(var(--hm-content) * var(--n-138) / var(--n-content))); }

/* Case studies: list takes the remaining width; timeline lines scale with the cards */
.page--home .cases__list { width: auto; flex: 1 1 0; min-width: 0; }
.page--home .cs-card { width: min(var(--cs-card-w), 100%); }
.page--home .cs-card__media { width: 100%; height: auto; aspect-ratio: var(--cs-img-ar); }
.page--home .cs-card__media img { width: calc(100% * var(--iw, var(--n-cs-img)) / var(--n-cs-img)); height: 100%; max-width: none; }
.page--home .cs-card__bar { height: auto; min-height: var(--cs-bar-h); }
.page--home .cs-card__title { font-size: var(--fs-r-body-24); }
.page--home .timeline { height: calc(var(--hm-list) * var(--n-tl-col-h) / var(--n-list)); }
.page--home .timeline__line--a { height: calc(var(--hm-list) * var(--n-tl-line-a) / var(--n-list)); }
.page--home .timeline__line--b { height: calc(var(--hm-list) * var(--n-tl-line-b) / var(--n-list)); }
.page--home .timeline__line--c { height: calc(var(--hm-list) * var(--n-tl-line-c) / var(--n-list)); }
.page--home .timeline__line--d { height: calc(var(--hm-list) * var(--n-tl-line-d) / var(--n-list)); }
.cs-card__when { display: none; }

/* Playground: three columns in Figma proportions */
.page--home .pg-col--1 { width: calc((100% - 2 * var(--sp-16)) * var(--n-pg-1) / var(--n-pg-row)); }
.page--home .pg-col--2 { width: calc((100% - 2 * var(--sp-16)) * var(--n-pg-2) / var(--n-pg-row)); }
.page--home .pg-col--3 { width: calc((100% - 2 * var(--sp-16)) * var(--n-pg-3) / var(--n-pg-row)); }
.page--home .pg-item img { width: 100%; height: auto; }
.page--home .pg-item--offset { margin-left: calc(100% * var(--n-pg-offset) / var(--n-pg-3)); }

/* Reviews: Figma proportions; cards grow when the text needs more lines */
.page--home .rv-card--s { width: calc((100% - 2 * var(--sp-16)) * var(--n-rv-s) / var(--n-pg-row)); }
.page--home .rv-card--l { width: calc((100% - 2 * var(--sp-16)) * var(--n-rv-l) / var(--n-pg-row)); }
.page--home .rv-card { height: auto; min-height: var(--rv-h); }
.page--home .rv-card__text { height: auto; min-height: var(--rv-text-h); }

/* ---------- Tablet + phone (< 1190) ---------- */
@media (max-width: 1189.98px) {
  /* hero = content + spacing (no full-screen height); the scroll cue sits centred in the space below the text */
  .page--home .hero { height: auto; padding: var(--hm-hero-top) var(--page-margin) var(--hm-hero-bottom); }
  .page--home .hero__text { position: static; width: auto; font-size: var(--fs-r-hero); }
  .page--home .scroll-cue { top: auto; bottom: calc((var(--hm-hero-bottom) - var(--hm-cue-h)) / 2); left: calc(50% - var(--cue-w) / 2); }
  .page--home .cases, .page--home .articles, .page--home .playground { padding-bottom: var(--hm-sec-pad); gap: var(--hm-sec-gap); }
  .page--home .reviews { gap: var(--hm-sec-gap); }
  .page--home .section-head { height: auto; }
  /* Case studies: the timeline becomes a small label above each card (tablet + phone: a separate column can't stay level with cards whose bars wrap) */
  .page--home .timeline { display: none; }
  .page--home .cs-card { width: 100%; gap: var(--sp-12); }
  .cs-card__when { display: flex; align-items: center; gap: var(--sp-8); }
  .cs-card__when .timeline__logo { width: var(--hm-when-logo); height: var(--hm-when-logo); border-radius: var(--r-8); }
  .cs-card__when .timeline__logo--verdance { display: flex; align-items: center; justify-content: center; }
  .cs-card__when .timeline__logo--verdance svg { width: var(--hm-when-logo); height: var(--hm-when-logo); }
  .cs-card__when .timeline__dates { flex-direction: row; align-items: center; gap: var(--sp-8); }
  .cs-card__when .timeline__dates .timeline__year { height: auto; line-height: var(--lh-auto); }
  .cs-card__when .timeline__year, .cs-card__when .timeline__tag { font-size: var(--fs-r-min); height: auto; line-height: var(--lh-auto); }
  /* Playground: 2 columns, Figma order top-to-bottom */
  .page--home .pg-grid { display: block; columns: 2; column-gap: var(--sp-16); }
  .page--home .pg-col { display: contents; }
  .page--home .pg-item { break-inside: avoid; margin-bottom: var(--sp-16); }
  .page--home .pg-item--offset { margin-left: 0; }
  /* Reviews: 2 columns */
  .page--home .rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .page--home .rv-row { display: contents; }
  .page--home .rv-card--s, .page--home .rv-card--l { width: auto; min-width: 0; }
  .page--home .rv-card, .page--home .rv-card__text { min-height: 0; }
}

/* ---------- Phone (< 768) ---------- */
@media (max-width: 767.98px) {
  .page--home .hero { padding-top: var(--hm-hero-top-phone); padding-bottom: var(--hm-hero-bottom-phone); }
  .page--home .scroll-cue { bottom: calc((var(--hm-hero-bottom-phone) - var(--hm-cue-h)) / 2); }
  .page--home .cases, .page--home .articles, .page--home .playground { padding-bottom: var(--hm-sec-pad-phone); gap: var(--hm-sec-gap-phone); }
  .page--home .reviews { gap: var(--hm-sec-gap-phone); }
  .page--home .cases__list { gap: var(--hm-cards-gap-phone); }
  .page--home .pg-grid { columns: 1; }
  .page--home .rv-grid { grid-template-columns: 1fr; }
  .page--home .section-title { font-size: var(--fs-r-display); }   /* 40 px floor: long titles wrap */
}

/* Heading + card spacing (owner rule, all widths): stacked cards share one gap */
.rv-grid { gap: var(--sp-16); }
@media (max-width: 1189.98px) {
  .page--home :is(.cases__list, .rv-grid) { gap: var(--card-gap); }
}

/* === Tap areas (C1): at least 44 x 44 (--tap), invisible; elements larger than 44 keep their own size === */
:is(.btn, .nav__logo, .nav__list .nav__item) { position: relative; }
:is(.btn, .nav__logo, .nav__list .nav__item)::after { content: ""; position: absolute;
  inset: min(0px, calc((100% - var(--tap)) / 2)) min(0px, calc((100% - var(--tap)) / 2)); }

/* === 404 page (site/404.html): the homepage hero type in normal flow, the existing pill button below === */
.hero--nf { height: auto; padding: var(--hero-text-y) var(--hero-text-x) var(--sp-160); }
.hero--nf .hero__text, .page--home .hero--nf .hero__text { position: static; width: auto; }
.hero--nf .btn { margin-top: var(--sp-40); }


/* =====================================================================
   BRAND SWEEP (owner 2026-10-10; reference design/brand/brand-sweep-v4.html, "Branded").
   Yellow only as an accent; text on yellow is always --c-on-brand. Homepage + About + 404.
   ===================================================================== */
/* 1-2. section headings end with the yellow full stop; tag separators are small yellow ✦ */
.sec-dot { color: var(--c-brand); font-style: normal; font-weight: var(--fw-extrabold); }
.sec-star { color: var(--c-brand); font-size: var(--bs-star-fs); vertical-align: 0.15em; }

/* 3. timeline: a yellow line fills the existing line with scroll (js/work-flux.js sets --f); the year whose card
   is in view turns yellow and its icon gets a ring. Below 1190 the timeline is hidden (layout as before). */
.timeline__line { position: relative; }
.timeline__line::after { content: ""; position: absolute; left: 50%; top: 0; width: var(--bs-fill-w); height: 100%; margin-left: calc(var(--bs-fill-w) / -2);
  background: var(--c-brand); transform-origin: 0 0; transform: scaleY(var(--f, 0)); }
.timeline__item .timeline__logo { transition: box-shadow var(--dur-hover) var(--ease-out); }
.timeline__item.is-current .timeline__year { color: var(--c-brand); }
.timeline__item.is-current .timeline__logo { box-shadow: 0 0 0 var(--bs-ring) var(--c-brand); }
.timeline__tag { color: var(--c-brand); }   /* the "Concept" chip (timeline + phone year line) */

/* 4. case study cards: a yellow pill follows the cursor (pointer devices; also the case studies' Next Project card).
   .cur-pill, not .cs-pill: case-study.css has its own .cs-pill (the Verdance "Visit site" bar) */
.cur-pill { position: fixed; left: 0; top: 0; z-index: var(--z-hero-seal); pointer-events: none; display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--bs-pill-pad); border-radius: 999px; background: var(--c-brand); color: var(--c-on-brand);
  font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--bs-pill-fs); line-height: 1; white-space: nowrap;
  transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -50%) scale(0); transition: transform var(--bs-dur-pill) cubic-bezier(0.2, 0.8, 0.2, 1.2); }
.cur-pill.is-on { transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -50%) scale(1); }
@media (hover: hover) and (pointer: fine) { .page--home .cs-card, .cs-nextproj :is(.cs-nextproj__mock, .mta-next__mock) { cursor: none; } }
/* where the year sits above each card (< 1190: tablet + phone): every year in brand yellow (owner 2026-10-10);
   desktop timeline unchanged (current year yellow + ring, others grey) */
@media (max-width: 1189.98px) { .cs-card__when .timeline__year { color: var(--c-brand); } }
@media (hover: none), (pointer: coarse) { .cur-pill { display: none; } }

/* 7. reviews: yellow opening quote mark (style 1); avatars get a thin yellow ring */
.rv-card { height: calc(var(--rv-h) + var(--bs-q-h) + var(--sp-16)); }   /* room for the quote mark; text unchanged */
.rv-card__q { display: block; flex: none; width: var(--bs-q-w); height: var(--bs-q-h); color: var(--c-brand); }
.rv-card__q svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.rv-card__avatar { box-shadow: var(--bs-avatar-ring); }

/* 8. closing: full-width yellow band, near-black text, big black seal (ring spins: js/nav-seal.js) */
.footer.footer { margin-top: var(--sp-80); padding: var(--bs-foot-pad); padding-top: 0; gap: 0; color: var(--c-on-brand);
  background: var(--c-brand); box-shadow: 0 0 0 100vmax var(--c-brand); clip-path: inset(0 -100vmax); }
/* upper area = everything above the divider line (top padding + kicker + heading + the gap to the divider). The seal
   lives in it, FULLY visible (owner 2026-10-10): square, height = min(424, area - 64 px, width left by the heading),
   vertically centred -> always >= 32 px above the divider; right edge = the content right edge (back-to-top / nav). */
.fb-top { position: relative; padding: var(--bs-foot-top) 0 var(--bs-foot-gap); container-type: inline-size; }
.fb-seal-wrap { position: absolute; inset: 0; pointer-events: none; }
.fb-seal { position: absolute; right: 0; top: 50%; height: min(var(--bs-seal-fit), calc(100% - 2 * var(--bs-seal-gap))); width: auto; aspect-ratio: 1;
  transform: translateY(-50%); color: var(--c-on-brand); }
.fb-seal svg { display: block; width: 100%; height: 100%; }
.fb-kicker { position: relative; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--bs-kicker-fs); letter-spacing: var(--bs-kicker-ls); text-transform: uppercase; }
.footer .fb-title.section-title { position: relative; margin-top: var(--sp-24); color: var(--c-on-brand); white-space: normal;
  font-size: var(--bs-title-fs); line-height: var(--bs-title-lh); max-width: var(--bs-title-max); text-wrap: balance; }
.footer .fb-title.section-title em { font-weight: var(--fw-semibold); }
.footer .social { position: relative; align-self: auto; justify-self: start; }
.footer .social__link { width: var(--bs-social); height: var(--bs-social); border-radius: 50%; background: var(--c-on-brand); color: var(--c-brand);
  box-shadow: inset 0 0 0 var(--bw-2) var(--c-on-brand); transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.footer .social__link::before { content: none; }
.footer .social__link svg { width: var(--bs-social-icon); height: var(--bs-social-icon); }
/* footer social icons + back to top: ONE look (owner 2026-10-10): near-black circle, yellow icon; hover (pointer devices
   only, no sticky hover on touch) / keyboard focus = transparent fill, the near-black ring stays, icon turns near-black */
.footer .social__link:focus-visible, .footer .to-top:focus-visible { background: transparent; color: var(--c-on-brand); }
@media (hover: hover) { .footer .social__link:hover, .footer .to-top:hover { background: transparent; color: var(--c-on-brand); } }
.footer .social__link:focus-visible, .footer .to-top:focus-visible { outline-color: var(--c-on-brand); }
.fb-copy { justify-self: center; }
.fb-foot .to-top { justify-self: end; }
.fb-foot { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-12);
  padding-top: 18px; border-top: 1.5px solid var(--bs-foot-line); font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--bs-foot-fs); }
.footer .to-top { position: static; width: var(--bs-social); height: var(--bs-social); border-radius: 50%; background: var(--c-on-brand); color: var(--c-brand);
  box-shadow: inset 0 0 0 var(--bw-2) var(--c-on-brand); transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.footer .to-top svg { width: var(--bs-social-icon); height: var(--bs-social-icon); }
@media (max-width: 767.98px) {
  /* phone: the full seal below the heading, full opacity, right edge on the content edge */
  .fb-top { display: flex; flex-direction: column; }
  .fb-seal-wrap { position: static; order: 3; margin-top: var(--bs-seal-gap); }
  .fb-seal { position: relative; top: auto; height: var(--bs-seal-phone); margin-left: auto; transform: none; }
  .footer .fb-title.section-title { max-width: none; }
  .fb-foot { grid-template-columns: 1fr auto; grid-template-areas: "soc top" "copy copy"; row-gap: var(--sp-16); }
  .fb-foot .social { grid-area: soc; } .fb-foot .to-top { grid-area: top; } .fb-copy { grid-area: copy; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__label, .cur-pill, .footer .social__link, .footer .to-top { transition: none; }
}

/* nav: the dark bar spans the whole viewport; its content stays on the container / gutter (2026-10-10) */
.nav::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; background: var(--c-bg); pointer-events: none; }
/* safety net (as on the case-study pages): never a horizontal scrollbar from full-bleed layers */
html, body { overflow-x: clip; }
/* homepage "My Explorations." sub-label (owner 2026-10-13): each tag and the ✦ after it never break apart; lines break after a separator */
.section-sub__tag { white-space: pre; }

/* v4.5 (owner 2026-10-14, option A): every small spaced-capital label is a quiet sentence-case label. One list, one style
   (tokens --lbl-q-*): Figtree 500, 14 px (13 below 768), line height 1.4, no letter spacing, no capitals; each keeps its colour;
   coloured eyebrows at 600. Not here, on purpose: the ✦ sub-labels, the footer kicker, headings, buttons, the nav, UI recreations
   (phone screens, MindHYVE boards and component wall), arrow labels. ":root body" outranks the older per-page rules. */
:root body :is(.ax-meta, .timeline__year, .timeline__tag, .pgw__hint, .cs-label, .cs-nextproj__tag, .ed-slide figcaption,
  .idv-k, .idv-pill, .idv-a1__pill, .idv-board__cap, .idv-bignum__vs span, .idv-step__lbl, .idv-anno__k, .idv-pat__row > span, .idv-badge,
  .idv-lens__k, .idv-gpanel__fuel span, .idv-tbl th, .idv-rtag, .idv-bars__head span, .idv-bars__try, .idv-band__k, .idv-met__head span,
  .idv-q__rk, .idv-hardq__head span, .idv-endband__k,
  .mh-flow__stage .lbl, .cs-page--mh .hub > .k, .mh-pt__stage .pt-badge, .cs-page--mh .fg .l, .cs-page--mh .card > .k, .cs-page--mh .blk .l) {
  font-family: var(--font-figtree); font-weight: var(--lbl-q-fw); font-size: var(--lbl-q-fs); line-height: var(--lbl-q-lh);
  letter-spacing: 0; text-transform: none; }
:root body :is(.cs-label, .timeline__tag) { font-weight: var(--lbl-q-fw-c); }
@media (min-width: 1190px) { :root body .cs-label { margin-top: var(--lbl-q-cs-shift); } }

/* v4.5.2 (owner 2026-10-14): section eyebrows, the small coloured label straight above a section heading, back to capitals in
   Figtree: one shared .eyebrow rule (the class, plus the existing labels that are eyebrows). Figtree 600, 13 px (12 below 768),
   uppercase by CSS (the source stays sentence case), letter spacing 0.06em, line height 1.3, colour unchanged. Metadata, table
   headers, game panel labels, evidence tags, the Editor / Match the answer carousel captions (v4.5.2b: captions, not eyebrows) and UI
   recreations stay sentence case (v4.5). */
:root body :is(.eyebrow, .cs-label,
  .idv-hero__brand .idv-pill, .idv-opener > .idv-k, .idv-strip__k, .idv-whys > .idv-k, .idv-k--held, .idv-k--blind, .idv-band__k,
  .idv-subopener__k, .idv-q__rk, .idv-hardq__head span, .idv-k--tag, .idv-endband__k,
  .mh-flow__stage .lbl:not(.c), .mh-pt__stage .pt-badge) {
  font-family: var(--font-figtree); font-weight: var(--eyebrow-fw); font-size: var(--eyebrow-fs); line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase; }
@media (min-width: 1190px) { :root body .cs-label { margin-top: var(--eyebrow-cs-shift); } }