/* 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; width: var(--logo-size); height: var(--logo-size); }
/* Figma 1322:20894: 40×40 frame; artwork (Subtract) is 42×42 at -1,-1 */
.nav__logo img { position: absolute; left: var(--logo-art-offset); top: var(--logo-art-offset); width: var(--logo-art-size); height: var(--logo-art-size); }
.nav__list { display: flex; gap: var(--sp-37); }
.nav__item { display: flex; flex-direction: column; gap: var(--sp-5); white-space: nowrap; }
.nav__list li:nth-child(1) .nav__item { width: var(--nav-w-1); }
.nav__list li:nth-child(2) .nav__item { width: var(--nav-w-2); }
.nav__list li:nth-child(3) .nav__item { width: var(--nav-w-3); }
.nav__list li:nth-child(4) .nav__item { width: var(--nav-w-4); }
.nav__num {
  font-family: var(--font-glegoo);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-auto);
  color: var(--c-grey-afafaf);
}
.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);
}
.nav__item:hover .nav__num { color: var(--c-blue); }        /* Hover 1322:20967, instant */
.nav__item--active .nav__num { font-weight: var(--fw-bold); color: var(--c-blue); }  /* Active 1322:20970 */
.nav__item--active .nav__label { color: var(--c-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); }

.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) === */
.articles { padding: 0 var(--page-margin) var(--sp-160); display: flex; flex-direction: column; gap: var(--sp-80); }
.articles__row { display: flex; gap: var(--sp-16); }
.art-card {
  position: relative;
  display: block;
  width: var(--art-card-w);
  height: var(--art-card-h);
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--c-shade-solid);
}
.art-card__img {
  position: absolute;
  left: 0;
  top: var(--art-img-y);
  width: var(--art-card-w);
  height: var(--art-img-h);
  max-width: none;
  object-fit: cover;
  transition: left var(--dur-hover) var(--ease-out), top var(--dur-hover) var(--ease-out),
              width var(--dur-hover) var(--ease-out), height var(--dur-hover) var(--ease-out);
}
.art-card__shade {
  position: absolute;
  inset: 0;
  border-radius: var(--r-16);
  background: var(--c-shade-80);
  transition: background-color var(--dur-hover) var(--ease-out);
}
.art-card__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--art-bar-h);
  padding: var(--sp-12) var(--sp-16);
}
.art-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--icon-40);
  padding: var(--sp-8);
  border-radius: var(--r-12);
  background: var(--g-article-bar);
}
.art-card__title {
  width: var(--art-text-w);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-auto);
  text-transform: capitalize;
  color: var(--c-white);
}
.art-card__head svg { width: var(--icon-24); height: var(--icon-24); color: var(--c-white); flex: none; }
/* Hover 1188:117274 / 1322:32168 */
.art-card:hover .art-card__img, .art-card:focus-visible .art-card__img {
  left: var(--art-img-hover-x);
  top: var(--art-img-hover-y);
  width: var(--art-img-hover-w);
  height: var(--art-img-hover-h);
}
.art-card:hover .art-card__shade, .art-card:focus-visible .art-card__shade { background-color: var(--c-shade-20); }
.art-card:hover .art-card__head, .art-card:focus-visible .art-card__head { background: var(--g-article-bar-hover); }

/* === 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;
}
.btn:hover, .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);
}
.btn svg { width: var(--icon-16); height: var(--icon-16); flex: none; }
.btn svg.btn__icon--next { transform: rotate(180deg); }

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

/* Phone nav (decision D1 = B): "Menu" button + full-width panel. Hidden at >= 768. */
.nav__menu, .nav__ext { display: none; }
@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-blue); }
}
@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__num { color: var(--c-grey-afafaf); }
  .nav__item--active:hover .nav__num { color: var(--c-blue); }
  .cs-card__media .cs-card__hover { opacity: 1; }                     /* reveal: the bright hover image */
  .art-card:hover:not(:focus-visible) .art-card__img { left: 0; top: var(--art-img-y); width: var(--art-card-w); height: var(--art-img-h); }
  .art-card .art-card__shade { background-color: var(--c-shade-20); }  /* reveal: no dark overlay (Figma hover value) */
  .art-card .art-card__head { background: var(--g-article-bar-hover); }
  .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; }
  .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)); }
.cs-card__when { display: none; }

/* Articles: two equal cards; image crop and hover zoom in % of the card */
.page--home .art-card { width: auto; height: auto; flex: 1 1 0; min-width: 0; aspect-ratio: var(--art-card-ar); }
.page--home .art-card__img {
  top: calc(100% * var(--n-art-img-y) / var(--n-art-h));
  width: 100%;
  height: calc(100% * var(--n-art-img-h) / var(--n-art-h));
}
.page--home .art-card:hover .art-card__img, .page--home .art-card:focus-visible .art-card__img {
  left: calc(100% * var(--n-art-hover-x) / var(--n-art-w));
  top: calc(100% * var(--n-art-hover-y) / var(--n-art-h));
  width: calc(100% * var(--n-art-hover-w) / var(--n-art-w));
  height: calc(100% * var(--n-art-hover-h) / var(--n-art-h));
}
.page--home .art-card__title { width: auto; flex: 1 1 auto; min-width: 0; }

/* 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; }
  .page--home .art-card__bar { height: auto; padding-top: var(--sp-12); }
  .page--home .art-card__head { height: auto; min-height: var(--icon-40); }
  /* 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 .articles__row { flex-direction: column; }
  .page--home .art-card { flex: none; width: 100%; }
  .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 */
}
@media (hover: none) {   /* touch: articles keep their default crop */
  .page--home .art-card:hover:not(:focus-visible) .art-card__img {
    left: 0;
    top: calc(100% * var(--n-art-img-y) / var(--n-art-h));
    width: 100%;
    height: calc(100% * var(--n-art-img-h) / var(--n-art-h));
  }
}

/* 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, .articles__row, .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); }