/* ==========================================================================
   Homepage — the final design (index.html, body.site-ui site-dark no-grid-lines
   no-lines home-ui). Loaded LAST on the homepage (after the component
   stylesheets it adjusts and layout/site-ui.css — the site-wide design
   language shared with the Work and Project pages).

   Part 1 · base section styles (below, up to "Part 2").
   Part 2 · the final homepage layer — every rule is scoped to the homepage:
     • by a body class (.home-ui, .site-dark, .no-lines), or
     • by :where(.home-ui) — which adds no specificity, so a rule wins or loses
       exactly by its own selector + this file's place.
     Documented in DESIGN.md › Homepage.
   ========================================================================== */

/* --------------------------------------------------------------- About --- */

/* Measurements from the 1440px reference (relative to section top):
   eyebrow 0 · statement +48 (50/45px, 660 wide) · portrait frame 350×453 in col 4 ·
   caption +483 · result block +973 (700×480) · metrics +1523 (350×284 cells) */

.about__intro {
  align-items: start;
}

/* Statement: cols 1–2 with 20px column padding */
.about__statement {
  grid-column: 1 / span 2;
  padding-inline: var(--col-pad);
}

.about__statement > .eyebrow {
  display: flex;                   /* block-level: no inline line-box offset */
  width: max-content;
}

.about__text {
  display: block;
  margin-top: 30px;
  line-height: 45px;
  letter-spacing: -1.5px;
}

.about__caption {
  max-width: 320px;
  margin: 30px 0 0 auto;
  padding-inline: var(--col-pad);
  text-align: right;
}

/* Driven result: framed image cols 1–2 + statement cols 3–4, bottoms aligned */
.about__result {
  margin-top: 70px;
  align-items: end;
}

.about__result-media {
  grid-column: 1 / span 2;
  padding: var(--col-pad);
  background: var(--c-inverse);
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
}

/* Metrics: four 350×284 cells — cols 1 & 3, then 2 & 4 — hairline under each */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 70px;
}

.metric {
  display: flex;
  flex-direction: column;
  min-height: 284px;
  padding: 20px;
  box-shadow: inset 0 -1px 0 var(--line-on-dark);
}

.metric:nth-child(1) { grid-column: 1; grid-row: 1; }
/* staggered top / bottom, but read left to right in order 1 → 4 */
.metric:nth-child(2) { grid-column: 2; grid-row: 2; }
.metric:nth-child(3) { grid-column: 3; grid-row: 1; }
.metric:nth-child(4) { grid-column: 4; grid-row: 2; }

.metric__dots {
  display: flex;
  gap: 5px;
}

/* Reference: 5px white dots on a 10px pitch; unlit dots at 40% opacity */
.metric__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-on-inverse);
  opacity: 0.4;
}

.metric__dots i.is-on {
  opacity: 1;
}

.metric__value {
  margin-top: 30px;
  font-size: var(--fs-display-lg);
  font-weight: 700;
  line-height: 96px;
  letter-spacing: -0.03em;
}

.metric__title {
  margin-top: 30px;
}

.metric__desc {
  max-width: 220px;
  margin-top: 10px;
}

@media (max-width: 1199px) {
  .about__statement { grid-column: 1 / -1; }
  .about__caption { margin-left: 0; text-align: left; }
  .about__result-media { grid-column: 1 / -1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(n) { grid-column: auto; grid-row: auto; }
}

@media (max-width: 809px) {
  .about__text { line-height: 0.95; letter-spacing: -0.03em; }
  .metrics { grid-template-columns: 1fr; }
  .metric { min-height: 240px; }
  .metric__value { line-height: 0.85; }
}

/* ------------------------------------------------------------ Showreel --- */

.showreel {
  position: relative;
  z-index: 1;
  height: 380vh;
  margin-top: var(--section-gap);
}

.showreel__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.showreel__media {
  position: relative;
  width: calc(100% - var(--page-inset) * 2);   /* same width as the grid */
  height: calc(100svh - var(--header-h) - var(--gutter-y) * 2);   /* vertical edge space, unchanged by the 2026-10-24 side spacing */
  margin-top: var(--header-h);
  overflow: hidden;
  transform: scale(var(--s, 0.2));
  will-change: transform;
  box-shadow: 0 0 0 1px var(--line-on-dark);
}

.showreel__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--si, 1.8));
}

.showreel__word {
  position: absolute;
  top: 50%;
  z-index: 2;
  font-size: var(--fs-display-lg);
  margin-top: calc(var(--header-h) / 2);
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: var(--words, 1);
}

.showreel__word--left {
  right: 50%;
  transform: translate(calc(var(--wx, -1200px) - 14vw), -50%);
}

.showreel__word--right {
  left: 50%;
  transform: translate(calc(var(--wx-r, 1200px) + 14vw), -50%);
}

.showreel__hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  opacity: var(--hint, 1);
}

/* phones: the video starts at 60% (not 20%) and the scroll is shorter
   (220vh, not 380vh), so there's no long stretch of empty screen; the same
   grow animation (scroll-effects.js reads --reel-start) */
@media (max-width: 809px) {
  .showreel {
    --reel-start: 0.6;
    height: 220vh;
  }
}


/* --------------------------------------------------------------- Works --- */

/* Reference (1440): note 22px/24.2px, 400px wide, two-tone, short first-line indent;
   boxed CTA fills col 4 (350×64); the two share a bottom edge */
.works__foot {
  margin-top: 48px;                /* note top sits 142px below the last project image */
  align-items: end;
}

.works__note {
  grid-column: 1 / span 2;
  max-width: 440px;                /* 400px text + 20px column padding each side */
  line-height: 1.1;                /* proportional to title-lg (was 24.2px = 1.1 × 22px) */
  text-indent: 2em;
}

.works__cta {
  grid-column: 4 / span 1;
  width: 100%;
}

@media (max-width: 1199px) {
  .works__cta { grid-column: 1 / -1; max-width: 350px; margin-top: 30px; }
}

/* -------------------------------------------------------- Testimonials --- */

/* Heading block measured from the 1440px reference: 262px tall */

.testimonials__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  height: 262px;
  text-align: center;
}

/* Eyebrow with a 5px white dot, used by the reference section labels */
.eyebrow--dot {
  gap: 7px;
  align-items: center;
}

.eyebrow--dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-on-inverse);
}

.testimonials__title {
  line-height: 72px;
  letter-spacing: -2.4px;
}

.testimonials__title .t-muted {
  color: var(--c-muted);
}

/* Body: the split panel (components/testimonial-split.css) */

@media (max-width: 809px) {
  .testimonials__head { height: auto; padding-bottom: 50px; }
  .testimonials__title { line-height: 0.9; letter-spacing: -0.03em; }
}

/* ------------------------------------------------------------- Clients --- */

/* Reference (1440): block 70px under the heading, 376px tall ·
   col 1: quote + person (168px) then a 64px boxed CTA 30px below ·
   col 2: image holder — 310×248 image, 20px inset, centred on the hovered row ·
   cols 3–4: 47px rows (name 30/27px at +10), no separating lines */

.clients__body {
  align-items: stretch;
  margin-top: -20px;               /* section-head leaves 90px; reference gap is 70px */
}

.clients__quote {
  grid-column: 1 / span 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.clients__quote-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  min-height: 168px;
  padding-inline: var(--col-pad);
}

/* Hover image holder */
.clients__media {
  position: relative;
  grid-column: 2 / span 1;
  min-height: 376px;
  pointer-events: none;
}

.clients__frame {
  position: absolute;
  top: var(--row-y, 50%);
  left: var(--col-pad);
  right: var(--col-pad);
  height: 248px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  clip-path: inset(12% 0 12% 0);
  transition:
    top 0.55s var(--ease-out),
    opacity 0.35s var(--ease),
    transform 0.55s var(--ease-out),
    clip-path 0.55s var(--ease-out);
  box-shadow: 0 0 0 1px var(--line-on-dark);
}

.clients__body.is-hovering .clients__frame {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  clip-path: inset(0 0 0 0);
}

.clients__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s var(--ease);
}

.clients__img.is-swapping,
.clients__frame.is-swapping .clients__img {
  opacity: 0;
}

/* video covers (.mp4) play in the same frame, over the image */
.clients__video { position: absolute; inset: 0; display: none; }
.clients__frame.is-video .clients__video { display: block; }
.clients__frame.is-video img.clients__img { visibility: hidden; }

/* each row is a link to its project (a.client): hand cursor, and the
   thumbnails' "View project" pill following the pointer while a row is
   hovered (modules/interactions.js) */
.clients__body > .client-cursor { position: fixed; z-index: 20; }
.clients__body.is-hovering > .client-cursor { transform: translate(-50%, -50%) scale(1); }

/* List: no lines, hovered name stays white, others fade to grey */
.client-list {
  grid-column: 3 / span 2;
  padding-inline: var(--col-pad);
}

.client {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  height: 47px;
  padding-top: 10px;
  cursor: pointer;                         /* each row is a link: the hand, as on the project thumbnails */
  transition: color 0.35s var(--ease);
}

.client__name {
  font-size: var(--fs-headline-md);
  font-weight: 400;
  line-height: 27px;
  letter-spacing: -0.02em;
}

.client-list:hover .client {
  color: var(--c-muted);
}

.client-list:hover .client:hover {
  color: var(--c-on-inverse);
}

@media (max-width: 1199px) {
  .clients__body { margin-top: 0; }
  .clients__quote { grid-column: 1 / -1; }
  .clients__media { display: none; }  /* touch screens: no hover image */
  .client-list { grid-column: 1 / -1; margin-top: 60px; }
}

@media (max-width: 809px) {
  .client { height: auto; padding-block: 8px; }
  .client__name { font-size: 22px; line-height: 1.1; }
}

/* ------------------------------------------------------------ Approach --- */

.approach {
  padding-block: 150px;
}

@media (max-width: 1199px) {
  .approach { padding-block: 100px; }
}

@media (max-width: 809px) {
  .approach { padding-block: 70px; }
}

/* -------------------------------------------------------------- Awards --- */

/* Reference (1440): heading +31 below the eyebrow, intro 44px under the heading ·
   list = 700px stack in cols 3–4, four 113px rows (20px padding) with lines on
   top/left/right of each row and the bottom of the last · "+" on the outer corners */

.awards__body {
  align-items: start;
}

.awards__head > .eyebrow {
  display: flex;
  width: max-content;
}

.awards__title {
  margin-top: 13px;
  line-height: 72px;
  letter-spacing: -2.4px;
}

.awards__intro {
  margin-top: 44px;
  max-width: 450px;
}

/* Solid ink background covers the page grid line at the centre of cols 3–4,
   so each award reads as one continuous row (as in the reference) */
.award-list {
  position: relative;
  grid-column: 3 / span 2;
  background: var(--c-inverse);
  color: var(--c-on-inverse);
}

.award {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  min-height: 113px;
  padding: 20px;
  box-shadow:
    inset 0 1px 0 var(--line-on-dark),
    inset 1px 0 0 var(--line-on-dark),
    inset -1px 0 0 var(--line-on-dark);
}

.award:last-of-type {               /* last-of-type: the corner marks are the list's last child */
  box-shadow:
    inset 0 1px 0 var(--line-on-dark),
    inset 1px 0 0 var(--line-on-dark),
    inset -1px 0 0 var(--line-on-dark),
    inset 0 -1px 0 var(--line-on-dark);
}

.award__name {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.award__index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: 18.2px;
  margin-top: 3px;                 /* optically centred on the 22px title */
}

.award__desc {
  flex: none;
  width: 250px;
  text-align: right;
}

@media (max-width: 1199px) {
  .award-list { grid-column: 1 / -1; margin-top: 60px; }
}

@media (max-width: 809px) {
  .award { flex-direction: column; }
  .award__desc { width: auto; text-align: left; }
  /* the heading's lines as close as every other section heading on phones
     (the fixed 72px above is the desktop line, too loose at 44px type) */
  .awards__title { line-height: 0.9; letter-spacing: -0.03em; }
}

/* ----------------------------------------------------------------- FAQ --- */

/* Reference (1440): eyebrow +30, heading +61, band +262 (lines top & bottom, full width),
   700px card on cols 2–3 with side lines and "+" corners, 80px rows (30px padding) with a
   line under every row except the last · foot row 71px below the band */

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  height: 262px;
  padding-top: 30px;
  text-align: center;
}

.faq__title {
  line-height: 72px;
  letter-spacing: -2.4px;
}

.faq__band {
  border-block: 1px solid var(--line-on-dark);
}

.faq__card {
  width: 50%;
  margin-inline: auto;
  border-top: 0;
  background: var(--c-inverse);
  box-shadow: inset 1px 0 0 var(--line-on-dark), inset -1px 0 0 var(--line-on-dark);
}

.faq__card > .corners {
  color: var(--c-on-inverse);
}

.faq__card .accordion__item {
  border-bottom: 1px solid var(--line-on-dark);
}

.faq__card .accordion__item:last-of-type {
  border-bottom: 0;
}

.faq__card .accordion__trigger {
  height: 79px;                    /* + 1px line = 80px row pitch, as in the reference */
  padding: 0 30px;                 /* text vertically centred → sits 30px from the top */
  font-size: var(--fs-title-md);
  line-height: 19.8px;
}

.faq__card .accordion__panel p {
  padding: 0 30px 30px;
}

/* Plain "+" icon (no circle), turns into "×" when open */
.faq__card .accordion__icon {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: none;
}

.faq__card .accordion__icon::before,
.faq__card .accordion__icon::after {
  width: 14px;
  height: 1.5px;
}

.faq__card .accordion__trigger:hover .accordion__icon {
  background: none;
  color: var(--c-on-inverse);
}

.faq__card .accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
}

.faq__card .accordion__item.is-open .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (max-width: 1199px) {
  .faq__card { width: 100%; }
}

@media (max-width: 809px) {
  .faq__head { height: auto; padding-bottom: 50px; }
  .faq__title { line-height: 0.9; letter-spacing: -0.03em; }
  .faq__card .accordion__trigger { height: auto; min-height: 72px; padding: 20px var(--col-pad); }
  .faq__card .accordion__panel p { padding: 0 var(--col-pad) 24px; }
}

/* ==========================================================================
   Part 2 · the final homepage layer
   ========================================================================== */

/* 0 · the page dark (#121212, body.site-dark — layout/site-ui.css): the
   hero's own dark and its glass shader settle into it too */
.site-dark .hl-hero {
  --hl-bg: var(--c-inverse);
  --hl-glass-base: var(--c-inverse-home);
}

/* The site-wide design language — page dark, no grid lines, no decorative
   lines, labels, buttons, headings, footer, cursor dot, loader — lives in
   layout/site-ui.css. Kept on purpose on this page: the How I Work staircase
   line and its tip, the FAQ +/− icon and question separators, the progress dots. */

/* 1 · hero sits under the header, like .hero */
:where(.home-ui) .page > .hl-hero {
  z-index: 1;
  margin-top: calc(var(--header-h) * -1);
}

/* desktop: badge, heading, buttons and the clients / award row as one stack,
   centred in the hero both ways (moved there by pages/home.js › centreHero);
   same type, sizes and animations. */
:where(.home-ui) .hs-hero-centre {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  /* centred in the space under the header: --hero-top under the nav,
     --hero-air under the clients row (values further down) */
  padding-top: calc(var(--header-h) + var(--hero-top));
  padding-bottom: var(--hero-air);
  text-align: center;
  pointer-events: none;                    /* the glass light still follows the cursor */
}

:where(.home-ui) .hs-hero-centre > * { pointer-events: auto; }

/* the clients / award row: centred as a row, each block's text left-aligned */
:where(.home-ui) .hs-hero-centre .hl-proof { justify-content: center; text-align: left; }

/* How I work (components/approach-grid.css): no "01/"
   step numbers in the stair cells — hidden, not removed, so the progress
   squares keep their place at the right — and the stage titles at
   --fs-headline-lg */
.home-ui .ag-step__index { visibility: hidden; }

/* the copy beside the heading: the Selected Work note style (.works__note) */
.home-ui .ag-copy--note {
  max-width: 400px;
  line-height: 1.1;                /* proportional to title-lg (was 24.2px = 1.1 × 22px) */
  text-indent: 2em;
  opacity: 1;                             /* always fully shown — no scroll-driven fade */
  transition: none;
}
.home-ui .ag-step__title {
  font-size: var(--fs-headline-lg);
  margin-bottom: 14px;                    /* the stage title kept close to its text (was 24px) */
}
.home-ui .ag-step__desc { margin-bottom: 12px; }   /* a little air under the text, above the stair line */

/* laptops (desktop width, ≤860px tall): each stage cell is a quarter of the
   pinned stage (≈ (100svh − 88px) / 4, approach-grid.js), too short for the
   50px title + its text, so the title used to be squeezed and clipped. Here
   the cell's spacing tightens (12px top/bottom padding, 6px under the title,
   none under the text: ≈103px of fixed content) and the title never shrinks
   but scales with the screen height to fill what's left, at most 50px — so
   every title and its text always show in full. 900px+ tall: unchanged. */
@media (min-width: 1200px) and (max-height: 860px) {
  .home-ui .approach--grid .ag-step { padding-block: 12px; }
  .home-ui .approach--grid .ag-step__title {
    flex-shrink: 0;
    margin-bottom: 6px;
    /* --ag-title-fit: the room measured in the cell (approach-grid.js ›
       fitTitles), so a 4-line description on narrower laptops is allowed for;
       the svh estimate is the fallback before the script runs */
    /* at most 36px on laptops (set 2026-10-23: 46px crowded the ~160px
       cells and competed with the 75px section title); 900px+ tall keeps
       headline-lg (46px) */
    font-size: clamp(20px, var(--ag-title-fit, calc((25svh - 125px) / 1.1)), 36px);
  }
  .home-ui .approach--grid .ag-step__desc { margin-bottom: 0; }
}

/* FAQ: each question separated by the columns' hairline (1px --line-on-dark,
   as the grid lines) — brought back here from the page's no-lines set-up */
.home-ui.no-lines .faq__card .accordion__item { border-bottom: 1px solid var(--line-on-dark); }
.home-ui.no-lines .faq__card .accordion__item:first-of-type { border-top: 1px solid var(--line-on-dark); }

/* phones: the separators on the same 25px edge as the questions, the + icons
   and the answers (the card inset by the column padding; no inner side
   padding), so the list is one clean column */
/* phones: the stats (250+ …) and the Recognition rows on the page's 25px
   edge, as the headings and text above them (their own 20px side padding
   put them 5px further in than the column padding) */
@media (max-width: 809px) {
  .home-ui .metric,
  .home-ui .award { padding-inline: var(--col-pad); }
}

@media (max-width: 809px) {
  .home-ui .faq__card { width: auto; margin-inline: var(--col-pad); }
  .home-ui .faq__card .accordion__trigger { padding-inline: 0; }
  .home-ui .faq__card .accordion__panel p { padding-inline: 0; }
}


/* Clients 06: the photo in the circle beside the quote (about/profile.png,
   a half-length shot) framed on the face — zoomed in around the head so it
   reads at 40px; the circle itself is unchanged */
:where(.home-ui) .clients__me img {
  transform: scale(1.5);
  transform-origin: 50% 36%;
}

/* hero copy (pages/home.js › heroCopy), static:
   "Helping tech companies turn digital [deck] experience into a scaling advantage." */

/* the deck (after goodface.agency): three work previews stacked as cards.
   All three assets share one aspect ratio (165×123 images, 220×164 clip —
   1.34:1), kept exactly: nothing cropped or stretched, 2px corners. The
   front card is 0.86em tall (the line's old reel height); the two behind it
   are smaller (×0.855, ×0.709) and lower, so their bottom edges show as
   strips under it — the reference's offsets (24.4% / 46.3% of a card). The
   cards move between the three places in 0.6s (pages/home.js › heroDeck). */
:where(.home-ui) .hl-deck { vertical-align: baseline; }

:where(.home-ui) .hl-deck__in {
  position: relative;
  height: 0.86em;
  aspect-ratio: 165 / 123;
  vertical-align: -0.13em;                 /* a little low, clear of line 1's "g" tail */
}

:where(.home-ui) .hl-deck__card {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);   /* the layer order swaps at once: the old front card slips behind */
}

:where(.home-ui) .hl-deck__card[data-pos="0"] { z-index: 3; transform: none; }
:where(.home-ui) .hl-deck__card[data-pos="1"] { z-index: 2; transform: translateY(24.4%) scale(0.855); }
:where(.home-ui) .hl-deck__card[data-pos="2"] { z-index: 1; transform: translateY(46.3%) scale(0.709); }

:where(.home-ui) .hl-deck__card > * {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;                      /* a subtle softening, the same on all three */
  background: var(--c-inverse-container);
}

/* "scaling advantage." and its hand-drawn underline (after goodface.agency): one stroke
   in the heading's white, a little wider than the word, just under its
   baseline; the stroke scales with the type (0.034em ≈ 3px on desktop) and
   draws in once, left to right, as the word lands — then stays put */
:where(.home-ui) .hl-ul {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

:where(.home-ui) .hl-ul__line {
  position: absolute;
  left: -2%;
  top: 0.99em;
  width: 104%;
  max-width: none;                     /* the reset caps svg at 100%, which cut the 2% overhang */
  height: 0.24em;
  overflow: visible;
  pointer-events: none;
}

:where(.home-ui) .hl-ul__line path {
  fill: none;
  stroke: var(--c-on-inverse);
  stroke-width: 0.034em;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* the draw-in dash in on-screen px: --ul-len is the stroke's real drawn
     length, measured by pages/home.js (with a non-scaling stroke on a
     stretched svg, a pathLength-based dash covered only part of the line on
     wide screens). The gap is longer than the line, so nothing shows before
     it's drawn. */
  stroke-dasharray: var(--ul-len) calc(var(--ul-len) * 2);
  stroke-dashoffset: var(--ul-len);
  transition: stroke-dashoffset 1.1s var(--ease-out);
  /* drawn as "scaling advantage." — the last words of the letter rise — comes up
     (--rise-last: when the last letter starts, set by heading-rise.js) */
  transition-delay: calc(var(--rise-last, 0.7s) + 0.3s);
}

:where(.home-ui) .hl-title.is-risen .hl-ul__line path { stroke-dashoffset: 0; }

/* the rise starts from far enough below to clear the hero's tall word masks
   (they leave room for descenders); the deck, whose back cards hang lower,
   from further still */
.hl-title[data-rise] { --rise-from: 140%; }
.hl-title[data-rise] .rise-unit { --rise-from: 200%; }

@media (prefers-reduced-motion: reduce) {
  :where(.home-ui) .hl-ul__line path { stroke-dashoffset: 0; transition: none; }
}

/* no clipped letters: a touch more space between the two lines (0.92 → 1),
   and each word's mask reaches further above and below the line (the
   padding is cancelled by negative margins, so the layout is unchanged) —
   the "g" tails of Delightful and Digital and the cap tops stay whole */
/* the entrance is the letter rise (modules/heading-rise.js, base/motion.css ›
   heading rise): the words hold still in their masks and only their letters
   (and the deck, as one piece) rise */
.hl-title[data-rise] .hl-w > span:not(.rise-unit) { transform: none; transition: none; }

:where(.home-ui) .hl-hero .hl-title { line-height: 1.06; }   /* + the deck sits a touch low (below): a clear gap under the "g" of Digital */

:where(.home-ui) .hl-hero .hl-title .hl-w {
  padding-top: 0.1em;
  padding-bottom: 0.26em;
  margin-top: -0.1em;
  margin-bottom: -0.26em;
}

/* each of the three heading lines stays whole (desktop / tablet) */
:where(.home-ui) .hs-hero-centre .hl-head { width: 100%; }
@media (min-width: 810px) {
  :where(.home-ui) .hl-title .hl-line { white-space: nowrap; }
  :where(.home-ui) .hl-title .hl-br--phone { display: none; }
}

/* phones: "turn digital [deck]" / "experience into a" / "scaling advantage." */
@media (max-width: 809px) {
  :where(.home-ui) .hl-title .hl-br--wide { display: none; }
}

/* desktop: the underline a touch lower, clear of the descenders at the
   large size (as it reads on phones) */
@media (min-width: 1200px) {
  :where(.home-ui) .hl-ul__line { top: 1.08em; }
}

/* hero proof: three avatars, each ringed by a 3px stroke in the hero's own
   dark (--hl-bg) so they read as separate discs where they overlap; the
   award set as the "250+ Clients" block (logo · bold line · mono line) */
/* the separating ring is transparent: no dark outline — each photo has a
   3px gap cut out of it (a mask) where the next one overlaps, so whatever
   is behind (the glass light) shows through between them. Photos are 44px,
   overlapping by 12px → the next one's centre is 54px in, 22px down. */
:where(.home-ui) .hl-hero .hl-avatars img { box-shadow: none; }

:where(.home-ui) .hl-hero .hl-avatars img:not(:last-child) {
  -webkit-mask-image: radial-gradient(circle at 54px 22px, transparent 24.5px, #000 25px);
  mask-image: radial-gradient(circle at 54px 22px, transparent 24.5px, #000 25px);
}

/* more air between the buttons and the clients / award row (was 32px) */
:where(.home-ui) .hs-hero-centre .hl-proof-cell { margin-top: clamp(48px, 6.2svh, 60px); }   /* ~56px on a 900px screen; one step more than heading → buttons */

:where(.home-ui) .hl-award {
  display: flex;
  align-items: center;
  gap: 14px;
}

:where(.home-ui) .hl-award__logo { display: block; width: 66px; height: 42px; flex: none; }

:where(.home-ui) .hl-award b {
  display: block;
  font-size: var(--fs-title-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

:where(.home-ui) .hl-award span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-transform: uppercase;
  opacity: 0.6;
}

/* responsive hero (below 1200px; the centred desktop hero is unchanged):
   badge · heading · buttons · clients / award, and the "I design and create…" intro
   last, at the bottom (it used to sit at the top), left-aligned */
@media (max-width: 1199px) {
  /* the whole stack sits a little higher in the hero (was 36px / 24px on phones) */
  :where(.home-ui) .hl-hero .hl-layout { padding-bottom: 72px; }
  :where(.home-ui) .hl-hero .hl-badge-cell { grid-row: 1; }
  :where(.home-ui) .hl-hero .hl-head { grid-row: 2; }
  :where(.home-ui) .hl-hero .hl-proof-cell { grid-row: 3; }
  :where(.home-ui) .hl-hero .hl-intro {
    grid-row: 4;
    justify-self: start;
    margin-top: 36px;
    padding-bottom: 0;
    text-align: left;
  }
}

/* phones:
   · the heading scales with the screen (never above its 52px) so line 2,
     "Built to [deck] Perform." (7.97em), stays on one line in the content
     width (the window minus the 25px gutters)
   · client photos 36px (from 44px), overlapping 10px; the 3px see-through
     gap is re-cut for the smaller size (next centre 44px in, 18px down)
   · clients and award, stacked, 30px apart (was 18px) */
@media (max-width: 809px) {
  :where(.home-ui) .hl-hero .hl-title { font-size: min(52px, calc((100vw - 50px) / 8.1)); }

  :where(.home-ui) .hl-hero .hl-avatars img { width: 36px; height: 36px; }
  :where(.home-ui) .hl-hero .hl-avatars img + img { margin-left: -10px; }
  :where(.home-ui) .hl-hero .hl-avatars img:not(:last-child) {
    -webkit-mask-image: radial-gradient(circle at 44px 18px, transparent 20.5px, #000 21px);
    mask-image: radial-gradient(circle at 44px 18px, transparent 20.5px, #000 21px);
  }

  :where(.home-ui) .hl-hero .hl-proof { row-gap: 30px; }
  /* the "I design and create…" intro: right-aligned on the right side of the
     content, 48px under the award (was left-aligned, 30px) */
  :where(.home-ui) .hl-hero .hl-intro {
    justify-self: end;
    margin-top: 48px;
    padding-right: var(--col-pad);           /* its right edge on the content edge (25px) */
    text-align: right;
  }
  :where(.home-ui) .hl-hero .hl-layout { padding-bottom: 64px; }
}

/* hero actions: "Explore Work" — the page's pill (4 · buttons), solid white as
   the primary, inverting to the outline on hover; "Watch Reel" — a round play
   button the same height, its label beside it */
:where(.home-ui) .hl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 68px;      /* ~48px under the underline on desktop */
}

:where(.home-ui) .hs-hero-centre .hl-actions { justify-content: center; }

/* Explore Work: the page's outlined pill (white 1.5px stroke, white text;
   hover → white fill, ink text — section 4 · buttons), at 60px */
.home-ui .footer-cta-box.hl-cta {
  height: 60px;
  padding: 0 28px;
  font-size: var(--fs-title-md);
}

.home-ui .footer-cta-box.hl-cta .cta-arrow { width: 20px; height: 20px; }

/* Watch Reel: the round play button alone (its name is in aria-label) */
:where(.home-ui) .hl-reel-btn {
  display: inline-flex;
  border-radius: 50%;
  cursor: pointer;
}

/* Watch Reel: a filled white circle with a dark play icon; hover → the
   outline (transparent, white stroke, white icon) — the inverse of the pill */
:where(.home-ui) .hl-reel-btn__circle {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--c-on-inverse);
  box-shadow: inset 0 0 0 1.5px var(--c-on-inverse);
  color: var(--c-ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

:where(.home-ui) .hl-reel-btn__circle svg { width: 24px; height: 24px; margin-left: 3px; }   /* optical centre of the triangle */

:where(.home-ui) .hl-reel-btn:hover .hl-reel-btn__circle,
:where(.home-ui) .hl-reel-btn:focus-visible .hl-reel-btn__circle {
  background-color: transparent;
  color: var(--c-on-inverse);
}

:where(.home-ui) .hl-reel-btn:active .hl-reel-btn__circle { transform: scale(0.95); }

@media (max-width: 1199px) {
  :where(.home-ui) .hl-actions { margin-top: 52px; }
}

@media (max-width: 809px) {
  :where(.home-ui) .hl-actions { margin-top: 40px; }
}

/* while the heading's fluid hover draws the words, the deck and the
   underline stay as they are */
:where(.home-ui) .hl-title.is-fluid-src { opacity: 1; }
:where(.home-ui) .hl-title.is-fluid-src .hl-w:not(.hl-deck) { opacity: 0; }


/* APPROVED 2026-10-18: hero spacing, layout and responsive values (this
   block, the laptop block below, .hs-hero-centre, .hl-actions and
   hero-lab.css). Spec: DESIGN.md › Homepage › Hero. Change only on request.

   desktop hero: the centred stack sets the height. On short laptop screens
   (e.g. 1536×730) the hero grows a little past the window instead of the
   stack riding up under the header.
   --hero-top: space between the nav and the label.
   --hero-air: space under the clients row.
   --hero-intro: the "I design and create…" intro's distance from the
   bottom, smaller than --hero-air, so the intro sits lower than the
   clients row (staggered, not side by side). */
:where(.home-ui) .hl-hero {
  --hero-top: clamp(32px, 4.5svh, 80px);
  --hero-air: clamp(64px, 9svh, 104px);
  --hero-intro: clamp(16px, 2.5svh, 40px);
}
:where(.home-ui) .hl-hero.is-centred { height: auto; }
:where(.home-ui) .hl-hero.is-centred .hl-layout { padding-bottom: var(--hero-intro); }

/* laptop screens (desktop width, short window): the stack a little tighter,
   same rising rhythm — label → heading ~33px, underline → buttons ~38px,
   buttons → clients 44px (visible space) */
@media (min-width: 1200px) and (max-height: 860px) {
  :where(.home-ui) .hs-hero-centre .hl-badge-cell { margin-bottom: -4px; }
  :where(.home-ui) .hs-hero-centre .hl-actions { margin-top: 58px; }
  :where(.home-ui) .hs-hero-centre .hl-proof-cell { margin-top: 44px; }
}

/* header: transparent over the hero, its usual --c-inverse everywhere else
   (.is-transparent toggled by pages/home.js) */
:where(.home-ui) .site-header {
  transition: transform var(--dur) var(--ease-in-out), background-color 0.5s var(--ease);
}

:where(.home-ui) .site-header.is-transparent {
  background-color: transparent;
}

/* the open mobile menu always gets the solid bar, in the menu's own dark
   (.is-menu-open is set on <html> by header.js, so it's matched there —
   above body.home-ui, not inside it) */
html.is-menu-open :where(.home-ui) .site-header.is-transparent {
  background-color: var(--c-inverse);
}


/* 6 · brands slider (in place of the Bio strip) — two rows inside the
   content container, 5 logos in view (desktop and tablet; 3 on phones). Each
   track holds its set twice and moves exactly one set-width (−50%), so the
   loop is seamless; both rows travel at the same slow pace (8s per logo →
   ≈35px/s on desktop). Logos are sized for equal visual weight (below).
   The edge fade is a transparency mask, so the logos dissolve into whatever
   dark is behind them — no added colour. */
:where(.home-ui) .brands__slider {
  container-type: inline-size;
  display: grid;
  row-gap: 12px;
  /* a narrower strip, centred (80% of the content width on desktop, 90% on
     tablets): five slots across it, so the logos sit closer together */
  width: 80%;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

:where(.home-ui) .brands__row {
  --cell: calc(100cqw / 5);
  overflow: hidden;
}

@media (max-width: 1199px) {
  :where(.home-ui) .brands__slider { width: 90%; }
}

/* space between the hero and the logos: on desktop the hero keeps ~124px of
   its own room under its last line (the "I design and create…" intro), so the
   section gap is shortened by that much — the visible gap (last hero text →
   first logos) then matches the one from the logos to "What I Do" (~186px) */
@media (min-width: 1200px) {
  :where(.home-ui) .page > .hl-hero + .brands { margin-top: calc(var(--section-gap) - 124px); }
}

/* a little more room between the logos and "What I Do" (+50px; +30px on phones) */
:where(.home-ui) .brands + .about--what { margin-top: calc(var(--section-gap) + 50px); }

@media (max-width: 809px) {
  :where(.home-ui) .brands + .about--what { margin-top: calc(var(--section-gap) + 30px); }
}

:where(.home-ui) .brands__track {
  display: flex;
  width: max-content;
  animation: brands-left calc(var(--n) * 8s) linear infinite;
  will-change: transform;
}

:where(.home-ui) .brands__row--right .brands__track {
  animation-name: brands-right;
}

@keyframes brands-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes brands-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

:where(.home-ui) .brands__cell {
  display: flex;
  flex: 0 0 var(--cell);
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 0 var(--col-pad);
}

/* optical balance: each logo carries its own width (--w, px at desktop, set
   in the markup) so every mark covers about the same visible area (≈3400px²
   of drawn logo, nudged for how dense its ink is, wordmarks capped at 180px
   wide) — long thin wordmarks get wider and shorter, compact icon + text
   marks narrower and taller, and none dominates. Widths include each file's
   own transparent margin (logos 4–7), which is symmetric, so they stay
   centred. --k scales the whole set per breakpoint. */
:where(.home-ui) .brands__cell img {
  --k: 1;
  width: calc(var(--w) * var(--k) * 1px);
  max-width: none;
  height: auto;
  opacity: 0.7;
}

@media (max-width: 809px) {
  :where(.home-ui) .brands__slider { width: 100%; }     /* phones: the full width, three slots */
  :where(.home-ui) .brands__row { --cell: calc(100cqw / 3); }
  :where(.home-ui) .brands__cell { height: 72px; padding: 0 10px; }
  :where(.home-ui) .brands__cell img { --k: 0.58; }   /* phone slots are ≈120px */
}

@media (prefers-reduced-motion: reduce) {
  :where(.home-ui) .brands__track { animation: none; }
}

/* 7 · "What I Do" (About on this page) — reference: kstoimenov.com › About.
   Centred heading (our eyebrow, as "Testimonials(05)"); the statement in
   our About headline type across the container, as one centred block of
   left-aligned text; the caption keeps its place at the right below it.
   Each word's opacity is set while scrolling (pages/home.js ›
   wordLight): 12% at rest (28% on phones), a soft 6-word front. */
:where(.home-ui) .about--what .about__statement {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* label + statement left-aligned */
}

/* the statement keeps its set lines (<br class="wl-br">): on desktop it uses
   the full content width, and below ~1440px the type eases down just enough
   (the longest line is ≈26.1em) that every line still fits on one row; a
   little more line height (1.1 instead of 0.9) for an open, easy read.
   Below 1200px the set breaks give way and the text wraps freely. */
:where(.home-ui) .about--what .about__text {
  width: 100%;
  max-width: none;
  margin-top: 30px;
  font-size: min(var(--fs-headline-lg), calc((100vw - 80px) / 27));
  line-height: 1.1;
  text-align: left;
  text-transform: none;            /* sentence case, as written */
}

:where(.home-ui) .about--what .wl {
  opacity: 0.12;
  will-change: opacity;
}

/* key words underlined, as the reference: a thin rule in the text colour
   just under the baseline, unbroken by descenders; it lights up with its
   word (the opacity is on the word) */
:where(.home-ui) .about--what .wl-line {
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

/* the three icons in the statement (about-1/2/3.svg, inline) — as the
   reference: each sits in the line like a word and fades in with the words
   around it; once lit it turns brand green and plays its motion (pages/
   home.js › wordLight); back to the text colour when scrolled back */
:where(.home-ui) .about--what .wl-glyph {
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  vertical-align: -0.08em;
  color: var(--c-on-inverse);
  transition: color 0.3s var(--ease);
  will-change: transform;
}

:where(.home-ui) .about--what .wl-glyph svg { display: block; width: 100%; height: 100%; }

:where(.home-ui) .about--what .wl-glyph.is-lit { color: var(--c-brand-green); }

:where(.home-ui) .about--what .about__caption {
  grid-column: 4 / span 1;
  margin-top: 60px;
}

@media (max-width: 1199px) {
  :where(.home-ui) .about--what .about__caption { grid-column: 1 / -1; }
  :where(.home-ui) .about--what .about__text { font-size: var(--fs-headline-lg); }
  :where(.home-ui) .about--what .wl-br { display: none; }
}

@media (max-width: 809px) {
  :where(.home-ui) .about--what .about__text { line-height: 1.05; }
}

/* "Driven result", its own section after Clients 06: the framed image in
   cols 1–2; beside it (cols 3–4, as tall as the image) the label + heading
   at the top and the note (About caption style) at the bottom right, level
   with the image's bottom edge; then the stats */
:where(.home-ui) .about--result .about__result {
  margin-top: 0;
  align-items: stretch;
}

/* desktop: the side column is exactly as tall as the portrait and split at
   the shoulder line (50% of the photo's height, its right shoulder): the
   label sits just above the line, the heading starts on it, and the note
   follows on the heading's left edge, its last line level with the
   portrait's bottom edge. */
:where(.home-ui) .about--result .about__result-side {
  grid-column: 3 / span 2;
  display: grid;
  grid-template-rows: 50% auto 1fr;
  padding: 0 var(--col-pad);
}

:where(.home-ui) .about--result .about__result-lead { display: contents; }

:where(.home-ui) .about--result .about__result-lead > .eyebrow {
  display: flex;
  width: max-content;
  align-self: end;
  margin-bottom: 30px;
}

:where(.home-ui) .about--result .about__result-title {
  margin: 0;
}

/* the dotted portrait in place of the framed image (components/dot-portrait.js):
   4:5 in cols 1–2, no frame; fades to 0% opacity at the bottom so it melts
   into the page. The plain photo shows first, then crossfades (0.6s) to the
   canvas — as the reference. */
:where(.home-ui) .about--result .dot-portrait {
  position: relative;
  aspect-ratio: 1247 / 1320;          /* the photo's own shape — shown whole, no crop */
  /* never taller than the screen (less the header and a little air), and on
     short screens small enough that the text under the shoulder line
     (heading + note ≈ 370px) still fits — so the whole portrait, heading
     and note are in view together */
  width: min(100%, calc((100svh - 140px) * 1247 / 1320), calc((200svh - 940px) * 1247 / 1320));
  align-self: start;
  padding: 0;
  overflow: hidden;
  background: none;
  /* bottom fade: starts under the chest and eases out (an ease-in-out
     curve, not a straight ramp), reaching fully transparent a little above
     the photo's own bottom edge — where the arms are cut — so no edge shows */
  --fade: linear-gradient(to bottom,
    #000 0, #000 42%,
    rgba(0, 0, 0, 0.94) 50%, rgba(0, 0, 0, 0.8) 58%, rgba(0, 0, 0, 0.6) 66%,
    rgba(0, 0, 0, 0.38) 74%, rgba(0, 0, 0, 0.2) 81%, rgba(0, 0, 0, 0.08) 87%,
    rgba(0, 0, 0, 0.02) 91%, transparent 94%);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

:where(.home-ui) .dot-portrait__base,
:where(.home-ui) .dot-portrait__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s;
}

:where(.home-ui) .dot-portrait__base {
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
}

:where(.home-ui) .dot-portrait__canvas {
  display: block;
  opacity: 0;
}

:where(.home-ui) .dot-portrait.is-ready .dot-portrait__base { opacity: 0; }
:where(.home-ui) .dot-portrait.is-ready .dot-portrait__canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  :where(.home-ui) .dot-portrait__canvas { display: none; }
}

/* laptops (desktop width, ≤860px tall): the portrait a little larger (the
   short-screen cap eased from 200svh − 940px to 200svh − 880px, ≈12% wider
   at 720px tall; screens 800px+ are already on the 100svh cap, unchanged)
   and 40px further right in its columns */
@media (min-width: 1200px) and (max-height: 860px) {
  :where(.home-ui) .about--result .dot-portrait {
    /* larger again and centred in its columns (2026-10-24): the caps eased
       to 100svh − 95px and 200svh − 825px, so ≈600×635 at 1536×730 (was
       548×580), still clear of the header; centred instead of a 40px nudge */
    width: min(100%, calc((100svh - 95px) * 1247 / 1320), calc((200svh - 825px) * 1247 / 1320));
    margin-inline: auto;
  }
}

/* the note: the Selected Work note style (.works__note) — 22px title type,
   two-tone, indented first line — at the bottom right of the container,
   its last line level with the portrait's bottom edge */
:where(.home-ui) .about--result .about__result-note {
  align-self: end;
  justify-self: end;
  max-width: 400px;
  margin: 30px 0 0;
  line-height: 1.1;                /* proportional to title-lg (was 24.2px = 1.1 × 22px) */
  text-indent: 2em;
}

/* laptops (desktop width, ≤860px tall): a little more air between "Most
   designers…" and the note, 46px (was 30px): ≈29px of visible space instead
   of 13px (2026-10-24). After the rule above, so it wins. */
@media (min-width: 1200px) and (max-height: 860px) {
  :where(.home-ui) .about--result .about__result-note { margin-top: 46px; }
  /* the text column is at least as tall as the portrait (--dr-ph, set by
     pages/home.js › resultHeight) and grows past it when the heading + note
     are taller, so the stats keep their 70px below the note (they used to
     run into it on laptops). The shoulder-line row stays half the portrait. */
  :where(.home-ui) .about--result .about__result-side {
    align-self: start;
    min-height: var(--dr-ph);
    grid-template-rows: calc(var(--dr-ph) / 2) auto 1fr;
  }
}

/* below desktop the text stacks under the portrait, as before */
@media (max-width: 1199px) {
  :where(.home-ui) .about--result .about__result-side {
    grid-column: 1 / -1;
    grid-template-rows: none;
    padding: 40px var(--col-pad) var(--col-pad);
  }
  :where(.home-ui) .about--result .about__result-lead > .eyebrow { margin-bottom: 30px; }
  :where(.home-ui) .about--result .about__result-note { margin-top: 40px; justify-self: start; }
}

@media (max-width: 809px) {
  :where(.home-ui) .about--what .wl { opacity: 0.28; }
}


/* Services bottom spacing = the space above the black Testimonials section
   (05): its --section-gap (150px; 90px on phones), in place of the light
   band's 70px */
.home-ui #services {
  padding-bottom: var(--section-gap);
}

/* Services heading ("Design that works for you") at --fs-headline-lg (50px)
   instead of the 80px display size — under review; this heading only */
.home-ui #services .section-head__title {
  font-size: var(--fs-headline-lg);
}


/* Services tags: 13px (--fs-mono-sm) */
.home-ui .svc-tag { font-size: var(--fs-mono-sm); }

/* Services: labels sit in the right column, right-aligned */
.home-ui .svc-row__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* as the text they replace: Services tags go left under the title */
@media (max-width: 1199px) {
  .home-ui .svc-row__tags { justify-content: flex-start; }
}


/* button sits at its own size, not stretched across its column */
.home-ui .works__cta { justify-self: start; align-self: end; }

/* phones: "Explore Our Work" at the hero button's smaller size (60px tall,
   18px label, 20px ↗), centred, 48px under the note */
@media (max-width: 809px) {
  .home-ui .works__cta {
    justify-self: center;
    height: 60px;
    margin-top: 48px;
    padding: 0 28px;
    font-size: var(--fs-title-md);
  }

  .home-ui .works__cta .cta-arrow { width: 20px; height: 20px; }
}

/* Testimonials (card): scroll-driven only — no PREV / NEXT on this page
   (root carries data-no-nav, so case-scroll.js leaves them out). The
   content sits centred in the card as before; the 40px under the client
   that the nav row used to provide is kept. */
.home-ui .cs--card .cs-card {
  justify-content: center;
}

.home-ui .cs--card .cs-body {
  flex: 0 0 auto;
  padding-bottom: 40px;
}

/* phones: no scroll story — the card, the image and Previous / Next under
   it (components/case-scroll.css); the client sits 48px above the image */
@media (max-width: 809px) {
  .home-ui .cs--card .cs-body { padding-bottom: 0; }
}


/* hero label ("Product design & engineering…"): no background box — just the text
   (with its status dot); same place and alignment */
.home-ui .hl-badge.badge {
  background: none;
}

/* when the label wraps (phones), the box grows instead of the text
   spilling into the gap above the heading: same space above and below
   the text as the one-line 60px box */
.home-ui .hl-badge.badge {
  height: auto;
  min-height: 60px;
  padding-block: 20px;
  padding-block: calc((60px - 1lh) / 2);
}